@elvora/tokens 1.0.0-rc.1

package/dist/tokens.css

@@ -0,0 +1,170 @@
+:root {
+  --elvora-colors-slate-50: #f8fafc;
+  --elvora-colors-slate-100: #f1f5f9;
+  --elvora-colors-slate-200: #e2e8f0;
+  --elvora-colors-slate-300: #cbd5e1;
+  --elvora-colors-slate-400: #94a3b8;
+  --elvora-colors-slate-500: #64748b;
+  --elvora-colors-slate-600: #475569;
+  --elvora-colors-slate-700: #334155;
+  --elvora-colors-slate-800: #1e293b;
+  --elvora-colors-slate-900: #0f172a;
+  --elvora-colors-blue-50: #eff6ff;
+  --elvora-colors-blue-100: #dbeafe;
+  --elvora-colors-blue-200: #bfdbfe;
+  --elvora-colors-blue-300: #93c5fd;
+  --elvora-colors-blue-400: #60a5fa;
+  --elvora-colors-blue-500: #3b82f6;
+  --elvora-colors-blue-600: #2563eb;
+  --elvora-colors-blue-700: #1d4ed8;
+  --elvora-colors-blue-800: #1e40af;
+  --elvora-colors-blue-900: #1e3a8a;
+  --elvora-colors-green-50: #f0fdf4;
+  --elvora-colors-green-100: #dcfce7;
+  --elvora-colors-green-200: #bbf7d0;
+  --elvora-colors-green-300: #86efac;
+  --elvora-colors-green-400: #4ade80;
+  --elvora-colors-green-500: #22c55e;
+  --elvora-colors-green-600: #16a34a;
+  --elvora-colors-green-700: #15803d;
+  --elvora-colors-green-800: #166534;
+  --elvora-colors-green-900: #14532d;
+  --elvora-colors-amber-50: #fffbeb;
+  --elvora-colors-amber-100: #fef3c7;
+  --elvora-colors-amber-200: #fde68a;
+  --elvora-colors-amber-300: #fcd34d;
+  --elvora-colors-amber-400: #fbbf24;
+  --elvora-colors-amber-500: #f59e0b;
+  --elvora-colors-amber-600: #d97706;
+  --elvora-colors-amber-700: #b45309;
+  --elvora-colors-amber-800: #92400e;
+  --elvora-colors-amber-900: #78350f;
+  --elvora-colors-red-50: #fef2f2;
+  --elvora-colors-red-100: #fee2e2;
+  --elvora-colors-red-200: #fecaca;
+  --elvora-colors-red-300: #fca5a5;
+  --elvora-colors-red-400: #f87171;
+  --elvora-colors-red-500: #ef4444;
+  --elvora-colors-red-600: #dc2626;
+  --elvora-colors-red-700: #b91c1c;
+  --elvora-colors-red-800: #991b1b;
+  --elvora-colors-red-900: #7f1d1d;
+  --elvora-colors-violet-50: #f5f3ff;
+  --elvora-colors-violet-100: #ede9fe;
+  --elvora-colors-violet-200: #ddd6fe;
+  --elvora-colors-violet-300: #c4b5fd;
+  --elvora-colors-violet-400: #a78bfa;
+  --elvora-colors-violet-500: #8b5cf6;
+  --elvora-colors-violet-600: #7c3aed;
+  --elvora-colors-violet-700: #6d28d9;
+  --elvora-colors-violet-800: #5b21b6;
+  --elvora-colors-violet-900: #4c1d95;
+  --elvora-colors-white: #ffffff;
+  --elvora-colors-black: #000000;
+  --elvora-colors-transparent: transparent;
+  --elvora-spacing-0: 0px;
+  --elvora-spacing-1: 4px;
+  --elvora-spacing-2: 8px;
+  --elvora-spacing-3: 12px;
+  --elvora-spacing-4: 16px;
+  --elvora-spacing-5: 20px;
+  --elvora-spacing-6: 24px;
+  --elvora-spacing-7: 28px;
+  --elvora-spacing-8: 32px;
+  --elvora-spacing-9: 36px;
+  --elvora-spacing-10: 40px;
+  --elvora-spacing-11: 44px;
+  --elvora-spacing-12: 48px;
+  --elvora-spacing-14: 56px;
+  --elvora-spacing-16: 64px;
+  --elvora-spacing-20: 80px;
+  --elvora-spacing-24: 96px;
+  --elvora-spacing-28: 112px;
+  --elvora-spacing-32: 128px;
+  --elvora-spacing-px: 1px;
+  --elvora-spacing-0_5: 2px;
+  --elvora-spacing-1_5: 6px;
+  --elvora-spacing-2_5: 10px;
+  --elvora-spacing-3_5: 14px;
+  --elvora-typography-fontFamilies-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
+  --elvora-typography-fontFamilies-serif: Georgia, "Times New Roman", Times, serif;
+  --elvora-typography-fontFamilies-mono: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
+  --elvora-typography-fontSizes-xs: 12px;
+  --elvora-typography-fontSizes-sm: 14px;
+  --elvora-typography-fontSizes-base: 16px;
+  --elvora-typography-fontSizes-md: 16px;
+  --elvora-typography-fontSizes-lg: 18px;
+  --elvora-typography-fontSizes-xl: 20px;
+  --elvora-typography-fontSizes-2xl: 24px;
+  --elvora-typography-fontSizes-3xl: 30px;
+  --elvora-typography-fontSizes-4xl: 36px;
+  --elvora-typography-fontSizes-5xl: 48px;
+  --elvora-typography-fontSizes-6xl: 60px;
+  --elvora-typography-fontWeights-thin: 100;
+  --elvora-typography-fontWeights-extralight: 200;
+  --elvora-typography-fontWeights-light: 300;
+  --elvora-typography-fontWeights-regular: 400;
+  --elvora-typography-fontWeights-medium: 500;
+  --elvora-typography-fontWeights-semibold: 600;
+  --elvora-typography-fontWeights-bold: 700;
+  --elvora-typography-fontWeights-extrabold: 800;
+  --elvora-typography-fontWeights-black: 900;
+  --elvora-typography-lineHeights-none: 1;
+  --elvora-typography-lineHeights-tight: 1.2;
+  --elvora-typography-lineHeights-snug: 1.35;
+  --elvora-typography-lineHeights-normal: 1.5;
+  --elvora-typography-lineHeights-relaxed: 1.625;
+  --elvora-typography-lineHeights-loose: 2;
+  --elvora-typography-letterSpacings-tighter: -0.04em;
+  --elvora-typography-letterSpacings-tight: -0.02em;
+  --elvora-typography-letterSpacings-normal: 0em;
+  --elvora-typography-letterSpacings-wide: 0.02em;
+  --elvora-typography-letterSpacings-wider: 0.04em;
+  --elvora-typography-letterSpacings-widest: 0.08em;
+  --elvora-radii-none: 0;
+  --elvora-radii-xs: 2px;
+  --elvora-radii-sm: 4px;
+  --elvora-radii-md: 6px;
+  --elvora-radii-lg: 8px;
+  --elvora-radii-xl: 12px;
+  --elvora-radii-2xl: 16px;
+  --elvora-radii-3xl: 24px;
+  --elvora-radii-full: 9999px;
+  --elvora-shadows-none: none;
+  --elvora-shadows-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
+  --elvora-shadows-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.10), 0 1px 2px -1px rgba(15, 23, 42, 0.10);
+  --elvora-shadows-md: 0 4px 6px -1px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.10);
+  --elvora-shadows-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.10);
+  --elvora-shadows-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.10);
+  --elvora-shadows-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
+  --elvora-shadows-inner: inset 0 2px 4px 0 rgba(15, 23, 42, 0.06);
+  --elvora-shadows-focus: 0 0 0 3px rgba(59, 130, 246, 0.45);
+  --elvora-motion-durations-instant: 0ms;
+  --elvora-motion-durations-fast: 120ms;
+  --elvora-motion-durations-normal: 200ms;
+  --elvora-motion-durations-slow: 320ms;
+  --elvora-motion-durations-slower: 500ms;
+  --elvora-motion-easings-linear: linear;
+  --elvora-motion-easings-standard: cubic-bezier(0.2, 0, 0, 1);
+  --elvora-motion-easings-emphasized: cubic-bezier(0.3, 0, 0, 1);
+  --elvora-motion-easings-decelerate: cubic-bezier(0, 0, 0, 1);
+  --elvora-motion-easings-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  --elvora-zIndex-hide: -1;
+  --elvora-zIndex-base: 0;
+  --elvora-zIndex-raised: 1;
+  --elvora-zIndex-dropdown: 1000;
+  --elvora-zIndex-sticky: 1100;
+  --elvora-zIndex-banner: 1200;
+  --elvora-zIndex-overlay: 1300;
+  --elvora-zIndex-modal: 1400;
+  --elvora-zIndex-popover: 1500;
+  --elvora-zIndex-toast: 1600;
+  --elvora-zIndex-tooltip: 1700;
+  --elvora-zIndex-max: 2147483647;
+  --elvora-breakpoints-xs: 0px;
+  --elvora-breakpoints-sm: 640px;
+  --elvora-breakpoints-md: 768px;
+  --elvora-breakpoints-lg: 1024px;
+  --elvora-breakpoints-xl: 1280px;
+  --elvora-breakpoints-2xl: 1536px;
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@elvora/tokens",
+  "version": "1.0.0-rc.1",
+  "description": "Elvora design tokens — colors, spacing, typography, radii, shadows, motion. Single source of truth compiled for web, RN, and theming.",
+  "license": "MIT",
+  "author": "Elvora UI Contributors",
+  "homepage": "https://github.com/elvora-ui/elvora/tree/main/packages/tokens#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elvora-ui/elvora.git",
+    "directory": "packages/tokens"
+  },
+  "bugs": {
+    "url": "https://github.com/elvora-ui/elvora/issues"
+  },
+  "keywords": [
+    "design-tokens",
+    "tokens",
+    "style-dictionary",
+    "ui",
+    "elvora"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./css": "./dist/tokens.css",
+    "./raw": "./src/tokens/index.json"
+  },
+  "files": [
+    "dist",
+    "src/tokens"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "devDependencies": {
+    "rimraf": "^6.0.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && node ./build-tokens.mjs",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "echo 'no lint configured'",
+    "test": "echo 'no tests yet'",
+    "clean": "rimraf dist"
+  }
+}

