@yuva-devlab/tokens 0.1.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@yuva-devlab/tokens",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css.ts",
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@vanilla-extract/vite-plugin": "^5.1.1",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "@yuva-devlab/eslint-config": "0.1.0",
+    "@yuva-devlab/colors": "0.1.0",
+    "@yuva-devlab/prettier-config": "0.1.0",
+    "@yuva-devlab/typescript-config": "0.1.0"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.17.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "type-check": "tsc --noEmit",
+    "clean:build": "rm -rf dist",
+    "clean:node_modules": "rm -rf node_modules",
+    "clean:turbo": "rm -rf .turbo",
+    "clean": "pnpm run clean:build && pnpm run clean:node_modules && pnpm run clean:turbo"
+  }
+}

package/prettier.config.js

@@ -0,0 +1 @@
+export { default } from "@yuva-devlab/prettier-config";

package/src/breakpoints.css.ts

@@ -0,0 +1,23 @@
+import { createGlobalTheme, createThemeContract } from "@vanilla-extract/css";
+
+/**
+ * Responsive breakpoint tokens.
+ * Mobile-first approach aligned with common device sizes.
+ */
+export const breakpoints = createThemeContract({
+  xs: null, // Mobile portrait
+  sm: null, // Mobile landscape
+  md: null, // Tablet
+  lg: null, // Desktop
+  xl: null, // Large desktop
+  "2xl": null, // Extra large desktop
+});
+
+createGlobalTheme(":root", breakpoints, {
+  xs: "0px",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px",
+});

package/src/colors.css.ts

@@ -0,0 +1,73 @@
+import { createGlobalThemeContract } from "@vanilla-extract/css";
+
+const semanticGroup = (
+  name: string,
+): {
+  main: string;
+  onMain: string;
+  container: string;
+  onContainer: string;
+  hover: string;
+  active: string;
+  subtle: string;
+} => ({
+  main: `yd-color-${name}`,
+  onMain: `yd-color-on-${name}`,
+  container: `yd-color-${name}-container`,
+  onContainer: `yd-color-on-${name}-container`,
+  hover: `yd-color-${name}-hover`,
+  active: `yd-color-${name}-active`,
+  subtle: `yd-color-${name}-subtle`,
+});
+
+export const colors = createGlobalThemeContract({
+  // Semantic Brand Colors (Seed-based)
+  brand: {
+    primary: semanticGroup("primary"),
+    secondary: semanticGroup("secondary"),
+    tertiary: semanticGroup("tertiary"),
+    danger: semanticGroup("danger"),
+    success: semanticGroup("success"),
+    warning: semanticGroup("warning"),
+    info: semanticGroup("info"),
+  },
+
+  // Text Tokens
+  text: {
+    primary: "yd-color-text-primary",
+    secondary: "yd-color-text-secondary",
+    tertiary: "yd-color-text-tertiary",
+    disabled: "yd-color-text-disabled",
+    onPrimary: "yd-color-text-on-primary",
+    onColor: "yd-color-text-on-color",
+    inverse: "yd-color-text-inverse",
+  },
+
+  // Background Tokens
+  bg: {
+    body: "yd-color-bg-body",
+    surface: "yd-color-bg-surface",
+    surfaceHover: "yd-color-bg-surface-hover",
+    surfaceActive: "yd-color-bg-surface-active",
+    surfaceRaised: "yd-color-bg-surface-raised",
+    surfaceOverlay: "yd-color-bg-surface-overlay",
+    canvas: "yd-color-bg-canvas",
+    subtle: "yd-color-bg-subtle",
+    disabled: "yd-color-bg-disabled",
+  },
+
+  // Border Tokens
+  border: {
+    subtle: "yd-color-border-subtle",
+    default: "yd-color-border-default",
+    strong: "yd-color-border-strong",
+    interactive: "yd-color-border-interactive",
+    disabled: "yd-color-border-disabled",
+  },
+
+  // Interaction Tokens
+  interaction: {
+    focusRing: "yd-color-focus-ring",
+    overlay: "yd-color-overlay",
+  },
+});

