@synapsly/tokens 0.1.0 → 0.2.0

package/dist/cssVars.js

@@ -0,0 +1,951 @@
+// src/createThemeTokens.ts
+function createThemeTokens(base, overrides = {}) {
+  return mergeTokens(base, overrides);
+}
+function mergeTokens(base, overrides) {
+  if (!isRecord(base) || !isRecord(overrides)) {
+    return overrides ?? base;
+  }
+  const merged = { ...base };
+  for (const key of Reflect.ownKeys(overrides)) {
+    merged[key] = mergeTokens(base[key], overrides[key]);
+  }
+  return merged;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+// src/primitiveTokens.ts
+var primitiveTokens = {
+  color: {
+    white: "#ffffff",
+    black: "#000000",
+    transparent: "transparent",
+    neutral: {
+      25: "#fcfbfb",
+      50: "#f8f7f6",
+      100: "#efedea",
+      200: "#dedad5",
+      300: "#ccc5be",
+      400: "#beb6ad",
+      500: "#b4aba3",
+      600: "#9d9389",
+      700: "#7e756e",
+      800: "#645d57",
+      900: "#514c47",
+      950: "#2a2624",
+      975: "#161413"
+    },
+    brand: {
+      25: "#fdfbf8",
+      50: "#fbf7f1",
+      100: "#f5ecdf",
+      200: "#ead8bf",
+      300: "#dec29d",
+      400: "#d5b186",
+      500: "#cca67b",
+      600: "#b88c5d",
+      700: "#966f49",
+      800: "#76583b",
+      900: "#604832",
+      950: "#332419",
+      975: "#1c130d"
+    },
+    blue: {
+      50: "#eff6ff",
+      100: "#dbeafe",
+      200: "#bfdbfe",
+      300: "#93c5fd",
+      400: "#60a5fa",
+      500: "#3b82f6",
+      600: "#2563eb",
+      700: "#1d4ed8",
+      800: "#1e40af",
+      900: "#1e3a8a",
+      950: "#172554"
+    },
+    green: {
+      50: "#f0fdf4",
+      100: "#dcfce7",
+      200: "#bbf7d0",
+      300: "#86efac",
+      400: "#4ade80",
+      500: "#22c55e",
+      600: "#16a34a",
+      700: "#15803d",
+      800: "#166534",
+      900: "#14532d",
+      950: "#052e16"
+    },
+    yellow: {
+      50: "#fefce8",
+      100: "#fef9c3",
+      200: "#fef08a",
+      300: "#fde047",
+      400: "#facc15",
+      500: "#eab308",
+      600: "#ca8a04",
+      700: "#a16207",
+      800: "#854d0e",
+      900: "#713f12",
+      950: "#422006"
+    },
+    orange: {
+      50: "#fff7ed",
+      100: "#ffedd5",
+      200: "#fed7aa",
+      300: "#fdba74",
+      400: "#fb923c",
+      500: "#f97316",
+      600: "#ea580c",
+      700: "#c2410c",
+      800: "#9a3412",
+      900: "#7c2d12",
+      950: "#431407"
+    },
+    red: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a"
+    },
+    purple: {
+      50: "#faf5ff",
+      100: "#f3e8ff",
+      200: "#e9d5ff",
+      300: "#d8b4fe",
+      400: "#c084fc",
+      500: "#a855f7",
+      600: "#9333ea",
+      700: "#7e22ce",
+      800: "#6b21a8",
+      900: "#581c87",
+      950: "#3b0764"
+    },
+    cyan: {
+      50: "#ecfeff",
+      100: "#cffafe",
+      200: "#a5f3fc",
+      300: "#67e8f9",
+      400: "#22d3ee",
+      500: "#06b6d4",
+      600: "#0891b2",
+      700: "#0e7490",
+      800: "#155e75",
+      900: "#164e63",
+      950: "#083344"
+    },
+    pink: {
+      50: "#fdf2f8",
+      100: "#fce7f3",
+      200: "#fbcfe8",
+      300: "#f9a8d4",
+      400: "#f472b6",
+      500: "#ec4899",
+      600: "#db2777",
+      700: "#be185d",
+      800: "#9d174d",
+      900: "#831843",
+      950: "#500724"
+    }
+  },
+  fontFamily: {
+    sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    mono: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace'
+  },
+  fontSize: {
+    75: "0.75rem",
+    87: "0.875rem",
+    100: "1rem",
+    112: "1.125rem",
+    125: "1.25rem",
+    150: "1.5rem",
+    187: "1.875rem",
+    225: "2.25rem",
+    300: "3rem"
+  },
+  fontWeight: {
+    400: "400",
+    500: "500",
+    600: "600",
+    700: "700"
+  },
+  lineHeight: {
+    100: "1",
+    120: "1.2",
+    150: "1.5",
+    175: "1.75"
+  },
+  letterSpacing: {
+    "-2": "-0.02em",
+    "-1": "-0.01em",
+    0: "0",
+    1: "0.01em",
+    2: "0.02em",
+    4: "0.04em"
+  },
+  space: {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    8: "2rem",
+    10: "2.5rem",
+    12: "3rem",
+    16: "4rem",
+    20: "5rem",
+    24: "6rem",
+    32: "8rem",
+    64: "16rem"
+  },
+  radius: {
+    0: "0",
+    2: "0.125rem",
+    4: "0.25rem",
+    8: "0.5rem",
+    12: "0.75rem",
+    9999: "9999px"
+  },
+  shadow: {
+    0: "none",
+    1: "0 1px 2px rgb(17 24 39 / 8%)",
+    2: "0 2px 8px rgb(17 24 39 / 10%)",
+    3: "0 8px 24px rgb(17 24 39 / 12%)",
+    4: "0 16px 40px rgb(17 24 39 / 16%)",
+    5: "0 24px 64px rgb(17 24 39 / 20%)",
+    inner: "inset 0 1px 2px rgb(17 24 39 / 8%)",
+    focus: "0 0 0 3px rgb(184 140 93 / 28%)"
+  },
+  zIndex: {
+    0: "0",
+    10: "10",
+    100: "100",
+    1e3: "1000",
+    1100: "1100",
+    1200: "1200"
+  },
+  duration: {
+    0: "0ms",
+    120: "120ms",
+    200: "200ms",
+    320: "320ms"
+  },
+  easing: {
+    standard: "cubic-bezier(0.2, 0, 0, 1)",
+    emphasized: "cubic-bezier(0.2, 0, 0, 1)",
+    entrance: "cubic-bezier(0, 0, 0.2, 1)",
+    exit: "cubic-bezier(0.4, 0, 1, 1)"
+  },
+  breakpoint: {
+    360: "360px",
+    640: "640px",
+    768: "768px",
+    1024: "1024px",
+    1280: "1280px"
+  },
+  opacity: {
+    0: "0",
+    40: "0.4",
+    60: "0.6",
+    64: "0.64",
+    100: "1"
+  },
+  borderWidth: {
+    0: "0",
+    1: "1px",
+    2: "2px",
+    4: "4px"
+  },
+  borderStyle: {
+    solid: "solid",
+    dashed: "dashed"
+  },
+  iconSize: {
+    12: "0.75rem",
+    16: "1rem",
+    20: "1.25rem",
+    24: "1.5rem",
+    32: "2rem"
+  }
+};
+
+// src/resolveTokenReferences.ts
+function resolveTokenReferences(value, source) {
+  if (typeof value === "string") {
+    const match = value.match(/^\{(.+)\}$/);
+    if (!match) {
+      return value;
+    }
+    const referencePath = match[1];
+    if (!referencePath) {
+      return value;
+    }
+    return getPath(source, referencePath);
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => resolveTokenReferences(item, source));
+  }
+  if (typeof value === "object" && value !== null) {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, childValue]) => [
+        key,
+        resolveTokenReferences(childValue, source)
+      ])
+    );
+  }
+  return value;
+}
+function getPath(source, path) {
+  return path.split(".").reduce((current, segment) => {
+    if (typeof current !== "object" || current === null || !(segment in current)) {
+      throw new Error(`Unable to resolve token reference: {${path}}`);
+    }
+    return current[segment];
+  }, source);
+}
+
+// src/semanticTokenReferences.ts
+var defaultLightSemanticTokenReferences = {
+  color: {
+    bg: {
+      canvas: "{primitive.color.white}",
+      surface: "{primitive.color.neutral.50}",
+      elevated: "{primitive.color.white}",
+      inverse: "{primitive.color.neutral.950}",
+      disabled: "{primitive.color.neutral.100}",
+      overlay: "rgb(3 7 18 / 60%)"
+    },
+    fg: {
+      primary: "{primitive.color.neutral.950}",
+      secondary: "{primitive.color.neutral.600}",
+      tertiary: "{primitive.color.neutral.500}",
+      inverse: "{primitive.color.white}",
+      disabled: "{primitive.color.neutral.400}",
+      brand: "{primitive.color.brand.700}",
+      success: "{primitive.color.green.700}",
+      warning: "{primitive.color.yellow.700}",
+      danger: "{primitive.color.red.700}",
+      info: "{primitive.color.cyan.700}"
+    },
+    border: {
+      subtle: "{primitive.color.neutral.100}",
+      default: "{primitive.color.neutral.200}",
+      strong: "{primitive.color.neutral.400}",
+      focus: "{primitive.color.brand.600}",
+      disabled: "{primitive.color.neutral.200}",
+      success: "{primitive.color.green.300}",
+      warning: "{primitive.color.yellow.300}",
+      danger: "{primitive.color.red.300}"
+    },
+    action: {
+      primary: {
+        bg: "{primitive.color.brand.500}",
+        bgHover: "{primitive.color.brand.600}",
+        bgActive: "{primitive.color.brand.700}",
+        border: "{primitive.color.brand.500}",
+        icon: "{primitive.color.white}",
+        fg: "{primitive.color.white}"
+      },
+      secondary: {
+        bg: "{primitive.color.brand.50}",
+        bgHover: "{primitive.color.brand.100}",
+        bgActive: "{primitive.color.brand.200}",
+        border: "{primitive.color.brand.200}",
+        icon: "{primitive.color.brand.800}",
+        fg: "{primitive.color.brand.800}"
+      },
+      danger: {
+        bg: "{primitive.color.red.600}",
+        bgHover: "{primitive.color.red.700}",
+        bgActive: "{primitive.color.red.800}",
+        border: "{primitive.color.red.600}",
+        icon: "{primitive.color.white}",
+        fg: "{primitive.color.white}"
+      },
+      disabled: {
+        bg: "{primitive.color.neutral.200}",
+        border: "{primitive.color.neutral.200}",
+        icon: "{primitive.color.neutral.400}",
+        fg: "{primitive.color.neutral.400}"
+      }
+    },
+    state: {
+      hover: {
+        bg: "{primitive.color.neutral.100}"
+      },
+      pressed: {
+        bg: "{primitive.color.neutral.200}"
+      },
+      selected: {
+        bg: "{primitive.color.brand.50}",
+        border: "{primitive.color.brand.500}",
+        fg: "{primitive.color.brand.800}"
+      },
+      focus: {
+        ring: "{primitive.color.brand.600}"
+      },
+      loading: {
+        bg: "{primitive.color.neutral.100}",
+        fg: "{primitive.color.neutral.500}"
+      },
+      visited: {
+        fg: "{primitive.color.purple.700}"
+      },
+      readonly: {
+        bg: "{primitive.color.neutral.50}",
+        border: "{primitive.color.neutral.200}",
+        fg: "{primitive.color.neutral.700}"
+      }
+    },
+    form: {
+      bg: "{primitive.color.white}",
+      bgHover: "{primitive.color.neutral.50}",
+      border: "{primitive.color.neutral.300}",
+      borderHover: "{primitive.color.neutral.400}",
+      borderFocus: "{primitive.color.brand.600}",
+      borderInvalid: "{primitive.color.red.600}",
+      fg: "{primitive.color.neutral.950}",
+      placeholder: "{primitive.color.neutral.500}",
+      caret: "{primitive.color.brand.700}",
+      disabled: {
+        bg: "{primitive.color.neutral.100}",
+        border: "{primitive.color.neutral.200}",
+        fg: "{primitive.color.neutral.400}"
+      },
+      readonly: {
+        bg: "{primitive.color.neutral.50}",
+        border: "{primitive.color.neutral.200}",
+        fg: "{primitive.color.neutral.700}"
+      }
+    },
+    feedback: {
+      success: {
+        bg: "{primitive.color.green.50}",
+        fg: "{primitive.color.green.700}"
+      },
+      warning: {
+        bg: "{primitive.color.yellow.50}",
+        fg: "{primitive.color.yellow.700}"
+      },
+      danger: {
+        bg: "{primitive.color.red.50}",
+        fg: "{primitive.color.red.700}"
+      },
+      info: {
+        bg: "{primitive.color.cyan.50}",
+        fg: "{primitive.color.cyan.700}"
+      }
+    }
+  },
+  typography: {
+    fontFamily: {
+      body: "{primitive.fontFamily.sans}",
+      heading: "{primitive.fontFamily.sans}",
+      code: "{primitive.fontFamily.mono}"
+    },
+    fontSize: {
+      xs: "{primitive.fontSize.75}",
+      sm: "{primitive.fontSize.87}",
+      md: "{primitive.fontSize.100}",
+      lg: "{primitive.fontSize.112}",
+      xl: "{primitive.fontSize.125}",
+      "2xl": "{primitive.fontSize.150}",
+      "3xl": "{primitive.fontSize.187}",
+      "4xl": "{primitive.fontSize.225}"
+    },
+    fontWeight: {
+      regular: "{primitive.fontWeight.400}",
+      medium: "{primitive.fontWeight.500}",
+      semibold: "{primitive.fontWeight.600}",
+      bold: "{primitive.fontWeight.700}"
+    },
+    lineHeight: {
+      tight: "{primitive.lineHeight.120}",
+      normal: "{primitive.lineHeight.150}",
+      relaxed: "{primitive.lineHeight.175}"
+    },
+    letterSpacing: {
+      tighter: "{primitive.letterSpacing.-2}",
+      tight: "{primitive.letterSpacing.-1}",
+      normal: "{primitive.letterSpacing.0}",
+      wide: "{primitive.letterSpacing.1}",
+      wider: "{primitive.letterSpacing.2}",
+      widest: "{primitive.letterSpacing.4}"
+    },
+    text: {
+      display: {
+        fontFamily: "{primitive.fontFamily.sans}",
+        fontSize: "{primitive.fontSize.225}",
+        fontWeight: "{primitive.fontWeight.700}",
+        lineHeight: "{primitive.lineHeight.120}",
+        letterSpacing: "{primitive.letterSpacing.-1}"
+      },
+      heading: {
+        lg: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.187}",
+          fontWeight: "{primitive.fontWeight.700}",
+          lineHeight: "{primitive.lineHeight.120}",
+          letterSpacing: "{primitive.letterSpacing.-1}"
+        },
+        md: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.150}",
+          fontWeight: "{primitive.fontWeight.600}",
+          lineHeight: "{primitive.lineHeight.120}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        },
+        sm: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.125}",
+          fontWeight: "{primitive.fontWeight.600}",
+          lineHeight: "{primitive.lineHeight.120}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        }
+      },
+      body: {
+        lg: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.112}",
+          fontWeight: "{primitive.fontWeight.400}",
+          lineHeight: "{primitive.lineHeight.150}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        },
+        md: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.100}",
+          fontWeight: "{primitive.fontWeight.400}",
+          lineHeight: "{primitive.lineHeight.150}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        },
+        sm: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.87}",
+          fontWeight: "{primitive.fontWeight.400}",
+          lineHeight: "{primitive.lineHeight.150}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        }
+      },
+      label: {
+        md: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.87}",
+          fontWeight: "{primitive.fontWeight.500}",
+          lineHeight: "{primitive.lineHeight.120}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        },
+        sm: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.75}",
+          fontWeight: "{primitive.fontWeight.500}",
+          lineHeight: "{primitive.lineHeight.120}",
+          letterSpacing: "{primitive.letterSpacing.1}"
+        }
+      },
+      caption: {
+        fontFamily: "{primitive.fontFamily.sans}",
+        fontSize: "{primitive.fontSize.75}",
+        fontWeight: "{primitive.fontWeight.400}",
+        lineHeight: "{primitive.lineHeight.150}",
+        letterSpacing: "{primitive.letterSpacing.0}"
+      },
+      code: {
+        fontFamily: "{primitive.fontFamily.mono}",
+        fontSize: "{primitive.fontSize.87}",
+        fontWeight: "{primitive.fontWeight.400}",
+        lineHeight: "{primitive.lineHeight.150}",
+        letterSpacing: "{primitive.letterSpacing.0}"
+      }
+    }
+  },
+  spacing: {
+    none: "{primitive.space.0}",
+    "2xs": "{primitive.space.1}",
+    xs: "{primitive.space.2}",
+    sm: "{primitive.space.3}",
+    md: "{primitive.space.4}",
+    lg: "{primitive.space.6}",
+    xl: "{primitive.space.8}",
+    "2xl": "{primitive.space.12}",
+    "3xl": "{primitive.space.16}",
+    "4xl": "{primitive.space.32}"
+  },
+  radius: {
+    none: "{primitive.radius.0}",
+    xs: "{primitive.radius.2}",
+    sm: "{primitive.radius.4}",
+    md: "{primitive.radius.8}",
+    lg: "{primitive.radius.12}",
+    full: "{primitive.radius.9999}"
+  },
+  shadow: {
+    none: "{primitive.shadow.0}",
+    sm: "{primitive.shadow.1}",
+    md: "{primitive.shadow.3}",
+    lg: "{primitive.shadow.4}",
+    focus: "{primitive.shadow.focus}"
+  },
+  zIndex: {
+    base: "{primitive.zIndex.0}",
+    raised: "{primitive.zIndex.10}",
+    sticky: "{primitive.zIndex.100}",
+    overlay: "{primitive.zIndex.1000}",
+    modal: "{primitive.zIndex.1100}",
+    toast: "{primitive.zIndex.1200}"
+  },
+  motion: {
+    duration: {
+      instant: "{primitive.duration.0}",
+      fast: "{primitive.duration.120}",
+      normal: "{primitive.duration.200}",
+      slow: "{primitive.duration.320}"
+    },
+    easing: {
+      standard: "{primitive.easing.standard}",
+      emphasized: "{primitive.easing.emphasized}",
+      entrance: "{primitive.easing.entrance}",
+      exit: "{primitive.easing.exit}"
+    }
+  },
+  breakpoint: {
+    xs: "{primitive.breakpoint.360}",
+    sm: "{primitive.breakpoint.640}",
+    md: "{primitive.breakpoint.768}",
+    lg: "{primitive.breakpoint.1024}",
+    xl: "{primitive.breakpoint.1280}"
+  },
+  opacity: {
+    disabled: "{primitive.opacity.40}",
+    muted: "{primitive.opacity.64}",
+    overlay: "{primitive.opacity.60}"
+  },
+  border: {
+    width: {
+      none: "{primitive.borderWidth.0}",
+      thin: "{primitive.borderWidth.1}",
+      medium: "{primitive.borderWidth.2}",
+      thick: "{primitive.borderWidth.4}"
+    },
+    style: {
+      solid: "{primitive.borderStyle.solid}",
+      dashed: "{primitive.borderStyle.dashed}"
+    }
+  },
+  iconSize: {
+    xs: "{primitive.iconSize.12}",
+    sm: "{primitive.iconSize.16}",
+    md: "{primitive.iconSize.20}",
+    lg: "{primitive.iconSize.24}",
+    xl: "{primitive.iconSize.32}"
+  },
+  size: {
+    control: {
+      sm: "{primitive.space.8}",
+      md: "{primitive.space.10}",
+      lg: "{primitive.space.12}"
+    },
+    iconButton: {
+      sm: "{primitive.space.8}",
+      md: "{primitive.space.10}",
+      lg: "{primitive.space.12}"
+    }
+  },
+  padding: {
+    control: {
+      x: {
+        sm: "{primitive.space.3}",
+        md: "{primitive.space.4}",
+        lg: "{primitive.space.5}"
+      },
+      y: {
+        sm: "{primitive.space.1}",
+        md: "{primitive.space.2}",
+        lg: "{primitive.space.3}"
+      }
+    },
+    page: {
+      xMobile: "{primitive.space.4}",
+      xDesktop: "{primitive.space.8}"
+    }
+  },
+  gap: {
+    inline: {
+      sm: "{primitive.space.1}",
+      md: "{primitive.space.2}",
+      lg: "{primitive.space.3}"
+    },
+    stack: {
+      sm: "{primitive.space.2}",
+      md: "{primitive.space.4}",
+      lg: "{primitive.space.6}"
+    },
+    section: {
+      sm: "{primitive.space.8}",
+      md: "{primitive.space.12}",
+      lg: "{primitive.space.16}"
+    }
+  },
+  layout: {
+    container: {
+      sm: "{primitive.breakpoint.640}",
+      md: "{primitive.breakpoint.768}",
+      lg: "{primitive.breakpoint.1024}",
+      xl: "{primitive.breakpoint.1280}"
+    },
+    gutter: {
+      mobile: "{primitive.space.4}",
+      desktop: "{primitive.space.8}"
+    },
+    sidebar: {
+      width: "{primitive.space.64}",
+      collapsedWidth: "{primitive.space.16}"
+    }
+  }
+};
+var defaultDarkSemanticTokenReferences = {
+  ...defaultLightSemanticTokenReferences,
+  color: {
+    bg: {
+      canvas: "{primitive.color.neutral.975}",
+      surface: "{primitive.color.neutral.950}",
+      elevated: "{primitive.color.neutral.950}",
+      inverse: "{primitive.color.white}",
+      disabled: "{primitive.color.neutral.900}",
+      overlay: "rgb(0 0 0 / 70%)"
+    },
+    fg: {
+      primary: "{primitive.color.neutral.50}",
+      secondary: "{primitive.color.neutral.300}",
+      tertiary: "{primitive.color.neutral.400}",
+      inverse: "{primitive.color.neutral.950}",
+      disabled: "{primitive.color.neutral.500}",
+      brand: "{primitive.color.brand.300}",
+      success: "{primitive.color.green.300}",
+      warning: "{primitive.color.yellow.300}",
+      danger: "{primitive.color.red.300}",
+      info: "{primitive.color.cyan.300}"
+    },
+    border: {
+      subtle: "{primitive.color.neutral.800}",
+      default: "{primitive.color.neutral.700}",
+      strong: "{primitive.color.neutral.500}",
+      focus: "{primitive.color.brand.400}",
+      disabled: "{primitive.color.neutral.800}",
+      success: "{primitive.color.green.700}",
+      warning: "{primitive.color.yellow.700}",
+      danger: "{primitive.color.red.700}"
+    },
+    action: {
+      primary: {
+        bg: "{primitive.color.brand.400}",
+        bgHover: "{primitive.color.brand.300}",
+        bgActive: "{primitive.color.brand.200}",
+        border: "{primitive.color.brand.400}",
+        icon: "{primitive.color.neutral.950}",
+        fg: "{primitive.color.neutral.950}"
+      },
+      secondary: {
+        bg: "{primitive.color.neutral.800}",
+        bgHover: "{primitive.color.neutral.700}",
+        bgActive: "{primitive.color.neutral.600}",
+        border: "{primitive.color.neutral.700}",
+        icon: "{primitive.color.brand.200}",
+        fg: "{primitive.color.brand.200}"
+      },
+      danger: {
+        bg: "{primitive.color.red.500}",
+        bgHover: "{primitive.color.red.400}",
+        bgActive: "{primitive.color.red.300}",
+        border: "{primitive.color.red.500}",
+        icon: "{primitive.color.white}",
+        fg: "{primitive.color.white}"
+      },
+      disabled: {
+        bg: "{primitive.color.neutral.800}",
+        border: "{primitive.color.neutral.800}",
+        icon: "{primitive.color.neutral.500}",
+        fg: "{primitive.color.neutral.500}"
+      }
+    },
+    state: {
+      hover: {
+        bg: "{primitive.color.neutral.800}"
+      },
+      pressed: {
+        bg: "{primitive.color.neutral.700}"
+      },
+      selected: {
+        bg: "{primitive.color.brand.950}",
+        border: "{primitive.color.brand.400}",
+        fg: "{primitive.color.brand.200}"
+      },
+      focus: {
+        ring: "{primitive.color.brand.400}"
+      },
+      loading: {
+        bg: "{primitive.color.neutral.800}",
+        fg: "{primitive.color.neutral.400}"
+      },
+      visited: {
+        fg: "{primitive.color.purple.300}"
+      },
+      readonly: {
+        bg: "{primitive.color.neutral.900}",
+        border: "{primitive.color.neutral.700}",
+        fg: "{primitive.color.neutral.300}"
+      }
+    },
+    form: {
+      bg: "{primitive.color.neutral.900}",
+      bgHover: "{primitive.color.neutral.800}",
+      border: "{primitive.color.neutral.700}",
+      borderHover: "{primitive.color.neutral.600}",
+      borderFocus: "{primitive.color.brand.400}",
+      borderInvalid: "{primitive.color.red.400}",
+      fg: "{primitive.color.neutral.50}",
+      placeholder: "{primitive.color.neutral.500}",
+      caret: "{primitive.color.brand.300}",
+      disabled: {
+        bg: "{primitive.color.neutral.800}",
+        border: "{primitive.color.neutral.800}",
+        fg: "{primitive.color.neutral.500}"
+      },
+      readonly: {
+        bg: "{primitive.color.neutral.900}",
+        border: "{primitive.color.neutral.700}",
+        fg: "{primitive.color.neutral.300}"
+      }
+    },
+    feedback: {
+      success: {
+        bg: "{primitive.color.green.950}",
+        fg: "{primitive.color.green.300}"
+      },
+      warning: {
+        bg: "{primitive.color.yellow.950}",
+        fg: "{primitive.color.yellow.300}"
+      },
+      danger: {
+        bg: "{primitive.color.red.950}",
+        fg: "{primitive.color.red.300}"
+      },
+      info: {
+        bg: "{primitive.color.cyan.950}",
+        fg: "{primitive.color.cyan.300}"
+      }
+    }
+  }
+};
+
+// src/themeNames.ts
+var themeNames = {
+  light: "light",
+  dark: "dark"
+};
+var themeAttribute = "data-theme";
+function getThemeSelector(name) {
+  return `[${themeAttribute}="${name}"]`;
+}
+
+// src/cssVars.ts
+var cssVarPrefix = "synapsly";
+var defaultResolvedLightCssTokens = resolveTokenReferences(
+  defaultLightSemanticTokenReferences,
+  {
+    primitive: primitiveTokens
+  }
+);
+var defaultResolvedDarkCssTokens = resolveTokenReferences(
+  defaultDarkSemanticTokenReferences,
+  {
+    primitive: primitiveTokens
+  }
+);
+var defaultResolvedCssTokens = defaultResolvedLightCssTokens;
+var cssVars = createCssVarReferences(defaultResolvedLightCssTokens);
+function createCssThemeTokens(base, overrides = {}) {
+  return createThemeTokens(base, overrides);
+}
+function createCssTheme(options) {
+  const tokens = createCssThemeTokens(
+    options.tokens ?? defaultResolvedLightCssTokens,
+    options.overrides ?? {}
+  );
+  const selector = options.selector ?? getThemeSelector(options.name);
+  return {
+    attributes: {
+      [themeAttribute]: options.name
+    },
+    cssText: createCssThemeRule(selector, tokens),
+    name: options.name,
+    selector
+  };
+}
+function createCssThemeRule(selector, tokens) {
+  const declarations = flattenTokenEntries(tokens).map(([path, value]) => `  ${getCssVarName(path)}: ${value};`).join("\n");
+  return `${selector} {
+${declarations}
+}`;
+}
+function createDefaultCssThemes() {
+  return [
+    createCssThemeRule(
+      `:root, ${getThemeSelector(themeNames.light)}`,
+      defaultResolvedLightCssTokens
+    ),
+    createCssThemeRule(getThemeSelector(themeNames.dark), defaultResolvedDarkCssTokens)
+  ].join("\n\n");
+}
+function getCssVarName(path) {
+  return `--${[cssVarPrefix, ...path.map(toKebabCase)].join("-")}`;
+}
+function createCssVarReferences(tokens) {
+  return mapTokenLeaves(tokens, (path) => `var(${getCssVarName(path)})`);
+}
+function mapTokenLeaves(value, mapper, path = []) {
+  if (typeof value === "string") {
+    return mapper(path);
+  }
+  if (isRecord2(value)) {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, childValue]) => [
+        key,
+        mapTokenLeaves(childValue, mapper, [...path, key])
+      ])
+    );
+  }
+  return value;
+}
+function flattenTokenEntries(value, path = []) {
+  if (typeof value === "string") {
+    return [[path, value]];
+  }
+  if (isRecord2(value)) {
+    return Object.entries(value).flatMap(
+      ([key, childValue]) => flattenTokenEntries(childValue, [...path, key])
+    );
+  }
+  return [];
+}
+function toKebabCase(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^a-zA-Z0-9-]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase();
+}
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export { createCssTheme, createCssThemeRule, createCssThemeTokens, createDefaultCssThemes, cssVarPrefix, cssVars, defaultResolvedCssTokens, defaultResolvedDarkCssTokens, defaultResolvedLightCssTokens, getCssVarName, primitiveTokens };
+//# sourceMappingURL=cssVars.js.map
+//# sourceMappingURL=cssVars.js.map