package/src/tokens/breakpoints.ts

@@ -0,0 +1,10 @@
+export const breakpoints = {
+  xs: '0px',
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+} as const;
+
+export type Breakpoints = typeof breakpoints;

package/src/tokens/colors.ts

@@ -0,0 +1,112 @@
+/**
+ * Color tokens — a 10-step ramp per hue (50 → 900), inspired by Tailwind / AntD.
+ * Semantic tokens (background, foreground, border, brand, status) consume these.
+ *
+ * Each ramp is hand-tuned for WCAG 2.2 AA contrast at step 600 against white
+ * and step 300 against black. Do not edit step values without re-checking contrast.
+ */
+
+export type ColorRamp = {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+};
+
+export const slate: ColorRamp = {
+  50: '#f8fafc',
+  100: '#f1f5f9',
+  200: '#e2e8f0',
+  300: '#cbd5e1',
+  400: '#94a3b8',
+  500: '#64748b',
+  600: '#475569',
+  700: '#334155',
+  800: '#1e293b',
+  900: '#0f172a',
+};
+
+export const blue: ColorRamp = {
+  50: '#eff6ff',
+  100: '#dbeafe',
+  200: '#bfdbfe',
+  300: '#93c5fd',
+  400: '#60a5fa',
+  500: '#3b82f6',
+  600: '#2563eb',
+  700: '#1d4ed8',
+  800: '#1e40af',
+  900: '#1e3a8a',
+};
+
+export const green: ColorRamp = {
+  50: '#f0fdf4',
+  100: '#dcfce7',
+  200: '#bbf7d0',
+  300: '#86efac',
+  400: '#4ade80',
+  500: '#22c55e',
+  600: '#16a34a',
+  700: '#15803d',
+  800: '#166534',
+  900: '#14532d',
+};
+
+export const amber: ColorRamp = {
+  50: '#fffbeb',
+  100: '#fef3c7',
+  200: '#fde68a',
+  300: '#fcd34d',
+  400: '#fbbf24',
+  500: '#f59e0b',
+  600: '#d97706',
+  700: '#b45309',
+  800: '#92400e',
+  900: '#78350f',
+};
+
+export const red: ColorRamp = {
+  50: '#fef2f2',
+  100: '#fee2e2',
+  200: '#fecaca',
+  300: '#fca5a5',
+  400: '#f87171',
+  500: '#ef4444',
+  600: '#dc2626',
+  700: '#b91c1c',
+  800: '#991b1b',
+  900: '#7f1d1d',
+};
+
+export const violet: ColorRamp = {
+  50: '#f5f3ff',
+  100: '#ede9fe',
+  200: '#ddd6fe',
+  300: '#c4b5fd',
+  400: '#a78bfa',
+  500: '#8b5cf6',
+  600: '#7c3aed',
+  700: '#6d28d9',
+  800: '#5b21b6',
+  900: '#4c1d95',
+};
+
+export const colors = {
+  slate,
+  blue,
+  green,
+  amber,
+  red,
+  violet,
+  white: '#ffffff',
+  black: '#000000',
+  transparent: 'transparent',
+} as const;
+
+export type Colors = typeof colors;