package/src/index.ts

@@ -0,0 +1,16 @@
+export { colors } from "./colors.css";
+export { spacing } from "./spacing.css";
+export { typography } from "./typography.css";
+export { radii } from "./radii.css";
+export { shadows } from "./shadows.css";
+export { transitions } from "./transitions.css";
+export { breakpoints } from "./breakpoints.css";
+export { zIndex } from "./zindex.css";
+export { palettes } from "./palettes.css";
+
+export {
+  // Semantic themes (primary API)
+  defaultTheme,
+  lightTheme,
+  darkTheme,
+} from "./themes.css";

package/src/palettes.css.ts

@@ -0,0 +1,122 @@
+import { createGlobalTheme, createThemeContract } from "@vanilla-extract/css";
+
+import { generateTonalPalette } from "./utils/color-generator";
+
+/**
+ * Seed colors for tonal palette generation
+ * These are the basis for the entire tonal system.
+ */
+export const SEEDS = {
+  primary: "#3e6a4d",
+  secondary: "#516350",
+  tertiary: "#3b6470",
+  error: "#ba1a1a",
+  neutral: "#5e615b",
+  neutralVariant: "#5d6259",
+};
+
+/**
+ * Complete tonal palette system with 13 levels per color (0-100)
+ * These are the foundation colors that semantic tokens map to
+ */
+export const palettes = createThemeContract({
+  primary: {
+    0: null,
+    10: null,
+    20: null,
+    30: null,
+    40: null,
+    50: null,
+    60: null,
+    70: null,
+    80: null,
+    90: null,
+    95: null,
+    99: null,
+    100: null,
+  },
+  secondary: {
+    0: null,
+    10: null,
+    20: null,
+    30: null,
+    40: null,
+    50: null,
+    60: null,
+    70: null,
+    80: null,
+    90: null,
+    95: null,
+    99: null,
+    100: null,
+  },
+  tertiary: {
+    0: null,
+    10: null,
+    20: null,
+    30: null,
+    40: null,
+    50: null,
+    60: null,
+    70: null,
+    80: null,
+    90: null,
+    95: null,
+    99: null,
+    100: null,
+  },
+  error: {
+    0: null,
+    10: null,
+    20: null,
+    30: null,
+    40: null,
+    50: null,
+    60: null,
+    70: null,
+    80: null,
+    90: null,
+    95: null,
+    99: null,
+    100: null,
+  },
+  neutral: {
+    0: null,
+    10: null,
+    20: null,
+    30: null,
+    40: null,
+    50: null,
+    60: null,
+    70: null,
+    80: null,
+    90: null,
+    95: null,
+    99: null,
+    100: null,
+  },
+  neutralVariant: {
+    0: null,
+    10: null,
+    20: null,
+    30: null,
+    40: null,
+    50: null,
+    60: null,
+    70: null,
+    80: null,
+    90: null,
+    95: null,
+    99: null,
+    100: null,
+  },
+});
+
+createGlobalTheme(":root", palettes, {
+  primary: generateTonalPalette(SEEDS.primary),
+  secondary: generateTonalPalette(SEEDS.secondary),
+  tertiary: generateTonalPalette(SEEDS.tertiary),
+  error: generateTonalPalette(SEEDS.error),
+  neutral: generateTonalPalette(SEEDS.neutral),
+  neutralVariant: generateTonalPalette(SEEDS.neutralVariant),
+});

package/src/radii.css.ts

@@ -0,0 +1,28 @@
+import { createGlobalTheme, createThemeContract } from "@vanilla-extract/css";
+
+/**
+ * Border radius tokens for modern rounded aesthetic.
+ */
+export const radii = createThemeContract({
+  none: null,
+  xs: null,
+  sm: null,
+  md: null,
+  lg: null,
+  xl: null,
+  "2xl": null,
+  "3xl": null,
+  full: null,
+});
+
+createGlobalTheme(":root", radii, {
+  none: "0",
+  xs: "2px",
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "20px",
+  "3xl": "24px",
+  full: "9999px",
+});

