Generate themes from hues
This commit is contained in:
Eric Bailey
+448
-186
@@ -1,199 +1,451 @@
|
||||
import {atoms} from '#/alf/atoms'
|
||||
import * as tokens from '#/alf/tokens'
|
||||
import type {Mutable} from '#/alf/types'
|
||||
import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
|
||||
|
||||
export type ThemeName = 'light' | 'dim' | 'dark'
|
||||
export type ReadonlyTheme = typeof light
|
||||
export type Theme = Mutable<ReadonlyTheme> & {name: ThemeName}
|
||||
export type ReadonlyPalette = typeof lightPalette
|
||||
export type Palette = Mutable<ReadonlyPalette>
|
||||
export type Palette = {
|
||||
white: string
|
||||
black: string
|
||||
|
||||
export const lightPalette = {
|
||||
white: tokens.color.gray_0,
|
||||
black: tokens.color.gray_1000,
|
||||
contrast_25: string
|
||||
contrast_50: string
|
||||
contrast_100: string
|
||||
contrast_200: string
|
||||
contrast_300: string
|
||||
contrast_400: string
|
||||
contrast_500: string
|
||||
contrast_600: string
|
||||
contrast_700: string
|
||||
contrast_800: string
|
||||
contrast_900: string
|
||||
contrast_950: string
|
||||
contrast_975: string
|
||||
|
||||
contrast_25: tokens.color.gray_25,
|
||||
contrast_50: tokens.color.gray_50,
|
||||
contrast_100: tokens.color.gray_100,
|
||||
contrast_200: tokens.color.gray_200,
|
||||
contrast_300: tokens.color.gray_300,
|
||||
contrast_400: tokens.color.gray_400,
|
||||
contrast_500: tokens.color.gray_500,
|
||||
contrast_600: tokens.color.gray_600,
|
||||
contrast_700: tokens.color.gray_700,
|
||||
contrast_800: tokens.color.gray_800,
|
||||
contrast_900: tokens.color.gray_900,
|
||||
contrast_950: tokens.color.gray_950,
|
||||
contrast_975: tokens.color.gray_975,
|
||||
primary_25: string
|
||||
primary_50: string
|
||||
primary_100: string
|
||||
primary_200: string
|
||||
primary_300: string
|
||||
primary_400: string
|
||||
primary_500: string
|
||||
primary_600: string
|
||||
primary_700: string
|
||||
primary_800: string
|
||||
primary_900: string
|
||||
primary_950: string
|
||||
primary_975: string
|
||||
|
||||
primary_25: tokens.color.blue_25,
|
||||
primary_50: tokens.color.blue_50,
|
||||
primary_100: tokens.color.blue_100,
|
||||
primary_200: tokens.color.blue_200,
|
||||
primary_300: tokens.color.blue_300,
|
||||
primary_400: tokens.color.blue_400,
|
||||
primary_500: tokens.color.blue_500,
|
||||
primary_600: tokens.color.blue_600,
|
||||
primary_700: tokens.color.blue_700,
|
||||
primary_800: tokens.color.blue_800,
|
||||
primary_900: tokens.color.blue_900,
|
||||
primary_950: tokens.color.blue_950,
|
||||
primary_975: tokens.color.blue_975,
|
||||
positive_25: string
|
||||
positive_50: string
|
||||
positive_100: string
|
||||
positive_200: string
|
||||
positive_300: string
|
||||
positive_400: string
|
||||
positive_500: string
|
||||
positive_600: string
|
||||
positive_700: string
|
||||
positive_800: string
|
||||
positive_900: string
|
||||
positive_950: string
|
||||
positive_975: string
|
||||
|
||||
positive_25: tokens.color.green_25,
|
||||
positive_50: tokens.color.green_50,
|
||||
positive_100: tokens.color.green_100,
|
||||
positive_200: tokens.color.green_200,
|
||||
positive_300: tokens.color.green_300,
|
||||
positive_400: tokens.color.green_400,
|
||||
positive_500: tokens.color.green_500,
|
||||
positive_600: tokens.color.green_600,
|
||||
positive_700: tokens.color.green_700,
|
||||
positive_800: tokens.color.green_800,
|
||||
positive_900: tokens.color.green_900,
|
||||
positive_950: tokens.color.green_950,
|
||||
positive_975: tokens.color.green_975,
|
||||
negative_25: string
|
||||
negative_50: string
|
||||
negative_100: string
|
||||
negative_200: string
|
||||
negative_300: string
|
||||
negative_400: string
|
||||
negative_500: string
|
||||
negative_600: string
|
||||
negative_700: string
|
||||
negative_800: string
|
||||
negative_900: string
|
||||
negative_950: string
|
||||
negative_975: string
|
||||
}
|
||||
export type ThemedAtoms = {
|
||||
text: {
|
||||
color: string
|
||||
}
|
||||
text_contrast_low: {
|
||||
color: string
|
||||
}
|
||||
text_contrast_medium: {
|
||||
color: string
|
||||
}
|
||||
text_contrast_high: {
|
||||
color: string
|
||||
}
|
||||
text_inverted: {
|
||||
color: string
|
||||
}
|
||||
bg: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_25: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_50: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_100: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_200: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_300: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_400: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_500: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_600: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_700: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_800: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_900: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_950: {
|
||||
backgroundColor: string
|
||||
}
|
||||
bg_contrast_975: {
|
||||
backgroundColor: string
|
||||
}
|
||||
border_contrast_low: {
|
||||
borderColor: string
|
||||
}
|
||||
border_contrast_medium: {
|
||||
borderColor: string
|
||||
}
|
||||
border_contrast_high: {
|
||||
borderColor: string
|
||||
}
|
||||
shadow_sm: {
|
||||
shadowRadius: number
|
||||
shadowOpacity: number
|
||||
elevation: number
|
||||
shadowColor: string
|
||||
}
|
||||
shadow_md: {
|
||||
shadowRadius: number
|
||||
shadowOpacity: number
|
||||
elevation: number
|
||||
shadowColor: string
|
||||
}
|
||||
shadow_lg: {
|
||||
shadowRadius: number
|
||||
shadowOpacity: number
|
||||
elevation: number
|
||||
shadowColor: string
|
||||
}
|
||||
}
|
||||
export type Theme = {
|
||||
name: ThemeName
|
||||
palette: Palette
|
||||
atoms: ThemedAtoms
|
||||
}
|
||||
|
||||
negative_25: tokens.color.red_25,
|
||||
negative_50: tokens.color.red_50,
|
||||
negative_100: tokens.color.red_100,
|
||||
negative_200: tokens.color.red_200,
|
||||
negative_300: tokens.color.red_300,
|
||||
negative_400: tokens.color.red_400,
|
||||
negative_500: tokens.color.red_500,
|
||||
negative_600: tokens.color.red_600,
|
||||
negative_700: tokens.color.red_700,
|
||||
negative_800: tokens.color.red_800,
|
||||
negative_900: tokens.color.red_900,
|
||||
negative_950: tokens.color.red_950,
|
||||
negative_975: tokens.color.red_975,
|
||||
} as const
|
||||
const themes = createThemes({
|
||||
hues: {
|
||||
primary: BLUE_HUE,
|
||||
negative: RED_HUE,
|
||||
positive: GREEN_HUE,
|
||||
},
|
||||
})
|
||||
|
||||
export const darkPalette: Palette = {
|
||||
white: tokens.color.gray_0,
|
||||
black: tokens.color.trueBlack,
|
||||
export const light = themes.light
|
||||
export const dark = themes.dark
|
||||
export const dim = themes.dim
|
||||
|
||||
contrast_25: tokens.color.gray_1000,
|
||||
contrast_50: tokens.color.gray_975,
|
||||
contrast_100: tokens.color.gray_950,
|
||||
contrast_200: tokens.color.gray_900,
|
||||
contrast_300: tokens.color.gray_800,
|
||||
contrast_400: tokens.color.gray_700,
|
||||
contrast_500: tokens.color.gray_600,
|
||||
contrast_600: tokens.color.gray_500,
|
||||
contrast_700: tokens.color.gray_400,
|
||||
contrast_800: tokens.color.gray_300,
|
||||
contrast_900: tokens.color.gray_200,
|
||||
contrast_950: tokens.color.gray_100,
|
||||
contrast_975: tokens.color.gray_50,
|
||||
/**
|
||||
* @deprecated use ALF and access palette from `useTheme()`
|
||||
*/
|
||||
export const lightPalette = themes.lightPalette
|
||||
/**
|
||||
* @deprecated use ALF and access palette from `useTheme()`
|
||||
*/
|
||||
export const darkPalette = themes.darkPalette
|
||||
/**
|
||||
* @deprecated use ALF and access palette from `useTheme()`
|
||||
*/
|
||||
export const dimPalette = themes.dimPalette
|
||||
|
||||
primary_25: tokens.color.blue_975,
|
||||
primary_50: tokens.color.blue_950,
|
||||
primary_100: tokens.color.blue_900,
|
||||
primary_200: tokens.color.blue_800,
|
||||
primary_300: tokens.color.blue_700,
|
||||
primary_400: tokens.color.blue_600,
|
||||
primary_500: tokens.color.blue_500,
|
||||
primary_600: tokens.color.blue_400,
|
||||
primary_700: tokens.color.blue_300,
|
||||
primary_800: tokens.color.blue_200,
|
||||
primary_900: tokens.color.blue_100,
|
||||
primary_950: tokens.color.blue_50,
|
||||
primary_975: tokens.color.blue_25,
|
||||
export function createThemes({
|
||||
hues,
|
||||
}: {
|
||||
hues: {
|
||||
primary: number
|
||||
negative: number
|
||||
positive: number
|
||||
}
|
||||
}): {
|
||||
lightPalette: Palette
|
||||
darkPalette: Palette
|
||||
dimPalette: Palette
|
||||
light: Theme
|
||||
dark: Theme
|
||||
dim: Theme
|
||||
} {
|
||||
const color = {
|
||||
trueBlack: '#000000',
|
||||
|
||||
positive_25: tokens.color.green_25,
|
||||
positive_50: tokens.color.green_50,
|
||||
positive_100: tokens.color.green_100,
|
||||
positive_200: tokens.color.green_200,
|
||||
positive_300: tokens.color.green_300,
|
||||
positive_400: tokens.color.green_400,
|
||||
positive_500: tokens.color.green_500,
|
||||
positive_600: tokens.color.green_600,
|
||||
positive_700: tokens.color.green_700,
|
||||
positive_800: tokens.color.green_800,
|
||||
positive_900: tokens.color.green_900,
|
||||
positive_950: tokens.color.green_950,
|
||||
positive_975: tokens.color.green_975,
|
||||
temp_purple: 'rgb(105 0 255)',
|
||||
temp_purple_dark: 'rgb(83 0 202)',
|
||||
|
||||
negative_25: tokens.color.red_975,
|
||||
negative_50: tokens.color.red_950,
|
||||
negative_100: tokens.color.red_900,
|
||||
negative_200: tokens.color.red_800,
|
||||
negative_300: tokens.color.red_700,
|
||||
negative_400: tokens.color.red_600,
|
||||
negative_500: tokens.color.red_500,
|
||||
negative_600: tokens.color.red_400,
|
||||
negative_700: tokens.color.red_300,
|
||||
negative_800: tokens.color.red_200,
|
||||
negative_900: tokens.color.red_100,
|
||||
negative_950: tokens.color.red_50,
|
||||
negative_975: tokens.color.red_25,
|
||||
} as const
|
||||
gray_0: `hsl(${hues.primary}, 20%, ${tokens.scale[14]}%)`,
|
||||
gray_25: `hsl(${hues.primary}, 20%, ${tokens.scale[13]}%)`,
|
||||
gray_50: `hsl(${hues.primary}, 20%, ${tokens.scale[12]}%)`,
|
||||
gray_100: `hsl(${hues.primary}, 20%, ${tokens.scale[11]}%)`,
|
||||
gray_200: `hsl(${hues.primary}, 20%, ${tokens.scale[10]}%)`,
|
||||
gray_300: `hsl(${hues.primary}, 20%, ${tokens.scale[9]}%)`,
|
||||
gray_400: `hsl(${hues.primary}, 20%, ${tokens.scale[8]}%)`,
|
||||
gray_500: `hsl(${hues.primary}, 20%, ${tokens.scale[7]}%)`,
|
||||
gray_600: `hsl(${hues.primary}, 24%, ${tokens.scale[6]}%)`,
|
||||
gray_700: `hsl(${hues.primary}, 24%, ${tokens.scale[5]}%)`,
|
||||
gray_800: `hsl(${hues.primary}, 28%, ${tokens.scale[4]}%)`,
|
||||
gray_900: `hsl(${hues.primary}, 28%, ${tokens.scale[3]}%)`,
|
||||
gray_950: `hsl(${hues.primary}, 28%, ${tokens.scale[2]}%)`,
|
||||
gray_975: `hsl(${hues.primary}, 28%, ${tokens.scale[1]}%)`,
|
||||
gray_1000: `hsl(${hues.primary}, 28%, ${tokens.scale[0]}%)`,
|
||||
|
||||
export const dimPalette: Palette = {
|
||||
primary_25: `hsl(${hues.primary}, 99%, 97%)`,
|
||||
primary_50: `hsl(${hues.primary}, 99%, 95%)`,
|
||||
primary_100: `hsl(${hues.primary}, 99%, 90%)`,
|
||||
primary_200: `hsl(${hues.primary}, 99%, 80%)`,
|
||||
primary_300: `hsl(${hues.primary}, 99%, 70%)`,
|
||||
primary_400: `hsl(${hues.primary}, 99%, 60%)`,
|
||||
primary_500: `hsl(${hues.primary}, 99%, 53%)`,
|
||||
primary_600: `hsl(${hues.primary}, 99%, 42%)`,
|
||||
primary_700: `hsl(${hues.primary}, 99%, 34%)`,
|
||||
primary_800: `hsl(${hues.primary}, 99%, 26%)`,
|
||||
primary_900: `hsl(${hues.primary}, 99%, 18%)`,
|
||||
primary_950: `hsl(${hues.primary}, 99%, 10%)`,
|
||||
primary_975: `hsl(${hues.primary}, 99%, 7%)`,
|
||||
|
||||
green_25: `hsl(${hues.positive}, 82%, 97%)`,
|
||||
green_50: `hsl(${hues.positive}, 82%, 95%)`,
|
||||
green_100: `hsl(${hues.positive}, 82%, 90%)`,
|
||||
green_200: `hsl(${hues.positive}, 82%, 80%)`,
|
||||
green_300: `hsl(${hues.positive}, 82%, 70%)`,
|
||||
green_400: `hsl(${hues.positive}, 82%, 60%)`,
|
||||
green_500: `hsl(${hues.positive}, 82%, 50%)`,
|
||||
green_600: `hsl(${hues.positive}, 82%, 42%)`,
|
||||
green_700: `hsl(${hues.positive}, 82%, 34%)`,
|
||||
green_800: `hsl(${hues.positive}, 82%, 26%)`,
|
||||
green_900: `hsl(${hues.positive}, 82%, 18%)`,
|
||||
green_950: `hsl(${hues.positive}, 82%, 10%)`,
|
||||
green_975: `hsl(${hues.positive}, 82%, 7%)`,
|
||||
|
||||
red_25: `hsl(${hues.negative}, 91%, 97%)`,
|
||||
red_50: `hsl(${hues.negative}, 91%, 95%)`,
|
||||
red_100: `hsl(${hues.negative}, 91%, 90%)`,
|
||||
red_200: `hsl(${hues.negative}, 91%, 80%)`,
|
||||
red_300: `hsl(${hues.negative}, 91%, 70%)`,
|
||||
red_400: `hsl(${hues.negative}, 91%, 60%)`,
|
||||
red_500: `hsl(${hues.negative}, 91%, 50%)`,
|
||||
red_600: `hsl(${hues.negative}, 91%, 42%)`,
|
||||
red_700: `hsl(${hues.negative}, 91%, 34%)`,
|
||||
red_800: `hsl(${hues.negative}, 91%, 26%)`,
|
||||
red_900: `hsl(${hues.negative}, 91%, 18%)`,
|
||||
red_950: `hsl(${hues.negative}, 91%, 10%)`,
|
||||
red_975: `hsl(${hues.negative}, 91%, 7%)`,
|
||||
} as const
|
||||
|
||||
const lightPalette = {
|
||||
white: color.gray_0,
|
||||
black: color.gray_1000,
|
||||
|
||||
contrast_25: color.gray_25,
|
||||
contrast_50: color.gray_50,
|
||||
contrast_100: color.gray_100,
|
||||
contrast_200: color.gray_200,
|
||||
contrast_300: color.gray_300,
|
||||
contrast_400: color.gray_400,
|
||||
contrast_500: color.gray_500,
|
||||
contrast_600: color.gray_600,
|
||||
contrast_700: color.gray_700,
|
||||
contrast_800: color.gray_800,
|
||||
contrast_900: color.gray_900,
|
||||
contrast_950: color.gray_950,
|
||||
contrast_975: color.gray_975,
|
||||
|
||||
primary_25: color.primary_25,
|
||||
primary_50: color.primary_50,
|
||||
primary_100: color.primary_100,
|
||||
primary_200: color.primary_200,
|
||||
primary_300: color.primary_300,
|
||||
primary_400: color.primary_400,
|
||||
primary_500: color.primary_500,
|
||||
primary_600: color.primary_600,
|
||||
primary_700: color.primary_700,
|
||||
primary_800: color.primary_800,
|
||||
primary_900: color.primary_900,
|
||||
primary_950: color.primary_950,
|
||||
primary_975: color.primary_975,
|
||||
|
||||
positive_25: color.green_25,
|
||||
positive_50: color.green_50,
|
||||
positive_100: color.green_100,
|
||||
positive_200: color.green_200,
|
||||
positive_300: color.green_300,
|
||||
positive_400: color.green_400,
|
||||
positive_500: color.green_500,
|
||||
positive_600: color.green_600,
|
||||
positive_700: color.green_700,
|
||||
positive_800: color.green_800,
|
||||
positive_900: color.green_900,
|
||||
positive_950: color.green_950,
|
||||
positive_975: color.green_975,
|
||||
|
||||
negative_25: color.red_25,
|
||||
negative_50: color.red_50,
|
||||
negative_100: color.red_100,
|
||||
negative_200: color.red_200,
|
||||
negative_300: color.red_300,
|
||||
negative_400: color.red_400,
|
||||
negative_500: color.red_500,
|
||||
negative_600: color.red_600,
|
||||
negative_700: color.red_700,
|
||||
negative_800: color.red_800,
|
||||
negative_900: color.red_900,
|
||||
negative_950: color.red_950,
|
||||
negative_975: color.red_975,
|
||||
} as const
|
||||
|
||||
const darkPalette: Palette = {
|
||||
white: color.gray_0,
|
||||
black: color.trueBlack,
|
||||
|
||||
contrast_25: color.gray_1000,
|
||||
contrast_50: color.gray_975,
|
||||
contrast_100: color.gray_950,
|
||||
contrast_200: color.gray_900,
|
||||
contrast_300: color.gray_800,
|
||||
contrast_400: color.gray_700,
|
||||
contrast_500: color.gray_600,
|
||||
contrast_600: color.gray_500,
|
||||
contrast_700: color.gray_400,
|
||||
contrast_800: color.gray_300,
|
||||
contrast_900: color.gray_200,
|
||||
contrast_950: color.gray_100,
|
||||
contrast_975: color.gray_50,
|
||||
|
||||
primary_25: color.primary_975,
|
||||
primary_50: color.primary_950,
|
||||
primary_100: color.primary_900,
|
||||
primary_200: color.primary_800,
|
||||
primary_300: color.primary_700,
|
||||
primary_400: color.primary_600,
|
||||
primary_500: color.primary_500,
|
||||
primary_600: color.primary_400,
|
||||
primary_700: color.primary_300,
|
||||
primary_800: color.primary_200,
|
||||
primary_900: color.primary_100,
|
||||
primary_950: color.primary_50,
|
||||
primary_975: color.primary_25,
|
||||
|
||||
positive_25: color.green_25,
|
||||
positive_50: color.green_50,
|
||||
positive_100: color.green_100,
|
||||
positive_200: color.green_200,
|
||||
positive_300: color.green_300,
|
||||
positive_400: color.green_400,
|
||||
positive_500: color.green_500,
|
||||
positive_600: color.green_600,
|
||||
positive_700: color.green_700,
|
||||
positive_800: color.green_800,
|
||||
positive_900: color.green_900,
|
||||
positive_950: color.green_950,
|
||||
positive_975: color.green_975,
|
||||
|
||||
negative_25: color.red_975,
|
||||
negative_50: color.red_950,
|
||||
negative_100: color.red_900,
|
||||
negative_200: color.red_800,
|
||||
negative_300: color.red_700,
|
||||
negative_400: color.red_600,
|
||||
negative_500: color.red_500,
|
||||
negative_600: color.red_400,
|
||||
negative_700: color.red_300,
|
||||
negative_800: color.red_200,
|
||||
negative_900: color.red_100,
|
||||
negative_950: color.red_50,
|
||||
negative_975: color.red_25,
|
||||
} as const
|
||||
|
||||
const dimPalette: Palette = {
|
||||
...darkPalette,
|
||||
black: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[0]}%)`,
|
||||
black: `hsl(${hues.primary}, 28%, ${tokens.dimScale[0]}%)`,
|
||||
|
||||
contrast_25: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[1]}%)`,
|
||||
contrast_50: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[2]}%)`,
|
||||
contrast_100: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[3]}%)`,
|
||||
contrast_200: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[4]}%)`,
|
||||
contrast_300: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[5]}%)`,
|
||||
contrast_400: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[6]}%)`,
|
||||
contrast_500: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[7]}%)`,
|
||||
contrast_600: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[8]}%)`,
|
||||
contrast_700: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[9]}%)`,
|
||||
contrast_800: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[10]}%)`,
|
||||
contrast_900: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[11]}%)`,
|
||||
contrast_950: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[12]}%)`,
|
||||
contrast_975: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[13]}%)`,
|
||||
contrast_25: `hsl(${hues.primary}, 28%, ${tokens.dimScale[1]}%)`,
|
||||
contrast_50: `hsl(${hues.primary}, 28%, ${tokens.dimScale[2]}%)`,
|
||||
contrast_100: `hsl(${hues.primary}, 28%, ${tokens.dimScale[3]}%)`,
|
||||
contrast_200: `hsl(${hues.primary}, 28%, ${tokens.dimScale[4]}%)`,
|
||||
contrast_300: `hsl(${hues.primary}, 24%, ${tokens.dimScale[5]}%)`,
|
||||
contrast_400: `hsl(${hues.primary}, 24%, ${tokens.dimScale[6]}%)`,
|
||||
contrast_500: `hsl(${hues.primary}, 20%, ${tokens.dimScale[7]}%)`,
|
||||
contrast_600: `hsl(${hues.primary}, 20%, ${tokens.dimScale[8]}%)`,
|
||||
contrast_700: `hsl(${hues.primary}, 20%, ${tokens.dimScale[9]}%)`,
|
||||
contrast_800: `hsl(${hues.primary}, 20%, ${tokens.dimScale[10]}%)`,
|
||||
contrast_900: `hsl(${hues.primary}, 20%, ${tokens.dimScale[11]}%)`,
|
||||
contrast_950: `hsl(${hues.primary}, 20%, ${tokens.dimScale[12]}%)`,
|
||||
contrast_975: `hsl(${hues.primary}, 20%, ${tokens.dimScale[13]}%)`,
|
||||
|
||||
primary_25: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[1]}%)`,
|
||||
primary_50: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[2]}%)`,
|
||||
primary_100: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[3]}%)`,
|
||||
primary_200: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[4]}%)`,
|
||||
primary_300: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[5]}%)`,
|
||||
primary_400: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[6]}%)`,
|
||||
primary_500: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[7]}%)`,
|
||||
primary_600: `hsl(${BLUE_HUE}, 95%, ${tokens.dimScale[8]}%)`,
|
||||
primary_700: `hsl(${BLUE_HUE}, 90%, ${tokens.dimScale[9]}%)`,
|
||||
primary_800: `hsl(${BLUE_HUE}, 82%, ${tokens.dimScale[10]}%)`,
|
||||
primary_900: `hsl(${BLUE_HUE}, 70%, ${tokens.dimScale[11]}%)`,
|
||||
primary_950: `hsl(${BLUE_HUE}, 60%, ${tokens.dimScale[12]}%)`,
|
||||
primary_975: `hsl(${BLUE_HUE}, 50%, ${tokens.dimScale[13]}%)`,
|
||||
primary_25: `hsl(${hues.primary}, 99%, ${tokens.dimScale[1]}%)`,
|
||||
primary_50: `hsl(${hues.primary}, 99%, ${tokens.dimScale[2]}%)`,
|
||||
primary_100: `hsl(${hues.primary}, 99%, ${tokens.dimScale[3]}%)`,
|
||||
primary_200: `hsl(${hues.primary}, 99%, ${tokens.dimScale[4]}%)`,
|
||||
primary_300: `hsl(${hues.primary}, 99%, ${tokens.dimScale[5]}%)`,
|
||||
primary_400: `hsl(${hues.primary}, 99%, ${tokens.dimScale[6]}%)`,
|
||||
primary_500: `hsl(${hues.primary}, 99%, ${tokens.dimScale[7]}%)`,
|
||||
primary_600: `hsl(${hues.primary}, 95%, ${tokens.dimScale[8]}%)`,
|
||||
primary_700: `hsl(${hues.primary}, 90%, ${tokens.dimScale[9]}%)`,
|
||||
primary_800: `hsl(${hues.primary}, 82%, ${tokens.dimScale[10]}%)`,
|
||||
primary_900: `hsl(${hues.primary}, 70%, ${tokens.dimScale[11]}%)`,
|
||||
primary_950: `hsl(${hues.primary}, 60%, ${tokens.dimScale[12]}%)`,
|
||||
primary_975: `hsl(${hues.primary}, 50%, ${tokens.dimScale[13]}%)`,
|
||||
|
||||
positive_25: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[13]}%)`,
|
||||
positive_50: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[12]}%)`,
|
||||
positive_100: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[11]}%)`,
|
||||
positive_200: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[10]}%)`,
|
||||
positive_300: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[9]}%)`,
|
||||
positive_400: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[8]}%)`,
|
||||
positive_500: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[7]}%)`,
|
||||
positive_600: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[6]}%)`,
|
||||
positive_700: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[5]}%)`,
|
||||
positive_800: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[4]}%)`,
|
||||
positive_900: `hsl(${GREEN_HUE}, 70%, ${tokens.dimScale[3]}%)`,
|
||||
positive_950: `hsl(${GREEN_HUE}, 60%, ${tokens.dimScale[2]}%)`,
|
||||
positive_975: `hsl(${GREEN_HUE}, 50%, ${tokens.dimScale[1]}%)`,
|
||||
positive_25: `hsl(${hues.positive}, 82%, ${tokens.dimScale[13]}%)`,
|
||||
positive_50: `hsl(${hues.positive}, 82%, ${tokens.dimScale[12]}%)`,
|
||||
positive_100: `hsl(${hues.positive}, 82%, ${tokens.dimScale[11]}%)`,
|
||||
positive_200: `hsl(${hues.positive}, 82%, ${tokens.dimScale[10]}%)`,
|
||||
positive_300: `hsl(${hues.positive}, 82%, ${tokens.dimScale[9]}%)`,
|
||||
positive_400: `hsl(${hues.positive}, 82%, ${tokens.dimScale[8]}%)`,
|
||||
positive_500: `hsl(${hues.positive}, 82%, ${tokens.dimScale[7]}%)`,
|
||||
positive_600: `hsl(${hues.positive}, 82%, ${tokens.dimScale[6]}%)`,
|
||||
positive_700: `hsl(${hues.positive}, 82%, ${tokens.dimScale[5]}%)`,
|
||||
positive_800: `hsl(${hues.positive}, 82%, ${tokens.dimScale[4]}%)`,
|
||||
positive_900: `hsl(${hues.positive}, 70%, ${tokens.dimScale[3]}%)`,
|
||||
positive_950: `hsl(${hues.positive}, 60%, ${tokens.dimScale[2]}%)`,
|
||||
positive_975: `hsl(${hues.positive}, 50%, ${tokens.dimScale[1]}%)`,
|
||||
|
||||
negative_25: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[1]}%)`,
|
||||
negative_50: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[2]}%)`,
|
||||
negative_100: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[3]}%)`,
|
||||
negative_200: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[4]}%)`,
|
||||
negative_300: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[5]}%)`,
|
||||
negative_400: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[6]}%)`,
|
||||
negative_500: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[7]}%)`,
|
||||
negative_600: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[8]}%)`,
|
||||
negative_700: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[9]}%)`,
|
||||
negative_800: `hsl(${RED_HUE}, 88%, ${tokens.dimScale[10]}%)`,
|
||||
negative_900: `hsl(${RED_HUE}, 84%, ${tokens.dimScale[11]}%)`,
|
||||
negative_950: `hsl(${RED_HUE}, 80%, ${tokens.dimScale[12]}%)`,
|
||||
negative_975: `hsl(${RED_HUE}, 70%, ${tokens.dimScale[13]}%)`,
|
||||
} as const
|
||||
negative_25: `hsl(${hues.negative}, 91%, ${tokens.dimScale[1]}%)`,
|
||||
negative_50: `hsl(${hues.negative}, 91%, ${tokens.dimScale[2]}%)`,
|
||||
negative_100: `hsl(${hues.negative}, 91%, ${tokens.dimScale[3]}%)`,
|
||||
negative_200: `hsl(${hues.negative}, 91%, ${tokens.dimScale[4]}%)`,
|
||||
negative_300: `hsl(${hues.negative}, 91%, ${tokens.dimScale[5]}%)`,
|
||||
negative_400: `hsl(${hues.negative}, 91%, ${tokens.dimScale[6]}%)`,
|
||||
negative_500: `hsl(${hues.negative}, 91%, ${tokens.dimScale[7]}%)`,
|
||||
negative_600: `hsl(${hues.negative}, 91%, ${tokens.dimScale[8]}%)`,
|
||||
negative_700: `hsl(${hues.negative}, 91%, ${tokens.dimScale[9]}%)`,
|
||||
negative_800: `hsl(${hues.negative}, 88%, ${tokens.dimScale[10]}%)`,
|
||||
negative_900: `hsl(${hues.negative}, 84%, ${tokens.dimScale[11]}%)`,
|
||||
negative_950: `hsl(${hues.negative}, 80%, ${tokens.dimScale[12]}%)`,
|
||||
negative_975: `hsl(${hues.negative}, 70%, ${tokens.dimScale[13]}%)`,
|
||||
} as const
|
||||
|
||||
export const light = {
|
||||
name: 'light' as ThemeName,
|
||||
const light: Theme = {
|
||||
name: 'light',
|
||||
palette: lightPalette,
|
||||
atoms: {
|
||||
text: {
|
||||
@@ -275,10 +527,10 @@ export const light = {
|
||||
shadowColor: lightPalette.black,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export const dark: Theme = {
|
||||
name: 'dark' as ThemeName,
|
||||
const dark: Theme = {
|
||||
name: 'dark',
|
||||
palette: darkPalette,
|
||||
atoms: {
|
||||
text: {
|
||||
@@ -350,24 +602,24 @@ export const dark: Theme = {
|
||||
shadow_sm: {
|
||||
...atoms.shadow_sm,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: tokens.color.trueBlack,
|
||||
shadowColor: color.trueBlack,
|
||||
},
|
||||
shadow_md: {
|
||||
...atoms.shadow_md,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: tokens.color.trueBlack,
|
||||
shadowColor: color.trueBlack,
|
||||
},
|
||||
shadow_lg: {
|
||||
...atoms.shadow_lg,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: tokens.color.trueBlack,
|
||||
shadowColor: color.trueBlack,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export const dim: Theme = {
|
||||
const dim: Theme = {
|
||||
...dark,
|
||||
name: 'dim' as ThemeName,
|
||||
name: 'dim',
|
||||
palette: dimPalette,
|
||||
atoms: {
|
||||
...dark.atoms,
|
||||
@@ -440,17 +692,27 @@ export const dim: Theme = {
|
||||
shadow_sm: {
|
||||
...atoms.shadow_sm,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
|
||||
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
|
||||
},
|
||||
shadow_md: {
|
||||
...atoms.shadow_md,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
|
||||
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
|
||||
},
|
||||
shadow_lg: {
|
||||
...atoms.shadow_lg,
|
||||
shadowOpacity: 0.7,
|
||||
shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
|
||||
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
lightPalette,
|
||||
darkPalette,
|
||||
dimPalette,
|
||||
light,
|
||||
dark,
|
||||
dim,
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user