From 650e59ffe660859194c97a7174081d88d5dd0818 Mon Sep 17 00:00:00 2001
From: Jon Ambas <jon@jonambas.com>
Date: Wed, 27 Dec 2023 10:05:07 -0500
Subject: [PATCH] feat(react,panda-preset): refactor conditions to avoid flash
 of no theme (#208)

* feat(react,panda-preset): refactor conditions to avoid flash of no theme

* chore(change): add change
---
 .changeset/tough-impalas-brake.md             |   6 +
 libra/components/Preset.libra.tsx             |  33 +-
 packages/panda-preset/src/index.ts            | 336 +++++++++---------
 packages/react/src/button/Button.tsx          |  90 ++---
 packages/react/src/date-picker/DatePicker.tsx |  44 +--
 packages/react/src/dialog/Dialog.tsx          |  24 +-
 packages/react/src/drawer/Drawer.tsx          |  26 +-
 packages/react/src/select/SelectItem.tsx      |  20 +-
 packages/react/src/toast/Toast.tsx            |  34 +-
 9 files changed, 309 insertions(+), 304 deletions(-)
 create mode 100644 .changeset/tough-impalas-brake.md

diff --git a/.changeset/tough-impalas-brake.md b/.changeset/tough-impalas-brake.md
new file mode 100644
index 0000000..b90a0f5
--- /dev/null
+++ b/.changeset/tough-impalas-brake.md
@@ -0,0 +1,6 @@
+---
+"@sweatpants/panda-preset": patch
+"@sweatpants/react": patch
+---
+
+Refactor conditions to use base, \_light, and \_dark, to avoid flash of no theme
diff --git a/libra/components/Preset.libra.tsx b/libra/components/Preset.libra.tsx
index 7c9ef84..227e3bd 100644
--- a/libra/components/Preset.libra.tsx
+++ b/libra/components/Preset.libra.tsx
@@ -30,14 +30,14 @@ directory('Panda Preset', () => {
                 looksLike="h3"
                 className={css({
                   mb: '6',
-                  textTransform: 'capitalize'
+                  textTransform: 'capitalize',
                 })}
               >
                 {category}
               </Text>
               <table
                 className={css({
-                  mb: '8'
+                  mb: '8',
                 })}
               >
                 <thead>
@@ -46,7 +46,7 @@ directory('Panda Preset', () => {
                       <Text looksLike="strong">Token</Text>
                     </th>
                     <th>
-                      <Text looksLike="strong">Light Value</Text>
+                      <Text looksLike="strong">Base Value</Text>
                     </th>
                     <th>
                       <Text looksLike="strong">Dark Value</Text>
@@ -56,10 +56,9 @@ directory('Panda Preset', () => {
                 </thead>
                 <tbody>
                   {Object.keys(theme?.semanticTokens[category]).map((key) => {
-                    const v =
-                      theme?.semanticTokens[category][key]?.value?._lightScheme;
+                    const v = theme?.semanticTokens[category][key]?.value?.base;
                     const dv =
-                      theme?.semanticTokens[category][key]?.value?._darkScheme;
+                      theme?.semanticTokens[category][key]?.value?._dark;
                     return (
                       <tr key={`${category}-${key}`}>
                         <td>
@@ -69,7 +68,7 @@ directory('Panda Preset', () => {
                           <Text>
                             {v || theme?.semanticTokens[category][key]?.value}
                           </Text>
-                          {category === 'colors' ? (
+                          {category === 'colors' ?
                             <span
                               style={{
                                 display: 'inline-flex',
@@ -77,14 +76,14 @@ directory('Panda Preset', () => {
                                 width: '4.5rem',
                                 height: '1.3rem',
                                 borderRadius: '2px',
-                                border: '1px solid #ddd'
+                                border: '1px solid #ddd',
                               }}
                             />
-                          ) : null}
+                          : null}
                         </td>
                         <td>
                           <Text>{dv}</Text>
-                          {category === 'colors' ? (
+                          {category === 'colors' ?
                             <span
                               style={{
                                 display: 'inline-flex',
@@ -92,10 +91,10 @@ directory('Panda Preset', () => {
                                 width: '4.5rem',
                                 height: '1.3rem',
                                 borderRadius: '2px',
-                                border: '1px solid #ddd'
+                                border: '1px solid #ddd',
                               }}
                             />
-                          ) : null}
+                          : null}
                         </td>
                       </tr>
                     );
@@ -113,14 +112,14 @@ directory('Panda Preset', () => {
                 looksLike="h3"
                 className={css({
                   mb: '6',
-                  textTransform: 'capitalize'
+                  textTransform: 'capitalize',
                 })}
               >
                 {category}
               </Text>
               <table
                 className={css({
-                  mb: '8'
+                  mb: '8',
                 })}
               >
                 <thead>
@@ -144,7 +143,7 @@ directory('Panda Preset', () => {
                         <td>
                           <Text>{theme?.tokens[category][key]?.value}</Text>
                         </td>
-                        {category === 'colors' ? (
+                        {category === 'colors' ?
                           <td>
                             <div
                               style={{
@@ -152,11 +151,11 @@ directory('Panda Preset', () => {
                                 width: '4.5rem',
                                 height: '1.3rem',
                                 borderRadius: '2px',
-                                border: '1px solid #ddd'
+                                border: '1px solid #ddd',
                               }}
                             />
                           </td>
-                        ) : null}
+                        : null}
                       </tr>
                     );
                   })}
diff --git a/packages/panda-preset/src/index.ts b/packages/panda-preset/src/index.ts
index e5f604b..4634a73 100644
--- a/packages/panda-preset/src/index.ts
+++ b/packages/panda-preset/src/index.ts
@@ -6,12 +6,12 @@ export default definePreset({
       sm: '640px',
       md: '768px',
       lg: '1024px',
-      xl: '1280px'
+      xl: '1280px',
     },
     tokens: {
       colors: {
         white: { value: '#ffffff' },
-        black: { value: '#000000' }
+        black: { value: '#000000' },
       },
       spacing: {
         1: { value: '1px' },
@@ -23,7 +23,7 @@ export default definePreset({
         7: { value: '1.5rem' },
         8: { value: '2rem' },
         9: { value: '3rem' },
-        10: { value: '4rem' }
+        10: { value: '4rem' },
       },
       fontSizes: {
         0: { value: '0.5rem', description: '8px' },
@@ -38,250 +38,250 @@ export default definePreset({
         9: { value: '1.5rem', description: '24px' },
         10: { value: '2rem', description: '32px' },
         11: { value: '2.5rem', description: '40px' },
-        12: { value: '3rem', description: '48px' }
+        12: { value: '3rem', description: '48px' },
       },
       radii: {
         xs: { value: '3px' },
         sm: { value: '6px' },
         md: { value: '8px' },
-        xl: { value: '15px' }
+        xl: { value: '15px' },
       },
       fontWeights: {
         normal: { value: '400' },
         medium: { value: '500' },
-        bold: { value: '600' }
+        bold: { value: '600' },
       },
       fonts: {
         sans: {
           value:
-            "'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Helvetica, sans-serif"
+            "'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Helvetica, sans-serif",
         },
         mono: {
           value:
-            'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace'
-        }
-      }
+            'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace',
+        },
+      },
     },
     semanticTokens: {
       colors: {
         baseBg: {
-          value: { _lightScheme: '#f2f2f5', _darkScheme: '#18181a' }
+          value: { base: '#f2f2f5', _dark: '#18181a' },
         },
         contentBg: {
-          value: { _lightScheme: '#fcfcfd', _darkScheme: '#27282d' }
+          value: { base: '#fcfcfd', _dark: '#27282d' },
         },
         borders: {
           value: {
-            _lightScheme: '#e4e4e9',
-            _darkScheme: '#35373c'
-          }
+            base: '#e4e4e9',
+            _dark: '#35373c',
+          },
         },
-        gray1: { value: { _lightScheme: '#fcfcfd', _darkScheme: '#18181a' } },
-        gray2: { value: { _lightScheme: '#f9f9fb', _darkScheme: '#1b1b1f' } },
-        gray3: { value: { _lightScheme: '#f2f2f5', _darkScheme: '#27282d' } },
-        gray4: { value: { _lightScheme: '#ebebef', _darkScheme: '#2e3035' } },
-        gray5: { value: { _lightScheme: '#e4e4e9', _darkScheme: '#35373c' } },
-        gray6: { value: { _lightScheme: '#dddde3', _darkScheme: '#3c3f44' } },
-        gray7: { value: { _lightScheme: '#d3d4db', _darkScheme: '#464b50' } },
-        gray8: { value: { _lightScheme: '#b9bbc6', _darkScheme: '#5a6165' } },
-        gray9: { value: { _lightScheme: '#8b8d98', _darkScheme: '#696e77' } },
-        gray10: { value: { _lightScheme: '#7e808a', _darkScheme: '#7d828a' } },
-        gray11: { value: { _lightScheme: '#60646c', _darkScheme: '#adb1b8' } },
-        gray12: { value: { _lightScheme: '#1c2024', _darkScheme: '#edeef0' } },
-        red1: { value: { _lightScheme: '#fffcfc', _darkScheme: '#1f1315' } },
-        red2: { value: { _lightScheme: '#fff7f7', _darkScheme: '#291618' } },
-        red3: { value: { _lightScheme: '#ffefef', _darkScheme: '#3b191d' } },
-        red4: { value: { _lightScheme: '#ffe5e5', _darkScheme: '#481a20' } },
-        red5: { value: { _lightScheme: '#fdd8d8', _darkScheme: '#551c22' } },
-        red6: { value: { _lightScheme: '#f9c6c6', _darkScheme: '#691d25' } },
-        red7: { value: { _lightScheme: '#f3aeaf', _darkScheme: '#8c1d28' } },
-        red8: { value: { _lightScheme: '#eb9091', _darkScheme: '#d21e24' } },
-        red9: { value: { _lightScheme: '#e5484d', _darkScheme: '#e5484d' } },
-        red10: { value: { _lightScheme: '#d93d42', _darkScheme: '#f26669' } },
-        red11: { value: { _lightScheme: '#c62a2f', _darkScheme: '#ff8589' } },
-        red12: { value: { _lightScheme: '#641723', _darkScheme: '#ffd1d9' } },
-        purple1: { value: { _lightScheme: '#fdfcfe', _darkScheme: '#17151f' } },
-        purple2: { value: { _lightScheme: '#fbfaff', _darkScheme: '#1c172b' } },
-        purple3: { value: { _lightScheme: '#f5f2ff', _darkScheme: '#271f3f' } },
-        purple4: { value: { _lightScheme: '#ede9fe', _darkScheme: '#2d254c' } },
-        purple5: { value: { _lightScheme: '#e4defc', _darkScheme: '#342a58' } },
-        purple6: { value: { _lightScheme: '#d7cff9', _darkScheme: '#3d316a' } },
-        purple7: { value: { _lightScheme: '#c4b8f3', _darkScheme: '#4c3e89' } },
-        purple8: { value: { _lightScheme: '#aa99ec', _darkScheme: '#6654c0' } },
-        purple9: { value: { _lightScheme: '#6e56cf', _darkScheme: '#6e56cf' } },
+        gray1: { value: { base: '#fcfcfd', _dark: '#18181a' } },
+        gray2: { value: { base: '#f9f9fb', _dark: '#1b1b1f' } },
+        gray3: { value: { base: '#f2f2f5', _dark: '#27282d' } },
+        gray4: { value: { base: '#ebebef', _dark: '#2e3035' } },
+        gray5: { value: { base: '#e4e4e9', _dark: '#35373c' } },
+        gray6: { value: { base: '#dddde3', _dark: '#3c3f44' } },
+        gray7: { value: { base: '#d3d4db', _dark: '#464b50' } },
+        gray8: { value: { base: '#b9bbc6', _dark: '#5a6165' } },
+        gray9: { value: { base: '#8b8d98', _dark: '#696e77' } },
+        gray10: { value: { base: '#7e808a', _dark: '#7d828a' } },
+        gray11: { value: { base: '#60646c', _dark: '#adb1b8' } },
+        gray12: { value: { base: '#1c2024', _dark: '#edeef0' } },
+        red1: { value: { base: '#fffcfc', _dark: '#1f1315' } },
+        red2: { value: { base: '#fff7f7', _dark: '#291618' } },
+        red3: { value: { base: '#ffefef', _dark: '#3b191d' } },
+        red4: { value: { base: '#ffe5e5', _dark: '#481a20' } },
+        red5: { value: { base: '#fdd8d8', _dark: '#551c22' } },
+        red6: { value: { base: '#f9c6c6', _dark: '#691d25' } },
+        red7: { value: { base: '#f3aeaf', _dark: '#8c1d28' } },
+        red8: { value: { base: '#eb9091', _dark: '#d21e24' } },
+        red9: { value: { base: '#e5484d', _dark: '#e5484d' } },
+        red10: { value: { base: '#d93d42', _dark: '#f26669' } },
+        red11: { value: { base: '#c62a2f', _dark: '#ff8589' } },
+        red12: { value: { base: '#641723', _dark: '#ffd1d9' } },
+        purple1: { value: { base: '#fdfcfe', _dark: '#17151f' } },
+        purple2: { value: { base: '#fbfaff', _dark: '#1c172b' } },
+        purple3: { value: { base: '#f5f2ff', _dark: '#271f3f' } },
+        purple4: { value: { base: '#ede9fe', _dark: '#2d254c' } },
+        purple5: { value: { base: '#e4defc', _dark: '#342a58' } },
+        purple6: { value: { base: '#d7cff9', _dark: '#3d316a' } },
+        purple7: { value: { base: '#c4b8f3', _dark: '#4c3e89' } },
+        purple8: { value: { base: '#aa99ec', _dark: '#6654c0' } },
+        purple9: { value: { base: '#6e56cf', _dark: '#6e56cf' } },
         purple10: {
-          value: { _lightScheme: '#644fc1', _darkScheme: '#836add' }
+          value: { base: '#644fc1', _dark: '#836add' },
         },
         purple11: {
-          value: { _lightScheme: '#5746af', _darkScheme: '#b399ff' }
+          value: { base: '#5746af', _dark: '#b399ff' },
         },
         purple12: {
-          value: { _lightScheme: '#2f265f', _darkScheme: '#e2ddfe' }
+          value: { base: '#2f265f', _dark: '#e2ddfe' },
         },
-        blue1: { value: { _lightScheme: '#fbfdff', _darkScheme: '#0f1720' } },
-        blue2: { value: { _lightScheme: '#f5faff', _darkScheme: '#0f1b2d' } },
-        blue3: { value: { _lightScheme: '#edf6ff', _darkScheme: '#11253f' } },
-        blue4: { value: { _lightScheme: '#e1f0ff', _darkScheme: '#122b4c' } },
-        blue5: { value: { _lightScheme: '#cee7fe', _darkScheme: '#12325a' } },
-        blue6: { value: { _lightScheme: '#b7d9f8', _darkScheme: '#123d6f' } },
-        blue7: { value: { _lightScheme: '#96c7f2', _darkScheme: '#0f5096' } },
-        blue8: { value: { _lightScheme: '#5eb0ef', _darkScheme: '#1276e2' } },
-        blue9: { value: { _lightScheme: '#0091ff', _darkScheme: '#0091ff' } },
-        blue10: { value: { _lightScheme: '#0880ea', _darkScheme: '#3cabff' } },
-        blue11: { value: { _lightScheme: '#0b68cb', _darkScheme: '#6bc1ff' } },
-        blue12: { value: { _lightScheme: '#113264', _darkScheme: '#c2e5ff' } },
-        green1: { value: { _lightScheme: '#fbfefc', _darkScheme: '#0d1912' } },
-        green2: { value: { _lightScheme: '#f2fcf5', _darkScheme: '#0f1d17' } },
-        green3: { value: { _lightScheme: '#e9f9ee', _darkScheme: '#12281f' } },
-        green4: { value: { _lightScheme: '#ddf3e4', _darkScheme: '#143125' } },
-        green5: { value: { _lightScheme: '#ccebd7', _darkScheme: '#173a2a' } },
-        green6: { value: { _lightScheme: '#b4dfc4', _darkScheme: '#194633' } },
-        green7: { value: { _lightScheme: '#92ceac', _darkScheme: '#1f5e41' } },
-        green8: { value: { _lightScheme: '#5bb98c', _darkScheme: '#2c8c5e' } },
-        green9: { value: { _lightScheme: '#30a46c', _darkScheme: '#30a46c' } },
-        green10: { value: { _lightScheme: '#299764', _darkScheme: '#35b979' } },
-        green11: { value: { _lightScheme: '#18794e', _darkScheme: '#3dd68c' } },
-        green12: { value: { _lightScheme: '#193b2d', _darkScheme: '#b1f1cb' } },
-        orange1: { value: { _lightScheme: '#fefcfb', _darkScheme: '#1f1206' } },
-        orange2: { value: { _lightScheme: '#fff8f4', _darkScheme: '#271504' } },
-        orange3: { value: { _lightScheme: '#ffedd5', _darkScheme: '#341c0a' } },
-        orange4: { value: { _lightScheme: '#ffe0bb', _darkScheme: '#3f220d' } },
-        orange5: { value: { _lightScheme: '#ffd3a4', _darkScheme: '#4b2910' } },
-        orange6: { value: { _lightScheme: '#ffc291', _darkScheme: '#5d3213' } },
-        orange7: { value: { _lightScheme: '#ffaa7d', _darkScheme: '#7e4318' } },
-        orange8: { value: { _lightScheme: '#ed8a5c', _darkScheme: '#c36522' } },
-        orange9: { value: { _lightScheme: '#f76808', _darkScheme: '#f76808' } },
+        blue1: { value: { base: '#fbfdff', _dark: '#0f1720' } },
+        blue2: { value: { base: '#f5faff', _dark: '#0f1b2d' } },
+        blue3: { value: { base: '#edf6ff', _dark: '#11253f' } },
+        blue4: { value: { base: '#e1f0ff', _dark: '#122b4c' } },
+        blue5: { value: { base: '#cee7fe', _dark: '#12325a' } },
+        blue6: { value: { base: '#b7d9f8', _dark: '#123d6f' } },
+        blue7: { value: { base: '#96c7f2', _dark: '#0f5096' } },
+        blue8: { value: { base: '#5eb0ef', _dark: '#1276e2' } },
+        blue9: { value: { base: '#0091ff', _dark: '#0091ff' } },
+        blue10: { value: { base: '#0880ea', _dark: '#3cabff' } },
+        blue11: { value: { base: '#0b68cb', _dark: '#6bc1ff' } },
+        blue12: { value: { base: '#113264', _dark: '#c2e5ff' } },
+        green1: { value: { base: '#fbfefc', _dark: '#0d1912' } },
+        green2: { value: { base: '#f2fcf5', _dark: '#0f1d17' } },
+        green3: { value: { base: '#e9f9ee', _dark: '#12281f' } },
+        green4: { value: { base: '#ddf3e4', _dark: '#143125' } },
+        green5: { value: { base: '#ccebd7', _dark: '#173a2a' } },
+        green6: { value: { base: '#b4dfc4', _dark: '#194633' } },
+        green7: { value: { base: '#92ceac', _dark: '#1f5e41' } },
+        green8: { value: { base: '#5bb98c', _dark: '#2c8c5e' } },
+        green9: { value: { base: '#30a46c', _dark: '#30a46c' } },
+        green10: { value: { base: '#299764', _dark: '#35b979' } },
+        green11: { value: { base: '#18794e', _dark: '#3dd68c' } },
+        green12: { value: { base: '#193b2d', _dark: '#b1f1cb' } },
+        orange1: { value: { base: '#fefcfb', _dark: '#1f1206' } },
+        orange2: { value: { base: '#fff8f4', _dark: '#271504' } },
+        orange3: { value: { base: '#ffedd5', _dark: '#341c0a' } },
+        orange4: { value: { base: '#ffe0bb', _dark: '#3f220d' } },
+        orange5: { value: { base: '#ffd3a4', _dark: '#4b2910' } },
+        orange6: { value: { base: '#ffc291', _dark: '#5d3213' } },
+        orange7: { value: { base: '#ffaa7d', _dark: '#7e4318' } },
+        orange8: { value: { base: '#ed8a5c', _dark: '#c36522' } },
+        orange9: { value: { base: '#f76808', _dark: '#f76808' } },
         orange10: {
-          value: { _lightScheme: '#ed5f00', _darkScheme: '#ff802b' }
+          value: { base: '#ed5f00', _dark: '#ff802b' },
         },
         orange11: {
-          value: { _lightScheme: '#99543a', _darkScheme: '#ffa366' }
+          value: { base: '#99543a', _dark: '#ffa366' },
         },
         orange12: {
-          value: { _lightScheme: '#582d1d', _darkScheme: '#ffe0c2' }
+          value: { base: '#582d1d', _dark: '#ffe0c2' },
         },
-        yellow1: { value: { _lightScheme: '#fdfdf9', _darkScheme: '#1c1500' } },
-        yellow2: { value: { _lightScheme: '#fffbe0', _darkScheme: '#221a04' } },
-        yellow3: { value: { _lightScheme: '#fff8c6', _darkScheme: '#2c230a' } },
-        yellow4: { value: { _lightScheme: '#fcf3af', _darkScheme: '#342a0e' } },
-        yellow5: { value: { _lightScheme: '#f7ea9b', _darkScheme: '#3d3211' } },
-        yellow6: { value: { _lightScheme: '#ecdd85', _darkScheme: '#493d14' } },
-        yellow7: { value: { _lightScheme: '#dac56e', _darkScheme: '#615119' } },
-        yellow8: { value: { _lightScheme: '#c9aa45', _darkScheme: '#8f7d24' } },
-        yellow9: { value: { _lightScheme: '#fbe32d', _darkScheme: '#fbe32d' } },
+        yellow1: { value: { base: '#fdfdf9', _dark: '#1c1500' } },
+        yellow2: { value: { base: '#fffbe0', _dark: '#221a04' } },
+        yellow3: { value: { base: '#fff8c6', _dark: '#2c230a' } },
+        yellow4: { value: { base: '#fcf3af', _dark: '#342a0e' } },
+        yellow5: { value: { base: '#f7ea9b', _dark: '#3d3211' } },
+        yellow6: { value: { base: '#ecdd85', _dark: '#493d14' } },
+        yellow7: { value: { base: '#dac56e', _dark: '#615119' } },
+        yellow8: { value: { base: '#c9aa45', _dark: '#8f7d24' } },
+        yellow9: { value: { base: '#fbe32d', _dark: '#fbe32d' } },
         yellow10: {
-          value: { _lightScheme: '#f9da10', _darkScheme: '#fcea5c' }
+          value: { base: '#f9da10', _dark: '#fcea5c' },
         },
         yellow11: {
-          value: { _lightScheme: '#775f28', _darkScheme: '#ffee33' }
+          value: { base: '#775f28', _dark: '#ffee33' },
         },
         yellow12: {
-          value: { _lightScheme: '#473b1f', _darkScheme: '#fff5ad' }
+          value: { base: '#473b1f', _dark: '#fff5ad' },
         },
-        amber1: { value: { _lightScheme: '#fefdfb', _darkScheme: '#1f1300' } },
-        amber2: { value: { _lightScheme: '#fff9ed', _darkScheme: '#251804' } },
-        amber3: { value: { _lightScheme: '#fff3d0', _darkScheme: '#30200b' } },
-        amber4: { value: { _lightScheme: '#ffecb7', _darkScheme: '#39270f' } },
-        amber5: { value: { _lightScheme: '#ffe0a1', _darkScheme: '#432e12' } },
-        amber6: { value: { _lightScheme: '#f5d08c', _darkScheme: '#533916' } },
-        amber7: { value: { _lightScheme: '#e4bb78', _darkScheme: '#6f4d1d' } },
-        amber8: { value: { _lightScheme: '#d6a35c', _darkScheme: '#a9762a' } },
-        amber9: { value: { _lightScheme: '#ffc53d', _darkScheme: '#ffc53d' } },
-        amber10: { value: { _lightScheme: '#ffba1a', _darkScheme: '#ffcb47' } },
-        amber11: { value: { _lightScheme: '#915930', _darkScheme: '#ffcc4d' } },
-        amber12: { value: { _lightScheme: '#4f3422', _darkScheme: '#ffe7b3' } },
+        amber1: { value: { base: '#fefdfb', _dark: '#1f1300' } },
+        amber2: { value: { base: '#fff9ed', _dark: '#251804' } },
+        amber3: { value: { base: '#fff3d0', _dark: '#30200b' } },
+        amber4: { value: { base: '#ffecb7', _dark: '#39270f' } },
+        amber5: { value: { base: '#ffe0a1', _dark: '#432e12' } },
+        amber6: { value: { base: '#f5d08c', _dark: '#533916' } },
+        amber7: { value: { base: '#e4bb78', _dark: '#6f4d1d' } },
+        amber8: { value: { base: '#d6a35c', _dark: '#a9762a' } },
+        amber9: { value: { base: '#ffc53d', _dark: '#ffc53d' } },
+        amber10: { value: { base: '#ffba1a', _dark: '#ffcb47' } },
+        amber11: { value: { base: '#915930', _dark: '#ffcc4d' } },
+        amber12: { value: { base: '#4f3422', _dark: '#ffe7b3' } },
         crimson1: {
-          value: { _lightScheme: '#fffcfd', _darkScheme: '#1d1418' }
+          value: { base: '#fffcfd', _dark: '#1d1418' },
         },
         crimson2: {
-          value: { _lightScheme: '#fff7fb', _darkScheme: '#29151d' }
+          value: { base: '#fff7fb', _dark: '#29151d' },
         },
         crimson3: {
-          value: { _lightScheme: '#feeff6', _darkScheme: '#391826' }
+          value: { base: '#feeff6', _dark: '#391826' },
         },
         crimson4: {
-          value: { _lightScheme: '#fce5f0', _darkScheme: '#441a2b' }
+          value: { base: '#fce5f0', _dark: '#441a2b' },
         },
         crimson5: {
-          value: { _lightScheme: '#f9d8e7', _darkScheme: '#511c31' }
+          value: { base: '#f9d8e7', _dark: '#511c31' },
         },
         crimson6: {
-          value: { _lightScheme: '#f4c6db', _darkScheme: '#641e3a' }
+          value: { base: '#f4c6db', _dark: '#641e3a' },
         },
         crimson7: {
-          value: { _lightScheme: '#edadc8', _darkScheme: '#881f49' }
+          value: { base: '#edadc8', _dark: '#881f49' },
         },
         crimson8: {
-          value: { _lightScheme: '#e58fb1', _darkScheme: '#cf1761' }
+          value: { base: '#e58fb1', _dark: '#cf1761' },
         },
         crimson9: {
-          value: { _lightScheme: '#e93d82', _darkScheme: '#e93d82' }
+          value: { base: '#e93d82', _dark: '#e93d82' },
         },
         crimson10: {
-          value: { _lightScheme: '#dc3175', _darkScheme: '#f46396' }
+          value: { base: '#dc3175', _dark: '#f46396' },
         },
         crimson11: {
-          value: { _lightScheme: '#cb1d63', _darkScheme: '#ff85ab' }
+          value: { base: '#cb1d63', _dark: '#ff85ab' },
         },
         crimson12: {
-          value: { _lightScheme: '#621639', _darkScheme: '#fdd3e8' }
+          value: { base: '#621639', _dark: '#fdd3e8' },
         },
-        jade1: { value: { _lightScheme: '#fbfefd', _darkScheme: '#081911' } },
-        jade2: { value: { _lightScheme: '#effdf6', _darkScheme: '#0b1f16' } },
-        jade3: { value: { _lightScheme: '#e4faef', _darkScheme: '#0f291e' } },
-        jade4: { value: { _lightScheme: '#d7f4e6', _darkScheme: '#123124' } },
-        jade5: { value: { _lightScheme: '#c6ecdb', _darkScheme: '#143a2b' } },
-        jade6: { value: { _lightScheme: '#b0e0cc', _darkScheme: '#184635' } },
-        jade7: { value: { _lightScheme: '#8fcfb9', _darkScheme: '#1e5e48' } },
-        jade8: { value: { _lightScheme: '#56ba9f', _darkScheme: '#238b6f' } },
-        jade9: { value: { _lightScheme: '#29a383', _darkScheme: '#29a383' } },
-        jade10: { value: { _lightScheme: '#259678', _darkScheme: '#25ba92' } },
-        jade11: { value: { _lightScheme: '#1a7a5e', _darkScheme: '#1fd8a4' } },
-        jade12: { value: { _lightScheme: '#1d3b31', _darkScheme: '#adf0d4' } },
-        mint1: { value: { _lightScheme: '#f9fefd', _darkScheme: '#081917' } },
-        mint2: { value: { _lightScheme: '#effefa', _darkScheme: '#0a1f1d' } },
-        mint3: { value: { _lightScheme: '#ddfbf3', _darkScheme: '#0d2927' } },
-        mint4: { value: { _lightScheme: '#ccf7ec', _darkScheme: '#0e322e' } },
-        mint5: { value: { _lightScheme: '#bbeee2', _darkScheme: '#103b36' } },
-        mint6: { value: { _lightScheme: '#a6e1d3', _darkScheme: '#134842' } },
-        mint7: { value: { _lightScheme: '#87d0bf', _darkScheme: '#186057' } },
-        mint8: { value: { _lightScheme: '#51bda7', _darkScheme: '#248f7d' } },
-        mint9: { value: { _lightScheme: '#86ead4', _darkScheme: '#86ead4' } },
-        mint10: { value: { _lightScheme: '#7fe1cc', _darkScheme: '#95f3d9' } },
-        mint11: { value: { _lightScheme: '#27756a', _darkScheme: '#49dfbe' } },
-        mint12: { value: { _lightScheme: '#16433c', _darkScheme: '#c4f5e1' } },
-        indigo1: { value: { _lightScheme: '#fdfdfe', _darkScheme: '#131620' } },
-        indigo2: { value: { _lightScheme: '#f8faff', _darkScheme: '#15192d' } },
-        indigo3: { value: { _lightScheme: '#f0f4ff', _darkScheme: '#1a2242' } },
-        indigo4: { value: { _lightScheme: '#e6edfe', _darkScheme: '#1e284f' } },
-        indigo5: { value: { _lightScheme: '#d9e2fc', _darkScheme: '#202d5c' } },
-        indigo6: { value: { _lightScheme: '#c6d4f9', _darkScheme: '#24366e' } },
-        indigo7: { value: { _lightScheme: '#aec0f5', _darkScheme: '#2c438f' } },
-        indigo8: { value: { _lightScheme: '#8da4ef', _darkScheme: '#3b5dce' } },
-        indigo9: { value: { _lightScheme: '#3e63dd', _darkScheme: '#3e63dd' } },
+        jade1: { value: { base: '#fbfefd', _dark: '#081911' } },
+        jade2: { value: { base: '#effdf6', _dark: '#0b1f16' } },
+        jade3: { value: { base: '#e4faef', _dark: '#0f291e' } },
+        jade4: { value: { base: '#d7f4e6', _dark: '#123124' } },
+        jade5: { value: { base: '#c6ecdb', _dark: '#143a2b' } },
+        jade6: { value: { base: '#b0e0cc', _dark: '#184635' } },
+        jade7: { value: { base: '#8fcfb9', _dark: '#1e5e48' } },
+        jade8: { value: { base: '#56ba9f', _dark: '#238b6f' } },
+        jade9: { value: { base: '#29a383', _dark: '#29a383' } },
+        jade10: { value: { base: '#259678', _dark: '#25ba92' } },
+        jade11: { value: { base: '#1a7a5e', _dark: '#1fd8a4' } },
+        jade12: { value: { base: '#1d3b31', _dark: '#adf0d4' } },
+        mint1: { value: { base: '#f9fefd', _dark: '#081917' } },
+        mint2: { value: { base: '#effefa', _dark: '#0a1f1d' } },
+        mint3: { value: { base: '#ddfbf3', _dark: '#0d2927' } },
+        mint4: { value: { base: '#ccf7ec', _dark: '#0e322e' } },
+        mint5: { value: { base: '#bbeee2', _dark: '#103b36' } },
+        mint6: { value: { base: '#a6e1d3', _dark: '#134842' } },
+        mint7: { value: { base: '#87d0bf', _dark: '#186057' } },
+        mint8: { value: { base: '#51bda7', _dark: '#248f7d' } },
+        mint9: { value: { base: '#86ead4', _dark: '#86ead4' } },
+        mint10: { value: { base: '#7fe1cc', _dark: '#95f3d9' } },
+        mint11: { value: { base: '#27756a', _dark: '#49dfbe' } },
+        mint12: { value: { base: '#16433c', _dark: '#c4f5e1' } },
+        indigo1: { value: { base: '#fdfdfe', _dark: '#131620' } },
+        indigo2: { value: { base: '#f8faff', _dark: '#15192d' } },
+        indigo3: { value: { base: '#f0f4ff', _dark: '#1a2242' } },
+        indigo4: { value: { base: '#e6edfe', _dark: '#1e284f' } },
+        indigo5: { value: { base: '#d9e2fc', _dark: '#202d5c' } },
+        indigo6: { value: { base: '#c6d4f9', _dark: '#24366e' } },
+        indigo7: { value: { base: '#aec0f5', _dark: '#2c438f' } },
+        indigo8: { value: { base: '#8da4ef', _dark: '#3b5dce' } },
+        indigo9: { value: { base: '#3e63dd', _dark: '#3e63dd' } },
         indigo10: {
-          value: { _lightScheme: '#3a5ccc', _darkScheme: '#5c73e7' }
+          value: { base: '#3a5ccc', _dark: '#5c73e7' },
         },
         indigo11: {
-          value: { _lightScheme: '#3451b2', _darkScheme: '#99a2ff' }
+          value: { base: '#3451b2', _dark: '#99a2ff' },
         },
-        indigo12: { value: { _lightScheme: '#1f2d5c', _darkScheme: '#dddffe' } }
+        indigo12: { value: { base: '#1f2d5c', _dark: '#dddffe' } },
       },
       shadows: {
         sm: {
-          value: '0 1px 2px 0 rgba(0,0,0,0.05)'
+          value: '0 1px 2px 0 rgba(0,0,0,0.05)',
         },
         md: {
-          value: '0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)'
+          value: '0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)',
         },
         focus: {
-          value: '0 0 0 1px {colors.baseBg}, 0 0 0 3px {colors.blue9}'
-        }
-      }
-    }
+          value: '0 0 0 1px {colors.baseBg}, 0 0 0 3px {colors.blue9}',
+        },
+      },
+    },
   },
   conditions: {
-    lightScheme: '[data-color-scheme=light] &',
-    darkScheme: '[data-color-scheme=dark] &'
-  }
+    light: '[data-color-scheme=light] &',
+    dark: '[data-color-scheme=dark] &',
+  },
 });
diff --git a/packages/react/src/button/Button.tsx b/packages/react/src/button/Button.tsx
index 6c0e3a6..d0751e6 100644
--- a/packages/react/src/button/Button.tsx
+++ b/packages/react/src/button/Button.tsx
@@ -39,8 +39,8 @@ const styles = cva({
       position: 'relative',
       zIndex: '1',
       outline: 'none',
-      boxShadow: 'focus'
-    }
+      boxShadow: 'focus',
+    },
   },
   variants: {
     fullWidth: { true: { w: '100%' }, false: {} },
@@ -49,56 +49,56 @@ const styles = cva({
         fontSize: '5',
         paddingX: '5',
         height: 'calc(2.5rem)',
-        lineHeight: 'calc(2.5rem - 2px)'
+        lineHeight: 'calc(2.5rem - 2px)',
       },
       md: {
         fontSize: '4',
         paddingX: '4',
         height: 'calc(2rem)',
-        lineHeight: 'calc(2rem - 2px)'
+        lineHeight: 'calc(2rem - 2px)',
       },
       sm: {
         fontSize: '3',
         paddingX: '4',
         height: 'calc(1.75rem)',
-        lineHeight: 'calc(1.75rem - 2px)'
+        lineHeight: 'calc(1.75rem - 2px)',
       },
       xs: {
         fontSize: '2',
         paddingX: '3',
         height: 'calc(1.25rem)',
         lineHeight: 'calc(1.25rem - 2px)',
-        borderRadius: 'xs'
-      }
+        borderRadius: 'xs',
+      },
     },
     disabled: {
       true: { cursor: 'not-allowed', opacity: '0.7' },
-      false: {}
+      false: {},
     },
     selected: {
       true: {
-        zIndex: '1'
+        zIndex: '1',
       },
-      false: {}
+      false: {},
     },
     kind: {
       primary: {
-        bg: { _lightScheme: 'gray12', _darkScheme: 'white' },
-        borderColor: { _lightScheme: 'gray12', _darkScheme: 'white' },
+        bg: { base: 'gray12', _dark: 'white' },
+        borderColor: { base: 'gray12', _dark: 'white' },
         color: 'gray1',
         boxShadow: 'sm',
         '&:hover:not(:disabled)': {
-          bg: { _lightScheme: 'gray11', _darkScheme: 'gray12' },
-          borderColor: { _lightScheme: 'gray11', _darkScheme: 'gray12' }
-        }
+          bg: { base: 'gray11', _dark: 'gray12' },
+          borderColor: { base: 'gray11', _dark: 'gray12' },
+        },
       },
       destructive: {
         bg: 'red3',
         borderColor: 'red7',
         color: 'red11',
         '&:hover:not(:disabled)': {
-          bg: 'red4'
-        }
+          bg: 'red4',
+        },
       },
       neutral: {
         bg: 'transparent',
@@ -106,8 +106,8 @@ const styles = cva({
         color: 'gray12',
         boxShadow: 'sm',
         '&:hover:not(:disabled)': {
-          bg: 'gray4'
-        }
+          bg: 'gray4',
+        },
       },
       bare: {
         bg: 'transparent',
@@ -128,50 +128,50 @@ const styles = cva({
           borderColor: 'gray12',
           borderRadius: 'inherit',
           opacity: '0',
-          transition: 'opacity 0.15s'
+          transition: 'opacity 0.15s',
         },
         '&:hover:not(:disabled)': {
           bg: 'transparent',
           color: 'gray12',
           _before: {
-            opacity: '0.08'
-          }
-        }
-      }
-    }
+            opacity: '0.08',
+          },
+        },
+      },
+    },
   },
   compoundVariants: [
     {
       kind: 'neutral',
       selected: true,
       css: {
-        _lightScheme: { bg: 'blue4', color: 'blue11', borderColor: 'blue8' },
-        _darkScheme: { bg: 'blue7', color: 'blue12', borderColor: 'blue9' },
+        base: { bg: 'blue4', color: 'blue11', borderColor: 'blue8' },
+        _dark: { bg: 'blue7', color: 'blue12', borderColor: 'blue9' },
         '&:hover:not(:disabled)': {
-          _lightScheme: { bg: 'blue4', color: 'blue11', borderColor: 'blue8' },
-          _darkScheme: { bg: 'blue7', color: 'blue12', borderColor: 'blue9' },
+          base: { bg: 'blue4', color: 'blue11', borderColor: 'blue8' },
+          _dark: { bg: 'blue7', color: 'blue12', borderColor: 'blue9' },
           _before: {
-            opacity: '0.05'
-          }
-        }
-      }
+            opacity: '0.05',
+          },
+        },
+      },
     },
     {
       kind: 'bare',
       selected: true,
       css: {
-        _lightScheme: { bg: 'blue4', color: 'blue11', borderColor: 'blue4' },
-        _darkScheme: { bg: 'blue7', color: 'blue12', borderColor: 'blue7' },
+        base: { bg: 'blue4', color: 'blue11', borderColor: 'blue4' },
+        _dark: { bg: 'blue7', color: 'blue12', borderColor: 'blue7' },
         '&:hover:not(:disabled)': {
-          _lightScheme: { bg: 'blue4', color: 'blue11', borderColor: 'blue4' },
-          _darkScheme: { bg: 'blue7', color: 'blue12', borderColor: 'blue7' },
+          base: { bg: 'blue4', color: 'blue11', borderColor: 'blue4' },
+          _dark: { bg: 'blue7', color: 'blue12', borderColor: 'blue7' },
           _before: {
-            opacity: '0.05'
-          }
-        }
-      }
-    }
-  ]
+            opacity: '0.05',
+          },
+        },
+      },
+    },
+  ],
 });
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, userRef) => {
@@ -191,7 +191,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, userRef) => {
 
   const finalStyles = {
     kind: group?.kind || kind,
-    size: group?.size || size
+    size: group?.size || size,
   };
 
   const Element = asChild ? Slot : 'button';
@@ -203,7 +203,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, userRef) => {
       type={type}
       className={cx(
         styles({ ...finalStyles, disabled, selected, fullWidth }),
-        className
+        className,
       )}
       disabled={disabled}
       {...pressedProps}
diff --git a/packages/react/src/date-picker/DatePicker.tsx b/packages/react/src/date-picker/DatePicker.tsx
index e81c809..2e8074c 100644
--- a/packages/react/src/date-picker/DatePicker.tsx
+++ b/packages/react/src/date-picker/DatePicker.tsx
@@ -5,7 +5,7 @@ import {
   DayPicker,
   DayPickerSingleProps,
   useDayPicker,
-  useNavigation
+  useNavigation,
 } from 'react-day-picker';
 import { css } from '@styles/css';
 import { Button } from '../button/Button';
@@ -15,7 +15,7 @@ import {
   isAfter,
   isBefore,
   setYear,
-  subYears
+  subYears,
 } from 'date-fns';
 import { Select } from '../select/Select';
 import { Text } from '../text/Text';
@@ -37,45 +37,45 @@ const dayStyles = css({
   transition: '0.15s',
   color: 'gray12',
   '&:not(:disabled)': {
-    cursor: 'pointer'
+    cursor: 'pointer',
   },
   '&:not([aria-selected="true"]):not(:disabled)': {
     _hover: {
-      bg: 'gray5'
-    }
+      bg: 'gray5',
+    },
   },
   '&[aria-selected="true"]': {
     bg: 'blue9!',
-    color: { _lightScheme: 'blue1!', _darkScheme: 'white!' },
-    fontWeight: 'bold'
+    color: { base: 'blue1!', _dark: 'white!' },
+    fontWeight: 'bold',
   },
   _focusVisible: {
     outline: 'none',
-    boxShadow: 'focus'
-  }
+    boxShadow: 'focus',
+  },
 });
 
 const dayOutsideStyles = css({
-  color: 'gray9!'
+  color: 'gray9!',
 });
 
 const dayDisabledStyles = css({
-  color: 'gray7!'
+  color: 'gray7!',
 });
 
 const tableStyles = css({
   width: 'fit-content',
-  mt: '5'
+  mt: '5',
 });
 
 const cellStyles = css({
-  width: '30px'
+  width: '30px',
 });
 
 const headCellStyles = css({
   fontSize: '3',
   color: 'gray9',
-  pb: '3'
+  pb: '3',
 });
 
 const Caption = (): JSX.Element => {
@@ -91,7 +91,7 @@ const Caption = (): JSX.Element => {
         alignItems: 'center',
         justifyContent: 'space-between',
         width: '100%',
-        gap: '5'
+        gap: '5',
       })}
     >
       <Button
