feat: update design tokens

packages/lsd-react/.storybook/preview.tsx

@@ -14,7 +14,7 @@ export const parameters: Parameters = {
     default: 'light',
     values: Object.entries(defaultThemes).map(([name, theme]) => ({
       name,
-      value: theme.palette.background.primary,
+      value: `rgb(${theme.palette.secondary})`,
     })),
   },
   viewport: {

packages/lsd-react/.storybook/withTheme.decorator.tsx

@@ -1,23 +1,28 @@
 import { DecoratorFunction, useGlobals } from '@storybook/addons'
 import React, { useEffect } from 'react'
-import { defaultThemes, ThemeProvider } from '../src'
+import { defaultThemes, Theme, ThemeProvider } from '../src'
 
 export const withTheme: DecoratorFunction = (Story, context) => {
   const StoryComponent = Story as any as React.ComponentType
 
   const themeName = context.globals?.theme ?? 'light'
-  const theme = defaultThemes[themeName]
+  const theme = defaultThemes[themeName] as Theme
 
   const [globals, setGlobals] = useGlobals()
 
   useEffect(() => {
-    setGlobals({
-      ...globals,
-      backgrounds: {
-        ...(globals.background ?? {}),
-        value: theme.palette.background.primary,
-      },
-    })
+    const background = (context.parameters.backgrounds?.values ?? []).find(
+      (value) => value.name === themeName,
+    )?.value
+
+    globals.backgrounds?.value !== background &&
+      setGlobals({
+        ...globals,
+        backgrounds: {
+          ...(globals.background ?? {}),
+          value: background,
+        },
+      })
   }, [theme])
 
   return (

packages/lsd-react/src/components/Button/Button.styles.ts

@@ -1,47 +1,38 @@
 import { css } from '@emotion/react'
-import { withTheme } from '../Theme/withTheme'
 import { buttonClasses } from './Button.classes'
 
-export const ButtonStyles = withTheme(
-  (theme) => css`
-    .${buttonClasses.root} {
-      width: auto;
-      color: var(--lsd-text-primary);
-      background: none;
-      border: 1px solid var(--lsd-surface-primary);
-
-      cursor: pointer;
-      padding: 6px 24px;
-
-      @media (max-width: ${theme.breakpoints.lg.width}px) {
-        color: red;
-        border-color: red;
-      }
-    }
-
-    .${buttonClasses.disabled} {
-      cursor: default;
-      color: var(--lsd-surface-disabled);
-      border-color: var(--lsd-surface-disabled);
-    }
-
-    .${buttonClasses.large} {
-      padding: 10px 40px;
-    }
-
-    .${buttonClasses.medium} {
-    }
-
-    .${buttonClasses.small} {
-      padding: 6px 12px;
-    }
-
-    .${buttonClasses.root}:hover {
-      &:not(.${buttonClasses.disabled}) {
-        .${buttonClasses.text} {
-          text-decoration: underline;
-        }
+export const ButtonStyles = css`
+  .${buttonClasses.root} {
+    width: auto;
+    color: rgb(var(--lsd-text-primary));
+    background: none;
+    border: 1px solid rgb(var(--lsd-border-primary));
+
+    cursor: pointer;
+    padding: 6px 24px;
+  }
+
+  .${buttonClasses.disabled} {
+    cursor: default;
+    opacity: 0.34;
+  }
+
+  .${buttonClasses.large} {
+    padding: 10px 40px;
+  }
+
+  .${buttonClasses.medium} {
+  }
+
+  .${buttonClasses.small} {
+    padding: 6px 12px;
+  }
+
+  .${buttonClasses.root}:hover {
+    &:not(.${buttonClasses.disabled}) {
+      .${buttonClasses.text} {
+        text-decoration: underline;
       }
     }
-  `,
-)
+  }
+`

packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx

@@ -1,14 +1,17 @@
-import { Global } from '@emotion/react'
+import { Global, SerializedStyles } from '@emotion/react'
 import React, { useMemo } from 'react'
 import { ButtonStyles } from '../Button/Button.styles'
-import { defaultThemes, Theme } from '../Theme'
+import { defaultThemes, Theme, withTheme } from '../Theme'
+
+const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
+  [ButtonStyles]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({
   theme = defaultThemes.light,
 }) => {
   const styles = useMemo(
     () =>
-      [ButtonStyles]
+      componentStyles
         .map((style) => (typeof style === 'function' ? style(theme) : style))
         .map((style) => <Global key={style.name} styles={style} />),
     [theme],