@lemmo-lab/tokens-cli 2.1.0

package/assets/css/variables.css

@@ -0,0 +1,324 @@
+/**
+ * @lemmo-lab/tokens (v2) - Default Theme & Primitives (Dark Default)
+ * Single Source of Truth for Lemmo Design System
+ * Governed strictly by AGENTS.md rules. DO NOT EDIT DIRECTLY.
+ */
+
+:root {
+  /* ================================================================== */
+  /* SPACING (4px ladder)                                               */
+  /* ================================================================== */
+  --lemmo-space-0: 0;
+  --lemmo-space-50: .125rem;
+  --lemmo-space-100: .25rem;
+  --lemmo-space-150: .375rem;
+  --lemmo-space-200: .5rem;
+  --lemmo-space-250: .625rem;
+  --lemmo-space-300: .75rem;
+  --lemmo-space-400: 1rem;
+  --lemmo-space-500: 1.25rem;
+  --lemmo-space-600: 1.5rem;
+  --lemmo-space-700: 1.75rem;
+  --lemmo-space-800: 2rem;
+  --lemmo-space-1000: 2.5rem;
+  --lemmo-space-1200: 3rem;
+  --lemmo-space-1400: 3.5rem;
+  --lemmo-space-1600: 4rem;
+  --lemmo-space-2000: 5rem;
+  --lemmo-space-2400: 6rem;
+
+  /* ================================================================== */
+  /* GAPS                                                              */
+  /* ================================================================== */
+  --lemmo-gap-1: .25rem;
+  --lemmo-gap-2: .5rem;
+  --lemmo-gap-3: .75rem;
+  --lemmo-gap-4: 1rem;
+  --lemmo-gap-0-5: .125rem;
+  --lemmo-gap-1-5: .375rem;
+  --lemmo-gap-2-5: .625rem;
+  --lemmo-gap-card-grid: .5rem;
+  --lemmo-gap-card-inner: .5rem;
+  --lemmo-gap-section-sm: 2.5rem;
+  --lemmo-gap-section-lg: 5rem;
+
+  /* ================================================================== */
+  /* RADIUS (Relative Derived Scales)                                  */
+  /* ================================================================== */
+  --lemmo-radius-0: 0;
+  --lemmo-radius-100: .25rem;
+  --lemmo-radius-150: .375rem;
+  --lemmo-radius-200: .5rem;
+  --lemmo-radius-250: .625rem;
+  --lemmo-radius-300: .75rem;
+  --lemmo-radius-400: 1rem;
+  --lemmo-radius-500: 1.25rem;
+  --lemmo-radius-600: 1.5rem;
+  --lemmo-radius-base: .5rem;
+  --lemmo-radius-050: .125rem;
+  --lemmo-radius-full: 9999px;
+  --lemmo-radius-badge: calc(var(--lemmo-radius-base) * 0.75);
+  --lemmo-radius-control: var(--lemmo-radius-base);
+  --lemmo-radius-card: calc(var(--lemmo-radius-base) * 1.5);
+  --lemmo-radius-media: calc(var(--lemmo-radius-base) * 2);
+  --lemmo-radius-featured-card: calc(var(--lemmo-radius-base) * 2.5);
+  --lemmo-radius-media-lg: calc(var(--lemmo-radius-base) * 3);
+  --lemmo-radius-pill: 9999px;
+
+  /* ================================================================== */
+  /* TYPOGRAPHY (Decoupled Stacks & Unitless Line Heights)              */
+  /* ================================================================== */
+  --lemmo-font-sans: Satoshi, system-ui, sans-serif;
+  --lemmo-font-sans-fa: IRANSansX, Tahoma, sans-serif;
+  --lemmo-font-display: Oddval, Satoshi, system-ui, sans-serif;
+  --lemmo-font-display-fa: Morabba, Tahoma, sans-serif;
+  --lemmo-font-heading: Satoshi, system-ui, sans-serif;
+  --lemmo-font-heading-fa: Morabba, Tahoma, sans-serif;
+  --lemmo-font-numeric: Satoshi, system-ui, sans-serif;
+  --lemmo-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+  --lemmo-font-display: var(--lemmo-font-display);
+  --lemmo-font-heading: var(--lemmo-font-heading);
+  --lemmo-font-body: var(--lemmo-font-sans);
+  --lemmo-font-numeric: var(--lemmo-font-numeric);
+  --lemmo-leading-factor: 1;
+  --lemmo-font-weight-regular: 400;
+  --lemmo-font-weight-medium: 500;
+  --lemmo-font-weight-cta: 510;
+  --lemmo-font-weight-semi-bold: 600;
+  --lemmo-font-weight-bold: 700;
+  --lemmo-font-weight-black: 900;
+  --lemmo-type-size-100: .75rem;
+  --lemmo-type-size-200: .875rem;
+  --lemmo-type-size-300: 1rem;
+  --lemmo-type-size-400: 1.125rem;
+  --lemmo-type-size-500: 1.25rem;
+  --lemmo-type-size-600: 1.5rem;
+  --lemmo-type-size-700: 1.75rem;
+  --lemmo-type-size-800: 2rem;
+  --lemmo-type-size-900: 2.25rem;
+  --lemmo-type-size-1000: 2.5rem;
+  --lemmo-type-size-1100: 3rem;
+  --lemmo-type-size-1200: 3.5rem;
+  --lemmo-type-size-1300: 4rem;
+  --lemmo-type-size-1400: 4.5rem;
+  --lemmo-type-size-050: .625rem;
+  --lemmo-type-leading-300: 1.25;
+  --lemmo-type-leading-400: 1.28;
+  --lemmo-type-leading-500: 1.43;
+  --lemmo-type-leading-600: 1.5;
+  --lemmo-type-leading-700: 1.4;
+  --lemmo-type-leading-800: 1.33;
+  --lemmo-type-leading-900: 1.25;
+  --lemmo-type-leading-1000: 1.2;
+  --lemmo-type-leading-1100: 1.15;
+  --lemmo-type-leading-1200: 1.1;
+  --lemmo-type-leading-1300: 1.05;
+  --lemmo-type-leading-1400: 1;
+  --lemmo-type-track-none: 0;
+  --lemmo-type-track-slight: -0.025rem;
+  --lemmo-type-track-tight: -0.075rem;
+  --lemmo-type-track-loose: 0.00625rem;
+  --lemmo-type-track-wide: 0.0125rem;
+  --lemmo-type-track-xxs: -0.3px;
+  --lemmo-type-track-5xl: -1.2px;
+  --lemmo-type-track-heading: -2%;
+  --lemmo-type-track-caps: -4%;
+  --lemmo-type-track-label: 0.2px;
+  --lemmo-type-track-caption: 0;
+  --lemmo-type-track-table-head: -0.56px;
+
+  /* ================================================================== */
+  /* BREAKPOINTS, SIZES & STROKES                                      */
+  /* ================================================================== */
+  --lemmo-bp-base: 20rem;
+  --lemmo-bp-sm: 40rem;
+  --lemmo-bp-md: 48rem;
+  --lemmo-bp-lg: 64rem;
+  --lemmo-bp-xl: 80rem;
+  --lemmo-bp-2xl: 120rem;
+  --lemmo-bp-3xl: 158rem;
+  --lemmo-bp-tablet: var(--lemmo-bp-md);
+  --lemmo-bp-desktop: var(--lemmo-bp-xl);
+  --lemmo-bp-wide: var(--lemmo-bp-2xl);
+  --lemmo-stroke-none: 0;
+  --lemmo-stroke-hairline: 0.5px;
+  --lemmo-stroke-thin: 1px;
+  --lemmo-stroke-medium: 1.5px;
+  --lemmo-stroke-thick: 2px;
+  --lemmo-stroke-rim: var(--lemmo-stroke-thin);
+  --lemmo-stroke-border: var(--lemmo-stroke-thin);
+  --lemmo-stroke-border-gradient: var(--lemmo-stroke-thick);
+  --lemmo-stroke-divider: var(--lemmo-stroke-hairline);
+  --lemmo-size-control-xs: 2rem;
+  --lemmo-size-control-sm: 2.25rem;
+  --lemmo-size-control-md: 2.5rem;
+  --lemmo-size-control-lg: 2.75rem;
+  --lemmo-size-control-xl: 3rem;
+  --lemmo-size-icon-xs: .75rem;
+  --lemmo-size-icon-sm: 1rem;
+  --lemmo-size-icon-md: 1.25rem;
+  --lemmo-size-icon-lg: 1.5rem;
+  --lemmo-size-icon-xl: 1.75rem;
+  --lemmo-size-header: 3.25rem;
+  --lemmo-size-header-compact: 2.25rem;
+  --lemmo-size-gutter: 1rem;
+  --lemmo-size-container-base: 100%;
+  --lemmo-size-container-sm: 40rem;
+  --lemmo-size-container-md: 48rem;
+  --lemmo-size-container-lg: 64rem;
+  --lemmo-size-container-xl: 80rem;
+  --lemmo-size-container-2xl: 120rem;
+  --lemmo-size-container-3xl: 158rem;
+  --lemmo-size-container-media: calc(100vw - 2rem);
+  --lemmo-size-container-copy: 80rem;
+  --lemmo-size-container-content: 56rem;
+  --lemmo-size-container-wide: 96rem;
+  --lemmo-size-pricing-column-sm: 66.5rem;
+  --lemmo-size-pricing-column-lg: 89rem;
+  --lemmo-size-pricing-max-default: 90rem;
+  --lemmo-size-pricing-max-wide: 92rem;
+  --lemmo-size-pricing-pad-x: 1rem;
+  --lemmo-size-pricing-pad-x-lg: 3.75rem;
+  --lemmo-size-pricing-pad-y: 2rem;
+
+  /* ================================================================== */
+  /* MOTION & ELEVATION                                                */
+  /* ================================================================== */
+  --lemmo-duration-fast: 100ms;
+  --lemmo-duration-normal: 200ms;
+  --lemmo-duration-slow: 300ms;
+  --lemmo-duration-slower: 500ms;
+  --lemmo-duration-slider: 150ms;
+  --lemmo-duration-plan-swap: 420ms;
+  --lemmo-duration-breathe: 1.8s;
+  --lemmo-ease-out: ease-out;
+  --lemmo-ease-in-out: ease-in-out;
+  --lemmo-ease-snap: cubic-bezier(0.77, 0, 0.175, 1);
+  --lemmo-ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --lemmo-ease-swift: cubic-bezier(0.55, 0, 0.1, 1);
+  --lemmo-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --lemmo-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --lemmo-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --lemmo-shadow-card-featured: 0 1.5rem 4rem rgba(0, 0, 0, 0.24);
+  --lemmo-shadow-card-base: 10px 34px 24px 0 rgba(0, 0, 0, 0.15);
+  --lemmo-shadow-button-brand-inset: inset 0 0.8px 0 0 #d1fe17, inset 0 -1.6px 0 0 #829b19, inset 0 -2.4px 0 0 #829b19;
+  --lemmo-shadow-button-brand: inset 0 0.8px 0 0 #d1fe17, inset 0 -1.6px 0 0 #829b19, inset 0 -2.4px 0 0 #829b19, 10px 34px 24px 0px rgba(0, 0, 0, 0.15);
+  --lemmo-shadow-gloss-inset: inset 0 -2px 2px 0 rgba(255, 255, 255, 0.4), inset 0 2px 2px 0 rgba(255, 255, 255, 0.4);
+  --lemmo-shadow-glow-brand: 0 0 0.4rem color-mix(in srgb, #d1fe17 56%, transparent);
+
+  /* ================================================================== */
+  /* TIER 2 SEMANTIC CONTRACT (Default Dark Theme Colors & Roles)       */
+  /* ================================================================== */
+  --lemmo-page-background: #131517;
+  --lemmo-page-foreground: #e1e1e3;
+  --lemmo-surface-primary-background: #1c1e20;
+  --lemmo-surface-primary-foreground: #e1e1e3;
+  --lemmo-surface-secondary-background: #23262a;
+  --lemmo-surface-secondary-foreground: #a1a1a5;
+  --lemmo-surface-tertiary-background: #0a0c0e;
+  --lemmo-surface-tertiary-foreground: #e1e1e3;
+  --lemmo-surface-elevated-background: #18191c;
+  --lemmo-surface-elevated-foreground: #e1e1e3;
+  --lemmo-surface-glass-background: rgba(15, 17, 19, 0.88);
+  --lemmo-surface-glass-foreground: #e1e1e3;
+  --lemmo-surface-brand-background: #d1fe17;
+  --lemmo-surface-brand-foreground: #131517;
+  --lemmo-text-primary: #e1e1e3;
+  --lemmo-text-secondary: #a1a1a5;
+  --lemmo-text-muted: #898a8b;
+  --lemmo-text-faint: #737475;
+  --lemmo-text-on-brand: #131517;
+  --lemmo-text-reverted: #060515;
+  --lemmo-text-danger: #ff5462;
+  --lemmo-text-warning: #dfab01;
+  --lemmo-text-success: #4ee466;
+  --lemmo-text-info: #5b91fe;
+  --lemmo-border-default: rgba(255, 255, 255, 0.15);
+  --lemmo-border-subtle: rgba(255, 255, 255, 0.04);
+  --lemmo-border-mid: rgba(255, 255, 255, 0.08);
+  --lemmo-border-danger: #fa0019;
+  --lemmo-border-warning: #dfab01;
+  --lemmo-border-success: #2eb844;
+  --lemmo-border-info: #0256fe;
+  --lemmo-interactive-primary-background: #d1fe17;
+  --lemmo-interactive-primary-foreground: #131517;
+  --lemmo-interactive-primary-hover: #c4ee0b;
+  --lemmo-interactive-secondary-background: #0256fe;
+  --lemmo-interactive-secondary-foreground: #ffffff;
+  --lemmo-interactive-secondary-hover: #245ef1;
+  --lemmo-status-danger-background: #5c000f;
+  --lemmo-status-danger-foreground: #ff5462;
+  --lemmo-status-danger-border: #fa0019;
+  --lemmo-status-danger-glow: #ff1f2e;
+  --lemmo-status-warning-background: #523f00;
+  --lemmo-status-warning-foreground: #ffef33;
+  --lemmo-status-warning-border: #dfab01;
+  --lemmo-status-warning-glow: #fff05a;
+  --lemmo-status-success-background: #0d4a17;
+  --lemmo-status-success-foreground: #4ee466;
+  --lemmo-status-success-border: #2eb844;
+  --lemmo-status-success-glow: #00e62e;
+  --lemmo-status-info-background: #000d26;
+  --lemmo-status-info-foreground: #5b91fe;
+  --lemmo-status-info-border: #0256fe;
+  --lemmo-status-info-glow: #3cd8ff;
+
+  /* ================================================================== */
+  /* TIER 2 GRADIENTS (Default Dark Theme)                              */
+  /* ================================================================== */
+  --lemmo-gradient-surface-featured: linear-gradient(225deg, rgba(209, 254, 23, 0.16) 0%, rgba(209, 254, 23, 0.08) 28%, rgba(209, 254, 23, 0) 62%), #18191c;
+  --lemmo-gradient-surface-pink-haze: radial-gradient(145% 54% at 100% 0%, rgba(255, 0, 91, 0.32) 0%, rgba(255, 0, 91, 0.15) 42%, rgba(255, 0, 91, 0) 78%), #18191c;
+  --lemmo-gradient-surface-olive: linear-gradient(180deg, #1F2022 0%, #222420 55%, #272A20 100%);
+  --lemmo-gradient-surface-ocean: linear-gradient(180deg, #121D23 0%, #152026 45%, #1D282E 75%, #273238 100%);
+  --lemmo-gradient-surface-steel: linear-gradient(180deg, #1F2024 0%, #232428 40%, #343539 75%, #48494D 100%);
+  --lemmo-gradient-surface-base: linear-gradient(180deg, #1c1e20 0%, #131517 100%);
+  --lemmo-gradient-surface-soft: radial-gradient(58% 220% at 3% 42%, rgba(255, 255, 255, 0.095) 0%, rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.012) 100%), linear-gradient(180deg, #1c1e20 0%, #131517 100%);
+  --lemmo-gradient-surface-lime-wash: radial-gradient(56.49% 230.73% at 2.37% 40.91%, rgba(187, 251, 12, 0.07) 0%, rgba(12, 251, 32, 0.01) 100%), radial-gradient(41.8% 183.68% at 10.4% 53.71%, rgba(197, 197, 197, 0.08) 0%, rgba(197, 197, 197, 0.01) 100%), linear-gradient(180deg, #1c1e20 0%, #131517 100%);
+  --lemmo-gradient-surface-pink-wash: radial-gradient(56.49% 230.73% at 2.37% 40.91%, rgba(237, 21, 114, 0.10) 0%, rgba(237, 21, 114, 0.01) 100%), linear-gradient(180deg, #1c1e20 0%, #131517 100%);
+  --lemmo-gradient-surface-blue-wash: radial-gradient(56.49% 230.73% at 2.37% 40.91%, rgba(21, 68, 237, 0.10) 0%, rgba(21, 68, 237, 0.01) 100%), linear-gradient(180deg, #1c1e20 0%, #131517 100%);
+  --lemmo-gradient-surface-steel-flat: linear-gradient(180deg, rgba(110, 145, 188, 0.02) 0%, rgba(110, 145, 188, 0.20) 100%), #1c1e20;
+  --lemmo-gradient-surface-plain: linear-gradient(180deg, #1c1e20 0%, #131517 100%);
+  --lemmo-gradient-rim-vertical: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.09) 18%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0) 72%);
+  --lemmo-gradient-rim-diagonal: linear-gradient(225deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.10) 18%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0) 76%);
+  --lemmo-gradient-border-pink: radial-gradient(86.59% 115.91% at 50% 45.45%, #fb398c 0%, #ed1572 100%);
+  --lemmo-gradient-border-blue: radial-gradient(86.59% 115.91% at 50% 45.45%, #245ef1 0%, #1544ed 100%);
+  --lemmo-gradient-pill-lime: radial-gradient(ellipse 55% 95% at 73% 50%, rgba(117, 239, 29, 0.6) 0%, rgba(194, 237, 21, 0) 100%), radial-gradient(ellipse 25% 42% at 85% 37%, rgba(255, 255, 255, 0.6) 0%, rgba(209, 254, 23, 0) 100%), radial-gradient(ellipse 33% 70% at 12% 76%, rgba(200, 239, 29, 0.6) 0%, rgba(194, 237, 21, 0) 100%), linear-gradient(90deg, #d1fe17 0%, #d1fe17 100%);
+  --lemmo-gradient-pill-blue: radial-gradient(ellipse 75% 300% at 73% 50%, #1d63ef 0%, #5150d0 45%, rgba(237, 21, 114, 0) 100%), radial-gradient(ellipse 30% 120% at 85% 37%, rgba(255, 255, 255, 0.6) 0%, rgba(209, 254, 23, 0) 100%), #0256fe;
+  --lemmo-gradient-pill-ultraviolet: radial-gradient(ellipse 55% 95% at 73% 50%, rgba(29, 99, 239, 0.6) 0%, rgba(81, 80, 208, 0.45) 25%, rgba(133, 60, 176, 0.3) 50%, rgba(237, 21, 114, 0) 100%), radial-gradient(ellipse 25% 42% at 85% 37%, rgba(255, 255, 255, 0.6) 0%, rgba(209, 254, 23, 0) 100%), radial-gradient(ellipse 33% 70% at 12% 76%, rgba(29, 99, 239, 0.6) 0%, rgba(133, 60, 176, 0.3) 50%, rgba(237, 21, 114, 0) 100%), linear-gradient(90deg, #0256fe 0%, #0256fe 100%);
+  --lemmo-gradient-pill-pink: radial-gradient(ellipse 55% 95% at 73% 50%, rgba(239, 29, 186, 0.6) 0%, rgba(237, 21, 114, 0) 100%), radial-gradient(ellipse 25% 42% at 85% 37%, rgba(255, 255, 255, 0.6) 0%, rgba(209, 254, 23, 0) 100%), radial-gradient(ellipse 33% 70% at 12% 76%, rgba(176, 29, 239, 0.6) 0%, rgba(206, 25, 176, 0.3) 50%, rgba(237, 21, 114, 0) 100%), linear-gradient(90deg, #ff005b 0%, #ff005b 100%);
+  --lemmo-gradient-offer-base: radial-gradient(120% 90% at 50% 0%, #55142c 0%, #35101d 38%, #1e0c14 70%, #140a0f 100%);
+  --lemmo-gradient-offer-flash: linear-gradient(0deg, rgba(255, 0, 91, 0.32) 0%, rgba(255, 0, 91, 0.016) 100%), linear-gradient(90deg, #0a0c0e 0%, #0a0c0e 100%);
+  --lemmo-gradient-offer-dots: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, rgba(209, 254, 23, 0) 0);
+  --lemmo-gradient-offer-combo: linear-gradient(135deg, #ff005b 0%, #d1004e 40%, #8b006a 100%);
+  --lemmo-gradient-table-cyan: radial-gradient(211% 211% at 50.16% 100%, rgba(60, 140, 255, 0.20) 0%, rgba(60, 216, 255, 0.20) 100%), rgba(255, 255, 255, 0.05);
+  --lemmo-gradient-overlay-darken: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
+}
+
+/* ================================================================== */
+/* BILINGUAL LANGUAGE RULES: Automatic Font & Track Switching          */
+/* ================================================================== */
+:root[lang='fa'],
+[lang='fa'] {
+  --lemmo-font-body: var(--lemmo-font-sans-fa);
+  --lemmo-font-heading: var(--lemmo-font-heading-fa);
+  --lemmo-font-display: var(--lemmo-font-display-fa);
+  --lemmo-leading-factor: 1.15;
+
+  /* Persian letters require normal tracking; negative tracking breaks glyph connections */
+  --lemmo-type-track-slight: normal;
+  --lemmo-type-track-tight: normal;
+  --lemmo-type-track-heading: normal;
+  --lemmo-type-track-caps: normal;
+  --lemmo-type-track-table-head: normal;
+}
+
+/* ================================================================== */
+/* NUMERALS STANDARD: Satoshi Tabular Numerals (LTR Isolated)          */
+/* ================================================================== */
+.tabular-nums,
+[data-numeric] {
+  font-family: var(--lemmo-font-numeric, 'Satoshi', sans-serif);
+  font-feature-settings: 'tnum' 1;
+  direction: ltr;
+  unicode-bidi: isolate;
+}

package/assets/js/tokens.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @lemmo-lab/tokens (v2) - TypeScript Definitions
+ */
+
+export declare const core: typeof import('./tokens.js').core;
+export declare const semantic: typeof import('./tokens.js').semantic;
+export declare const themes: {
+  default: any;
+  light: any;
+  neon: any;
+  midnight: any;
+  [key: string]: any;
+};
+export declare const tokens: {
+  core: typeof core;
+  semantic: typeof semantic;
+  themes: typeof themes;
+  defaultTheme: any;
+  lightTheme: any;
+  [key: string]: any;
+};
+export default tokens;