Merge branch 'refactor-with-vanilla-extract' of https://github.com/en…

…sdomains/thorin into refactor-with-vanilla-extract
ensdomains · Sep 2, 2024 · d7cd0a9 · d7cd0a9
2 parents 34c9912 + 7369b1e
commit d7cd0a9
Show file tree

Hide file tree

Showing 24 changed files with 439 additions and 1,265 deletions.
diff --git a/components/src/components/atoms/Avatar/Avatar.tsx b/components/src/components/atoms/Avatar/Avatar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { rainbowSprinkles } from '@/src/css/rainbow-spinkles.css'
 
-import { rawColorToRGBA } from '@/src/tokens/color3'
+import { rawColorToRGBA } from '@/src/tokens/color'
 
 import { Box, type BoxProps } from '../Box/Box'
 import { avatar } from './styles.css'

diff --git a/components/src/components/atoms/Button/utils/getValidatedColor.ts b/components/src/components/atoms/Button/utils/getValidatedColor.ts
@@ -1,7 +1,7 @@
-import type { PrimaryColor } from '@/src/tokens/color3'
-import { validatePrimaryColor } from '@/src/tokens/color3'
+import type { Hue } from '@/src/tokens/color'
+import { validatePrimaryColor } from '@/src/tokens/color'
 
-export type Color = PrimaryColor
+export type Color = Hue
 
 export type WithColor = { color: Color }
 

diff --git a/components/src/components/atoms/Button/utils/withColorStyle.ts b/components/src/components/atoms/Button/utils/withColorStyle.ts
@@ -1,13 +1,13 @@
 import { P, match } from 'ts-pattern'
 
-import type { PrimaryColor } from '@/src/tokens/color3'
-import { validatePrimaryColor } from '@/src/tokens/color3'
+import type { Hue } from '@/src/tokens/color'
+import { validatePrimaryColor } from '@/src/tokens/color'
 
 type Shade = 'Primary' | 'Secondary'
 
 export type ColorStyle =
-  | PrimaryColor
-  | `${PrimaryColor}${Shade}`
+  | Hue
+  | `${Hue}${Shade}`
   | 'background'
   | 'disabled'
   | 'transparent'
