Merge pull request #336 from act-org/encourage-colors

Add colors to theme more flexible

README.md

@@ -393,10 +393,15 @@ It is important that we accurately capture what type of development we are doing
 git commit -m "docs: Added stories for Alert"
 ```
 
-* For changes to components, use `fix` or `feat`:
+* For patches to existing components, use `fix`:
 
 ```bash
 git commit -m "fix: Fixed Snackbar not appear in center of screen"
+```
+
+* For new functionality, use `feat`:
+
+```bash
 git commit -m "feat: Added Carousel component"
 ```
 

src/_foundations/Colors/Colors.mdx

@@ -0,0 +1,43 @@
+
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+
+import colors from 'src/styles/themeEncourage/colors'
+
+<Meta title="Foundations / Colors / ENCOURAGE" />
+
+<h1>ENCOURAGE</h1>
+<p>Encourage Colors as defined in the Encourage Design System</p>
+<p>`import colors from '@actinc/dls/styles/themeEncourage/colors'`</p>
+<ColorPalette>
+{
+  Object.keys(colors).map((colorCategory) => {
+    switch (colorCategory) {
+      case 'surface':
+        return Object.keys(colors[colorCategory]).map((surfaceColor) => <ColorItem
+          title={`surface.${surfaceColor}`}
+          subtitle="Surface"
+          colors={Object.keys(colors[colorCategory][surfaceColor]).reduce((a, b) => ({
+            ...a,
+            [b]: colors[colorCategory][surfaceColor][b],
+          }), {})}
+        />)
+      case 'utility':
+        return Object.keys(colors[colorCategory]).map((utilityColor) => <ColorItem
+          title={`utility.${utilityColor}`}
+          subtitle="Utility"
+          colors={{[utilityColor]: colors[colorCategory][utilityColor]}}
+        />)
+      default:
+        return <ColorItem
+          title={colorCategory}
+          subtitle="Brand"
+          colors={Object.keys(colors[colorCategory]).reduce((a, b) => ({
+            ...a,
+            [b]: colors[colorCategory][b],
+          }), {})}
+        />
+      }
+  })
+}
+
+</ColorPalette>

src/components/AppBarNavigation/__snapshots__/index.test.tsx.snap

@@ -162,7 +162,7 @@ exports[`AppBarNavigation ENCOURAGE theme matches the snapshot 1`] = `
     class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorTransparent MuiAppBar-positionStatic css-16h2o09-MuiPaper-root-MuiAppBar-root"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-1vu6lci-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-p0r7j9-MuiTypography-root-MuiLink-root"
       to="https://act-et.org"
     >
       <img
@@ -179,11 +179,11 @@ exports[`AppBarNavigation ENCOURAGE theme matches the snapshot 1`] = `
         class="MuiGrid-root MuiGrid-item css-x7bhrq-MuiGrid-root"
       >
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-ox10af-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-qox753-MuiTypography-root-MuiLink-root"
           to="#"
         >
           <p
-            class="MuiTypography-root MuiTypography-body1 css-nisqju-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-juuzfu-MuiTypography-root"
           >
             Home
           </p>
@@ -193,11 +193,11 @@ exports[`AppBarNavigation ENCOURAGE theme matches the snapshot 1`] = `
         class="MuiGrid-root MuiGrid-item css-x7bhrq-MuiGrid-root"
       >
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-ox10af-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-qox753-MuiTypography-root-MuiLink-root"
           to="#"
         >
           <p
-            class="MuiTypography-root MuiTypography-body1 css-bkgv8l-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-1j7rahv-MuiTypography-root"
           >
             Other Page
           </p>

src/components/EmptyState/__snapshots__/index.test.tsx.snap

@@ -136,7 +136,7 @@ exports[`EmptyState ENCOURAGE theme matches the snapshot 1`] = `
       Description
     </p>
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1ohtedi-MuiButtonBase-root-MuiButton-root"
+      class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-yifhv8-MuiButtonBase-root-MuiButton-root"
       tabindex="0"
       type="button"
     >

src/components/FormCheckbox/__snapshots__/index.test.tsx.snap

@@ -137,7 +137,7 @@ exports[`FormCheckbox ENCOURAGE theme matches the snapshot 1`] = `
       id="primarycheckbox"
     >
       <span
-        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-134j3br-MuiButtonBase-root-MuiCheckbox-root"
+        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-bwsz36-MuiButtonBase-root-MuiCheckbox-root"
       >
         <input
           class="PrivateSwitchBase-input css-1m9pwf3"