@@ -105,7 +105,7 @@ const Caption = (): JSX.Element => {
           w: '30px',
           h: '30px',
           p: '0!',
-          justifyContent: 'center'
+          justifyContent: 'center',
         })}
       >
         <ScreenReaderOnly>Previous Month</ScreenReaderOnly>
@@ -139,8 +139,8 @@ const Caption = (): JSX.Element => {
               textDecoration: 'underline',
               textDecorationStyle: 'dotted',
               textDecorationColor: 'gray9',
-              textUnderlineOffset: '4px'
-            }
+              textUnderlineOffset: '4px',
+            },
           })}
         >
           {yearItems.map((year) => {
@@ -164,7 +164,7 @@ const Caption = (): JSX.Element => {
           w: '30px',
           h: '30px',
           p: '0!',
-          justifyContent: 'center'
+          justifyContent: 'center',
         })}
       >
         <ScreenReaderOnly>Next Month</ScreenReaderOnly>
@@ -186,7 +186,7 @@ const DatePicker: FC<DatePickerProps> = (props) => {
   return (
     <div
       className={css({
-        width: 'fit-content'
+        width: 'fit-content',
       })}
     >
       <DayPicker
@@ -200,10 +200,10 @@ const DatePicker: FC<DatePickerProps> = (props) => {
           day_disabled: dayDisabledStyles,
           table: tableStyles,
           cell: cellStyles,
-          head_cell: headCellStyles
+          head_cell: headCellStyles,
         }}
         components={{
-          Caption
+          Caption,
         }}
         fromDate={fromDate}
         toDate={toDate}
diff --git a/packages/react/src/dialog/Dialog.tsx b/packages/react/src/dialog/Dialog.tsx
index 7660578..84812e9 100644
--- a/packages/react/src/dialog/Dialog.tsx
+++ b/packages/react/src/dialog/Dialog.tsx
@@ -7,7 +7,7 @@ import {
   forwardRef,
   useEffect,
   useRef,
-  useState
+  useState,
 } from 'react';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -27,7 +27,7 @@ const overlay = css({
   position: 'fixed',
   zIndex: '10',
   inset: 0,
-  background: { _lightScheme: '#00000090', _darkScheme: '#00000090' }
+  background: { base: '#00000090', _dark: '#00000090' },
 });
 
 const content = css({
@@ -44,21 +44,21 @@ const content = css({
   boxShadow: '0 0 12px 0px rgba(0,0,0,0.05)',
   p: '6',
   maxWidth: '30rem',
-  width: '100%'
+  width: '100%',
 });
 
 const close = css({
   position: 'absolute!',
   py: '4',
   right: '4',
-  top: '4'
+  top: '4',
 });
 
 const Dialog = forwardRef<HTMLDivElement, DialogProps>((props, userRef) => {
   const { children, title, trigger, defaultOpen, open, onOpenChange, ...rest } =
     props;
   const [internalOpen, setInternalOpen] = useState<boolean>(
-    defaultOpen ?? open ?? false
+    defaultOpen ?? open ?? false,
   );
 
   const ref = useRef(null) as MutableRefObject<HTMLElement | null>;
@@ -85,7 +85,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>((props, userRef) => {
     >
       <RadixDialog.Trigger asChild>{trigger}</RadixDialog.Trigger>
       <AnimatePresence>
-        {finalOpen ? (
+        {finalOpen ?
           <RadixDialog.Portal forceMount>
             <RadixDialog.Overlay asChild className={overlay}>
               <motion.div
@@ -99,18 +99,18 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>((props, userRef) => {
                 transition={{ duration: 0.25, ease: 'easeInOut' }}
                 initial={{
                   opacity: 0,
-                  transform: 'scale(0.98) translate(-50%, -50%)'
+                  transform: 'scale(0.98) translate(-50%, -50%)',
                 }}
                 animate={{
                   opacity: 1,
-                  transform: 'scale(1) translate(-50%, -50%)'
+                  transform: 'scale(1) translate(-50%, -50%)',
                 }}
                 exit={{
                   opacity: 0,
-                  transform: 'scale(0.98) translate(-50%, -50%)'
+                  transform: 'scale(0.98) translate(-50%, -50%)',
                 }}
               >
-                {title ? (
+                {title ?
                   <RadixDialog.Title asChild>
                     <Text
                       element="h2"
@@ -120,7 +120,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>((props, userRef) => {
                       {title}
                     </Text>
                   </RadixDialog.Title>
-                ) : null}
+                : null}
                 {children}
                 <RadixDialog.Close asChild>
                   <Button className={close} kind="bare" size="md">
@@ -131,7 +131,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>((props, userRef) => {
               </motion.div>
             </RadixDialog.Content>
           </RadixDialog.Portal>
-        ) : null}
+        : null}
       </AnimatePresence>
     </RadixDialog.Root>
   );
diff --git a/packages/react/src/drawer/Drawer.tsx b/packages/react/src/drawer/Drawer.tsx
index 3642c3f..56cc6a9 100644
--- a/packages/react/src/drawer/Drawer.tsx
+++ b/packages/react/src/drawer/Drawer.tsx
@@ -8,7 +8,7 @@ import {
   useEffect,
   useLayoutEffect,
   useRef,
-  useState
+  useState,
 } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -29,7 +29,7 @@ const overlay = css({
   position: 'fixed',
   zIndex: '10',
   inset: 0,
-  background: { _lightScheme: '#00000090', _darkScheme: '#00000090' }
+  background: { base: '#00000090', _dark: '#00000090' },
 });
 
 const content = css({
@@ -58,22 +58,22 @@ const content = css({
     borderTopRightRadius: '0',
     borderTopWidth: '0px',
     borderLeftWidth: '1px',
-    borderLeftColor: 'borders'
-  }
+    borderLeftColor: 'borders',
+  },
 });
 
 const close = css({
   position: 'absolute!',
   py: '4',
   right: '4',
-  top: '4'
+  top: '4',
 });
 
 const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, userRef) => {
   const { children, title, trigger, defaultOpen, open, onOpenChange, ...rest } =
     props;
   const [internalOpen, setInternalOpen] = useState<boolean>(
-    defaultOpen ?? open ?? false
+    defaultOpen ?? open ?? false,
   );
   const [isSmall, setIsSmall] = useState<boolean>(false);
   const ref = useRef(null) as MutableRefObject<HTMLElement | null>;
@@ -109,7 +109,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, userRef) => {
     >
       <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
       <AnimatePresence>
-        {finalOpen ? (
+        {finalOpen ?
           <Dialog.Portal forceMount>
             <Dialog.Overlay asChild className={overlay}>
               <motion.div
@@ -123,18 +123,18 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, userRef) => {
               <motion.div
                 initial={{
                   opacity: 0,
-                  transform: isSmall ? 'translateY(100%)' : 'translateX(100%)'
+                  transform: isSmall ? 'translateY(100%)' : 'translateX(100%)',
                 }}
                 animate={{
                   opacity: 1,
-                  transform: isSmall ? 'translateY(0)' : 'translateX(0)'
+                  transform: isSmall ? 'translateY(0)' : 'translateX(0)',
                 }}
                 exit={{
                   opacity: 0,
-                  transform: isSmall ? 'translateY(100%)' : 'translateX(100%)'
+                  transform: isSmall ? 'translateY(100%)' : 'translateX(100%)',
                 }}
               >
-                {title ? (
+                {title ?
                   <Dialog.Title asChild>
                     <Text
                       element="h2"
@@ -144,7 +144,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, userRef) => {
                       {title}
                     </Text>
                   </Dialog.Title>
-                ) : null}
+                : null}
                 {children}
                 <Dialog.Close asChild>
                   <Button className={close} kind="bare" size="md">
@@ -155,7 +155,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, userRef) => {
               </motion.div>
             </Dialog.Content>
           </Dialog.Portal>
-        ) : null}
+        : null}
       </AnimatePresence>
     </Dialog.Root>
   );
diff --git a/packages/react/src/select/SelectItem.tsx b/packages/react/src/select/SelectItem.tsx
index 4f5bd1a..509aa21 100644
--- a/packages/react/src/select/SelectItem.tsx
+++ b/packages/react/src/select/SelectItem.tsx
@@ -24,27 +24,27 @@ const itemStyles = cva({
     '&:hover, &:focus': {
       boxShadow: 'none',
       outline: 'none',
-      bg: 'gray5'
+      bg: 'gray5',
     },
     '&[data-state=checked]': {
-      _lightScheme: {
+      base: {
         borderColor: 'gray12',
         bg: 'gray12',
         color: 'gray1',
         '&:hover, &:focus': {
-          bg: 'gray12'
-        }
+          bg: 'gray12',
+        },
       },
-      _darkScheme: {
+      _dark: {
         borderColor: 'blue8',
         bg: 'blue8',
         color: 'blue12',
         '&:hover, &:focus': {
-          bg: 'blue8'
-        }
-      }
-    }
-  }
+          bg: 'blue8',
+        },
+      },
+    },
+  },
 });
 
 const SelectItem: FC<SelectItemProps> = (props) => {
diff --git a/packages/react/src/toast/Toast.tsx b/packages/react/src/toast/Toast.tsx
index 2b7fd54..dfe2ec9 100644
--- a/packages/react/src/toast/Toast.tsx
+++ b/packages/react/src/toast/Toast.tsx
@@ -16,36 +16,36 @@ const styles = cva({
     py: '3',
     fontSize: '4',
     borderWidth: '1px',
-    borderStyle: 'solid'
+    borderStyle: 'solid',
   },
   variants: {
     tone: {
       negative: {
-        bg: { _lightScheme: 'red11', _darkScheme: 'red7' },
-        color: { _lightScheme: 'red2', _darkScheme: 'white' },
-        borderColor: { _lightScheme: 'red11', _darkScheme: 'red8' },
+        bg: { base: 'red11', _dark: 'red7' },
+        color: { base: 'red2', _dark: 'white' },
+        borderColor: { base: 'red11', _dark: 'red8' },
         boxShadow: 'md',
         '& button': {
-          color: { _lightScheme: 'red5!', _darkScheme: 'red12!' },
+          color: { base: 'red5!', _dark: 'red12!' },
           _hover: {
-            color: { _lightScheme: 'red2!', _darkScheme: 'white!' }
-          }
-        }
+            color: { base: 'red2!', _dark: 'white!' },
+          },
+        },
       },
       neutral: {
-        bg: { _lightScheme: 'gray12', _darkScheme: 'white' },
+        bg: { base: 'gray12', _dark: 'white' },
         color: 'gray1',
-        borderColor: { _lightScheme: 'gray12', _darkScheme: 'white' },
+        borderColor: { base: 'gray12', _dark: 'white' },
         boxShadow: 'md',
         '& button': {
           color: 'gray8!',
           _hover: {
-            color: 'gray1!'
-          }
-        }
-      }
-    }
-  }
+            color: 'gray1!',
+          },
+        },
+      },
+    },
+  },
 });
 
 const Toast = forwardRef<HTMLDivElement, ToastProps>((props, userRef) => {
@@ -61,7 +61,7 @@ const Toast = forwardRef<HTMLDivElement, ToastProps>((props, userRef) => {
         className={css({
           display: 'flex',
           gap: '5',
-          justifyContent: 'space-between'
+          justifyContent: 'space-between',
         })}
       >
         <div>{children}</div>