fix: import right colors const in colors story

traefik · Nov 15, 2021 · d5eabe7 · d5eabe7
1 parent befa388
commit d5eabe7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/stitches.config.ts b/stitches.config.ts
@@ -19,6 +19,7 @@ import { Theme as NavigationTheme } from './components/Navigation/Navigation.the
 
 import { lightColors, darkColors } from './colors';
 import getPrimaryColorInfo from './utils/getPrimaryColorInfo';
+import { Property } from '@stitches/react/types/css';
 
 export type { VariantProps } from '@stitches/react';
 
@@ -29,16 +30,21 @@ const defaultPrimary: PrimaryColor = 'blue';
 
 const defaultPrimaryColor = getPrimaryColorInfo(defaultPrimary, lightColors);
 
+export const colors: Record<string, Property.Color> = {
+  ...lightColors,
+
+  // Semantic colors
+  primary: defaultPrimary,
+  contentBg: '$00dp',
+  hiContrast: '$deepBlue11',
+  loContrast: 'white',
+  focusOutline: 'hsl(216, 100%, 64%)',
+};
+
 const stitches = createStitches({
   theme: {
     colors: {
-      // Semantic colors
-      primary: defaultPrimaryColor.token,
-      contentBg: '$00dp',
-      hiContrast: '$deepBlue11',
-      loContrast: 'white',
-      focusOutline: 'hsl(216, 100%, 64%)',
-      ...lightColors,
+      ...colors,
       ...BadgeTheme.getLight(defaultPrimaryColor),
       ...ButtonTheme.getLight(defaultPrimaryColor),
       ...SwitchTheme.getLight(defaultPrimaryColor),

diff --git a/stories/examples/colors.stories.tsx → stories/colors.stories.tsx b/stories/examples/colors.stories.tsx → stories/colors.stories.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Property } from '@stitches/react/types/css';
 import { useDarkMode } from 'storybook-dark-mode';
-import { Box, Flex, Heading, Text, config } from '../../index';
-import { colors } from '../../stitches.config';
+import { Box, Flex, Heading, Text } from '../index';
+import { colors } from '../stitches.config';
 
 type Color = { token: string };
 type ColorGroup = { name: string; colors: Color[]; alphaColors: Color[] };