feat!: color refresh (#1084)

* chore: enter prerelease mode * feat(tokens)!: move color primitives to themes.css (#1020) * feat(tokens)!: move color primitives to themes.css * feat(tokens): build with TS * feat(tokens): generate types * feat(tokens): transform dark values * chore: add changeset * fix: update value to hsl * chore: fix lockfile * refactor(button): convert to css modules (#1030) * refactor(button): convert to css modules * chore: add changeset * fix: disabled icon * fix: test * refactor(tokens)!: update color primitives and aliases for product refresh (#1029) * feat(tokens)!: update color primitives * feat(tokens): update color aliases * chore: add changeset * fix: add opacity to aliases * feat: test wcag 2.2 * feat(tokens): add new aliases * refactor: update button styles * chore: update tokens story * refactor: simplify contract * chore: merge branch 'main' into release/color-refresh (#1036) * chore(deps): update all non-major dependencies (#1032) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * refactor!: use base 16 font size (#1033) * refactor: use base 16 font size * chore: add changeset * fix: ve styles * fix: inline style * chore: version packages (#1034) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore(deps): update nrwl/nx-set-shas action to v4 (#1035) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore: update initialVersions --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: pd-sa-github-launchpad-ui <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * feat(tokens): add typography tokens (#1037) * feat(tokens): add typography tokens * refactor: use vars * chore: add changeset * feat: add display * chore: version packages (alpha) (#1028) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * feat: refresh menu component (#1043) * feat: refresh menu styles * chore: use medium radius on popovers * chore: update menu stories * chore: add changeset * fix: update custom css so tests don't fail * refactor(menu): use CSS modules (#1046) * refactor(menu): use css modules * chore: add changeset * chore: fix classes * chore: version packages (alpha) (#1045) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: merge branch 'main' into release/color-refresh (#1049) * chore(deps): update all non-major dependencies (#1032) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * refactor!: use base 16 font size (#1033) * refactor: use base 16 font size * chore: add changeset * fix: ve styles * fix: inline style * chore: version packages (#1034) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore(deps): update nrwl/nx-set-shas action to v4 (#1035) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update all non-major dependencies (#1039) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency lint-staged to v15 (#1040) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat(tokens, icons, alert): add new tokens and icons (#1038) * feat(tokens, icons): add new tokens and icons * feat(tokens, icons): update token names and stories, update icon svgs * feat(tokens, icons): update changelog * feat(icons): update css to use gradient tokens * feat(alert): update CSS to use new gradient tokens * Update packages/tokens/src/color-aliases.yaml Co-authored-by: Robert Niznik <[email protected]> --------- Co-authored-by: Robert Niznik <[email protected]> * chore: version packages (#1041) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * feat(tokens): add primitive size tokens (#1031) * feat: add primitive size tokens * fix: use size variable tokens in storybook * fix: add whitespace at bottom of size token file * chore: update sizes to use base 16 * chore: use sizing tokens in borders * fix: add 3 and 1200 sizes * chore: update fonts to use size tokens * chore: use size tokens in spacing * chore: se size tokens in viewport * fix: space between constants in size story * chore: add changeset * fix: make slice const name more explicit * fix: use size 1 for border 200 Co-authored-by: Robert Niznik <[email protected]> --------- Co-authored-by: Robert Niznik <[email protected]> * feat: add building and door icons (#1048) * feat: adds building icons * feat: add door-exit icon * chore: add changeset * chore: version packages (#1042) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: fix token build * chore: update initialVersions * chore: fix size story --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: pd-sa-github-launchpad-ui <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Valerie Roske <[email protected]> Co-authored-by: Matthew Ferry <[email protected]> * fix: correct tokens version (#1051) * chore: version packages (alpha) (#1050) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix(tokens): keep css color keywords (#1060) * fix(tokens): keep css color keywords * chore: bump ts-node * chore: add changeset * feat: Update color steps from 9 to 12 (#1068) * feat: add 3 new grays and black and white to 12 * feat: purple remap from 9 to 12 steps * fix: update flair base dark color * feat: pink remap from 9 to 12 steps * feat: cyan remap from 9 to 12 steps * feat: yellow remap from 9 to 12 steps * fix: adjust yellow 300 chroma * feat: blue remap from 9 to 12 steps * fix: reorder white and black tokens in ascending order * feat: red map 9 to 12 steps * feat: green map 9 to 12 steps * feat: yellow map 9 to 12 steps * fix: a11y tertiary text in dark * fix: a11y button hover state * fix: update chip tokens for a11y * fix: update fills for info and error in dark * chore: add changeset * chore: merge branch 'main' into release/color-refresh (#1073) * chore(deps): update all non-major dependencies (#1032) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * refactor!: use base 16 font size (#1033) * refactor: use base 16 font size * chore: add changeset * fix: ve styles * fix: inline style * chore: version packages (#1034) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore(deps): update nrwl/nx-set-shas action to v4 (#1035) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update all non-major dependencies (#1039) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency lint-staged to v15 (#1040) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat(tokens, icons, alert): add new tokens and icons (#1038) * feat(tokens, icons): add new tokens and icons * feat(tokens, icons): update token names and stories, update icon svgs * feat(tokens, icons): update changelog * feat(icons): update css to use gradient tokens * feat(alert): update CSS to use new gradient tokens * Update packages/tokens/src/color-aliases.yaml Co-authored-by: Robert Niznik <[email protected]> --------- Co-authored-by: Robert Niznik <[email protected]> * chore: version packages (#1041) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * feat(tokens): add primitive size tokens (#1031) * feat: add primitive size tokens * fix: use size variable tokens in storybook * fix: add whitespace at bottom of size token file * chore: update sizes to use base 16 * chore: use sizing tokens in borders * fix: add 3 and 1200 sizes * chore: update fonts to use size tokens * chore: use size tokens in spacing * chore: se size tokens in viewport * fix: space between constants in size story * chore: add changeset * fix: make slice const name more explicit * fix: use size 1 for border 200 Co-authored-by: Robert Niznik <[email protected]> --------- Co-authored-by: Robert Niznik <[email protected]> * feat: add building and door icons (#1048) * feat: adds building icons * feat: add door-exit icon * chore: add changeset * chore: version packages (#1042) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore(deps): update commitlint monorepo to v18 (#1053) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency nx to v17 (#1054) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update all non-major dependencies (#1052) * fix(deps): update all non-major dependencies * chore: add changeset --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Robb Niznik <[email protected]> * chore(deps): lock file maintenance (#1056) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update actions/setup-node action to v4 (#1058) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency node to v20 (#1059) * chore(deps): update dependency node to v20 * ci: use node 20 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Robb Niznik <[email protected]> * docs: add getting started page to SB (#1062) * docs: add getting started page to SB * chore: clean up url * feat(icons): org settings icons and updates (#1063) * feat: add new org settings icons * chore: add changeset * fix: add person-off back * chore: version packages (#1055) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore(deps): update all non-major dependencies (#1065) * chore(deps): update all non-major dependencies * fix: pin style-dictionary --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Robb Niznik <[email protected]> * chore(deps): lock file maintenance (#1069) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat: add diamond and diamond-outline icons (#1070) * chore: version packages (#1071) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore(deps): update dependency html-react-parser to v5 (#1072) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore: update initialVersions * fix: adjust build script --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: pd-sa-github-launchpad-ui <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Valerie Roske <[email protected]> Co-authored-by: Matthew Ferry <[email protected]> * chore: version packages (alpha) (#1061) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: move primitives back to index.css * chore: exit prerelease * fix: update box colors --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: pd-sa-github-launchpad-ui <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Matthew Ferry <[email protected]> Co-authored-by: Valerie Roske <[email protected]>
launchdarkly · Nov 17, 2023 · 997f65f · 997f65f
1 parent 17cec67
commit 997f65f
Show file tree

Hide file tree

Showing 110 changed files with 2,770 additions and 792 deletions.
diff --git a/.changeset/quick-rockets-sit.md b/.changeset/quick-rockets-sit.md
@@ -0,0 +1,11 @@
+---
+'@launchpad-ui/split-button': patch
+'@launchpad-ui/inline-edit': patch
+'@launchpad-ui/snackbar': patch
+'@launchpad-ui/button': patch
+'@launchpad-ui/alert': patch
+'@launchpad-ui/form': patch
+'@launchpad-ui/core': patch
+---
+
+[Button, SplitButton] Convert to css modules
diff --git a/.changeset/quiet-emus-teach.md b/.changeset/quiet-emus-teach.md
@@ -0,0 +1,6 @@
+---
+'@launchpad-ui/tokens': minor
+'@launchpad-ui/core': patch
+---
+
+Feat: remap colors from 9 to 12 steps
diff --git a/.changeset/selfish-pens-mate.md b/.changeset/selfish-pens-mate.md
@@ -0,0 +1,5 @@
+---
+'@launchpad-ui/tokens': patch
+---
+
+Add typography tokens
diff --git a/.changeset/thick-radios-report.md b/.changeset/thick-radios-report.md
@@ -0,0 +1,6 @@
+---
+'@launchpad-ui/core': patch
+'@launchpad-ui/menu': patch
+---
+
+[Menu] Use CSS modules
diff --git a/.changeset/warm-papayas-hear.md b/.changeset/warm-papayas-hear.md
@@ -0,0 +1,5 @@
+---
+'@launchpad-ui/tokens': patch
+---
+
+Keep CSS color keywords
diff --git a/.changeset/wise-buckets-deliver.md b/.changeset/wise-buckets-deliver.md
@@ -0,0 +1,7 @@
+---
+'@launchpad-ui/popover': patch
+'@launchpad-ui/core': patch
+'@launchpad-ui/menu': patch
+---
+
+Refresh menu styles
diff --git a/.storybook/Audimat3000-Regulier.var-subset.woff2 b/.storybook/Audimat3000-Regulier.var-subset.woff2
diff --git a/.storybook/styles.css b/.storybook/styles.css
@@ -33,14 +33,22 @@ h3 {
 @font-face {
   font-family: Inter;
   font-style: normal;
-  font-weight: 300 700;
+  font-weight: 300 800;
   font-display: swap;
   src: url('https://fonts.gstatic.com/s/inter/v7/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2')
     format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
     U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+@font-face {
+  font-family: 'Audimat 3000 Regulier';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('Audimat3000-Regulier.var-subset.woff2') format('woff2');
+}
+
 .sb-main-padded.sb-show-main {
   padding: 0;
   margin: 0;

diff --git a/apps/remix/app/routes/components.box.tsx b/apps/remix/app/routes/components.box.tsx
@@ -2,7 +2,7 @@ import { Box } from '@launchpad-ui/core';
 
 export default function Index() {
   return (
-    <Box backgroundColor={{ default: '$black.100', dark: '$gray.700' }} color="$white.0">
+    <Box backgroundColor={{ default: '$black.800', dark: '$gray.700' }} color="$white.950">
       I am a box
     </Box>
   );

diff --git a/apps/remix/app/styles/global.css b/apps/remix/app/styles/global.css
@@ -14,7 +14,7 @@ body {
 @font-face {
   font-family: Inter;
   font-style: normal;
-  font-weight: 300 700;
+  font-weight: 300 800;
   font-display: swap;
   src: url('https://fonts.gstatic.com/s/inter/v7/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2')
     format('woff2');

diff --git a/packages/alert/CHANGELOG.md b/packages/alert/CHANGELOG.md
@@ -1,5 +1,38 @@
 # @launchpad-ui/alert
 
+## 0.8.5-alpha.0
+
+### Patch Changes
+
+- [#1030](https://github.com/launchdarkly/launchpad-ui/pull/1030) [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687) Thanks [@Niznikr](https://github.com/Niznikr)! - [Button, SplitButton] Convert to css modules
+
+- Updated dependencies [[`00bee445`](https://github.com/launchdarkly/launchpad-ui/commit/00bee445065c0e48f31e1ca88105e5a418729c81), [`c041a984`](https://github.com/launchdarkly/launchpad-ui/commit/c041a984c3fd0c95f5e1e4a07416f6907ff75eac), [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687), [`941d2d60`](https://github.com/launchdarkly/launchpad-ui/commit/941d2d60c96f095e7043852f02bc6b5f157edb3b), [`3f9e1881`](https://github.com/launchdarkly/launchpad-ui/commit/3f9e1881f5d878ad6c0dc26ea1f8c5623605db53), [`260d052f`](https://github.com/launchdarkly/launchpad-ui/commit/260d052f3f47043cca470747e7d861417873fa41)]:
+  - @launchpad-ui/tokens@0.9.0-alpha.2
+  - @launchpad-ui/button@0.11.5-alpha.0
+  - @launchpad-ui/icons@0.14.5-alpha.0
+
+## 0.8.3-alpha.0
+
+### Patch Changes
+
+- [#1030](https://github.com/launchdarkly/launchpad-ui/pull/1030) [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687) Thanks [@Niznikr](https://github.com/Niznikr)! - [Button, SplitButton] Convert to css modules
+
+- Updated dependencies [[`00bee445`](https://github.com/launchdarkly/launchpad-ui/commit/00bee445065c0e48f31e1ca88105e5a418729c81), [`c041a984`](https://github.com/launchdarkly/launchpad-ui/commit/c041a984c3fd0c95f5e1e4a07416f6907ff75eac), [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687), [`3f9e1881`](https://github.com/launchdarkly/launchpad-ui/commit/3f9e1881f5d878ad6c0dc26ea1f8c5623605db53)]:
+  - @launchpad-ui/tokens@0.9.0-alpha.1
+  - @launchpad-ui/button@0.11.3-alpha.0
+  - @launchpad-ui/icons@0.14.3-alpha.0
+
+## 0.8.1-alpha.0
+
+### Patch Changes
+
+- [#1030](https://github.com/launchdarkly/launchpad-ui/pull/1030) [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687) Thanks [@Niznikr](https://github.com/Niznikr)! - [Button, SplitButton] Convert to css modules
+
+- Updated dependencies [[`00bee445`](https://github.com/launchdarkly/launchpad-ui/commit/00bee445065c0e48f31e1ca88105e5a418729c81), [`c041a984`](https://github.com/launchdarkly/launchpad-ui/commit/c041a984c3fd0c95f5e1e4a07416f6907ff75eac), [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687), [`3f9e1881`](https://github.com/launchdarkly/launchpad-ui/commit/3f9e1881f5d878ad6c0dc26ea1f8c5623605db53)]:
+  - @launchpad-ui/tokens@0.9.0-alpha.0
+  - @launchpad-ui/button@0.11.1-alpha.0
+  - @launchpad-ui/icons@0.14.1-alpha.0
+
 ## 0.8.5
 
 ### Patch Changes

diff --git a/packages/alert/src/styles/Alert.module.css b/packages/alert/src/styles/Alert.module.css
@@ -1,12 +1,12 @@
 :root {
-  --lp-component-alert-notification-flair-strong-color-text: var(--lp-color-white-0);
-  --lp-component-alert-notification-flair-strong-color-fill: var(--lp-color-white-0);
-  --lp-component-alert-notification-flair-strong-button-color-bg: var(--lp-color-white-0);
+  --lp-component-alert-notification-flair-strong-color-text: var(--lp-color-white-950);
+  --lp-component-alert-notification-flair-strong-color-fill: var(--lp-color-white-950);
+  --lp-component-alert-notification-flair-strong-button-color-bg: var(--lp-color-white-950);
   --lp-component-alert-notification-flair-strong-button-color-bg-hover: var(--lp-color-gray-100);
   --lp-component-alert-notification-flair-strong-button-color-bg-focus: var(--lp-color-gray-200);
   --lp-component-alert-notification-flair-strong-button-color-bg-active: var(--lp-color-gray-200);
   --lp-component-alert-notification-flair-strong-button-button-color-border: var(
-    --lp-color-white-0
+    --lp-color-white-950
   );
   --lp-component-alert-notification-flair-strong-button-color-text: var(--lp-color-black-300);
   --lp-component-alert-notification-flair-strong-button-color-text-hover: var(--lp-color-black-300);
@@ -41,7 +41,7 @@
   line-height: 1.25;
 }
 
-.Alert :global(.ButtonGroup) {
+.Alert :global([class*='_ButtonGroup_']) {
   margin-top: 0.75rem;
 }
 
@@ -197,7 +197,7 @@
   margin-left: auto;
 }
 
-.Alert-content :global(a:not(.Button)) {
+.Alert-content :global(a:not([class*='_Button_'])) {
   color: var(--lp-color-text-interactive-base);
 
   &:hover {

diff --git a/packages/avatar/src/styles/Avatar.module.css b/packages/avatar/src/styles/Avatar.module.css
@@ -15,27 +15,27 @@
 
 .Avatar--initials {
   border: none;
-  color: var(--lp-color-white-0);
+  color: var(--lp-color-white-950);
 }
 
 .Avatar--color0 {
-  background-color: var(--lp-color-yellow-800);
+  background-color: var(--lp-color-yellow-900);
 }
 
 .Avatar--color1 {
-  background-color: var(--lp-color-blue-500);
+  background-color: var(--lp-color-blue-600);
 }
 
 .Avatar--color2 {
   background-color: var(--lp-color-pink-500);
 }
 
 .Avatar--color3 {
-  background-color: var(--lp-color-cyan-600);
+  background-color: var(--lp-color-cyan-500);
 }
 
 .Avatar--color4 {
-  background-color: var(--lp-color-purple-500);
+  background-color: var(--lp-color-purple-600);
 }
 
 .Avatar-initials-content {

diff --git a/packages/banner/CHANGELOG.md b/packages/banner/CHANGELOG.md
@@ -1,5 +1,32 @@
 # @launchpad-ui/banner
 
+## 0.10.5-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [[`00bee445`](https://github.com/launchdarkly/launchpad-ui/commit/00bee445065c0e48f31e1ca88105e5a418729c81), [`c041a984`](https://github.com/launchdarkly/launchpad-ui/commit/c041a984c3fd0c95f5e1e4a07416f6907ff75eac), [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687), [`941d2d60`](https://github.com/launchdarkly/launchpad-ui/commit/941d2d60c96f095e7043852f02bc6b5f157edb3b), [`3f9e1881`](https://github.com/launchdarkly/launchpad-ui/commit/3f9e1881f5d878ad6c0dc26ea1f8c5623605db53), [`260d052f`](https://github.com/launchdarkly/launchpad-ui/commit/260d052f3f47043cca470747e7d861417873fa41)]:
+  - @launchpad-ui/tokens@0.9.0-alpha.2
+  - @launchpad-ui/button@0.11.5-alpha.0
+  - @launchpad-ui/icons@0.14.5-alpha.0
+
+## 0.10.3-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [[`00bee445`](https://github.com/launchdarkly/launchpad-ui/commit/00bee445065c0e48f31e1ca88105e5a418729c81), [`c041a984`](https://github.com/launchdarkly/launchpad-ui/commit/c041a984c3fd0c95f5e1e4a07416f6907ff75eac), [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687), [`3f9e1881`](https://github.com/launchdarkly/launchpad-ui/commit/3f9e1881f5d878ad6c0dc26ea1f8c5623605db53)]:
+  - @launchpad-ui/tokens@0.9.0-alpha.1
+  - @launchpad-ui/button@0.11.3-alpha.0
+  - @launchpad-ui/icons@0.14.3-alpha.0
+
+## 0.10.1-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [[`00bee445`](https://github.com/launchdarkly/launchpad-ui/commit/00bee445065c0e48f31e1ca88105e5a418729c81), [`c041a984`](https://github.com/launchdarkly/launchpad-ui/commit/c041a984c3fd0c95f5e1e4a07416f6907ff75eac), [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687), [`3f9e1881`](https://github.com/launchdarkly/launchpad-ui/commit/3f9e1881f5d878ad6c0dc26ea1f8c5623605db53)]:
+  - @launchpad-ui/tokens@0.9.0-alpha.0
+  - @launchpad-ui/button@0.11.1-alpha.0
+  - @launchpad-ui/icons@0.14.1-alpha.0
+
 ## 0.10.4
 
 ### Patch Changes

diff --git a/packages/box/__tests__/Box.spec.tsx b/packages/box/__tests__/Box.spec.tsx
@@ -6,13 +6,13 @@ import { Box } from '../src';
 
 describe('Box', () => {
   it('renders', () => {
-    render(<Box backgroundColor="$black.100">I am a box</Box>);
+    render(<Box backgroundColor="$black.800">I am a box</Box>);
     expect(screen.getByText('I am a box')).toBeVisible();
   });
 
   it('supports asChild prop', () => {
     render(
-      <Box backgroundColor="$black.100" asChild>
+      <Box backgroundColor="$black.800" asChild>
         <Button>I am a button</Button>
       </Box>
     );

diff --git a/packages/box/stories/Box.stories.tsx b/packages/box/stories/Box.stories.tsx
@@ -19,8 +19,8 @@ type Story = StoryObj<typeof Box>;
 
 export const Example: Story = {
   args: {
-    backgroundColor: { default: '$black.100', dark: '$gray.700' },
-    color: '$white.0',
+    backgroundColor: { default: '$black.800', dark: '$gray.700' },
+    color: '$white.950',
     padding: { desktop: '$400', tablet: '$300', mobile: '$200' },
     width: { desktop: '$400', tablet: '$256', mobile: '$192' },
     children: 'I am a box',
@@ -31,7 +31,7 @@ export const Composition: Story = {
   args: {
     background: '$yellow-cyan',
     borderColor: '$cyan.500',
-    color: '$black.0',
+    color: '$black.900',
     asChild: true,
     children: <Button>Button</Button>,
   },

diff --git a/packages/button/CHANGELOG.md b/packages/button/CHANGELOG.md
@@ -1,5 +1,35 @@
 # @launchpad-ui/button
 
+## 0.11.5-alpha.0
+
+### Patch Changes
+
+- [#1030](https://github.com/launchdarkly/launchpad-ui/pull/1030) [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687) Thanks [@Niznikr](https://github.com/Niznikr)! - [Button, SplitButton] Convert to css modules
+
+- Updated dependencies [[`00bee445`](https://github.com/launchdarkly/launchpad-ui/commit/00bee445065c0e48f31e1ca88105e5a418729c81), [`c041a984`](https://github.com/launchdarkly/launchpad-ui/commit/c041a984c3fd0c95f5e1e4a07416f6907ff75eac), [`941d2d60`](https://github.com/launchdarkly/launchpad-ui/commit/941d2d60c96f095e7043852f02bc6b5f157edb3b), [`3f9e1881`](https://github.com/launchdarkly/launchpad-ui/commit/3f9e1881f5d878ad6c0dc26ea1f8c5623605db53), [`260d052f`](https://github.com/launchdarkly/launchpad-ui/commit/260d052f3f47043cca470747e7d861417873fa41)]:
+  - @launchpad-ui/tokens@0.9.0-alpha.2
+  - @launchpad-ui/icons@0.14.5-alpha.0
+
+## 0.11.3-alpha.0
+
+### Patch Changes
+
+- [#1030](https://github.com/launchdarkly/launchpad-ui/pull/1030) [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687) Thanks [@Niznikr](https://github.com/Niznikr)! - [Button, SplitButton] Convert to css modules
+
+- Updated dependencies [[`00bee445`](https://github.com/launchdarkly/launchpad-ui/commit/00bee445065c0e48f31e1ca88105e5a418729c81), [`c041a984`](https://github.com/launchdarkly/launchpad-ui/commit/c041a984c3fd0c95f5e1e4a07416f6907ff75eac), [`3f9e1881`](https://github.com/launchdarkly/launchpad-ui/commit/3f9e1881f5d878ad6c0dc26ea1f8c5623605db53)]:
+  - @launchpad-ui/tokens@0.9.0-alpha.1
+  - @launchpad-ui/icons@0.14.3-alpha.0
+
+## 0.11.1-alpha.0
+
+### Patch Changes
+
+- [#1030](https://github.com/launchdarkly/launchpad-ui/pull/1030) [`e48d0df6`](https://github.com/launchdarkly/launchpad-ui/commit/e48d0df69e5085bc31c6378fe2eaad581a5eb687) Thanks [@Niznikr](https://github.com/Niznikr)! - [Button, SplitButton] Convert to css modules
+
+- Updated dependencies [[`00bee445`](https://github.com/launchdarkly/launchpad-ui/commit/00bee445065c0e48f31e1ca88105e5a418729c81), [`c041a984`](https://github.com/launchdarkly/launchpad-ui/commit/c041a984c3fd0c95f5e1e4a07416f6907ff75eac), [`3f9e1881`](https://github.com/launchdarkly/launchpad-ui/commit/3f9e1881f5d878ad6c0dc26ea1f8c5623605db53)]:
+  - @launchpad-ui/tokens@0.9.0-alpha.0
+  - @launchpad-ui/icons@0.14.1-alpha.0
+
 ## 0.11.4
 
 ### Patch Changes

diff --git a/packages/button/__tests__/ButtonGroup.spec.tsx b/packages/button/__tests__/ButtonGroup.spec.tsx
@@ -23,7 +23,7 @@ describe('ButtonGroup', () => {
       </ButtonGroup>
     );
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-    expect(container.querySelector('.ButtonGroup--compact')).not.toBeNull();
+    expect(container.querySelector('[class*="_ButtonGroup--compact_"]')).not.toBeNull();
     expect(screen.getByRole('button', { name: 'One' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Two' })).toBeInTheDocument();
   });
@@ -36,7 +36,7 @@ describe('ButtonGroup', () => {
       </ButtonGroup>
     );
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-    expect(container.querySelector('.ButtonGroup--large')).not.toBeNull();
+    expect(container.querySelector('[class*="_ButtonGroup--large_"]')).not.toBeNull();
     expect(screen.getByRole('button', { name: 'One' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Two' })).toBeInTheDocument();
   });

diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx
@@ -12,7 +12,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cx } from 'classix';
 import { isValidElement, cloneElement, forwardRef, memo } from 'react';
 
-import './styles/Button.css';
+import styles from './styles/Button.module.css';
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   isLoading?: boolean;
@@ -59,11 +59,10 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, ref)
   const Component: ElementType = asChild ? Slot : 'button';
 
   const classes = cx(
-    'Button',
-    `Button--${kind}`,
-    disabled && 'Button--disabled',
-    size && `Button--${size}`,
-    fit && 'Button--fit',
+    styles.Button,
+    styles[`Button--${kind}`],
+    size && styles[`Button--${size}`],
+    fit && styles['Button--fit'],
     className
   );
 
@@ -83,7 +82,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, ref)
       key: 'icon',
       size: getIconSize(),
       'aria-hidden': true,
-      className: cx(icon.props.className, 'Button-icon'),
+      className: cx(icon.props.className, styles['Button-icon']),
     });
 
   const getFinalChildren = (c: ReactNode) => [

diff --git a/packages/button/src/ButtonGroup.tsx b/packages/button/src/ButtonGroup.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 import { cx } from 'classix';
 
-import './styles/ButtonGroup.css';
+import styles from './styles/Button.module.css';
 
 type ButtonGroupProps = ComponentProps<'div'> & {
   spacing?: 'compact' | 'normal' | 'large';
@@ -16,7 +16,7 @@ const ButtonGroup = ({
   'data-test-id': testId = 'button-group',
   ...rest
 }: ButtonGroupProps) => {
-  const classes = cx('ButtonGroup', `ButtonGroup--${spacing}`, className);
+  const classes = cx(styles.ButtonGroup, styles[`ButtonGroup--${spacing}`], className);
 
   return (
     <div className={classes} data-test-id={testId} {...rest}>

diff --git a/packages/button/src/IconButton.tsx b/packages/button/src/IconButton.tsx
@@ -11,7 +11,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cx } from 'classix';
 import { isValidElement, cloneElement, forwardRef, memo } from 'react';
 
-import './styles/Button.css';
+import styles from './styles/Button.module.css';
 
 type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   kind?: 'default' | 'primary' | 'destructive' | 'minimal' | 'close';
@@ -41,12 +41,11 @@ const IconButtonComponent = forwardRef<HTMLButtonElement, IconButtonProps>((prop
   const Component: ElementType = asChild ? Slot : 'button';
 
   const classes = cx(
-    'IconButton',
-    'Button',
-    'Button--icon',
-    `Button--${kind}`,
-    disabled && 'Button--disabled',
-    size && `Button--${size}`,
+    styles.IconButton,
+    styles.Button,
+    styles['Button--icon'],
+    styles[`Button--${kind}`],
+    size && styles[`Button--${size}`],
     className
   );