package/src/tokens/index.ts

@@ -0,0 +1,30 @@
+export * from './colors';
+export * from './spacing';
+export * from './typography';
+export * from './radii';
+export * from './shadows';
+export * from './motion';
+export * from './zIndex';
+export * from './breakpoints';
+
+import { colors } from './colors';
+import { spacing } from './spacing';
+import { typography } from './typography';
+import { radii } from './radii';
+import { shadows } from './shadows';
+import { motion } from './motion';
+import { zIndex } from './zIndex';
+import { breakpoints } from './breakpoints';
+
+export const tokens = {
+  colors,
+  spacing,
+  typography,
+  radii,
+  shadows,
+  motion,
+  zIndex,
+  breakpoints,
+} as const;
+
+export type Tokens = typeof tokens;

package/src/tokens/motion.ts

@@ -0,0 +1,19 @@
+export const durations = {
+  instant: '0ms',
+  fast: '120ms',
+  normal: '200ms',
+  slow: '320ms',
+  slower: '500ms',
+} as const;
+
+export const easings = {
+  linear: 'linear',
+  standard: 'cubic-bezier(0.2, 0, 0, 1)',
+  emphasized: 'cubic-bezier(0.3, 0, 0, 1)',
+  decelerate: 'cubic-bezier(0, 0, 0, 1)',
+  accelerate: 'cubic-bezier(0.3, 0, 1, 1)',
+} as const;
+
+export const motion = { durations, easings } as const;
+
+export type Motion = typeof motion;

