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>