diff --git a/app/page.tsx b/app/page.tsx
index cfeebc7..431248c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -24,7 +24,7 @@ function HeadlineText() {
letterSpacing: 'tighter',
marginX: 'auto',
fontWeight: '300',
- color: 'fg.muted',
+ color: 'muted.100',
}}
>
Create your own unique theme for Panda CSS and Ark UI.
diff --git a/components/layout/bg-gradient.tsx b/components/layout/bg-gradient.tsx
index 3e46bff..d06f4b1 100644
--- a/components/layout/bg-gradient.tsx
+++ b/components/layout/bg-gradient.tsx
@@ -6,9 +6,9 @@ import { cn } from '@/lib/utils'
const cls = {
bg: css({
bgGradient: 'to-b',
- gradientFrom: 'bg.100',
- gradientVia: 'bg.100',
- gradientTo: 'bg.200',
+ gradientFrom: 'background.100',
+ gradientVia: 'background.100',
+ gradientTo: 'background.200',
}),
}
diff --git a/components/layout/bg-retro-grid.tsx b/components/layout/bg-retro-grid.tsx
index 8332942..3a061b4 100644
--- a/components/layout/bg-retro-grid.tsx
+++ b/components/layout/bg-retro-grid.tsx
@@ -17,7 +17,7 @@ const cls = {
// colorPalette: 'gray',
// bg: '#0e1416',
transform: 'rotateX(0deg)',
- bg: 'radial-gradient(ellipse at 50% 50%, transparent 0%, {colors.bg.100/90} 60%)',
+ bg: 'radial-gradient(ellipse at 50% 50%, transparent 0%, {colors.background.100/90} 60%)',
zIndex: 1,
// _dark: {
// // bg: 'radial-gradient(ellipse at 50% 50%, transparent 0%, {colors.colorPalette.900/90} 60%)',
diff --git a/modules/color-system/components/color-scale-editor.tsx b/modules/color-system/components/color-scale-editor.tsx
index 5323133..754321e 100644
--- a/modules/color-system/components/color-scale-editor.tsx
+++ b/modules/color-system/components/color-scale-editor.tsx
@@ -36,7 +36,7 @@ export default function ColorScaleEditor({ fg, config, onChange }: ColorScaleEdi
},
'& .subtitle': {
fontWeight: 'normal',
- color: 'fg.muted',
+ color: 'muted.100',
},
'& .label:not(:first-child)': {
justifyContent: 'center',
@@ -50,7 +50,7 @@ export default function ColorScaleEditor({ fg, config, onChange }: ColorScaleEdi
// fontSize: 'lg',
// borderRadius: 'sm',
// borderWidth: '1.5px',
- // borderColor: 'fg.200',
+ // borderColor: 'muted.100',
// },
}}
>
diff --git a/modules/color-system/components/color-scale-legend.tsx b/modules/color-system/components/color-scale-legend.tsx
index 590b9f2..5fd248a 100644
--- a/modules/color-system/components/color-scale-legend.tsx
+++ b/modules/color-system/components/color-scale-legend.tsx
@@ -17,7 +17,7 @@ export default function ColorScaleLegend({ levels }: { levels: Readonly
+
{children}
)
diff --git a/modules/design-system/lib/preset-color-aliases.ts b/modules/design-system/lib/preset-color-aliases.ts
new file mode 100644
index 0000000..b391ddb
--- /dev/null
+++ b/modules/design-system/lib/preset-color-aliases.ts
@@ -0,0 +1,26 @@
+import { definePreset } from '@pandacss/dev'
+// import { colorSystemPreset } from './preset-colors'
+// const _semanticColors = colorSystemPreset.theme?.extend?.semanticTokens?.colors
+// type SemanticColors = typeof _semanticColors
+// const semanticColors = _semanticColors as NonNullable
+
+export const colorAliasesPreset = definePreset({
+ theme: {
+ extend: {
+ semanticTokens: {
+ colors: {
+ // bg: semanticColors.background,
+ // fg: semanticColors.contrast,
+ muted: {
+ 100: {
+ value: '{colors.gray.fg1}',
+ },
+ 200: {
+ value: '{colors.gray.fg2}',
+ },
+ },
+ },
+ },
+ },
+ },
+})
diff --git a/modules/design-system/lib/preset-colors.ts b/modules/design-system/lib/preset-colors.ts
index 9bcd83a..510cc22 100644
--- a/modules/design-system/lib/preset-colors.ts
+++ b/modules/design-system/lib/preset-colors.ts
@@ -1,6 +1,6 @@
import { definePreset } from '@pandacss/dev'
-export const colorSystemPandaPreset = definePreset({
+export const colorSystemPreset = definePreset({
conditions: {
extend: {
mediaP3: '@media (color-gamut:p3)',
@@ -11,1231 +11,1515 @@ export const colorSystemPandaPreset = definePreset({
extend: {
tokens: {
colors: {
- bg: {
+ background: {
dark: {
'100': {
- value: '#000',
+ value: 'rgb(0, 0, 0)',
},
'200': {
- value: '#0A0A0A',
+ value: 'rgb(10, 10, 10)',
},
'300': {
- value: '#111111',
+ value: 'rgb(10, 10, 10)',
+ },
+ '400': {
+ value: 'rgb(10, 10, 10)',
+ },
+ '500': {
+ value: 'rgb(10, 10, 10)',
+ },
+ '600': {
+ value: 'rgb(10, 10, 10)',
+ },
+ '700': {
+ value: 'rgb(10, 10, 10)',
+ },
+ '800': {
+ value: 'rgb(10, 10, 10)',
+ },
+ '900': {
+ value: 'rgb(250, 250, 250)',
+ },
+ '950': {
+ value: 'rgb(255, 255, 255)',
},
DEFAULT: {
- value: '#000',
+ value: 'rgb(0, 0, 0)',
},
},
light: {
'100': {
- value: '#fff',
+ value: 'rgb(255, 255, 255)',
},
'200': {
- value: '#FAFAFA',
+ value: 'rgb(250, 250, 250)',
},
'300': {
- value: '#EEEEEE',
+ value: 'rgb(250, 250, 250)',
+ },
+ '400': {
+ value: 'rgb(250, 250, 250)',
+ },
+ '500': {
+ value: 'rgb(250, 250, 250)',
+ },
+ '600': {
+ value: 'rgb(250, 250, 250)',
+ },
+ '700': {
+ value: 'rgb(10, 10, 10)',
+ },
+ '800': {
+ value: 'rgb(10, 10, 10)',
+ },
+ '900': {
+ value: 'rgb(10, 10, 10)',
+ },
+ '950': {
+ value: 'rgb(0, 0, 0)',
},
DEFAULT: {
- value: '#fff',
+ value: 'rgb(255, 255, 255)',
},
},
},
- bgP3: {
- dark: {},
- light: {},
+ backgroundP3: {
+ dark: {
+ '100': {
+ value: 'color(srgb 0 0 0)',
+ },
+ '200': {
+ value: 'color(srgb 0.0392156862745098 0.0392156862745098 0.0392156862745098)',
+ },
+ '300': {
+ value: 'color(srgb 0.0392156862745098 0.0392156862745098 0.0392156862745098)',
+ },
+ '400': {
+ value: 'color(srgb 0.0392156862745098 0.0392156862745098 0.0392156862745098)',
+ },
+ '500': {
+ value: 'color(srgb 0.0392156862745098 0.0392156862745098 0.0392156862745098)',
+ },
+ '600': {
+ value: 'color(srgb 0.0392156862745098 0.0392156862745098 0.0392156862745098)',
+ },
+ '700': {
+ value: 'color(srgb 0.0392156862745098 0.0392156862745098 0.0392156862745098)',
+ },
+ '800': {
+ value: 'color(srgb 0.0392156862745098 0.0392156862745098 0.0392156862745098)',
+ },
+ '900': {
+ value: 'color(srgb 0.9803921568627451 0.9803921568627451 0.9803921568627451)',
+ },
+ '950': {
+ value: 'color(srgb 1 1 1)',
+ },
+ DEFAULT: {
+ value: 'color(srgb 0 0 0)',
+ },
+ },
+ light: {
+ '100': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '200': {
+ value: 'color(srgb 0.9803921568627451 0.9803921568627451 0.9803921568627451)',
+ },
+ '300': {
+ value: 'color(srgb 0.9803921568627451 0.9803921568627451 0.9803921568627451)',
+ },
+ '400': {
+ value: 'color(srgb 0.9803921568627451 0.9803921568627451 0.9803921568627451)',
+ },
+ '500': {
+ value: 'color(srgb 0.9803921568627451 0.9803921568627451 0.9803921568627451)',
+ },
+ '600': {
+ value: 'color(srgb 0.9803921568627451 0.9803921568627451 0.9803921568627451)',
+ },
+ '700': {
+ value: 'color(srgb 0.0392156862745098 0.0392156862745098 0.0392156862745098)',
+ },
+ '800': {
+ value: 'color(srgb 0.0392156862745098 0.0392156862745098 0.0392156862745098)',
+ },
+ '900': {
+ value: 'color(srgb 0.0392156862745098 0.0392156862745098 0.0392156862745098)',
+ },
+ '950': {
+ value: 'color(srgb 0 0 0)',
+ },
+ DEFAULT: {
+ value: 'color(srgb 1 1 1)',
+ },
+ },
},
- fg: {
+ contrast: {
dark: {
'100': {
- value: '#fff',
+ value: 'rgb(255, 255, 255)',
},
'200': {
- value: '#DDDDDD',
+ value: 'rgb(255, 255, 255)',
},
'300': {
- value: '#A1A1A1',
+ value: 'rgb(255, 255, 255)',
+ },
+ '400': {
+ value: 'rgb(255, 255, 255)',
+ },
+ '500': {
+ value: 'rgb(255, 255, 255)',
+ },
+ '600': {
+ value: 'rgb(255, 255, 255)',
+ },
+ '700': {
+ value: 'rgb(255, 255, 255)',
+ },
+ '800': {
+ value: 'rgb(255, 255, 255)',
+ },
+ '900': {
+ value: 'rgb(0, 0, 0)',
+ },
+ '950': {
+ value: 'rgb(0, 0, 0)',
},
DEFAULT: {
- value: '#fff',
+ value: 'rgb(255, 255, 255)',
},
},
light: {
'100': {
- value: '#000',
+ value: 'rgb(0, 0, 0)',
},
'200': {
- value: '#222222',
+ value: 'rgb(0, 0, 0)',
},
'300': {
- value: '#666666',
+ value: 'rgb(0, 0, 0)',
+ },
+ '400': {
+ value: 'rgb(0, 0, 0)',
+ },
+ '500': {
+ value: 'rgb(0, 0, 0)',
+ },
+ '600': {
+ value: 'rgb(0, 0, 0)',
+ },
+ '700': {
+ value: 'rgb(255, 255, 255)',
+ },
+ '800': {
+ value: 'rgb(255, 255, 255)',
+ },
+ '900': {
+ value: 'rgb(255, 255, 255)',
+ },
+ '950': {
+ value: 'rgb(255, 255, 255)',
},
DEFAULT: {
- value: '#000',
+ value: 'rgb(0, 0, 0)',
},
},
},
- fgP3: {
- dark: {},
- light: {},
+ contrastP3: {
+ dark: {
+ '100': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '200': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '300': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '400': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '500': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '600': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '700': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '800': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '900': {
+ value: 'color(srgb 0 0 0)',
+ },
+ '950': {
+ value: 'color(srgb 0 0 0)',
+ },
+ DEFAULT: {
+ value: 'color(srgb 1 1 1)',
+ },
+ },
+ light: {
+ '100': {
+ value: 'color(srgb 0 0 0)',
+ },
+ '200': {
+ value: 'color(srgb 0 0 0)',
+ },
+ '300': {
+ value: 'color(srgb 0 0 0)',
+ },
+ '400': {
+ value: 'color(srgb 0 0 0)',
+ },
+ '500': {
+ value: 'color(srgb 0 0 0)',
+ },
+ '600': {
+ value: 'color(srgb 0 0 0)',
+ },
+ '700': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '800': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '900': {
+ value: 'color(srgb 1 1 1)',
+ },
+ '950': {
+ value: 'color(srgb 1 1 1)',
+ },
+ DEFAULT: {
+ value: 'color(srgb 0 0 0)',
+ },
+ },
},
gray: {
dark: {
'100': {
- value: 'hsl(0, 0%, 10%)',
+ value: 'rgb(26, 26, 26)',
},
'200': {
- value: 'hsl(0, 0%, 12%)',
+ value: 'rgb(31, 31, 31)',
},
'300': {
- value: 'hsl(0, 0%, 16%)',
+ value: 'rgb(41, 41, 41)',
},
'400': {
- value: 'hsl(0, 0%, 18%)',
+ value: 'rgb(46, 46, 46)',
},
'500': {
- value: 'hsl(0, 0%, 27%)',
+ value: 'rgb(69, 69, 69)',
},
'600': {
- value: 'hsl(0, 0%, 53%)',
+ value: 'rgb(135, 135, 135)',
},
'700': {
- value: 'hsl(0, 0%, 56%)',
+ value: 'rgb(143, 143, 143)',
},
'800': {
- value: 'hsl(0, 0%, 49%)',
+ value: 'rgb(125, 125, 125)',
},
'900': {
- value: 'hsl(0, 0%, 63%)',
+ value: 'rgb(161, 161, 161)',
},
'950': {
- value: 'hsl(0, 0%, 93%)',
+ value: 'rgb(237, 237, 237)',
},
DEFAULT: {
- value: 'hsl(0, 0%, 53%)',
+ value: 'rgb(135, 135, 135)',
},
},
light: {
'100': {
- value: 'hsl(0, 0%, 95%)',
+ value: 'rgb(242, 242, 242)',
},
'200': {
- value: 'hsl(0, 0%, 92%)',
+ value: 'rgb(235, 235, 235)',
},
'300': {
- value: 'hsl(0, 0%, 90%)',
+ value: 'rgb(230, 230, 230)',
},
'400': {
- value: 'hsl(0, 0%, 92%)',
+ value: 'rgb(235, 235, 235)',
},
'500': {
- value: 'hsl(0, 0%, 79%)',
+ value: 'rgb(201, 201, 201)',
},
'600': {
- value: 'hsl(0, 0%, 66%)',
+ value: 'rgb(168, 168, 168)',
},
'700': {
- value: 'hsl(0, 0%, 56%)',
+ value: 'rgb(143, 143, 143)',
},
'800': {
- value: 'hsl(0, 0%, 49%)',
+ value: 'rgb(125, 125, 125)',
},
'900': {
- value: 'hsl(0, 0%, 40%)',
+ value: 'rgb(102, 102, 102)',
},
'950': {
- value: 'hsl(0, 0%, 9%)',
+ value: 'rgb(23, 23, 23)',
},
DEFAULT: {
- value: 'hsl(0, 0%, 66%)',
+ value: 'rgb(168, 168, 168)',
},
},
},
- grayP3: {
- dark: {},
- light: {},
- },
alpha: {
dark: {
'100': {
- value: 'hsla(0, 0%, 100%, .06)',
+ value: 'rgba(255, 255, 255, 0.06)',
},
'200': {
- value: 'hsla(0, 0%, 100%, .09)',
+ value: 'rgba(255, 255, 255, 0.09)',
},
'300': {
- value: 'hsla(0, 0%, 100%, .13)',
+ value: 'rgba(255, 255, 255, 0.13)',
},
'400': {
- value: 'hsla(0, 0%, 100%, .14)',
+ value: 'rgba(255, 255, 255, 0.14)',
},
'500': {
- value: 'hsla(0, 0%, 100%, .24)',
+ value: 'rgba(255, 255, 255, 0.24)',
},
'600': {
- value: 'hsla(0, 0%, 100%, .51)',
+ value: 'rgba(255, 255, 255, 0.51)',
},
'700': {
- value: 'hsla(0, 0%, 100%, .54)',
+ value: 'rgba(255, 255, 255, 0.54)',
},
'800': {
- value: 'hsla(0, 0%, 100%, .47)',
+ value: 'rgba(255, 255, 255, 0.47)',
},
'900': {
- value: 'hsla(0, 0%, 100%, .61)',
+ value: 'rgba(255, 255, 255, 0.61)',
},
'950': {
- value: 'hsla(0, 0%, 100%, .92)',
+ value: 'rgba(255, 255, 255, 0.92)',
},
DEFAULT: {
- value: 'hsla(0, 0%, 100%, .51)',
+ value: 'rgba(255, 255, 255, 0.51)',
},
},
light: {
'100': {
- value: 'rgba(0, 0, 0, .05)',
+ value: 'rgba(0, 0, 0, 0.05)',
},
'200': {
- value: 'rgba(0, 0, 0, .08)',
+ value: 'rgba(0, 0, 0, 0.08)',
},
'300': {
- value: 'rgba(0, 0, 0, .1)',
+ value: 'rgba(0, 0, 0, 0.1)',
},
'400': {
- value: 'rgba(0, 0, 0, .08)',
+ value: 'rgba(0, 0, 0, 0.08)',
},
'500': {
- value: 'rgba(0, 0, 0, .21)',
+ value: 'rgba(0, 0, 0, 0.21)',
},
'600': {
- value: 'rgba(0, 0, 0, .34)',
+ value: 'rgba(0, 0, 0, 0.34)',
},
'700': {
- value: 'rgba(0, 0, 0, .44)',
+ value: 'rgba(0, 0, 0, 0.44)',
},
'800': {
- value: 'rgba(0, 0, 0, .51)',
+ value: 'rgba(0, 0, 0, 0.51)',
},
'900': {
- value: 'rgba(0, 0, 0, .61)',
+ value: 'rgba(0, 0, 0, 0.61)',
},
'950': {
- value: 'rgba(0, 0, 0, .91)',
+ value: 'rgba(0, 0, 0, 0.91)',
},
DEFAULT: {
- value: 'rgba(0, 0, 0, .34)',
+ value: 'rgba(0, 0, 0, 0.34)',
},
},
},
alphaP3: {
- dark: {},
- light: {},
+ dark: {
+ '100': {
+ value: 'hsl(0 0% 100% / 0.06)',
+ },
+ '200': {
+ value: 'hsl(0 0% 100% / 0.09)',
+ },
+ '300': {
+ value: 'hsl(0 0% 100% / 0.13)',
+ },
+ '400': {
+ value: 'hsl(0 0% 100% / 0.14)',
+ },
+ '500': {
+ value: 'hsl(0 0% 100% / 0.24)',
+ },
+ '600': {
+ value: 'hsl(0 0% 100% / 0.51)',
+ },
+ '700': {
+ value: 'hsl(0 0% 100% / 0.54)',
+ },
+ '800': {
+ value: 'hsl(0 0% 100% / 0.47)',
+ },
+ '900': {
+ value: 'hsl(0 0% 100% / 0.61)',
+ },
+ '950': {
+ value: 'hsl(0 0% 100% / 0.92)',
+ },
+ DEFAULT: {
+ value: 'hsl(0 0% 100% / 0.51)',
+ },
+ },
+ light: {
+ '100': {
+ value: 'color(srgb 0 0 0 / 0.05)',
+ },
+ '200': {
+ value: 'color(srgb 0 0 0 / 0.08)',
+ },
+ '300': {
+ value: 'color(srgb 0 0 0 / 0.1)',
+ },
+ '400': {
+ value: 'color(srgb 0 0 0 / 0.08)',
+ },
+ '500': {
+ value: 'color(srgb 0 0 0 / 0.21)',
+ },
+ '600': {
+ value: 'color(srgb 0 0 0 / 0.34)',
+ },
+ '700': {
+ value: 'color(srgb 0 0 0 / 0.44)',
+ },
+ '800': {
+ value: 'color(srgb 0 0 0 / 0.51)',
+ },
+ '900': {
+ value: 'color(srgb 0 0 0 / 0.61)',
+ },
+ '950': {
+ value: 'color(srgb 0 0 0 / 0.91)',
+ },
+ DEFAULT: {
+ value: 'color(srgb 0 0 0 / 0.34)',
+ },
+ },
},
blue: {
dark: {
'100': {
- value: 'hsl(216, 50%, 12%)',
+ value: 'rgb(6, 25, 58)',
},
'200': {
- value: 'hsl(214, 59%, 15%)',
+ value: 'rgb(2, 34, 72)',
},
'300': {
- value: 'hsl(213, 71%, 20%)',
+ value: 'rgb(0, 47, 98)',
},
'400': {
- value: 'hsl(212, 78%, 23%)',
+ value: 'rgb(0, 54, 116)',
},
'500': {
- value: 'hsl(211, 86%, 27%)',
+ value: 'rgb(0, 65, 139)',
},
'600': {
- value: 'hsl(206, 100%, 50%)',
+ value: 'rgb(0, 144, 255)',
},
'700': {
- value: 'hsl(212, 100%, 48%)',
+ value: 'rgb(0, 110, 254)',
},
'800': {
- value: 'hsl(212, 100%, 41%)',
+ value: 'rgb(0, 91, 231)',
},
'900': {
- value: 'hsl(210, 100%, 66%)',
+ value: 'rgb(71, 168, 255)',
},
'950': {
- value: 'hsl(206, 100%, 96%)',
+ value: 'rgb(234, 246, 255)',
},
DEFAULT: {
- value: 'hsl(206, 100%, 50%)',
+ value: 'rgb(0, 144, 255)',
},
},
light: {
'100': {
- value: 'hsl(212, 100%, 97%)',
+ value: 'rgb(240, 247, 255)',
},
'200': {
- value: 'hsl(210, 100%, 96%)',
+ value: 'rgb(233, 244, 255)',
},
'300': {
- value: 'hsl(210, 100%, 94%)',
+ value: 'rgb(223, 239, 255)',
},
'400': {
- value: 'hsl(209, 100%, 90%)',
+ value: 'rgb(202, 231, 255)',
},
'500': {
- value: 'hsl(209, 100%, 80%)',
+ value: 'rgb(148, 204, 255)',
},
'600': {
- value: 'hsl(208, 100%, 66%)',
+ value: 'rgb(72, 174, 255)',
},
'700': {
- value: 'hsl(212, 100%, 48%)',
+ value: 'rgb(0, 107, 255)',
},
'800': {
- value: 'hsl(212, 100%, 41%)',
+ value: 'rgb(0, 89, 236)',
},
'900': {
- value: 'hsl(211, 100%, 42%)',
+ value: 'rgb(0, 95, 242)',
},
'950': {
- value: 'hsl(211, 100%, 15%)',
+ value: 'rgb(0, 35, 89)',
},
DEFAULT: {
- value: 'hsl(208, 100%, 66%)',
+ value: 'rgb(72, 174, 255)',
},
},
},
blueP3: {
dark: {
'100': {
- value: 'oklch(22.17% 0.069 259.89)',
+ value: 'oklch(0.2217 0.069 259.89)',
},
'200': {
- value: 'oklch(25.45% 0.0811 255.8)',
+ value: 'oklch(0.2545 0.0811 255.8)',
},
'300': {
- value: 'oklch(30.86% 0.1022 255.21)',
+ value: 'oklch(0.3086 0.1022 255.21)',
},
'400': {
- value: 'oklch(34.1% 0.121 254.74)',
+ value: 'oklch(0.341 0.121 254.74)',
},
'500': {
- value: 'oklch(38.5% 0.1403 254.4)',
+ value: 'oklch(0.385 0.1403 254.4)',
},
'600': {
- value: 'oklch(64.94% 0.1982 251.8131841760864)',
+ value: 'oklch(0.6494 0.1982 251.8131841760864)',
},
'700': {
- value: 'oklch(57.61% 0.2321 258.23)',
+ value: 'oklch(0.5761 0.2321 258.23)',
},
'800': {
- value: 'oklch(51.51% 0.2307 257.85)',
+ value: 'oklch(0.5151 0.2307 257.85)',
},
'900': {
- value: 'oklch(71.7% 0.1648 250.79360374054167)',
+ value: 'oklch(0.7170000000000001 0.1648 250.79360374054167)',
},
'950': {
- value: 'oklch(96.75% 0.0179 242.4234217368056)',
+ value: 'oklch(0.9675 0.0179 242.4234217368056)',
},
DEFAULT: {
- value: 'oklch(64.94% 0.1982 251.8131841760864)',
+ value: 'oklch(0.6494 0.1982 251.8131841760864)',
},
},
light: {
'100': {
- value: 'oklch(97.32% 0.0141 251.56)',
+ value: 'oklch(0.9732 0.0141 251.56)',
},
'200': {
- value: 'oklch(96.29% 0.0195 250.59)',
+ value: 'oklch(0.9629000000000001 0.0195 250.59)',
},
'300': {
- value: 'oklch(94.58% 0.0293 249.84870859673202)',
+ value: 'oklch(0.9458 0.0293 249.84870859673202)',
},
'400': {
- value: 'oklch(91.58% 0.0473 245.11621922481282)',
+ value: 'oklch(0.9158 0.0473 245.11621922481282)',
},
'500': {
- value: 'oklch(82.75% 0.0979 248.48)',
+ value: 'oklch(0.8275 0.0979 248.48)',
},
'600': {
- value: 'oklch(73.08% 0.1583 248.133320980386)',
+ value: 'oklch(0.7308 0.1583 248.133320980386)',
},
'700': {
- value: 'oklch(57.61% 0.2508 258.23)',
+ value: 'oklch(0.5761 0.2508 258.23)',
},
'800': {
- value: 'oklch(51.51% 0.2399 257.85)',
+ value: 'oklch(0.5151 0.2399 257.85)',
},
'900': {
- value: 'oklch(53.18% 0.2399 256.9900584162342)',
+ value: 'oklch(0.5318 0.2399 256.9900584162342)',
},
'950': {
- value: 'oklch(26.67% 0.1099 254.34)',
+ value: 'oklch(0.2667 0.1099 254.34)',
},
DEFAULT: {
- value: 'oklch(73.08% 0.1583 248.133320980386)',
+ value: 'oklch(0.7308 0.1583 248.133320980386)',
},
},
},
red: {
dark: {
'100': {
- value: 'hsl(357, 37%, 12%)',
+ value: 'rgb(51, 10, 17)',
},
'200': {
- value: 'hsl(357, 46%, 16%)',
+ value: 'rgb(68, 13, 19)',
},
'300': {
- value: 'hsl(356, 54%, 22%)',
+ value: 'rgb(93, 14, 23)',
},
'400': {
- value: 'hsl(357, 55%, 26%)',
+ value: 'rgb(111, 16, 27)',
},
'500': {
- value: 'hsl(357, 60%, 32%)',
+ value: 'rgb(136, 21, 31)',
},
'600': {
- value: 'hsl(358, 75%, 59%)',
+ value: 'rgb(243, 46, 64)',
},
'700': {
- value: 'hsl(358, 75%, 59%)',
+ value: 'rgb(241, 50, 66)',
},
'800': {
- value: 'hsl(358, 69%, 52%)',
+ value: 'rgb(226, 22, 42)',
},
'900': {
- value: 'hsl(358, 100%, 69%)',
+ value: 'rgb(255, 86, 95)',
},
'950': {
- value: 'hsl(353, 90%, 96%)',
+ value: 'rgb(255, 233, 237)',
},
DEFAULT: {
- value: 'hsl(358, 75%, 59%)',
+ value: 'rgb(243, 46, 64)',
},
},
light: {
'100': {
- value: 'hsl(0, 100%, 97%)',
+ value: 'rgb(255, 238, 239)',
},
'200': {
- value: 'hsl(0, 100%, 96%)',
+ value: 'rgb(255, 232, 234)',
},
'300': {
- value: 'hsl(0, 100%, 95%)',
+ value: 'rgb(255, 227, 228)',
},
'400': {
- value: 'hsl(0, 90%, 92%)',
+ value: 'rgb(255, 215, 214)',
},
'500': {
- value: 'hsl(0, 82%, 85%)',
+ value: 'rgb(255, 177, 179)',
},
'600': {
- value: 'hsl(359, 90%, 71%)',
+ value: 'rgb(255, 103, 109)',
},
'700': {
- value: 'hsl(358, 75%, 59%)',
+ value: 'rgb(252, 0, 53)',
},
'800': {
- value: 'hsl(358, 70%, 52%)',
+ value: 'rgb(234, 0, 29)',
},
'900': {
- value: 'hsl(358, 66%, 48%)',
+ value: 'rgb(216, 0, 27)',
},
'950': {
- value: 'hsl(355, 49%, 15%)',
+ value: 'rgb(71, 0, 12)',
},
DEFAULT: {
- value: 'hsl(359, 90%, 71%)',
+ value: 'rgb(255, 103, 109)',
},
},
},
redP3: {
dark: {
'100': {
- value: 'oklch(22.1% 0.0657 15.11)',
+ value: 'oklch(0.221 0.0657 15.11)',
},
'200': {
- value: 'oklch(25.93% 0.0834 19.02)',
+ value: 'oklch(0.2593 0.0834 19.02)',
},
'300': {
- value: 'oklch(31.47% 0.1105 20.96)',
+ value: 'oklch(0.3147 0.1105 20.96)',
},
'400': {
- value: 'oklch(35.27% 0.1273 21.23)',
+ value: 'oklch(0.3527 0.1273 21.23)',
},
'500': {
- value: 'oklch(40.68% 0.1479 23.16)',
+ value: 'oklch(0.4068 0.1479 23.16)',
},
'600': {
- value: 'oklch(62.56% 0.2277 23.03)',
+ value: 'oklch(0.6256 0.2277 23.03)',
},
'700': {
- value: 'oklch(62.56% 0.2234 23.03)',
+ value: 'oklch(0.6256 0.2234 23.03)',
},
'800': {
- value: 'oklch(58.01% 0.227 25.12)',
+ value: 'oklch(0.5801 0.227 25.12)',
},
'900': {
- value: 'oklch(69.96% 0.2136 22.03)',
+ value: 'oklch(0.6995999999999999 0.2136 22.03)',
},
'950': {
- value: 'oklch(95.6% 0.0293 6.61)',
+ value: 'oklch(0.956 0.0293 6.61)',
},
DEFAULT: {
- value: 'oklch(62.56% 0.2277 23.03)',
+ value: 'oklch(0.6256 0.2277 23.03)',
},
},
light: {
'100': {
- value: 'oklch(96.5% 0.0223 13.09)',
+ value: 'oklch(0.965 0.0223 13.09)',
},
'200': {
- value: 'oklch(95.41% 0.0299 14.252646656611997)',
+ value: 'oklch(0.9541 0.0299 14.252646656611997)',
},
'300': {
- value: 'oklch(94.33% 0.0369 15.011509923860523)',
+ value: 'oklch(0.9433 0.0369 15.011509923860523)',
},
'400': {
- value: 'oklch(91.51% 0.0471 19.8)',
+ value: 'oklch(0.9151 0.0471 19.8)',
},
'500': {
- value: 'oklch(84.47% 0.1018 17.71)',
+ value: 'oklch(0.8447 0.1018 17.71)',
},
'600': {
- value: 'oklch(71.12% 0.1881 21.22)',
+ value: 'oklch(0.7112 0.1881 21.22)',
},
'700': {
- value: 'oklch(62.56% 0.2524 23.03)',
+ value: 'oklch(0.6256 0.2524 23.03)',
},
'800': {
- value: 'oklch(58.19% 0.2482 25.15)',
+ value: 'oklch(0.5819 0.2482 25.15)',
},
'900': {
- value: 'oklch(54.99% 0.232 25.29)',
+ value: 'oklch(0.5499 0.232 25.29)',
},
'950': {
- value: 'oklch(24.8% 0.1041 18.86)',
+ value: 'oklch(0.248 0.1041 18.86)',
},
DEFAULT: {
- value: 'oklch(71.12% 0.1881 21.22)',
+ value: 'oklch(0.7112 0.1881 21.22)',
},
},
},
yellow: {
dark: {
'100': {
- value: 'hsl(35, 100%, 8%)',
+ value: 'rgb(43, 22, 0)',
},
'200': {
- value: 'hsl(32, 100%, 10%)',
+ value: 'rgb(53, 26, 0)',
},
'300': {
- value: 'hsl(33, 100%, 15%)',
+ value: 'rgb(78, 42, 0)',
},
'400': {
- value: 'hsl(35, 100%, 17%)',
+ value: 'rgb(89, 49, 0)',
},
'500': {
- value: 'hsl(35, 91%, 22%)',
+ value: 'rgb(111, 63, 0)',
},
'600': {
- value: 'hsl(39, 85%, 49%)',
+ value: 'rgb(243, 150, 0)',
},
'700': {
- value: 'hsl(39, 100%, 57%)',
+ value: 'rgb(255, 167, 0)',
},
'800': {
- value: 'hsl(35, 100%, 52%)',
+ value: 'rgb(255, 151, 0)',
},
'900': {
- value: 'hsl(35, 100%, 52%)',
+ value: 'rgb(255, 151, 0)',
},
'950': {
- value: 'hsl(40, 94%, 93%)',
+ value: 'rgb(255, 240, 215)',
},
DEFAULT: {
- value: 'hsl(39, 85%, 49%)',
+ value: 'rgb(243, 150, 0)',
},
},
light: {
'100': {
- value: 'hsl(39, 100%, 95%)',
+ value: 'rgb(255, 243, 223)',
},
'200': {
- value: 'hsl(44, 100%, 92%)',
+ value: 'rgb(255, 239, 209)',
},
'300': {
- value: 'hsl(43, 96%, 90%)',
+ value: 'rgb(255, 235, 196)',
},
'400': {
- value: 'hsl(42, 100%, 78%)',
+ value: 'rgb(255, 209, 123)',
},
'500': {
- value: 'hsl(38, 100%, 71%)',
+ value: 'rgb(255, 190, 79)',
},
'600': {
- value: 'hsl(36, 90%, 62%)',
+ value: 'rgb(255, 162, 0)',
},
'700': {
- value: 'hsl(39, 100%, 57%)',
+ value: 'rgb(255, 167, 0)',
},
'800': {
- value: 'hsl(35, 100%, 52%)',
+ value: 'rgb(255, 151, 0)',
},
'900': {
- value: 'hsl(30, 100%, 32%)',
+ value: 'rgb(161, 86, 0)',
},
'950': {
- value: 'hsl(20, 79%, 17%)',
+ value: 'rgb(78, 35, 0)',
},
DEFAULT: {
- value: 'hsl(36, 90%, 62%)',
+ value: 'rgb(255, 162, 0)',
},
},
},
yellowP3: {
dark: {
'100': {
- value: 'oklch(22.46% 0.0538 76.04)',
+ value: 'oklch(0.22460000000000002 0.0538 69)',
},
'200': {
- value: 'oklch(24.95% 0.0642 64.78)',
+ value: 'oklch(0.2495 0.0642 69)',
},
'300': {
- value: 'oklch(32.34% 0.0837 63.83)',
+ value: 'oklch(0.3234 0.0837 69)',
},
'400': {
- value: 'oklch(35.53% 0.0903 66.29707162673735)',
+ value: 'oklch(0.3553 0.0903 69)',
},
'500': {
- value: 'oklch(41.55% 0.1044 67.98)',
+ value: 'oklch(0.4155 0.1044 69)',
},
'600': {
- value: 'oklch(75.04% 0.1737 74.49)',
+ value: 'oklch(0.7504000000000001 0.1737 69)',
},
'700': {
- value: 'oklch(81.87% 0.1969 76.46)',
+ value: 'oklch(0.8187000000000001 0.1969 69)',
},
'800': {
- value: 'oklch(77.21% 0.1991 64.28)',
+ value: 'oklch(0.7720999999999999 0.1991 69)',
},
'900': {
- value: 'oklch(77.21% 0.1991 64.28)',
+ value: 'oklch(0.7720999999999999 0.1991 69)',
},
'950': {
- value: 'oklch(96.7% 0.0418 84.59)',
+ value: 'oklch(0.9670000000000001 0.0418 69)',
},
DEFAULT: {
- value: 'oklch(75.04% 0.1737 74.49)',
+ value: 'oklch(0.7504000000000001 0.1737 69)',
},
},
light: {
'100': {
- value: 'oklch(97.48% 0.0331 85.79)',
+ value: 'oklch(0.9748 0.0331 69)',
},
'200': {
- value: 'oklch(96.81% 0.0495 90.24227879900472)',
+ value: 'oklch(0.9681000000000001 0.0495 69)',
},
'300': {
- value: 'oklch(95.93% 0.0636 90.52)',
+ value: 'oklch(0.9593 0.0636 69)',
},
'400': {
- value: 'oklch(91.02% 0.1322 88.25)',
+ value: 'oklch(0.9102 0.1322 69)',
},
'500': {
- value: 'oklch(86.55% 0.1583 79.63)',
+ value: 'oklch(0.8654999999999999 0.1583 69)',
},
'600': {
- value: 'oklch(80.25% 0.1953 73.59)',
+ value: 'oklch(0.8025 0.1953 69)',
},
'700': {
- value: 'oklch(81.87% 0.1969 76.46)',
+ value: 'oklch(0.8187000000000001 0.1969 69)',
},
'800': {
- value: 'oklch(77.21% 0.1991 64.28)',
+ value: 'oklch(0.7720999999999999 0.1991 69)',
},
'900': {
- value: 'oklch(52.79% 0.1496 54.65)',
+ value: 'oklch(0.5279 0.1496 69)',
},
'950': {
- value: 'oklch(30.83% 0.099 45.48)',
+ value: 'oklch(0.30829999999999996 0.099 69)',
},
DEFAULT: {
- value: 'oklch(80.25% 0.1953 73.59)',
+ value: 'oklch(0.8025 0.1953 69)',
},
},
},
green: {
dark: {
'100': {
- value: 'hsl(136, 50%, 9%)',
+ value: 'rgb(0, 38, 8)',
},
'200': {
- value: 'hsl(137, 50%, 12%)',
+ value: 'rgb(0, 50, 11)',
},
'300': {
- value: 'hsl(136, 50%, 14%)',
+ value: 'rgb(0, 58, 14)',
},
'400': {
- value: 'hsl(135, 70%, 16%)',
+ value: 'rgb(0, 70, 21)',
},
'500': {
- value: 'hsl(135, 70%, 23%)',
+ value: 'rgb(0, 103, 23)',
},
'600': {
- value: 'hsl(135, 70%, 34%)',
+ value: 'rgb(0, 149, 45)',
},
'700': {
- value: 'hsl(131, 41%, 46%)',
+ value: 'rgb(0, 172, 58)',
},
'800': {
- value: 'hsl(132, 43%, 39%)',
+ value: 'rgb(0, 148, 50)',
},
'900': {
- value: 'hsl(131, 43%, 57%)',
+ value: 'rgb(0, 202, 80)',
},
'950': {
- value: 'hsl(136, 73%, 94%)',
+ value: 'rgb(216, 255, 228)',
},
DEFAULT: {
- value: 'hsl(135, 70%, 34%)',
+ value: 'rgb(0, 149, 45)',
},
},
light: {
'100': {
- value: 'hsl(120, 60%, 96%)',
+ value: 'rgb(236, 253, 236)',
},
'200': {
- value: 'hsl(120, 60%, 95%)',
+ value: 'rgb(229, 252, 231)',
},
'300': {
- value: 'hsl(120, 60%, 91%)',
+ value: 'rgb(211, 250, 209)',
},
'400': {
- value: 'hsl(122, 60%, 86%)',
+ value: 'rgb(185, 245, 188)',
},
'500': {
- value: 'hsl(124, 60%, 75%)',
+ value: 'rgb(130, 235, 141)',
},
'600': {
- value: 'hsl(125, 60%, 64%)',
+ value: 'rgb(76, 225, 94)',
},
'700': {
- value: 'hsl(131, 41%, 46%)',
+ value: 'rgb(40, 169, 72)',
},
'800': {
- value: 'hsl(132, 43%, 39%)',
+ value: 'rgb(39, 145, 65)',
},
'900': {
- value: 'hsl(133, 50%, 32%)',
+ value: 'rgb(16, 125, 50)',
},
'950': {
- value: 'hsl(128, 29%, 15%)',
+ value: 'rgb(0, 58, 0)',
},
DEFAULT: {
- value: 'hsl(125, 60%, 64%)',
+ value: 'rgb(76, 225, 94)',
},
},
},
greenP3: {
dark: {
'100': {
- value: 'oklch(23.09% 0.0716 149.68)',
+ value: 'oklch(0.2309 0.0716 149.68)',
},
'200': {
- value: 'oklch(27.12% 0.0895 150.09)',
+ value: 'oklch(0.2712 0.0895 150.09)',
},
'300': {
- value: 'oklch(29.84% 0.096 149.25)',
+ value: 'oklch(0.2984 0.096 149.25)',
},
'400': {
- value: 'oklch(34.39% 0.1039 147.78)',
+ value: 'oklch(0.3439 0.1039 147.78)',
},
'500': {
- value: 'oklch(44.19% 0.1484 147.2)',
+ value: 'oklch(0.44189999999999996 0.1484 147.2)',
},
'600': {
- value: 'oklch(58.11% 0.1815 146.55)',
+ value: 'oklch(0.5811 0.1815 146.55)',
},
'700': {
- value: 'oklch(64.58% 0.199 147.27)',
+ value: 'oklch(0.6457999999999999 0.199 147.27)',
},
'800': {
- value: 'oklch(57.81% 0.1776 147.5)',
+ value: 'oklch(0.5781000000000001 0.1776 147.5)',
},
'900': {
- value: 'oklch(73.1% 0.2158 148.29)',
+ value: 'oklch(0.731 0.2158 148.29)',
},
'950': {
- value: 'oklch(96.76% 0.056 154.18)',
+ value: 'oklch(0.9676 0.056 154.18)',
},
DEFAULT: {
- value: 'oklch(58.11% 0.1815 146.55)',
+ value: 'oklch(0.5811 0.1815 146.55)',
},
},
light: {
'100': {
- value: 'oklch(97.59% 0.0289 145.42)',
+ value: 'oklch(0.9759 0.0289 145.42)',
},
'200': {
- value: 'oklch(96.92% 0.037 147.15)',
+ value: 'oklch(0.9692000000000001 0.037 147.15)',
},
'300': {
- value: 'oklch(94.6% 0.0674 144.23)',
+ value: 'oklch(0.946 0.0674 144.23)',
},
'400': {
- value: 'oklch(91.49% 0.0976 146.24)',
+ value: 'oklch(0.9148999999999999 0.0976 146.24)',
},
'500': {
- value: 'oklch(85.45% 0.1627 146.3)',
+ value: 'oklch(0.8545 0.1627 146.3)',
},
'600': {
- value: 'oklch(80.25% 0.214 145.18)',
+ value: 'oklch(0.8025 0.214 145.18)',
},
'700': {
- value: 'oklch(64.58% 0.1746 147.27)',
+ value: 'oklch(0.6457999999999999 0.1746 147.27)',
},
'800': {
- value: 'oklch(57.81% 0.1507 147.5)',
+ value: 'oklch(0.5781000000000001 0.1507 147.5)',
},
'900': {
- value: 'oklch(51.75% 0.1453 147.65)',
+ value: 'oklch(0.5175 0.1453 147.65)',
},
'950': {
- value: 'oklch(29.15% 0.1197 147.38)',
+ value: 'oklch(0.2915 0.1197 147.38)',
},
DEFAULT: {
- value: 'oklch(80.25% 0.214 145.18)',
+ value: 'oklch(0.8025 0.214 145.18)',
},
},
},
teal: {
dark: {
'100': {
- value: 'hsl(169, 78%, 7%)',
+ value: 'rgb(0, 35, 27)',
},
'200': {
- value: 'hsl(170, 74%, 9%)',
+ value: 'rgb(0, 43, 34)',
},
'300': {
- value: 'hsl(171, 75%, 13%)',
+ value: 'rgb(0, 61, 52)',
},
'400': {
- value: 'hsl(171, 85%, 13%)',
+ value: 'rgb(0, 64, 53)',
},
'500': {
- value: 'hsl(172, 85%, 20%)',
+ value: 'rgb(0, 99, 84)',
},
'600': {
- value: 'hsl(172, 85%, 32%)',
+ value: 'rgb(0, 158, 134)',
},
'700': {
- value: 'hsl(173, 80%, 36%)',
+ value: 'rgb(0, 170, 149)',
},
'800': {
- value: 'hsl(173, 83%, 30%)',
+ value: 'rgb(0, 146, 127)',
},
'900': {
- value: 'hsl(174, 90%, 41%)',
+ value: 'rgb(0, 207, 183)',
},
'950': {
- value: 'hsl(166, 71%, 93%)',
+ value: 'rgb(203, 255, 245)',
},
DEFAULT: {
- value: 'hsl(172, 85%, 32%)',
+ value: 'rgb(0, 158, 134)',
},
},
light: {
'100': {
- value: 'hsl(169, 70%, 96%)',
+ value: 'rgb(222, 255, 251)',
},
'200': {
- value: 'hsl(167, 70%, 94%)',
+ value: 'rgb(221, 254, 246)',
},
'300': {
- value: 'hsl(168, 70%, 90%)',
+ value: 'rgb(204, 249, 241)',
},
'400': {
- value: 'hsl(170, 70%, 85%)',
+ value: 'rgb(177, 247, 236)',
},
'500': {
- value: 'hsl(170, 70%, 72%)',
+ value: 'rgb(82, 240, 219)',
},
'600': {
- value: 'hsl(170, 70%, 57%)',
+ value: 'rgb(0, 227, 196)',
},
'700': {
- value: 'hsl(173, 80%, 36%)',
+ value: 'rgb(0, 172, 150)',
},
'800': {
- value: 'hsl(173, 83%, 30%)',
+ value: 'rgb(0, 146, 127)',
},
'900': {
- value: 'hsl(174, 91%, 25%)',
+ value: 'rgb(0, 127, 112)',
},
'950': {
- value: 'hsl(171, 80%, 13%)',
+ value: 'rgb(0, 63, 52)',
},
DEFAULT: {
- value: 'hsl(170, 70%, 57%)',
+ value: 'rgb(0, 227, 196)',
},
},
},
tealP3: {
dark: {
'100': {
- value: 'oklch(22.1% 0.0544 178.74)',
+ value: 'oklch(0.221 0.0544 178.74)',
},
'200': {
- value: 'oklch(25.06% 0.062 178.76)',
+ value: 'oklch(0.2506 0.062 178.76)',
},
'300': {
- value: 'oklch(31.5% 0.0767 180.99)',
+ value: 'oklch(0.315 0.0767 180.99)',
},
'400': {
- value: 'oklch(32.43% 0.0763 180.13)',
+ value: 'oklch(0.3243 0.0763 180.13)',
},
'500': {
- value: 'oklch(43.35% 0.1055 180.97)',
+ value: 'oklch(0.4335 0.1055 180.97)',
},
'600': {
- value: 'oklch(60.71% 0.1485 180.24)',
+ value: 'oklch(0.6071 0.1485 180.24)',
},
'700': {
- value: 'oklch(64.92% 0.1403 181.95)',
+ value: 'oklch(0.6492 0.1403 181.95)',
},
'800': {
- value: 'oklch(57.53% 0.1392 181.66)',
+ value: 'oklch(0.5753 0.1392 181.66)',
},
'900': {
- value: 'oklch(74.56% 0.1765 182.8)',
+ value: 'oklch(0.7456 0.1765 182.8)',
},
'950': {
- value: 'oklch(96.46% 0.056 180.29)',
+ value: 'oklch(0.9645999999999999 0.056 180.29)',
},
DEFAULT: {
- value: 'oklch(60.71% 0.1485 180.24)',
+ value: 'oklch(0.6071 0.1485 180.24)',
},
},
light: {
'100': {
- value: 'oklch(97.72% 0.0359 186.7)',
+ value: 'oklch(0.9772 0.0359 186.7)',
},
'200': {
- value: 'oklch(97.06% 0.0347 180.66)',
+ value: 'oklch(0.9706 0.0347 180.66)',
},
'300': {
- value: 'oklch(94.92% 0.0478 182.07)',
+ value: 'oklch(0.9492 0.0478 182.07)',
},
'400': {
- value: 'oklch(92.76% 0.0718 183.78)',
+ value: 'oklch(0.9276000000000001 0.0718 183.78)',
},
'500': {
- value: 'oklch(86.88% 0.1344 182.42)',
+ value: 'oklch(0.8687999999999999 0.1344 182.42)',
},
'600': {
- value: 'oklch(81.5% 0.161 178.96)',
+ value: 'oklch(0.815 0.161 178.96)',
},
'700': {
- value: 'oklch(64.92% 0.1572 181.95)',
+ value: 'oklch(0.6492 0.1572 181.95)',
},
'800': {
- value: 'oklch(57.53% 0.1392 181.66)',
+ value: 'oklch(0.5753 0.1392 181.66)',
},
'900': {
- value: 'oklch(52.08% 0.1251 182.93)',
+ value: 'oklch(0.5207999999999999 0.1251 182.93)',
},
'950': {
- value: 'oklch(32.11% 0.0788 179.82)',
+ value: 'oklch(0.3211 0.0788 179.82)',
},
DEFAULT: {
- value: 'oklch(81.5% 0.161 178.96)',
+ value: 'oklch(0.815 0.161 178.96)',
},
},
},
purple: {
dark: {
'100': {
- value: 'hsl(283, 30%, 12%)',
+ value: 'rgb(41, 12, 51)',
},
'200': {
- value: 'hsl(281, 38%, 16%)',
+ value: 'rgb(52, 17, 66)',
},
'300': {
- value: 'hsl(279, 44%, 23%)',
+ value: 'rgb(71, 24, 94)',
},
'400': {
- value: 'hsl(277, 46%, 28%)',
+ value: 'rgb(84, 26, 118)',
},
'500': {
- value: 'hsl(274, 49%, 35%)',
+ value: 'rgb(100, 34, 144)',
},
'600': {
- value: 'hsl(272, 51%, 54%)',
+ value: 'rgb(148, 64, 213)',
},
'700': {
- value: 'hsl(272, 51%, 54%)',
+ value: 'rgb(148, 64, 213)',
},
'800': {
- value: 'hsl(272, 47%, 45%)',
+ value: 'rgb(125, 43, 186)',
},
'900': {
- value: 'hsl(275, 80%, 71%)',
+ value: 'rgb(196, 114, 251)',
},
'950': {
- value: 'hsl(281, 73%, 96%)',
+ value: 'rgb(251, 236, 255)',
},
DEFAULT: {
- value: 'hsl(272, 51%, 54%)',
+ value: 'rgb(148, 64, 213)',
},
},
light: {
'100': {
- value: 'hsl(276, 100%, 97%)',
+ value: 'rgb(250, 240, 255)',
},
'200': {
- value: 'hsl(277, 87%, 97%)',
+ value: 'rgb(249, 240, 255)',
},
'300': {
- value: 'hsl(274, 78%, 95%)',
+ value: 'rgb(246, 232, 255)',
},
'400': {
- value: 'hsl(276, 71%, 92%)',
+ value: 'rgb(242, 217, 255)',
},
'500': {
- value: 'hsl(274, 70%, 82%)',
+ value: 'rgb(223, 167, 255)',
},
'600': {
- value: 'hsl(273, 72%, 73%)',
+ value: 'rgb(201, 121, 255)',
},
'700': {
- value: 'hsl(272, 51%, 54%)',
+ value: 'rgb(160, 0, 248)',
},
'800': {
- value: 'hsl(272, 47%, 45%)',
+ value: 'rgb(133, 0, 209)',
},
'900': {
- value: 'hsl(274, 71%, 43%)',
+ value: 'rgb(125, 0, 204)',
},
'950': {
- value: 'hsl(276, 100%, 15%)',
+ value: 'rgb(47, 0, 78)',
},
DEFAULT: {
- value: 'hsl(273, 72%, 73%)',
+ value: 'rgb(201, 121, 255)',
},
},
},
purpleP3: {
dark: {
'100': {
- value: 'oklch(22.34% 0.0779 316.87)',
+ value: 'oklch(0.2234 0.0779 316.87)',
},
'200': {
- value: 'oklch(25.91% 0.0921 314.41)',
+ value: 'oklch(0.2591 0.0921 314.41)',
},
'300': {
- value: 'oklch(31.98% 0.1219 312.41)',
+ value: 'oklch(0.31980000000000003 0.1219 312.41)',
},
'400': {
- value: 'oklch(35.93% 0.1504 309.78)',
+ value: 'oklch(0.3593 0.1504 309.78)',
},
'500': {
- value: 'oklch(40.99% 0.1721 307.92)',
+ value: 'oklch(0.40990000000000004 0.1721 307.92)',
},
'600': {
- value: 'oklch(55.5% 0.2191 306.12)',
+ value: 'oklch(0.555 0.2191 306.12)',
},
'700': {
- value: 'oklch(55.5% 0.2186 306.12)',
+ value: 'oklch(0.555 0.2186 306.12)',
},
'800': {
- value: 'oklch(48.58% 0.2102 305.73)',
+ value: 'oklch(0.4858 0.2102 305.73)',
},
'900': {
- value: 'oklch(69.87% 0.2037 309.51)',
+ value: 'oklch(0.6987000000000001 0.2037 309.51)',
},
'950': {
- value: 'oklch(96.1% 0.0304 316.46)',
+ value: 'oklch(0.961 0.0304 316.46)',
},
DEFAULT: {
- value: 'oklch(55.5% 0.2191 306.12)',
+ value: 'oklch(0.555 0.2191 306.12)',
},
},
light: {
'100': {
- value: 'oklch(96.65% 0.0244 312.1890119359961)',
+ value: 'oklch(0.9665 0.0244 312.1890119359961)',
},
'200': {
- value: 'oklch(96.73% 0.0228 309.8)',
+ value: 'oklch(0.9673 0.0228 309.8)',
},
'300': {
- value: 'oklch(94.85% 0.0364 310.15)',
+ value: 'oklch(0.9484999999999999 0.0364 310.15)',
},
'400': {
- value: 'oklch(91.77% 0.0614 312.82)',
+ value: 'oklch(0.9177 0.0614 312.82)',
},
'500': {
- value: 'oklch(81.26% 0.1409 310.8)',
+ value: 'oklch(0.8126000000000001 0.1409 310.8)',
},
'600': {
- value: 'oklch(72.07% 0.2083 308.19)',
+ value: 'oklch(0.7206999999999999 0.2083 308.19)',
},
'700': {
- value: 'oklch(55.5% 0.3008 306.12)',
+ value: 'oklch(0.555 0.3008 306.12)',
},
'800': {
- value: 'oklch(48.58% 0.2638 305.73)',
+ value: 'oklch(0.4858 0.2638 305.73)',
},
'900': {
- value: 'oklch(47.18% 0.2579 304.0)',
+ value: 'oklch(0.4718 0.2579 304)',
},
'950': {
- value: 'oklch(23.96% 0.13 305.66)',
+ value: 'oklch(0.2396 0.13 305.66)',
},
DEFAULT: {
- value: 'oklch(72.07% 0.2083 308.19)',
+ value: 'oklch(0.7206999999999999 0.2083 308.19)',
},
},
},
pink: {
dark: {
'100': {
- value: 'hsl(335, 32%, 12%)',
+ value: 'rgb(49, 13, 30)',
},
'200': {
- value: 'hsl(335, 43%, 16%)',
+ value: 'rgb(66, 12, 37)',
},
'300': {
- value: 'hsl(335, 47%, 21%)',
+ value: 'rgb(87, 16, 50)',
},
'400': {
- value: 'hsl(335, 51%, 22%)',
+ value: 'rgb(93, 12, 52)',
},
'500': {
- value: 'hsl(335, 57%, 27%)',
+ value: 'rgb(118, 6, 63)',
},
'600': {
- value: 'hsl(336, 75%, 40%)',
+ value: 'rgb(186, 0, 86)',
},
'700': {
- value: 'hsl(336, 80%, 58%)',
+ value: 'rgb(241, 43, 130)',
},
'800': {
- value: 'hsl(336, 74%, 51%)',
+ value: 'rgb(231, 0, 109)',
},
'900': {
- value: 'hsl(341, 90%, 67%)',
+ value: 'rgb(255, 77, 141)',
},
'950': {
- value: 'hsl(333, 90%, 96%)',
+ value: 'rgb(255, 233, 244)',
},
DEFAULT: {
- value: 'hsl(336, 75%, 40%)',
+ value: 'rgb(186, 0, 86)',
},
},
light: {
'100': {
- value: 'hsl(330, 100%, 96%)',
+ value: 'rgb(255, 232, 246)',
},
'200': {
- value: 'hsl(340, 90%, 96%)',
+ value: 'rgb(255, 232, 243)',
},
'300': {
- value: 'hsl(340, 82%, 94%)',
+ value: 'rgb(255, 223, 235)',
},
'400': {
- value: 'hsl(341, 76%, 91%)',
+ value: 'rgb(255, 211, 225)',
},
'500': {
- value: 'hsl(340, 75%, 84%)',
+ value: 'rgb(253, 179, 204)',
},
'600': {
- value: 'hsl(341, 75%, 73%)',
+ value: 'rgb(249, 126, 167)',
},
'700': {
- value: 'hsl(336, 80%, 58%)',
+ value: 'rgb(242, 39, 130)',
},
'800': {
- value: 'hsl(336, 74%, 51%)',
+ value: 'rgb(228, 16, 110)',
},
'900': {
- value: 'hsl(336, 65%, 45%)',
+ value: 'rgb(196, 21, 98)',
},
'950': {
- value: 'hsl(333, 74%, 15%)',
+ value: 'rgb(70, 5, 35)',
},
DEFAULT: {
- value: 'hsl(341, 75%, 73%)',
+ value: 'rgb(249, 126, 167)',
},
},
},
pinkP3: {
dark: {
'100': {
- value: 'oklch(22.67% 0.0628 354.73)',
+ value: 'oklch(0.2267 0.0628 354.73)',
},
'200': {
- value: 'oklch(26.2% 0.0859 356.68)',
+ value: 'oklch(0.262 0.0859 356.68)',
},
'300': {
- value: 'oklch(31.15% 0.1067 355.93)',
+ value: 'oklch(0.3115 0.1067 355.93)',
},
'400': {
- value: 'oklch(32.13% 0.1174 356.71)',
+ value: 'oklch(0.32130000000000003 0.1174 356.71)',
},
'500': {
- value: 'oklch(37.01% 0.1453 358.39)',
+ value: 'oklch(0.3701 0.1453 358.39)',
},
'600': {
- value: 'oklch(50.33% 0.2089 4.33)',
+ value: 'oklch(0.5033 0.2089 4.33)',
},
'700': {
- value: 'oklch(63.52% 0.2346 1.01)',
+ value: 'oklch(0.6352 0.2346 1.01)',
},
'800': {
- value: 'oklch(59.51% 0.2429 4.21)',
+ value: 'oklch(0.5951 0.2429 4.21)',
},
'900': {
- value: 'oklch(69.36% 0.2223 3.91)',
+ value: 'oklch(0.6936 0.2223 3.91)',
},
'950': {
- value: 'oklch(95.74% 0.0326 350.08)',
+ value: 'oklch(0.9573999999999999 0.0326 350.08)',
},
DEFAULT: {
- value: 'oklch(50.33% 0.2089 4.33)',
+ value: 'oklch(0.5033 0.2089 4.33)',
},
},
light: {
'100': {
- value: 'oklch(95.69% 0.0359 344.6218910697224)',
+ value: 'oklch(0.9569 0.0359 344.6218910697224)',
},
'200': {
- value: 'oklch(95.71% 0.0321 353.14)',
+ value: 'oklch(0.9571 0.0321 353.14)',
},
'300': {
- value: 'oklch(93.83% 0.0451 356.29)',
+ value: 'oklch(0.9383 0.0451 356.29)',
},
'400': {
- value: 'oklch(91.12% 0.0573 358.82)',
+ value: 'oklch(0.9112 0.0573 358.82)',
},
'500': {
- value: 'oklch(84.28% 0.0915 356.99)',
+ value: 'oklch(0.8428 0.0915 356.99)',
},
'600': {
- value: 'oklch(74.33% 0.1547 0.24)',
+ value: 'oklch(0.7433 0.1547 0.24)',
},
'700': {
- value: 'oklch(63.52% 0.238 1.01)',
+ value: 'oklch(0.6352 0.238 1.01)',
},
'800': {
- value: 'oklch(59.51% 0.2339 4.21)',
+ value: 'oklch(0.5951 0.2339 4.21)',
},
'900': {
- value: 'oklch(53.5% 0.2058 2.84)',
+ value: 'oklch(0.535 0.2058 2.84)',
},
'950': {
- value: 'oklch(26% 0.0977 359.0)',
+ value: 'oklch(0.26 0.0977 359)',
},
DEFAULT: {
- value: 'oklch(74.33% 0.1547 0.24)',
+ value: 'oklch(0.7433 0.1547 0.24)',
},
},
},
@@ -1243,68 +1527,254 @@ export const colorSystemPandaPreset = definePreset({
},
semanticTokens: {
colors: {
- bg: {
+ background: {
'100': {
value: {
- base: '{colors.bg.light.100}',
- _dark: '{colors.bg.dark.100}',
+ base: '{colors.background.light.100}',
+ _dark: '{colors.background.dark.100}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.backgroundP3.light.100}',
+ _dark: '{colors.backgroundP3.dark.100}',
+ },
+ },
},
},
'200': {
value: {
- base: '{colors.bg.light.200}',
- _dark: '{colors.bg.dark.200}',
+ base: '{colors.background.light.200}',
+ _dark: '{colors.background.dark.200}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.backgroundP3.light.200}',
+ _dark: '{colors.backgroundP3.dark.200}',
+ },
+ },
},
},
'300': {
value: {
- base: '{colors.bg.light.300}',
- _dark: '{colors.bg.dark.300}',
+ base: '{colors.background.light.300}',
+ _dark: '{colors.background.dark.300}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.backgroundP3.light.300}',
+ _dark: '{colors.backgroundP3.dark.300}',
+ },
+ },
},
},
- base: {
- value: '{colors.bg.100}',
+ '400': {
+ value: {
+ base: '{colors.background.light.400}',
+ _dark: '{colors.background.dark.400}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.backgroundP3.light.400}',
+ _dark: '{colors.backgroundP3.dark.400}',
+ },
+ },
+ },
},
- subtle: {
- value: '{colors.bg.200}',
+ '500': {
+ value: {
+ base: '{colors.background.light.500}',
+ _dark: '{colors.background.dark.500}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.backgroundP3.light.500}',
+ _dark: '{colors.backgroundP3.dark.500}',
+ },
+ },
+ },
},
- muted: {
- value: '{colors.bg.300}',
+ '600': {
+ value: {
+ base: '{colors.background.light.600}',
+ _dark: '{colors.background.dark.600}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.backgroundP3.light.600}',
+ _dark: '{colors.backgroundP3.dark.600}',
+ },
+ },
+ },
+ },
+ '700': {
+ value: {
+ base: '{colors.background.light.700}',
+ _dark: '{colors.background.dark.700}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.backgroundP3.light.700}',
+ _dark: '{colors.backgroundP3.dark.700}',
+ },
+ },
+ },
+ },
+ '800': {
+ value: {
+ base: '{colors.background.light.800}',
+ _dark: '{colors.background.dark.800}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.backgroundP3.light.800}',
+ _dark: '{colors.backgroundP3.dark.800}',
+ },
+ },
+ },
+ },
+ '900': {
+ value: {
+ base: '{colors.background.light.900}',
+ _dark: '{colors.background.dark.900}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.backgroundP3.light.900}',
+ _dark: '{colors.backgroundP3.dark.900}',
+ },
+ },
+ },
+ },
+ '950': {
+ value: {
+ base: '{colors.background.light.950}',
+ _dark: '{colors.background.dark.950}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.backgroundP3.light.950}',
+ _dark: '{colors.backgroundP3.dark.950}',
+ },
+ },
+ },
},
DEFAULT: {
- value: '{colors.bg}',
+ value: '{colors.background}',
},
},
- fg: {
+ contrast: {
'100': {
value: {
- base: '{colors.fg.light.100}',
- _dark: '{colors.fg.dark.100}',
+ base: '{colors.contrast.light.100}',
+ _dark: '{colors.contrast.dark.100}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.contrastP3.light.100}',
+ _dark: '{colors.contrastP3.dark.100}',
+ },
+ },
},
},
'200': {
value: {
- base: '{colors.fg.light.200}',
- _dark: '{colors.fg.dark.200}',
+ base: '{colors.contrast.light.200}',
+ _dark: '{colors.contrast.dark.200}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.contrastP3.light.200}',
+ _dark: '{colors.contrastP3.dark.200}',
+ },
+ },
},
},
'300': {
value: {
- base: '{colors.fg.light.300}',
- _dark: '{colors.fg.dark.300}',
+ base: '{colors.contrast.light.300}',
+ _dark: '{colors.contrast.dark.300}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.contrastP3.light.300}',
+ _dark: '{colors.contrastP3.dark.300}',
+ },
+ },
},
},
- base: {
- value: '{colors.fg.100}',
+ '400': {
+ value: {
+ base: '{colors.contrast.light.400}',
+ _dark: '{colors.contrast.dark.400}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.contrastP3.light.400}',
+ _dark: '{colors.contrastP3.dark.400}',
+ },
+ },
+ },
+ },
+ '500': {
+ value: {
+ base: '{colors.contrast.light.500}',
+ _dark: '{colors.contrast.dark.500}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.contrastP3.light.500}',
+ _dark: '{colors.contrastP3.dark.500}',
+ },
+ },
+ },
+ },
+ '600': {
+ value: {
+ base: '{colors.contrast.light.600}',
+ _dark: '{colors.contrast.dark.600}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.contrastP3.light.600}',
+ _dark: '{colors.contrastP3.dark.600}',
+ },
+ },
+ },
+ },
+ '700': {
+ value: {
+ base: '{colors.contrast.light.700}',
+ _dark: '{colors.contrast.dark.700}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.contrastP3.light.700}',
+ _dark: '{colors.contrastP3.dark.700}',
+ },
+ },
+ },
},
- subtle: {
- value: '{colors.fg.200}',
+ '800': {
+ value: {
+ base: '{colors.contrast.light.800}',
+ _dark: '{colors.contrast.dark.800}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.contrastP3.light.800}',
+ _dark: '{colors.contrastP3.dark.800}',
+ },
+ },
+ },
},
- muted: {
- value: '{colors.fg.300}',
+ '900': {
+ value: {
+ base: '{colors.contrast.light.900}',
+ _dark: '{colors.contrast.dark.900}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.contrastP3.light.900}',
+ _dark: '{colors.contrastP3.dark.900}',
+ },
+ },
+ },
+ },
+ '950': {
+ value: {
+ base: '{colors.contrast.light.950}',
+ _dark: '{colors.contrast.dark.950}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.contrastP3.light.950}',
+ _dark: '{colors.contrastP3.dark.950}',
+ },
+ },
+ },
},
DEFAULT: {
- value: '{colors.fg}',
+ value: '{colors.contrast}',
},
},
gray: {
@@ -1407,60 +1877,120 @@ export const colorSystemPandaPreset = definePreset({
value: {
base: '{colors.alpha.light.100}',
_dark: '{colors.alpha.dark.100}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.alphaP3.light.100}',
+ _dark: '{colors.alphaP3.dark.100}',
+ },
+ },
},
},
'200': {
value: {
base: '{colors.alpha.light.200}',
_dark: '{colors.alpha.dark.200}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.alphaP3.light.200}',
+ _dark: '{colors.alphaP3.dark.200}',
+ },
+ },
},
},
'300': {
value: {
base: '{colors.alpha.light.300}',
_dark: '{colors.alpha.dark.300}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.alphaP3.light.300}',
+ _dark: '{colors.alphaP3.dark.300}',
+ },
+ },
},
},
'400': {
value: {
base: '{colors.alpha.light.400}',
_dark: '{colors.alpha.dark.400}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.alphaP3.light.400}',
+ _dark: '{colors.alphaP3.dark.400}',
+ },
+ },
},
},
'500': {
value: {
base: '{colors.alpha.light.500}',
_dark: '{colors.alpha.dark.500}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.alphaP3.light.500}',
+ _dark: '{colors.alphaP3.dark.500}',
+ },
+ },
},
},
'600': {
value: {
base: '{colors.alpha.light.600}',
_dark: '{colors.alpha.dark.600}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.alphaP3.light.600}',
+ _dark: '{colors.alphaP3.dark.600}',
+ },
+ },
},
},
'700': {
value: {
base: '{colors.alpha.light.700}',
_dark: '{colors.alpha.dark.700}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.alphaP3.light.700}',
+ _dark: '{colors.alphaP3.dark.700}',
+ },
+ },
},
},
'800': {
value: {
base: '{colors.alpha.light.800}',
_dark: '{colors.alpha.dark.800}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.alphaP3.light.800}',
+ _dark: '{colors.alphaP3.dark.800}',
+ },
+ },
},
},
'900': {
value: {
base: '{colors.alpha.light.900}',
_dark: '{colors.alpha.dark.900}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.alphaP3.light.900}',
+ _dark: '{colors.alphaP3.dark.900}',
+ },
+ },
},
},
'950': {
value: {
base: '{colors.alpha.light.950}',
_dark: '{colors.alpha.dark.950}',
+ _mediaP3: {
+ _supportsOklch: {
+ base: '{colors.alphaP3.light.950}',
+ _dark: '{colors.alphaP3.dark.950}',
+ },
+ },
},
},
bg1: {
diff --git a/panda.config.ts b/panda.config.ts
index 629f5a4..fa833aa 100644
--- a/panda.config.ts
+++ b/panda.config.ts
@@ -1,5 +1,6 @@
import { defineConfig } from '@pandacss/dev'
-import { colorSystemPandaPreset } from './modules/design-system/lib/preset-colors'
+import { colorAliasesPreset } from './modules/design-system/lib/preset-color-aliases'
+import { colorSystemPreset } from './modules/design-system/lib/preset-colors'
import { appCorePandaPreset } from './modules/design-system/lib/preset-core'
export default defineConfig({
@@ -15,7 +16,7 @@ export default defineConfig({
'./lib/**/*.{js,jsx,ts,tsx}',
'./modules/**/*.{js,jsx,ts,tsx}',
],
- presets: ['@pandacss/preset-base', colorSystemPandaPreset, appCorePandaPreset],
+ presets: ['@pandacss/preset-base', colorSystemPreset, colorAliasesPreset, appCorePandaPreset],
hash: {
className: true,
cssVar: false,