adds new generated sizes with docs

docsite/index.html

@@ -2573,7 +2573,16 @@ <h5>Usage Sample</h5>
     <section id="media-queries">
       <header class="just-for-gap">
         <h2>Media Queries</h2>
-        <p>Currently one step ahead of <a href="https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media">the CSS spec</a>, Open Props offers named media queries with the <code>@custom-media</code> syntax. Available only with <a href="https://github.com/postcss/postcss-custom-media">this PostCSS plugin</a>, for now 😈</p>
+        <div class="block-wrap">
+          <p>Currently one step ahead of <a href="https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media">the CSS spec</a>, Open Props offers named media queries with the <code>@custom-media</code> syntax. Available only with <a href="https://github.com/postcss/postcss-custom-media">this PostCSS plugin</a>, for now 😈</p>
+
+          <blockquote class="icon-quote indigo">
+            <svg viewBox="0 0 24 24">
+              <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+            </svg>
+            <span>Media query widths also available as custom properties. Use like <code class="language-css">var(--size-sm)</code></span>
+          </blockquote>
+        </div>
         <div class="media-query-chart">
           <div>
             <svg height="24" width="24">

src/props.sizes.css

@@ -32,4 +32,11 @@
   --size-header-1: 20ch;
   --size-header-2: 25ch;
   --size-header-3: 35ch;
+  --size-xxs: 240px;
+  --size-xs: 360px;
+  --size-sm: 480px;
+  --size-md: 768px;
+  --size-lg: 1024px;
+  --size-xl: 1440px;
+  --size-xxl: 1920px;
 }