docs: replaced SCSS variables with CSS variables on the Colors page o…

…f the documentation site

www/src/components/_doc-elements.scss

@@ -324,3 +324,9 @@
 .pgn-doc__box-shadow-toolkit--controls-box--remove-btn svg {
   color: var(--pgn-color-white);
 }
+
+.color-palette {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
+  grid-row-gap: 2rem;
+}

www/src/pages/foundations/colors.tsx

@@ -98,13 +98,12 @@ Swatch.defaultProps = {
 const renderColorRamp = (themeName: string, unusedLevels: number[]) => (
   <div
     key={`${themeName}`}
-    style={{ flexBasis: '24%', marginRight: '1%', marginBottom: '2rem' }}
   >
     <h2 className="h5">{themeName}</h2>
     {levels.map(level => (
       <Swatch
-        key={`$${themeName}-${level}`}
-        name={`$${themeName}-${level}`}
+        key={`${themeName}-${level}`}
+        name={`var(--pgn-color-${themeName}-${level})`}
         colorClassName={utilityClasses.bg(themeName, level)}
         isUnused={unusedLevels.includes(level)}
       />
@@ -130,123 +129,46 @@ export default function ColorsPage({ data }: IColorsPage) {
         {/* eslint-disable-next-line react/jsx-pascal-case */}
         <SEO title="Colors" />
         <h1>Colors</h1>
-        <div className="d-flex flex-wrap">
+        <div className="color-palette mb-3">
           {colors
             .slice(0, 3)
             .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}
-          <div
-            style={{
-              flexBasis: '19%',
-              marginRight: '1%',
-              marginBottom: '2rem',
-            }}
-          >
+          <div>
             <h2 className="h5">accents</h2>
 
-            <Swatch name="$accent-a" colorClassName="bg-accent-a" />
-            <Swatch name="$accent-b" colorClassName="bg-accent-b" />
+            <Swatch name="var(--pgn-color-accent-a)" colorClassName="bg-accent-a" />
+            <Swatch name="var(--pgn-color-accent-b)" colorClassName="bg-accent-b" />
           </div>
 
           {colors
             .slice(3)
             .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}
         </div>
 
-        <h3>SCSS Color Usage</h3>
-        <p>Include these colors in scss files in one of two ways:</p>
+        <h3>CSS Color Usage</h3>
 
         <h4>Variable name</h4>
         <code className="d-block mb-4 lead bg-gray-100 p-3">
-          {'// $color_name-level '}
+          {'// var(--pgn-color-name-level) '}
           <br />
-          $primary-100
+          var(--pgn-color-primary-100)
           <br />
-          $primary-200
+          var(--pgn-color-primary-200)
           <br />
-          $brand-100
+          var(--pgn-color-brand-100)
           <br />
-          $brand-200
-        </code>
-
-        <h4>Mixin (deprecated)</h4>
-        <code className="d-block mb-4 lead bg-gray-100 p-3">
-          theme-color($color-name, $variant)
+          var(--pgn-color-brand-200)
         </code>
 
+        <h4>With default value</h4>
         <p>
-          Using the variable name instead of the theme-color mixin will make
-          later upgrade paths easier. Paragon may begin to adopt CSS variables
-          for theming and attempt to eliminate mixins from the public api.
+          Using a default value in CSS variables allows you to set a default value for a variable,
+          which will be used if the primary value of the variable is not defined or not available.
         </p>
-
-        <table className="pgn-doc__table mb-2">
-          <tbody>
-            <tr>
-              <td className="p-3">
-                <strong>Color Name</strong>
-                <br />A theme color
-              </td>
-              <td className="p-3 align-baseline">
-                {colors.map(({ themeName }) => (
-                  <code key={themeName} className="mr-2">
-                    {themeName}
-                  </code>
-                ))}
-              </td>
-            </tr>
-            <tr>
-              <td className="p-3 align-baseline">
-                <strong>Variant</strong>
-                <br />
-                <p>A number level or element type</p>
-              </td>
-              <td className="p-3">
-                <strong className="d-block">Levels </strong>
-                {levels.map((level) => (
-                  <code key={level} className="mr-2">
-                    {level}
-                  </code>
-                ))}
-                <br />
-                <strong className="d-block">Element types </strong>
-                {[
-                  'background',
-                  'disabled-border',
-                  'border',
-                  'icon',
-                  'active-border',
-                  'focus',
-                  'graphic',
-                  'default',
-                  'light-text',
-                  'hover',
-                  'text',
-                  'active',
-                  'dark-text',
-                ].map((element) => (
-                  <code key={element} className="mr-2">
-                    {element}
-                  </code>
-                ))}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>Example</h4>
-        <code className="d-block mb-2 bg-gray-100 p-3">
-          border: solid 1px <strong>$gray-300</strong>;
-        </code>
-
-        <code className="d-block mb-2 bg-gray-100 p-3">
-          border: solid 1px{' '}
-          <strong>theme-color(&ldquo;gray&rdquo;, &ldquo;border&rdquo;)</strong>
-          ;
-        </code>
-
-        <code className="d-block mb-4 bg-gray-100 p-3">
-          border: solid 1px{' '}
-          <strong>theme-color(&ldquo;gray&rdquo;, 300)</strong>;
+        <code className="d-block mb-4 lead bg-gray-100 p-3">
+          {'// var(--pgn-color-name-level), default variable '}
+          <br />
+          var(--pgn-color-brand-100, var(--pgn-color-primary-200))
         </code>
 
         <h3>CSS Class Utilities</h3>