src/components/FormInput/__snapshots__/index.test.tsx.snap

@@ -108,7 +108,7 @@ exports[`FormInput ENCOURAGE theme matches the snapshot 1`] = `
     class="MuiFormControl-root css-jayakb-MuiFormControl-root"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-oi448n-MuiFormLabel-root-MuiInputLabel-root"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-rsrurj-MuiFormLabel-root-MuiInputLabel-root"
       data-shrink="true"
     >
       <div
@@ -122,7 +122,7 @@ exports[`FormInput ENCOURAGE theme matches the snapshot 1`] = `
       </div>
     </label>
     <div
-      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1lw3bb-MuiInputBase-root-MuiInput-root"
+      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1xuytew-MuiInputBase-root-MuiInput-root"
     >
       <input
         aria-invalid="false"

src/components/FormRadio/__snapshots__/index.test.tsx.snap

@@ -167,7 +167,7 @@ exports[`FormRadio ENCOURAGE theme matches the snapshot 1`] = `
     id="primaryswitch"
   >
     <span
-      class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary css-18b3vsy-MuiButtonBase-root-MuiRadio-root"
+      class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary css-fv5a5f-MuiButtonBase-root-MuiRadio-root"
     >
       <input
         class="PrivateSwitchBase-input css-1m9pwf3"

src/components/FormRadioGroup/__snapshots__/index.test.tsx.snap

@@ -392,7 +392,7 @@ exports[`FormRadioGroup ENCOURAGE theme matches the snapshot 1`] = `
     class="MuiFormControl-root css-jayakb-MuiFormControl-root"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined css-8h2rt5-MuiFormLabel-root-MuiInputLabel-root"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined css-1vfm0do-MuiFormLabel-root-MuiInputLabel-root"
       data-shrink="false"
     >
       <div
@@ -416,7 +416,7 @@ exports[`FormRadioGroup ENCOURAGE theme matches the snapshot 1`] = `
         id="one"
       >
         <span
-          class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary css-18b3vsy-MuiButtonBase-root-MuiRadio-root"
+          class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary css-fv5a5f-MuiButtonBase-root-MuiRadio-root"
         >
           <input
             class="PrivateSwitchBase-input css-1m9pwf3"
@@ -465,7 +465,7 @@ exports[`FormRadioGroup ENCOURAGE theme matches the snapshot 1`] = `
         id="two"
       >
         <span
-          class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary css-18b3vsy-MuiButtonBase-root-MuiRadio-root"
+          class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary css-fv5a5f-MuiButtonBase-root-MuiRadio-root"
         >
           <input
             class="PrivateSwitchBase-input css-1m9pwf3"

src/components/FormSelect/__snapshots__/index.test.tsx.snap

@@ -210,7 +210,7 @@ exports[`FormSelect ENCOURAGE theme matches the snapshot 1`] = `
     class="MuiFormControl-root css-jayakb-MuiFormControl-root"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-oi448n-MuiFormLabel-root-MuiInputLabel-root"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-rsrurj-MuiFormLabel-root-MuiInputLabel-root"
       data-shrink="true"
     >
       <div
@@ -224,7 +224,7 @@ exports[`FormSelect ENCOURAGE theme matches the snapshot 1`] = `
       </div>
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl  css-1v8xgkb-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl  css-18248me-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
     >
       <div
         aria-expanded="false"
@@ -244,7 +244,7 @@ exports[`FormSelect ENCOURAGE theme matches the snapshot 1`] = `
       />
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-m9jro4-MuiSvgIcon-root-MuiSelect-icon"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-uqo2gb-MuiSvgIcon-root-MuiSelect-icon"
         data-testid="ArrowDropDownIcon"
         focusable="false"
         viewBox="0 0 24 24"

src/components/FormSwitch/__snapshots__/index.test.tsx.snap

@@ -134,7 +134,7 @@ exports[`FormSwitch ENCOURAGE theme matches the snapshot 1`] = `
         class="MuiSwitch-root MuiSwitch-sizeMedium css-1nyoakt-MuiSwitch-root"
       >
         <span
-          class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1mxe12b-MuiButtonBase-root-MuiSwitch-switchBase"
+          class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-29tbe1-MuiButtonBase-root-MuiSwitch-switchBase"
         >
           <input
             class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"

src/components/GridGenerator/__snapshots__/index.test.tsx.snap

