@okshaun/components 1.0.1 → 2.0.0

package/src/styles/semantics/colors.ts

@@ -102,8 +102,12 @@ export const colors = defineSemanticTokens.colors({
         subtle: {
           DEFAULT: { value: { base: '#00000029', _dark: '#ffffff29' } },
           hovered: { value: { base: '#0000003d', _dark: '#ffffff3d' } },
-          // hovered.2: { value: { base: "#00000052", _dark: "#ffffff52" } },
-          // pressed: {},
+        },
+      },
+      solid: {
+        value: {
+          base: '{colors.neutral.20}',
+          _dark: '{colors.darkNeutral.20}',
         },
       },
     },
@@ -297,13 +301,13 @@ export const colors = defineSemanticTokens.colors({
       },
       blue: {
         DEFAULT: {
-          value: { base: '{colors.blue.40}', _dark: '{colors.blue.80}' },
+          value: { base: '{colors.blue.40}', _dark: '{colors.blue.70}' },
         },
         subtle: {
-          value: { base: '{colors.blue.20}', _dark: '{colors.blue.90}' },
+          value: { base: '{colors.blue.20}', _dark: '{colors.blue.80}' },
         },
         subtlest: {
-          value: { base: '{colors.blue.10}', _dark: '{colors.blue.100}' },
+          value: { base: '{colors.blue.10}', _dark: '{colors.blue.90}' },
         },
         bold: {
           value: { base: '{colors.blue.70}', _dark: '{colors.blue.40}' },
@@ -311,10 +315,10 @@ export const colors = defineSemanticTokens.colors({
       },
       green: {
         DEFAULT: {
-          value: { base: '{colors.green.40}', _dark: '{colors.green.80}' },
+          value: { base: '{colors.green.40}', _dark: '{colors.green.70}' },
         },
         subtle: {
-          value: { base: '{colors.green.20}', _dark: '{colors.green.90}' },
+          value: { base: '{colors.green.20}', _dark: '{colors.green.80}' },
         },
         subtlest: {
           value: { base: '{colors.green.10}', _dark: '{colors.green.90}' },
@@ -325,10 +329,10 @@ export const colors = defineSemanticTokens.colors({
       },
       indigo: {
         DEFAULT: {
-          value: { base: '{colors.indigo.40}', _dark: '{colors.indigo.80}' },
+          value: { base: '{colors.indigo.40}', _dark: '{colors.indigo.70}' },
         },
         subtle: {
-          value: { base: '{colors.indigo.20}', _dark: '{colors.indigo.90}' },
+          value: { base: '{colors.indigo.20}', _dark: '{colors.indigo.80}' },
         },
         subtlest: {
           value: { base: '{colors.indigo.10}', _dark: '{colors.indigo.90}' },
@@ -339,10 +343,10 @@ export const colors = defineSemanticTokens.colors({
       },
       lime: {
         DEFAULT: {
-          value: { base: '{colors.lime.40}', _dark: '{colors.lime.80}' },
+          value: { base: '{colors.lime.40}', _dark: '{colors.lime.70}' },
         },
         subtle: {
-          value: { base: '{colors.lime.20}', _dark: '{colors.lime.90}' },
+          value: { base: '{colors.lime.20}', _dark: '{colors.lime.80}' },
         },
         subtlest: {
           value: { base: '{colors.lime.10}', _dark: '{colors.lime.90}' },
@@ -353,10 +357,10 @@ export const colors = defineSemanticTokens.colors({
       },
       magenta: {
         DEFAULT: {
-          value: { base: '{colors.magenta.40}', _dark: '{colors.magenta.80}' },
+          value: { base: '{colors.magenta.40}', _dark: '{colors.magenta.70}' },
         },
         subtle: {
-          value: { base: '{colors.magenta.20}', _dark: '{colors.magenta.90}' },
+          value: { base: '{colors.magenta.20}', _dark: '{colors.magenta.80}' },
         },
         subtlest: {
           value: { base: '{colors.magenta.10}', _dark: '{colors.magenta.90}' },
@@ -367,10 +371,10 @@ export const colors = defineSemanticTokens.colors({
       },
       orange: {
         DEFAULT: {
-          value: { base: '{colors.orange.40}', _dark: '{colors.orange.80}' },
+          value: { base: '{colors.orange.40}', _dark: '{colors.orange.70}' },
         },
         subtle: {
-          value: { base: '{colors.orange.20}', _dark: '{colors.orange.90}' },
+          value: { base: '{colors.orange.20}', _dark: '{colors.orange.80}' },
         },
         subtlest: {
           value: { base: '{colors.orange.10}', _dark: '{colors.orange.90}' },
@@ -381,10 +385,10 @@ export const colors = defineSemanticTokens.colors({
       },
       purple: {
         DEFAULT: {
-          value: { base: '{colors.purple.40}', _dark: '{colors.purple.80}' },
+          value: { base: '{colors.purple.40}', _dark: '{colors.purple.70}' },
         },
         subtle: {
-          value: { base: '{colors.purple.20}', _dark: '{colors.purple.90}' },
+          value: { base: '{colors.purple.20}', _dark: '{colors.purple.80}' },
         },
         subtlest: {
           value: { base: '{colors.purple.10}', _dark: '{colors.purple.90}' },
@@ -395,13 +399,13 @@ export const colors = defineSemanticTokens.colors({
       },
       red: {
         DEFAULT: {
-          value: { base: '{colors.red.40}', _dark: '{colors.red.80}' },
+          value: { base: '{colors.red.40}', _dark: '{colors.red.70}' },
         },
         subtle: {
-          value: { base: '{colors.red.20}', _dark: '{colors.red.90}' },
+          value: { base: '{colors.red.20}', _dark: '{colors.red.80}' },
         },
         subtlest: {
-          value: { base: '{colors.red.10}', _dark: '{colors.red.100}' },
+          value: { base: '{colors.red.10}', _dark: '{colors.red.90}' },
         },
         bold: {
           value: { base: '{colors.red.70}', _dark: '{colors.red.40}' },
@@ -409,10 +413,10 @@ export const colors = defineSemanticTokens.colors({
       },
       tan: {
         DEFAULT: {
-          value: { base: '{colors.tan.40}', _dark: '{colors.tan.80}' },
+          value: { base: '{colors.tan.40}', _dark: '{colors.tan.70}' },
         },
         subtle: {
-          value: { base: '{colors.tan.20}', _dark: '{colors.tan.90}' },
+          value: { base: '{colors.tan.20}', _dark: '{colors.tan.80}' },
         },
         subtlest: {
           value: { base: '{colors.tan.10}', _dark: '{colors.tan.90}' },
@@ -423,10 +427,10 @@ export const colors = defineSemanticTokens.colors({
       },
       teal: {
         DEFAULT: {
-          value: { base: '{colors.teal.40}', _dark: '{colors.teal.80}' },
+          value: { base: '{colors.teal.40}', _dark: '{colors.teal.70}' },
         },
         subtle: {
-          value: { base: '{colors.teal.20}', _dark: '{colors.teal.90}' },
+          value: { base: '{colors.teal.20}', _dark: '{colors.teal.80}' },
         },
         subtlest: {
           value: { base: '{colors.teal.10}', _dark: '{colors.teal.90}' },
@@ -464,10 +468,18 @@ export const colors = defineSemanticTokens.colors({
       },
     },
     bold: {
-      value: { base: '{colors.neutral.60}', _dark: '{colors.darkNeutral.60}' },
+      value: { base: '{colors.neutral.90}', _dark: '{colors.darkNeutral.90}' },
     },
     inverse: {
-      value: { base: '{colors.neutral.0}', _dark: '{colors.darkNeutral.0}' },
+      DEFAULT: {
+        value: { base: '{colors.neutral.0}', _dark: '{colors.darkNeutral.0}' },
+      },
+      focused: {
+        value: {
+          base: '{colors.darkNeutral.100}',
+          _dark: '{colors.neutral.90}',
+        },
+      },
     },
     disabled: {
       value: {
@@ -484,17 +496,17 @@ export const colors = defineSemanticTokens.colors({
       },
     },
     selected: {
-      value: { base: '{colors.blue.70}', _dark: '{colors.blue.40}' },
+      value: { base: '{colors.blue.60}', _dark: '{colors.blue.40}' },
     },
     input: {
       value: { base: '{colors.neutral.50}', _dark: '{colors.darkNeutral.60}' },
     },
-    success: { value: { base: '{colors.lime.60}', _dark: '{colors.lime.50}' } },
+    success: { value: { base: '{colors.lime.50}', _dark: '{colors.lime.50}' } },
     warning: {
-      value: { base: '{colors.orange.60}', _dark: '{colors.orange.50}' },
+      value: { base: '{colors.orange.50}', _dark: '{colors.orange.50}' },
     },
-    danger: { value: { base: '{colors.red.60}', _dark: '{colors.red.50}' } },
-    info: { value: { base: '{colors.blue.60}', _dark: '{colors.blue.50}' } },
+    danger: { value: { base: '{colors.red.50}', _dark: '{colors.red.50}' } },
+    info: { value: { base: '{colors.blue.50}', _dark: '{colors.blue.50}' } },
   },
   icon: {
     DEFAULT: {
@@ -513,7 +525,7 @@ export const colors = defineSemanticTokens.colors({
       value: { base: '{colors.neutral.0}', _dark: '{colors.darkNeutral.10}' },
     },
     selected: {
-      value: { base: '{colors.blue.70}', _dark: '{colors.blue.40}' },
+      value: { base: '{colors.blue.60}', _dark: '{colors.blue.40}' },
     },
     disabled: {
       value: {
@@ -545,6 +557,12 @@ export const colors = defineSemanticTokens.colors({
           },
         },
       },
+      subtle: {
+        value: {
+          base: '{colors.neutral.40}',
+          _dark: '{colors.darkNeutral.50}',
+        },
+      },
     },
     success: { value: { base: '{colors.lime.60}', _dark: '{colors.lime.50}' } },
     warning: {
@@ -558,12 +576,15 @@ export const colors = defineSemanticTokens.colors({
         },
       },
     },
-    danger: { value: { base: '{colors.red.70}', _dark: '{colors.red.50}' } },
+    danger: {
+      DEFAULT: { value: { base: '{colors.red.70}', _dark: '{colors.red.50}' } },
+      inverse: { value: { base: '{colors.red.10}', _dark: '{colors.red.70}' } },
+    },
     info: { value: { base: '{colors.blue.60}', _dark: '{colors.blue.50}' } },
   },
   link: {
-    DEFAULT: { value: { base: '{colors.blue.70}', _dark: '{colors.blue.40}' } },
-    pressed: { value: { base: '{colors.blue.80}', _dark: '{colors.blue.30}' } },
+    DEFAULT: { value: { base: '{colors.blue.50}', _dark: '{colors.blue.40}' } },
+    pressed: { value: { base: '{colors.blue.60}', _dark: '{colors.blue.50}' } },
   },
   surface: {
     DEFAULT: {
@@ -578,6 +599,23 @@ export const colors = defineSemanticTokens.colors({
     sunken: {
       value: { base: '{colors.neutral.10}', _dark: '{colors.darkNeutral.0}' },
     },
+    raised: {
+      DEFAULT: {
+        value: { base: '{colors.neutral.0}', _dark: '{colors.darkNeutral.0}' },
+      },
+      hovered: {
+        value: {
+          base: '{colors.neutral.20}',
+          _dark: '{colors.darkNeutral.25}',
+        },
+      },
+      pressed: {
+        value: {
+          base: '{colors.neutral.30}',
+          _dark: '{colors.darkNeutral.30}',
+        },
+      },
+    },
     overlay: {
       DEFAULT: {
         value: { base: '{colors.neutral.0}', _dark: '{colors.darkNeutral.25}' },
@@ -595,20 +633,20 @@ export const colors = defineSemanticTokens.colors({
         },
       },
     },
-    raised: {
+    selected: {
       DEFAULT: {
-        value: { base: '{colors.neutral.0}', _dark: '{colors.darkNeutral.0}' },
+        value: { base: '{colors.blue.10}', _dark: '{colors.blue.70}' },
       },
       hovered: {
         value: {
-          base: '{colors.neutral.20}',
-          _dark: '{colors.darkNeutral.25}',
+          base: '{colors.blue.10}',
+          _dark: '{colors.blue.60}',
         },
       },
       pressed: {
         value: {
-          base: '{colors.neutral.30}',
-          _dark: '{colors.darkNeutral.30}',
+          base: '{colors.blue.20}',
+          _dark: '{colors.blue.80}',
         },
       },
     },
@@ -626,20 +664,28 @@ export const colors = defineSemanticTokens.colors({
     subtlest: {
       value: { base: '{colors.neutral.70}', _dark: '{colors.darkNeutral.70}' },
     },
-    placeholder: {
-      value: { base: '{colors.neutral.50}', _dark: '{colors.darkNeutral.60}' },
-    },
     bold: {
       value: {
-        base: '{colors.neutral.100}',
+        base: '{colors.neutral.110}',
         _dark: '{colors.darkNeutral.110}',
       },
     },
     inverse: {
-      value: { base: '{colors.neutral.0}', _dark: '{colors.darkNeutral.10}' },
+      DEFAULT: {
+        value: { base: '{colors.neutral.0}', _dark: '{colors.darkNeutral.10}' },
+      },
+      subtlest: {
+        value: {
+          base: '{colors.neutral.40}',
+          _dark: '{colors.darkNeutral.40}',
+        },
+      },
     },
     selected: {
-      value: { base: '{colors.blue.70}', _dark: '{colors.blue.40}' },
+      value: { base: '{colors.blue.60}', _dark: '{colors.blue.40}' },
+    },
+    placeholder: {
+      value: { base: '{colors.neutral.40}', _dark: '{colors.darkNeutral.40}' },
     },
     disabled: {
       value: {
@@ -647,20 +693,34 @@ export const colors = defineSemanticTokens.colors({
         _dark: '{colors.darkNeutralA.40}',
       },
     },
-    success: { value: { base: '{colors.lime.80}', _dark: '{colors.lime.30}' } },
+    success: {
+      DEFAULT: {
+        value: { base: '{colors.lime.50}', _dark: '{colors.lime.30}' },
+      },
+      inverse: {
+        value: { base: '{colors.lime.30}', _dark: '{colors.lime.50}' },
+      },
+    },
     warning: {
       DEFAULT: {
-        value: { base: '{colors.orange.80}', _dark: '{colors.orange.30}' },
+        value: { base: '{colors.orange.60}', _dark: '{colors.orange.40}' },
       },
       inverse: {
-        value: {
-          base: '{colors.neutral.100}',
-          _dark: '{colors.darkNeutral.10}',
-        },
+        value: { base: '{colors.orange.40}', _dark: '{colors.orange.60}' },
+      },
+    },
+    danger: {
+      DEFAULT: { value: { base: '{colors.red.50}', _dark: '{colors.red.30}' } },
+      inverse: { value: { base: '{colors.red.30}', _dark: '{colors.red.50}' } },
+    },
+    info: {
+      DEFAULT: {
+        value: { base: '{colors.blue.50}', _dark: '{colors.blue.40}' },
+      },
+      inverse: {
+        value: { base: '{colors.blue.40}', _dark: '{colors.blue.50}' },
       },
     },
-    danger: { value: { base: '{colors.red.80}', _dark: '{colors.red.30}' } },
-    info: { value: { base: '{colors.blue.80}', _dark: '{colors.blue.30}' } },
     accent: {
       neutral: {
         DEFAULT: {
@@ -678,97 +738,92 @@ export const colors = defineSemanticTokens.colors({
       },
       red: {
         DEFAULT: {
-          value: { base: '{colors.red.80}', _dark: '{colors.red.30}' },
+          value: { base: '{colors.red.50}', _dark: '{colors.red.30}' },
         },
         bold: {
-          value: { base: '{colors.red.90}', _dark: '{colors.red.20}' },
+          value: { base: '{colors.red.60}', _dark: '{colors.red.20}' },
         },
       },
       orange: {
         DEFAULT: {
-          value: { base: '{colors.orange.80}', _dark: '{colors.orange.30}' },
+          value: { base: '{colors.orange.60}', _dark: '{colors.orange.50}' },
         },
         bold: {
-          value: { base: '{colors.orange.90}', _dark: '{colors.orange.20}' },
+          value: { base: '{colors.orange.70}', _dark: '{colors.orange.30}' },
         },
       },
       yellow: {
         DEFAULT: {
-          value: { base: '{colors.yellow.80}', _dark: '{colors.yellow.30}' },
+          value: { base: '{colors.yellow.50}', _dark: '{colors.yellow.30}' },
         },
         bold: {
-          value: { base: '{colors.yellow.90}', _dark: '{colors.yellow.20}' },
+          value: { base: '{colors.yellow.60}', _dark: '{colors.yellow.20}' },
         },
       },
       lime: {
         DEFAULT: {
-          value: { base: '{colors.lime.80}', _dark: '{colors.lime.30}' },
+          value: { base: '{colors.lime.50}', _dark: '{colors.lime.40}' },
         },
         bold: {
-          value: { base: '{colors.lime.90}', _dark: '{colors.lime.20}' },
+          value: { base: '{colors.lime.60}', _dark: '{colors.lime.20}' },
         },
       },
       green: {
         DEFAULT: {
-          value: { base: '{colors.green.80}', _dark: '{colors.green.30}' },
+          value: { base: '{colors.green.50}', _dark: '{colors.green.40}' },
         },
         bold: {
-          value: { base: '{colors.green.90}', _dark: '{colors.green.20}' },
+          value: { base: '{colors.green.60}', _dark: '{colors.green.20}' },
         },
       },
       teal: {
         DEFAULT: {
-          value: { base: '{colors.teal.80}', _dark: '{colors.teal.30}' },
+          value: { base: '{colors.teal.50}', _dark: '{colors.teal.40}' },
         },
         bold: {
-          value: { base: '{colors.teal.90}', _dark: '{colors.teal.20}' },
+          value: { base: '{colors.teal.60}', _dark: '{colors.teal.20}' },
         },
       },
       blue: {
         DEFAULT: {
-          value: { base: '{colors.blue.80}', _dark: '{colors.blue.30}' },
+          value: { base: '{colors.blue.50}', _dark: '{colors.blue.40}' },
         },
         bold: {
-          value: { base: '{colors.blue.90}', _dark: '{colors.blue.20}' },
+          value: { base: '{colors.blue.60}', _dark: '{colors.blue.30}' },
         },
       },
       indigo: {
         DEFAULT: {
-          value: { base: '{colors.indigo.80}', _dark: '{colors.indigo.30}' },
+          value: { base: '{colors.indigo.40}', _dark: '{colors.indigo.20}' },
         },
         bold: {
-          value: { base: '{colors.indigo.90}', _dark: '{colors.indigo.20}' },
+          value: { base: '{colors.indigo.60}', _dark: '{colors.indigo.10}' },
         },
       },
       purple: {
         DEFAULT: {
-          value: { base: '{colors.purple.80}', _dark: '{colors.purple.30}' },
+          value: { base: '{colors.purple.50}', _dark: '{colors.purple.40}' },
         },
         bold: {
-          value: { base: '{colors.purple.90}', _dark: '{colors.purple.20}' },
+          value: { base: '{colors.purple.60}', _dark: '{colors.purple.30}' },
         },
       },
       magenta: {
         DEFAULT: {
-          value: { base: '{colors.magenta.80}', _dark: '{colors.magenta.30}' },
+          value: { base: '{colors.magenta.60}', _dark: '{colors.magenta.40}' },
         },
         bold: {
-          value: { base: '{colors.magenta.90}', _dark: '{colors.magenta.20}' },
+          value: { base: '{colors.magenta.70}', _dark: '{colors.magenta.30}' },
         },
       },
       tan: {
         DEFAULT: {
-          value: { base: '{colors.tan.80}', _dark: '{colors.tan.30}' },
+          value: { base: '{colors.tan.50}', _dark: '{colors.tan.30}' },
         },
         bold: {
-          value: { base: '{colors.tan.90}', _dark: '{colors.tan.20}' },
+          value: { base: '{colors.tan.60}', _dark: '{colors.tan.20}' },
         },
       },
     },
   },
-  utility: {
-    shadowColor: {
-      value: { base: '{colors.slate.90/20}', _dark: '{colors.slate.100/40}' },
-    },
-  },
 });

package/src/styles/semantics/index.ts

@@ -1,2 +1,3 @@
 export * from './colors';
 export * from './shadows';
+export * from './zIndex';

package/src/styles/semantics/zIndex.ts

@@ -0,0 +1,18 @@
+import { defineSemanticTokens } from '@pandacss/dev';
+
+/**
+ * Z-index elevation scale — mirrors shadow and surface naming:
+ *   raised    → shadows.raised    / surface.raised   (internal component stacking)
+ *   elevated  → shadows.elevated                     (menus, dropdowns)
+ *   overlay   → shadows.overlay   / surface.overlay  (modal backdrop)
+ *   modal     →                                      (modal container, above backdrop)
+ *   tooltip   →                                      (always on top)
+ */
+export const zIndex = defineSemanticTokens.zIndex({
+  base: { value: '{zIndex.0}' },
+  raised: { value: '{zIndex.1}' },
+  elevated: { value: '{zIndex.1000}' },
+  overlay: { value: '{zIndex.1100}' },
+  modal: { value: '{zIndex.1101}' },
+  tooltip: { value: '{zIndex.1200}' },
+});

package/src/styles/utilities/breakpoints.ts

@@ -1,8 +1,8 @@
 export const breakpoints = {
-  xs: '480px',
-  sm: '640px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px',
-  '2xl': '1536px',
+  xs: '30rem', // 480px
+  sm: '40rem', // 640px
+  md: '48rem', // 768px
+  lg: '64rem', // 1024px
+  xl: '80rem', // 1280px
+  '2xl': '96rem', // 1536px
 };

package/src/styles/utilities/index.ts

@@ -1,6 +1,9 @@
+// Panda CSS treats these as distinct from tokens in the theme definition
+
 export * from './breakpoints';
 export * from './conditions';
 export * from './containerSizes';
+// Custom utilities we've added that are not part of Panda's core properties
 export * from './filters';
 export * from './globalStyle';
 export * from './keyframes';

package/src/styles/utilities/textStyles.ts

@@ -1,4 +1,4 @@
-import { defineTextStyles, defineStyles } from '@pandacss/dev';
+import { defineStyles, defineTextStyles } from '@pandacss/dev';
 
 const baseHeadingStyles = defineStyles({
   value: {
@@ -18,6 +18,24 @@ const baseBodyTextStyles = defineStyles({
   },
 });
 
+const baseSansTextStyles = defineStyles({
+  value: {
+    fontFamily: 'sans',
+    fontWeight: 'normal',
+    color: 'text.subtlest',
+    lineHeight: 'default',
+  },
+});
+
+const baseSerifTextStyles = defineStyles({
+  value: {
+    fontFamily: 'serif',
+    fontWeight: 'normal',
+    color: 'text.subtlest',
+    lineHeight: 'default',
+  },
+});
+
 const baseMonoStyles = defineStyles({
   value: {
     fontFamily: 'mono',
@@ -106,6 +124,58 @@ export const textStyles = defineTextStyles({
       },
     },
   },
+  sans: {
+    lg: {
+      value: {
+        ...baseSansTextStyles,
+        fontSize: '20',
+      },
+    },
+    md: {
+      value: {
+        ...baseSansTextStyles,
+        fontSize: '16',
+      },
+    },
+    sm: {
+      value: {
+        ...baseSansTextStyles,
+        fontSize: '14',
+      },
+    },
+    xs: {
+      value: {
+        ...baseSansTextStyles,
+        fontSize: '12',
+      },
+    },
+  },
+  serif: {
+    lg: {
+      value: {
+        ...baseSerifTextStyles,
+        fontSize: '20',
+      },
+    },
+    md: {
+      value: {
+        ...baseSerifTextStyles,
+        fontSize: '16',
+      },
+    },
+    sm: {
+      value: {
+        ...baseSerifTextStyles,
+        fontSize: '14',
+      },
+    },
+    xs: {
+      value: {
+        ...baseSerifTextStyles,
+        fontSize: '12',
+      },
+    },
+  },
   mono: {
     lg: {
       value: {

package/src/utils/splitProps.ts

@@ -1,9 +1,9 @@
-import { splitCssProps } from '@styled-system/jsx';
 import { css, cx } from '@styled-system/css';
+import { splitCssProps } from '@styled-system/jsx';
+
+type PropsRecord = Record<string, unknown>;
 
-export const splitProps = (
-  props: Record<string, unknown>,
-): [string, Record<string, unknown>] => {
+export const splitProps = (props: PropsRecord): [string, PropsRecord] => {
   const [cssProps, otherProps] = splitCssProps(props);
   const { css: cssProp, ...styleProps } = cssProps;