@sublimee/tokens 0.1.1

package/dist/tokens.css

@@ -0,0 +1,449 @@
+/**
+ * @sublimee/tokens
+ * Semantic Design Token System
+ * 
+ * Import this file once in your application's global CSS:
+ * @import "@sublimee/tokens/tokens.css";
+ * 
+ * Then override specific tokens for your brand:
+ * :root {
+ *   --sublime-color-interactive-accent: #ec4899;
+ * }
+ */
+
+/* ============================================================================
+   LIGHT MODE (DEFAULT)
+   ============================================================================ */
+
+:root {
+  /* ==========================================================================
+     COLOR TOKENS - SURFACES
+     Background colors for containers, cards, pages
+     ========================================================================== */
+  
+  /* Base surface (page background) */
+  --sublime-color-surface-0: #ffffff;
+  --sublime-color-surface-0-hover: #fafafa;
+  --sublime-color-surface-0-active: #f5f5f5;
+  
+  /* Elevated surface (cards, modals, popovers) */
+  --sublime-color-surface-1: #ffffff;
+  --sublime-color-surface-1-hover: #fafafa;
+  --sublime-color-surface-1-active: #f5f5f5;
+  
+  /* Higher elevation (menus, tooltips) */
+  --sublime-color-surface-2: #f9fafb;
+  --sublime-color-surface-2-hover: #f3f4f6;
+  --sublime-color-surface-2-active: #e5e7eb;
+  
+  /* Inset/depressed surface (inputs, wells) */
+  --sublime-color-surface-inset: #f3f4f6;
+  --sublime-color-surface-inset-hover: #e5e7eb;
+  --sublime-color-surface-inset-active: #d1d5db;
+
+  /* ==========================================================================
+     COLOR TOKENS - TEXT
+     Content colors by emphasis level
+     ========================================================================== */
+  
+  /* Primary text (headings, important body) */
+  --sublime-color-text-primary: #111827;
+  --sublime-color-text-primary-inverse: #ffffff;
+  
+  /* Secondary text (body, descriptions) */
+  --sublime-color-text-secondary: #4b5563;
+  --sublime-color-text-secondary-inverse: #e5e7eb;
+  
+  /* Tertiary/muted text (captions, placeholders, helper text) */
+  --sublime-color-text-muted: #9ca3af;
+  --sublime-color-text-muted-inverse: #6b7280;
+  
+  /* Disabled text (unavailable actions) */
+  --sublime-color-text-disabled: #d1d5db;
+  --sublime-color-text-disabled-inverse: #4b5563;
+  
+  /* Accent text (links, highlights) */
+  --sublime-color-text-accent: #3b82f6;
+  --sublime-color-text-accent-hover: #2563eb;
+
+  /* ==========================================================================
+     COLOR TOKENS - BORDERS
+     Dividers, outlines, input borders
+     ========================================================================== */
+  
+  --sublime-color-border-primary: #e5e7eb;
+  --sublime-color-border-primary-hover: #d1d5db;
+  --sublime-color-border-primary-active: #9ca3af;
+  
+  --sublime-color-border-secondary: #f3f4f6;
+  --sublime-color-border-accent: #3b82f6;
+  --sublime-color-border-error: #ef4444;
+  --sublime-color-border-success: #22c55e;
+
+  /* ==========================================================================
+     COLOR TOKENS - INTERACTIVE
+     Buttons, links, controls
+     ========================================================================== */
+  
+  /* Primary interactive (high emphasis) */
+  --sublime-color-interactive-primary: #111827;
+  --sublime-color-interactive-primary-hover: #374151;
+  --sublime-color-interactive-primary-active: #1f2937;
+  --sublime-color-interactive-primary-text: #ffffff;
+  
+  /* Secondary interactive (medium emphasis) */
+  --sublime-color-interactive-secondary: #f3f4f6;
+  --sublime-color-interactive-secondary-hover: #e5e7eb;
+  --sublime-color-interactive-secondary-active: #d1d5db;
+  --sublime-color-interactive-secondary-text: #111827;
+  
+  /* Tertiary/Ghost interactive (low emphasis) */
+  --sublime-color-interactive-ghost: transparent;
+  --sublime-color-interactive-ghost-hover: #f3f4f6;
+  --sublime-color-interactive-ghost-active: #e5e7eb;
+  --sublime-color-interactive-ghost-text: #4b5563;
+  
+  /* Accent interactive (brand color) */
+  --sublime-color-interactive-accent: #3b82f6;
+  --sublime-color-interactive-accent-hover: #2563eb;
+  --sublime-color-interactive-accent-active: #1d4ed8;
+  --sublime-color-interactive-accent-text: #ffffff;
+
+  /* ==========================================================================
+     COLOR TOKENS - STATUS
+     Error, warning, success, info states
+     ========================================================================== */
+  
+  /* Error (destructive actions, validation errors) */
+  --sublime-color-status-error: #ef4444;
+  --sublime-color-status-error-hover: #dc2626;
+  --sublime-color-status-error-bg: #fef2f2;
+  
+  /* Warning (cautions, notices) */
+  --sublime-color-status-warning: #f59e0b;
+  --sublime-color-status-warning-hover: #d97706;
+  --sublime-color-status-warning-bg: #fffbeb;
+  
+  /* Success (confirmations, completions) */
+  --sublime-color-status-success: #22c55e;
+  --sublime-color-status-success-hover: #16a34a;
+  --sublime-color-status-success-bg: #f0fdf4;
+  
+  /* Info (tips, neutral alerts) */
+  --sublime-color-status-info: #3b82f6;
+  --sublime-color-status-info-hover: #2563eb;
+  --sublime-color-status-info-bg: #eff6ff;
+
+  /* ==========================================================================
+     COLOR TOKENS - FOCUS & SELECTION
+     Keyboard navigation, text selection
+     ========================================================================== */
+  
+  --sublime-color-focus-ring: #3b82f6;
+  --sublime-color-focus-ring-offset: #ffffff;
+  --sublime-color-selection-bg: #dbeafe;
+  --sublime-color-selection-text: #1e40af;
+
+  /* ==========================================================================
+     COLOR TOKENS - OVERLAYS
+     Backdrops, scrims, loading states
+     ========================================================================== */
+  
+  --sublime-color-overlay-light: rgb(255 255 255 / 0.8);
+  --sublime-color-overlay-dark: rgb(0 0 0 / 0.5);
+  --sublime-color-overlay-scrim: rgb(0 0 0 / 0.6);
+
+  /* ==========================================================================
+     SPACING TOKENS
+     Base-4 spacing scale
+     ========================================================================== */
+  
+  --sublime-space-0: 0;
+  --sublime-space-1: 0.25rem;   /* 4px */
+  --sublime-space-2: 0.5rem;    /* 8px */
+  --sublime-space-3: 0.75rem;   /* 12px */
+  --sublime-space-4: 1rem;      /* 16px */
+  --sublime-space-5: 1.25rem;   /* 20px */
+  --sublime-space-6: 1.5rem;    /* 24px */
+  --sublime-space-8: 2rem;      /* 32px */
+  --sublime-space-10: 2.5rem;   /* 40px */
+  --sublime-space-12: 3rem;     /* 48px */
+  --sublime-space-16: 4rem;     /* 64px */
+  --sublime-space-20: 5rem;     /* 80px */
+  --sublime-space-24: 6rem;     /* 96px */
+  
+  /* Component-specific spacing */
+  --sublime-space-button-x: var(--sublime-space-6);
+  --sublime-space-button-y: var(--sublime-space-3);
+  --sublime-space-input-x: var(--sublime-space-4);
+  --sublime-space-input-y: var(--sublime-space-3);
+  --sublime-space-card-padding: var(--sublime-space-6);
+  
+  /* Sizing */
+  --sublime-size-icon-sm: 1rem;    /* 16px */
+  --sublime-size-icon-md: 1.5rem;  /* 24px */
+  --sublime-size-icon-lg: 2rem;    /* 32px */
+  
+  --sublime-size-button-height-sm: 2rem;    /* 32px */
+  --sublime-size-button-height-md: 2.5rem;  /* 40px */
+  --sublime-size-button-height-lg: 3rem;    /* 48px */
+  
+  --sublime-size-touch-target: 2.75rem; /* 44px - WCAG minimum */
+
+  /* ==========================================================================
+     SHADOW TOKENS (ELEVATION)
+     Depth and elevation system
+     ========================================================================== */
+  
+  --sublime-shadow-none: 0 0 #0000;
+  
+  --sublime-shadow-xs: 
+    0 1px 2px 0 rgb(0 0 0 / 0.05);
+  
+  --sublime-shadow-sm: 
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
+  
+  --sublime-shadow-md: 
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+  
+  --sublime-shadow-lg: 
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  
+  --sublime-shadow-xl: 
+    0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  
+  /* Interactive element shadows */
+  --sublime-shadow-button: var(--sublime-shadow-sm);
+  --sublime-shadow-button-hover: var(--sublime-shadow-md);
+  --sublime-shadow-button-active: var(--sublime-shadow-xs);
+  
+  --sublime-shadow-card: var(--sublime-shadow-sm);
+  --sublime-shadow-card-hover: var(--sublime-shadow-md);
+  
+  /* Focus ring shadow */
+  --sublime-shadow-focus-ring: 
+    0 0 0 2px var(--sublime-color-surface-0),
+    0 0 0 4px var(--sublime-color-focus-ring);
+
+  /* ==========================================================================
+     RADIUS TOKENS
+     Border radius scale
+     ========================================================================== */
+  
+  --sublime-radius-none: 0;
+  --sublime-radius-sm: 0.25rem;   /* 4px */
+  --sublime-radius-md: 0.375rem;  /* 6px */
+  --sublime-radius-lg: 0.5rem;    /* 8px */
+  --sublime-radius-xl: 0.75rem;   /* 12px */
+  --sublime-radius-2xl: 1rem;     /* 16px */
+  --sublime-radius-full: 9999px;
+  
+  /* Component-specific radius */
+  --sublime-radius-button: var(--sublime-radius-lg);
+  --sublime-radius-input: var(--sublime-radius-md);
+  --sublime-radius-card: var(--sublime-radius-xl);
+
+  /* ==========================================================================
+     TYPOGRAPHY TOKENS
+     Font families, sizes, weights
+     ========================================================================== */
+  
+  --sublime-font-family-sans: 
+    system-ui, -apple-system, BlinkMacSystemFont, 
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  
+  --sublime-font-family-mono: 
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  
+  /* Font sizes */
+  --sublime-font-size-xs: 0.75rem;    /* 12px */
+  --sublime-font-size-sm: 0.875rem;   /* 14px */
+  --sublime-font-size-md: 1rem;       /* 16px */
+  --sublime-font-size-lg: 1.125rem;   /* 18px */
+  --sublime-font-size-xl: 1.25rem;    /* 20px */
+  
+  /* Font weights */
+  --sublime-font-weight-normal: 400;
+  --sublime-font-weight-medium: 500;
+  --sublime-font-weight-semibold: 600;
+  --sublime-font-weight-bold: 700;
+  
+  /* Line heights */
+  --sublime-line-height-tight: 1.25;
+  --sublime-line-height-normal: 1.5;
+  --sublime-line-height-relaxed: 1.75;
+
+  /* ==========================================================================
+     ANIMATION TOKENS
+     Durations, easings, transitions
+     ========================================================================== */
+  
+  /* Durations */
+  --sublime-duration-instant: 0ms;
+  --sublime-duration-fast: 100ms;
+  --sublime-duration-normal: 150ms;
+  --sublime-duration-slow: 200ms;
+  --sublime-duration-slower: 300ms;
+  
+  /* Easings */
+  --sublime-ease-linear: linear;
+  --sublime-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --sublime-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --sublime-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --sublime-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  
+  /* Component transitions */
+  --sublime-transition-button: 
+    all var(--sublime-duration-fast) var(--sublime-ease-out);
+  
+  --sublime-transition-color: 
+    color var(--sublime-duration-fast) var(--sublime-ease-out),
+    background-color var(--sublime-duration-fast) var(--sublime-ease-out),
+    border-color var(--sublime-duration-fast) var(--sublime-ease-out);
+  
+  --sublime-transition-transform: 
+    transform var(--sublime-duration-fast) var(--sublime-ease-spring);
+  
+  --sublime-transition-shadow: 
+    box-shadow var(--sublime-duration-fast) var(--sublime-ease-out);
+}
+
+/* ============================================================================
+   DARK MODE
+   Activated by .dark class, data-theme="dark", or prefers-color-scheme
+   ============================================================================ */
+
+.dark,
+[data-theme="dark"] {
+  /* Surfaces - inverted hierarchy for dark mode */
+  --sublime-color-surface-0: #0f0f0f;
+  --sublime-color-surface-0-hover: #1a1a1a;
+  --sublime-color-surface-0-active: #262626;
+  
+  --sublime-color-surface-1: #171717;
+  --sublime-color-surface-1-hover: #262626;
+  --sublime-color-surface-1-active: #404040;
+  
+  --sublime-color-surface-2: #262626;
+  --sublime-color-surface-2-hover: #404040;
+  --sublime-color-surface-2-active: #525252;
+  
+  --sublime-color-surface-inset: #0a0a0a;
+  --sublime-color-surface-inset-hover: #171717;
+  --sublime-color-surface-inset-active: #262626;
+
+  /* Text colors - inverted for dark backgrounds */
+  --sublime-color-text-primary: #fafafa;
+  --sublime-color-text-primary-inverse: #0f0f0f;
+  
+  --sublime-color-text-secondary: #a3a3a3;
+  --sublime-color-text-secondary-inverse: #404040;
+  
+  --sublime-color-text-muted: #737373;
+  --sublime-color-text-muted-inverse: #525252;
+  
+  --sublime-color-text-disabled: #525252;
+  --sublime-color-text-disabled-inverse: #a3a3a3;
+
+  /* Borders - lighter in dark mode for visibility */
+  --sublime-color-border-primary: #404040;
+  --sublime-color-border-primary-hover: #525252;
+  --sublime-color-border-primary-active: #737373;
+  
+  --sublime-color-border-secondary: #262626;
+
+  /* Interactive elements */
+  --sublime-color-interactive-primary: #fafafa;
+  --sublime-color-interactive-primary-hover: #e5e5e5;
+  --sublime-color-interactive-primary-active: #d4d4d4;
+  --sublime-color-interactive-primary-text: #0f0f0f;
+  
+  --sublime-color-interactive-secondary: #262626;
+  --sublime-color-interactive-secondary-hover: #404040;
+  --sublime-color-interactive-secondary-active: #525252;
+  --sublime-color-interactive-secondary-text: #fafafa;
+  
+  --sublime-color-interactive-ghost-hover: #262626;
+  --sublime-color-interactive-ghost-active: #404040;
+  --sublime-color-interactive-ghost-text: #a3a3a3;
+
+  /* Focus ring offset adapts to dark background */
+  --sublime-color-focus-ring-offset: #0f0f0f;
+  
+  /* Selection colors adjusted for dark */
+  --sublime-color-selection-bg: #1e3a8a;
+  --sublime-color-selection-text: #dbeafe;
+
+  /* Status backgrounds adjusted for dark */
+  --sublime-color-status-error-bg: #450a0a;
+  --sublime-color-status-warning-bg: #451a03;
+  --sublime-color-status-success-bg: #052e16;
+  --sublime-color-status-info-bg: #172554;
+}
+
+/* System preference fallback */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) {
+    /* Duplicate all dark mode values here */
+    --sublime-color-surface-0: #0f0f0f;
+    --sublime-color-surface-0-hover: #1a1a1a;
+    --sublime-color-surface-0-active: #262626;
+    
+    --sublime-color-surface-1: #171717;
+    --sublime-color-surface-1-hover: #262626;
+    --sublime-color-surface-1-active: #404040;
+    
+    --sublime-color-surface-2: #262626;
+    --sublime-color-surface-2-hover: #404040;
+    --sublime-color-surface-2-active: #525252;
+    
+    --sublime-color-surface-inset: #0a0a0a;
+    --sublime-color-surface-inset-hover: #171717;
+    --sublime-color-surface-inset-active: #262626;
+
+    --sublime-color-text-primary: #fafafa;
+    --sublime-color-text-primary-inverse: #0f0f0f;
+    
+    --sublime-color-text-secondary: #a3a3a3;
+    --sublime-color-text-secondary-inverse: #404040;
+    
+    --sublime-color-text-muted: #737373;
+    --sublime-color-text-muted-inverse: #525252;
+    
+    --sublime-color-text-disabled: #525252;
+    --sublime-color-text-disabled-inverse: #a3a3a3;
+
+    --sublime-color-border-primary: #404040;
+    --sublime-color-border-primary-hover: #525252;
+    --sublime-color-border-primary-active: #737373;
+    
+    --sublime-color-border-secondary: #262626;
+
+    --sublime-color-interactive-primary: #fafafa;
+    --sublime-color-interactive-primary-hover: #e5e5e5;
+    --sublime-color-interactive-primary-active: #d4d4d4;
+    --sublime-color-interactive-primary-text: #0f0f0f;
+    
+    --sublime-color-interactive-secondary: #262626;
+    --sublime-color-interactive-secondary-hover: #404040;
+    --sublime-color-interactive-secondary-active: #525252;
+    --sublime-color-interactive-secondary-text: #fafafa;
+    
+    --sublime-color-interactive-ghost-hover: #262626;
+    --sublime-color-interactive-ghost-active: #404040;
+    --sublime-color-interactive-ghost-text: #a3a3a3;
+
+    --sublime-color-focus-ring-offset: #0f0f0f;
+    --sublime-color-selection-bg: #1e3a8a;
+    --sublime-color-selection-text: #dbeafe;
+
+    --sublime-color-status-error-bg: #450a0a;
+    --sublime-color-status-warning-bg: #451a03;
+    --sublime-color-status-success-bg: #052e16;
+    --sublime-color-status-info-bg: #172554;
+  }
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@sublimee/tokens",
+  "version": "0.1.1",
+  "description": "Semantic design tokens for Sublime",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/tokens.css",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/juancrfig/sublime.git",
+    "directory": "packages/tokens"
+  },
+  "keywords": [
+    "design-tokens",
+    "css-variables",
+    "theming",
+    "dark-mode",
+    "ui",
+    "sublime"
+  ],
+  "author": "Sublime Team",
+  "license": "MIT",
+  "devDependencies": {
+    "tsup": "^8",
+    "typescript": "^5"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean && cp src/tokens.css dist/tokens.css",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,202 @@
+/**
+ * @sublimee/tokens
+ * Semantic design tokens for the Sublime design system
+ * 
+ * This file exports TypeScript types for token names.
+ * The actual CSS tokens are in tokens.css
+ */
+
+// Color token names
+export type SublimeSurfaceToken =
+  | '--sublime-color-surface-0'
+  | '--sublime-color-surface-0-hover'
+  | '--sublime-color-surface-0-active'
+  | '--sublime-color-surface-1'
+  | '--sublime-color-surface-1-hover'
+  | '--sublime-color-surface-1-active'
+  | '--sublime-color-surface-2'
+  | '--sublime-color-surface-2-hover'
+  | '--sublime-color-surface-2-active'
+  | '--sublime-color-surface-inset'
+  | '--sublime-color-surface-inset-hover'
+  | '--sublime-color-surface-inset-active';
+
+export type SublimeTextToken =
+  | '--sublime-color-text-primary'
+  | '--sublime-color-text-primary-inverse'
+  | '--sublime-color-text-secondary'
+  | '--sublime-color-text-secondary-inverse'
+  | '--sublime-color-text-muted'
+  | '--sublime-color-text-muted-inverse'
+  | '--sublime-color-text-disabled'
+  | '--sublime-color-text-disabled-inverse'
+  | '--sublime-color-text-accent'
+  | '--sublime-color-text-accent-hover';
+
+export type SublimeBorderToken =
+  | '--sublime-color-border-primary'
+  | '--sublime-color-border-primary-hover'
+  | '--sublime-color-border-primary-active'
+  | '--sublime-color-border-secondary'
+  | '--sublime-color-border-accent'
+  | '--sublime-color-border-error'
+  | '--sublime-color-border-success';
+
+export type SublimeInteractiveToken =
+  | '--sublime-color-interactive-primary'
+  | '--sublime-color-interactive-primary-hover'
+  | '--sublime-color-interactive-primary-active'
+  | '--sublime-color-interactive-primary-text'
+  | '--sublime-color-interactive-secondary'
+  | '--sublime-color-interactive-secondary-hover'
+  | '--sublime-color-interactive-secondary-active'
+  | '--sublime-color-interactive-secondary-text'
+  | '--sublime-color-interactive-ghost'
+  | '--sublime-color-interactive-ghost-hover'
+  | '--sublime-color-interactive-ghost-active'
+  | '--sublime-color-interactive-ghost-text'
+  | '--sublime-color-interactive-accent'
+  | '--sublime-color-interactive-accent-hover'
+  | '--sublime-color-interactive-accent-active'
+  | '--sublime-color-interactive-accent-text';
+
+export type SublimeStatusToken =
+  | '--sublime-color-status-error'
+  | '--sublime-color-status-error-hover'
+  | '--sublime-color-status-error-bg'
+  | '--sublime-color-status-warning'
+  | '--sublime-color-status-warning-hover'
+  | '--sublime-color-status-warning-bg'
+  | '--sublime-color-status-success'
+  | '--sublime-color-status-success-hover'
+  | '--sublime-color-status-success-bg'
+  | '--sublime-color-status-info'
+  | '--sublime-color-status-info-hover'
+  | '--sublime-color-status-info-bg';
+
+export type SublimeFocusToken =
+  | '--sublime-color-focus-ring'
+  | '--sublime-color-focus-ring-offset'
+  | '--sublime-color-selection-bg'
+  | '--sublime-color-selection-text';
+
+export type SublimeOverlayToken =
+  | '--sublime-color-overlay-light'
+  | '--sublime-color-overlay-dark'
+  | '--sublime-color-overlay-scrim';
+
+export type SublimeColorToken =
+  | SublimeSurfaceToken
+  | SublimeTextToken
+  | SublimeBorderToken
+  | SublimeInteractiveToken
+  | SublimeStatusToken
+  | SublimeFocusToken
+  | SublimeOverlayToken;
+
+// Spacing token names
+export type SublimeSpaceToken =
+  | '--sublime-space-0'
+  | '--sublime-space-1'
+  | '--sublime-space-2'
+  | '--sublime-space-3'
+  | '--sublime-space-4'
+  | '--sublime-space-5'
+  | '--sublime-space-6'
+  | '--sublime-space-8'
+  | '--sublime-space-10'
+  | '--sublime-space-12'
+  | '--sublime-space-16'
+  | '--sublime-space-20'
+  | '--sublime-space-24'
+  | '--sublime-space-button-x'
+  | '--sublime-space-button-y'
+  | '--sublime-space-input-x'
+  | '--sublime-space-input-y'
+  | '--sublime-space-card-padding'
+  | '--sublime-size-icon-sm'
+  | '--sublime-size-icon-md'
+  | '--sublime-size-icon-lg'
+  | '--sublime-size-button-height-sm'
+  | '--sublime-size-button-height-md'
+  | '--sublime-size-button-height-lg'
+  | '--sublime-size-touch-target';
+
+// Shadow token names
+export type SublimeShadowToken =
+  | '--sublime-shadow-none'
+  | '--sublime-shadow-xs'
+  | '--sublime-shadow-sm'
+  | '--sublime-shadow-md'
+  | '--sublime-shadow-lg'
+  | '--sublime-shadow-xl'
+  | '--sublime-shadow-button'
+  | '--sublime-shadow-button-hover'
+  | '--sublime-shadow-button-active'
+  | '--sublime-shadow-card'
+  | '--sublime-shadow-card-hover'
+  | '--sublime-shadow-focus-ring';
+
+// Radius token names
+export type SublimeRadiusToken =
+  | '--sublime-radius-none'
+  | '--sublime-radius-sm'
+  | '--sublime-radius-md'
+  | '--sublime-radius-lg'
+  | '--sublime-radius-xl'
+  | '--sublime-radius-2xl'
+  | '--sublime-radius-full'
+  | '--sublime-radius-button'
+  | '--sublime-radius-input'
+  | '--sublime-radius-card';
+
+// Font token names
+export type SublimeFontToken =
+  | '--sublime-font-family-sans'
+  | '--sublime-font-family-mono'
+  | '--sublime-font-size-xs'
+  | '--sublime-font-size-sm'
+  | '--sublime-font-size-md'
+  | '--sublime-font-size-lg'
+  | '--sublime-font-size-xl'
+  | '--sublime-font-weight-normal'
+  | '--sublime-font-weight-medium'
+  | '--sublime-font-weight-semibold'
+  | '--sublime-font-weight-bold'
+  | '--sublime-line-height-tight'
+  | '--sublime-line-height-normal'
+  | '--sublime-line-height-relaxed';
+
+// Duration token names
+export type SublimeDurationToken =
+  | '--sublime-duration-instant'
+  | '--sublime-duration-fast'
+  | '--sublime-duration-normal'
+  | '--sublime-duration-slow'
+  | '--sublime-duration-slower';
+
+// Easing token names
+export type SublimeEaseToken =
+  | '--sublime-ease-linear'
+  | '--sublime-ease-in'
+  | '--sublime-ease-out'
+  | '--sublime-ease-in-out'
+  | '--sublime-ease-spring';
+
+// Transition token names
+export type SublimeTransitionToken =
+  | '--sublime-transition-button'
+  | '--sublime-transition-color'
+  | '--sublime-transition-transform'
+  | '--sublime-transition-shadow';
+
+// All tokens
+export type SublimeToken =
+  | SublimeColorToken
+  | SublimeSpaceToken
+  | SublimeShadowToken
+  | SublimeRadiusToken
+  | SublimeFontToken
+  | SublimeDurationToken
+  | SublimeEaseToken
+  | SublimeTransitionToken;