diff --git a/bun.lockb b/bun.lockb index d46596e4..a2371336 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/panda/CHANGELOG.md b/packages/panda/CHANGELOG.md index 8c04ce59..b47dd5e4 100644 --- a/packages/panda/CHANGELOG.md +++ b/packages/panda/CHANGELOG.md @@ -6,6 +6,21 @@ description: All notable changes will be documented in this file. ## [Unreleased] +### Added + +- Added support for forcing all components to render in either dark or light mode. + +```jsx +export const App = () => { + return ( + <Box className="dark"> + {/* Renders a Popover component always in dark mode */} + <Popover /> + </Box> + ) +} +``` + ## [0.38.1] - 2024-06-25 ### Fixed diff --git a/packages/panda/src/conditions.ts b/packages/panda/src/conditions.ts index 0bbbc8af..7bf9820f 100644 --- a/packages/panda/src/conditions.ts +++ b/packages/panda/src/conditions.ts @@ -10,5 +10,7 @@ export const conditions = { on: '&:is([data-state="on"])', today: '&:is([data-today])', underValue: '&:is([data-state="under-value"])', + dark: '.dark &', + light: ':root &, .light &', }, } diff --git a/packages/panda/src/theme/recipes/badge.ts b/packages/panda/src/theme/recipes/badge.ts index 32c03cce..3eaf7ea1 100644 --- a/packages/panda/src/theme/recipes/badge.ts +++ b/packages/panda/src/theme/recipes/badge.ts @@ -31,6 +31,7 @@ export const badge = defineRecipe({ }, }, outline: { + color: 'fg.default', borderWidth: '2px', borderColor: 'border.default', }, diff --git a/packages/panda/src/theme/recipes/carousel.ts b/packages/panda/src/theme/recipes/carousel.ts index ca5e29ae..2c38995c 100644 --- a/packages/panda/src/theme/recipes/carousel.ts +++ b/packages/panda/src/theme/recipes/carousel.ts @@ -15,7 +15,7 @@ export const carousel = defineSlotRecipe({ }, control: { alignItems: 'center', - background: { base: 'gray.dark.a12', _dark: 'gray.light.a12' }, + background: { _light: 'gray.dark.a12', _dark: 'gray.light.a12' }, borderRadius: 'l2', bottom: '4', display: 'flex', diff --git a/packages/panda/src/theme/recipes/dialog.ts b/packages/panda/src/theme/recipes/dialog.ts index 83acd5d0..60a3f83c 100644 --- a/packages/panda/src/theme/recipes/dialog.ts +++ b/packages/panda/src/theme/recipes/dialog.ts @@ -8,7 +8,7 @@ export const dialog = defineSlotRecipe({ backdrop: { backdropFilter: 'blur(4px)', background: { - base: 'white.a10', + _light: 'white.a10', _dark: 'black.a10', }, height: '100vh', diff --git a/packages/panda/src/theme/recipes/drawer.ts b/packages/panda/src/theme/recipes/drawer.ts index 6405973f..dc165dd5 100644 --- a/packages/panda/src/theme/recipes/drawer.ts +++ b/packages/panda/src/theme/recipes/drawer.ts @@ -10,7 +10,7 @@ export const drawer = defineSlotRecipe({ backdrop: { backdropFilter: 'blur(4px)', background: { - base: 'white.a10', + _light: 'white.a10', _dark: 'black.a10', }, height: '100vh', diff --git a/packages/panda/src/theme/recipes/slider.ts b/packages/panda/src/theme/recipes/slider.ts index c0720e3a..bf5fcdcb 100644 --- a/packages/panda/src/theme/recipes/slider.ts +++ b/packages/panda/src/theme/recipes/slider.ts @@ -44,7 +44,7 @@ export const slider = defineSlotRecipe({ }, marker: { '--before-background': { - base: 'white', + _light: 'white', _dark: 'colors.colorPalette.fg', }, color: 'fg.muted', diff --git a/packages/panda/src/theme/recipes/switch.ts b/packages/panda/src/theme/recipes/switch.ts index 8ac3b580..9fab6b1d 100644 --- a/packages/panda/src/theme/recipes/switch.ts +++ b/packages/panda/src/theme/recipes/switch.ts @@ -39,7 +39,7 @@ export const switchRecipe = defineSlotRecipe({ transitionTimingFunction: 'default', _checked: { transform: 'translateX(100%)', - background: { base: 'bg.default', _dark: 'colorPalette.fg' }, + background: { _light: 'bg.default', _dark: 'colorPalette.fg' }, }, }, }, diff --git a/packages/panda/src/theme/recipes/tabs.ts b/packages/panda/src/theme/recipes/tabs.ts index 8073f79e..2ab62bcb 100644 --- a/packages/panda/src/theme/recipes/tabs.ts +++ b/packages/panda/src/theme/recipes/tabs.ts @@ -79,7 +79,7 @@ export const tabs = defineSlotRecipe({ borderWidth: '1px', px: '1', backgroundColor: { - base: 'gray.a2', + _light: 'gray.a2', _dark: 'bg.canvas', }, _horizontal: { @@ -92,7 +92,7 @@ export const tabs = defineSlotRecipe({ }, indicator: { backgroundColor: { - base: 'bg.default', + _light: 'bg.default', _dark: 'bg.subtle', }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/amber.ts b/packages/panda/src/theme/semantic-tokens/colors/amber.ts index b1554613..33ff6458 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/amber.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/amber.ts @@ -1,28 +1,28 @@ export const amber = { - 1: { value: { base: '{colors.amber.light.1}', _dark: '{colors.amber.dark.1}' } }, - 2: { value: { base: '{colors.amber.light.2}', _dark: '{colors.amber.dark.2}' } }, - 3: { value: { base: '{colors.amber.light.3}', _dark: '{colors.amber.dark.3}' } }, - 4: { value: { base: '{colors.amber.light.4}', _dark: '{colors.amber.dark.4}' } }, - 5: { value: { base: '{colors.amber.light.5}', _dark: '{colors.amber.dark.5}' } }, - 6: { value: { base: '{colors.amber.light.6}', _dark: '{colors.amber.dark.6}' } }, - 7: { value: { base: '{colors.amber.light.7}', _dark: '{colors.amber.dark.7}' } }, - 8: { value: { base: '{colors.amber.light.8}', _dark: '{colors.amber.dark.8}' } }, - 9: { value: { base: '{colors.amber.light.9}', _dark: '{colors.amber.dark.9}' } }, - 10: { value: { base: '{colors.amber.light.10}', _dark: '{colors.amber.dark.10}' } }, - 11: { value: { base: '{colors.amber.light.11}', _dark: '{colors.amber.dark.11}' } }, - 12: { value: { base: '{colors.amber.light.12}', _dark: '{colors.amber.dark.12}' } }, - a1: { value: { base: '{colors.amber.light.a1}', _dark: '{colors.amber.dark.a1}' } }, - a2: { value: { base: '{colors.amber.light.a2}', _dark: '{colors.amber.dark.a2}' } }, - a3: { value: { base: '{colors.amber.light.a3}', _dark: '{colors.amber.dark.a3}' } }, - a4: { value: { base: '{colors.amber.light.a4}', _dark: '{colors.amber.dark.a4}' } }, - a5: { value: { base: '{colors.amber.light.a5}', _dark: '{colors.amber.dark.a5}' } }, - a6: { value: { base: '{colors.amber.light.a6}', _dark: '{colors.amber.dark.a6}' } }, - a7: { value: { base: '{colors.amber.light.a7}', _dark: '{colors.amber.dark.a7}' } }, - a8: { value: { base: '{colors.amber.light.a8}', _dark: '{colors.amber.dark.a8}' } }, - a9: { value: { base: '{colors.amber.light.a9}', _dark: '{colors.amber.dark.a9}' } }, - a10: { value: { base: '{colors.amber.light.a10}', _dark: '{colors.amber.dark.a10}' } }, - a11: { value: { base: '{colors.amber.light.a11}', _dark: '{colors.amber.dark.a11}' } }, - a12: { value: { base: '{colors.amber.light.a12}', _dark: '{colors.amber.dark.a12}' } }, + 1: { value: { _light: '{colors.amber.light.1}', _dark: '{colors.amber.dark.1}' } }, + 2: { value: { _light: '{colors.amber.light.2}', _dark: '{colors.amber.dark.2}' } }, + 3: { value: { _light: '{colors.amber.light.3}', _dark: '{colors.amber.dark.3}' } }, + 4: { value: { _light: '{colors.amber.light.4}', _dark: '{colors.amber.dark.4}' } }, + 5: { value: { _light: '{colors.amber.light.5}', _dark: '{colors.amber.dark.5}' } }, + 6: { value: { _light: '{colors.amber.light.6}', _dark: '{colors.amber.dark.6}' } }, + 7: { value: { _light: '{colors.amber.light.7}', _dark: '{colors.amber.dark.7}' } }, + 8: { value: { _light: '{colors.amber.light.8}', _dark: '{colors.amber.dark.8}' } }, + 9: { value: { _light: '{colors.amber.light.9}', _dark: '{colors.amber.dark.9}' } }, + 10: { value: { _light: '{colors.amber.light.10}', _dark: '{colors.amber.dark.10}' } }, + 11: { value: { _light: '{colors.amber.light.11}', _dark: '{colors.amber.dark.11}' } }, + 12: { value: { _light: '{colors.amber.light.12}', _dark: '{colors.amber.dark.12}' } }, + a1: { value: { _light: '{colors.amber.light.a1}', _dark: '{colors.amber.dark.a1}' } }, + a2: { value: { _light: '{colors.amber.light.a2}', _dark: '{colors.amber.dark.a2}' } }, + a3: { value: { _light: '{colors.amber.light.a3}', _dark: '{colors.amber.dark.a3}' } }, + a4: { value: { _light: '{colors.amber.light.a4}', _dark: '{colors.amber.dark.a4}' } }, + a5: { value: { _light: '{colors.amber.light.a5}', _dark: '{colors.amber.dark.a5}' } }, + a6: { value: { _light: '{colors.amber.light.a6}', _dark: '{colors.amber.dark.a6}' } }, + a7: { value: { _light: '{colors.amber.light.a7}', _dark: '{colors.amber.dark.a7}' } }, + a8: { value: { _light: '{colors.amber.light.a8}', _dark: '{colors.amber.dark.a8}' } }, + a9: { value: { _light: '{colors.amber.light.a9}', _dark: '{colors.amber.dark.a9}' } }, + a10: { value: { _light: '{colors.amber.light.a10}', _dark: '{colors.amber.dark.a10}' } }, + a11: { value: { _light: '{colors.amber.light.a11}', _dark: '{colors.amber.dark.a11}' } }, + a12: { value: { _light: '{colors.amber.light.a12}', _dark: '{colors.amber.dark.a12}' } }, default: { value: '{colors.amber.9}' }, emphasized: { value: '{colors.amber.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/blue.ts b/packages/panda/src/theme/semantic-tokens/colors/blue.ts index d59995a5..e86a3dad 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/blue.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/blue.ts @@ -1,28 +1,28 @@ export const blue = { - 1: { value: { base: '{colors.blue.light.1}', _dark: '{colors.blue.dark.1}' } }, - 2: { value: { base: '{colors.blue.light.2}', _dark: '{colors.blue.dark.2}' } }, - 3: { value: { base: '{colors.blue.light.3}', _dark: '{colors.blue.dark.3}' } }, - 4: { value: { base: '{colors.blue.light.4}', _dark: '{colors.blue.dark.4}' } }, - 5: { value: { base: '{colors.blue.light.5}', _dark: '{colors.blue.dark.5}' } }, - 6: { value: { base: '{colors.blue.light.6}', _dark: '{colors.blue.dark.6}' } }, - 7: { value: { base: '{colors.blue.light.7}', _dark: '{colors.blue.dark.7}' } }, - 8: { value: { base: '{colors.blue.light.8}', _dark: '{colors.blue.dark.8}' } }, - 9: { value: { base: '{colors.blue.light.9}', _dark: '{colors.blue.dark.9}' } }, - 10: { value: { base: '{colors.blue.light.10}', _dark: '{colors.blue.dark.10}' } }, - 11: { value: { base: '{colors.blue.light.11}', _dark: '{colors.blue.dark.11}' } }, - 12: { value: { base: '{colors.blue.light.12}', _dark: '{colors.blue.dark.12}' } }, - a1: { value: { base: '{colors.blue.light.a1}', _dark: '{colors.blue.dark.a1}' } }, - a2: { value: { base: '{colors.blue.light.a2}', _dark: '{colors.blue.dark.a2}' } }, - a3: { value: { base: '{colors.blue.light.a3}', _dark: '{colors.blue.dark.a3}' } }, - a4: { value: { base: '{colors.blue.light.a4}', _dark: '{colors.blue.dark.a4}' } }, - a5: { value: { base: '{colors.blue.light.a5}', _dark: '{colors.blue.dark.a5}' } }, - a6: { value: { base: '{colors.blue.light.a6}', _dark: '{colors.blue.dark.a6}' } }, - a7: { value: { base: '{colors.blue.light.a7}', _dark: '{colors.blue.dark.a7}' } }, - a8: { value: { base: '{colors.blue.light.a8}', _dark: '{colors.blue.dark.a8}' } }, - a9: { value: { base: '{colors.blue.light.a9}', _dark: '{colors.blue.dark.a9}' } }, - a10: { value: { base: '{colors.blue.light.a10}', _dark: '{colors.blue.dark.a10}' } }, - a11: { value: { base: '{colors.blue.light.a11}', _dark: '{colors.blue.dark.a11}' } }, - a12: { value: { base: '{colors.blue.light.a12}', _dark: '{colors.blue.dark.a12}' } }, + 1: { value: { _light: '{colors.blue.light.1}', _dark: '{colors.blue.dark.1}' } }, + 2: { value: { _light: '{colors.blue.light.2}', _dark: '{colors.blue.dark.2}' } }, + 3: { value: { _light: '{colors.blue.light.3}', _dark: '{colors.blue.dark.3}' } }, + 4: { value: { _light: '{colors.blue.light.4}', _dark: '{colors.blue.dark.4}' } }, + 5: { value: { _light: '{colors.blue.light.5}', _dark: '{colors.blue.dark.5}' } }, + 6: { value: { _light: '{colors.blue.light.6}', _dark: '{colors.blue.dark.6}' } }, + 7: { value: { _light: '{colors.blue.light.7}', _dark: '{colors.blue.dark.7}' } }, + 8: { value: { _light: '{colors.blue.light.8}', _dark: '{colors.blue.dark.8}' } }, + 9: { value: { _light: '{colors.blue.light.9}', _dark: '{colors.blue.dark.9}' } }, + 10: { value: { _light: '{colors.blue.light.10}', _dark: '{colors.blue.dark.10}' } }, + 11: { value: { _light: '{colors.blue.light.11}', _dark: '{colors.blue.dark.11}' } }, + 12: { value: { _light: '{colors.blue.light.12}', _dark: '{colors.blue.dark.12}' } }, + a1: { value: { _light: '{colors.blue.light.a1}', _dark: '{colors.blue.dark.a1}' } }, + a2: { value: { _light: '{colors.blue.light.a2}', _dark: '{colors.blue.dark.a2}' } }, + a3: { value: { _light: '{colors.blue.light.a3}', _dark: '{colors.blue.dark.a3}' } }, + a4: { value: { _light: '{colors.blue.light.a4}', _dark: '{colors.blue.dark.a4}' } }, + a5: { value: { _light: '{colors.blue.light.a5}', _dark: '{colors.blue.dark.a5}' } }, + a6: { value: { _light: '{colors.blue.light.a6}', _dark: '{colors.blue.dark.a6}' } }, + a7: { value: { _light: '{colors.blue.light.a7}', _dark: '{colors.blue.dark.a7}' } }, + a8: { value: { _light: '{colors.blue.light.a8}', _dark: '{colors.blue.dark.a8}' } }, + a9: { value: { _light: '{colors.blue.light.a9}', _dark: '{colors.blue.dark.a9}' } }, + a10: { value: { _light: '{colors.blue.light.a10}', _dark: '{colors.blue.dark.a10}' } }, + a11: { value: { _light: '{colors.blue.light.a11}', _dark: '{colors.blue.dark.a11}' } }, + a12: { value: { _light: '{colors.blue.light.a12}', _dark: '{colors.blue.dark.a12}' } }, default: { value: '{colors.blue.9}' }, emphasized: { value: '{colors.blue.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/bronze.ts b/packages/panda/src/theme/semantic-tokens/colors/bronze.ts index db87bb7f..5aba9427 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/bronze.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/bronze.ts @@ -1,28 +1,28 @@ export const bronze = { - 1: { value: { base: '{colors.bronze.light.1}', _dark: '{colors.bronze.dark.1}' } }, - 2: { value: { base: '{colors.bronze.light.2}', _dark: '{colors.bronze.dark.2}' } }, - 3: { value: { base: '{colors.bronze.light.3}', _dark: '{colors.bronze.dark.3}' } }, - 4: { value: { base: '{colors.bronze.light.4}', _dark: '{colors.bronze.dark.4}' } }, - 5: { value: { base: '{colors.bronze.light.5}', _dark: '{colors.bronze.dark.5}' } }, - 6: { value: { base: '{colors.bronze.light.6}', _dark: '{colors.bronze.dark.6}' } }, - 7: { value: { base: '{colors.bronze.light.7}', _dark: '{colors.bronze.dark.7}' } }, - 8: { value: { base: '{colors.bronze.light.8}', _dark: '{colors.bronze.dark.8}' } }, - 9: { value: { base: '{colors.bronze.light.9}', _dark: '{colors.bronze.dark.9}' } }, - 10: { value: { base: '{colors.bronze.light.10}', _dark: '{colors.bronze.dark.10}' } }, - 11: { value: { base: '{colors.bronze.light.11}', _dark: '{colors.bronze.dark.11}' } }, - 12: { value: { base: '{colors.bronze.light.12}', _dark: '{colors.bronze.dark.12}' } }, - a1: { value: { base: '{colors.bronze.light.a1}', _dark: '{colors.bronze.dark.a1}' } }, - a2: { value: { base: '{colors.bronze.light.a2}', _dark: '{colors.bronze.dark.a2}' } }, - a3: { value: { base: '{colors.bronze.light.a3}', _dark: '{colors.bronze.dark.a3}' } }, - a4: { value: { base: '{colors.bronze.light.a4}', _dark: '{colors.bronze.dark.a4}' } }, - a5: { value: { base: '{colors.bronze.light.a5}', _dark: '{colors.bronze.dark.a5}' } }, - a6: { value: { base: '{colors.bronze.light.a6}', _dark: '{colors.bronze.dark.a6}' } }, - a7: { value: { base: '{colors.bronze.light.a7}', _dark: '{colors.bronze.dark.a7}' } }, - a8: { value: { base: '{colors.bronze.light.a8}', _dark: '{colors.bronze.dark.a8}' } }, - a9: { value: { base: '{colors.bronze.light.a9}', _dark: '{colors.bronze.dark.a9}' } }, - a10: { value: { base: '{colors.bronze.light.a10}', _dark: '{colors.bronze.dark.a10}' } }, - a11: { value: { base: '{colors.bronze.light.a11}', _dark: '{colors.bronze.dark.a11}' } }, - a12: { value: { base: '{colors.bronze.light.a12}', _dark: '{colors.bronze.dark.a12}' } }, + 1: { value: { _light: '{colors.bronze.light.1}', _dark: '{colors.bronze.dark.1}' } }, + 2: { value: { _light: '{colors.bronze.light.2}', _dark: '{colors.bronze.dark.2}' } }, + 3: { value: { _light: '{colors.bronze.light.3}', _dark: '{colors.bronze.dark.3}' } }, + 4: { value: { _light: '{colors.bronze.light.4}', _dark: '{colors.bronze.dark.4}' } }, + 5: { value: { _light: '{colors.bronze.light.5}', _dark: '{colors.bronze.dark.5}' } }, + 6: { value: { _light: '{colors.bronze.light.6}', _dark: '{colors.bronze.dark.6}' } }, + 7: { value: { _light: '{colors.bronze.light.7}', _dark: '{colors.bronze.dark.7}' } }, + 8: { value: { _light: '{colors.bronze.light.8}', _dark: '{colors.bronze.dark.8}' } }, + 9: { value: { _light: '{colors.bronze.light.9}', _dark: '{colors.bronze.dark.9}' } }, + 10: { value: { _light: '{colors.bronze.light.10}', _dark: '{colors.bronze.dark.10}' } }, + 11: { value: { _light: '{colors.bronze.light.11}', _dark: '{colors.bronze.dark.11}' } }, + 12: { value: { _light: '{colors.bronze.light.12}', _dark: '{colors.bronze.dark.12}' } }, + a1: { value: { _light: '{colors.bronze.light.a1}', _dark: '{colors.bronze.dark.a1}' } }, + a2: { value: { _light: '{colors.bronze.light.a2}', _dark: '{colors.bronze.dark.a2}' } }, + a3: { value: { _light: '{colors.bronze.light.a3}', _dark: '{colors.bronze.dark.a3}' } }, + a4: { value: { _light: '{colors.bronze.light.a4}', _dark: '{colors.bronze.dark.a4}' } }, + a5: { value: { _light: '{colors.bronze.light.a5}', _dark: '{colors.bronze.dark.a5}' } }, + a6: { value: { _light: '{colors.bronze.light.a6}', _dark: '{colors.bronze.dark.a6}' } }, + a7: { value: { _light: '{colors.bronze.light.a7}', _dark: '{colors.bronze.dark.a7}' } }, + a8: { value: { _light: '{colors.bronze.light.a8}', _dark: '{colors.bronze.dark.a8}' } }, + a9: { value: { _light: '{colors.bronze.light.a9}', _dark: '{colors.bronze.dark.a9}' } }, + a10: { value: { _light: '{colors.bronze.light.a10}', _dark: '{colors.bronze.dark.a10}' } }, + a11: { value: { _light: '{colors.bronze.light.a11}', _dark: '{colors.bronze.dark.a11}' } }, + a12: { value: { _light: '{colors.bronze.light.a12}', _dark: '{colors.bronze.dark.a12}' } }, default: { value: '{colors.bronze.9}' }, emphasized: { value: '{colors.bronze.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/brown.ts b/packages/panda/src/theme/semantic-tokens/colors/brown.ts index 74581404..68966817 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/brown.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/brown.ts @@ -1,28 +1,28 @@ export const brown = { - 1: { value: { base: '{colors.brown.light.1}', _dark: '{colors.brown.dark.1}' } }, - 2: { value: { base: '{colors.brown.light.2}', _dark: '{colors.brown.dark.2}' } }, - 3: { value: { base: '{colors.brown.light.3}', _dark: '{colors.brown.dark.3}' } }, - 4: { value: { base: '{colors.brown.light.4}', _dark: '{colors.brown.dark.4}' } }, - 5: { value: { base: '{colors.brown.light.5}', _dark: '{colors.brown.dark.5}' } }, - 6: { value: { base: '{colors.brown.light.6}', _dark: '{colors.brown.dark.6}' } }, - 7: { value: { base: '{colors.brown.light.7}', _dark: '{colors.brown.dark.7}' } }, - 8: { value: { base: '{colors.brown.light.8}', _dark: '{colors.brown.dark.8}' } }, - 9: { value: { base: '{colors.brown.light.9}', _dark: '{colors.brown.dark.9}' } }, - 10: { value: { base: '{colors.brown.light.10}', _dark: '{colors.brown.dark.10}' } }, - 11: { value: { base: '{colors.brown.light.11}', _dark: '{colors.brown.dark.11}' } }, - 12: { value: { base: '{colors.brown.light.12}', _dark: '{colors.brown.dark.12}' } }, - a1: { value: { base: '{colors.brown.light.a1}', _dark: '{colors.brown.dark.a1}' } }, - a2: { value: { base: '{colors.brown.light.a2}', _dark: '{colors.brown.dark.a2}' } }, - a3: { value: { base: '{colors.brown.light.a3}', _dark: '{colors.brown.dark.a3}' } }, - a4: { value: { base: '{colors.brown.light.a4}', _dark: '{colors.brown.dark.a4}' } }, - a5: { value: { base: '{colors.brown.light.a5}', _dark: '{colors.brown.dark.a5}' } }, - a6: { value: { base: '{colors.brown.light.a6}', _dark: '{colors.brown.dark.a6}' } }, - a7: { value: { base: '{colors.brown.light.a7}', _dark: '{colors.brown.dark.a7}' } }, - a8: { value: { base: '{colors.brown.light.a8}', _dark: '{colors.brown.dark.a8}' } }, - a9: { value: { base: '{colors.brown.light.a9}', _dark: '{colors.brown.dark.a9}' } }, - a10: { value: { base: '{colors.brown.light.a10}', _dark: '{colors.brown.dark.a10}' } }, - a11: { value: { base: '{colors.brown.light.a11}', _dark: '{colors.brown.dark.a11}' } }, - a12: { value: { base: '{colors.brown.light.a12}', _dark: '{colors.brown.dark.a12}' } }, + 1: { value: { _light: '{colors.brown.light.1}', _dark: '{colors.brown.dark.1}' } }, + 2: { value: { _light: '{colors.brown.light.2}', _dark: '{colors.brown.dark.2}' } }, + 3: { value: { _light: '{colors.brown.light.3}', _dark: '{colors.brown.dark.3}' } }, + 4: { value: { _light: '{colors.brown.light.4}', _dark: '{colors.brown.dark.4}' } }, + 5: { value: { _light: '{colors.brown.light.5}', _dark: '{colors.brown.dark.5}' } }, + 6: { value: { _light: '{colors.brown.light.6}', _dark: '{colors.brown.dark.6}' } }, + 7: { value: { _light: '{colors.brown.light.7}', _dark: '{colors.brown.dark.7}' } }, + 8: { value: { _light: '{colors.brown.light.8}', _dark: '{colors.brown.dark.8}' } }, + 9: { value: { _light: '{colors.brown.light.9}', _dark: '{colors.brown.dark.9}' } }, + 10: { value: { _light: '{colors.brown.light.10}', _dark: '{colors.brown.dark.10}' } }, + 11: { value: { _light: '{colors.brown.light.11}', _dark: '{colors.brown.dark.11}' } }, + 12: { value: { _light: '{colors.brown.light.12}', _dark: '{colors.brown.dark.12}' } }, + a1: { value: { _light: '{colors.brown.light.a1}', _dark: '{colors.brown.dark.a1}' } }, + a2: { value: { _light: '{colors.brown.light.a2}', _dark: '{colors.brown.dark.a2}' } }, + a3: { value: { _light: '{colors.brown.light.a3}', _dark: '{colors.brown.dark.a3}' } }, + a4: { value: { _light: '{colors.brown.light.a4}', _dark: '{colors.brown.dark.a4}' } }, + a5: { value: { _light: '{colors.brown.light.a5}', _dark: '{colors.brown.dark.a5}' } }, + a6: { value: { _light: '{colors.brown.light.a6}', _dark: '{colors.brown.dark.a6}' } }, + a7: { value: { _light: '{colors.brown.light.a7}', _dark: '{colors.brown.dark.a7}' } }, + a8: { value: { _light: '{colors.brown.light.a8}', _dark: '{colors.brown.dark.a8}' } }, + a9: { value: { _light: '{colors.brown.light.a9}', _dark: '{colors.brown.dark.a9}' } }, + a10: { value: { _light: '{colors.brown.light.a10}', _dark: '{colors.brown.dark.a10}' } }, + a11: { value: { _light: '{colors.brown.light.a11}', _dark: '{colors.brown.dark.a11}' } }, + a12: { value: { _light: '{colors.brown.light.a12}', _dark: '{colors.brown.dark.a12}' } }, default: { value: '{colors.brown.9}' }, emphasized: { value: '{colors.brown.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/crimson.ts b/packages/panda/src/theme/semantic-tokens/colors/crimson.ts index 18f45014..f209943e 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/crimson.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/crimson.ts @@ -1,28 +1,28 @@ export const crimson = { - 1: { value: { base: '{colors.crimson.light.1}', _dark: '{colors.crimson.dark.1}' } }, - 2: { value: { base: '{colors.crimson.light.2}', _dark: '{colors.crimson.dark.2}' } }, - 3: { value: { base: '{colors.crimson.light.3}', _dark: '{colors.crimson.dark.3}' } }, - 4: { value: { base: '{colors.crimson.light.4}', _dark: '{colors.crimson.dark.4}' } }, - 5: { value: { base: '{colors.crimson.light.5}', _dark: '{colors.crimson.dark.5}' } }, - 6: { value: { base: '{colors.crimson.light.6}', _dark: '{colors.crimson.dark.6}' } }, - 7: { value: { base: '{colors.crimson.light.7}', _dark: '{colors.crimson.dark.7}' } }, - 8: { value: { base: '{colors.crimson.light.8}', _dark: '{colors.crimson.dark.8}' } }, - 9: { value: { base: '{colors.crimson.light.9}', _dark: '{colors.crimson.dark.9}' } }, - 10: { value: { base: '{colors.crimson.light.10}', _dark: '{colors.crimson.dark.10}' } }, - 11: { value: { base: '{colors.crimson.light.11}', _dark: '{colors.crimson.dark.11}' } }, - 12: { value: { base: '{colors.crimson.light.12}', _dark: '{colors.crimson.dark.12}' } }, - a1: { value: { base: '{colors.crimson.light.a1}', _dark: '{colors.crimson.dark.a1}' } }, - a2: { value: { base: '{colors.crimson.light.a2}', _dark: '{colors.crimson.dark.a2}' } }, - a3: { value: { base: '{colors.crimson.light.a3}', _dark: '{colors.crimson.dark.a3}' } }, - a4: { value: { base: '{colors.crimson.light.a4}', _dark: '{colors.crimson.dark.a4}' } }, - a5: { value: { base: '{colors.crimson.light.a5}', _dark: '{colors.crimson.dark.a5}' } }, - a6: { value: { base: '{colors.crimson.light.a6}', _dark: '{colors.crimson.dark.a6}' } }, - a7: { value: { base: '{colors.crimson.light.a7}', _dark: '{colors.crimson.dark.a7}' } }, - a8: { value: { base: '{colors.crimson.light.a8}', _dark: '{colors.crimson.dark.a8}' } }, - a9: { value: { base: '{colors.crimson.light.a9}', _dark: '{colors.crimson.dark.a9}' } }, - a10: { value: { base: '{colors.crimson.light.a10}', _dark: '{colors.crimson.dark.a10}' } }, - a11: { value: { base: '{colors.crimson.light.a11}', _dark: '{colors.crimson.dark.a11}' } }, - a12: { value: { base: '{colors.crimson.light.a12}', _dark: '{colors.crimson.dark.a12}' } }, + 1: { value: { _light: '{colors.crimson.light.1}', _dark: '{colors.crimson.dark.1}' } }, + 2: { value: { _light: '{colors.crimson.light.2}', _dark: '{colors.crimson.dark.2}' } }, + 3: { value: { _light: '{colors.crimson.light.3}', _dark: '{colors.crimson.dark.3}' } }, + 4: { value: { _light: '{colors.crimson.light.4}', _dark: '{colors.crimson.dark.4}' } }, + 5: { value: { _light: '{colors.crimson.light.5}', _dark: '{colors.crimson.dark.5}' } }, + 6: { value: { _light: '{colors.crimson.light.6}', _dark: '{colors.crimson.dark.6}' } }, + 7: { value: { _light: '{colors.crimson.light.7}', _dark: '{colors.crimson.dark.7}' } }, + 8: { value: { _light: '{colors.crimson.light.8}', _dark: '{colors.crimson.dark.8}' } }, + 9: { value: { _light: '{colors.crimson.light.9}', _dark: '{colors.crimson.dark.9}' } }, + 10: { value: { _light: '{colors.crimson.light.10}', _dark: '{colors.crimson.dark.10}' } }, + 11: { value: { _light: '{colors.crimson.light.11}', _dark: '{colors.crimson.dark.11}' } }, + 12: { value: { _light: '{colors.crimson.light.12}', _dark: '{colors.crimson.dark.12}' } }, + a1: { value: { _light: '{colors.crimson.light.a1}', _dark: '{colors.crimson.dark.a1}' } }, + a2: { value: { _light: '{colors.crimson.light.a2}', _dark: '{colors.crimson.dark.a2}' } }, + a3: { value: { _light: '{colors.crimson.light.a3}', _dark: '{colors.crimson.dark.a3}' } }, + a4: { value: { _light: '{colors.crimson.light.a4}', _dark: '{colors.crimson.dark.a4}' } }, + a5: { value: { _light: '{colors.crimson.light.a5}', _dark: '{colors.crimson.dark.a5}' } }, + a6: { value: { _light: '{colors.crimson.light.a6}', _dark: '{colors.crimson.dark.a6}' } }, + a7: { value: { _light: '{colors.crimson.light.a7}', _dark: '{colors.crimson.dark.a7}' } }, + a8: { value: { _light: '{colors.crimson.light.a8}', _dark: '{colors.crimson.dark.a8}' } }, + a9: { value: { _light: '{colors.crimson.light.a9}', _dark: '{colors.crimson.dark.a9}' } }, + a10: { value: { _light: '{colors.crimson.light.a10}', _dark: '{colors.crimson.dark.a10}' } }, + a11: { value: { _light: '{colors.crimson.light.a11}', _dark: '{colors.crimson.dark.a11}' } }, + a12: { value: { _light: '{colors.crimson.light.a12}', _dark: '{colors.crimson.dark.a12}' } }, default: { value: '{colors.crimson.9}' }, emphasized: { value: '{colors.crimson.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/cyan.ts b/packages/panda/src/theme/semantic-tokens/colors/cyan.ts index 58642228..302d2bc2 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/cyan.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/cyan.ts @@ -1,28 +1,28 @@ export const cyan = { - 1: { value: { base: '{colors.cyan.light.1}', _dark: '{colors.cyan.dark.1}' } }, - 2: { value: { base: '{colors.cyan.light.2}', _dark: '{colors.cyan.dark.2}' } }, - 3: { value: { base: '{colors.cyan.light.3}', _dark: '{colors.cyan.dark.3}' } }, - 4: { value: { base: '{colors.cyan.light.4}', _dark: '{colors.cyan.dark.4}' } }, - 5: { value: { base: '{colors.cyan.light.5}', _dark: '{colors.cyan.dark.5}' } }, - 6: { value: { base: '{colors.cyan.light.6}', _dark: '{colors.cyan.dark.6}' } }, - 7: { value: { base: '{colors.cyan.light.7}', _dark: '{colors.cyan.dark.7}' } }, - 8: { value: { base: '{colors.cyan.light.8}', _dark: '{colors.cyan.dark.8}' } }, - 9: { value: { base: '{colors.cyan.light.9}', _dark: '{colors.cyan.dark.9}' } }, - 10: { value: { base: '{colors.cyan.light.10}', _dark: '{colors.cyan.dark.10}' } }, - 11: { value: { base: '{colors.cyan.light.11}', _dark: '{colors.cyan.dark.11}' } }, - 12: { value: { base: '{colors.cyan.light.12}', _dark: '{colors.cyan.dark.12}' } }, - a1: { value: { base: '{colors.cyan.light.a1}', _dark: '{colors.cyan.dark.a1}' } }, - a2: { value: { base: '{colors.cyan.light.a2}', _dark: '{colors.cyan.dark.a2}' } }, - a3: { value: { base: '{colors.cyan.light.a3}', _dark: '{colors.cyan.dark.a3}' } }, - a4: { value: { base: '{colors.cyan.light.a4}', _dark: '{colors.cyan.dark.a4}' } }, - a5: { value: { base: '{colors.cyan.light.a5}', _dark: '{colors.cyan.dark.a5}' } }, - a6: { value: { base: '{colors.cyan.light.a6}', _dark: '{colors.cyan.dark.a6}' } }, - a7: { value: { base: '{colors.cyan.light.a7}', _dark: '{colors.cyan.dark.a7}' } }, - a8: { value: { base: '{colors.cyan.light.a8}', _dark: '{colors.cyan.dark.a8}' } }, - a9: { value: { base: '{colors.cyan.light.a9}', _dark: '{colors.cyan.dark.a9}' } }, - a10: { value: { base: '{colors.cyan.light.a10}', _dark: '{colors.cyan.dark.a10}' } }, - a11: { value: { base: '{colors.cyan.light.a11}', _dark: '{colors.cyan.dark.a11}' } }, - a12: { value: { base: '{colors.cyan.light.a12}', _dark: '{colors.cyan.dark.a12}' } }, + 1: { value: { _light: '{colors.cyan.light.1}', _dark: '{colors.cyan.dark.1}' } }, + 2: { value: { _light: '{colors.cyan.light.2}', _dark: '{colors.cyan.dark.2}' } }, + 3: { value: { _light: '{colors.cyan.light.3}', _dark: '{colors.cyan.dark.3}' } }, + 4: { value: { _light: '{colors.cyan.light.4}', _dark: '{colors.cyan.dark.4}' } }, + 5: { value: { _light: '{colors.cyan.light.5}', _dark: '{colors.cyan.dark.5}' } }, + 6: { value: { _light: '{colors.cyan.light.6}', _dark: '{colors.cyan.dark.6}' } }, + 7: { value: { _light: '{colors.cyan.light.7}', _dark: '{colors.cyan.dark.7}' } }, + 8: { value: { _light: '{colors.cyan.light.8}', _dark: '{colors.cyan.dark.8}' } }, + 9: { value: { _light: '{colors.cyan.light.9}', _dark: '{colors.cyan.dark.9}' } }, + 10: { value: { _light: '{colors.cyan.light.10}', _dark: '{colors.cyan.dark.10}' } }, + 11: { value: { _light: '{colors.cyan.light.11}', _dark: '{colors.cyan.dark.11}' } }, + 12: { value: { _light: '{colors.cyan.light.12}', _dark: '{colors.cyan.dark.12}' } }, + a1: { value: { _light: '{colors.cyan.light.a1}', _dark: '{colors.cyan.dark.a1}' } }, + a2: { value: { _light: '{colors.cyan.light.a2}', _dark: '{colors.cyan.dark.a2}' } }, + a3: { value: { _light: '{colors.cyan.light.a3}', _dark: '{colors.cyan.dark.a3}' } }, + a4: { value: { _light: '{colors.cyan.light.a4}', _dark: '{colors.cyan.dark.a4}' } }, + a5: { value: { _light: '{colors.cyan.light.a5}', _dark: '{colors.cyan.dark.a5}' } }, + a6: { value: { _light: '{colors.cyan.light.a6}', _dark: '{colors.cyan.dark.a6}' } }, + a7: { value: { _light: '{colors.cyan.light.a7}', _dark: '{colors.cyan.dark.a7}' } }, + a8: { value: { _light: '{colors.cyan.light.a8}', _dark: '{colors.cyan.dark.a8}' } }, + a9: { value: { _light: '{colors.cyan.light.a9}', _dark: '{colors.cyan.dark.a9}' } }, + a10: { value: { _light: '{colors.cyan.light.a10}', _dark: '{colors.cyan.dark.a10}' } }, + a11: { value: { _light: '{colors.cyan.light.a11}', _dark: '{colors.cyan.dark.a11}' } }, + a12: { value: { _light: '{colors.cyan.light.a12}', _dark: '{colors.cyan.dark.a12}' } }, default: { value: '{colors.cyan.9}' }, emphasized: { value: '{colors.cyan.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/gold.ts b/packages/panda/src/theme/semantic-tokens/colors/gold.ts index d97507ae..4ee0d37b 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/gold.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/gold.ts @@ -1,28 +1,28 @@ export const gold = { - 1: { value: { base: '{colors.gold.light.1}', _dark: '{colors.gold.dark.1}' } }, - 2: { value: { base: '{colors.gold.light.2}', _dark: '{colors.gold.dark.2}' } }, - 3: { value: { base: '{colors.gold.light.3}', _dark: '{colors.gold.dark.3}' } }, - 4: { value: { base: '{colors.gold.light.4}', _dark: '{colors.gold.dark.4}' } }, - 5: { value: { base: '{colors.gold.light.5}', _dark: '{colors.gold.dark.5}' } }, - 6: { value: { base: '{colors.gold.light.6}', _dark: '{colors.gold.dark.6}' } }, - 7: { value: { base: '{colors.gold.light.7}', _dark: '{colors.gold.dark.7}' } }, - 8: { value: { base: '{colors.gold.light.8}', _dark: '{colors.gold.dark.8}' } }, - 9: { value: { base: '{colors.gold.light.9}', _dark: '{colors.gold.dark.9}' } }, - 10: { value: { base: '{colors.gold.light.10}', _dark: '{colors.gold.dark.10}' } }, - 11: { value: { base: '{colors.gold.light.11}', _dark: '{colors.gold.dark.11}' } }, - 12: { value: { base: '{colors.gold.light.12}', _dark: '{colors.gold.dark.12}' } }, - a1: { value: { base: '{colors.gold.light.a1}', _dark: '{colors.gold.dark.a1}' } }, - a2: { value: { base: '{colors.gold.light.a2}', _dark: '{colors.gold.dark.a2}' } }, - a3: { value: { base: '{colors.gold.light.a3}', _dark: '{colors.gold.dark.a3}' } }, - a4: { value: { base: '{colors.gold.light.a4}', _dark: '{colors.gold.dark.a4}' } }, - a5: { value: { base: '{colors.gold.light.a5}', _dark: '{colors.gold.dark.a5}' } }, - a6: { value: { base: '{colors.gold.light.a6}', _dark: '{colors.gold.dark.a6}' } }, - a7: { value: { base: '{colors.gold.light.a7}', _dark: '{colors.gold.dark.a7}' } }, - a8: { value: { base: '{colors.gold.light.a8}', _dark: '{colors.gold.dark.a8}' } }, - a9: { value: { base: '{colors.gold.light.a9}', _dark: '{colors.gold.dark.a9}' } }, - a10: { value: { base: '{colors.gold.light.a10}', _dark: '{colors.gold.dark.a10}' } }, - a11: { value: { base: '{colors.gold.light.a11}', _dark: '{colors.gold.dark.a11}' } }, - a12: { value: { base: '{colors.gold.light.a12}', _dark: '{colors.gold.dark.a12}' } }, + 1: { value: { _light: '{colors.gold.light.1}', _dark: '{colors.gold.dark.1}' } }, + 2: { value: { _light: '{colors.gold.light.2}', _dark: '{colors.gold.dark.2}' } }, + 3: { value: { _light: '{colors.gold.light.3}', _dark: '{colors.gold.dark.3}' } }, + 4: { value: { _light: '{colors.gold.light.4}', _dark: '{colors.gold.dark.4}' } }, + 5: { value: { _light: '{colors.gold.light.5}', _dark: '{colors.gold.dark.5}' } }, + 6: { value: { _light: '{colors.gold.light.6}', _dark: '{colors.gold.dark.6}' } }, + 7: { value: { _light: '{colors.gold.light.7}', _dark: '{colors.gold.dark.7}' } }, + 8: { value: { _light: '{colors.gold.light.8}', _dark: '{colors.gold.dark.8}' } }, + 9: { value: { _light: '{colors.gold.light.9}', _dark: '{colors.gold.dark.9}' } }, + 10: { value: { _light: '{colors.gold.light.10}', _dark: '{colors.gold.dark.10}' } }, + 11: { value: { _light: '{colors.gold.light.11}', _dark: '{colors.gold.dark.11}' } }, + 12: { value: { _light: '{colors.gold.light.12}', _dark: '{colors.gold.dark.12}' } }, + a1: { value: { _light: '{colors.gold.light.a1}', _dark: '{colors.gold.dark.a1}' } }, + a2: { value: { _light: '{colors.gold.light.a2}', _dark: '{colors.gold.dark.a2}' } }, + a3: { value: { _light: '{colors.gold.light.a3}', _dark: '{colors.gold.dark.a3}' } }, + a4: { value: { _light: '{colors.gold.light.a4}', _dark: '{colors.gold.dark.a4}' } }, + a5: { value: { _light: '{colors.gold.light.a5}', _dark: '{colors.gold.dark.a5}' } }, + a6: { value: { _light: '{colors.gold.light.a6}', _dark: '{colors.gold.dark.a6}' } }, + a7: { value: { _light: '{colors.gold.light.a7}', _dark: '{colors.gold.dark.a7}' } }, + a8: { value: { _light: '{colors.gold.light.a8}', _dark: '{colors.gold.dark.a8}' } }, + a9: { value: { _light: '{colors.gold.light.a9}', _dark: '{colors.gold.dark.a9}' } }, + a10: { value: { _light: '{colors.gold.light.a10}', _dark: '{colors.gold.dark.a10}' } }, + a11: { value: { _light: '{colors.gold.light.a11}', _dark: '{colors.gold.dark.a11}' } }, + a12: { value: { _light: '{colors.gold.light.a12}', _dark: '{colors.gold.dark.a12}' } }, default: { value: '{colors.gold.9}' }, emphasized: { value: '{colors.gold.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/grass.ts b/packages/panda/src/theme/semantic-tokens/colors/grass.ts index 185f4465..219dbddb 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/grass.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/grass.ts @@ -1,28 +1,28 @@ export const grass = { - 1: { value: { base: '{colors.grass.light.1}', _dark: '{colors.grass.dark.1}' } }, - 2: { value: { base: '{colors.grass.light.2}', _dark: '{colors.grass.dark.2}' } }, - 3: { value: { base: '{colors.grass.light.3}', _dark: '{colors.grass.dark.3}' } }, - 4: { value: { base: '{colors.grass.light.4}', _dark: '{colors.grass.dark.4}' } }, - 5: { value: { base: '{colors.grass.light.5}', _dark: '{colors.grass.dark.5}' } }, - 6: { value: { base: '{colors.grass.light.6}', _dark: '{colors.grass.dark.6}' } }, - 7: { value: { base: '{colors.grass.light.7}', _dark: '{colors.grass.dark.7}' } }, - 8: { value: { base: '{colors.grass.light.8}', _dark: '{colors.grass.dark.8}' } }, - 9: { value: { base: '{colors.grass.light.9}', _dark: '{colors.grass.dark.9}' } }, - 10: { value: { base: '{colors.grass.light.10}', _dark: '{colors.grass.dark.10}' } }, - 11: { value: { base: '{colors.grass.light.11}', _dark: '{colors.grass.dark.11}' } }, - 12: { value: { base: '{colors.grass.light.12}', _dark: '{colors.grass.dark.12}' } }, - a1: { value: { base: '{colors.grass.light.a1}', _dark: '{colors.grass.dark.a1}' } }, - a2: { value: { base: '{colors.grass.light.a2}', _dark: '{colors.grass.dark.a2}' } }, - a3: { value: { base: '{colors.grass.light.a3}', _dark: '{colors.grass.dark.a3}' } }, - a4: { value: { base: '{colors.grass.light.a4}', _dark: '{colors.grass.dark.a4}' } }, - a5: { value: { base: '{colors.grass.light.a5}', _dark: '{colors.grass.dark.a5}' } }, - a6: { value: { base: '{colors.grass.light.a6}', _dark: '{colors.grass.dark.a6}' } }, - a7: { value: { base: '{colors.grass.light.a7}', _dark: '{colors.grass.dark.a7}' } }, - a8: { value: { base: '{colors.grass.light.a8}', _dark: '{colors.grass.dark.a8}' } }, - a9: { value: { base: '{colors.grass.light.a9}', _dark: '{colors.grass.dark.a9}' } }, - a10: { value: { base: '{colors.grass.light.a10}', _dark: '{colors.grass.dark.a10}' } }, - a11: { value: { base: '{colors.grass.light.a11}', _dark: '{colors.grass.dark.a11}' } }, - a12: { value: { base: '{colors.grass.light.a12}', _dark: '{colors.grass.dark.a12}' } }, + 1: { value: { _light: '{colors.grass.light.1}', _dark: '{colors.grass.dark.1}' } }, + 2: { value: { _light: '{colors.grass.light.2}', _dark: '{colors.grass.dark.2}' } }, + 3: { value: { _light: '{colors.grass.light.3}', _dark: '{colors.grass.dark.3}' } }, + 4: { value: { _light: '{colors.grass.light.4}', _dark: '{colors.grass.dark.4}' } }, + 5: { value: { _light: '{colors.grass.light.5}', _dark: '{colors.grass.dark.5}' } }, + 6: { value: { _light: '{colors.grass.light.6}', _dark: '{colors.grass.dark.6}' } }, + 7: { value: { _light: '{colors.grass.light.7}', _dark: '{colors.grass.dark.7}' } }, + 8: { value: { _light: '{colors.grass.light.8}', _dark: '{colors.grass.dark.8}' } }, + 9: { value: { _light: '{colors.grass.light.9}', _dark: '{colors.grass.dark.9}' } }, + 10: { value: { _light: '{colors.grass.light.10}', _dark: '{colors.grass.dark.10}' } }, + 11: { value: { _light: '{colors.grass.light.11}', _dark: '{colors.grass.dark.11}' } }, + 12: { value: { _light: '{colors.grass.light.12}', _dark: '{colors.grass.dark.12}' } }, + a1: { value: { _light: '{colors.grass.light.a1}', _dark: '{colors.grass.dark.a1}' } }, + a2: { value: { _light: '{colors.grass.light.a2}', _dark: '{colors.grass.dark.a2}' } }, + a3: { value: { _light: '{colors.grass.light.a3}', _dark: '{colors.grass.dark.a3}' } }, + a4: { value: { _light: '{colors.grass.light.a4}', _dark: '{colors.grass.dark.a4}' } }, + a5: { value: { _light: '{colors.grass.light.a5}', _dark: '{colors.grass.dark.a5}' } }, + a6: { value: { _light: '{colors.grass.light.a6}', _dark: '{colors.grass.dark.a6}' } }, + a7: { value: { _light: '{colors.grass.light.a7}', _dark: '{colors.grass.dark.a7}' } }, + a8: { value: { _light: '{colors.grass.light.a8}', _dark: '{colors.grass.dark.a8}' } }, + a9: { value: { _light: '{colors.grass.light.a9}', _dark: '{colors.grass.dark.a9}' } }, + a10: { value: { _light: '{colors.grass.light.a10}', _dark: '{colors.grass.dark.a10}' } }, + a11: { value: { _light: '{colors.grass.light.a11}', _dark: '{colors.grass.dark.a11}' } }, + a12: { value: { _light: '{colors.grass.light.a12}', _dark: '{colors.grass.dark.a12}' } }, default: { value: '{colors.grass.9}' }, emphasized: { value: '{colors.grass.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/green.ts b/packages/panda/src/theme/semantic-tokens/colors/green.ts index a5f5c04d..3d183a5d 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/green.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/green.ts @@ -1,28 +1,28 @@ export const green = { - 1: { value: { base: '{colors.green.light.1}', _dark: '{colors.green.dark.1}' } }, - 2: { value: { base: '{colors.green.light.2}', _dark: '{colors.green.dark.2}' } }, - 3: { value: { base: '{colors.green.light.3}', _dark: '{colors.green.dark.3}' } }, - 4: { value: { base: '{colors.green.light.4}', _dark: '{colors.green.dark.4}' } }, - 5: { value: { base: '{colors.green.light.5}', _dark: '{colors.green.dark.5}' } }, - 6: { value: { base: '{colors.green.light.6}', _dark: '{colors.green.dark.6}' } }, - 7: { value: { base: '{colors.green.light.7}', _dark: '{colors.green.dark.7}' } }, - 8: { value: { base: '{colors.green.light.8}', _dark: '{colors.green.dark.8}' } }, - 9: { value: { base: '{colors.green.light.9}', _dark: '{colors.green.dark.9}' } }, - 10: { value: { base: '{colors.green.light.10}', _dark: '{colors.green.dark.10}' } }, - 11: { value: { base: '{colors.green.light.11}', _dark: '{colors.green.dark.11}' } }, - 12: { value: { base: '{colors.green.light.12}', _dark: '{colors.green.dark.12}' } }, - a1: { value: { base: '{colors.green.light.a1}', _dark: '{colors.green.dark.a1}' } }, - a2: { value: { base: '{colors.green.light.a2}', _dark: '{colors.green.dark.a2}' } }, - a3: { value: { base: '{colors.green.light.a3}', _dark: '{colors.green.dark.a3}' } }, - a4: { value: { base: '{colors.green.light.a4}', _dark: '{colors.green.dark.a4}' } }, - a5: { value: { base: '{colors.green.light.a5}', _dark: '{colors.green.dark.a5}' } }, - a6: { value: { base: '{colors.green.light.a6}', _dark: '{colors.green.dark.a6}' } }, - a7: { value: { base: '{colors.green.light.a7}', _dark: '{colors.green.dark.a7}' } }, - a8: { value: { base: '{colors.green.light.a8}', _dark: '{colors.green.dark.a8}' } }, - a9: { value: { base: '{colors.green.light.a9}', _dark: '{colors.green.dark.a9}' } }, - a10: { value: { base: '{colors.green.light.a10}', _dark: '{colors.green.dark.a10}' } }, - a11: { value: { base: '{colors.green.light.a11}', _dark: '{colors.green.dark.a11}' } }, - a12: { value: { base: '{colors.green.light.a12}', _dark: '{colors.green.dark.a12}' } }, + 1: { value: { _light: '{colors.green.light.1}', _dark: '{colors.green.dark.1}' } }, + 2: { value: { _light: '{colors.green.light.2}', _dark: '{colors.green.dark.2}' } }, + 3: { value: { _light: '{colors.green.light.3}', _dark: '{colors.green.dark.3}' } }, + 4: { value: { _light: '{colors.green.light.4}', _dark: '{colors.green.dark.4}' } }, + 5: { value: { _light: '{colors.green.light.5}', _dark: '{colors.green.dark.5}' } }, + 6: { value: { _light: '{colors.green.light.6}', _dark: '{colors.green.dark.6}' } }, + 7: { value: { _light: '{colors.green.light.7}', _dark: '{colors.green.dark.7}' } }, + 8: { value: { _light: '{colors.green.light.8}', _dark: '{colors.green.dark.8}' } }, + 9: { value: { _light: '{colors.green.light.9}', _dark: '{colors.green.dark.9}' } }, + 10: { value: { _light: '{colors.green.light.10}', _dark: '{colors.green.dark.10}' } }, + 11: { value: { _light: '{colors.green.light.11}', _dark: '{colors.green.dark.11}' } }, + 12: { value: { _light: '{colors.green.light.12}', _dark: '{colors.green.dark.12}' } }, + a1: { value: { _light: '{colors.green.light.a1}', _dark: '{colors.green.dark.a1}' } }, + a2: { value: { _light: '{colors.green.light.a2}', _dark: '{colors.green.dark.a2}' } }, + a3: { value: { _light: '{colors.green.light.a3}', _dark: '{colors.green.dark.a3}' } }, + a4: { value: { _light: '{colors.green.light.a4}', _dark: '{colors.green.dark.a4}' } }, + a5: { value: { _light: '{colors.green.light.a5}', _dark: '{colors.green.dark.a5}' } }, + a6: { value: { _light: '{colors.green.light.a6}', _dark: '{colors.green.dark.a6}' } }, + a7: { value: { _light: '{colors.green.light.a7}', _dark: '{colors.green.dark.a7}' } }, + a8: { value: { _light: '{colors.green.light.a8}', _dark: '{colors.green.dark.a8}' } }, + a9: { value: { _light: '{colors.green.light.a9}', _dark: '{colors.green.dark.a9}' } }, + a10: { value: { _light: '{colors.green.light.a10}', _dark: '{colors.green.dark.a10}' } }, + a11: { value: { _light: '{colors.green.light.a11}', _dark: '{colors.green.dark.a11}' } }, + a12: { value: { _light: '{colors.green.light.a12}', _dark: '{colors.green.dark.a12}' } }, default: { value: '{colors.green.9}' }, emphasized: { value: '{colors.green.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/indigo.ts b/packages/panda/src/theme/semantic-tokens/colors/indigo.ts index cc51e16f..ecbbd0b0 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/indigo.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/indigo.ts @@ -1,28 +1,28 @@ export const indigo = { - 1: { value: { base: '{colors.indigo.light.1}', _dark: '{colors.indigo.dark.1}' } }, - 2: { value: { base: '{colors.indigo.light.2}', _dark: '{colors.indigo.dark.2}' } }, - 3: { value: { base: '{colors.indigo.light.3}', _dark: '{colors.indigo.dark.3}' } }, - 4: { value: { base: '{colors.indigo.light.4}', _dark: '{colors.indigo.dark.4}' } }, - 5: { value: { base: '{colors.indigo.light.5}', _dark: '{colors.indigo.dark.5}' } }, - 6: { value: { base: '{colors.indigo.light.6}', _dark: '{colors.indigo.dark.6}' } }, - 7: { value: { base: '{colors.indigo.light.7}', _dark: '{colors.indigo.dark.7}' } }, - 8: { value: { base: '{colors.indigo.light.8}', _dark: '{colors.indigo.dark.8}' } }, - 9: { value: { base: '{colors.indigo.light.9}', _dark: '{colors.indigo.dark.9}' } }, - 10: { value: { base: '{colors.indigo.light.10}', _dark: '{colors.indigo.dark.10}' } }, - 11: { value: { base: '{colors.indigo.light.11}', _dark: '{colors.indigo.dark.11}' } }, - 12: { value: { base: '{colors.indigo.light.12}', _dark: '{colors.indigo.dark.12}' } }, - a1: { value: { base: '{colors.indigo.light.a1}', _dark: '{colors.indigo.dark.a1}' } }, - a2: { value: { base: '{colors.indigo.light.a2}', _dark: '{colors.indigo.dark.a2}' } }, - a3: { value: { base: '{colors.indigo.light.a3}', _dark: '{colors.indigo.dark.a3}' } }, - a4: { value: { base: '{colors.indigo.light.a4}', _dark: '{colors.indigo.dark.a4}' } }, - a5: { value: { base: '{colors.indigo.light.a5}', _dark: '{colors.indigo.dark.a5}' } }, - a6: { value: { base: '{colors.indigo.light.a6}', _dark: '{colors.indigo.dark.a6}' } }, - a7: { value: { base: '{colors.indigo.light.a7}', _dark: '{colors.indigo.dark.a7}' } }, - a8: { value: { base: '{colors.indigo.light.a8}', _dark: '{colors.indigo.dark.a8}' } }, - a9: { value: { base: '{colors.indigo.light.a9}', _dark: '{colors.indigo.dark.a9}' } }, - a10: { value: { base: '{colors.indigo.light.a10}', _dark: '{colors.indigo.dark.a10}' } }, - a11: { value: { base: '{colors.indigo.light.a11}', _dark: '{colors.indigo.dark.a11}' } }, - a12: { value: { base: '{colors.indigo.light.a12}', _dark: '{colors.indigo.dark.a12}' } }, + 1: { value: { _light: '{colors.indigo.light.1}', _dark: '{colors.indigo.dark.1}' } }, + 2: { value: { _light: '{colors.indigo.light.2}', _dark: '{colors.indigo.dark.2}' } }, + 3: { value: { _light: '{colors.indigo.light.3}', _dark: '{colors.indigo.dark.3}' } }, + 4: { value: { _light: '{colors.indigo.light.4}', _dark: '{colors.indigo.dark.4}' } }, + 5: { value: { _light: '{colors.indigo.light.5}', _dark: '{colors.indigo.dark.5}' } }, + 6: { value: { _light: '{colors.indigo.light.6}', _dark: '{colors.indigo.dark.6}' } }, + 7: { value: { _light: '{colors.indigo.light.7}', _dark: '{colors.indigo.dark.7}' } }, + 8: { value: { _light: '{colors.indigo.light.8}', _dark: '{colors.indigo.dark.8}' } }, + 9: { value: { _light: '{colors.indigo.light.9}', _dark: '{colors.indigo.dark.9}' } }, + 10: { value: { _light: '{colors.indigo.light.10}', _dark: '{colors.indigo.dark.10}' } }, + 11: { value: { _light: '{colors.indigo.light.11}', _dark: '{colors.indigo.dark.11}' } }, + 12: { value: { _light: '{colors.indigo.light.12}', _dark: '{colors.indigo.dark.12}' } }, + a1: { value: { _light: '{colors.indigo.light.a1}', _dark: '{colors.indigo.dark.a1}' } }, + a2: { value: { _light: '{colors.indigo.light.a2}', _dark: '{colors.indigo.dark.a2}' } }, + a3: { value: { _light: '{colors.indigo.light.a3}', _dark: '{colors.indigo.dark.a3}' } }, + a4: { value: { _light: '{colors.indigo.light.a4}', _dark: '{colors.indigo.dark.a4}' } }, + a5: { value: { _light: '{colors.indigo.light.a5}', _dark: '{colors.indigo.dark.a5}' } }, + a6: { value: { _light: '{colors.indigo.light.a6}', _dark: '{colors.indigo.dark.a6}' } }, + a7: { value: { _light: '{colors.indigo.light.a7}', _dark: '{colors.indigo.dark.a7}' } }, + a8: { value: { _light: '{colors.indigo.light.a8}', _dark: '{colors.indigo.dark.a8}' } }, + a9: { value: { _light: '{colors.indigo.light.a9}', _dark: '{colors.indigo.dark.a9}' } }, + a10: { value: { _light: '{colors.indigo.light.a10}', _dark: '{colors.indigo.dark.a10}' } }, + a11: { value: { _light: '{colors.indigo.light.a11}', _dark: '{colors.indigo.dark.a11}' } }, + a12: { value: { _light: '{colors.indigo.light.a12}', _dark: '{colors.indigo.dark.a12}' } }, default: { value: '{colors.indigo.9}' }, emphasized: { value: '{colors.indigo.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/iris.ts b/packages/panda/src/theme/semantic-tokens/colors/iris.ts index 40db7bd7..07ae8502 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/iris.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/iris.ts @@ -1,28 +1,28 @@ export const iris = { - 1: { value: { base: '{colors.iris.light.1}', _dark: '{colors.iris.dark.1}' } }, - 2: { value: { base: '{colors.iris.light.2}', _dark: '{colors.iris.dark.2}' } }, - 3: { value: { base: '{colors.iris.light.3}', _dark: '{colors.iris.dark.3}' } }, - 4: { value: { base: '{colors.iris.light.4}', _dark: '{colors.iris.dark.4}' } }, - 5: { value: { base: '{colors.iris.light.5}', _dark: '{colors.iris.dark.5}' } }, - 6: { value: { base: '{colors.iris.light.6}', _dark: '{colors.iris.dark.6}' } }, - 7: { value: { base: '{colors.iris.light.7}', _dark: '{colors.iris.dark.7}' } }, - 8: { value: { base: '{colors.iris.light.8}', _dark: '{colors.iris.dark.8}' } }, - 9: { value: { base: '{colors.iris.light.9}', _dark: '{colors.iris.dark.9}' } }, - 10: { value: { base: '{colors.iris.light.10}', _dark: '{colors.iris.dark.10}' } }, - 11: { value: { base: '{colors.iris.light.11}', _dark: '{colors.iris.dark.11}' } }, - 12: { value: { base: '{colors.iris.light.12}', _dark: '{colors.iris.dark.12}' } }, - a1: { value: { base: '{colors.iris.light.a1}', _dark: '{colors.iris.dark.a1}' } }, - a2: { value: { base: '{colors.iris.light.a2}', _dark: '{colors.iris.dark.a2}' } }, - a3: { value: { base: '{colors.iris.light.a3}', _dark: '{colors.iris.dark.a3}' } }, - a4: { value: { base: '{colors.iris.light.a4}', _dark: '{colors.iris.dark.a4}' } }, - a5: { value: { base: '{colors.iris.light.a5}', _dark: '{colors.iris.dark.a5}' } }, - a6: { value: { base: '{colors.iris.light.a6}', _dark: '{colors.iris.dark.a6}' } }, - a7: { value: { base: '{colors.iris.light.a7}', _dark: '{colors.iris.dark.a7}' } }, - a8: { value: { base: '{colors.iris.light.a8}', _dark: '{colors.iris.dark.a8}' } }, - a9: { value: { base: '{colors.iris.light.a9}', _dark: '{colors.iris.dark.a9}' } }, - a10: { value: { base: '{colors.iris.light.a10}', _dark: '{colors.iris.dark.a10}' } }, - a11: { value: { base: '{colors.iris.light.a11}', _dark: '{colors.iris.dark.a11}' } }, - a12: { value: { base: '{colors.iris.light.a12}', _dark: '{colors.iris.dark.a12}' } }, + 1: { value: { _light: '{colors.iris.light.1}', _dark: '{colors.iris.dark.1}' } }, + 2: { value: { _light: '{colors.iris.light.2}', _dark: '{colors.iris.dark.2}' } }, + 3: { value: { _light: '{colors.iris.light.3}', _dark: '{colors.iris.dark.3}' } }, + 4: { value: { _light: '{colors.iris.light.4}', _dark: '{colors.iris.dark.4}' } }, + 5: { value: { _light: '{colors.iris.light.5}', _dark: '{colors.iris.dark.5}' } }, + 6: { value: { _light: '{colors.iris.light.6}', _dark: '{colors.iris.dark.6}' } }, + 7: { value: { _light: '{colors.iris.light.7}', _dark: '{colors.iris.dark.7}' } }, + 8: { value: { _light: '{colors.iris.light.8}', _dark: '{colors.iris.dark.8}' } }, + 9: { value: { _light: '{colors.iris.light.9}', _dark: '{colors.iris.dark.9}' } }, + 10: { value: { _light: '{colors.iris.light.10}', _dark: '{colors.iris.dark.10}' } }, + 11: { value: { _light: '{colors.iris.light.11}', _dark: '{colors.iris.dark.11}' } }, + 12: { value: { _light: '{colors.iris.light.12}', _dark: '{colors.iris.dark.12}' } }, + a1: { value: { _light: '{colors.iris.light.a1}', _dark: '{colors.iris.dark.a1}' } }, + a2: { value: { _light: '{colors.iris.light.a2}', _dark: '{colors.iris.dark.a2}' } }, + a3: { value: { _light: '{colors.iris.light.a3}', _dark: '{colors.iris.dark.a3}' } }, + a4: { value: { _light: '{colors.iris.light.a4}', _dark: '{colors.iris.dark.a4}' } }, + a5: { value: { _light: '{colors.iris.light.a5}', _dark: '{colors.iris.dark.a5}' } }, + a6: { value: { _light: '{colors.iris.light.a6}', _dark: '{colors.iris.dark.a6}' } }, + a7: { value: { _light: '{colors.iris.light.a7}', _dark: '{colors.iris.dark.a7}' } }, + a8: { value: { _light: '{colors.iris.light.a8}', _dark: '{colors.iris.dark.a8}' } }, + a9: { value: { _light: '{colors.iris.light.a9}', _dark: '{colors.iris.dark.a9}' } }, + a10: { value: { _light: '{colors.iris.light.a10}', _dark: '{colors.iris.dark.a10}' } }, + a11: { value: { _light: '{colors.iris.light.a11}', _dark: '{colors.iris.dark.a11}' } }, + a12: { value: { _light: '{colors.iris.light.a12}', _dark: '{colors.iris.dark.a12}' } }, default: { value: '{colors.iris.9}' }, emphasized: { value: '{colors.iris.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/jade.ts b/packages/panda/src/theme/semantic-tokens/colors/jade.ts index 0578f91e..8c0daebe 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/jade.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/jade.ts @@ -1,28 +1,28 @@ export const jade = { - 1: { value: { base: '{colors.jade.light.1}', _dark: '{colors.jade.dark.1}' } }, - 2: { value: { base: '{colors.jade.light.2}', _dark: '{colors.jade.dark.2}' } }, - 3: { value: { base: '{colors.jade.light.3}', _dark: '{colors.jade.dark.3}' } }, - 4: { value: { base: '{colors.jade.light.4}', _dark: '{colors.jade.dark.4}' } }, - 5: { value: { base: '{colors.jade.light.5}', _dark: '{colors.jade.dark.5}' } }, - 6: { value: { base: '{colors.jade.light.6}', _dark: '{colors.jade.dark.6}' } }, - 7: { value: { base: '{colors.jade.light.7}', _dark: '{colors.jade.dark.7}' } }, - 8: { value: { base: '{colors.jade.light.8}', _dark: '{colors.jade.dark.8}' } }, - 9: { value: { base: '{colors.jade.light.9}', _dark: '{colors.jade.dark.9}' } }, - 10: { value: { base: '{colors.jade.light.10}', _dark: '{colors.jade.dark.10}' } }, - 11: { value: { base: '{colors.jade.light.11}', _dark: '{colors.jade.dark.11}' } }, - 12: { value: { base: '{colors.jade.light.12}', _dark: '{colors.jade.dark.12}' } }, - a1: { value: { base: '{colors.jade.light.a1}', _dark: '{colors.jade.dark.a1}' } }, - a2: { value: { base: '{colors.jade.light.a2}', _dark: '{colors.jade.dark.a2}' } }, - a3: { value: { base: '{colors.jade.light.a3}', _dark: '{colors.jade.dark.a3}' } }, - a4: { value: { base: '{colors.jade.light.a4}', _dark: '{colors.jade.dark.a4}' } }, - a5: { value: { base: '{colors.jade.light.a5}', _dark: '{colors.jade.dark.a5}' } }, - a6: { value: { base: '{colors.jade.light.a6}', _dark: '{colors.jade.dark.a6}' } }, - a7: { value: { base: '{colors.jade.light.a7}', _dark: '{colors.jade.dark.a7}' } }, - a8: { value: { base: '{colors.jade.light.a8}', _dark: '{colors.jade.dark.a8}' } }, - a9: { value: { base: '{colors.jade.light.a9}', _dark: '{colors.jade.dark.a9}' } }, - a10: { value: { base: '{colors.jade.light.a10}', _dark: '{colors.jade.dark.a10}' } }, - a11: { value: { base: '{colors.jade.light.a11}', _dark: '{colors.jade.dark.a11}' } }, - a12: { value: { base: '{colors.jade.light.a12}', _dark: '{colors.jade.dark.a12}' } }, + 1: { value: { _light: '{colors.jade.light.1}', _dark: '{colors.jade.dark.1}' } }, + 2: { value: { _light: '{colors.jade.light.2}', _dark: '{colors.jade.dark.2}' } }, + 3: { value: { _light: '{colors.jade.light.3}', _dark: '{colors.jade.dark.3}' } }, + 4: { value: { _light: '{colors.jade.light.4}', _dark: '{colors.jade.dark.4}' } }, + 5: { value: { _light: '{colors.jade.light.5}', _dark: '{colors.jade.dark.5}' } }, + 6: { value: { _light: '{colors.jade.light.6}', _dark: '{colors.jade.dark.6}' } }, + 7: { value: { _light: '{colors.jade.light.7}', _dark: '{colors.jade.dark.7}' } }, + 8: { value: { _light: '{colors.jade.light.8}', _dark: '{colors.jade.dark.8}' } }, + 9: { value: { _light: '{colors.jade.light.9}', _dark: '{colors.jade.dark.9}' } }, + 10: { value: { _light: '{colors.jade.light.10}', _dark: '{colors.jade.dark.10}' } }, + 11: { value: { _light: '{colors.jade.light.11}', _dark: '{colors.jade.dark.11}' } }, + 12: { value: { _light: '{colors.jade.light.12}', _dark: '{colors.jade.dark.12}' } }, + a1: { value: { _light: '{colors.jade.light.a1}', _dark: '{colors.jade.dark.a1}' } }, + a2: { value: { _light: '{colors.jade.light.a2}', _dark: '{colors.jade.dark.a2}' } }, + a3: { value: { _light: '{colors.jade.light.a3}', _dark: '{colors.jade.dark.a3}' } }, + a4: { value: { _light: '{colors.jade.light.a4}', _dark: '{colors.jade.dark.a4}' } }, + a5: { value: { _light: '{colors.jade.light.a5}', _dark: '{colors.jade.dark.a5}' } }, + a6: { value: { _light: '{colors.jade.light.a6}', _dark: '{colors.jade.dark.a6}' } }, + a7: { value: { _light: '{colors.jade.light.a7}', _dark: '{colors.jade.dark.a7}' } }, + a8: { value: { _light: '{colors.jade.light.a8}', _dark: '{colors.jade.dark.a8}' } }, + a9: { value: { _light: '{colors.jade.light.a9}', _dark: '{colors.jade.dark.a9}' } }, + a10: { value: { _light: '{colors.jade.light.a10}', _dark: '{colors.jade.dark.a10}' } }, + a11: { value: { _light: '{colors.jade.light.a11}', _dark: '{colors.jade.dark.a11}' } }, + a12: { value: { _light: '{colors.jade.light.a12}', _dark: '{colors.jade.dark.a12}' } }, default: { value: '{colors.jade.9}' }, emphasized: { value: '{colors.jade.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/lime.ts b/packages/panda/src/theme/semantic-tokens/colors/lime.ts index 0ada2215..b3b47584 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/lime.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/lime.ts @@ -1,28 +1,28 @@ export const lime = { - 1: { value: { base: '{colors.lime.light.1}', _dark: '{colors.lime.dark.1}' } }, - 2: { value: { base: '{colors.lime.light.2}', _dark: '{colors.lime.dark.2}' } }, - 3: { value: { base: '{colors.lime.light.3}', _dark: '{colors.lime.dark.3}' } }, - 4: { value: { base: '{colors.lime.light.4}', _dark: '{colors.lime.dark.4}' } }, - 5: { value: { base: '{colors.lime.light.5}', _dark: '{colors.lime.dark.5}' } }, - 6: { value: { base: '{colors.lime.light.6}', _dark: '{colors.lime.dark.6}' } }, - 7: { value: { base: '{colors.lime.light.7}', _dark: '{colors.lime.dark.7}' } }, - 8: { value: { base: '{colors.lime.light.8}', _dark: '{colors.lime.dark.8}' } }, - 9: { value: { base: '{colors.lime.light.9}', _dark: '{colors.lime.dark.9}' } }, - 10: { value: { base: '{colors.lime.light.10}', _dark: '{colors.lime.dark.10}' } }, - 11: { value: { base: '{colors.lime.light.11}', _dark: '{colors.lime.dark.11}' } }, - 12: { value: { base: '{colors.lime.light.12}', _dark: '{colors.lime.dark.12}' } }, - a1: { value: { base: '{colors.lime.light.a1}', _dark: '{colors.lime.dark.a1}' } }, - a2: { value: { base: '{colors.lime.light.a2}', _dark: '{colors.lime.dark.a2}' } }, - a3: { value: { base: '{colors.lime.light.a3}', _dark: '{colors.lime.dark.a3}' } }, - a4: { value: { base: '{colors.lime.light.a4}', _dark: '{colors.lime.dark.a4}' } }, - a5: { value: { base: '{colors.lime.light.a5}', _dark: '{colors.lime.dark.a5}' } }, - a6: { value: { base: '{colors.lime.light.a6}', _dark: '{colors.lime.dark.a6}' } }, - a7: { value: { base: '{colors.lime.light.a7}', _dark: '{colors.lime.dark.a7}' } }, - a8: { value: { base: '{colors.lime.light.a8}', _dark: '{colors.lime.dark.a8}' } }, - a9: { value: { base: '{colors.lime.light.a9}', _dark: '{colors.lime.dark.a9}' } }, - a10: { value: { base: '{colors.lime.light.a10}', _dark: '{colors.lime.dark.a10}' } }, - a11: { value: { base: '{colors.lime.light.a11}', _dark: '{colors.lime.dark.a11}' } }, - a12: { value: { base: '{colors.lime.light.a12}', _dark: '{colors.lime.dark.a12}' } }, + 1: { value: { _light: '{colors.lime.light.1}', _dark: '{colors.lime.dark.1}' } }, + 2: { value: { _light: '{colors.lime.light.2}', _dark: '{colors.lime.dark.2}' } }, + 3: { value: { _light: '{colors.lime.light.3}', _dark: '{colors.lime.dark.3}' } }, + 4: { value: { _light: '{colors.lime.light.4}', _dark: '{colors.lime.dark.4}' } }, + 5: { value: { _light: '{colors.lime.light.5}', _dark: '{colors.lime.dark.5}' } }, + 6: { value: { _light: '{colors.lime.light.6}', _dark: '{colors.lime.dark.6}' } }, + 7: { value: { _light: '{colors.lime.light.7}', _dark: '{colors.lime.dark.7}' } }, + 8: { value: { _light: '{colors.lime.light.8}', _dark: '{colors.lime.dark.8}' } }, + 9: { value: { _light: '{colors.lime.light.9}', _dark: '{colors.lime.dark.9}' } }, + 10: { value: { _light: '{colors.lime.light.10}', _dark: '{colors.lime.dark.10}' } }, + 11: { value: { _light: '{colors.lime.light.11}', _dark: '{colors.lime.dark.11}' } }, + 12: { value: { _light: '{colors.lime.light.12}', _dark: '{colors.lime.dark.12}' } }, + a1: { value: { _light: '{colors.lime.light.a1}', _dark: '{colors.lime.dark.a1}' } }, + a2: { value: { _light: '{colors.lime.light.a2}', _dark: '{colors.lime.dark.a2}' } }, + a3: { value: { _light: '{colors.lime.light.a3}', _dark: '{colors.lime.dark.a3}' } }, + a4: { value: { _light: '{colors.lime.light.a4}', _dark: '{colors.lime.dark.a4}' } }, + a5: { value: { _light: '{colors.lime.light.a5}', _dark: '{colors.lime.dark.a5}' } }, + a6: { value: { _light: '{colors.lime.light.a6}', _dark: '{colors.lime.dark.a6}' } }, + a7: { value: { _light: '{colors.lime.light.a7}', _dark: '{colors.lime.dark.a7}' } }, + a8: { value: { _light: '{colors.lime.light.a8}', _dark: '{colors.lime.dark.a8}' } }, + a9: { value: { _light: '{colors.lime.light.a9}', _dark: '{colors.lime.dark.a9}' } }, + a10: { value: { _light: '{colors.lime.light.a10}', _dark: '{colors.lime.dark.a10}' } }, + a11: { value: { _light: '{colors.lime.light.a11}', _dark: '{colors.lime.dark.a11}' } }, + a12: { value: { _light: '{colors.lime.light.a12}', _dark: '{colors.lime.dark.a12}' } }, default: { value: '{colors.lime.9}' }, emphasized: { value: '{colors.lime.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/mauve.ts b/packages/panda/src/theme/semantic-tokens/colors/mauve.ts index eff9b75d..a1e7a467 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/mauve.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/mauve.ts @@ -1,28 +1,28 @@ export const mauve = { - 1: { value: { base: '{colors.mauve.light.1}', _dark: '{colors.mauve.dark.1}' } }, - 2: { value: { base: '{colors.mauve.light.2}', _dark: '{colors.mauve.dark.2}' } }, - 3: { value: { base: '{colors.mauve.light.3}', _dark: '{colors.mauve.dark.3}' } }, - 4: { value: { base: '{colors.mauve.light.4}', _dark: '{colors.mauve.dark.4}' } }, - 5: { value: { base: '{colors.mauve.light.5}', _dark: '{colors.mauve.dark.5}' } }, - 6: { value: { base: '{colors.mauve.light.6}', _dark: '{colors.mauve.dark.6}' } }, - 7: { value: { base: '{colors.mauve.light.7}', _dark: '{colors.mauve.dark.7}' } }, - 8: { value: { base: '{colors.mauve.light.8}', _dark: '{colors.mauve.dark.8}' } }, - 9: { value: { base: '{colors.mauve.light.9}', _dark: '{colors.mauve.dark.9}' } }, - 10: { value: { base: '{colors.mauve.light.10}', _dark: '{colors.mauve.dark.10}' } }, - 11: { value: { base: '{colors.mauve.light.11}', _dark: '{colors.mauve.dark.11}' } }, - 12: { value: { base: '{colors.mauve.light.12}', _dark: '{colors.mauve.dark.12}' } }, - a1: { value: { base: '{colors.mauve.light.a1}', _dark: '{colors.mauve.dark.a1}' } }, - a2: { value: { base: '{colors.mauve.light.a2}', _dark: '{colors.mauve.dark.a2}' } }, - a3: { value: { base: '{colors.mauve.light.a3}', _dark: '{colors.mauve.dark.a3}' } }, - a4: { value: { base: '{colors.mauve.light.a4}', _dark: '{colors.mauve.dark.a4}' } }, - a5: { value: { base: '{colors.mauve.light.a5}', _dark: '{colors.mauve.dark.a5}' } }, - a6: { value: { base: '{colors.mauve.light.a6}', _dark: '{colors.mauve.dark.a6}' } }, - a7: { value: { base: '{colors.mauve.light.a7}', _dark: '{colors.mauve.dark.a7}' } }, - a8: { value: { base: '{colors.mauve.light.a8}', _dark: '{colors.mauve.dark.a8}' } }, - a9: { value: { base: '{colors.mauve.light.a9}', _dark: '{colors.mauve.dark.a9}' } }, - a10: { value: { base: '{colors.mauve.light.a10}', _dark: '{colors.mauve.dark.a10}' } }, - a11: { value: { base: '{colors.mauve.light.a11}', _dark: '{colors.mauve.dark.a11}' } }, - a12: { value: { base: '{colors.mauve.light.a12}', _dark: '{colors.mauve.dark.a12}' } }, + 1: { value: { _light: '{colors.mauve.light.1}', _dark: '{colors.mauve.dark.1}' } }, + 2: { value: { _light: '{colors.mauve.light.2}', _dark: '{colors.mauve.dark.2}' } }, + 3: { value: { _light: '{colors.mauve.light.3}', _dark: '{colors.mauve.dark.3}' } }, + 4: { value: { _light: '{colors.mauve.light.4}', _dark: '{colors.mauve.dark.4}' } }, + 5: { value: { _light: '{colors.mauve.light.5}', _dark: '{colors.mauve.dark.5}' } }, + 6: { value: { _light: '{colors.mauve.light.6}', _dark: '{colors.mauve.dark.6}' } }, + 7: { value: { _light: '{colors.mauve.light.7}', _dark: '{colors.mauve.dark.7}' } }, + 8: { value: { _light: '{colors.mauve.light.8}', _dark: '{colors.mauve.dark.8}' } }, + 9: { value: { _light: '{colors.mauve.light.9}', _dark: '{colors.mauve.dark.9}' } }, + 10: { value: { _light: '{colors.mauve.light.10}', _dark: '{colors.mauve.dark.10}' } }, + 11: { value: { _light: '{colors.mauve.light.11}', _dark: '{colors.mauve.dark.11}' } }, + 12: { value: { _light: '{colors.mauve.light.12}', _dark: '{colors.mauve.dark.12}' } }, + a1: { value: { _light: '{colors.mauve.light.a1}', _dark: '{colors.mauve.dark.a1}' } }, + a2: { value: { _light: '{colors.mauve.light.a2}', _dark: '{colors.mauve.dark.a2}' } }, + a3: { value: { _light: '{colors.mauve.light.a3}', _dark: '{colors.mauve.dark.a3}' } }, + a4: { value: { _light: '{colors.mauve.light.a4}', _dark: '{colors.mauve.dark.a4}' } }, + a5: { value: { _light: '{colors.mauve.light.a5}', _dark: '{colors.mauve.dark.a5}' } }, + a6: { value: { _light: '{colors.mauve.light.a6}', _dark: '{colors.mauve.dark.a6}' } }, + a7: { value: { _light: '{colors.mauve.light.a7}', _dark: '{colors.mauve.dark.a7}' } }, + a8: { value: { _light: '{colors.mauve.light.a8}', _dark: '{colors.mauve.dark.a8}' } }, + a9: { value: { _light: '{colors.mauve.light.a9}', _dark: '{colors.mauve.dark.a9}' } }, + a10: { value: { _light: '{colors.mauve.light.a10}', _dark: '{colors.mauve.dark.a10}' } }, + a11: { value: { _light: '{colors.mauve.light.a11}', _dark: '{colors.mauve.dark.a11}' } }, + a12: { value: { _light: '{colors.mauve.light.a12}', _dark: '{colors.mauve.dark.a12}' } }, default: { value: '{colors.mauve.9}' }, emphasized: { value: '{colors.mauve.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/mint.ts b/packages/panda/src/theme/semantic-tokens/colors/mint.ts index e3cfb3fe..9ddb66e3 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/mint.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/mint.ts @@ -1,28 +1,28 @@ export const mint = { - 1: { value: { base: '{colors.mint.light.1}', _dark: '{colors.mint.dark.1}' } }, - 2: { value: { base: '{colors.mint.light.2}', _dark: '{colors.mint.dark.2}' } }, - 3: { value: { base: '{colors.mint.light.3}', _dark: '{colors.mint.dark.3}' } }, - 4: { value: { base: '{colors.mint.light.4}', _dark: '{colors.mint.dark.4}' } }, - 5: { value: { base: '{colors.mint.light.5}', _dark: '{colors.mint.dark.5}' } }, - 6: { value: { base: '{colors.mint.light.6}', _dark: '{colors.mint.dark.6}' } }, - 7: { value: { base: '{colors.mint.light.7}', _dark: '{colors.mint.dark.7}' } }, - 8: { value: { base: '{colors.mint.light.8}', _dark: '{colors.mint.dark.8}' } }, - 9: { value: { base: '{colors.mint.light.9}', _dark: '{colors.mint.dark.9}' } }, - 10: { value: { base: '{colors.mint.light.10}', _dark: '{colors.mint.dark.10}' } }, - 11: { value: { base: '{colors.mint.light.11}', _dark: '{colors.mint.dark.11}' } }, - 12: { value: { base: '{colors.mint.light.12}', _dark: '{colors.mint.dark.12}' } }, - a1: { value: { base: '{colors.mint.light.a1}', _dark: '{colors.mint.dark.a1}' } }, - a2: { value: { base: '{colors.mint.light.a2}', _dark: '{colors.mint.dark.a2}' } }, - a3: { value: { base: '{colors.mint.light.a3}', _dark: '{colors.mint.dark.a3}' } }, - a4: { value: { base: '{colors.mint.light.a4}', _dark: '{colors.mint.dark.a4}' } }, - a5: { value: { base: '{colors.mint.light.a5}', _dark: '{colors.mint.dark.a5}' } }, - a6: { value: { base: '{colors.mint.light.a6}', _dark: '{colors.mint.dark.a6}' } }, - a7: { value: { base: '{colors.mint.light.a7}', _dark: '{colors.mint.dark.a7}' } }, - a8: { value: { base: '{colors.mint.light.a8}', _dark: '{colors.mint.dark.a8}' } }, - a9: { value: { base: '{colors.mint.light.a9}', _dark: '{colors.mint.dark.a9}' } }, - a10: { value: { base: '{colors.mint.light.a10}', _dark: '{colors.mint.dark.a10}' } }, - a11: { value: { base: '{colors.mint.light.a11}', _dark: '{colors.mint.dark.a11}' } }, - a12: { value: { base: '{colors.mint.light.a12}', _dark: '{colors.mint.dark.a12}' } }, + 1: { value: { _light: '{colors.mint.light.1}', _dark: '{colors.mint.dark.1}' } }, + 2: { value: { _light: '{colors.mint.light.2}', _dark: '{colors.mint.dark.2}' } }, + 3: { value: { _light: '{colors.mint.light.3}', _dark: '{colors.mint.dark.3}' } }, + 4: { value: { _light: '{colors.mint.light.4}', _dark: '{colors.mint.dark.4}' } }, + 5: { value: { _light: '{colors.mint.light.5}', _dark: '{colors.mint.dark.5}' } }, + 6: { value: { _light: '{colors.mint.light.6}', _dark: '{colors.mint.dark.6}' } }, + 7: { value: { _light: '{colors.mint.light.7}', _dark: '{colors.mint.dark.7}' } }, + 8: { value: { _light: '{colors.mint.light.8}', _dark: '{colors.mint.dark.8}' } }, + 9: { value: { _light: '{colors.mint.light.9}', _dark: '{colors.mint.dark.9}' } }, + 10: { value: { _light: '{colors.mint.light.10}', _dark: '{colors.mint.dark.10}' } }, + 11: { value: { _light: '{colors.mint.light.11}', _dark: '{colors.mint.dark.11}' } }, + 12: { value: { _light: '{colors.mint.light.12}', _dark: '{colors.mint.dark.12}' } }, + a1: { value: { _light: '{colors.mint.light.a1}', _dark: '{colors.mint.dark.a1}' } }, + a2: { value: { _light: '{colors.mint.light.a2}', _dark: '{colors.mint.dark.a2}' } }, + a3: { value: { _light: '{colors.mint.light.a3}', _dark: '{colors.mint.dark.a3}' } }, + a4: { value: { _light: '{colors.mint.light.a4}', _dark: '{colors.mint.dark.a4}' } }, + a5: { value: { _light: '{colors.mint.light.a5}', _dark: '{colors.mint.dark.a5}' } }, + a6: { value: { _light: '{colors.mint.light.a6}', _dark: '{colors.mint.dark.a6}' } }, + a7: { value: { _light: '{colors.mint.light.a7}', _dark: '{colors.mint.dark.a7}' } }, + a8: { value: { _light: '{colors.mint.light.a8}', _dark: '{colors.mint.dark.a8}' } }, + a9: { value: { _light: '{colors.mint.light.a9}', _dark: '{colors.mint.dark.a9}' } }, + a10: { value: { _light: '{colors.mint.light.a10}', _dark: '{colors.mint.dark.a10}' } }, + a11: { value: { _light: '{colors.mint.light.a11}', _dark: '{colors.mint.dark.a11}' } }, + a12: { value: { _light: '{colors.mint.light.a12}', _dark: '{colors.mint.dark.a12}' } }, default: { value: '{colors.mint.9}' }, emphasized: { value: '{colors.mint.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/neutral.ts b/packages/panda/src/theme/semantic-tokens/colors/neutral.ts index ab78d347..e9ea646a 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/neutral.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/neutral.ts @@ -1,31 +1,31 @@ export const neutral = { - 1: { value: { base: '{colors.neutral.light.1}', _dark: '{colors.neutral.dark.1}' } }, - 2: { value: { base: '{colors.neutral.light.2}', _dark: '{colors.neutral.dark.2}' } }, - 3: { value: { base: '{colors.neutral.light.3}', _dark: '{colors.neutral.dark.3}' } }, - 4: { value: { base: '{colors.neutral.light.4}', _dark: '{colors.neutral.dark.4}' } }, - 5: { value: { base: '{colors.neutral.light.5}', _dark: '{colors.neutral.dark.5}' } }, - 6: { value: { base: '{colors.neutral.light.6}', _dark: '{colors.neutral.dark.6}' } }, - 7: { value: { base: '{colors.neutral.light.7}', _dark: '{colors.neutral.dark.7}' } }, - 8: { value: { base: '{colors.neutral.light.8}', _dark: '{colors.neutral.dark.8}' } }, - 9: { value: { base: '{colors.neutral.light.9}', _dark: '{colors.neutral.dark.9}' } }, - 10: { value: { base: '{colors.neutral.light.10}', _dark: '{colors.neutral.dark.10}' } }, - 11: { value: { base: '{colors.neutral.light.11}', _dark: '{colors.neutral.dark.11}' } }, - 12: { value: { base: '{colors.neutral.light.12}', _dark: '{colors.neutral.dark.12}' } }, - a1: { value: { base: '{colors.neutral.light.a1}', _dark: '{colors.neutral.dark.a1}' } }, - a2: { value: { base: '{colors.neutral.light.a2}', _dark: '{colors.neutral.dark.a2}' } }, - a3: { value: { base: '{colors.neutral.light.a3}', _dark: '{colors.neutral.dark.a3}' } }, - a4: { value: { base: '{colors.neutral.light.a4}', _dark: '{colors.neutral.dark.a4}' } }, - a5: { value: { base: '{colors.neutral.light.a5}', _dark: '{colors.neutral.dark.a5}' } }, - a6: { value: { base: '{colors.neutral.light.a6}', _dark: '{colors.neutral.dark.a6}' } }, - a7: { value: { base: '{colors.neutral.light.a7}', _dark: '{colors.neutral.dark.a7}' } }, - a8: { value: { base: '{colors.neutral.light.a8}', _dark: '{colors.neutral.dark.a8}' } }, - a9: { value: { base: '{colors.neutral.light.a9}', _dark: '{colors.neutral.dark.a9}' } }, - a10: { value: { base: '{colors.neutral.light.a10}', _dark: '{colors.neutral.dark.a10}' } }, - a11: { value: { base: '{colors.neutral.light.a11}', _dark: '{colors.neutral.dark.a11}' } }, - a12: { value: { base: '{colors.neutral.light.a12}', _dark: '{colors.neutral.dark.a12}' } }, + 1: { value: { _light: '{colors.neutral.light.1}', _dark: '{colors.neutral.dark.1}' } }, + 2: { value: { _light: '{colors.neutral.light.2}', _dark: '{colors.neutral.dark.2}' } }, + 3: { value: { _light: '{colors.neutral.light.3}', _dark: '{colors.neutral.dark.3}' } }, + 4: { value: { _light: '{colors.neutral.light.4}', _dark: '{colors.neutral.dark.4}' } }, + 5: { value: { _light: '{colors.neutral.light.5}', _dark: '{colors.neutral.dark.5}' } }, + 6: { value: { _light: '{colors.neutral.light.6}', _dark: '{colors.neutral.dark.6}' } }, + 7: { value: { _light: '{colors.neutral.light.7}', _dark: '{colors.neutral.dark.7}' } }, + 8: { value: { _light: '{colors.neutral.light.8}', _dark: '{colors.neutral.dark.8}' } }, + 9: { value: { _light: '{colors.neutral.light.9}', _dark: '{colors.neutral.dark.9}' } }, + 10: { value: { _light: '{colors.neutral.light.10}', _dark: '{colors.neutral.dark.10}' } }, + 11: { value: { _light: '{colors.neutral.light.11}', _dark: '{colors.neutral.dark.11}' } }, + 12: { value: { _light: '{colors.neutral.light.12}', _dark: '{colors.neutral.dark.12}' } }, + a1: { value: { _light: '{colors.neutral.light.a1}', _dark: '{colors.neutral.dark.a1}' } }, + a2: { value: { _light: '{colors.neutral.light.a2}', _dark: '{colors.neutral.dark.a2}' } }, + a3: { value: { _light: '{colors.neutral.light.a3}', _dark: '{colors.neutral.dark.a3}' } }, + a4: { value: { _light: '{colors.neutral.light.a4}', _dark: '{colors.neutral.dark.a4}' } }, + a5: { value: { _light: '{colors.neutral.light.a5}', _dark: '{colors.neutral.dark.a5}' } }, + a6: { value: { _light: '{colors.neutral.light.a6}', _dark: '{colors.neutral.dark.a6}' } }, + a7: { value: { _light: '{colors.neutral.light.a7}', _dark: '{colors.neutral.dark.a7}' } }, + a8: { value: { _light: '{colors.neutral.light.a8}', _dark: '{colors.neutral.dark.a8}' } }, + a9: { value: { _light: '{colors.neutral.light.a9}', _dark: '{colors.neutral.dark.a9}' } }, + a10: { value: { _light: '{colors.neutral.light.a10}', _dark: '{colors.neutral.dark.a10}' } }, + a11: { value: { _light: '{colors.neutral.light.a11}', _dark: '{colors.neutral.dark.a11}' } }, + a12: { value: { _light: '{colors.neutral.light.a12}', _dark: '{colors.neutral.dark.a12}' } }, - default: { value: { base: 'black', _dark: 'white' } }, + default: { value: { _light: 'black', _dark: 'white' } }, emphasized: { value: '{colors.gray.12}' }, - fg: { value: { base: 'white', _dark: 'black' } }, - text: { value: { base: 'black', _dark: 'white' } }, + fg: { value: { _light: 'white', _dark: 'black' } }, + text: { value: { _light: 'black', _dark: 'white' } }, } diff --git a/packages/panda/src/theme/semantic-tokens/colors/olive.ts b/packages/panda/src/theme/semantic-tokens/colors/olive.ts index 68b39430..cabcfd2c 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/olive.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/olive.ts @@ -1,28 +1,28 @@ export const olive = { - 1: { value: { base: '{colors.olive.light.1}', _dark: '{colors.olive.dark.1}' } }, - 2: { value: { base: '{colors.olive.light.2}', _dark: '{colors.olive.dark.2}' } }, - 3: { value: { base: '{colors.olive.light.3}', _dark: '{colors.olive.dark.3}' } }, - 4: { value: { base: '{colors.olive.light.4}', _dark: '{colors.olive.dark.4}' } }, - 5: { value: { base: '{colors.olive.light.5}', _dark: '{colors.olive.dark.5}' } }, - 6: { value: { base: '{colors.olive.light.6}', _dark: '{colors.olive.dark.6}' } }, - 7: { value: { base: '{colors.olive.light.7}', _dark: '{colors.olive.dark.7}' } }, - 8: { value: { base: '{colors.olive.light.8}', _dark: '{colors.olive.dark.8}' } }, - 9: { value: { base: '{colors.olive.light.9}', _dark: '{colors.olive.dark.9}' } }, - 10: { value: { base: '{colors.olive.light.10}', _dark: '{colors.olive.dark.10}' } }, - 11: { value: { base: '{colors.olive.light.11}', _dark: '{colors.olive.dark.11}' } }, - 12: { value: { base: '{colors.olive.light.12}', _dark: '{colors.olive.dark.12}' } }, - a1: { value: { base: '{colors.olive.light.a1}', _dark: '{colors.olive.dark.a1}' } }, - a2: { value: { base: '{colors.olive.light.a2}', _dark: '{colors.olive.dark.a2}' } }, - a3: { value: { base: '{colors.olive.light.a3}', _dark: '{colors.olive.dark.a3}' } }, - a4: { value: { base: '{colors.olive.light.a4}', _dark: '{colors.olive.dark.a4}' } }, - a5: { value: { base: '{colors.olive.light.a5}', _dark: '{colors.olive.dark.a5}' } }, - a6: { value: { base: '{colors.olive.light.a6}', _dark: '{colors.olive.dark.a6}' } }, - a7: { value: { base: '{colors.olive.light.a7}', _dark: '{colors.olive.dark.a7}' } }, - a8: { value: { base: '{colors.olive.light.a8}', _dark: '{colors.olive.dark.a8}' } }, - a9: { value: { base: '{colors.olive.light.a9}', _dark: '{colors.olive.dark.a9}' } }, - a10: { value: { base: '{colors.olive.light.a10}', _dark: '{colors.olive.dark.a10}' } }, - a11: { value: { base: '{colors.olive.light.a11}', _dark: '{colors.olive.dark.a11}' } }, - a12: { value: { base: '{colors.olive.light.a12}', _dark: '{colors.olive.dark.a12}' } }, + 1: { value: { _light: '{colors.olive.light.1}', _dark: '{colors.olive.dark.1}' } }, + 2: { value: { _light: '{colors.olive.light.2}', _dark: '{colors.olive.dark.2}' } }, + 3: { value: { _light: '{colors.olive.light.3}', _dark: '{colors.olive.dark.3}' } }, + 4: { value: { _light: '{colors.olive.light.4}', _dark: '{colors.olive.dark.4}' } }, + 5: { value: { _light: '{colors.olive.light.5}', _dark: '{colors.olive.dark.5}' } }, + 6: { value: { _light: '{colors.olive.light.6}', _dark: '{colors.olive.dark.6}' } }, + 7: { value: { _light: '{colors.olive.light.7}', _dark: '{colors.olive.dark.7}' } }, + 8: { value: { _light: '{colors.olive.light.8}', _dark: '{colors.olive.dark.8}' } }, + 9: { value: { _light: '{colors.olive.light.9}', _dark: '{colors.olive.dark.9}' } }, + 10: { value: { _light: '{colors.olive.light.10}', _dark: '{colors.olive.dark.10}' } }, + 11: { value: { _light: '{colors.olive.light.11}', _dark: '{colors.olive.dark.11}' } }, + 12: { value: { _light: '{colors.olive.light.12}', _dark: '{colors.olive.dark.12}' } }, + a1: { value: { _light: '{colors.olive.light.a1}', _dark: '{colors.olive.dark.a1}' } }, + a2: { value: { _light: '{colors.olive.light.a2}', _dark: '{colors.olive.dark.a2}' } }, + a3: { value: { _light: '{colors.olive.light.a3}', _dark: '{colors.olive.dark.a3}' } }, + a4: { value: { _light: '{colors.olive.light.a4}', _dark: '{colors.olive.dark.a4}' } }, + a5: { value: { _light: '{colors.olive.light.a5}', _dark: '{colors.olive.dark.a5}' } }, + a6: { value: { _light: '{colors.olive.light.a6}', _dark: '{colors.olive.dark.a6}' } }, + a7: { value: { _light: '{colors.olive.light.a7}', _dark: '{colors.olive.dark.a7}' } }, + a8: { value: { _light: '{colors.olive.light.a8}', _dark: '{colors.olive.dark.a8}' } }, + a9: { value: { _light: '{colors.olive.light.a9}', _dark: '{colors.olive.dark.a9}' } }, + a10: { value: { _light: '{colors.olive.light.a10}', _dark: '{colors.olive.dark.a10}' } }, + a11: { value: { _light: '{colors.olive.light.a11}', _dark: '{colors.olive.dark.a11}' } }, + a12: { value: { _light: '{colors.olive.light.a12}', _dark: '{colors.olive.dark.a12}' } }, default: { value: '{colors.olive.9}' }, emphasized: { value: '{colors.olive.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/orange.ts b/packages/panda/src/theme/semantic-tokens/colors/orange.ts index 52aabf90..8ef456d9 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/orange.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/orange.ts @@ -1,28 +1,28 @@ export const orange = { - 1: { value: { base: '{colors.orange.light.1}', _dark: '{colors.orange.dark.1}' } }, - 2: { value: { base: '{colors.orange.light.2}', _dark: '{colors.orange.dark.2}' } }, - 3: { value: { base: '{colors.orange.light.3}', _dark: '{colors.orange.dark.3}' } }, - 4: { value: { base: '{colors.orange.light.4}', _dark: '{colors.orange.dark.4}' } }, - 5: { value: { base: '{colors.orange.light.5}', _dark: '{colors.orange.dark.5}' } }, - 6: { value: { base: '{colors.orange.light.6}', _dark: '{colors.orange.dark.6}' } }, - 7: { value: { base: '{colors.orange.light.7}', _dark: '{colors.orange.dark.7}' } }, - 8: { value: { base: '{colors.orange.light.8}', _dark: '{colors.orange.dark.8}' } }, - 9: { value: { base: '{colors.orange.light.9}', _dark: '{colors.orange.dark.9}' } }, - 10: { value: { base: '{colors.orange.light.10}', _dark: '{colors.orange.dark.10}' } }, - 11: { value: { base: '{colors.orange.light.11}', _dark: '{colors.orange.dark.11}' } }, - 12: { value: { base: '{colors.orange.light.12}', _dark: '{colors.orange.dark.12}' } }, - a1: { value: { base: '{colors.orange.light.a1}', _dark: '{colors.orange.dark.a1}' } }, - a2: { value: { base: '{colors.orange.light.a2}', _dark: '{colors.orange.dark.a2}' } }, - a3: { value: { base: '{colors.orange.light.a3}', _dark: '{colors.orange.dark.a3}' } }, - a4: { value: { base: '{colors.orange.light.a4}', _dark: '{colors.orange.dark.a4}' } }, - a5: { value: { base: '{colors.orange.light.a5}', _dark: '{colors.orange.dark.a5}' } }, - a6: { value: { base: '{colors.orange.light.a6}', _dark: '{colors.orange.dark.a6}' } }, - a7: { value: { base: '{colors.orange.light.a7}', _dark: '{colors.orange.dark.a7}' } }, - a8: { value: { base: '{colors.orange.light.a8}', _dark: '{colors.orange.dark.a8}' } }, - a9: { value: { base: '{colors.orange.light.a9}', _dark: '{colors.orange.dark.a9}' } }, - a10: { value: { base: '{colors.orange.light.a10}', _dark: '{colors.orange.dark.a10}' } }, - a11: { value: { base: '{colors.orange.light.a11}', _dark: '{colors.orange.dark.a11}' } }, - a12: { value: { base: '{colors.orange.light.a12}', _dark: '{colors.orange.dark.a12}' } }, + 1: { value: { _light: '{colors.orange.light.1}', _dark: '{colors.orange.dark.1}' } }, + 2: { value: { _light: '{colors.orange.light.2}', _dark: '{colors.orange.dark.2}' } }, + 3: { value: { _light: '{colors.orange.light.3}', _dark: '{colors.orange.dark.3}' } }, + 4: { value: { _light: '{colors.orange.light.4}', _dark: '{colors.orange.dark.4}' } }, + 5: { value: { _light: '{colors.orange.light.5}', _dark: '{colors.orange.dark.5}' } }, + 6: { value: { _light: '{colors.orange.light.6}', _dark: '{colors.orange.dark.6}' } }, + 7: { value: { _light: '{colors.orange.light.7}', _dark: '{colors.orange.dark.7}' } }, + 8: { value: { _light: '{colors.orange.light.8}', _dark: '{colors.orange.dark.8}' } }, + 9: { value: { _light: '{colors.orange.light.9}', _dark: '{colors.orange.dark.9}' } }, + 10: { value: { _light: '{colors.orange.light.10}', _dark: '{colors.orange.dark.10}' } }, + 11: { value: { _light: '{colors.orange.light.11}', _dark: '{colors.orange.dark.11}' } }, + 12: { value: { _light: '{colors.orange.light.12}', _dark: '{colors.orange.dark.12}' } }, + a1: { value: { _light: '{colors.orange.light.a1}', _dark: '{colors.orange.dark.a1}' } }, + a2: { value: { _light: '{colors.orange.light.a2}', _dark: '{colors.orange.dark.a2}' } }, + a3: { value: { _light: '{colors.orange.light.a3}', _dark: '{colors.orange.dark.a3}' } }, + a4: { value: { _light: '{colors.orange.light.a4}', _dark: '{colors.orange.dark.a4}' } }, + a5: { value: { _light: '{colors.orange.light.a5}', _dark: '{colors.orange.dark.a5}' } }, + a6: { value: { _light: '{colors.orange.light.a6}', _dark: '{colors.orange.dark.a6}' } }, + a7: { value: { _light: '{colors.orange.light.a7}', _dark: '{colors.orange.dark.a7}' } }, + a8: { value: { _light: '{colors.orange.light.a8}', _dark: '{colors.orange.dark.a8}' } }, + a9: { value: { _light: '{colors.orange.light.a9}', _dark: '{colors.orange.dark.a9}' } }, + a10: { value: { _light: '{colors.orange.light.a10}', _dark: '{colors.orange.dark.a10}' } }, + a11: { value: { _light: '{colors.orange.light.a11}', _dark: '{colors.orange.dark.a11}' } }, + a12: { value: { _light: '{colors.orange.light.a12}', _dark: '{colors.orange.dark.a12}' } }, default: { value: '{colors.orange.9}' }, emphasized: { value: '{colors.orange.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/pink.ts b/packages/panda/src/theme/semantic-tokens/colors/pink.ts index 4de7d881..d44e777e 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/pink.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/pink.ts @@ -1,28 +1,28 @@ export const pink = { - 1: { value: { base: '{colors.pink.light.1}', _dark: '{colors.pink.dark.1}' } }, - 2: { value: { base: '{colors.pink.light.2}', _dark: '{colors.pink.dark.2}' } }, - 3: { value: { base: '{colors.pink.light.3}', _dark: '{colors.pink.dark.3}' } }, - 4: { value: { base: '{colors.pink.light.4}', _dark: '{colors.pink.dark.4}' } }, - 5: { value: { base: '{colors.pink.light.5}', _dark: '{colors.pink.dark.5}' } }, - 6: { value: { base: '{colors.pink.light.6}', _dark: '{colors.pink.dark.6}' } }, - 7: { value: { base: '{colors.pink.light.7}', _dark: '{colors.pink.dark.7}' } }, - 8: { value: { base: '{colors.pink.light.8}', _dark: '{colors.pink.dark.8}' } }, - 9: { value: { base: '{colors.pink.light.9}', _dark: '{colors.pink.dark.9}' } }, - 10: { value: { base: '{colors.pink.light.10}', _dark: '{colors.pink.dark.10}' } }, - 11: { value: { base: '{colors.pink.light.11}', _dark: '{colors.pink.dark.11}' } }, - 12: { value: { base: '{colors.pink.light.12}', _dark: '{colors.pink.dark.12}' } }, - a1: { value: { base: '{colors.pink.light.a1}', _dark: '{colors.pink.dark.a1}' } }, - a2: { value: { base: '{colors.pink.light.a2}', _dark: '{colors.pink.dark.a2}' } }, - a3: { value: { base: '{colors.pink.light.a3}', _dark: '{colors.pink.dark.a3}' } }, - a4: { value: { base: '{colors.pink.light.a4}', _dark: '{colors.pink.dark.a4}' } }, - a5: { value: { base: '{colors.pink.light.a5}', _dark: '{colors.pink.dark.a5}' } }, - a6: { value: { base: '{colors.pink.light.a6}', _dark: '{colors.pink.dark.a6}' } }, - a7: { value: { base: '{colors.pink.light.a7}', _dark: '{colors.pink.dark.a7}' } }, - a8: { value: { base: '{colors.pink.light.a8}', _dark: '{colors.pink.dark.a8}' } }, - a9: { value: { base: '{colors.pink.light.a9}', _dark: '{colors.pink.dark.a9}' } }, - a10: { value: { base: '{colors.pink.light.a10}', _dark: '{colors.pink.dark.a10}' } }, - a11: { value: { base: '{colors.pink.light.a11}', _dark: '{colors.pink.dark.a11}' } }, - a12: { value: { base: '{colors.pink.light.a12}', _dark: '{colors.pink.dark.a12}' } }, + 1: { value: { _light: '{colors.pink.light.1}', _dark: '{colors.pink.dark.1}' } }, + 2: { value: { _light: '{colors.pink.light.2}', _dark: '{colors.pink.dark.2}' } }, + 3: { value: { _light: '{colors.pink.light.3}', _dark: '{colors.pink.dark.3}' } }, + 4: { value: { _light: '{colors.pink.light.4}', _dark: '{colors.pink.dark.4}' } }, + 5: { value: { _light: '{colors.pink.light.5}', _dark: '{colors.pink.dark.5}' } }, + 6: { value: { _light: '{colors.pink.light.6}', _dark: '{colors.pink.dark.6}' } }, + 7: { value: { _light: '{colors.pink.light.7}', _dark: '{colors.pink.dark.7}' } }, + 8: { value: { _light: '{colors.pink.light.8}', _dark: '{colors.pink.dark.8}' } }, + 9: { value: { _light: '{colors.pink.light.9}', _dark: '{colors.pink.dark.9}' } }, + 10: { value: { _light: '{colors.pink.light.10}', _dark: '{colors.pink.dark.10}' } }, + 11: { value: { _light: '{colors.pink.light.11}', _dark: '{colors.pink.dark.11}' } }, + 12: { value: { _light: '{colors.pink.light.12}', _dark: '{colors.pink.dark.12}' } }, + a1: { value: { _light: '{colors.pink.light.a1}', _dark: '{colors.pink.dark.a1}' } }, + a2: { value: { _light: '{colors.pink.light.a2}', _dark: '{colors.pink.dark.a2}' } }, + a3: { value: { _light: '{colors.pink.light.a3}', _dark: '{colors.pink.dark.a3}' } }, + a4: { value: { _light: '{colors.pink.light.a4}', _dark: '{colors.pink.dark.a4}' } }, + a5: { value: { _light: '{colors.pink.light.a5}', _dark: '{colors.pink.dark.a5}' } }, + a6: { value: { _light: '{colors.pink.light.a6}', _dark: '{colors.pink.dark.a6}' } }, + a7: { value: { _light: '{colors.pink.light.a7}', _dark: '{colors.pink.dark.a7}' } }, + a8: { value: { _light: '{colors.pink.light.a8}', _dark: '{colors.pink.dark.a8}' } }, + a9: { value: { _light: '{colors.pink.light.a9}', _dark: '{colors.pink.dark.a9}' } }, + a10: { value: { _light: '{colors.pink.light.a10}', _dark: '{colors.pink.dark.a10}' } }, + a11: { value: { _light: '{colors.pink.light.a11}', _dark: '{colors.pink.dark.a11}' } }, + a12: { value: { _light: '{colors.pink.light.a12}', _dark: '{colors.pink.dark.a12}' } }, default: { value: '{colors.pink.9}' }, emphasized: { value: '{colors.pink.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/plum.ts b/packages/panda/src/theme/semantic-tokens/colors/plum.ts index f7764456..19bae179 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/plum.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/plum.ts @@ -1,28 +1,28 @@ export const plum = { - 1: { value: { base: '{colors.plum.light.1}', _dark: '{colors.plum.dark.1}' } }, - 2: { value: { base: '{colors.plum.light.2}', _dark: '{colors.plum.dark.2}' } }, - 3: { value: { base: '{colors.plum.light.3}', _dark: '{colors.plum.dark.3}' } }, - 4: { value: { base: '{colors.plum.light.4}', _dark: '{colors.plum.dark.4}' } }, - 5: { value: { base: '{colors.plum.light.5}', _dark: '{colors.plum.dark.5}' } }, - 6: { value: { base: '{colors.plum.light.6}', _dark: '{colors.plum.dark.6}' } }, - 7: { value: { base: '{colors.plum.light.7}', _dark: '{colors.plum.dark.7}' } }, - 8: { value: { base: '{colors.plum.light.8}', _dark: '{colors.plum.dark.8}' } }, - 9: { value: { base: '{colors.plum.light.9}', _dark: '{colors.plum.dark.9}' } }, - 10: { value: { base: '{colors.plum.light.10}', _dark: '{colors.plum.dark.10}' } }, - 11: { value: { base: '{colors.plum.light.11}', _dark: '{colors.plum.dark.11}' } }, - 12: { value: { base: '{colors.plum.light.12}', _dark: '{colors.plum.dark.12}' } }, - a1: { value: { base: '{colors.plum.light.a1}', _dark: '{colors.plum.dark.a1}' } }, - a2: { value: { base: '{colors.plum.light.a2}', _dark: '{colors.plum.dark.a2}' } }, - a3: { value: { base: '{colors.plum.light.a3}', _dark: '{colors.plum.dark.a3}' } }, - a4: { value: { base: '{colors.plum.light.a4}', _dark: '{colors.plum.dark.a4}' } }, - a5: { value: { base: '{colors.plum.light.a5}', _dark: '{colors.plum.dark.a5}' } }, - a6: { value: { base: '{colors.plum.light.a6}', _dark: '{colors.plum.dark.a6}' } }, - a7: { value: { base: '{colors.plum.light.a7}', _dark: '{colors.plum.dark.a7}' } }, - a8: { value: { base: '{colors.plum.light.a8}', _dark: '{colors.plum.dark.a8}' } }, - a9: { value: { base: '{colors.plum.light.a9}', _dark: '{colors.plum.dark.a9}' } }, - a10: { value: { base: '{colors.plum.light.a10}', _dark: '{colors.plum.dark.a10}' } }, - a11: { value: { base: '{colors.plum.light.a11}', _dark: '{colors.plum.dark.a11}' } }, - a12: { value: { base: '{colors.plum.light.a12}', _dark: '{colors.plum.dark.a12}' } }, + 1: { value: { _light: '{colors.plum.light.1}', _dark: '{colors.plum.dark.1}' } }, + 2: { value: { _light: '{colors.plum.light.2}', _dark: '{colors.plum.dark.2}' } }, + 3: { value: { _light: '{colors.plum.light.3}', _dark: '{colors.plum.dark.3}' } }, + 4: { value: { _light: '{colors.plum.light.4}', _dark: '{colors.plum.dark.4}' } }, + 5: { value: { _light: '{colors.plum.light.5}', _dark: '{colors.plum.dark.5}' } }, + 6: { value: { _light: '{colors.plum.light.6}', _dark: '{colors.plum.dark.6}' } }, + 7: { value: { _light: '{colors.plum.light.7}', _dark: '{colors.plum.dark.7}' } }, + 8: { value: { _light: '{colors.plum.light.8}', _dark: '{colors.plum.dark.8}' } }, + 9: { value: { _light: '{colors.plum.light.9}', _dark: '{colors.plum.dark.9}' } }, + 10: { value: { _light: '{colors.plum.light.10}', _dark: '{colors.plum.dark.10}' } }, + 11: { value: { _light: '{colors.plum.light.11}', _dark: '{colors.plum.dark.11}' } }, + 12: { value: { _light: '{colors.plum.light.12}', _dark: '{colors.plum.dark.12}' } }, + a1: { value: { _light: '{colors.plum.light.a1}', _dark: '{colors.plum.dark.a1}' } }, + a2: { value: { _light: '{colors.plum.light.a2}', _dark: '{colors.plum.dark.a2}' } }, + a3: { value: { _light: '{colors.plum.light.a3}', _dark: '{colors.plum.dark.a3}' } }, + a4: { value: { _light: '{colors.plum.light.a4}', _dark: '{colors.plum.dark.a4}' } }, + a5: { value: { _light: '{colors.plum.light.a5}', _dark: '{colors.plum.dark.a5}' } }, + a6: { value: { _light: '{colors.plum.light.a6}', _dark: '{colors.plum.dark.a6}' } }, + a7: { value: { _light: '{colors.plum.light.a7}', _dark: '{colors.plum.dark.a7}' } }, + a8: { value: { _light: '{colors.plum.light.a8}', _dark: '{colors.plum.dark.a8}' } }, + a9: { value: { _light: '{colors.plum.light.a9}', _dark: '{colors.plum.dark.a9}' } }, + a10: { value: { _light: '{colors.plum.light.a10}', _dark: '{colors.plum.dark.a10}' } }, + a11: { value: { _light: '{colors.plum.light.a11}', _dark: '{colors.plum.dark.a11}' } }, + a12: { value: { _light: '{colors.plum.light.a12}', _dark: '{colors.plum.dark.a12}' } }, default: { value: '{colors.plum.9}' }, emphasized: { value: '{colors.plum.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/purple.ts b/packages/panda/src/theme/semantic-tokens/colors/purple.ts index 3f0d1b0b..17346a7c 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/purple.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/purple.ts @@ -1,28 +1,28 @@ export const purple = { - 1: { value: { base: '{colors.purple.light.1}', _dark: '{colors.purple.dark.1}' } }, - 2: { value: { base: '{colors.purple.light.2}', _dark: '{colors.purple.dark.2}' } }, - 3: { value: { base: '{colors.purple.light.3}', _dark: '{colors.purple.dark.3}' } }, - 4: { value: { base: '{colors.purple.light.4}', _dark: '{colors.purple.dark.4}' } }, - 5: { value: { base: '{colors.purple.light.5}', _dark: '{colors.purple.dark.5}' } }, - 6: { value: { base: '{colors.purple.light.6}', _dark: '{colors.purple.dark.6}' } }, - 7: { value: { base: '{colors.purple.light.7}', _dark: '{colors.purple.dark.7}' } }, - 8: { value: { base: '{colors.purple.light.8}', _dark: '{colors.purple.dark.8}' } }, - 9: { value: { base: '{colors.purple.light.9}', _dark: '{colors.purple.dark.9}' } }, - 10: { value: { base: '{colors.purple.light.10}', _dark: '{colors.purple.dark.10}' } }, - 11: { value: { base: '{colors.purple.light.11}', _dark: '{colors.purple.dark.11}' } }, - 12: { value: { base: '{colors.purple.light.12}', _dark: '{colors.purple.dark.12}' } }, - a1: { value: { base: '{colors.purple.light.a1}', _dark: '{colors.purple.dark.a1}' } }, - a2: { value: { base: '{colors.purple.light.a2}', _dark: '{colors.purple.dark.a2}' } }, - a3: { value: { base: '{colors.purple.light.a3}', _dark: '{colors.purple.dark.a3}' } }, - a4: { value: { base: '{colors.purple.light.a4}', _dark: '{colors.purple.dark.a4}' } }, - a5: { value: { base: '{colors.purple.light.a5}', _dark: '{colors.purple.dark.a5}' } }, - a6: { value: { base: '{colors.purple.light.a6}', _dark: '{colors.purple.dark.a6}' } }, - a7: { value: { base: '{colors.purple.light.a7}', _dark: '{colors.purple.dark.a7}' } }, - a8: { value: { base: '{colors.purple.light.a8}', _dark: '{colors.purple.dark.a8}' } }, - a9: { value: { base: '{colors.purple.light.a9}', _dark: '{colors.purple.dark.a9}' } }, - a10: { value: { base: '{colors.purple.light.a10}', _dark: '{colors.purple.dark.a10}' } }, - a11: { value: { base: '{colors.purple.light.a11}', _dark: '{colors.purple.dark.a11}' } }, - a12: { value: { base: '{colors.purple.light.a12}', _dark: '{colors.purple.dark.a12}' } }, + 1: { value: { _light: '{colors.purple.light.1}', _dark: '{colors.purple.dark.1}' } }, + 2: { value: { _light: '{colors.purple.light.2}', _dark: '{colors.purple.dark.2}' } }, + 3: { value: { _light: '{colors.purple.light.3}', _dark: '{colors.purple.dark.3}' } }, + 4: { value: { _light: '{colors.purple.light.4}', _dark: '{colors.purple.dark.4}' } }, + 5: { value: { _light: '{colors.purple.light.5}', _dark: '{colors.purple.dark.5}' } }, + 6: { value: { _light: '{colors.purple.light.6}', _dark: '{colors.purple.dark.6}' } }, + 7: { value: { _light: '{colors.purple.light.7}', _dark: '{colors.purple.dark.7}' } }, + 8: { value: { _light: '{colors.purple.light.8}', _dark: '{colors.purple.dark.8}' } }, + 9: { value: { _light: '{colors.purple.light.9}', _dark: '{colors.purple.dark.9}' } }, + 10: { value: { _light: '{colors.purple.light.10}', _dark: '{colors.purple.dark.10}' } }, + 11: { value: { _light: '{colors.purple.light.11}', _dark: '{colors.purple.dark.11}' } }, + 12: { value: { _light: '{colors.purple.light.12}', _dark: '{colors.purple.dark.12}' } }, + a1: { value: { _light: '{colors.purple.light.a1}', _dark: '{colors.purple.dark.a1}' } }, + a2: { value: { _light: '{colors.purple.light.a2}', _dark: '{colors.purple.dark.a2}' } }, + a3: { value: { _light: '{colors.purple.light.a3}', _dark: '{colors.purple.dark.a3}' } }, + a4: { value: { _light: '{colors.purple.light.a4}', _dark: '{colors.purple.dark.a4}' } }, + a5: { value: { _light: '{colors.purple.light.a5}', _dark: '{colors.purple.dark.a5}' } }, + a6: { value: { _light: '{colors.purple.light.a6}', _dark: '{colors.purple.dark.a6}' } }, + a7: { value: { _light: '{colors.purple.light.a7}', _dark: '{colors.purple.dark.a7}' } }, + a8: { value: { _light: '{colors.purple.light.a8}', _dark: '{colors.purple.dark.a8}' } }, + a9: { value: { _light: '{colors.purple.light.a9}', _dark: '{colors.purple.dark.a9}' } }, + a10: { value: { _light: '{colors.purple.light.a10}', _dark: '{colors.purple.dark.a10}' } }, + a11: { value: { _light: '{colors.purple.light.a11}', _dark: '{colors.purple.dark.a11}' } }, + a12: { value: { _light: '{colors.purple.light.a12}', _dark: '{colors.purple.dark.a12}' } }, default: { value: '{colors.purple.9}' }, emphasized: { value: '{colors.purple.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/red.ts b/packages/panda/src/theme/semantic-tokens/colors/red.ts index 4c23c3df..deeaa158 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/red.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/red.ts @@ -1,28 +1,28 @@ export const red = { - 1: { value: { base: '{colors.red.light.1}', _dark: '{colors.red.dark.1}' } }, - 2: { value: { base: '{colors.red.light.2}', _dark: '{colors.red.dark.2}' } }, - 3: { value: { base: '{colors.red.light.3}', _dark: '{colors.red.dark.3}' } }, - 4: { value: { base: '{colors.red.light.4}', _dark: '{colors.red.dark.4}' } }, - 5: { value: { base: '{colors.red.light.5}', _dark: '{colors.red.dark.5}' } }, - 6: { value: { base: '{colors.red.light.6}', _dark: '{colors.red.dark.6}' } }, - 7: { value: { base: '{colors.red.light.7}', _dark: '{colors.red.dark.7}' } }, - 8: { value: { base: '{colors.red.light.8}', _dark: '{colors.red.dark.8}' } }, - 9: { value: { base: '{colors.red.light.9}', _dark: '{colors.red.dark.9}' } }, - 10: { value: { base: '{colors.red.light.10}', _dark: '{colors.red.dark.10}' } }, - 11: { value: { base: '{colors.red.light.11}', _dark: '{colors.red.dark.11}' } }, - 12: { value: { base: '{colors.red.light.12}', _dark: '{colors.red.dark.12}' } }, - a1: { value: { base: '{colors.red.light.a1}', _dark: '{colors.red.dark.a1}' } }, - a2: { value: { base: '{colors.red.light.a2}', _dark: '{colors.red.dark.a2}' } }, - a3: { value: { base: '{colors.red.light.a3}', _dark: '{colors.red.dark.a3}' } }, - a4: { value: { base: '{colors.red.light.a4}', _dark: '{colors.red.dark.a4}' } }, - a5: { value: { base: '{colors.red.light.a5}', _dark: '{colors.red.dark.a5}' } }, - a6: { value: { base: '{colors.red.light.a6}', _dark: '{colors.red.dark.a6}' } }, - a7: { value: { base: '{colors.red.light.a7}', _dark: '{colors.red.dark.a7}' } }, - a8: { value: { base: '{colors.red.light.a8}', _dark: '{colors.red.dark.a8}' } }, - a9: { value: { base: '{colors.red.light.a9}', _dark: '{colors.red.dark.a9}' } }, - a10: { value: { base: '{colors.red.light.a10}', _dark: '{colors.red.dark.a10}' } }, - a11: { value: { base: '{colors.red.light.a11}', _dark: '{colors.red.dark.a11}' } }, - a12: { value: { base: '{colors.red.light.a12}', _dark: '{colors.red.dark.a12}' } }, + 1: { value: { _light: '{colors.red.light.1}', _dark: '{colors.red.dark.1}' } }, + 2: { value: { _light: '{colors.red.light.2}', _dark: '{colors.red.dark.2}' } }, + 3: { value: { _light: '{colors.red.light.3}', _dark: '{colors.red.dark.3}' } }, + 4: { value: { _light: '{colors.red.light.4}', _dark: '{colors.red.dark.4}' } }, + 5: { value: { _light: '{colors.red.light.5}', _dark: '{colors.red.dark.5}' } }, + 6: { value: { _light: '{colors.red.light.6}', _dark: '{colors.red.dark.6}' } }, + 7: { value: { _light: '{colors.red.light.7}', _dark: '{colors.red.dark.7}' } }, + 8: { value: { _light: '{colors.red.light.8}', _dark: '{colors.red.dark.8}' } }, + 9: { value: { _light: '{colors.red.light.9}', _dark: '{colors.red.dark.9}' } }, + 10: { value: { _light: '{colors.red.light.10}', _dark: '{colors.red.dark.10}' } }, + 11: { value: { _light: '{colors.red.light.11}', _dark: '{colors.red.dark.11}' } }, + 12: { value: { _light: '{colors.red.light.12}', _dark: '{colors.red.dark.12}' } }, + a1: { value: { _light: '{colors.red.light.a1}', _dark: '{colors.red.dark.a1}' } }, + a2: { value: { _light: '{colors.red.light.a2}', _dark: '{colors.red.dark.a2}' } }, + a3: { value: { _light: '{colors.red.light.a3}', _dark: '{colors.red.dark.a3}' } }, + a4: { value: { _light: '{colors.red.light.a4}', _dark: '{colors.red.dark.a4}' } }, + a5: { value: { _light: '{colors.red.light.a5}', _dark: '{colors.red.dark.a5}' } }, + a6: { value: { _light: '{colors.red.light.a6}', _dark: '{colors.red.dark.a6}' } }, + a7: { value: { _light: '{colors.red.light.a7}', _dark: '{colors.red.dark.a7}' } }, + a8: { value: { _light: '{colors.red.light.a8}', _dark: '{colors.red.dark.a8}' } }, + a9: { value: { _light: '{colors.red.light.a9}', _dark: '{colors.red.dark.a9}' } }, + a10: { value: { _light: '{colors.red.light.a10}', _dark: '{colors.red.dark.a10}' } }, + a11: { value: { _light: '{colors.red.light.a11}', _dark: '{colors.red.dark.a11}' } }, + a12: { value: { _light: '{colors.red.light.a12}', _dark: '{colors.red.dark.a12}' } }, default: { value: '{colors.red.9}' }, emphasized: { value: '{colors.red.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/ruby.ts b/packages/panda/src/theme/semantic-tokens/colors/ruby.ts index 3b37aff5..10668f6c 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/ruby.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/ruby.ts @@ -1,28 +1,28 @@ export const ruby = { - 1: { value: { base: '{colors.ruby.light.1}', _dark: '{colors.ruby.dark.1}' } }, - 2: { value: { base: '{colors.ruby.light.2}', _dark: '{colors.ruby.dark.2}' } }, - 3: { value: { base: '{colors.ruby.light.3}', _dark: '{colors.ruby.dark.3}' } }, - 4: { value: { base: '{colors.ruby.light.4}', _dark: '{colors.ruby.dark.4}' } }, - 5: { value: { base: '{colors.ruby.light.5}', _dark: '{colors.ruby.dark.5}' } }, - 6: { value: { base: '{colors.ruby.light.6}', _dark: '{colors.ruby.dark.6}' } }, - 7: { value: { base: '{colors.ruby.light.7}', _dark: '{colors.ruby.dark.7}' } }, - 8: { value: { base: '{colors.ruby.light.8}', _dark: '{colors.ruby.dark.8}' } }, - 9: { value: { base: '{colors.ruby.light.9}', _dark: '{colors.ruby.dark.9}' } }, - 10: { value: { base: '{colors.ruby.light.10}', _dark: '{colors.ruby.dark.10}' } }, - 11: { value: { base: '{colors.ruby.light.11}', _dark: '{colors.ruby.dark.11}' } }, - 12: { value: { base: '{colors.ruby.light.12}', _dark: '{colors.ruby.dark.12}' } }, - a1: { value: { base: '{colors.ruby.light.a1}', _dark: '{colors.ruby.dark.a1}' } }, - a2: { value: { base: '{colors.ruby.light.a2}', _dark: '{colors.ruby.dark.a2}' } }, - a3: { value: { base: '{colors.ruby.light.a3}', _dark: '{colors.ruby.dark.a3}' } }, - a4: { value: { base: '{colors.ruby.light.a4}', _dark: '{colors.ruby.dark.a4}' } }, - a5: { value: { base: '{colors.ruby.light.a5}', _dark: '{colors.ruby.dark.a5}' } }, - a6: { value: { base: '{colors.ruby.light.a6}', _dark: '{colors.ruby.dark.a6}' } }, - a7: { value: { base: '{colors.ruby.light.a7}', _dark: '{colors.ruby.dark.a7}' } }, - a8: { value: { base: '{colors.ruby.light.a8}', _dark: '{colors.ruby.dark.a8}' } }, - a9: { value: { base: '{colors.ruby.light.a9}', _dark: '{colors.ruby.dark.a9}' } }, - a10: { value: { base: '{colors.ruby.light.a10}', _dark: '{colors.ruby.dark.a10}' } }, - a11: { value: { base: '{colors.ruby.light.a11}', _dark: '{colors.ruby.dark.a11}' } }, - a12: { value: { base: '{colors.ruby.light.a12}', _dark: '{colors.ruby.dark.a12}' } }, + 1: { value: { _light: '{colors.ruby.light.1}', _dark: '{colors.ruby.dark.1}' } }, + 2: { value: { _light: '{colors.ruby.light.2}', _dark: '{colors.ruby.dark.2}' } }, + 3: { value: { _light: '{colors.ruby.light.3}', _dark: '{colors.ruby.dark.3}' } }, + 4: { value: { _light: '{colors.ruby.light.4}', _dark: '{colors.ruby.dark.4}' } }, + 5: { value: { _light: '{colors.ruby.light.5}', _dark: '{colors.ruby.dark.5}' } }, + 6: { value: { _light: '{colors.ruby.light.6}', _dark: '{colors.ruby.dark.6}' } }, + 7: { value: { _light: '{colors.ruby.light.7}', _dark: '{colors.ruby.dark.7}' } }, + 8: { value: { _light: '{colors.ruby.light.8}', _dark: '{colors.ruby.dark.8}' } }, + 9: { value: { _light: '{colors.ruby.light.9}', _dark: '{colors.ruby.dark.9}' } }, + 10: { value: { _light: '{colors.ruby.light.10}', _dark: '{colors.ruby.dark.10}' } }, + 11: { value: { _light: '{colors.ruby.light.11}', _dark: '{colors.ruby.dark.11}' } }, + 12: { value: { _light: '{colors.ruby.light.12}', _dark: '{colors.ruby.dark.12}' } }, + a1: { value: { _light: '{colors.ruby.light.a1}', _dark: '{colors.ruby.dark.a1}' } }, + a2: { value: { _light: '{colors.ruby.light.a2}', _dark: '{colors.ruby.dark.a2}' } }, + a3: { value: { _light: '{colors.ruby.light.a3}', _dark: '{colors.ruby.dark.a3}' } }, + a4: { value: { _light: '{colors.ruby.light.a4}', _dark: '{colors.ruby.dark.a4}' } }, + a5: { value: { _light: '{colors.ruby.light.a5}', _dark: '{colors.ruby.dark.a5}' } }, + a6: { value: { _light: '{colors.ruby.light.a6}', _dark: '{colors.ruby.dark.a6}' } }, + a7: { value: { _light: '{colors.ruby.light.a7}', _dark: '{colors.ruby.dark.a7}' } }, + a8: { value: { _light: '{colors.ruby.light.a8}', _dark: '{colors.ruby.dark.a8}' } }, + a9: { value: { _light: '{colors.ruby.light.a9}', _dark: '{colors.ruby.dark.a9}' } }, + a10: { value: { _light: '{colors.ruby.light.a10}', _dark: '{colors.ruby.dark.a10}' } }, + a11: { value: { _light: '{colors.ruby.light.a11}', _dark: '{colors.ruby.dark.a11}' } }, + a12: { value: { _light: '{colors.ruby.light.a12}', _dark: '{colors.ruby.dark.a12}' } }, default: { value: '{colors.ruby.9}' }, emphasized: { value: '{colors.ruby.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/sage.ts b/packages/panda/src/theme/semantic-tokens/colors/sage.ts index c7f47ca1..37c835cc 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/sage.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/sage.ts @@ -1,28 +1,28 @@ export const sage = { - 1: { value: { base: '{colors.sage.light.1}', _dark: '{colors.sage.dark.1}' } }, - 2: { value: { base: '{colors.sage.light.2}', _dark: '{colors.sage.dark.2}' } }, - 3: { value: { base: '{colors.sage.light.3}', _dark: '{colors.sage.dark.3}' } }, - 4: { value: { base: '{colors.sage.light.4}', _dark: '{colors.sage.dark.4}' } }, - 5: { value: { base: '{colors.sage.light.5}', _dark: '{colors.sage.dark.5}' } }, - 6: { value: { base: '{colors.sage.light.6}', _dark: '{colors.sage.dark.6}' } }, - 7: { value: { base: '{colors.sage.light.7}', _dark: '{colors.sage.dark.7}' } }, - 8: { value: { base: '{colors.sage.light.8}', _dark: '{colors.sage.dark.8}' } }, - 9: { value: { base: '{colors.sage.light.9}', _dark: '{colors.sage.dark.9}' } }, - 10: { value: { base: '{colors.sage.light.10}', _dark: '{colors.sage.dark.10}' } }, - 11: { value: { base: '{colors.sage.light.11}', _dark: '{colors.sage.dark.11}' } }, - 12: { value: { base: '{colors.sage.light.12}', _dark: '{colors.sage.dark.12}' } }, - a1: { value: { base: '{colors.sage.light.a1}', _dark: '{colors.sage.dark.a1}' } }, - a2: { value: { base: '{colors.sage.light.a2}', _dark: '{colors.sage.dark.a2}' } }, - a3: { value: { base: '{colors.sage.light.a3}', _dark: '{colors.sage.dark.a3}' } }, - a4: { value: { base: '{colors.sage.light.a4}', _dark: '{colors.sage.dark.a4}' } }, - a5: { value: { base: '{colors.sage.light.a5}', _dark: '{colors.sage.dark.a5}' } }, - a6: { value: { base: '{colors.sage.light.a6}', _dark: '{colors.sage.dark.a6}' } }, - a7: { value: { base: '{colors.sage.light.a7}', _dark: '{colors.sage.dark.a7}' } }, - a8: { value: { base: '{colors.sage.light.a8}', _dark: '{colors.sage.dark.a8}' } }, - a9: { value: { base: '{colors.sage.light.a9}', _dark: '{colors.sage.dark.a9}' } }, - a10: { value: { base: '{colors.sage.light.a10}', _dark: '{colors.sage.dark.a10}' } }, - a11: { value: { base: '{colors.sage.light.a11}', _dark: '{colors.sage.dark.a11}' } }, - a12: { value: { base: '{colors.sage.light.a12}', _dark: '{colors.sage.dark.a12}' } }, + 1: { value: { _light: '{colors.sage.light.1}', _dark: '{colors.sage.dark.1}' } }, + 2: { value: { _light: '{colors.sage.light.2}', _dark: '{colors.sage.dark.2}' } }, + 3: { value: { _light: '{colors.sage.light.3}', _dark: '{colors.sage.dark.3}' } }, + 4: { value: { _light: '{colors.sage.light.4}', _dark: '{colors.sage.dark.4}' } }, + 5: { value: { _light: '{colors.sage.light.5}', _dark: '{colors.sage.dark.5}' } }, + 6: { value: { _light: '{colors.sage.light.6}', _dark: '{colors.sage.dark.6}' } }, + 7: { value: { _light: '{colors.sage.light.7}', _dark: '{colors.sage.dark.7}' } }, + 8: { value: { _light: '{colors.sage.light.8}', _dark: '{colors.sage.dark.8}' } }, + 9: { value: { _light: '{colors.sage.light.9}', _dark: '{colors.sage.dark.9}' } }, + 10: { value: { _light: '{colors.sage.light.10}', _dark: '{colors.sage.dark.10}' } }, + 11: { value: { _light: '{colors.sage.light.11}', _dark: '{colors.sage.dark.11}' } }, + 12: { value: { _light: '{colors.sage.light.12}', _dark: '{colors.sage.dark.12}' } }, + a1: { value: { _light: '{colors.sage.light.a1}', _dark: '{colors.sage.dark.a1}' } }, + a2: { value: { _light: '{colors.sage.light.a2}', _dark: '{colors.sage.dark.a2}' } }, + a3: { value: { _light: '{colors.sage.light.a3}', _dark: '{colors.sage.dark.a3}' } }, + a4: { value: { _light: '{colors.sage.light.a4}', _dark: '{colors.sage.dark.a4}' } }, + a5: { value: { _light: '{colors.sage.light.a5}', _dark: '{colors.sage.dark.a5}' } }, + a6: { value: { _light: '{colors.sage.light.a6}', _dark: '{colors.sage.dark.a6}' } }, + a7: { value: { _light: '{colors.sage.light.a7}', _dark: '{colors.sage.dark.a7}' } }, + a8: { value: { _light: '{colors.sage.light.a8}', _dark: '{colors.sage.dark.a8}' } }, + a9: { value: { _light: '{colors.sage.light.a9}', _dark: '{colors.sage.dark.a9}' } }, + a10: { value: { _light: '{colors.sage.light.a10}', _dark: '{colors.sage.dark.a10}' } }, + a11: { value: { _light: '{colors.sage.light.a11}', _dark: '{colors.sage.dark.a11}' } }, + a12: { value: { _light: '{colors.sage.light.a12}', _dark: '{colors.sage.dark.a12}' } }, default: { value: '{colors.sage.9}' }, emphasized: { value: '{colors.sage.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/sand.ts b/packages/panda/src/theme/semantic-tokens/colors/sand.ts index 62ca53f3..39eb1639 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/sand.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/sand.ts @@ -1,28 +1,28 @@ export const sand = { - 1: { value: { base: '{colors.sand.light.1}', _dark: '{colors.sand.dark.1}' } }, - 2: { value: { base: '{colors.sand.light.2}', _dark: '{colors.sand.dark.2}' } }, - 3: { value: { base: '{colors.sand.light.3}', _dark: '{colors.sand.dark.3}' } }, - 4: { value: { base: '{colors.sand.light.4}', _dark: '{colors.sand.dark.4}' } }, - 5: { value: { base: '{colors.sand.light.5}', _dark: '{colors.sand.dark.5}' } }, - 6: { value: { base: '{colors.sand.light.6}', _dark: '{colors.sand.dark.6}' } }, - 7: { value: { base: '{colors.sand.light.7}', _dark: '{colors.sand.dark.7}' } }, - 8: { value: { base: '{colors.sand.light.8}', _dark: '{colors.sand.dark.8}' } }, - 9: { value: { base: '{colors.sand.light.9}', _dark: '{colors.sand.dark.9}' } }, - 10: { value: { base: '{colors.sand.light.10}', _dark: '{colors.sand.dark.10}' } }, - 11: { value: { base: '{colors.sand.light.11}', _dark: '{colors.sand.dark.11}' } }, - 12: { value: { base: '{colors.sand.light.12}', _dark: '{colors.sand.dark.12}' } }, - a1: { value: { base: '{colors.sand.light.a1}', _dark: '{colors.sand.dark.a1}' } }, - a2: { value: { base: '{colors.sand.light.a2}', _dark: '{colors.sand.dark.a2}' } }, - a3: { value: { base: '{colors.sand.light.a3}', _dark: '{colors.sand.dark.a3}' } }, - a4: { value: { base: '{colors.sand.light.a4}', _dark: '{colors.sand.dark.a4}' } }, - a5: { value: { base: '{colors.sand.light.a5}', _dark: '{colors.sand.dark.a5}' } }, - a6: { value: { base: '{colors.sand.light.a6}', _dark: '{colors.sand.dark.a6}' } }, - a7: { value: { base: '{colors.sand.light.a7}', _dark: '{colors.sand.dark.a7}' } }, - a8: { value: { base: '{colors.sand.light.a8}', _dark: '{colors.sand.dark.a8}' } }, - a9: { value: { base: '{colors.sand.light.a9}', _dark: '{colors.sand.dark.a9}' } }, - a10: { value: { base: '{colors.sand.light.a10}', _dark: '{colors.sand.dark.a10}' } }, - a11: { value: { base: '{colors.sand.light.a11}', _dark: '{colors.sand.dark.a11}' } }, - a12: { value: { base: '{colors.sand.light.a12}', _dark: '{colors.sand.dark.a12}' } }, + 1: { value: { _light: '{colors.sand.light.1}', _dark: '{colors.sand.dark.1}' } }, + 2: { value: { _light: '{colors.sand.light.2}', _dark: '{colors.sand.dark.2}' } }, + 3: { value: { _light: '{colors.sand.light.3}', _dark: '{colors.sand.dark.3}' } }, + 4: { value: { _light: '{colors.sand.light.4}', _dark: '{colors.sand.dark.4}' } }, + 5: { value: { _light: '{colors.sand.light.5}', _dark: '{colors.sand.dark.5}' } }, + 6: { value: { _light: '{colors.sand.light.6}', _dark: '{colors.sand.dark.6}' } }, + 7: { value: { _light: '{colors.sand.light.7}', _dark: '{colors.sand.dark.7}' } }, + 8: { value: { _light: '{colors.sand.light.8}', _dark: '{colors.sand.dark.8}' } }, + 9: { value: { _light: '{colors.sand.light.9}', _dark: '{colors.sand.dark.9}' } }, + 10: { value: { _light: '{colors.sand.light.10}', _dark: '{colors.sand.dark.10}' } }, + 11: { value: { _light: '{colors.sand.light.11}', _dark: '{colors.sand.dark.11}' } }, + 12: { value: { _light: '{colors.sand.light.12}', _dark: '{colors.sand.dark.12}' } }, + a1: { value: { _light: '{colors.sand.light.a1}', _dark: '{colors.sand.dark.a1}' } }, + a2: { value: { _light: '{colors.sand.light.a2}', _dark: '{colors.sand.dark.a2}' } }, + a3: { value: { _light: '{colors.sand.light.a3}', _dark: '{colors.sand.dark.a3}' } }, + a4: { value: { _light: '{colors.sand.light.a4}', _dark: '{colors.sand.dark.a4}' } }, + a5: { value: { _light: '{colors.sand.light.a5}', _dark: '{colors.sand.dark.a5}' } }, + a6: { value: { _light: '{colors.sand.light.a6}', _dark: '{colors.sand.dark.a6}' } }, + a7: { value: { _light: '{colors.sand.light.a7}', _dark: '{colors.sand.dark.a7}' } }, + a8: { value: { _light: '{colors.sand.light.a8}', _dark: '{colors.sand.dark.a8}' } }, + a9: { value: { _light: '{colors.sand.light.a9}', _dark: '{colors.sand.dark.a9}' } }, + a10: { value: { _light: '{colors.sand.light.a10}', _dark: '{colors.sand.dark.a10}' } }, + a11: { value: { _light: '{colors.sand.light.a11}', _dark: '{colors.sand.dark.a11}' } }, + a12: { value: { _light: '{colors.sand.light.a12}', _dark: '{colors.sand.dark.a12}' } }, default: { value: '{colors.sand.9}' }, emphasized: { value: '{colors.sand.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/sky.ts b/packages/panda/src/theme/semantic-tokens/colors/sky.ts index a4955766..76c08a50 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/sky.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/sky.ts @@ -1,28 +1,28 @@ export const sky = { - 1: { value: { base: '{colors.sky.light.1}', _dark: '{colors.sky.dark.1}' } }, - 2: { value: { base: '{colors.sky.light.2}', _dark: '{colors.sky.dark.2}' } }, - 3: { value: { base: '{colors.sky.light.3}', _dark: '{colors.sky.dark.3}' } }, - 4: { value: { base: '{colors.sky.light.4}', _dark: '{colors.sky.dark.4}' } }, - 5: { value: { base: '{colors.sky.light.5}', _dark: '{colors.sky.dark.5}' } }, - 6: { value: { base: '{colors.sky.light.6}', _dark: '{colors.sky.dark.6}' } }, - 7: { value: { base: '{colors.sky.light.7}', _dark: '{colors.sky.dark.7}' } }, - 8: { value: { base: '{colors.sky.light.8}', _dark: '{colors.sky.dark.8}' } }, - 9: { value: { base: '{colors.sky.light.9}', _dark: '{colors.sky.dark.9}' } }, - 10: { value: { base: '{colors.sky.light.10}', _dark: '{colors.sky.dark.10}' } }, - 11: { value: { base: '{colors.sky.light.11}', _dark: '{colors.sky.dark.11}' } }, - 12: { value: { base: '{colors.sky.light.12}', _dark: '{colors.sky.dark.12}' } }, - a1: { value: { base: '{colors.sky.light.a1}', _dark: '{colors.sky.dark.a1}' } }, - a2: { value: { base: '{colors.sky.light.a2}', _dark: '{colors.sky.dark.a2}' } }, - a3: { value: { base: '{colors.sky.light.a3}', _dark: '{colors.sky.dark.a3}' } }, - a4: { value: { base: '{colors.sky.light.a4}', _dark: '{colors.sky.dark.a4}' } }, - a5: { value: { base: '{colors.sky.light.a5}', _dark: '{colors.sky.dark.a5}' } }, - a6: { value: { base: '{colors.sky.light.a6}', _dark: '{colors.sky.dark.a6}' } }, - a7: { value: { base: '{colors.sky.light.a7}', _dark: '{colors.sky.dark.a7}' } }, - a8: { value: { base: '{colors.sky.light.a8}', _dark: '{colors.sky.dark.a8}' } }, - a9: { value: { base: '{colors.sky.light.a9}', _dark: '{colors.sky.dark.a9}' } }, - a10: { value: { base: '{colors.sky.light.a10}', _dark: '{colors.sky.dark.a10}' } }, - a11: { value: { base: '{colors.sky.light.a11}', _dark: '{colors.sky.dark.a11}' } }, - a12: { value: { base: '{colors.sky.light.a12}', _dark: '{colors.sky.dark.a12}' } }, + 1: { value: { _light: '{colors.sky.light.1}', _dark: '{colors.sky.dark.1}' } }, + 2: { value: { _light: '{colors.sky.light.2}', _dark: '{colors.sky.dark.2}' } }, + 3: { value: { _light: '{colors.sky.light.3}', _dark: '{colors.sky.dark.3}' } }, + 4: { value: { _light: '{colors.sky.light.4}', _dark: '{colors.sky.dark.4}' } }, + 5: { value: { _light: '{colors.sky.light.5}', _dark: '{colors.sky.dark.5}' } }, + 6: { value: { _light: '{colors.sky.light.6}', _dark: '{colors.sky.dark.6}' } }, + 7: { value: { _light: '{colors.sky.light.7}', _dark: '{colors.sky.dark.7}' } }, + 8: { value: { _light: '{colors.sky.light.8}', _dark: '{colors.sky.dark.8}' } }, + 9: { value: { _light: '{colors.sky.light.9}', _dark: '{colors.sky.dark.9}' } }, + 10: { value: { _light: '{colors.sky.light.10}', _dark: '{colors.sky.dark.10}' } }, + 11: { value: { _light: '{colors.sky.light.11}', _dark: '{colors.sky.dark.11}' } }, + 12: { value: { _light: '{colors.sky.light.12}', _dark: '{colors.sky.dark.12}' } }, + a1: { value: { _light: '{colors.sky.light.a1}', _dark: '{colors.sky.dark.a1}' } }, + a2: { value: { _light: '{colors.sky.light.a2}', _dark: '{colors.sky.dark.a2}' } }, + a3: { value: { _light: '{colors.sky.light.a3}', _dark: '{colors.sky.dark.a3}' } }, + a4: { value: { _light: '{colors.sky.light.a4}', _dark: '{colors.sky.dark.a4}' } }, + a5: { value: { _light: '{colors.sky.light.a5}', _dark: '{colors.sky.dark.a5}' } }, + a6: { value: { _light: '{colors.sky.light.a6}', _dark: '{colors.sky.dark.a6}' } }, + a7: { value: { _light: '{colors.sky.light.a7}', _dark: '{colors.sky.dark.a7}' } }, + a8: { value: { _light: '{colors.sky.light.a8}', _dark: '{colors.sky.dark.a8}' } }, + a9: { value: { _light: '{colors.sky.light.a9}', _dark: '{colors.sky.dark.a9}' } }, + a10: { value: { _light: '{colors.sky.light.a10}', _dark: '{colors.sky.dark.a10}' } }, + a11: { value: { _light: '{colors.sky.light.a11}', _dark: '{colors.sky.dark.a11}' } }, + a12: { value: { _light: '{colors.sky.light.a12}', _dark: '{colors.sky.dark.a12}' } }, default: { value: '{colors.sky.9}' }, emphasized: { value: '{colors.sky.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/slate.ts b/packages/panda/src/theme/semantic-tokens/colors/slate.ts index 13b00dbb..82efda78 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/slate.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/slate.ts @@ -1,28 +1,28 @@ export const slate = { - 1: { value: { base: '{colors.slate.light.1}', _dark: '{colors.slate.dark.1}' } }, - 2: { value: { base: '{colors.slate.light.2}', _dark: '{colors.slate.dark.2}' } }, - 3: { value: { base: '{colors.slate.light.3}', _dark: '{colors.slate.dark.3}' } }, - 4: { value: { base: '{colors.slate.light.4}', _dark: '{colors.slate.dark.4}' } }, - 5: { value: { base: '{colors.slate.light.5}', _dark: '{colors.slate.dark.5}' } }, - 6: { value: { base: '{colors.slate.light.6}', _dark: '{colors.slate.dark.6}' } }, - 7: { value: { base: '{colors.slate.light.7}', _dark: '{colors.slate.dark.7}' } }, - 8: { value: { base: '{colors.slate.light.8}', _dark: '{colors.slate.dark.8}' } }, - 9: { value: { base: '{colors.slate.light.9}', _dark: '{colors.slate.dark.9}' } }, - 10: { value: { base: '{colors.slate.light.10}', _dark: '{colors.slate.dark.10}' } }, - 11: { value: { base: '{colors.slate.light.11}', _dark: '{colors.slate.dark.11}' } }, - 12: { value: { base: '{colors.slate.light.12}', _dark: '{colors.slate.dark.12}' } }, - a1: { value: { base: '{colors.slate.light.a1}', _dark: '{colors.slate.dark.a1}' } }, - a2: { value: { base: '{colors.slate.light.a2}', _dark: '{colors.slate.dark.a2}' } }, - a3: { value: { base: '{colors.slate.light.a3}', _dark: '{colors.slate.dark.a3}' } }, - a4: { value: { base: '{colors.slate.light.a4}', _dark: '{colors.slate.dark.a4}' } }, - a5: { value: { base: '{colors.slate.light.a5}', _dark: '{colors.slate.dark.a5}' } }, - a6: { value: { base: '{colors.slate.light.a6}', _dark: '{colors.slate.dark.a6}' } }, - a7: { value: { base: '{colors.slate.light.a7}', _dark: '{colors.slate.dark.a7}' } }, - a8: { value: { base: '{colors.slate.light.a8}', _dark: '{colors.slate.dark.a8}' } }, - a9: { value: { base: '{colors.slate.light.a9}', _dark: '{colors.slate.dark.a9}' } }, - a10: { value: { base: '{colors.slate.light.a10}', _dark: '{colors.slate.dark.a10}' } }, - a11: { value: { base: '{colors.slate.light.a11}', _dark: '{colors.slate.dark.a11}' } }, - a12: { value: { base: '{colors.slate.light.a12}', _dark: '{colors.slate.dark.a12}' } }, + 1: { value: { _light: '{colors.slate.light.1}', _dark: '{colors.slate.dark.1}' } }, + 2: { value: { _light: '{colors.slate.light.2}', _dark: '{colors.slate.dark.2}' } }, + 3: { value: { _light: '{colors.slate.light.3}', _dark: '{colors.slate.dark.3}' } }, + 4: { value: { _light: '{colors.slate.light.4}', _dark: '{colors.slate.dark.4}' } }, + 5: { value: { _light: '{colors.slate.light.5}', _dark: '{colors.slate.dark.5}' } }, + 6: { value: { _light: '{colors.slate.light.6}', _dark: '{colors.slate.dark.6}' } }, + 7: { value: { _light: '{colors.slate.light.7}', _dark: '{colors.slate.dark.7}' } }, + 8: { value: { _light: '{colors.slate.light.8}', _dark: '{colors.slate.dark.8}' } }, + 9: { value: { _light: '{colors.slate.light.9}', _dark: '{colors.slate.dark.9}' } }, + 10: { value: { _light: '{colors.slate.light.10}', _dark: '{colors.slate.dark.10}' } }, + 11: { value: { _light: '{colors.slate.light.11}', _dark: '{colors.slate.dark.11}' } }, + 12: { value: { _light: '{colors.slate.light.12}', _dark: '{colors.slate.dark.12}' } }, + a1: { value: { _light: '{colors.slate.light.a1}', _dark: '{colors.slate.dark.a1}' } }, + a2: { value: { _light: '{colors.slate.light.a2}', _dark: '{colors.slate.dark.a2}' } }, + a3: { value: { _light: '{colors.slate.light.a3}', _dark: '{colors.slate.dark.a3}' } }, + a4: { value: { _light: '{colors.slate.light.a4}', _dark: '{colors.slate.dark.a4}' } }, + a5: { value: { _light: '{colors.slate.light.a5}', _dark: '{colors.slate.dark.a5}' } }, + a6: { value: { _light: '{colors.slate.light.a6}', _dark: '{colors.slate.dark.a6}' } }, + a7: { value: { _light: '{colors.slate.light.a7}', _dark: '{colors.slate.dark.a7}' } }, + a8: { value: { _light: '{colors.slate.light.a8}', _dark: '{colors.slate.dark.a8}' } }, + a9: { value: { _light: '{colors.slate.light.a9}', _dark: '{colors.slate.dark.a9}' } }, + a10: { value: { _light: '{colors.slate.light.a10}', _dark: '{colors.slate.dark.a10}' } }, + a11: { value: { _light: '{colors.slate.light.a11}', _dark: '{colors.slate.dark.a11}' } }, + a12: { value: { _light: '{colors.slate.light.a12}', _dark: '{colors.slate.dark.a12}' } }, default: { value: '{colors.slate.9}' }, emphasized: { value: '{colors.slate.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/teal.ts b/packages/panda/src/theme/semantic-tokens/colors/teal.ts index 8ef8b8ca..79853790 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/teal.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/teal.ts @@ -1,28 +1,28 @@ export const teal = { - 1: { value: { base: '{colors.teal.light.1}', _dark: '{colors.teal.dark.1}' } }, - 2: { value: { base: '{colors.teal.light.2}', _dark: '{colors.teal.dark.2}' } }, - 3: { value: { base: '{colors.teal.light.3}', _dark: '{colors.teal.dark.3}' } }, - 4: { value: { base: '{colors.teal.light.4}', _dark: '{colors.teal.dark.4}' } }, - 5: { value: { base: '{colors.teal.light.5}', _dark: '{colors.teal.dark.5}' } }, - 6: { value: { base: '{colors.teal.light.6}', _dark: '{colors.teal.dark.6}' } }, - 7: { value: { base: '{colors.teal.light.7}', _dark: '{colors.teal.dark.7}' } }, - 8: { value: { base: '{colors.teal.light.8}', _dark: '{colors.teal.dark.8}' } }, - 9: { value: { base: '{colors.teal.light.9}', _dark: '{colors.teal.dark.9}' } }, - 10: { value: { base: '{colors.teal.light.10}', _dark: '{colors.teal.dark.10}' } }, - 11: { value: { base: '{colors.teal.light.11}', _dark: '{colors.teal.dark.11}' } }, - 12: { value: { base: '{colors.teal.light.12}', _dark: '{colors.teal.dark.12}' } }, - a1: { value: { base: '{colors.teal.light.a1}', _dark: '{colors.teal.dark.a1}' } }, - a2: { value: { base: '{colors.teal.light.a2}', _dark: '{colors.teal.dark.a2}' } }, - a3: { value: { base: '{colors.teal.light.a3}', _dark: '{colors.teal.dark.a3}' } }, - a4: { value: { base: '{colors.teal.light.a4}', _dark: '{colors.teal.dark.a4}' } }, - a5: { value: { base: '{colors.teal.light.a5}', _dark: '{colors.teal.dark.a5}' } }, - a6: { value: { base: '{colors.teal.light.a6}', _dark: '{colors.teal.dark.a6}' } }, - a7: { value: { base: '{colors.teal.light.a7}', _dark: '{colors.teal.dark.a7}' } }, - a8: { value: { base: '{colors.teal.light.a8}', _dark: '{colors.teal.dark.a8}' } }, - a9: { value: { base: '{colors.teal.light.a9}', _dark: '{colors.teal.dark.a9}' } }, - a10: { value: { base: '{colors.teal.light.a10}', _dark: '{colors.teal.dark.a10}' } }, - a11: { value: { base: '{colors.teal.light.a11}', _dark: '{colors.teal.dark.a11}' } }, - a12: { value: { base: '{colors.teal.light.a12}', _dark: '{colors.teal.dark.a12}' } }, + 1: { value: { _light: '{colors.teal.light.1}', _dark: '{colors.teal.dark.1}' } }, + 2: { value: { _light: '{colors.teal.light.2}', _dark: '{colors.teal.dark.2}' } }, + 3: { value: { _light: '{colors.teal.light.3}', _dark: '{colors.teal.dark.3}' } }, + 4: { value: { _light: '{colors.teal.light.4}', _dark: '{colors.teal.dark.4}' } }, + 5: { value: { _light: '{colors.teal.light.5}', _dark: '{colors.teal.dark.5}' } }, + 6: { value: { _light: '{colors.teal.light.6}', _dark: '{colors.teal.dark.6}' } }, + 7: { value: { _light: '{colors.teal.light.7}', _dark: '{colors.teal.dark.7}' } }, + 8: { value: { _light: '{colors.teal.light.8}', _dark: '{colors.teal.dark.8}' } }, + 9: { value: { _light: '{colors.teal.light.9}', _dark: '{colors.teal.dark.9}' } }, + 10: { value: { _light: '{colors.teal.light.10}', _dark: '{colors.teal.dark.10}' } }, + 11: { value: { _light: '{colors.teal.light.11}', _dark: '{colors.teal.dark.11}' } }, + 12: { value: { _light: '{colors.teal.light.12}', _dark: '{colors.teal.dark.12}' } }, + a1: { value: { _light: '{colors.teal.light.a1}', _dark: '{colors.teal.dark.a1}' } }, + a2: { value: { _light: '{colors.teal.light.a2}', _dark: '{colors.teal.dark.a2}' } }, + a3: { value: { _light: '{colors.teal.light.a3}', _dark: '{colors.teal.dark.a3}' } }, + a4: { value: { _light: '{colors.teal.light.a4}', _dark: '{colors.teal.dark.a4}' } }, + a5: { value: { _light: '{colors.teal.light.a5}', _dark: '{colors.teal.dark.a5}' } }, + a6: { value: { _light: '{colors.teal.light.a6}', _dark: '{colors.teal.dark.a6}' } }, + a7: { value: { _light: '{colors.teal.light.a7}', _dark: '{colors.teal.dark.a7}' } }, + a8: { value: { _light: '{colors.teal.light.a8}', _dark: '{colors.teal.dark.a8}' } }, + a9: { value: { _light: '{colors.teal.light.a9}', _dark: '{colors.teal.dark.a9}' } }, + a10: { value: { _light: '{colors.teal.light.a10}', _dark: '{colors.teal.dark.a10}' } }, + a11: { value: { _light: '{colors.teal.light.a11}', _dark: '{colors.teal.dark.a11}' } }, + a12: { value: { _light: '{colors.teal.light.a12}', _dark: '{colors.teal.dark.a12}' } }, default: { value: '{colors.teal.9}' }, emphasized: { value: '{colors.teal.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/tomato.ts b/packages/panda/src/theme/semantic-tokens/colors/tomato.ts index 71fa0e5e..89362d8c 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/tomato.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/tomato.ts @@ -1,28 +1,28 @@ export const tomato = { - 1: { value: { base: '{colors.tomato.light.1}', _dark: '{colors.tomato.dark.1}' } }, - 2: { value: { base: '{colors.tomato.light.2}', _dark: '{colors.tomato.dark.2}' } }, - 3: { value: { base: '{colors.tomato.light.3}', _dark: '{colors.tomato.dark.3}' } }, - 4: { value: { base: '{colors.tomato.light.4}', _dark: '{colors.tomato.dark.4}' } }, - 5: { value: { base: '{colors.tomato.light.5}', _dark: '{colors.tomato.dark.5}' } }, - 6: { value: { base: '{colors.tomato.light.6}', _dark: '{colors.tomato.dark.6}' } }, - 7: { value: { base: '{colors.tomato.light.7}', _dark: '{colors.tomato.dark.7}' } }, - 8: { value: { base: '{colors.tomato.light.8}', _dark: '{colors.tomato.dark.8}' } }, - 9: { value: { base: '{colors.tomato.light.9}', _dark: '{colors.tomato.dark.9}' } }, - 10: { value: { base: '{colors.tomato.light.10}', _dark: '{colors.tomato.dark.10}' } }, - 11: { value: { base: '{colors.tomato.light.11}', _dark: '{colors.tomato.dark.11}' } }, - 12: { value: { base: '{colors.tomato.light.12}', _dark: '{colors.tomato.dark.12}' } }, - a1: { value: { base: '{colors.tomato.light.a1}', _dark: '{colors.tomato.dark.a1}' } }, - a2: { value: { base: '{colors.tomato.light.a2}', _dark: '{colors.tomato.dark.a2}' } }, - a3: { value: { base: '{colors.tomato.light.a3}', _dark: '{colors.tomato.dark.a3}' } }, - a4: { value: { base: '{colors.tomato.light.a4}', _dark: '{colors.tomato.dark.a4}' } }, - a5: { value: { base: '{colors.tomato.light.a5}', _dark: '{colors.tomato.dark.a5}' } }, - a6: { value: { base: '{colors.tomato.light.a6}', _dark: '{colors.tomato.dark.a6}' } }, - a7: { value: { base: '{colors.tomato.light.a7}', _dark: '{colors.tomato.dark.a7}' } }, - a8: { value: { base: '{colors.tomato.light.a8}', _dark: '{colors.tomato.dark.a8}' } }, - a9: { value: { base: '{colors.tomato.light.a9}', _dark: '{colors.tomato.dark.a9}' } }, - a10: { value: { base: '{colors.tomato.light.a10}', _dark: '{colors.tomato.dark.a10}' } }, - a11: { value: { base: '{colors.tomato.light.a11}', _dark: '{colors.tomato.dark.a11}' } }, - a12: { value: { base: '{colors.tomato.light.a12}', _dark: '{colors.tomato.dark.a12}' } }, + 1: { value: { _light: '{colors.tomato.light.1}', _dark: '{colors.tomato.dark.1}' } }, + 2: { value: { _light: '{colors.tomato.light.2}', _dark: '{colors.tomato.dark.2}' } }, + 3: { value: { _light: '{colors.tomato.light.3}', _dark: '{colors.tomato.dark.3}' } }, + 4: { value: { _light: '{colors.tomato.light.4}', _dark: '{colors.tomato.dark.4}' } }, + 5: { value: { _light: '{colors.tomato.light.5}', _dark: '{colors.tomato.dark.5}' } }, + 6: { value: { _light: '{colors.tomato.light.6}', _dark: '{colors.tomato.dark.6}' } }, + 7: { value: { _light: '{colors.tomato.light.7}', _dark: '{colors.tomato.dark.7}' } }, + 8: { value: { _light: '{colors.tomato.light.8}', _dark: '{colors.tomato.dark.8}' } }, + 9: { value: { _light: '{colors.tomato.light.9}', _dark: '{colors.tomato.dark.9}' } }, + 10: { value: { _light: '{colors.tomato.light.10}', _dark: '{colors.tomato.dark.10}' } }, + 11: { value: { _light: '{colors.tomato.light.11}', _dark: '{colors.tomato.dark.11}' } }, + 12: { value: { _light: '{colors.tomato.light.12}', _dark: '{colors.tomato.dark.12}' } }, + a1: { value: { _light: '{colors.tomato.light.a1}', _dark: '{colors.tomato.dark.a1}' } }, + a2: { value: { _light: '{colors.tomato.light.a2}', _dark: '{colors.tomato.dark.a2}' } }, + a3: { value: { _light: '{colors.tomato.light.a3}', _dark: '{colors.tomato.dark.a3}' } }, + a4: { value: { _light: '{colors.tomato.light.a4}', _dark: '{colors.tomato.dark.a4}' } }, + a5: { value: { _light: '{colors.tomato.light.a5}', _dark: '{colors.tomato.dark.a5}' } }, + a6: { value: { _light: '{colors.tomato.light.a6}', _dark: '{colors.tomato.dark.a6}' } }, + a7: { value: { _light: '{colors.tomato.light.a7}', _dark: '{colors.tomato.dark.a7}' } }, + a8: { value: { _light: '{colors.tomato.light.a8}', _dark: '{colors.tomato.dark.a8}' } }, + a9: { value: { _light: '{colors.tomato.light.a9}', _dark: '{colors.tomato.dark.a9}' } }, + a10: { value: { _light: '{colors.tomato.light.a10}', _dark: '{colors.tomato.dark.a10}' } }, + a11: { value: { _light: '{colors.tomato.light.a11}', _dark: '{colors.tomato.dark.a11}' } }, + a12: { value: { _light: '{colors.tomato.light.a12}', _dark: '{colors.tomato.dark.a12}' } }, default: { value: '{colors.tomato.9}' }, emphasized: { value: '{colors.tomato.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/violet.ts b/packages/panda/src/theme/semantic-tokens/colors/violet.ts index 133f6547..3ee685d4 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/violet.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/violet.ts @@ -1,28 +1,28 @@ export const violet = { - 1: { value: { base: '{colors.violet.light.1}', _dark: '{colors.violet.dark.1}' } }, - 2: { value: { base: '{colors.violet.light.2}', _dark: '{colors.violet.dark.2}' } }, - 3: { value: { base: '{colors.violet.light.3}', _dark: '{colors.violet.dark.3}' } }, - 4: { value: { base: '{colors.violet.light.4}', _dark: '{colors.violet.dark.4}' } }, - 5: { value: { base: '{colors.violet.light.5}', _dark: '{colors.violet.dark.5}' } }, - 6: { value: { base: '{colors.violet.light.6}', _dark: '{colors.violet.dark.6}' } }, - 7: { value: { base: '{colors.violet.light.7}', _dark: '{colors.violet.dark.7}' } }, - 8: { value: { base: '{colors.violet.light.8}', _dark: '{colors.violet.dark.8}' } }, - 9: { value: { base: '{colors.violet.light.9}', _dark: '{colors.violet.dark.9}' } }, - 10: { value: { base: '{colors.violet.light.10}', _dark: '{colors.violet.dark.10}' } }, - 11: { value: { base: '{colors.violet.light.11}', _dark: '{colors.violet.dark.11}' } }, - 12: { value: { base: '{colors.violet.light.12}', _dark: '{colors.violet.dark.12}' } }, - a1: { value: { base: '{colors.violet.light.a1}', _dark: '{colors.violet.dark.a1}' } }, - a2: { value: { base: '{colors.violet.light.a2}', _dark: '{colors.violet.dark.a2}' } }, - a3: { value: { base: '{colors.violet.light.a3}', _dark: '{colors.violet.dark.a3}' } }, - a4: { value: { base: '{colors.violet.light.a4}', _dark: '{colors.violet.dark.a4}' } }, - a5: { value: { base: '{colors.violet.light.a5}', _dark: '{colors.violet.dark.a5}' } }, - a6: { value: { base: '{colors.violet.light.a6}', _dark: '{colors.violet.dark.a6}' } }, - a7: { value: { base: '{colors.violet.light.a7}', _dark: '{colors.violet.dark.a7}' } }, - a8: { value: { base: '{colors.violet.light.a8}', _dark: '{colors.violet.dark.a8}' } }, - a9: { value: { base: '{colors.violet.light.a9}', _dark: '{colors.violet.dark.a9}' } }, - a10: { value: { base: '{colors.violet.light.a10}', _dark: '{colors.violet.dark.a10}' } }, - a11: { value: { base: '{colors.violet.light.a11}', _dark: '{colors.violet.dark.a11}' } }, - a12: { value: { base: '{colors.violet.light.a12}', _dark: '{colors.violet.dark.a12}' } }, + 1: { value: { _light: '{colors.violet.light.1}', _dark: '{colors.violet.dark.1}' } }, + 2: { value: { _light: '{colors.violet.light.2}', _dark: '{colors.violet.dark.2}' } }, + 3: { value: { _light: '{colors.violet.light.3}', _dark: '{colors.violet.dark.3}' } }, + 4: { value: { _light: '{colors.violet.light.4}', _dark: '{colors.violet.dark.4}' } }, + 5: { value: { _light: '{colors.violet.light.5}', _dark: '{colors.violet.dark.5}' } }, + 6: { value: { _light: '{colors.violet.light.6}', _dark: '{colors.violet.dark.6}' } }, + 7: { value: { _light: '{colors.violet.light.7}', _dark: '{colors.violet.dark.7}' } }, + 8: { value: { _light: '{colors.violet.light.8}', _dark: '{colors.violet.dark.8}' } }, + 9: { value: { _light: '{colors.violet.light.9}', _dark: '{colors.violet.dark.9}' } }, + 10: { value: { _light: '{colors.violet.light.10}', _dark: '{colors.violet.dark.10}' } }, + 11: { value: { _light: '{colors.violet.light.11}', _dark: '{colors.violet.dark.11}' } }, + 12: { value: { _light: '{colors.violet.light.12}', _dark: '{colors.violet.dark.12}' } }, + a1: { value: { _light: '{colors.violet.light.a1}', _dark: '{colors.violet.dark.a1}' } }, + a2: { value: { _light: '{colors.violet.light.a2}', _dark: '{colors.violet.dark.a2}' } }, + a3: { value: { _light: '{colors.violet.light.a3}', _dark: '{colors.violet.dark.a3}' } }, + a4: { value: { _light: '{colors.violet.light.a4}', _dark: '{colors.violet.dark.a4}' } }, + a5: { value: { _light: '{colors.violet.light.a5}', _dark: '{colors.violet.dark.a5}' } }, + a6: { value: { _light: '{colors.violet.light.a6}', _dark: '{colors.violet.dark.a6}' } }, + a7: { value: { _light: '{colors.violet.light.a7}', _dark: '{colors.violet.dark.a7}' } }, + a8: { value: { _light: '{colors.violet.light.a8}', _dark: '{colors.violet.dark.a8}' } }, + a9: { value: { _light: '{colors.violet.light.a9}', _dark: '{colors.violet.dark.a9}' } }, + a10: { value: { _light: '{colors.violet.light.a10}', _dark: '{colors.violet.dark.a10}' } }, + a11: { value: { _light: '{colors.violet.light.a11}', _dark: '{colors.violet.dark.a11}' } }, + a12: { value: { _light: '{colors.violet.light.a12}', _dark: '{colors.violet.dark.a12}' } }, default: { value: '{colors.violet.9}' }, emphasized: { value: '{colors.violet.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/colors/yellow.ts b/packages/panda/src/theme/semantic-tokens/colors/yellow.ts index 9bfd1e04..11656fe0 100644 --- a/packages/panda/src/theme/semantic-tokens/colors/yellow.ts +++ b/packages/panda/src/theme/semantic-tokens/colors/yellow.ts @@ -1,28 +1,28 @@ export const yellow = { - 1: { value: { base: '{colors.yellow.light.1}', _dark: '{colors.yellow.dark.1}' } }, - 2: { value: { base: '{colors.yellow.light.2}', _dark: '{colors.yellow.dark.2}' } }, - 3: { value: { base: '{colors.yellow.light.3}', _dark: '{colors.yellow.dark.3}' } }, - 4: { value: { base: '{colors.yellow.light.4}', _dark: '{colors.yellow.dark.4}' } }, - 5: { value: { base: '{colors.yellow.light.5}', _dark: '{colors.yellow.dark.5}' } }, - 6: { value: { base: '{colors.yellow.light.6}', _dark: '{colors.yellow.dark.6}' } }, - 7: { value: { base: '{colors.yellow.light.7}', _dark: '{colors.yellow.dark.7}' } }, - 8: { value: { base: '{colors.yellow.light.8}', _dark: '{colors.yellow.dark.8}' } }, - 9: { value: { base: '{colors.yellow.light.9}', _dark: '{colors.yellow.dark.9}' } }, - 10: { value: { base: '{colors.yellow.light.10}', _dark: '{colors.yellow.dark.10}' } }, - 11: { value: { base: '{colors.yellow.light.11}', _dark: '{colors.yellow.dark.11}' } }, - 12: { value: { base: '{colors.yellow.light.12}', _dark: '{colors.yellow.dark.12}' } }, - a1: { value: { base: '{colors.yellow.light.a1}', _dark: '{colors.yellow.dark.a1}' } }, - a2: { value: { base: '{colors.yellow.light.a2}', _dark: '{colors.yellow.dark.a2}' } }, - a3: { value: { base: '{colors.yellow.light.a3}', _dark: '{colors.yellow.dark.a3}' } }, - a4: { value: { base: '{colors.yellow.light.a4}', _dark: '{colors.yellow.dark.a4}' } }, - a5: { value: { base: '{colors.yellow.light.a5}', _dark: '{colors.yellow.dark.a5}' } }, - a6: { value: { base: '{colors.yellow.light.a6}', _dark: '{colors.yellow.dark.a6}' } }, - a7: { value: { base: '{colors.yellow.light.a7}', _dark: '{colors.yellow.dark.a7}' } }, - a8: { value: { base: '{colors.yellow.light.a8}', _dark: '{colors.yellow.dark.a8}' } }, - a9: { value: { base: '{colors.yellow.light.a9}', _dark: '{colors.yellow.dark.a9}' } }, - a10: { value: { base: '{colors.yellow.light.a10}', _dark: '{colors.yellow.dark.a10}' } }, - a11: { value: { base: '{colors.yellow.light.a11}', _dark: '{colors.yellow.dark.a11}' } }, - a12: { value: { base: '{colors.yellow.light.a12}', _dark: '{colors.yellow.dark.a12}' } }, + 1: { value: { _light: '{colors.yellow.light.1}', _dark: '{colors.yellow.dark.1}' } }, + 2: { value: { _light: '{colors.yellow.light.2}', _dark: '{colors.yellow.dark.2}' } }, + 3: { value: { _light: '{colors.yellow.light.3}', _dark: '{colors.yellow.dark.3}' } }, + 4: { value: { _light: '{colors.yellow.light.4}', _dark: '{colors.yellow.dark.4}' } }, + 5: { value: { _light: '{colors.yellow.light.5}', _dark: '{colors.yellow.dark.5}' } }, + 6: { value: { _light: '{colors.yellow.light.6}', _dark: '{colors.yellow.dark.6}' } }, + 7: { value: { _light: '{colors.yellow.light.7}', _dark: '{colors.yellow.dark.7}' } }, + 8: { value: { _light: '{colors.yellow.light.8}', _dark: '{colors.yellow.dark.8}' } }, + 9: { value: { _light: '{colors.yellow.light.9}', _dark: '{colors.yellow.dark.9}' } }, + 10: { value: { _light: '{colors.yellow.light.10}', _dark: '{colors.yellow.dark.10}' } }, + 11: { value: { _light: '{colors.yellow.light.11}', _dark: '{colors.yellow.dark.11}' } }, + 12: { value: { _light: '{colors.yellow.light.12}', _dark: '{colors.yellow.dark.12}' } }, + a1: { value: { _light: '{colors.yellow.light.a1}', _dark: '{colors.yellow.dark.a1}' } }, + a2: { value: { _light: '{colors.yellow.light.a2}', _dark: '{colors.yellow.dark.a2}' } }, + a3: { value: { _light: '{colors.yellow.light.a3}', _dark: '{colors.yellow.dark.a3}' } }, + a4: { value: { _light: '{colors.yellow.light.a4}', _dark: '{colors.yellow.dark.a4}' } }, + a5: { value: { _light: '{colors.yellow.light.a5}', _dark: '{colors.yellow.dark.a5}' } }, + a6: { value: { _light: '{colors.yellow.light.a6}', _dark: '{colors.yellow.dark.a6}' } }, + a7: { value: { _light: '{colors.yellow.light.a7}', _dark: '{colors.yellow.dark.a7}' } }, + a8: { value: { _light: '{colors.yellow.light.a8}', _dark: '{colors.yellow.dark.a8}' } }, + a9: { value: { _light: '{colors.yellow.light.a9}', _dark: '{colors.yellow.dark.a9}' } }, + a10: { value: { _light: '{colors.yellow.light.a10}', _dark: '{colors.yellow.dark.a10}' } }, + a11: { value: { _light: '{colors.yellow.light.a11}', _dark: '{colors.yellow.dark.a11}' } }, + a12: { value: { _light: '{colors.yellow.light.a12}', _dark: '{colors.yellow.dark.a12}' } }, default: { value: '{colors.yellow.9}' }, emphasized: { value: '{colors.yellow.10}' }, diff --git a/packages/panda/src/theme/semantic-tokens/index.ts b/packages/panda/src/theme/semantic-tokens/index.ts index bb884f15..d68a2775 100644 --- a/packages/panda/src/theme/semantic-tokens/index.ts +++ b/packages/panda/src/theme/semantic-tokens/index.ts @@ -25,25 +25,25 @@ export const createSemanticTokens = (options: PresetOptions) => { gray: colors[grayColor], accent: colors[accentColor], bg: { - canvas: { value: '{colors.gray.1}' }, - default: { value: { base: 'white', _dark: '{colors.gray.2}' } }, - subtle: { value: { base: '{colors.gray.2}', _dark: '{colors.gray.3}' } }, - muted: { value: { base: '{colors.gray.3}', _dark: '{colors.gray.4}' } }, - emphasized: { value: { base: '{colors.gray.4}', _dark: '{colors.gray.5}' } }, - disabled: { value: { base: '{colors.gray.3}', _dark: '{colors.gray.4}' } }, + canvas: { value: { _light: '{colors.gray.1}', _dark: '{colors.gray.1}' } }, + default: { value: { _light: 'white', _dark: '{colors.gray.2}' } }, + subtle: { value: { _light: '{colors.gray.2}', _dark: '{colors.gray.3}' } }, + muted: { value: { _light: '{colors.gray.3}', _dark: '{colors.gray.4}' } }, + emphasized: { value: { _light: '{colors.gray.4}', _dark: '{colors.gray.5}' } }, + disabled: { value: { _light: '{colors.gray.3}', _dark: '{colors.gray.4}' } }, }, fg: { - default: { value: '{colors.gray.12}' }, - muted: { value: '{colors.gray.11}' }, - subtle: { value: '{colors.gray.10}' }, - disabled: { value: '{colors.gray.7}' }, + default: { value: { _light: '{colors.gray.12}', _dark: '{colors.gray.12}' } }, + muted: { value: { _light: '{colors.gray.11}', _dark: '{colors.gray.11}' } }, + subtle: { value: { _light: '{colors.gray.10}', _dark: '{colors.gray.10}' } }, + disabled: { value: { _light: '{colors.gray.7}', _dark: '{colors.gray.7}' } }, }, border: { - default: { value: '{colors.gray.7}' }, - muted: { value: '{colors.gray.6}' }, - subtle: { value: '{colors.gray.4}' }, - disabled: { value: '{colors.gray.5}' }, - outline: { value: '{colors.gray.a9}' }, + default: { value: { _light: '{colors.gray.7}', _dark: '{colors.gray.7}' } }, + muted: { value: { _light: '{colors.gray.6}', _dark: '{colors.gray.6}' } }, + subtle: { value: { _light: '{colors.gray.4}', _dark: '{colors.gray.4}' } }, + disabled: { value: { _light: '{colors.gray.5}', _dark: '{colors.gray.5}' } }, + outline: { value: { _light: '{colors.gray.a9}', _dark: '{colors.gray.a9}' } }, }, }, shadows, diff --git a/packages/panda/src/theme/semantic-tokens/shadows.ts b/packages/panda/src/theme/semantic-tokens/shadows.ts index 3972aeff..f6f26a99 100644 --- a/packages/panda/src/theme/semantic-tokens/shadows.ts +++ b/packages/panda/src/theme/semantic-tokens/shadows.ts @@ -3,37 +3,37 @@ import { defineSemanticTokens } from '@pandacss/dev' export const shadows = defineSemanticTokens.shadows({ xs: { value: { - base: '0px 1px 2px {colors.gray.a5}, 0px 0px 1px {colors.gray.a7}', + _light: '0px 1px 2px {colors.gray.a5}, 0px 0px 1px {colors.gray.a7}', _dark: '0px 1px 1px {colors.black.a12}, 0px 0px 1px inset {colors.gray.a7}', }, }, sm: { value: { - base: '0px 2px 4px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', + _light: '0px 2px 4px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', _dark: '0px 2px 4px {colors.black.a10}, 0px 0px 1px inset {colors.gray.a7}', }, }, md: { value: { - base: '0px 4px 8px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', + _light: '0px 4px 8px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', _dark: '0px 4px 8px {colors.black.a10}, 0px 0px 1px inset {colors.gray.a7}', }, }, lg: { value: { - base: '0px 8px 16px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', + _light: '0px 8px 16px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', _dark: '0px 8px 16px {colors.black.a10}, 0px 0px 1px inset {colors.gray.a7}', }, }, xl: { value: { - base: '0px 16px 24px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', + _light: '0px 16px 24px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', _dark: '0px 16px 24px {colors.black.a10}, 0px 0px 1px inset {colors.gray.a7}', }, }, '2xl': { value: { - base: '0px 24px 40px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', + _light: '0px 24px 40px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', _dark: '0px 24px 40px {colors.black.a10}, 0px 0px 1px inset {colors.gray.a7}', }, }, diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx index 13718dc0..075d4023 100644 --- a/website/src/app/layout.tsx +++ b/website/src/app/layout.tsx @@ -16,7 +16,7 @@ export const metadata: Metadata = { description: 'Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.', manifest: '/site.webmanifest', - keywords: ['Panda', 'Tailwind', 'CSS', 'Ark UI', 'Components', 'React', 'Solid', 'Vue'], + keywords: ['Panda', 'CSS', 'Ark UI', 'Components', 'React', 'Solid', 'Vue'], openGraph: { type: 'website', locale: 'en_US', @@ -46,7 +46,7 @@ export default function RootLayout(props: PropsWithChildren) { <Script src="https://plausible.io/js/plausible.js" data-domain="park-ui.com" /> </head> <body> - <ThemeProvider attribute="class"> + <ThemeProvider attribute="class" disableTransitionOnChange> <Navbar /> {props.children} </ThemeProvider>