package/src/shadows.css.ts

@@ -0,0 +1,28 @@
+import { createGlobalTheme, createThemeContract } from "@vanilla-extract/css";
+
+/**
+ * Provides depth and hierarchy through layered shadows.
+ */
+export const shadows = createThemeContract({
+  none: null,
+  xs: null,
+  sm: null,
+  md: null,
+  lg: null,
+  xl: null,
+  "2xl": null,
+  inner: null,
+  focus: null, // Accessible focus indicator
+});
+
+createGlobalTheme(":root", shadows, {
+  none: "none",
+  xs: "0 1px 2px 0 rgba(60, 64, 67, 0.15)",
+  sm: "0 1px 3px 0 rgba(60, 64, 67, 0.15), 0 1px 2px 0 rgba(60, 64, 67, 0.10)",
+  md: "0 4px 6px -1px rgba(60, 64, 67, 0.15), 0 2px 4px -1px rgba(60, 64, 67, 0.10)",
+  lg: "0 10px 15px -3px rgba(60, 64, 67, 0.15), 0 4px 6px -2px rgba(60, 64, 67, 0.10)",
+  xl: "0 20px 25px -5px rgba(60, 64, 67, 0.15), 0 10px 10px -5px rgba(60, 64, 67, 0.10)",
+  "2xl": "0 25px 50px -12px rgba(60, 64, 67, 0.25)",
+  inner: "inset 0 2px 4px 0 rgba(60, 64, 67, 0.10)",
+  focus: "0 0 0 3px rgba(26, 115, 232, 0.2)",
+});

package/src/spacing.css.ts

@@ -0,0 +1,31 @@
+import { createGlobalTheme, createThemeContract } from "@vanilla-extract/css";
+
+/**
+ * Spacing tokens using 4px base unit for consistent rhythm.
+ * Expanded scale for granular control.
+ */
+export const spacing = createThemeContract({
+  "2xs": null,
+  xs: null,
+  sm: null,
+  md: null,
+  lg: null,
+  xl: null,
+  "2xl": null,
+  "3xl": null,
+  "4xl": null,
+  "5xl": null,
+});
+
+createGlobalTheme(":root", spacing, {
+  "2xs": "2px",
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+  "2xl": "32px",
+  "3xl": "48px",
+  "4xl": "64px",
+  "5xl": "96px",
+});

package/src/themes.css.ts

