@okshaun/components 1.0.2 → 2.0.0

package/src/recipes/tooltip.ts

@@ -1,359 +1,68 @@
+// src/recipes/tooltip.ts
 import { defineSlotRecipe } from '@pandacss/dev';
 
-const tooltipBase = {
-  wrapper: {
-    position: 'relative',
-    width: 'fit-content',
-    height: 'fit-content',
-    cursor: 'default',
-  },
-  tooltipContent: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '4',
-    bg: { base: 'gray.90', _dark: 'gray.10' },
-    color: { base: 'gray.10', _dark: 'gray.90' },
-    fontFamily: 'sans',
-    fontWeight: 'normal',
-    borderRadius: '4',
-    position: 'absolute',
-    maxWidth: 'max-content',
-    width: 'max-content',
-    boxShadow: 'medium',
-    zIndex: 1,
-    pointerEvents: 'none',
-    _after: {
-      content: "''",
-      position: 'absolute',
-      width: '0',
-      height: '0',
-      borderWidth: '9',
-      borderStyle: 'solid',
-      borderColor: 'transparent',
-    },
-  },
-  title: {
-    fontWeight: 'bold',
-    color: 'text',
-  },
-  text: {
-    color: 'text.subtlest',
-  },
-};
+export const tooltipRecipe = defineSlotRecipe({
+  className: 'tooltip',
+  jsx: ['Tooltip'],
+  slots: ['tooltipContent', 'title', 'text'],
 
-const tooltipVariants = {
-  position: {
-    top: {
-      tooltipContent: {
-        bottom: '100%',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        opacity: 1,
-        _after: {
-          top: '100%',
-          left: '50%',
-          transform: 'translate(-50%, -2%)',
-          borderTopColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
-    },
-    bottom: {
-      tooltipContent: {
-        top: '100%',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        _after: {
-          bottom: '100%',
-          left: '50%',
-          transform: 'translate(-50%, 2%)',
-          borderBottomColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
-    },
-    left: {
-      tooltipContent: {
-        top: '50%',
-        right: 'calc(100% - 0.75rem)',
-        transform: 'translate(-10%, -50%)',
-        _after: {
-          top: '50%',
-          right: '-6%',
-          transform: 'translate(48%, -50%)',
-          borderLeftColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
-    },
-    right: {
-      tooltipContent: {
-        top: '50%',
-        left: 'calc(100% - 0.75rem)',
-        transform: 'translate(10%, -50%)',
-        _after: {
-          top: '50%',
-          left: '-6%',
-          transform: 'translate(-48%, -50%)',
-          borderRightColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
-    },
-    'top-start': {
-      tooltipContent: {
-        bottom: '100%',
-        left: '0',
-        _after: {
-          top: '100%',
-          left: '8',
-          transform: 'translate(0, -2%)',
-          borderTopColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
-    },
-    'bottom-start': {
-      tooltipContent: {
-        top: '100%',
-        left: '0',
-        transform: 'translateX(0)',
-        _after: {
-          bottom: '100%',
-          left: '8',
-          transform: 'translate(0%, 2%)',
-          borderBottomColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
-    },
-    'left-start': {
-      tooltipContent: {
-        top: '0',
-        right: 'calc(100% - 0.75rem)',
-        transform: 'translate(-10%, -0%)',
-        _after: {
-          top: '8',
-          right: '-6%',
-          transform: 'translate(48%, 0)',
-          borderLeftColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
-    },
-    'right-start': {
-      tooltipContent: {
-        top: '0',
-        left: 'calc(100% - 0.75rem)',
-        transform: 'translate(10%, 0%)',
-        _after: {
-          top: '8',
-          left: '-6%',
-          transform: 'translate(-48%, 0)',
-          borderRightColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
-    },
-    'top-end': {
-      tooltipContent: {
-        bottom: '100%',
-        right: '0',
-        _after: {
-          top: '100%',
-          right: '8',
-          transform: 'translate(0, -2%)',
-          borderTopColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
-    },
-    'bottom-end': {
-      tooltipContent: {
-        top: '100%',
-        right: '0',
-        transform: 'translateX(0)',
-        _after: {
-          bottom: '100%',
-          right: '8',
-          transform: 'translate(0%, 2%)',
-          borderBottomColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
-    },
-    'left-end': {
-      tooltipContent: {
-        bottom: '0',
-        right: 'calc(100% - 0.75rem)',
-        transform: 'translate(-10%, -0%)',
-        _after: {
-          bottom: '8',
-          right: '-6%',
-          transform: 'translate(48%, 0)',
-          borderLeftColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
-    },
-    'right-end': {
-      tooltipContent: {
-        bottom: '0',
-        left: 'calc(100% - 0.75rem)',
-        transform: 'translate(10%, -0%)',
-        _after: {
-          bottom: '8',
-          left: '-6%',
-          transform: 'translate(-48%, 0)',
-          borderRightColor: { base: 'gray.90', _dark: 'gray.10' },
-        },
-      },
+  base: {
+    tooltipContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      // Inverted surface: dark in light mode, light in dark mode
+      bg: 'bg.neutral.inverse',
+      color: 'text.inverse',
+      fontFamily: 'body',
+      fontWeight: 'normal',
+      borderRadius: '4',
+      maxWidth: '240',
+      boxShadow: 'elevated',
+      zIndex: 'tooltip',
+      pointerEvents: 'none',
+    },
+    title: {
+      fontWeight: 'bold',
+      color: 'text.inverse',
+      lineHeight: 'tight',
+    },
+    text: {
+      // Default — overridden by hasTitle variant
+      color: 'text.inverse.subtlest',
+      lineHeight: 'tight',
     },
   },
-  caret: {
-    true: {
-      tooltipContent: {
-        _after: {
-          display: 'block',
-        },
-      },
-      _position: {
-        top: {
-          tooltipContent: {
-            mb: '12',
-          },
-        },
-      },
-    },
-    false: {
-      tooltipContent: {
-        _after: {
-          display: 'none',
-        },
-      },
-      _position: {
-        top: {
-          tooltipContent: {
-            mb: '8',
-          },
-        },
-      },
-    },
-  },
-  size: {
-    sm: {
-      tooltipContent: {
-        py: '4',
-        px: '8',
-      },
-      title: {
-        fontSize: '12',
-      },
-      text: {
-        fontSize: '12',
-      },
-    },
-    md: {
-      tooltipContent: {
-        py: '8',
-        px: '12',
+
+  variants: {
+    size: {
+      sm: {
+        tooltipContent: { py: '2', px: '6' },
+        title: { fontSize: '10' },
+        text: { fontSize: '10' },
       },
-      title: {
-        fontSize: '14',
+      md: {
+        tooltipContent: { py: '4', px: '8' },
+        title: { fontSize: '12' },
+        text: { fontSize: '12' },
       },
-      text: {
-        fontSize: '14',
+      lg: {
+        tooltipContent: { py: '6', px: '12' },
+        title: { fontSize: '14' },
+        text: { fontSize: '14' },
       },
     },
-    lg: {
-      tooltipContent: {
-        py: '12',
-        px: '16',
-      },
-      title: {
-        fontSize: '16',
-      },
-      text: {
-        fontSize: '16',
-      },
+
+    // Controls whether title text uses full contrast (has title = true means
+    // the text slot uses subtlest color; already in base, but without a title
+    // the text slot should use full text color)
+    hasTitle: {
+      true: { text: { color: 'text.inverse.subtlest' } },
+      false: { text: { color: 'text.inverse' } },
     },
   },
-};
 
-export const tooltipRecipe = defineSlotRecipe({
-  className: 'tooltip',
-  jsx: ['Tooltip'],
-  slots: ['wrapper', 'tooltipContent', 'title', 'text'],
-  base: tooltipBase,
-  variants: {
-    ...tooltipVariants,
-  },
   defaultVariants: {
-    position: 'bottom',
-    caret: true,
     size: 'md',
+    hasTitle: false,
   },
-  compoundVariants: [
-    {
-      position: ['top', 'top-start', 'top-end'],
-      caret: true,
-      css: {
-        tooltipContent: {
-          mb: '12',
-        },
-      },
-    },
-    {
-      position: ['top', 'top-start', 'top-end'],
-      caret: false,
-      css: {
-        tooltipContent: {
-          mb: '8',
-        },
-      },
-    },
-    {
-      position: ['bottom', 'bottom-start', 'bottom-end'],
-      caret: true,
-      css: {
-        tooltipContent: {
-          mt: '12',
-        },
-      },
-    },
-    {
-      position: ['bottom', 'bottom-start', 'bottom-end'],
-      caret: false,
-      css: {
-        tooltipContent: {
-          mt: '8',
-        },
-      },
-    },
-    {
-      position: ['left', 'left-start', 'left-end'],
-      caret: true,
-      css: {
-        tooltipContent: {
-          mr: '12',
-        },
-      },
-    },
-    {
-      position: ['left', 'left-start', 'left-end'],
-      caret: false,
-      css: {
-        tooltipContent: {
-          mr: '8',
-        },
-      },
-    },
-    {
-      position: ['right', 'right-start', 'right-end'],
-      caret: true,
-      css: {
-        tooltipContent: {
-          ml: '12',
-        },
-      },
-    },
-    {
-      position: ['right', 'right-start', 'right-end'],
-      caret: false,
-      css: {
-        tooltipContent: {
-          ml: '8',
-        },
-      },
-    },
-  ],
 });

package/src/styles/index.css

@@ -1 +1 @@
-@layer reset, base, tokens, recipes, utilities;
+@layer legacy, reset, base, tokens, recipes, utilities;

package/src/styles/primitives/borders.ts

@@ -9,9 +9,15 @@ export const borders = defineTokens.borders({
   default: {
     value: '{borderWidths.1} solid {colors.border}',
   },
-  strong: {
+  bold: {
     value: '{borderWidths.2} solid {colors.border.bold}',
   },
+  inverse: {
+    value: '{borderWidths.1} solid {colors.border.inverse}',
+  },
+  disabled: {
+    value: '{borderWidths.1} solid {colors.border.disabled}',
+  },
   input: {
     value: '{borderWidths.1} solid {colors.border.input}',
   },

package/src/styles/primitives/colors.ts

@@ -40,6 +40,7 @@ export const colors = defineTokens.colors({
     '90': { value: '#BFC1C4' },
     '100': { value: '#CECFD2' },
     '110': { value: '#E2E3E4' },
+    '120': { value: '#F1F1F2' },
   },
   darkNeutralA: {
     '-10': { value: '#01040475' },
@@ -225,4 +226,54 @@ export const colors = defineTokens.colors({
     '90': { value: '#1E1E1E' },
     '100': { value: '#000000' },
   },
+  shadow: {
+    raised: {
+      1: {
+        light: { value: 'rgba(30, 31, 33, 0.25)' },
+        dark: { value: 'rgba(1, 4, 4, 0.5)' },
+      },
+      2: {
+        light: { value: 'rgba(30, 31, 33, 0.31)' },
+        dark: { value: 'rgba(1, 4, 4, 0.5)' },
+      },
+    },
+    elevated: {
+      1: {
+        light: { value: 'rgba(0, 0, 0, 0)' },
+        dark: { value: 'rgba(95, 95, 95, 0.06)' },
+      },
+      2: {
+        light: { value: 'rgba(30, 31, 33, 0.2)' },
+        dark: { value: 'rgba(1, 4, 4, 0.43)' },
+      },
+      3: {
+        light: { value: 'rgba(30, 31, 33, 0.31)' },
+        dark: { value: 'rgba(1, 4, 4, 0.5)' },
+      },
+    },
+    overlay: {
+      1: {
+        light: { value: 'rgba(0, 0, 0, 0)' },
+        dark: { value: 'rgba(189, 189, 189, 0.12)' },
+      },
+      2: {
+        light: { value: 'rgba(30, 31, 33, 0.15)' },
+        dark: { value: 'rgba(1, 4, 4, 0.36)' },
+      },
+      3: {
+        light: { value: 'rgba(30, 31, 33, 0.31)' },
+        dark: { value: 'rgba(1, 4, 4, 0.5)' },
+      },
+    },
+    overflow: {
+      1: {
+        light: { value: 'rgba(30, 31, 33, 0.16)' },
+        dark: { value: 'rgba(1, 4, 4, 0.56)' },
+      },
+      2: {
+        light: { value: 'rgba(30, 31, 33, 0.12)' },
+        dark: { value: 'rgba(1, 4, 4, 0.5)' },
+      },
+    },
+  },
 });

package/src/styles/primitives/fontSizes.ts

@@ -1,6 +1,7 @@
 import { defineTokens } from '@pandacss/dev';
 
 export const fontSizes = defineTokens.fontSizes({
+  '10': { value: '{sizes.10}' },
   '12': { value: '{sizes.12}' },
   '14': { value: '{sizes.14}' },
   '16': { value: '{sizes.16}' },

package/src/styles/primitives/index.ts

@@ -6,8 +6,8 @@ export * from './borderWidths';
 export * from './colors';
 export * from './durations';
 export * from './easings';
-export * from './fonts';
 export * from './fontSizes';
+export * from './fonts';
 export * from './fontWeights';
 export * from './letterSpacings';
 export * from './lineHeights';
@@ -15,6 +15,7 @@ export * from './radii';
 export * from './shadows';
 export * from './sizes';
 export * from './spacings';
+export * from './zIndex';
 
 /*
 Officially supported token types

package/src/styles/primitives/shadows.ts

@@ -3,39 +3,39 @@ import { defineTokens } from '@pandacss/dev';
 export const shadows = defineTokens.shadows({
   zeroShadow: {
     value:
-      '{sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0), {sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0)',
+      '{sizes.0} {sizes.0} {sizes.0} {colors.transparent}, {sizes.0} {sizes.0} {sizes.0} {colors.transparent}',
   },
   raisedLight: {
     value:
-      '{sizes.0} {sizes.1} {sizes.1} rgba(30, 31, 33, 0.25), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)',
+      '{sizes.0} {sizes.1} {sizes.1} {colors.shadow.raised.1.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.light}',
   },
   raisedDark: {
     value:
-      '{sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0), {sizes.0} {sizes.1} {sizes.1} rgba(1, 4, 4, 0.5), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)',
+      '{sizes.0} {sizes.1} {sizes.1} {colors.shadow.raised.1.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.dark}',
   },
   elevatedLight: {
     value:
-      '{sizes.0} {sizes.4} {sizes.7} rgba(30, 31, 33, 0.2), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)',
+      '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.light}, {sizes.0} {sizes.4} {sizes.7} {colors.shadow.elevated.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.light}',
   },
   elevatedDark: {
     value:
-      '{sizes.0} {sizes.0} {sizes.0} rgba(95, 95, 95, 0.06), {sizes.0} {sizes.4} {sizes.7} rgba(1, 4, 4, 0.43), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)',
+      '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.dark}, {sizes.0} {sizes.4} {sizes.7} {colors.shadow.elevated.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.dark}',
   },
   overlayLight: {
     value:
-      '{sizes.0} {sizes.8} {sizes.12} rgba(30, 31, 33, 0.15), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)',
+      '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.light}, {sizes.0} {sizes.8} {sizes.12} {colors.shadow.overlay.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.light}',
   },
   overlayDark: {
     value:
-      '{sizes.0} {sizes.0} {sizes.0} rgba(189, 189, 189, 0.12), {sizes.0} {sizes.8} {sizes.12} rgba(1, 4, 4, 0.36), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)',
+      '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.dark}, {sizes.0} {sizes.8} {sizes.12} {colors.shadow.overlay.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.dark}',
   },
   overflowLight: {
     value:
-      '{sizes.0} {sizes.0} {sizes.8} rgba(30, 31, 33, 0.16), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.12)',
+      '{sizes.0} {sizes.0} {sizes.8} {colors.shadow.overflow.1.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overflow.2.light}',
   },
   overflowDark: {
     value:
-      '{sizes.0} {sizes.0} {sizes.12} rgba(1, 4, 4, 0.56), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)',
+      '{sizes.0} {sizes.0} {sizes.12} {colors.shadow.overflow.1.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overflow.2.dark}',
   },
   // TODO: delete below once migration is complete
   lowLight: {

package/src/styles/primitives/sizes.ts

@@ -18,6 +18,7 @@ export const numericSizes = {
   '20': { value: '1.25rem' },
   '22': { value: '1.375rem' },
   '24': { value: '1.5rem' },
+  '28': { value: '1.75rem' },
   '32': { value: '2rem' },
   '40': { value: '2.5rem' },
   '48': { value: '3rem' },

package/src/styles/primitives/zIndex.ts

@@ -0,0 +1,17 @@
+// src/styles/primitives/zIndex.ts
+import { defineTokens } from '@pandacss/dev';
+
+export const zIndex = defineTokens.zIndex({
+  '-1': { value: -1 },
+  '0': { value: 0 },
+  '1': { value: 1 },
+  '2': { value: 2 },
+  '3': { value: 3 },
+  '4': { value: 4 },
+  '5': { value: 5 },
+  '10': { value: 10 },
+  '1000': { value: 1000 },
+  '1100': { value: 1100 },
+  '1101': { value: 1101 },
+  '1200': { value: 1200 },
+});