@@ -372,7 +372,7 @@ exports[`GridGenerator ENCOURAGE theme matches the snapshot 1`] = `
         class="MuiFormControl-root css-jayakb-MuiFormControl-root"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-oi448n-MuiFormLabel-root-MuiInputLabel-root"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-rsrurj-MuiFormLabel-root-MuiInputLabel-root"
           data-shrink="true"
         >
           <div
@@ -389,7 +389,7 @@ exports[`GridGenerator ENCOURAGE theme matches the snapshot 1`] = `
           </div>
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1lw3bb-MuiInputBase-root-MuiInput-root"
+          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1xuytew-MuiInputBase-root-MuiInput-root"
           required=""
         >
           <input
@@ -410,7 +410,7 @@ exports[`GridGenerator ENCOURAGE theme matches the snapshot 1`] = `
         class="MuiFormControl-root css-jayakb-MuiFormControl-root"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-oi448n-MuiFormLabel-root-MuiInputLabel-root"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-rsrurj-MuiFormLabel-root-MuiInputLabel-root"
           data-shrink="true"
         >
           <div
@@ -427,7 +427,7 @@ exports[`GridGenerator ENCOURAGE theme matches the snapshot 1`] = `
           </div>
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1lw3bb-MuiInputBase-root-MuiInput-root"
+          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1xuytew-MuiInputBase-root-MuiInput-root"
           required=""
         >
           <input
@@ -452,7 +452,7 @@ exports[`GridGenerator ENCOURAGE theme matches the snapshot 1`] = `
         class="MuiFormControl-root css-jayakb-MuiFormControl-root"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-oi448n-MuiFormLabel-root-MuiInputLabel-root"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-rsrurj-MuiFormLabel-root-MuiInputLabel-root"
           data-shrink="true"
         >
           <div
@@ -464,7 +464,7 @@ exports[`GridGenerator ENCOURAGE theme matches the snapshot 1`] = `
           </div>
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1lw3bb-MuiInputBase-root-MuiInput-root"
+          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1xuytew-MuiInputBase-root-MuiInput-root"
         >
           <input
             aria-invalid="false"

src/components/InputLabel/__snapshots__/index.test.tsx.snap

@@ -72,7 +72,7 @@ exports[`InputLabel ENCOURA_CLASSIC theme matches the snapshot 1`] = `
 exports[`InputLabel ENCOURAGE theme matches the snapshot 1`] = `
 <div>
   <label
-    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated css-6r4psl-MuiFormLabel-root-MuiInputLabel-root"
+    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated css-1p3qetk-MuiFormLabel-root-MuiInputLabel-root"
   >
     <div
       class="label-split"

src/components/Loading/__snapshots__/index.test.tsx.snap

@@ -116,7 +116,7 @@ exports[`Loading ENCOURAGE theme matches the snapshot 1`] = `
     data-testid="loading"
   >
     <span
-      class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-1elcm4w-MuiCircularProgress-root"
+      class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-1u4ue4w-MuiCircularProgress-root"
       role="progressbar"
       style="width: 24px; height: 24px;"
       title="Loading..."

src/components/SearchBar/__snapshots__/index.test.tsx.snap

@@ -229,10 +229,10 @@ exports[`SearchBar ENCOURA_CLASSIC theme matches the snapshot 1`] = `
 exports[`SearchBar ENCOURAGE theme matches the snapshot 1`] = `
 <div>
   <div
-    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-adornedStart MuiInputBase-adornedEnd css-16czde6-MuiInputBase-root-MuiOutlinedInput-root"
+    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-adornedStart MuiInputBase-adornedEnd css-whi75n-MuiInputBase-root-MuiOutlinedInput-root"
   >
     <div
-      class="MuiInputAdornment-root MuiInputAdornment-positionStart css-1i63c9d-MuiInputAdornment-root"
+      class="MuiInputAdornment-root MuiInputAdornment-positionStart css-1mdz9fv-MuiInputAdornment-root"
     >
       <span
         class="notranslate"
@@ -258,11 +258,11 @@ exports[`SearchBar ENCOURAGE theme matches the snapshot 1`] = `
       value="Value"
     />
     <div
-      class="MuiInputAdornment-root MuiInputAdornment-positionEnd css-pwm0h9-MuiInputAdornment-root"
+      class="MuiInputAdornment-root MuiInputAdornment-positionEnd css-1wm9cqa-MuiInputAdornment-root"
     >
       <button
         aria-label="Clears the search"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1o1wdp-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-6t612t-MuiButtonBase-root-MuiIconButton-root"
         tabindex="0"
         title="Clears the search"
         type="button"