@yuva-devlab/tokens 0.1.2 → 1.1.0

package/src/palettes.css.ts

@@ -1,122 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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",
-  },
-});

package/src/utils/color-generator.ts

@@ -1,90 +0,0 @@
-import {
-  generate,
-  hexToRgb,
-  rgbToHsl,
-  hslToRgb,
-  rgbToHex,
-} from "@yuva-devlab/colors";
-
-export interface TonalPalette {
-  0: string;
-  10: string;
-  20: string;
-  30: string;
-  40: string;
-  50: string;
-  60: string;
-  70: string;
-  80: string;
-  90: string;
-  95: string;
-  99: string;
-  100: string;
-}
-
-export interface SemanticShades {
-  main: string;
-  onMain: string;
-  container: string;
-  onContainer: string;
-  hover: string;
-  active: string;
-  subtle: string;
-}
-
-/**
- * Generates semantic shades (main, hover, active, subtle) from a single seed hex color.
- *
- * Mapping logic based on @yuva-devlab/colors LIGHTNESS_MAP:
- * - main:   Index 5 (Primary)
- * - hover:  Index 6 (Darker)
- * - active: Index 7 (Even darker)
- * - subtle: Index 0 (Very light)
- */
-export const generateSemanticShades = (
-  hex: string,
-  theme: "light" | "dark" = "light",
-  overrides?: Partial<Omit<SemanticShades, "hover" | "active" | "subtle">>,
-): SemanticShades => {
-  const palette = generate(hex, { theme });
-
-  // Fallback generation based on standard tonal maps
-  const base = {
-    main: theme === "light" ? palette[5] : palette[5],
-    onMain: theme === "light" ? "#ffffff" : "#000000",
-    container: theme === "light" ? palette[1] : palette[1],
-    onContainer: theme === "light" ? palette[9] : palette[9],
-    hover: theme === "light" ? palette[6] : palette[6],
-    active: theme === "light" ? palette[7] : palette[7],
-    subtle: palette[0],
-  };
-
-  return {
-    ...base,
-    ...overrides,
-  };
-};
-
-/**
- * Generates a full MD3-compatible 13-shade tonal palette (0-100) from a seed color.
- */
-export const generateTonalPalette = (hex: string): TonalPalette => {
-  const tones = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100] as const;
-  const rgb = hexToRgb(hex);
-  const hsl = rgbToHsl(rgb);
-
-  const palette: Record<number, string> = {};
-
-  tones.forEach((tone) => {
-    // MD3 Tones are essentially lightness values
-    const newHsl = {
-      h: hsl.h,
-      s: hsl.s,
-      l: tone,
-    };
-
-    palette[tone] = rgbToHex(hslToRgb(newHsl));
-  });
-
-  return palette as unknown as TonalPalette;
-};

package/src/zindex.css.ts

@@ -1,29 +0,0 @@
-import { createGlobalTheme, createThemeContract } from "@vanilla-extract/css";
-
-/**
- * Z-index layering system for predictable stacking.
- * Semantic names for common UI layers.
- */
-export const zIndex = createThemeContract({
-  base: null,
-  dropdown: null,
-  sticky: null,
-  fixed: null,
-  overlay: null,
-  modal: null,
-  popover: null,
-  tooltip: null,
-  toast: null,
-});
-
-createGlobalTheme(":root", zIndex, {
-  base: "0",
-  dropdown: "1000",
-  sticky: "1100",
-  fixed: "1200",
-  overlay: "1300",
-  modal: "1400",
-  popover: "1500",
-  tooltip: "1600",
-  toast: "1700",
-});

package/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "extends": "@yuva-devlab/typescript-config/base.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "declaration": true,
-    "declarationMap": true,
-    "types": ["vite/client"]
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}

package/vite.config.ts

@@ -1,31 +0,0 @@
-import { resolve } from "path";
-
-import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
-import { defineConfig } from "vite";
-import dts from "vite-plugin-dts";
-
-export default defineConfig({
-  plugins: [
-    vanillaExtractPlugin(),
-    dts({
-      include: ["src/**/*.ts"],
-      exclude: ["src/**/*.test.ts"],
-      insertTypesEntry: true,
-    }),
-  ],
-  build: {
-    lib: {
-      entry: resolve(__dirname, "src/index.ts"),
-      name: "YuvaDevlabTokens",
-      formats: ["es", "cjs"],
-      fileName: (format) => `index.${format === "es" ? "js" : "cjs"}`,
-    },
-    rollupOptions: {
-      external: ["@vanilla-extract/css"],
-      output: {
-        preserveModules: false,
-        exports: "named",
-      },
-    },
-  },
-});