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

…eme (#208) * feat(react,panda-preset): refactor conditions to avoid flash of no theme * chore(change): add change
jonambas · Dec 27, 2023 · 650e59f · 650e59f
1 parent a69c7c5
commit 650e59f
Show file tree

Hide file tree

Showing 9 changed files with 309 additions and 304 deletions.
diff --git a/.changeset/tough-impalas-brake.md 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
@@ -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,33 +68,33 @@ directory('Panda Preset', () => {
                           <Text>
                             {v || theme?.semanticTokens[category][key]?.value}
                           </Text>
-                          {category === 'colors' ? (
+                          {category === 'colors' ?
                             <span
                               style={{
                                 display: 'inline-flex',
                                 background: v,
                                 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',
                                 background: dv,
                                 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,19 +143,19 @@ directory('Panda Preset', () => {
                         <td>
                           <Text>{theme?.tokens[category][key]?.value}</Text>
                         </td>
-                        {category === 'colors' ? (
+                        {category === 'colors' ?
                           <td>
                             <div
                               style={{
                                 background: theme?.tokens[category][key]?.value,
                                 width: '4.5rem',
                                 height: '1.3rem',
                                 borderRadius: '2px',
-                                border: '1px solid #ddd'
+                                border: '1px solid #ddd',
                               }}
                             />
                           </td>
-                        ) : null}
+                        : null}
                       </tr>
                     );
                   })}