@@ -23,14 +23,14 @@ type Properties = {
 
 type Property = keyof Properties
 
-const getPrimaryColor = (color: PrimaryColor, property: Property): string =>
+const getPrimaryColor = (color: Hue, property: Property): string =>
   match(property)
     .with(P.union('background', 'border'), () => `$${color}Primary`)
     .with('content', () => '$textAccent')
     .with('hover', () => `$${color}Bright`)
     .exhaustive()
 
-const getSecondaryColor = (color: PrimaryColor, property: Property): string =>
+const getSecondaryColor = (color: Hue, property: Property): string =>
   match(property)
     .with(P.union('background', 'border'), () => `$${color}Surface`)
     .with('content', () => `$${color}Dim`)

diff --git a/components/src/components/atoms/Heading/Heading.tsx b/components/src/components/atoms/Heading/Heading.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import type { WithColor } from '@/src/types/withColorOrColorStyle'
+import type { WithColor } from '@/src/interfaces/withColor'
 
 import type { BoxProps } from '../Box/Box'
 import { Box } from '../Box/Box'

diff --git a/components/src/components/atoms/Tag/utils/withColorStyle.ts b/components/src/components/atoms/Tag/utils/withColorStyle.ts
@@ -1,11 +1,11 @@
 import { P, match } from 'ts-pattern'
 
-import type { PrimaryColor } from '@/src/tokens/color3'
-import { validatePrimaryColor } from '@/src/tokens/color3'
+import type { Hue } from '@/src/tokens/color'
+import { validatePrimaryColor } from '@/src/tokens/color'
 
 type Shade = 'Primary' | 'Secondary'
 
-type ColorStyle = PrimaryColor | `${PrimaryColor}${Shade}`
+type ColorStyle = Hue | `${Hue}${Shade}`
 
 export type WithColorStyle = { colorStyle?: ColorStyle }
 
@@ -17,14 +17,14 @@ type Properties = {
 
 type Property = keyof Properties
 
-const getPrimaryColor = (color: PrimaryColor, property: Property): string =>
+const getPrimaryColor = (color: Hue, property: Property): string =>
   match(property)
     .with('background', () => `$${color}Primary`)
     .with('content', () => '$textAccent')
     .with('hover', () => `$${color}Bright`)
     .exhaustive()
 
-const getSecondaryColor = (color: PrimaryColor, property: Property): string =>
+const getSecondaryColor = (color: Hue, property: Property): string =>
   match(property)
     .with('background', () => `$${color}Surface`)
     .with('content', () => `$${color}Primary`)

diff --git a/components/src/components/molecules/Checkbox/utils/getValueForColorStyle.ts b/components/src/components/molecules/Checkbox/utils/getValueForColorStyle.ts
@@ -1,11 +1,11 @@
 import { P, match } from 'ts-pattern'
 
-import type { PrimaryColor } from '@/src/tokens/color3'
-import { validatePrimaryColor } from '@/src/tokens/color3'
+import type { Hue } from '@/src/tokens/color'
+import { validatePrimaryColor } from '@/src/tokens/color'
 
 type Shade = 'Primary' | 'Secondary'
 
-type ColorStyle = PrimaryColor | `${PrimaryColor}${Shade}`
+type ColorStyle = Hue | `${Hue}${Shade}`
 
 export type WithColorStyle = { colorStyle?: ColorStyle }
 
@@ -16,13 +16,13 @@ type Properties = {
 
 type Property = keyof Properties
 
-const getPrimaryColor = (color: PrimaryColor, property: Property): string =>
+const getPrimaryColor = (color: Hue, property: Property): string =>
   match(property)
     .with('background', () => `$${color}Primary`)
     .with('content', () => '$textAccent')
     .exhaustive()
 
-const getSecondaryColor = (color: PrimaryColor, property: Property): string =>
+const getSecondaryColor = (color: Hue, property: Property): string =>
   match(property)
     .with(P.union('background'), () => `$${color}Surface`)
     .with('content', () => `$${color}Primary`)

diff --git a/components/src/components/molecules/CheckboxRow/utils/getValueForColorStyle.ts b/components/src/components/molecules/CheckboxRow/utils/getValueForColorStyle.ts
@@ -1,11 +1,11 @@
 import { P, match } from 'ts-pattern'
 
-import type { PrimaryColor } from '@/src/tokens/color3'
-import { validatePrimaryColor } from '@/src/tokens/color3'
+import type { Hue } from '@/src/tokens/color'
+import { validatePrimaryColor } from '@/src/tokens/color'
 
 type Shade = 'Primary' | 'Secondary'
 
-export type ColorStyle = PrimaryColor | `${PrimaryColor}${Shade}`
+export type ColorStyle = Hue | `${Hue}${Shade}`
 
 export type WithColorStyle = { colorStyle: ColorStyle }
 
@@ -18,15 +18,15 @@ type Properties = {
 
 type Property = keyof Properties
 
-const getPrimaryColor = (color: PrimaryColor, property: Property): string =>
+const getPrimaryColor = (color: Hue, property: Property): string =>
   match(property)
     .with('background', () => `$${color}Surface`)
     .with('svg', () => '$textAccent')
     .with('icon', () => `$${color}Primary`)
     .with('iconHover', () => `$${color}Bright`)
     .exhaustive()
 
-const getSecondaryColor = (color: PrimaryColor, property: Property): string =>
+const getSecondaryColor = (color: Hue, property: Property): string =>
   match(property)
     .with('background', () => `$${color}Surface`)
     .with('svg', () => `$${color}Dim`)

diff --git a/components/src/components/molecules/CountdownCircle/utils/getValidatedColor.ts b/components/src/components/molecules/CountdownCircle/utils/getValidatedColor.ts
@@ -1,7 +1,7 @@
-import type { PrimaryColor } from '@/src/tokens/color3'
-import { validatePrimaryColor } from '@/src/tokens/color3'
+import type { Hue } from '@/src/tokens/color'
+import { validatePrimaryColor } from '@/src/tokens/color'
 
-export type Color = PrimaryColor
+export type Color = Hue
 
 export type WithColor = { color: Color }
 

diff --git a/components/src/components/molecules/CurrencyToggle/utils/getValidatedColor.ts b/components/src/components/molecules/CurrencyToggle/utils/getValidatedColor.ts
@@ -1,7 +1,7 @@
-import type { PrimaryColor } from '@/src/tokens/color3'
-import { validatePrimaryColor } from '@/src/tokens/color3'
+import type { Hue } from '@/src/tokens/color'
+import { validatePrimaryColor } from '@/src/tokens/color'
 
-export type Color = PrimaryColor
+export type Color = Hue
 
 export type WithColor = { color: Color }
 

diff --git a/components/src/components/molecules/RadioButton/utils/getValidatedColor.ts b/components/src/components/molecules/RadioButton/utils/getValidatedColor.ts
@@ -1,7 +1,7 @@
-import type { PrimaryColor } from '@/src/tokens/color3'
-import { validatePrimaryColor } from '@/src/tokens/color3'
+import type { Hue } from '@/src/tokens/color'
+import { validatePrimaryColor } from '@/src/tokens/color'
 
-export type Color = PrimaryColor
+export type Color = Hue
 
 export type WithColor = { color: Color }
 

diff --git a/components/src/components/molecules/ThemeToggle/utils/getValidatedColor.ts b/components/src/components/molecules/ThemeToggle/utils/getValidatedColor.ts
@@ -1,7 +1,7 @@
-import type { PrimaryColor } from '@/src/tokens/color3'
-import { validatePrimaryColor } from '@/src/tokens/color3'
+import type { Hue } from '@/src/tokens/color'
+import { validatePrimaryColor } from '@/src/tokens/color'
 
-export type Color = PrimaryColor
+export type Color = Hue
 
 export type WithColor = { color: Color }
 

diff --git a/components/src/components/molecules/Toggle/utils/getValidatedColor.ts b/components/src/components/molecules/Toggle/utils/getValidatedColor.ts
@@ -1,7 +1,7 @@
-import type { PrimaryColor } from '@/src/tokens/color3'
-import { validatePrimaryColor } from '@/src/tokens/color3'
+import type { Hue } from '@/src/tokens/color'
+import { validatePrimaryColor } from '@/src/tokens/color'
 
-export type Color = PrimaryColor
+export type Color = Hue
 
 export type WithColor = { color: Color }
 

diff --git a/components/src/css/theme.css.ts b/components/src/css/theme.css.ts
@@ -3,7 +3,7 @@ import {
   createGlobalThemeContract,
 } from '@vanilla-extract/css'
 
-import { darkColors, lightColors } from '../tokens/color3'
+import { darkColors, lightColors } from '../tokens/color'
 import { borderStyles, borderWidths, radii } from '../tokens/border'
 import { space } from '../tokens/space'
 import {

diff --git a/components/src/index.ts b/components/src/index.ts
@@ -6,4 +6,4 @@ export { tokens, baseTheme, lightTheme, darkTheme } from './tokens'
 export type { DefaultTheme, EmptyObject, Accent, Mode, ReactNodeNoStrings } from './types'
 export type { Hue, Colors, Space } from './tokens'
 export * from './css/theme.css'
-export * from './tokens/color3'
+export * from './tokens/color'
diff --git a/components/src/interfaces/withColor.ts b/components/src/interfaces/withColor.ts
@@ -1,14 +1,14 @@
 import type {
   AdditionalColor,
   PaletteColor,
-  PrimaryColor } from '@/src/tokens/color3'
+  Hue } from '@/src/tokens/color'
 import {
   ADDITIONAL_COLORS,
   PALETTE_COLORS,
   PRIMARY_COLORS,
-} from '@/src/tokens/color3'
+} from '@/src/tokens/color'
 
-export type Color = PrimaryColor | PaletteColor | AdditionalColor
+export type Color = Hue | PaletteColor | AdditionalColor
 
 export type WithColor = { color?: Color }
 

diff --git a/components/src/interfaces/withColourStyle.ts b/components/src/interfaces/withColourStyle.ts
@@ -1,13 +1,13 @@
 import { P, match } from 'ts-pattern'
 
-import type { Color, PrimaryColor } from '../tokens/color3'
-import { validatePrimaryColor } from '../tokens/color3'
+import type { Color, Hue } from '../tokens/color'
+import { validatePrimaryColor } from '../tokens/color'
 
 type Shade = 'Primary' | 'Secondary'
 
 type ColourStyle =
-  | PrimaryColor
-  | `${PrimaryColor}${Shade}`
+  | Hue
+  | `${Hue}${Shade}`
   | 'background'
   | 'disabled'
 
@@ -22,14 +22,14 @@ type Properties = {
 
 type Property = keyof Properties
 
-const getPrimaryColor = (colour: PrimaryColor, property: Property): Color =>
+const getPrimaryColor = (colour: Hue, property: Property): Color =>
   match(property)
     .with(P.union('background', 'border'), () => `${colour}Primary` as const)
     .with('content', () => 'textAccent' as const)
     .with('hover', () => `${colour}Bright` as const)
     .exhaustive()
 
-const getSecondaryColor = (colour: PrimaryColor, property: Property): Color =>
+const getSecondaryColor = (colour: Hue, property: Property): Color =>
   match(property)
     .with(P.union('background', 'border'), () => `${colour}Surface` as const)
     .with('content', () => `${colour}Dim` as const)