refactor(core): adopt new color system config

itsjavi · Jun 1, 2024 · f6b380d · f6b380d
1 parent 32ce5cb
commit f6b380d
Show file tree

Hide file tree

Showing 14 changed files with 989 additions and 432 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -24,7 +24,7 @@ function HeadlineText() {
           letterSpacing: 'tighter',
           marginX: 'auto',
           fontWeight: '300',
-          color: 'fg.muted',
+          color: 'muted.100',
         }}
       >
         Create your own unique theme for <strong>Panda CSS</strong> and <strong>Ark UI</strong>.

diff --git a/components/layout/bg-gradient.tsx b/components/layout/bg-gradient.tsx
@@ -6,9 +6,9 @@ import { cn } from '@/lib/utils'
 const cls = {
   bg: css({
     bgGradient: 'to-b',
-    gradientFrom: 'bg.100',
-    gradientVia: 'bg.100',
-    gradientTo: 'bg.200',
+    gradientFrom: 'background.100',
+    gradientVia: 'background.100',
+    gradientTo: 'background.200',
   }),
 }
 

diff --git a/components/layout/bg-retro-grid.tsx b/components/layout/bg-retro-grid.tsx
@@ -17,7 +17,7 @@ const cls = {
     // colorPalette: 'gray',
     // bg: '#0e1416',
     transform: 'rotateX(0deg)',
-    bg: 'radial-gradient(ellipse at 50% 50%, transparent 0%, {colors.bg.100/90} 60%)',
+    bg: 'radial-gradient(ellipse at 50% 50%, transparent 0%, {colors.background.100/90} 60%)',
     zIndex: 1,
     // _dark: {
     //   // bg: 'radial-gradient(ellipse at 50% 50%, transparent 0%, {colors.colorPalette.900/90} 60%)',

diff --git a/modules/color-system/components/color-scale-editor.tsx b/modules/color-system/components/color-scale-editor.tsx
@@ -36,7 +36,7 @@ export default function ColorScaleEditor({ fg, config, onChange }: ColorScaleEdi
         },
         '& .subtitle': {
           fontWeight: 'normal',
-          color: 'fg.muted',
+          color: 'muted.100',
         },
         '& .label:not(:first-child)': {
           justifyContent: 'center',
@@ -50,7 +50,7 @@ export default function ColorScaleEditor({ fg, config, onChange }: ColorScaleEdi
         //   fontSize: 'lg',
         //   borderRadius: 'sm',
         //   borderWidth: '1.5px',
-        //   borderColor: 'fg.200',
+        //   borderColor: 'muted.100',
         // },
       }}
     >

diff --git a/modules/color-system/components/color-scale-legend.tsx b/modules/color-system/components/color-scale-legend.tsx
@@ -17,7 +17,7 @@ export default function ColorScaleLegend({ levels }: { levels: Readonly<string[]
         },
         '& .subtitle': {
           fontWeight: 'normal',
-          color: 'fg.muted',
+          color: 'muted.100',
         },
         '& .label:not(:first-child)': {
           justifyContent: 'center',

diff --git a/modules/color-system/components/color-scale-level-editor.tsx b/modules/color-system/components/color-scale-level-editor.tsx
@@ -136,7 +136,7 @@ export default function ColorScaleLevelEditor({ config, level, fg, scheme, onCha
             _dark: {
               // background: 'alpha.light.600',
             },
-            // color: 'fg.100',
+            // color: 'muted.100',
             fontSize: 'xs',
             textAlign: 'center',
             lineHeight: '1',

diff --git a/modules/design-system/components/button.tsx b/modules/design-system/components/button.tsx
@@ -93,7 +93,7 @@ const buttonStyle = cva({
       },
       solid: {
         background: 'colorPalette.solid1',
-        color: 'fg.dark',
+        color: 'contrast.dark',
         _hover: {
           background: 'colorPalette.solid2',
         },

diff --git a/modules/design-system/components/oklch-editor.tsx b/modules/design-system/components/oklch-editor.tsx
@@ -305,12 +305,12 @@ function ColorSplitPreview({ currentColor, originalColor }: { currentColor: Oklc
 
           '& strong:first-child': {
             fontSize: '3xl',
-            color: 'fg.dark',
+            color: 'contrast.dark',
           },
 
           '& strong:last-child': {
             fontSize: '3xl',
-            color: 'fg.light',
+            color: 'contrast.light',
           },
         },
       }}

diff --git a/modules/design-system/components/tooltip.tsx b/modules/design-system/components/tooltip.tsx
@@ -14,7 +14,7 @@ export const popoverCss = {
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor: 'gray.border1',
-    background: 'bg.base',
+    background: 'background.100',
     borderRadius: 'sm',
     boxShadow: 'lg',
     display: 'flex',
@@ -37,11 +37,11 @@ export const popoverCss = {
     textStyle: 'sm',
   }),
   description: css({
-    color: 'fg.muted',
+    color: 'muted.100',
     textStyle: 'sm',
   }),
   closeTrigger: css({
-    color: 'fg.muted',
+    color: 'muted.100',
   }),
   arrow: css({
     '--arrow-size': 'var(--sizes-3)',

diff --git a/modules/design-system/components/typography/heading.tsx b/modules/design-system/components/typography/heading.tsx
@@ -10,9 +10,9 @@ const heading = cva({
     letterSpacing: 'tighter',
     color: 'gray.fg2',
     // textGradient: 'to-br',
-    // gradientFrom: 'fg.100',
-    // gradientVia: 'fg.200',
-    // gradientTo: 'fg.100',
+    // gradientFrom: 'contrast.100',
+    // gradientVia: 'contrast.200',
+    // gradientTo: 'contrast.100',
   },
   variants: {
     size: {

diff --git a/modules/design-system/components/typography/subtitle.tsx b/modules/design-system/components/typography/subtitle.tsx
@@ -2,7 +2,7 @@ import { PandaP } from '../panda'
 
 export default function Subtitle({ children }: { children: React.ReactNode }) {
   return (
-    <PandaP color="fg.muted" fontSize="xl">
+    <PandaP color="muted.100" fontSize="xl">
       {children}
     </PandaP>
   )

diff --git a/modules/design-system/lib/preset-color-aliases.ts b/modules/design-system/lib/preset-color-aliases.ts
@@ -0,0 +1,26 @@
+import { definePreset } from '@pandacss/dev'
+// import { colorSystemPreset } from './preset-colors'
+// const _semanticColors = colorSystemPreset.theme?.extend?.semanticTokens?.colors
+// type SemanticColors = typeof _semanticColors
+// const semanticColors = _semanticColors as NonNullable<SemanticColors>
+
+export const colorAliasesPreset = definePreset({
+  theme: {
+    extend: {
+      semanticTokens: {
+        colors: {
+          // bg: semanticColors.background,
+          // fg: semanticColors.contrast,
+          muted: {
+            100: {
+              value: '{colors.gray.fg1}',
+            },
+            200: {
+              value: '{colors.gray.fg2}',
+            },
+          },
+        },
+      },
+    },
+  },
+})