feat: update website & init template palette to pass WCAG test; include contrast check in ColorGenerator

packages/create-docusaurus/templates/classic/src/css/custom.css

@@ -6,16 +6,27 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary: #18816a;
+  --ifm-color-primary-dark: #16745f;
+  --ifm-color-primary-darker: #146e5a;
+  --ifm-color-primary-darkest: #115a4a;
+  --ifm-color-primary-light: #1a8e75;
+  --ifm-color-primary-lighter: #1c947a;
+  --ifm-color-primary-lightest: #1fa88a;
   --ifm-code-font-size: 95%;
 }
 
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+html[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;

packages/create-docusaurus/templates/facebook/src/css/custom.css

@@ -15,16 +15,27 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary: #18816a;
+  --ifm-color-primary-dark: #16745f;
+  --ifm-color-primary-darker: #146e5a;
+  --ifm-color-primary-darkest: #115a4a;
+  --ifm-color-primary-light: #1a8e75;
+  --ifm-color-primary-lighter: #1c947a;
+  --ifm-color-primary-lightest: #1fa88a;
   --ifm-code-font-size: 95%;
 }
 
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+html[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgb(72, 77, 91);
   display: block;

website/docs/styling-layout.md

@@ -57,7 +57,15 @@ Infima uses 7 shades of each color. We recommend using [ColorBox](https://www.co
 
 Alternatively, use the following tool to generate the different shades for your website and copy the variables into `/src/css/custom.css`.
 
-<ColorGenerator/>
+<!-- TODO move to ColorGenerator & replace with standalone admonition -->
+
+:::tip
+
+Aim for at least [WCAG-AA contrast ratio](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast) to ensure readability. You can use [alternative palettes in dark mode](#dark-mode) because one color doesn't usually work in both light and dark mode.
+
+:::
+
+<ColorGenerator />
 
 ### Dark Mode {#dark-mode}
 

website/src/components/ColorGenerator/index.tsx

@@ -64,12 +64,21 @@ const COLOR_SHADES: Record<
   },
 };
 
-const DEFAULT_PRIMARY_COLOR = '3578e5';
+const DEFAULT_PRIMARY_COLOR = '#25c2a0';
+const LIGHT_BACKGROUND_COLOR = 'white';
+const DARK_BACKGROUND_COLOR = '#181920';
+
+function wcagContrast(foreground: string, background: string) {
+  const contrast = Color(foreground).contrast(Color(background));
+  // eslint-disable-next-line no-nested-ternary
+  return contrast > 7 ? 'AAA' : contrast > 4.5 ? 'AA' : 'Fail';
+}
 
 function ColorGenerator(): JSX.Element {
+  const [inputColor, setInputColor] = useState(DEFAULT_PRIMARY_COLOR);
   const [baseColor, setBaseColor] = useState(DEFAULT_PRIMARY_COLOR);
   const [shades, setShades] = useState(COLOR_SHADES);
-  const color = Color(`#${baseColor}`);
+  const color = Color(baseColor);
   const adjustedColors = Object.keys(shades)
     .map((shade) => ({
       ...shades[shade],
@@ -80,6 +89,18 @@ function ColorGenerator(): JSX.Element {
       hex: color.darken(value.adjustment).hex(),
     }));
 
+  function updateColor(event: React.ChangeEvent<HTMLInputElement>) {
+    // Only prepend # when there isn't one.
+    // e.g. ccc -> #ccc, #ccc -> #ccc, ##ccc -> ##ccc,
+    const colorValue = event.target.value.replace(/^(?=[^#])/, '#');
+    setInputColor(colorValue);
+
+    try {
+      setBaseColor(Color(colorValue).hex());
+    } catch {
+      // Don't update for invalid colors.
+    }
+  }
   return (
     <div>
       <p>
@@ -89,29 +110,28 @@ function ColorGenerator(): JSX.Element {
         </label>{' '}
         <input
           id="primary_color"
+          type="text"
           className={styles.input}
-          defaultValue={baseColor}
-          onChange={(event) => {
-            // Replace all the prefix '#' with an empty string.
-            // For example, '#ccc' -> 'ccc', '##ccc' -> 'ccc'
-            const colorValue = event.target.value.replace(/^#+/, '');
-
-            try {
-              Color(`#${baseColor}`);
-              setBaseColor(colorValue);
-            } catch {
-              // Don't update for invalid colors.
-            }
-          }}
+          value={inputColor}
+          onChange={updateColor}
+        />
+        <input
+          type="color"
+          className={styles.colorInput}
+          // value has to always be a valid color, so baseColor instead of inputColor
+          value={baseColor}
+          onChange={updateColor}
         />
       </p>
       <div>
-        <table>
+        <table className={styles.colorTable}>
           <thead>
             <tr>
               <th>CSS Variable Name</th>
               <th>Hex</th>
               <th>Adjustment</th>
+              <th>Light contrast</th>
+              <th>Dark contrast</th>
             </tr>
           </thead>
           <tbody>
@@ -160,6 +180,22 @@ function ColorGenerator(): JSX.Element {
                         />
                       )}
                     </td>
+                    <td
+                      style={{
+                        fontSize: 'medium',
+                        backgroundColor: LIGHT_BACKGROUND_COLOR,
+                        color: hex,
+                      }}>
+                      <b>{wcagContrast(hex, LIGHT_BACKGROUND_COLOR)}</b>
+                    </td>
+                    <td
+                      style={{
+                        fontSize: 'medium',
+                        backgroundColor: DARK_BACKGROUND_COLOR,
+                        color: hex,
+                      }}>
+                      <b>{wcagContrast(hex, DARK_BACKGROUND_COLOR)}</b>
+                    </td>
                   </tr>
                 );
               })}
@@ -170,7 +206,7 @@ function ColorGenerator(): JSX.Element {
         Replace the variables in <code>src/css/custom.css</code> with these new
         variables.
       </p>
-      <CodeBlock className="css">
+      <CodeBlock className="language-css">
         {adjustedColors
           .sort((a, b) => a.codeOrder - b.codeOrder)
           .map((value) => `${value.variableName}: ${value.hex.toLowerCase()};`)

website/src/components/ColorGenerator/styles.module.css

@@ -21,3 +21,15 @@
   font-size: var(--ifm-font-size-base);
   padding: 0.5rem;
 }
+
+.colorInput {
+  border-color: var(--ifm-color-content-secondary);
+  border-radius: var(--ifm-global-radius);
+  border-style: solid;
+  border-width: var(--ifm-global-border-width);
+  margin: 0.4rem;
+}
+
+.colorTable {
+  font-size: small;
+}

website/src/css/custom.css

@@ -13,6 +13,25 @@
   --site-primary-hue-saturation: 167, 68%;
   --site-primary-hue-saturation-light: 167, 56%; /* do we really need this extra one? */
 
+  --ifm-color-primary: hsl(var(--site-primary-hue-saturation), 30%);
+  --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation), 26%);
+  --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation), 23%);
+  --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation), 17%);
+
+  --ifm-color-primary-light: hsl(var(--site-primary-hue-saturation-light), 39%);
+  --ifm-color-primary-lighter: hsl(
+    var(--site-primary-hue-saturation-light),
+    47%
+  );
+  --ifm-color-primary-lightest: hsl(
+    var(--site-primary-hue-saturation-light),
+    58%
+  );
+
+  --ifm-color-feedback-background: #fff;
+}
+
+html[data-theme='dark'] {
   --ifm-color-primary: hsl(var(--site-primary-hue-saturation), 45%);
   --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation), 41%);
   --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation), 38%);
@@ -27,7 +46,6 @@
     var(--site-primary-hue-saturation-light),
     73%
   );
-
   --site-color-feedback-background: #fff;
   --site-color-favorite-background: #f6fdfd;
   --site-color-tooltip: #fff;

website/src/pages/styles.module.css

@@ -39,6 +39,7 @@
 .announcementDark {
   background-color: #20232a;
   color: #fff;
+  --ifm-link-color: hsl(var(--site-primary-hue-saturation), 45%);
 }
 
 .announcementInner {
@@ -49,6 +50,8 @@
 .hero {
   background-color: #2b3137;
   padding: 48px;
+  --ifm-color-primary: hsl(var(--site-primary-hue-saturation), 45%);
+  --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation), 41%);
 }
 
 .heroInner {
@@ -104,6 +107,10 @@
   margin-top: 24px;
 }
 
+.indexCtas a, .indexCtas a:hover {
+  color: black;
+}
+
 .indexCtas a:last-of-type {
   margin: 20px 36px;
 }