package/src/tokens/radii.ts

@@ -0,0 +1,13 @@
+export const radii = {
+  none: '0',
+  xs: '2px',
+  sm: '4px',
+  md: '6px',
+  lg: '8px',
+  xl: '12px',
+  '2xl': '16px',
+  '3xl': '24px',
+  full: '9999px',
+} as const;
+
+export type Radii = typeof radii;

package/src/tokens/shadows.ts

@@ -0,0 +1,13 @@
+export const shadows = {
+  none: 'none',
+  xs: '0 1px 2px 0 rgba(15, 23, 42, 0.05)',
+  sm: '0 1px 3px 0 rgba(15, 23, 42, 0.10), 0 1px 2px -1px rgba(15, 23, 42, 0.10)',
+  md: '0 4px 6px -1px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.10)',
+  lg: '0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.10)',
+  xl: '0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.10)',
+  '2xl': '0 25px 50px -12px rgba(15, 23, 42, 0.25)',
+  inner: 'inset 0 2px 4px 0 rgba(15, 23, 42, 0.06)',
+  focus: '0 0 0 3px rgba(59, 130, 246, 0.45)',
+} as const;
+
+export type Shadows = typeof shadows;

package/src/tokens/spacing.ts

@@ -0,0 +1,33 @@
+/**
+ * Spacing scale based on a 4px base unit. Used for padding, margin, gap.
+ * Numeric keys (0, 1, 2…) map to multiples of the base; named keys are aliases.
+ */
+export const spacing = {
+  0: '0px',
+  px: '1px',
+  0.5: '2px',
+  1: '4px',
+  1.5: '6px',
+  2: '8px',
+  2.5: '10px',
+  3: '12px',
+  3.5: '14px',
+  4: '16px',
+  5: '20px',
+  6: '24px',
+  7: '28px',
+  8: '32px',
+  9: '36px',
+  10: '40px',
+  11: '44px',
+  12: '48px',
+  14: '56px',
+  16: '64px',
+  20: '80px',
+  24: '96px',
+  28: '112px',
+  32: '128px',
+} as const;
+
+export type Spacing = typeof spacing;
+export type SpacingKey = keyof Spacing;

package/src/tokens/typography.ts

@@ -0,0 +1,64 @@
+/**
+ * Typography tokens — font families, sizes, weights, line heights, letter spacing.
+ * Sizes follow a 1.125 (major second) modular scale.
+ */
+
+export const fontFamilies = {
+  sans: '"Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif',
+  serif: 'Georgia, "Times New Roman", Times, serif',
+  mono: '"JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace',
+} as const;
+
+export const fontSizes = {
+  xs: '12px',
+  sm: '14px',
+  base: '16px',
+  md: '16px',
+  lg: '18px',
+  xl: '20px',
+  '2xl': '24px',
+  '3xl': '30px',
+  '4xl': '36px',
+  '5xl': '48px',
+  '6xl': '60px',
+} as const;
+
+export const fontWeights = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900,
+} as const;
+
+export const lineHeights = {
+  none: 1,
+  tight: 1.2,
+  snug: 1.35,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2,
+} as const;
+
+export const letterSpacings = {
+  tighter: '-0.04em',
+  tight: '-0.02em',
+  normal: '0em',
+  wide: '0.02em',
+  wider: '0.04em',
+  widest: '0.08em',
+} as const;
+
+export const typography = {
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  letterSpacings,
+} as const;
+
+export type Typography = typeof typography;

package/src/tokens/zIndex.ts

@@ -0,0 +1,20 @@
+/**
+ * Z-index layering — keep these few and explicit. Components reach for tokens,
+ * never magic numbers, to keep stacking predictable.
+ */
+export const zIndex = {
+  hide: -1,
+  base: 0,
+  raised: 1,
+  dropdown: 1000,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  toast: 1600,
+  tooltip: 1700,
+  max: 2147483647,
+} as const;
+
+export type ZIndex = typeof zIndex;