Dark mode (#899)

* 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

* feat: Modal dark mode (#894)

* feat: Modal dark mode

* Update Modal.module.scss

* Update Modal.module.scss

* fix: bump pdt (#895)

* fix: bump pdt

* fix build

* fix(Popover): arrowColor background color type

* fix: transparent border color

* fix(Table): dark mode loading state (#896)

* fix(Table): dark mode loading state

* Update Table.module.scss

* build(deps): bump ws from 6.2.2 to 6.2.3 (#897)

Bumps [ws](https://github.com/websockets/ws) from 6.2.2 to 6.2.3.
- [Release notes](https://github.com/websockets/ws/releases)
- [Commits](websockets/ws@6.2.2...6.2.3)

---
updated-dependencies:
- dependency-name: ws
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix: update color documentation

* Merge branch 'main' into beta

* clean up

* Update Popover.VisualTests.stories.tsx

* feat: document brand colors, semantic colors, and dark values

* Update GetStarted.stories.mdx

* fix: Alert close button color

* feat: CategoryFilter dark mode tokens

* docs: apply darkmode background to story canvas

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.storybook/preview-body.html

@@ -2,5 +2,6 @@
   body {
     padding: 2rem;
     color: var(--color-text-body-primary);
+    background-color: var(--color-background-secondary);
   }
 </style>

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@palmetto/dialog": "^0.16.4",
-    "@palmetto/palmetto-design-tokens": "1.5.0",
+    "@palmetto/palmetto-design-tokens": "1.6.0",
     "@popperjs/core": "^2.5.3",
     "classnames": "^2.2.6",
     "cleave.js": "^1.6.0",

src/components/Alert/Alert.module.scss

@@ -11,10 +11,6 @@
       padding: 0;
       color: inherit;
       font: inherit;
-
-      &:hover {
-        color: var(--color-brand-grey-600);
-      }
     }
   }
 }

src/components/Alert/Alert.tsx

@@ -93,9 +93,9 @@ export const Alert: FC<AlertProps> = ({
     };
 
     return (
-      <Box margin="0 0 0 auto" color="grey-500" className={styles['close-icon']}>
+      <Box margin="0 0 0 auto" className={styles['close-icon']}>
         <button type="button" onClick={handleClose} onKeyUp={handleCloseKeyPress}>
-          {closeText || <Icon name="remove" data-testid="alert-close-icon-test-id" />}
+          {closeText || <Icon name="remove-light" data-testid="alert-close-icon-test-id" />}
         </button>
       </Box>
     );

src/components/CategoryFilter/CategoryFilter.module.scss

@@ -1,8 +1,8 @@
 .category-filter {
-  background-color: transparent;
+  background-color: var(--color-background-category-filter);
   border-color: var(--color-border-default);
   border-radius: var(--size-border-radius-xl);
-  color: var(--color-text-body-primary);
+  color: var(--color-text-category-filter);
   font-family: var(--asset-fonts-body);
   font-weight: var(--size-font-weight-medium);
   height: max-content;
@@ -15,29 +15,30 @@
     opacity: 0.65;
 
     &:hover {
-      background-color: transparent;
+      background-color: var(--color-background-category-filter);
       border-color: var(--color-border-default);
-      color: var(--color-text-body-primary);
+      color: var(--color-text-category-filter-hover);
     }
   }
 
   &.selected {
-    background-color: var(--color-brand-primary-500);
+    background-color: var(--color-background-category-filter-active);
     border-color: var(--color-brand-primary-500);
-    color: var(--color-text-white);
+    color: var(--color-text-category-filter-active);
 
     &:hover {
-      background-color: var(--color-brand-primary-600);
-      color: var(--color-text-white);
-      border-color: var(--color-brand-primary-600);
+      background-color: var(--color-background-category-filter-active-hover);
+      color: var(--color-text-category-filter-active-hover);
+      border-color: var(--color-background-category-filter-active-hover);
     }
 
     &.disabled:hover {
-      background-color: var(--color-brand-primary-500);
+      background-color: var(--color-background-category-filter-active);
     }
   }
 
   &:hover {
+    background-color: var(--color-background-category-filter-hover);
     border-color: var(--color-border-default);
   }
 

src/docs/GetStarted.stories.mdx

@@ -20,7 +20,7 @@ or
 @import '@palmetto/palmetto-components/dist/css/index.css';
 ```
 
-### 3. Import Global CSS Reset (Optional)
+### 3. Import Global CSS Reset
 
 We recommend importing our global reset in order to maintain a consistent
 look of all components across applications.
@@ -29,7 +29,7 @@ look of all components across applications.
 @import '@palmetto/palmetto-components/dist/css/reset.css'
 ```
 
-### 4. Import Nexa Font (Optional)
+### 4. Import Nexa Font
 
 We recommend importing our brand font, Nexa, for styling headings, etc.
 
@@ -51,13 +51,13 @@ function App() {
 ReactDOM.render(<App />, document.querySelector('#app'));
 ```
 
-### 6. Responsive Hooks & Window size context (Optional)
+### 6. Theme and Responsive Hooks size context
 
-`palmetto-components` provides [responsive hooks]() as well as opinionated [breakpoints]() to make custom responsive layouts
-easier to craft.
+Wrap your application in the `ThemeProvider` and `ResponsiveProvider` components to provide theme and responsive hooks to your application.
 
-In order for these hooks to work, however, they must be provided a context that feeds window size updates via a single listener (for performance reasons).
-use the [`ResponsiveProvider`]() to wrap your application and ensure that responsive hooks have access to the necessary context.
+Use the [ResponsiveProvider](?path=/docs/providers-responsiveprovider-overview--default-story) to wrap your application and ensure that responsive hooks have access to the necessary context.
+
+Theming is supported via the [ThemeProvider](?path=/docs/providers-themeprovider-overview--usage) component. This component allows you to set a default theme and a storage key for persisting the theme in local storage.
 
 ```jsx
 import React from 'react';
@@ -69,10 +69,11 @@ function App() {
 }
 
 ReactDOM.render(
-  <ResponsiveProvider>
-    <App />
-  </ResponsiveProvider>,
-  document.querySelector('#app')
+  <ThemeProvider defaultTheme="light" storageKey="palmetto-ui-theme">
+    <ResponsiveProvider>
+      <App />
+    </ResponsiveProvider>
+  </ThemeProvider>,
+  document.querySelector('#app'),
 );
 ```
-

yarn.lock

@@ -3532,10 +3532,10 @@
     react-remove-scroll "^2.4.3"
     tslib "^2.3.0"
 
-"@palmetto/palmetto-design-tokens@1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@palmetto/palmetto-design-tokens/-/palmetto-design-tokens-1.5.0.tgz#8040b6a79fe240706d38f6425449a537f87bd98c"
-  integrity sha512-xoOZwW4MpoomaFqorL17jpK5n9GFoMKSMq8ZYL5h2Da875+2Hlf5k5qFrAwkbM3HzyUbpaAJTdnaZPIFMcRb9A==
+"@palmetto/palmetto-design-tokens@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@palmetto/palmetto-design-tokens/-/palmetto-design-tokens-1.6.0.tgz#c849df844dbe32665b16095b3cbb8af7f3801eda"
+  integrity sha512-76jKSf4I4unVpCmvt0jPG6wllKXO8XVZySiK3JuQcS2FWQ++T3sThGQpwgE1yESi8Y7gYzQccilwr7z1RFeCnw==
 
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.10"