feat!: color refresh

.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

.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

.changeset/selfish-pens-mate.md

@@ -0,0 +1,5 @@
+---
+'@launchpad-ui/tokens': patch
+---
+
+Add typography tokens

.changeset/thick-radios-report.md

@@ -0,0 +1,6 @@
+---
+'@launchpad-ui/core': patch
+'@launchpad-ui/menu': patch
+---
+
+[Menu] Use CSS modules

.changeset/warm-papayas-hear.md

@@ -0,0 +1,5 @@
+---
+'@launchpad-ui/tokens': patch
+---
+
+Keep CSS color keywords

.changeset/wise-buckets-deliver.md

@@ -0,0 +1,7 @@
+---
+'@launchpad-ui/popover': patch
+'@launchpad-ui/core': patch
+'@launchpad-ui/menu': patch
+---
+
+Refresh menu styles

.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;

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>
   );

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');

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/[email protected]
+  - @launchpad-ui/[email protected]
+  - @launchpad-ui/[email protected]
+
+## 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/[email protected]
+  - @launchpad-ui/[email protected]
+  - @launchpad-ui/[email protected]
+
+## 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/[email protected]
+  - @launchpad-ui/[email protected]
+  - @launchpad-ui/[email protected]
+
 ## 0.8.5
 
 ### Patch Changes

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 {

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 {

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/[email protected]
+  - @launchpad-ui/[email protected]
+  - @launchpad-ui/[email protected]
+
+## 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/[email protected]
+  - @launchpad-ui/[email protected]
+  - @launchpad-ui/[email protected]
+
+## 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/[email protected]
+  - @launchpad-ui/[email protected]
+  - @launchpad-ui/[email protected]
+
 ## 0.10.4
 
 ### Patch Changes

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>
     );

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>,
   },

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/[email protected]
+  - @launchpad-ui/[email protected]
+
+## 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/[email protected]
+  - @launchpad-ui/[email protected]
+
+## 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/[email protected]
+  - @launchpad-ui/[email protected]
+
 ## 0.11.4
 
 ### Patch Changes

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();
   });

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) => [

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}>

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
   );