feat(panda): improve light & dark mode (#373)

cschroeter · Jul 15, 2024 · 4a04460 · 4a04460
1 parent 1b47f6a
commit 4a04460
Show file tree

Hide file tree

Showing 44 changed files with 795 additions and 777 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}' },