@abhir9/pd-design-system 0.1.26 → 0.1.28

package/dist/index.cjs

@@ -144,7 +144,7 @@ function getAvailableIconNames() {
   );
 }
 var buttonVariants = classVarianceAuthority.cva(
-  "pd-inline-flex pd-items-center pd-justify-center pd-font-medium pd-transition-colors pd-focus-visible:outline-none pd-focus-visible:ring-2 pd-focus-visible:ring-[var(--pd-border-blue)] pd-focus-visible:ring-offset-2 pd-disabled:pointer-events-none pd-disabled:cursor-not-allowed pd-disabled:hover:pd-bg-[inherit] pd-disabled:hover:pd-text-[inherit] pd-disabled:hover:pd-border-[inherit] pd-disabled:active:pd-bg-[inherit] pd-disabled:active:pd-text-[inherit] pd-disabled:active:pd-border-[inherit] [font-family:var(--pd-font-sans,Gist,sans-serif)] [gap:var(--pd-button-gap)] [border-radius:var(--pd-radius-button)] pd-shadow-none",
+  "pd-inline-flex pd-items-center pd-justify-center pd-font-medium pd-transition-colors pd-focus-visible:outline-none pd-focus-visible:ring-2 pd-focus-visible:ring-[var(--pd-border-blue)] pd-focus-visible:ring-offset-2 pd-disabled:pointer-events-none pd-disabled:cursor-not-allowed pd-disabled:hover:pd-bg-[inherit] pd-disabled:hover:pd-text-[inherit] pd-disabled:hover:pd-border-[inherit] pd-disabled:active:pd-bg-[inherit] pd-disabled:active:pd-text-[inherit] pd-disabled:active:pd-border-[inherit] [font-family:var(--pd-font-sans,Geist,sans-serif)] [gap:var(--pd-button-gap)] [border-radius:var(--pd-radius-button)] pd-shadow-none",
   {
     variants: {
       variant: {
@@ -162,7 +162,7 @@ var buttonVariants = classVarianceAuthority.cva(
       },
       size: {
         sm: "[padding-top:var(--pd-button-padding-sm-vertical)] [padding-bottom:var(--pd-button-padding-sm-vertical)] [padding-left:var(--pd-button-padding-sm-horizontal)] [padding-right:var(--pd-button-padding-sm-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-sm)] [letter-spacing:var(--pd-button-letter-spacing)]",
-        md: "[padding-top:var(--pd-button-padding-md-vertical)] [padding-bottom:var(--pd-button-padding-md-vertical)] [padding-left:var(--pd-button-padding-md-horizontal)] [padding-right:var(--pd-button-padding-md-horizontal)] pd-text-sm [line-height:var(--pd-button-line-height-md)] [letter-spacing:var(--pd-button-letter-spacing)]",
+        md: "[padding-top:var(--pd-button-padding-md-vertical)] [padding-bottom:var(--pd-button-padding-md-vertical)] [padding-left:var(--pd-button-padding-md-horizontal)] [padding-right:var(--pd-button-padding-md-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-md)] [letter-spacing:var(--pd-button-letter-spacing)]",
         lg: "[padding-top:var(--pd-button-padding-lg-vertical)] [padding-bottom:var(--pd-button-padding-lg-vertical)] [padding-left:var(--pd-button-padding-lg-horizontal)] [padding-right:var(--pd-button-padding-lg-horizontal)] pd-text-base [line-height:var(--pd-button-line-height-lg)] [letter-spacing:var(--pd-button-letter-spacing)]"
       }
     },
@@ -584,7 +584,7 @@ var ButtonGroupComponent = React.forwardRef(
 ButtonGroupComponent.displayName = "ButtonGroup";
 var ButtonGroup = React.memo(ButtonGroupComponent);
 
-// src/tokens/base.ts
+// src/tokens/tokens.ts
 var neutral = {
   100: "#FFFFFF",
   200: "#EDEDED",
@@ -666,69 +666,10 @@ var colorPrimitives = {
   green,
   yellow
 };
-var colors = {
-  // Neutral palette (mapped from new scale)
-  white: neutral[100],
-  black: neutral[950],
-  gray50: neutral[200],
-  gray100: neutral[300],
-  gray200: neutral[400],
-  gray300: neutral[500],
-  gray400: neutral[500],
-  gray500: neutral[500],
-  gray600: neutral[600],
-  gray700: neutral[700],
-  gray800: neutral[800],
-  gray900: neutral[900],
-  // Primary palette (mapped from blue)
-  blue50: blue[100],
-  blue100: blue[100],
-  blue200: blue[200],
-  blue300: blue[300],
-  blue400: blue[400],
-  blue500: blue[500],
-  blue600: blue[600],
-  blue700: blue[700],
-  blue800: blue[800],
-  blue900: blue[900],
-  // Success palette (mapped from green)
-  green50: green[100],
-  green100: green[100],
-  green200: green[200],
-  green300: green[300],
-  green400: green[400],
-  green500: green[500],
-  green600: green[600],
-  green700: green[700],
-  green800: green[800],
-  green900: green[900],
-  // Warning palette (mapped from yellow)
-  yellow50: yellow[100],
-  yellow100: yellow[100],
-  yellow200: yellow[200],
-  yellow300: yellow[300],
-  yellow400: yellow[400],
-  yellow500: yellow[500],
-  yellow600: yellow[600],
-  yellow700: yellow[700],
-  yellow800: yellow[800],
-  yellow900: yellow[900],
-  // Danger palette (mapped from red)
-  red50: red[100],
-  red100: red[100],
-  red200: red[200],
-  red300: red[300],
-  red400: red[400],
-  red500: red[500],
-  red600: red[600],
-  red700: red[700],
-  red800: red[800],
-  red900: red[900]
-};
 var typography = {
   fontFamily: {
-    sans: ["Gist", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "sans-serif"],
-    mono: ["Gist Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
+    sans: ["Geist", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "sans-serif"],
+    mono: ["Geist Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
   },
   fontSize: {
     xs: "0.75em",
@@ -747,8 +688,16 @@ var typography = {
     // 30px
     "4xl": "2.25em",
     // 36px
-    "5xl": "3em"
+    "5xl": "3em",
     // 48px
+    "6xl": "3.75em",
+    // 60px
+    "7xl": "4.5em",
+    // 72px
+    "8xl": "6em",
+    // 96px
+    "9xl": "8em"
+    // 128px
   },
   fontWeight: {
     normal: "400",
@@ -761,18 +710,40 @@ var typography = {
     normal: "1.5",
     relaxed: "1.75"
   },
+  // Tailwind fontSize lineHeight mappings (for use in tailwind.config.js)
+  fontSizeLineHeight: {
+    xs: "1em",
+    // 16px for 12px font
+    sm: "1.25em",
+    // 20px for 14px font
+    base: "1.5em",
+    // 24px for 16px font
+    lg: "1.75em",
+    // 28px for 18px font
+    xl: "1.75em",
+    // 28px for 20px font
+    "2xl": "2em",
+    "3xl": "2.25em",
+    "4xl": "2.5em",
+    "5xl": "1",
+    "6xl": "1",
+    "7xl": "1",
+    "8xl": "1",
+    "9xl": "1"
+  },
   letterSpacing: {
     tight: "-0.025em",
     normal: "0",
     wide: "0.025em",
     wider: "0.05em",
     widest: "0.1em",
-    button: "0.00625em"
-    // 0.1px
+    button: "0.00833em"
+    // 0.1px for 12px font 
   }
 };
 var spacing = {
-  0: "0",
+  0: "0em",
+  // 0px
   1: "0.25em",
   // 4px
   2: "0.5em",
@@ -785,18 +756,14 @@ var spacing = {
   // 20px
   6: "1.5em",
   // 24px
+  7: "1.75em",
+  // 28px
   8: "2em",
   // 32px
-  10: "2.5em",
+  9: "2.25em",
+  // 36px
+  10: "2.5em"
   // 40px
-  12: "3em",
-  // 48px
-  16: "4em",
-  // 64px
-  20: "5em",
-  // 80px
-  24: "6em"
-  // 96px
 };
 var radius = {
   none: "0",
@@ -816,7 +783,27 @@ var radius = {
   // 24px
   full: "9999px",
   button: "0.5em"
-  // 8px - button border radius
+  // 8px - button border radius 
+};
+var shadows = {
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+  inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+  none: "none"
+};
+var zIndex = {
+  base: 0,
+  dropdown: 1e3,
+  sticky: 1020,
+  fixed: 1030,
+  modalBackdrop: 1040,
+  modal: 1050,
+  popover: 1060,
+  tooltip: 1070
 };
 var button = {
   padding: {
@@ -828,9 +815,9 @@ var button = {
     },
     md: {
       vertical: "0.625em",
-      // 10px
+      // 10px 
       horizontal: "1em"
-      // 16px
+      // 16px 
     },
     lg: {
       vertical: "0.75em",
@@ -840,186 +827,157 @@ var button = {
     }
   },
   gap: "0.5em",
-  // 8px - gap between icon and text
+  // 8px - gap between icon and text 
   lineHeight: {
     sm: "1.333em",
-    // 16px for 12px font (133.333%)
-    md: "1.1875em",
-    // 19px for 14px font (135.7%)
-    lg: "1.3125em"
-    // 21px for 16px font (131.25%)
+    md: "1.333em",
+    // 16px for 12px font-size (1.333 × 12px = 16px)
+    lg: "1.333em"
   },
-  letterSpacing: "0.00625em"
-  // 0.1px
-};
-var shadows = {
-  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-  base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
-  inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
-  none: "none"
+  letterSpacing: "0.00833em"
+  // 0.1px for 12px font
 };
-var zIndex = {
-  base: 0,
-  dropdown: 1e3,
-  sticky: 1020,
-  fixed: 1030,
-  modalBackdrop: 1040,
-  modal: 1050,
-  popover: 1060,
-  tooltip: 1070
-};
-var COLOR_SCALES = [100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1e3];
-
-// src/tokens/semantic.ts
-var borderTokens = {
-  dark: {
-    primary: neutral[700],
-    secondary: neutral[800],
-    subtle: neutral[800],
-    invert: neutral[100],
-    onColor: neutral[950],
-    blue: blue[400],
-    blueSubtle: blue[800],
-    blueOnHover: blue[500],
-    red: red[400],
-    redSubtle: red[900],
-    redOnHover: red[500],
-    orange: orange[400],
-    orangeSubtle: orange[900],
-    orangeOnHover: orange[500],
-    yellow: yellow[400],
-    yellowSubtle: yellow[900],
-    yellowOnHover: yellow[500],
-    green: green[600],
-    greenSubtle: green[900],
-    greenOnHover: green[700]
-  },
+var semanticTokens = {
   light: {
-    primary: neutral[400],
-    secondary: neutral[300],
-    subtle: neutral[300],
-    invert: neutral[950],
-    onColor: neutral[100],
-    blue: blue[500],
-    blueSubtle: blue[300],
-    blueOnHover: blue[700],
-    red: red[600],
-    redSubtle: red[300],
-    redOnHover: red[700],
-    orange: orange[600],
-    orangeSubtle: orange[300],
-    orangeOnHover: orange[700],
-    yellow: yellow[600],
-    yellowSubtle: yellow[300],
-    yellowOnHover: yellow[700],
-    green: green[600],
-    greenSubtle: green[300],
-    greenOnHover: green[700]
-  }
-};
-var contentTokens = {
-  dark: {
-    primary: neutral[300],
-    secondary: neutral[500],
-    subtle: neutral[700],
-    onColor: neutral[950],
-    alwaysWhite: neutral[100],
-    alwaysBlack: neutral[950],
-    onColorInverse: neutral[100],
-    blue: blue[400],
-    blueDisabled: blue[800],
-    blueOnHover: blue[500],
-    green: green[600],
-    greenDisabled: green[800],
-    greenOnHover: green[500],
-    red: red[400],
-    redDisabled: red[800],
-    redOnHover: red[300],
-    orange: orange[400],
-    orangeDisabled: orange[800],
-    orangeOnHover: orange[300],
-    yellow: yellow[400],
-    yellowDisabled: yellow[800],
-    yellowOnHover: yellow[300]
+    border: {
+      primary: neutral[400],
+      secondary: neutral[300],
+      subtle: neutral[300],
+      invert: neutral[950],
+      onColor: neutral[100],
+      blue: blue[500],
+      blueSubtle: blue[300],
+      blueOnHover: blue[700],
+      red: red[600],
+      redSubtle: red[300],
+      redOnHover: red[700],
+      orange: orange[600],
+      orangeSubtle: orange[300],
+      orangeOnHover: orange[700],
+      yellow: yellow[600],
+      yellowSubtle: yellow[300],
+      yellowOnHover: yellow[700],
+      green: green[600],
+      greenSubtle: green[300],
+      greenOnHover: green[700]
+    },
+    content: {
+      primary: neutral[900],
+      secondary: neutral[600],
+      subtle: neutral[400],
+      onColor: neutral[100],
+      alwaysWhite: neutral[100],
+      alwaysBlack: neutral[950],
+      onColorInverse: neutral[950],
+      blue: blue[500],
+      blueDisabled: blue[400],
+      blueOnHover: blue[600],
+      green: green[700],
+      greenDisabled: green[400],
+      greenOnHover: green[600],
+      red: red[600],
+      redDisabled: red[400],
+      redOnHover: red[700],
+      orange: orange[600],
+      orangeDisabled: orange[400],
+      orangeOnHover: orange[700],
+      yellow: yellow[600],
+      yellowDisabled: yellow[400],
+      yellowOnHover: yellow[700]
+    },
+    background: {
+      primary: neutral[100],
+      system: neutral[1e3],
+      secondary: neutral[200],
+      tertiary: neutral[300],
+      invert: neutral[950],
+      invertLight: neutral[900],
+      green: green[100],
+      greenOnHover: green[200],
+      red: red[100],
+      redOnHover: red[200],
+      orange: orange[100],
+      orangeOnHover: orange[200],
+      yellow: orange[100],
+      yellowOnHover: orange[200],
+      low: neutral[200],
+      lowOnHover: neutral[300],
+      info: blue[100],
+      infoOnHover: blue[300],
+      base: neutral[100]
+    }
   },
-  light: {
-    primary: neutral[900],
-    secondary: neutral[600],
-    subtle: neutral[400],
-    onColor: neutral[100],
-    alwaysWhite: neutral[100],
-    alwaysBlack: neutral[950],
-    onColorInverse: neutral[950],
-    blue: blue[500],
-    blueDisabled: blue[400],
-    blueOnHover: blue[600],
-    green: green[700],
-    greenDisabled: green[400],
-    greenOnHover: green[600],
-    red: red[600],
-    redDisabled: red[400],
-    redOnHover: red[700],
-    orange: orange[600],
-    orangeDisabled: orange[400],
-    orangeOnHover: orange[700],
-    yellow: yellow[600],
-    yellowDisabled: yellow[400],
-    yellowOnHover: yellow[700]
-  }
-};
-var backgroundTokens = {
   dark: {
-    primary: neutral[950],
-    system: neutral[950],
-    secondary: neutral[900],
-    tertiary: neutral[800],
-    invert: neutral[100],
-    invertLight: neutral[300],
-    green: green[950],
-    greenOnHover: green[900],
-    red: red[950],
-    redOnHover: red[900],
-    orange: orange[950],
-    orangeOnHover: orange[900],
-    yellow: yellow[950],
-    yellowOnHover: yellow[900],
-    low: neutral[900],
-    lowOnHover: neutral[800],
-    info: blue[950],
-    infoOnHover: blue[900],
-    base: neutral[950]
-  },
-  light: {
-    primary: neutral[100],
-    system: neutral[1e3],
-    secondary: neutral[200],
-    tertiary: neutral[300],
-    invert: neutral[950],
-    invertLight: neutral[900],
-    green: green[100],
-    greenOnHover: green[200],
-    red: red[100],
-    redOnHover: red[200],
-    orange: orange[100],
-    orangeOnHover: orange[200],
-    yellow: orange[100],
-    yellowOnHover: orange[200],
-    low: neutral[200],
-    lowOnHover: neutral[300],
-    info: blue[100],
-    infoOnHover: blue[300],
-    base: neutral[100]
+    border: {
+      primary: neutral[700],
+      secondary: neutral[800],
+      subtle: neutral[800],
+      invert: neutral[100],
+      onColor: neutral[950],
+      blue: blue[400],
+      blueSubtle: blue[800],
+      blueOnHover: blue[500],
+      red: red[400],
+      redSubtle: red[900],
+      redOnHover: red[500],
+      orange: orange[400],
+      orangeSubtle: orange[900],
+      orangeOnHover: orange[500],
+      yellow: yellow[400],
+      yellowSubtle: yellow[900],
+      yellowOnHover: yellow[500],
+      green: green[600],
+      greenSubtle: green[900],
+      greenOnHover: green[700]
+    },
+    content: {
+      primary: neutral[300],
+      secondary: neutral[500],
+      subtle: neutral[700],
+      onColor: neutral[950],
+      alwaysWhite: neutral[100],
+      alwaysBlack: neutral[950],
+      onColorInverse: neutral[100],
+      blue: blue[400],
+      blueDisabled: blue[800],
+      blueOnHover: blue[500],
+      green: green[600],
+      greenDisabled: green[800],
+      greenOnHover: green[500],
+      red: red[400],
+      redDisabled: red[800],
+      redOnHover: red[300],
+      orange: orange[400],
+      orangeDisabled: orange[800],
+      orangeOnHover: orange[300],
+      yellow: yellow[400],
+      yellowDisabled: yellow[800],
+      yellowOnHover: yellow[300]
+    },
+    background: {
+      primary: neutral[950],
+      system: neutral[950],
+      secondary: neutral[900],
+      tertiary: neutral[800],
+      invert: neutral[100],
+      invertLight: neutral[300],
+      green: green[950],
+      greenOnHover: green[900],
+      red: red[950],
+      redOnHover: red[900],
+      orange: orange[950],
+      orangeOnHover: orange[900],
+      yellow: yellow[950],
+      yellowOnHover: yellow[900],
+      low: neutral[900],
+      lowOnHover: neutral[800],
+      info: blue[950],
+      infoOnHover: blue[900],
+      base: neutral[950]
+    }
   }
 };
-var semanticTokens = {
-  border: borderTokens,
-  content: contentTokens,
-  background: backgroundTokens
-};
+var COLOR_SCALES = [100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1e3];
 var VARIANTS = ["primary", "secondary", "ghost", "destructive"];
 var INTENTS = ["primary", "success", "warning", "danger", "neutral"];
 var SIZES = ["sm", "md", "lg"];
@@ -1027,91 +985,65 @@ var BUTTON_TYPES = ["button", "submit", "reset"];
 var INPUT_TYPES = ["text", "email", "password", "number", "tel", "url", "search"];
 var ORIENTATIONS = ["horizontal", "vertical"];
 var SURFACE_LEVELS = ["base", "elevated", "overlay"];
-function createSemanticTokens(mode) {
-  const isLight = mode === "light";
-  const border = isLight ? borderTokens.light : borderTokens.dark;
-  const content = isLight ? contentTokens.light : contentTokens.dark;
-  const background = isLight ? backgroundTokens.light : backgroundTokens.dark;
-  return {
-    intent: {
-      primary: {
-        color: content.secondary,
-        colorHover: isLight ? neutral[700] : neutral[300],
-        colorActive: isLight ? neutral[800] : neutral[200],
-        background: background.secondary,
-        backgroundHover: background.lowOnHover,
-        backgroundActive: background.tertiary,
-        border: border.primary,
-        text: content.primary,
-        textMuted: content.subtle
-      },
-      success: {
-        color: isLight ? green[600] : green[600],
-        colorHover: isLight ? green[700] : green[500],
-        colorActive: isLight ? green[800] : green[700],
-        background: background.green,
-        backgroundHover: background.greenOnHover,
-        backgroundActive: isLight ? green[300] : green[800],
-        border: border.green,
-        text: content.green,
-        textMuted: isLight ? green[700] : green[300]
-      },
-      warning: {
-        color: isLight ? yellow[600] : yellow[400],
-        colorHover: isLight ? yellow[700] : yellow[300],
-        colorActive: isLight ? yellow[800] : yellow[500],
-        background: background.yellow,
-        backgroundHover: background.yellowOnHover,
-        backgroundActive: isLight ? yellow[200] : yellow[900],
-        border: border.yellow,
-        text: content.yellow,
-        textMuted: isLight ? yellow[700] : yellow[300]
-      },
-      danger: {
-        color: isLight ? red[600] : red[400],
-        colorHover: isLight ? red[700] : red[300],
-        colorActive: isLight ? red[800] : red[500],
-        background: background.red,
-        backgroundHover: background.redOnHover,
-        backgroundActive: isLight ? red[200] : red[900],
-        border: border.red,
-        text: content.red,
-        textMuted: isLight ? red[700] : red[300]
-      },
-      neutral: {
-        color: content.secondary,
-        colorHover: isLight ? neutral[700] : neutral[300],
-        colorActive: isLight ? neutral[800] : neutral[200],
-        background: background.secondary,
-        backgroundHover: background.lowOnHover,
-        backgroundActive: background.tertiary,
-        border: border.primary,
-        text: content.primary,
-        textMuted: content.subtle
-      }
-    },
-    surface: {
-      base: {
-        background: background.primary,
-        border: border.primary
-      },
-      elevated: {
-        background: background.secondary,
-        border: border.secondary
-      },
-      overlay: {
-        background: isLight ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0.7)",
-        border: "transparent"
-      }
-    },
-    text: {
-      heading: content.primary,
-      body: content.primary,
-      muted: content.subtle,
-      disabled: isLight ? content.subtle : neutral[600]
-    }
-  };
-}
+var colors = {
+  // Neutral palette
+  white: neutral[100],
+  black: neutral[950],
+  gray50: neutral[200],
+  gray100: neutral[300],
+  gray200: neutral[400],
+  gray300: neutral[500],
+  gray400: neutral[500],
+  gray500: neutral[500],
+  gray600: neutral[600],
+  gray700: neutral[700],
+  gray800: neutral[800],
+  gray900: neutral[900],
+  // Primary palette (mapped from blue)
+  blue50: blue[100],
+  blue100: blue[100],
+  blue200: blue[200],
+  blue300: blue[300],
+  blue400: blue[400],
+  blue500: blue[500],
+  blue600: blue[600],
+  blue700: blue[700],
+  blue800: blue[800],
+  blue900: blue[900],
+  // Success palette (mapped from green)
+  green50: green[100],
+  green100: green[100],
+  green200: green[200],
+  green300: green[300],
+  green400: green[400],
+  green500: green[500],
+  green600: green[600],
+  green700: green[700],
+  green800: green[800],
+  green900: green[900],
+  // Warning palette (mapped from yellow)
+  yellow50: yellow[100],
+  yellow100: yellow[100],
+  yellow200: yellow[200],
+  yellow300: yellow[300],
+  yellow400: yellow[400],
+  yellow500: yellow[500],
+  yellow600: yellow[600],
+  yellow700: yellow[700],
+  yellow800: yellow[800],
+  yellow900: yellow[900],
+  // Danger palette (mapped from red)
+  red50: red[100],
+  red100: red[100],
+  red200: red[200],
+  red300: red[300],
+  red400: red[400],
+  red500: red[500],
+  red600: red[600],
+  red700: red[700],
+  red800: red[800],
+  red900: red[900]
+};
 
 // src/theme/theme.ts
 function resolveThemeMode(mode) {
@@ -1125,147 +1057,31 @@ function resolveThemeMode(mode) {
 }
 function createTheme(name, mode) {
   const resolvedMode = resolveThemeMode(mode);
-  const semantic = createSemanticTokens(resolvedMode);
+  const semantic = semanticTokens[resolvedMode];
   const cssVariables = {
     // Base colors
-    "--color-white": colors.white,
-    "--color-black": colors.black,
-    // Intent colors
-    "--intent-primary": semantic.intent.primary.color,
-    "--intent-primary-hover": semantic.intent.primary.colorHover,
-    "--intent-primary-active": semantic.intent.primary.colorActive,
-    "--intent-primary-bg": semantic.intent.primary.background,
-    "--intent-primary-bg-hover": semantic.intent.primary.backgroundHover,
-    "--intent-primary-bg-active": semantic.intent.primary.backgroundActive,
-    "--intent-primary-border": semantic.intent.primary.border,
-    "--intent-primary-text": semantic.intent.primary.text,
-    "--intent-success": semantic.intent.success.color,
-    "--intent-success-hover": semantic.intent.success.colorHover,
-    "--intent-success-active": semantic.intent.success.colorActive,
-    "--intent-success-bg": semantic.intent.success.background,
-    "--intent-success-bg-hover": semantic.intent.success.backgroundHover,
-    "--intent-success-bg-active": semantic.intent.success.backgroundActive,
-    "--intent-success-border": semantic.intent.success.border,
-    "--intent-success-text": semantic.intent.success.text,
-    "--intent-warning": semantic.intent.warning.color,
-    "--intent-warning-hover": semantic.intent.warning.colorHover,
-    "--intent-warning-active": semantic.intent.warning.colorActive,
-    "--intent-warning-bg": semantic.intent.warning.background,
-    "--intent-warning-bg-hover": semantic.intent.warning.backgroundHover,
-    "--intent-warning-bg-active": semantic.intent.warning.backgroundActive,
-    "--intent-warning-border": semantic.intent.warning.border,
-    "--intent-warning-text": semantic.intent.warning.text,
-    "--intent-danger": semantic.intent.danger.color,
-    "--intent-danger-hover": semantic.intent.danger.colorHover,
-    "--intent-danger-active": semantic.intent.danger.colorActive,
-    "--intent-danger-bg": semantic.intent.danger.background,
-    "--intent-danger-bg-hover": semantic.intent.danger.backgroundHover,
-    "--intent-danger-bg-active": semantic.intent.danger.backgroundActive,
-    "--intent-danger-border": semantic.intent.danger.border,
-    "--intent-danger-text": semantic.intent.danger.text,
-    "--intent-neutral": semantic.intent.neutral.color,
-    "--intent-neutral-hover": semantic.intent.neutral.colorHover,
-    "--intent-neutral-active": semantic.intent.neutral.colorActive,
-    "--intent-neutral-bg": semantic.intent.neutral.background,
-    "--intent-neutral-bg-hover": semantic.intent.neutral.backgroundHover,
-    "--intent-neutral-bg-active": semantic.intent.neutral.backgroundActive,
-    "--intent-neutral-border": semantic.intent.neutral.border,
-    "--intent-neutral-text": semantic.intent.neutral.text,
-    // Surface
-    "--surface-base": semantic.surface.base.background,
-    "--surface-base-border": semantic.surface.base.border,
-    "--surface-elevated": semantic.surface.elevated.background,
-    "--surface-elevated-border": semantic.surface.elevated.border,
-    "--surface-overlay": semantic.surface.overlay.background,
-    // Text
-    "--text-heading": semantic.text.heading,
-    "--text-body": semantic.text.body,
-    "--text-muted": semantic.text.muted,
-    "--text-disabled": semantic.text.disabled,
-    // Spacing
-    "--spacing-0": spacing[0],
-    "--spacing-1": spacing[1],
-    "--spacing-2": spacing[2],
-    "--spacing-3": spacing[3],
-    "--spacing-4": spacing[4],
-    "--spacing-5": spacing[5],
-    "--spacing-6": spacing[6],
-    "--spacing-8": spacing[8],
-    "--spacing-10": spacing[10],
-    "--spacing-12": spacing[12],
-    "--spacing-16": spacing[16],
-    "--spacing-20": spacing[20],
-    "--spacing-24": spacing[24],
-    // Radius
-    "--radius-none": radius.none,
-    "--radius-sm": radius.sm,
-    "--radius-base": radius.base,
-    "--radius-md": radius.md,
-    "--radius-lg": radius.lg,
-    "--radius-xl": radius.xl,
-    "--radius-2xl": radius["2xl"],
-    "--radius-3xl": radius["3xl"],
-    "--radius-full": radius.full,
-    // Shadows
-    "--shadow-sm": shadows.sm,
-    "--shadow-base": shadows.base,
-    "--shadow-md": shadows.md,
-    "--shadow-lg": shadows.lg,
-    "--shadow-xl": shadows.xl,
-    "--shadow-2xl": shadows["2xl"],
-    "--shadow-inner": shadows.inner,
-    "--shadow-none": shadows.none,
-    // Z-index
-    "--z-dropdown": String(zIndex.dropdown),
-    "--z-sticky": String(zIndex.sticky),
-    "--z-fixed": String(zIndex.fixed),
-    "--z-modal-backdrop": String(zIndex.modalBackdrop),
-    "--z-modal": String(zIndex.modal),
-    "--z-popover": String(zIndex.popover),
-    "--z-tooltip": String(zIndex.tooltip),
-    // Typography
-    "--font-sans": typography.fontFamily.sans.join(", "),
-    "--font-mono": typography.fontFamily.mono.join(", "),
-    "--font-size-xs": typography.fontSize.xs,
-    "--font-size-sm": typography.fontSize.sm,
-    "--font-size-base": typography.fontSize.base,
-    "--font-size-lg": typography.fontSize.lg,
-    "--font-size-xl": typography.fontSize.xl,
-    "--font-size-2xl": typography.fontSize["2xl"],
-    "--font-size-3xl": typography.fontSize["3xl"],
-    "--font-size-4xl": typography.fontSize["4xl"],
-    "--font-size-5xl": typography.fontSize["5xl"],
-    "--font-weight-normal": typography.fontWeight.normal,
-    "--font-weight-medium": typography.fontWeight.medium,
-    "--font-weight-semibold": typography.fontWeight.semibold,
-    "--font-weight-bold": typography.fontWeight.bold,
-    "--line-height-tight": typography.lineHeight.tight,
-    "--line-height-normal": typography.lineHeight.normal,
-    "--line-height-relaxed": typography.lineHeight.relaxed,
-    // Note: --background-*, --content-*, --border-* variables are already defined in tokens.css
-    // via legacy mappings. We only set shadcn/ui compatibility variables here.
-    // All semantic tokens (background, content, border) are available via tokens.css
-    // which provides both --pd-* and legacy --* variables.
-    // shadcn/ui CSS variable mappings for compatibility (these are NOT in tokens.css)
-    "--background": semantic.surface.base.background,
-    "--foreground": semantic.text.body,
-    "--card": semantic.surface.elevated.background,
-    "--card-foreground": semantic.text.body,
-    "--popover": semantic.surface.elevated.background,
-    "--popover-foreground": semantic.text.body,
-    "--primary": semantic.intent.primary.color,
-    "--primary-foreground": colors.white,
-    "--secondary": semantic.intent.neutral.background,
-    "--secondary-foreground": semantic.intent.neutral.text,
-    "--muted": semantic.intent.neutral.background,
-    "--muted-foreground": semantic.text.muted,
-    "--accent": semantic.intent.primary.background,
-    "--accent-foreground": semantic.intent.primary.text,
-    "--destructive": semantic.intent.danger.color,
-    "--destructive-foreground": colors.white,
-    "--border": semantic.intent.neutral.border,
-    "--input": semantic.intent.neutral.border,
-    "--ring": semantic.intent.primary.color,
+    "--color-white": neutral[100],
+    "--color-black": neutral[950],
+    // shadcn/ui CSS variable mappings for compatibility
+    "--background": semantic.background.primary,
+    "--foreground": semantic.content.primary,
+    "--card": semantic.background.secondary,
+    "--card-foreground": semantic.content.primary,
+    "--popover": semantic.background.secondary,
+    "--popover-foreground": semantic.content.primary,
+    "--primary": semantic.content.secondary,
+    "--primary-foreground": neutral[100],
+    "--secondary": semantic.background.secondary,
+    "--secondary-foreground": semantic.content.primary,
+    "--muted": semantic.background.secondary,
+    "--muted-foreground": semantic.content.subtle,
+    "--accent": semantic.background.secondary,
+    "--accent-foreground": semantic.content.primary,
+    "--destructive": resolvedMode === "light" ? semantic.content.red : semantic.content.red,
+    "--destructive-foreground": neutral[100],
+    "--border": semantic.border.primary,
+    "--input": semantic.border.primary,
+    "--ring": semantic.content.secondary,
     "--radius": radius.md
   };
   return {
@@ -1565,6 +1381,105 @@ function useTheme() {
   return context;
 }
 
+// src/tokens/semantic.ts
+var borderTokens = {
+  light: semanticTokens.light.border,
+  dark: semanticTokens.dark.border
+};
+var contentTokens = {
+  light: semanticTokens.light.content,
+  dark: semanticTokens.dark.content
+};
+var backgroundTokens = {
+  light: semanticTokens.light.background,
+  dark: semanticTokens.dark.background
+};
+function createSemanticTokens(mode) {
+  const isLight = mode === "light";
+  const border = isLight ? borderTokens.light : borderTokens.dark;
+  const content = isLight ? contentTokens.light : contentTokens.dark;
+  const background = isLight ? backgroundTokens.light : backgroundTokens.dark;
+  return {
+    intent: {
+      primary: {
+        color: content.secondary,
+        colorHover: isLight ? neutral[700] : neutral[300],
+        colorActive: isLight ? neutral[800] : neutral[200],
+        background: background.secondary,
+        backgroundHover: background.lowOnHover,
+        backgroundActive: background.tertiary,
+        border: border.primary,
+        text: content.primary,
+        textMuted: content.subtle
+      },
+      success: {
+        color: isLight ? green[600] : green[600],
+        colorHover: isLight ? green[700] : green[500],
+        colorActive: isLight ? green[800] : green[700],
+        background: background.green,
+        backgroundHover: background.greenOnHover,
+        backgroundActive: isLight ? green[300] : green[800],
+        border: border.green,
+        text: content.green,
+        textMuted: isLight ? green[700] : green[300]
+      },
+      warning: {
+        color: isLight ? yellow[600] : yellow[400],
+        colorHover: isLight ? yellow[700] : yellow[300],
+        colorActive: isLight ? yellow[800] : yellow[500],
+        background: background.yellow,
+        backgroundHover: background.yellowOnHover,
+        backgroundActive: isLight ? yellow[200] : yellow[900],
+        border: border.yellow,
+        text: content.yellow,
+        textMuted: isLight ? yellow[700] : yellow[300]
+      },
+      danger: {
+        color: isLight ? red[600] : red[400],
+        colorHover: isLight ? red[700] : red[300],
+        colorActive: isLight ? red[800] : red[500],
+        background: background.red,
+        backgroundHover: background.redOnHover,
+        backgroundActive: isLight ? red[200] : red[900],
+        border: border.red,
+        text: content.red,
+        textMuted: isLight ? red[700] : red[300]
+      },
+      neutral: {
+        color: content.secondary,
+        colorHover: isLight ? neutral[700] : neutral[300],
+        colorActive: isLight ? neutral[800] : neutral[200],
+        background: background.secondary,
+        backgroundHover: background.lowOnHover,
+        backgroundActive: background.tertiary,
+        border: border.primary,
+        text: content.primary,
+        textMuted: content.subtle
+      }
+    },
+    surface: {
+      base: {
+        background: background.primary,
+        border: border.primary
+      },
+      elevated: {
+        background: background.secondary,
+        border: border.secondary
+      },
+      overlay: {
+        background: isLight ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0.7)",
+        border: "transparent"
+      }
+    },
+    text: {
+      heading: content.primary,
+      body: content.primary,
+      muted: content.subtle,
+      disabled: isLight ? content.subtle : neutral[600]
+    }
+  };
+}
+
 // src/tokens/index.ts
 var tokens = {
   colors: {
@@ -1580,13 +1495,7 @@ var tokens = {
     // Legacy color names (for backward compatibility)
     legacy: colors
   },
-  semantic: {
-    border: borderTokens,
-    content: contentTokens,
-    background: backgroundTokens,
-    // Full semantic tokens object
-    all: semanticTokens
-  },
+  semantic: semanticTokens,
   spacing,
   typography,
   radius,