BREAKING CHANGE: Dark mode support (#893)

* wip * font colors * BREAKING CHANGE: background, border, font specific colors BREAKING CHANGE: background, border, font specific colors BREAKING CHANGE: Spinner variant prop changed to color * BREAKING CHANGE: ThemeProvider * feat(RadioGroup): dark mode support * feat(Accordion): dark mode support * feat(Tabs): dark mode support * feat(TabsSlider): dark mode support * dark mode tokens * Update FileUpload.tsx * Update Heading.Playground.stories.tsx * Update MediaModal.tsx * feat(Card): dark mode support * feat(Alert): dark mode support * feat(TabsSlider): dark mode support * feat(CategoryFilter): dark mode support * wip * checkboxinput * OptionTile * update pdt package with new tokens * fix build * fix lint * Update Box.tsx * checkboxinput * Update MediaModal.tsx * Update SelectInputNative.module.scss * Update Checkbox.module.scss * Update pull-request.yml * light mode button background tokens * light mode button font color tokens * light mode button border color tokens * pdt 1.3.0 * SelectInput dark mode fixes * Badge dark mode * spec body font * wip * remove internal form color tokens * remove form theming docs * wip * Toast dark mode * Toggle dark mode * Table dark mode * remove component design token documentation * more cleanup * datepicker dark mode * pdt 1.4 * Update Theming.stories.mdx
palmetto · Jun 13, 2024 · a65e07a · a65e07a
1 parent b9a6cae
commit a65e07a
Show file tree

Hide file tree

Showing 126 changed files with 3,528 additions and 4,523 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -19,6 +19,7 @@
     "browser": true
   },
   "rules": {
+    "react/require-default-props": ["error", { "ignoreFunctionalComponents": true }],
     "arrow-parens": [
       "error",
       "as-needed"

diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -121,7 +121,7 @@ jobs:
           fetch-depth: 0 # Required to retrieve git history
       - uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: 16
       - uses: actions/cache@v1
         with:
           path: ~/.cache/yarn

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -1,6 +1,6 @@
 <style>
   body {
     padding: 2rem;
-    color: #3C453E;
+    color: var(--color-text-body-primary);
   }
 </style>
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -27,9 +27,14 @@ export const parameters = {
         'Foundation',
         ['Design Principles', 'Design Tokens'],
         'Content',
-        ['Goals and Principles', 'Voice and Tone', 'Grammar and Mechanics', 'Word List'],
+        [
+          'Goals and Principles',
+          'Voice and Tone',
+          'Grammar and Mechanics',
+          'Word List',
+        ],
         'Theming',
-        ['Overview', 'Form Controls'],
+        ['Overview'],
         'Components',
         'Patterns',
       ],

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@palmetto/dialog": "^0.16.4",
-    "@palmetto/palmetto-design-tokens": "0.79.2",
+    "@palmetto/palmetto-design-tokens": "1.4.0",
     "@popperjs/core": "^2.5.3",
     "classnames": "^2.2.6",
     "cleave.js": "^1.6.0",

diff --git a/src/components/Accordion/Accordion.Overview.stories.mdx b/src/components/Accordion/Accordion.Overview.stories.mdx
@@ -52,16 +52,18 @@ Accordions are useful when you want to toggle between hiding and showing additio
             </Accordion.PanelSummary>
             <Accordion.PanelDetails gap="md">
               <p>
-                Solar panels, also called photovoltaic or PV panels, consist of solar cells that are
-                designed to capture the radiant light and heat contained in sunlight and convert it
-                into usable clean energy for your home.
+                Solar panels, also called photovoltaic or PV panels, consist of
+                solar cells that are designed to capture the radiant light and
+                heat contained in sunlight and convert it into usable clean
+                energy for your home.
               </p>
               <p>
-                When sunlight hits your solar panel, the photons of energy are converted into DC
-                (direct current) electricity, which is then converted into AC (alternating current)
-                electricity for use in your home. Solar panels are often grouped together to form a
-                solar grid or solar array, allowing you to capture and harness the right amount of
-                energy for your needs.
+                When sunlight hits your solar panel, the photons of energy are
+                converted into DC (direct current) electricity, which is then
+                converted into AC (alternating current) electricity for use in
+                your home. Solar panels are often grouped together to form a
+                solar grid or solar array, allowing you to capture and harness
+                the right amount of energy for your needs.
               </p>
             </Accordion.PanelDetails>
           </Accordion.Panel>
@@ -74,14 +76,16 @@ Accordions are useful when you want to toggle between hiding and showing additio
             </Accordion.PanelSummary>
             <Accordion.PanelDetails>
               <p>
-                There are several factors we can look at to determine if solar might be a good
-                solution for your needs, including roof space, home energy usage, credit health, and
-                eligibility for incentives. At Palmetto, we start by calculating a quick savings
-                estimate based on your home, location, and current utility costs. Then, we’ll
-                schedule a meeting to clarify your goals, address any questions, identify purchase
-                options, and outline the solar process. All of this happens before you pay, allowing
-                you to decide if a solar power system is right for you based on a complete
-                understanding of the potential costs and savings.
+                There are several factors we can look at to determine if solar
+                might be a good solution for your needs, including roof space,
+                home energy usage, credit health, and eligibility for
+                incentives. At Palmetto, we start by calculating a quick savings
+                estimate based on your home, location, and current utility
+                costs. Then, we’ll schedule a meeting to clarify your goals,
+                address any questions, identify purchase options, and outline
+                the solar process. All of this happens before you pay, allowing
+                you to decide if a solar power system is right for you based on
+                a complete understanding of the potential costs and savings.
               </p>
             </Accordion.PanelDetails>
           </Accordion.Panel>
@@ -94,13 +98,15 @@ Accordions are useful when you want to toggle between hiding and showing additio
             </Accordion.PanelSummary>
             <Accordion.PanelDetails>
               <p>
-                The right solar power system for your home will depend on a variety of factors,
-                including your current energy usage, the size and layout of your roof, and your
-                preferred level of energy independence. To hone in on the right solution for your
-                home, we always begin with a personal consultation and a survey, both of which serve
-                to clarify your goals and outline available options. Should you choose to invest,
-                we’ll design a custom solution to meet your goals and maximize your savings—no
-                haggling, no upselling, just right.
+                The right solar power system for your home will depend on a
+                variety of factors, including your current energy usage, the
+                size and layout of your roof, and your preferred level of energy
+                independence. To hone in on the right solution for your home, we
+                always begin with a personal consultation and a survey, both of
+                which serve to clarify your goals and outline available options.
+                Should you choose to invest, we’ll design a custom solution to
+                meet your goals and maximize your savings—no haggling, no
+                upselling, just right.
               </p>
             </Accordion.PanelDetails>
           </Accordion.Panel>
@@ -153,9 +159,10 @@ By default the caret is on the right. You can render the caret on the left side
             </Accordion.PanelSummary>
             <Accordion.PanelDetails>
               <p>
-                Together, we’ll clarify your goals, address any questions, identify purchase options
-                and incentives, and outline the solar process—placing you in the driver’s seat for
-                everything moving forward.
+                Together, we’ll clarify your goals, address any questions,
+                identify purchase options and incentives, and outline the solar
+                process—placing you in the driver’s seat for everything moving
+                forward.
               </p>
             </Accordion.PanelDetails>
           </Accordion.Panel>
@@ -169,9 +176,9 @@ By default the caret is on the right. You can render the caret on the left side
             </Accordion.PanelSummary>
             <Accordion.PanelDetails>
               <p>
-                Our solar specialists will take a survey of your property and define specific
-                requirements in your area. Then, we’ll design a solar energy system to maximize your
-                savings.
+                Our solar specialists will take a survey of your property and
+                define specific requirements in your area. Then, we’ll design a
+                solar energy system to maximize your savings.
               </p>
             </Accordion.PanelDetails>
           </Accordion.Panel>
@@ -185,9 +192,10 @@ By default the caret is on the right. You can render the caret on the left side
             </Accordion.PanelSummary>
             <Accordion.PanelDetails>
               <p>
-                We work on your behalf to navigate state and municipal requirements, homeowners
-                associations, and utility paperwork—moving your project from design to install with
-                the ultimate efficiency.
+                We work on your behalf to navigate state and municipal
+                requirements, homeowners associations, and utility
+                paperwork—moving your project from design to install with the
+                ultimate efficiency.
               </p>
             </Accordion.PanelDetails>
           </Accordion.Panel>
@@ -236,9 +244,10 @@ You can also choose to hide the caret altogether. Moreover, the accordion is a v
             </Accordion.PanelSummary>
             <Accordion.PanelDetails>
               <p>
-                Together, we’ll clarify your goals, address any questions, identify purchase options
-                and incentives, and outline the solar process—placing you in the driver’s seat for
-                everything moving forward.
+                Together, we’ll clarify your goals, address any questions,
+                identify purchase options and incentives, and outline the solar
+                process—placing you in the driver’s seat for everything moving
+                forward.
               </p>
             </Accordion.PanelDetails>
           </Accordion.Panel>
@@ -252,9 +261,9 @@ You can also choose to hide the caret altogether. Moreover, the accordion is a v
             </Accordion.PanelSummary>
             <Accordion.PanelDetails>
               <p>
-                Our solar specialists will take a survey of your property and define specific
-                requirements in your area. Then, we’ll design a solar energy system to maximize your
-                savings.
+                Our solar specialists will take a survey of your property and
+                define specific requirements in your area. Then, we’ll design a
+                solar energy system to maximize your savings.
               </p>
             </Accordion.PanelDetails>
           </Accordion.Panel>
@@ -268,9 +277,10 @@ You can also choose to hide the caret altogether. Moreover, the accordion is a v
             </Accordion.PanelSummary>
             <Accordion.PanelDetails>
               <p>
-                We work on your behalf to navigate state and municipal requirements, homeowners
-                associations, and utility paperwork—moving your project from design to install with
-                the ultimate efficiency.
+                We work on your behalf to navigate state and municipal
+                requirements, homeowners associations, and utility
+                paperwork—moving your project from design to install with the
+                ultimate efficiency.
               </p>
             </Accordion.PanelDetails>
           </Accordion.Panel>

diff --git a/src/components/Accordion/AccordionPanel.tsx b/src/components/Accordion/AccordionPanel.tsx
@@ -6,7 +6,7 @@ export type AccordionPanelProps = DetailsProps;
 export const AccordionPanel: React.FC<AccordionPanelProps> = ({
   children,
   borderWidth = '0 0 xs 0',
-  borderColor = 'grey-100',
+  borderColor = 'separator',
   ...restProps
 }) => (
   <Details {...restProps} borderColor={borderColor} borderWidth={borderWidth}>

diff --git a/src/components/Accordion/AccordionPanelSummary.tsx b/src/components/Accordion/AccordionPanelSummary.tsx
@@ -30,7 +30,7 @@ export const AccordionPanelSummary: React.FC<AccordionPanelSummaryProps> = ({
       <Box>
         <Icon
           name={isDetailsOpen ? 'caret-sm-down' : 'caret-sm-right'}
-          color="grey-500"
+          color="body-secondary"
         />
       </Box>
     )}
@@ -39,7 +39,7 @@ export const AccordionPanelSummary: React.FC<AccordionPanelSummaryProps> = ({
       <Box margin="0 0 0 auto">
         <Icon
           name={isDetailsOpen ? 'caret-sm-up' : 'caret-sm-down'}
-          color="grey-500"
+          color="body-secondary"
         />
       </Box>
     )}

diff --git a/src/components/Alert/Alert.Overview.stories.mdx b/src/components/Alert/Alert.Overview.stories.mdx
@@ -186,102 +186,3 @@ Renders a version of the banner with less padding.
     ;
   </Story>
 </Canvas>
-
-## Custom Theme
-
-The Alert component can be themed by base tokens, or component specific tokens.
-
-<Canvas>
-  <Story name="With Custom Theme">
-    <>
-      <div
-        style={{
-          '--color-brand-info-50': '#CFC5E9',
-          '--color-brand-info-500': '#603FB5',
-          '--alert-border-width': '0',
-        }}
-      >
-        <Alert
-          message="Here we've overwritten base token values so that the alert inherits new values."
-          title="Custom Theme"
-          variant="info"
-          hasIcon
-          className="m-bottom-md"
-        />
-      </div>
-      <div
-        style={{
-          '--alert-info-font-color': '#603FB5',
-          '--alert-info-background-color': 'white',
-          '--alert-info-icon-color': '#603FB5',
-          '--alert-border-width': 'var(--size-border-xs)',
-          '--alert-info-border-color': 'var(--alert-info-icon-color)',
-        }}
-      >
-        <Alert
-          message="Here we've overwritten ONLY the values for the 'info' alert variant so other components will be unaffected"
-          title="Custom Theme"
-          variant="info"
-          hasIcon
-          className="m-bottom-md"
-        />
-        <Alert
-          message="An alert that uses default token values"
-          variant="warning"
-          title="Not Themed"
-          hasIcon
-        />
-      </div>
-    </>
-  </Story>
-</Canvas>
-
-## Component Design Tokens
-
-<table>
-  <thead>
-    <tr>
-      <th>token name</th>
-      <th>default value</th>
-    </tr>
-  </thead>
-  <tbody>
-    {(() => {
-      const tokens = {
-        '--alert-default-background-color': '--color-brand-grey-100',
-        '--alert-default-font-color': '--color-brand-grey-600',
-        '--alert-default-icon-color': '--color-brand-grey-600',
-        '--alert-default-border-color': '--color-brand-grey-200',
-        '--alert-info-background-color': '--color-brand-info-50',
-        '--alert-info-font-color': '--color-brand-grey-600',
-        '--alert-info-icon-color': '--color-brand-info-500',
-        '--alert-info-border-color': '--color-brand-info-200',
-        '--alert-success-background-color': '--color-brand-success-50',
-        '--alert-success-font-color': '--color-brand-grey-600',
-        '--alert-success-icon-color': '--color-brand-success-500',
-        '--alert-success-border-color': '--color-brand-success-200',
-        '--alert-warning-background-color': '--color-brand-warning-50',
-        '--alert-warning-font-color': '--color-brand-grey-600',
-        '--alert-warning-icon-color': '--color-brand-warning-500',
-        '--alert-warning-border-color': '--color-brand-warning-200',
-        '--alert-danger-background-color': '--color-brand-danger-50',
-        '--alert-danger-font-color': '--color-brand-grey-600',
-        '--alert-danger-icon-color': '--color-brand-danger-500',
-        '--alert-danger-border-color': '--color-brand-danger-200',
-        '--alert-border-width': '--size-border-xs',
-        '--alert-border-color': 'transparent',
-        '--alert-box-shadow': '--size-box-shadow-0',
-      };
-      return Object.entries(tokens).map(([name, entry], i) => (
-        <tr key={i}>
-          <td>
-            <code>{name}</code>
-          </td>
-          <td>
-            <code>{entry}</code>
-          </td>
-        </tr>
-      ));
-    })()}
-  </tbody>
-</table>
diff --git a/src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss
@@ -20,37 +20,37 @@
 }
 
 .alert__default {
-  color: var(--alert-default-font-color, var(--color-brand-grey-600));
-  background: var(--alert-default-background-color, var(--color-brand-grey-100));
-  border-color: var(--alert-default-border-color, var(--color-brand-grey-200));
+  color: var(--color-text-body-primary);
+  background: var(--color-background-default);
+  border-color: var(--color-border-default);
 }
 
 .alert__info {
-  color: var(--alert-info-font-color, var(--color-brand-grey-600));
-  background: var(--alert-info-background-color, var(--color-brand-info-50));
-  border-color: var(--alert-info-border-color, var(--color-brand-info-200));
+  color: var(--color-text-body-primary);
+  background: var(--color-background-info);
+  border-color: var(--color-border-info);
 }
 
 .alert__success {
-  color: var(--alert-success-font-color, var(--color-brand-grey-600));
-  background: var(--alert-success-background-color, var(--color-brand-success-50));
-  border-color: var(--alert-success-border-color, var(--color-brand-success-200));
+  color: var(--color-text-body-primary);
+  background: var(--color-background-success);
+  border-color: var(--color-border-success);
 }
 
 .alert__warning {
-  color: var(--alert-warning-font-color, var(--color-brand-grey-600));
-  background: var(--alert-warning-background-color, var(--color-brand-warning-50));
-  border-color: var(--alert-warning-border-color, var(--color-brand-warning-200));
+  color: var(--color-text-body-primary);
+  background: var(--color-background-warning);
+  border-color: var(--color-border-warning);
 }
 
 .alert__danger {
-  color: var(--alert-danger-font-color, var(--color-brand-grey-600));
-  background: var(--alert-danger-background-color, var(--color-brand-danger-50));
-  border-color: var(--alert-danger-border-color, var(--color-brand-danger-200));
+  color: var(--color-text-body-primary);
+  background: var(--color-background-danger);
+  border-color: var(--color-border-danger);
 }
 
-.alert__icon__default { color: var(--alert-default-icon-color, var(--color-brand-grey-600)); }
-.alert__icon__info { color: var(--alert-info-icon-color, var(--color-brand-info-500)); }
-.alert__icon__success { color: var(--alert-success-icon-color, var(--color-brand-success-500)); }
-.alert__icon__warning { color: var(--alert-warning-icon-color, var(--color-brand-warning-500)); }
-.alert__icon__danger { color: var(--alert-danger-icon-color, var(--color-brand-danger-500)); }
+.alert__icon__default { color: var(--color-text-alert-icon-default); }
+.alert__icon__info { color: var(--color-text-alert-icon-info); }
+.alert__icon__success { color: var(--color-text-alert-icon-success); }
+.alert__icon__warning { color: var(--color-text-alert-icon-warning); }
+.alert__icon__danger { color: var(--color-text-alert-icon-danger); }