@@ -0,0 +1,181 @@
+import {
+  createGlobalTheme,
+  createTheme,
+  globalStyle,
+} from "@vanilla-extract/css";
+
+import { colors } from "./colors.css";
+import { palettes } from "./palettes.css";
+import {
+  generateSemanticShades,
+  type SemanticShades,
+  type TonalPalette,
+} from "./utils/color-generator";
+
+/**
+ * Semantic Color Mapping
+ * Instead of hardcoding hex codes, we map semantic roles to specific tones
+ * in our foundation palettes. This ensures that changing a foundation seed
+ * updates the entire theme consistently.
+ */
+const mapTones = (
+  palette: TonalPalette,
+  mainTone: keyof TonalPalette,
+  onMainTone: keyof TonalPalette,
+  containerTone: keyof TonalPalette,
+  onContainerTone: keyof TonalPalette,
+): SemanticShades => ({
+  main: palette[mainTone],
+  onMain: palette[onMainTone],
+  container: palette[containerTone],
+  onContainer: palette[onContainerTone],
+  // Tonal generation for interaction states
+  // Note: These can also be mapped if we add more tones to our foundation
+  hover: palette[mainTone === 40 ? 50 : 70], // Dynamic hover
+  active: palette[mainTone === 40 ? 60 : 60], // Dynamic active
+  subtle: palette[95],
+});
+
+/**
+ * ============================================================================
+ * SEMANTIC COLOR THEMES
+ * ============================================================================
+ * Developer-friendly API that maps to palette values
+ */
+
+const primaryPalette = mapTones(palettes.primary, 40, 100, 90, 10);
+const secondaryPalette = mapTones(palettes.secondary, 40, 100, 90, 10);
+const tertiaryPalette = mapTones(palettes.tertiary, 40, 100, 90, 10);
+const errorPalette = mapTones(palettes.error, 40, 100, 90, 10);
+
+// We keep these as generated for now as they are distinct semantic scales
+const successPalette = generateSemanticShades("#3e6a4d");
+const warningPalette = generateSemanticShades("#815600");
+const infoPalette = generateSemanticShades("#006682");
+
+/**
+ * Light Theme - Semantic Colors
+ * Maps semantic tokens to appropriate palette tones globally on :root.
+ */
+createGlobalTheme(":root", colors, {
+  brand: {
+    primary: primaryPalette,
+    secondary: secondaryPalette,
+    tertiary: tertiaryPalette,
+    danger: errorPalette,
+    success: successPalette,
+    warning: warningPalette,
+    info: infoPalette,
+  },
+
+  text: {
+    primary: palettes.neutral[10],
+    secondary: palettes.neutralVariant[30],
+    tertiary: palettes.neutralVariant[50],
+    disabled: palettes.neutral[80],
+    onPrimary: palettes.primary[100],
+    onColor: palettes.primary[100],
+    inverse: palettes.neutral[95],
+  },
+
+  bg: {
+    body: palettes.neutral[99],
+    surface: palettes.neutral[99],
+    surfaceHover: palettes.neutral[95],
+    surfaceActive: palettes.neutral[90],
+    surfaceRaised: palettes.neutral[100],
+    surfaceOverlay: palettes.neutral[100],
+    canvas: palettes.neutral[95],
+    subtle: palettes.primary[95],
+    disabled: palettes.neutral[90],
+  },
+
+  border: {
+    subtle: palettes.neutralVariant[90],
+    default: palettes.neutralVariant[50],
+    strong: palettes.neutralVariant[30],
+    interactive: palettes.primary[40],
+    disabled: palettes.neutralVariant[80],
+  },
+
+  interaction: {
+    focusRing: `0 0 0 3px ${palettes.primary[90]}`,
+    overlay: "rgba(0, 0, 0, 0.12)",
+  },
+});
+
+export const lightTheme = "light-theme";
+
+/**
+ * Dark Theme - Semantic Colors
+ * Maps semantic tokens to appropriate palette tones for dark mode
+ */
+const darkPrimaryPalette = mapTones(palettes.primary, 80, 20, 30, 90);
+const darkSecondaryPalette = mapTones(palettes.secondary, 80, 20, 30, 90);
+const darkTertiaryPalette = mapTones(palettes.tertiary, 80, 20, 30, 90);
+const darkErrorPalette = mapTones(palettes.error, 80, 20, 30, 90);
+
+const darkSuccessPalette = generateSemanticShades("#3e6a4d", "dark");
+const darkWarningPalette = generateSemanticShades("#815600", "dark");
+const darkInfoPalette = generateSemanticShades("#006682", "dark");
+
+export const darkTheme = createTheme(colors, {
+  brand: {
+    primary: darkPrimaryPalette,
+    secondary: darkSecondaryPalette,
+    tertiary: darkTertiaryPalette,
+    danger: darkErrorPalette,
+    success: darkSuccessPalette,
+    warning: darkWarningPalette,
+    info: darkInfoPalette,
+  },
+
+  text: {
+    primary: palettes.neutral[90],
+    secondary: palettes.neutralVariant[80],
+    tertiary: palettes.neutralVariant[60],
+    disabled: palettes.neutral[30],
+    onPrimary: palettes.primary[20],
+    onColor: palettes.primary[10],
+    inverse: palettes.neutral[10],
+  },
+
+  bg: {
+    body: palettes.neutral[10],
+    surface: palettes.neutral[10],
+    surfaceHover: palettes.neutral[20],
+    surfaceActive: palettes.neutral[20],
+    surfaceRaised: palettes.neutral[20],
+    surfaceOverlay: palettes.neutral[20],
+    canvas: palettes.neutral[0],
+    subtle: palettes.primary[20],
+    disabled: palettes.neutral[20],
+  },
+
+  border: {
+    subtle: palettes.neutralVariant[30],
+    default: palettes.neutralVariant[60],
+    strong: palettes.neutralVariant[80],
+    interactive: palettes.primary[80],
+    disabled: palettes.neutralVariant[20],
+  },
+
+  interaction: {
+    focusRing: `0 0 0 3px ${palettes.primary[40]}`,
+    overlay: "rgba(255, 255, 255, 0.08)",
+  },
+});
+
+/**
+ * Default theme exports
+ */
+export const defaultTheme = lightTheme;
+
+/**
+ * Global Styles
+ * These ensure the core brand experience (like text selection) is consistent.
+ */
+globalStyle("::selection", {
+  backgroundColor: colors.brand.primary.container,
+  color: colors.brand.primary.onContainer,
+});

package/src/transitions.css.ts

@@ -0,0 +1,38 @@
+import { createGlobalTheme, createThemeContract } from "@vanilla-extract/css";
+
+/**
+ * Transition and animation tokens.
+ */
+export const transitions = createThemeContract({
+  duration: {
+    instant: null,
+    fast: null,
+    normal: null,
+    slow: null,
+    slower: null,
+  },
+  easing: {
+    standard: null, // Deceleration curve
+    emphasized: null, // emphasized easing
+    decelerate: null, // Exit animations
+    accelerate: null, // Enter animations
+    linear: null,
+  },
+});
+
+createGlobalTheme(":root", transitions, {
+  duration: {
+    instant: "0ms",
+    fast: "100ms",
+    normal: "200ms",
+    slow: "300ms",
+    slower: "500ms",
+  },
+  easing: {
+    standard: "cubic-bezier(0.4, 0.0, 0.2, 1)", // Deceleration
+    emphasized: "cubic-bezier(0.2, 0.0, 0, 1)", // emphasized
+    decelerate: "cubic-bezier(0.0, 0.0, 0.2, 1)", // Exit
+    accelerate: "cubic-bezier(0.4, 0.0, 1, 1)", // Enter
+    linear: "linear",
+  },
+});

package/src/typography.css.ts

@@ -0,0 +1,77 @@
+import { createGlobalTheme, createThemeContract } from "@vanilla-extract/css";
+
+/**
+ * Typography tokens using modern font stack.
+ * Expanded scale for modern web applications.
+ */
+export const typography = createThemeContract({
+  fonts: {
+    sans: null,
+    mono: null,
+    display: null,
+  },
+  fontSizes: {
+    xs: null,
+    sm: null,
+    md: null,
+    lg: null,
+    xl: null,
+    "2xl": null,
+    "3xl": null,
+    "4xl": null,
+    "5xl": null,
+    "6xl": null,
+  },
+  fontWeights: {
+    regular: null,
+    medium: null,
+    semibold: null,
+    bold: null,
+  },
+  lineHeights: {
+    tight: null,
+    normal: null,
+    relaxed: null,
+  },
+  letterSpacing: {
+    tight: null,
+    normal: null,
+    wide: null,
+  },
+});
+
+createGlobalTheme(":root", typography, {
+  fonts: {
+    sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    mono: '"Roboto Mono", "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace',
+    display: '"Inter", -apple-system, BlinkMacSystemFont, sans-serif',
+  },
+  fontSizes: {
+    xs: "0.75rem", // 12px
+    sm: "0.875rem", // 14px
+    md: "1rem", // 16px
+    lg: "1.125rem", // 18px
+    xl: "1.25rem", // 20px
+    "2xl": "1.5rem", // 24px
+    "3xl": "1.875rem", // 30px
+    "4xl": "2.25rem", // 36px
+    "5xl": "3rem", // 48px
+    "6xl": "3.75rem", // 60px
+  },
+  fontWeights: {
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+  },
+  lineHeights: {
+    tight: "1.25",
+    normal: "1.5",
+    relaxed: "1.75",
+  },
+  letterSpacing: {
+    tight: "-0.01em",
+    normal: "0",
+    wide: "0.025em",
+  },
+});