@lemmo-lab/tokens-cli 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +90 -0
  2. package/assets/css/themes/index.css +6 -0
  3. package/assets/css/themes/light.css +95 -0
  4. package/assets/css/themes/midnight.css +95 -0
  5. package/assets/css/themes/neon.css +95 -0
  6. package/assets/css/variables.css +324 -0
  7. package/assets/js/tokens.d.ts +22 -0
  8. package/assets/js/tokens.js +1142 -0
  9. package/assets/tailwind/preset.js +40 -0
  10. package/bin/cli.js +124 -0
  11. package/package.json +34 -0
  12. package/src/commands/add-theme.js +57 -0
  13. package/src/commands/diff.js +72 -0
  14. package/src/commands/install.js +269 -0
  15. package/src/commands/list.js +31 -0
  16. package/src/utils/banner.js +8 -0
  17. package/src/utils/prompts.js +67 -0
package/README.md ADDED
@@ -0,0 +1,90 @@
1
+ # @lemmo-lab/tokens-cli
2
+
3
+ > **Official Command Line Tool for Lemmo Design Tokens**
4
+ > Install, scaffold, inspect, and configure multi-theme design tokens across projects.
5
+
6
+ `@lemmo-lab/tokens-cli` is a developer-friendly CLI designed to integrate `@lemmo-lab/tokens` into any web application, frontend framework, or component library. It supports interactive wizards and non-interactive scripted flag modes.
7
+
8
+ ---
9
+
10
+ ## 🚀 Quick Start
11
+
12
+ Run instantly without installation:
13
+
14
+ ```bash
15
+ # Interactive setup wizard
16
+ npx @lemmo-lab/tokens-cli install
17
+
18
+ # Or if working inside the tokens monorepo:
19
+ ./packages/cli/bin/cli.js install
20
+ ```
21
+
22
+ ---
23
+
24
+ ## 📦 Commands Reference
25
+
26
+ ### 1. `tokens install` / `tokens init` / `tokens pull`
27
+ Installs token stylesheets, theme overrides, and presets into your target project.
28
+
29
+ #### Options:
30
+ - `--interactive, -i`: Force interactive prompt wizard.
31
+ - `--theme, -t <themes>`: Comma-separated theme presets to install:
32
+ - `default`: Dark theme (#131517 canvas)
33
+ - `light`: Day / Light theme (#f8f9fa canvas, high contrast lime)
34
+ - `neon`: Cyberpunk high contrast (#00ff66 & #00f0ff)
35
+ - `midnight`: Pure OLED black (#000000)
36
+ - `all`: All four themes
37
+ - `--format, -f <formats>`: Output format(s) to install:
38
+ - `css`: Custom properties (`variables.css`, `themes/*.css`, `index.css`)
39
+ - `tailwind`: Tailwind CSS preset (`tailwind/preset.js`)
40
+ - `js`: JavaScript ESM tokens dictionary (`tokens.js`)
41
+ - `ts`: TypeScript declaration file (`tokens.d.ts`)
42
+ - `all`: All formats
43
+ - `--out, -o <dir>`: Destination directory (default: `./tokens`).
44
+ - `--yes, -y`: Skip prompts and apply standard defaults.
45
+ - `--dry-run`: Preview files to be installed without writing to disk.
46
+
47
+ #### Examples:
48
+ ```bash
49
+ # Install only the Light theme to ./src/styles/tokens:
50
+ npx @lemmo-lab/tokens-cli install --theme light --out ./src/styles/tokens
51
+
52
+ # Install Default and Neon themes with Tailwind preset:
53
+ npx @lemmo-lab/tokens-cli install --theme default,neon --format css,tailwind --out ./tokens
54
+
55
+ # Interactive installation wizard:
56
+ npx @lemmo-lab/tokens-cli install --interactive
57
+ ```
58
+
59
+ ---
60
+
61
+ ### 2. `tokens list`
62
+ Displays all available themes, supported formats, and token scales available in `@lemmo-lab/tokens`.
63
+
64
+ ```bash
65
+ npx @lemmo-lab/tokens-cli list
66
+ ```
67
+
68
+ ---
69
+
70
+ ### 3. `tokens diff <theme1> <theme2>`
71
+ Compares two theme presets and outputs every token value difference in the terminal.
72
+
73
+ ```bash
74
+ npx @lemmo-lab/tokens-cli diff default light
75
+ npx @lemmo-lab/tokens-cli diff neon midnight
76
+ ```
77
+
78
+ ---
79
+
80
+ ### 4. `tokens add-theme <theme-name>`
81
+ Scaffolds a new Tier 3 theme file inside `packages/tokens/src/themes/<theme-name>.json` with all required Tier 2 semantic keys pre-populated, strictly following DTCG specifications and CI governance rules.
82
+
83
+ ```bash
84
+ npx @lemmo-lab/tokens-cli add-theme cyberpunk
85
+ ```
86
+
87
+ ---
88
+
89
+ ## 📄 License
90
+ MIT © Lemmo Lab
package/assets/css/themes/index.css ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * @lemmo-lab/tokens (v2) - All Theme Presets Index
3
+ */
4
+ @import "./light.css";
5
+ @import "./midnight.css";
6
+ @import "./neon.css";
package/assets/css/themes/light.css ADDED
@@ -0,0 +1,95 @@
1
+ /**
2
+ * @lemmo-lab/tokens (v2) - LIGHT Theme Preset
3
+ * Single Source of Truth for Lemmo Design System
4
+ * Governed strictly by AGENTS.md rules. DO NOT EDIT DIRECTLY.
5
+ */
6
+
7
+ [data-theme='light'],
8
+ :root[data-theme='light'],
9
+ .theme-light {
10
+ /* Colors & Roles */
11
+ --lemmo-page-background: #f8f9fa;
12
+ --lemmo-page-foreground: #131517;
13
+ --lemmo-surface-primary-background: #ffffff;
14
+ --lemmo-surface-primary-foreground: #131517;
15
+ --lemmo-surface-secondary-background: #e9ecef;
16
+ --lemmo-surface-secondary-foreground: #495057;
17
+ --lemmo-surface-tertiary-background: #ffffff;
18
+ --lemmo-surface-tertiary-foreground: #131517;
19
+ --lemmo-surface-elevated-background: #ffffff;
20
+ --lemmo-surface-elevated-foreground: #131517;
21
+ --lemmo-surface-glass-background: rgba(255, 255, 255, 0.88);
22
+ --lemmo-surface-glass-foreground: #131517;
23
+ --lemmo-surface-brand-background: #386b00;
24
+ --lemmo-surface-brand-foreground: #ffffff;
25
+ --lemmo-text-primary: #131517;
26
+ --lemmo-text-secondary: #495057;
27
+ --lemmo-text-muted: #6c757d;
28
+ --lemmo-text-faint: #adb5bd;
29
+ --lemmo-text-on-brand: #ffffff;
30
+ --lemmo-text-reverted: #ffffff;
31
+ --lemmo-text-danger: #c9184a;
32
+ --lemmo-text-warning: #b05d00;
33
+ --lemmo-text-success: #2d6a4f;
34
+ --lemmo-text-info: #00509d;
35
+ --lemmo-border-default: rgba(0, 0, 0, 0.25);
36
+ --lemmo-border-subtle: rgba(0, 0, 0, 0.08);
37
+ --lemmo-border-mid: rgba(0, 0, 0, 0.15);
38
+ --lemmo-border-danger: #c9184a;
39
+ --lemmo-border-warning: #b05d00;
40
+ --lemmo-border-success: #2d6a4f;
41
+ --lemmo-border-info: #00509d;
42
+ --lemmo-interactive-primary-background: #386b00;
43
+ --lemmo-interactive-primary-foreground: #ffffff;
44
+ --lemmo-interactive-primary-hover: #829b19;
45
+ --lemmo-interactive-secondary-background: #0256fe;
46
+ --lemmo-interactive-secondary-foreground: #ffffff;
47
+ --lemmo-interactive-secondary-hover: #245ef1;
48
+ --lemmo-status-danger-background: #ffe3e3;
49
+ --lemmo-status-danger-foreground: #a4161a;
50
+ --lemmo-status-danger-border: #c9184a;
51
+ --lemmo-status-danger-glow: #ff8787;
52
+ --lemmo-status-warning-background: #fff3bf;
53
+ --lemmo-status-warning-foreground: #8a4500;
54
+ --lemmo-status-warning-border: #b05d00;
55
+ --lemmo-status-warning-glow: #ffe066;
56
+ --lemmo-status-success-background: #d3f9d8;
57
+ --lemmo-status-success-foreground: #1b4332;
58
+ --lemmo-status-success-border: #2d6a4f;
59
+ --lemmo-status-success-glow: #8ce99a;
60
+ --lemmo-status-info-background: #e7f5ff;
61
+ --lemmo-status-info-foreground: #00296b;
62
+ --lemmo-status-info-border: #00509d;
63
+ --lemmo-status-info-glow: #74c0fc;
64
+
65
+ /* Radius Base */
66
+ --lemmo-radius-base: .5rem;
67
+
68
+ /* Per-Theme Gradients */
69
+ --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%), #ffffff;
70
+ --lemmo-gradient-surface-pink-haze: radial-gradient(145% 54% at 100% 0%, rgba(255, 0, 91, 0.15) 0%, rgba(255, 0, 91, 0.15) 42%, rgba(255, 0, 91, 0) 78%), #ffffff;
71
+ --lemmo-gradient-surface-olive: linear-gradient(180deg, #f4f6f0 0%, #eaefe5 55%, #e2ebd9 100%);
72
+ --lemmo-gradient-surface-ocean: linear-gradient(180deg, #edf4f7 0%, #e2eff4 45%, #d5e7ef 75%, #c5dee9 100%);
73
+ --lemmo-gradient-surface-steel: linear-gradient(180deg, #f1f3f6 0%, #e6e9ef 40%, #d9dde6 75%, #ccd1dc 100%);
74
+ --lemmo-gradient-surface-base: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
75
+ --lemmo-gradient-surface-soft: radial-gradient(58% 220% at 3% 42%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 42%, rgba(255, 255, 255, 0.1) 100%), linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
76
+ --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, #ffffff 0%, #f8f9fa 100%);
77
+ --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, #ffffff 0%, #f8f9fa 100%);
78
+ --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, #ffffff 0%, #f8f9fa 100%);
79
+ --lemmo-gradient-surface-steel-flat: linear-gradient(180deg, rgba(110, 145, 188, 0.02) 0%, rgba(110, 145, 188, 0.20) 100%), #ffffff;
80
+ --lemmo-gradient-surface-plain: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
81
+ --lemmo-gradient-rim-vertical: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.07) 18%, rgba(0, 0, 0, 0.04) 38%, rgba(209, 254, 23, 0) 72%);
82
+ --lemmo-gradient-rim-diagonal: linear-gradient(225deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.07) 18%, rgba(0, 0, 0, 0.04) 42%, rgba(209, 254, 23, 0) 76%);
83
+ --lemmo-gradient-border-pink: radial-gradient(86.59% 115.91% at 50% 45.45%, #fb398c 0%, #ed1572 100%);
84
+ --lemmo-gradient-border-blue: radial-gradient(86.59% 115.91% at 50% 45.45%, #245ef1 0%, #1544ed 100%);
85
+ --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, #386b00 0%, #386b00 100%);
86
+ --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;
87
+ --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%);
88
+ --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%);
89
+ --lemmo-gradient-offer-base: radial-gradient(120% 90% at 50% 0%, #fce8ef 0%, #f8d4e2 38%, #f4c0d4 70%, #f0adc6 100%);
90
+ --lemmo-gradient-offer-flash: linear-gradient(0deg, rgba(255, 0, 91, 0.15) 0%, rgba(209, 254, 23, 0) 100%), linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
91
+ --lemmo-gradient-offer-dots: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.07) 1px, rgba(209, 254, 23, 0) 0);
92
+ --lemmo-gradient-offer-combo: linear-gradient(135deg, #ff005b 0%, #d1004e 40%, #8b006a 100%);
93
+ --lemmo-gradient-table-cyan: radial-gradient(211% 211% at 50.16% 100%, {color.alpha.tableCyanLight} 0%, {color.alpha.tableCyanLight} 100%), rgba(255, 255, 255, 0.5);
94
+ --lemmo-gradient-overlay-darken: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
95
+ }
package/assets/css/themes/midnight.css ADDED
@@ -0,0 +1,95 @@
1
+ /**
2
+ * @lemmo-lab/tokens (v2) - MIDNIGHT Theme Preset
3
+ * Single Source of Truth for Lemmo Design System
4
+ * Governed strictly by AGENTS.md rules. DO NOT EDIT DIRECTLY.
5
+ */
6
+
7
+ [data-theme='midnight'],
8
+ :root[data-theme='midnight'],
9
+ .theme-midnight {
10
+ /* Colors & Roles */
11
+ --lemmo-page-background: #000000;
12
+ --lemmo-page-foreground: #ffffff;
13
+ --lemmo-surface-primary-background: #0c0c0c;
14
+ --lemmo-surface-primary-foreground: #ffffff;
15
+ --lemmo-surface-secondary-background: #161616;
16
+ --lemmo-surface-secondary-foreground: #999999;
17
+ --lemmo-surface-tertiary-background: #040404;
18
+ --lemmo-surface-tertiary-foreground: #ffffff;
19
+ --lemmo-surface-elevated-background: #1e1e1e;
20
+ --lemmo-surface-elevated-foreground: #ffffff;
21
+ --lemmo-surface-glass-background: rgba(0, 0, 0, 0.92);
22
+ --lemmo-surface-glass-foreground: #ffffff;
23
+ --lemmo-surface-brand-background: #d1fe17;
24
+ --lemmo-surface-brand-foreground: #000000;
25
+ --lemmo-text-primary: #ffffff;
26
+ --lemmo-text-secondary: #999999;
27
+ --lemmo-text-muted: #666666;
28
+ --lemmo-text-faint: #444444;
29
+ --lemmo-text-on-brand: #000000;
30
+ --lemmo-text-reverted: #000000;
31
+ --lemmo-text-danger: #ff5462;
32
+ --lemmo-text-warning: #dfab01;
33
+ --lemmo-text-success: #4ee466;
34
+ --lemmo-text-info: #5b91fe;
35
+ --lemmo-border-default: rgba(255, 255, 255, 0.2);
36
+ --lemmo-border-subtle: rgba(255, 255, 255, 0.08);
37
+ --lemmo-border-mid: rgba(255, 255, 255, 0.12);
38
+ --lemmo-border-danger: #fa0019;
39
+ --lemmo-border-warning: #dfab01;
40
+ --lemmo-border-success: #2eb844;
41
+ --lemmo-border-info: #0256fe;
42
+ --lemmo-interactive-primary-background: #d1fe17;
43
+ --lemmo-interactive-primary-foreground: #000000;
44
+ --lemmo-interactive-primary-hover: #c4ee0b;
45
+ --lemmo-interactive-secondary-background: #0256fe;
46
+ --lemmo-interactive-secondary-foreground: #ffffff;
47
+ --lemmo-interactive-secondary-hover: #245ef1;
48
+ --lemmo-status-danger-background: #5c000f;
49
+ --lemmo-status-danger-foreground: #ff5462;
50
+ --lemmo-status-danger-border: #fa0019;
51
+ --lemmo-status-danger-glow: #ff1f2e;
52
+ --lemmo-status-warning-background: #523f00;
53
+ --lemmo-status-warning-foreground: #ffef33;
54
+ --lemmo-status-warning-border: #dfab01;
55
+ --lemmo-status-warning-glow: #fff05a;
56
+ --lemmo-status-success-background: #0d4a17;
57
+ --lemmo-status-success-foreground: #4ee466;
58
+ --lemmo-status-success-border: #2eb844;
59
+ --lemmo-status-success-glow: #00e62e;
60
+ --lemmo-status-info-background: #000d26;
61
+ --lemmo-status-info-foreground: #5b91fe;
62
+ --lemmo-status-info-border: #0256fe;
63
+ --lemmo-status-info-glow: #3cd8ff;
64
+
65
+ /* Radius Base */
66
+ --lemmo-radius-base: .5rem;
67
+
68
+ /* Per-Theme Gradients */
69
+ --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%), #1e1e1e;
70
+ --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%), #1e1e1e;
71
+ --lemmo-gradient-surface-olive: linear-gradient(180deg, #1F2022 0%, #222420 55%, #272A20 100%);
72
+ --lemmo-gradient-surface-ocean: linear-gradient(180deg, #121D23 0%, #152026 45%, #1D282E 75%, #273238 100%);
73
+ --lemmo-gradient-surface-steel: linear-gradient(180deg, #1F2024 0%, #232428 40%, #343539 75%, #48494D 100%);
74
+ --lemmo-gradient-surface-base: linear-gradient(180deg, #0c0c0c 0%, #000000 100%);
75
+ --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, #0c0c0c 0%, #000000 100%);
76
+ --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, #0c0c0c 0%, #000000 100%);
77
+ --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, #0c0c0c 0%, #000000 100%);
78
+ --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, #0c0c0c 0%, #000000 100%);
79
+ --lemmo-gradient-surface-steel-flat: linear-gradient(180deg, rgba(110, 145, 188, 0.02) 0%, rgba(110, 145, 188, 0.20) 100%), #0c0c0c;
80
+ --lemmo-gradient-surface-plain: linear-gradient(180deg, #0c0c0c 0%, #000000 100%);
81
+ --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%);
82
+ --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%);
83
+ --lemmo-gradient-border-pink: radial-gradient(86.59% 115.91% at 50% 45.45%, #fb398c 0%, #ed1572 100%);
84
+ --lemmo-gradient-border-blue: radial-gradient(86.59% 115.91% at 50% 45.45%, #245ef1 0%, #1544ed 100%);
85
+ --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%);
86
+ --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;
87
+ --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%);
88
+ --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%);
89
+ --lemmo-gradient-offer-base: radial-gradient(120% 90% at 50% 0%, #55142c 0%, #35101d 38%, #1e0c14 70%, #140a0f 100%);
90
+ --lemmo-gradient-offer-flash: linear-gradient(0deg, rgba(255, 0, 91, 0.32) 0%, rgba(255, 0, 91, 0.016) 100%), linear-gradient(90deg, #040404 0%, #040404 100%);
91
+ --lemmo-gradient-offer-dots: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, rgba(209, 254, 23, 0) 0);
92
+ --lemmo-gradient-offer-combo: linear-gradient(135deg, #ff005b 0%, #d1004e 40%, #8b006a 100%);
93
+ --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.08);
94
+ --lemmo-gradient-overlay-darken: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
95
+ }
package/assets/css/themes/neon.css ADDED
@@ -0,0 +1,95 @@
1
+ /**
2
+ * @lemmo-lab/tokens (v2) - NEON Theme Preset
3
+ * Single Source of Truth for Lemmo Design System
4
+ * Governed strictly by AGENTS.md rules. DO NOT EDIT DIRECTLY.
5
+ */
6
+
7
+ [data-theme='neon'],
8
+ :root[data-theme='neon'],
9
+ .theme-neon {
10
+ /* Colors & Roles */
11
+ --lemmo-page-background: #08090a;
12
+ --lemmo-page-foreground: #f0f6fc;
13
+ --lemmo-surface-primary-background: #12151a;
14
+ --lemmo-surface-primary-foreground: #f0f6fc;
15
+ --lemmo-surface-secondary-background: #181c24;
16
+ --lemmo-surface-secondary-foreground: #9db1c5;
17
+ --lemmo-surface-tertiary-background: #040506;
18
+ --lemmo-surface-tertiary-foreground: #f0f6fc;
19
+ --lemmo-surface-elevated-background: #1c212b;
20
+ --lemmo-surface-elevated-foreground: #f0f6fc;
21
+ --lemmo-surface-glass-background: rgba(8, 9, 10, 0.9);
22
+ --lemmo-surface-glass-foreground: #f0f6fc;
23
+ --lemmo-surface-brand-background: #00ff66;
24
+ --lemmo-surface-brand-foreground: #131517;
25
+ --lemmo-text-primary: #f0f6fc;
26
+ --lemmo-text-secondary: #9db1c5;
27
+ --lemmo-text-muted: #697e94;
28
+ --lemmo-text-faint: #465668;
29
+ --lemmo-text-on-brand: #131517;
30
+ --lemmo-text-reverted: #ffffff;
31
+ --lemmo-text-danger: #ff007f;
32
+ --lemmo-text-warning: #ffef33;
33
+ --lemmo-text-success: #00ff66;
34
+ --lemmo-text-info: #00f0ff;
35
+ --lemmo-border-default: rgba(0, 240, 255, 0.45);
36
+ --lemmo-border-subtle: rgba(0, 240, 255, 0.15);
37
+ --lemmo-border-mid: rgba(0, 240, 255, 0.25);
38
+ --lemmo-border-danger: #ff007f;
39
+ --lemmo-border-warning: #dfab01;
40
+ --lemmo-border-success: #00ff66;
41
+ --lemmo-border-info: #00f0ff;
42
+ --lemmo-interactive-primary-background: #00ff66;
43
+ --lemmo-interactive-primary-foreground: #131517;
44
+ --lemmo-interactive-primary-hover: #c4ee0b;
45
+ --lemmo-interactive-secondary-background: #00f0ff;
46
+ --lemmo-interactive-secondary-foreground: #131517;
47
+ --lemmo-interactive-secondary-hover: #9ce6f3;
48
+ --lemmo-status-danger-background: #5c000f;
49
+ --lemmo-status-danger-foreground: #ff5462;
50
+ --lemmo-status-danger-border: #ff007f;
51
+ --lemmo-status-danger-glow: #ff007f;
52
+ --lemmo-status-warning-background: #523f00;
53
+ --lemmo-status-warning-foreground: #ffef33;
54
+ --lemmo-status-warning-border: #dfab01;
55
+ --lemmo-status-warning-glow: #fff05a;
56
+ --lemmo-status-success-background: #0d4a17;
57
+ --lemmo-status-success-foreground: #00ff66;
58
+ --lemmo-status-success-border: #00ff66;
59
+ --lemmo-status-success-glow: #00ff66;
60
+ --lemmo-status-info-background: #000d26;
61
+ --lemmo-status-info-foreground: #00f0ff;
62
+ --lemmo-status-info-border: #00f0ff;
63
+ --lemmo-status-info-glow: #00f0ff;
64
+
65
+ /* Radius Base */
66
+ --lemmo-radius-base: .5rem;
67
+
68
+ /* Per-Theme Gradients */
69
+ --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%), #1c212b;
70
+ --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%), #1c212b;
71
+ --lemmo-gradient-surface-olive: linear-gradient(180deg, #1F2022 0%, #222420 55%, #272A20 100%);
72
+ --lemmo-gradient-surface-ocean: linear-gradient(180deg, #121D23 0%, #152026 45%, #1D282E 75%, #273238 100%);
73
+ --lemmo-gradient-surface-steel: linear-gradient(180deg, #1F2024 0%, #232428 40%, #343539 75%, #48494D 100%);
74
+ --lemmo-gradient-surface-base: linear-gradient(180deg, #12151a 0%, #08090a 100%);
75
+ --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, #12151a 0%, #08090a 100%);
76
+ --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, #12151a 0%, #08090a 100%);
77
+ --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, #12151a 0%, #08090a 100%);
78
+ --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, #12151a 0%, #08090a 100%);
79
+ --lemmo-gradient-surface-steel-flat: linear-gradient(180deg, rgba(110, 145, 188, 0.02) 0%, rgba(110, 145, 188, 0.20) 100%), #12151a;
80
+ --lemmo-gradient-surface-plain: linear-gradient(180deg, #12151a 0%, #08090a 100%);
81
+ --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%);
82
+ --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%);
83
+ --lemmo-gradient-border-pink: radial-gradient(86.59% 115.91% at 50% 45.45%, #ff007f 0%, #ed1572 100%);
84
+ --lemmo-gradient-border-blue: radial-gradient(86.59% 115.91% at 50% 45.45%, #00f0ff 0%, #1544ed 100%);
85
+ --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, #00ff66 0%, #00ff66 100%);
86
+ --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%), #00f0ff;
87
+ --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, #00f0ff 0%, #00f0ff 100%);
88
+ --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, #ff007f 0%, #ff007f 100%);
89
+ --lemmo-gradient-offer-base: radial-gradient(120% 90% at 50% 0%, #55142c 0%, #35101d 38%, #1e0c14 70%, #140a0f 100%);
90
+ --lemmo-gradient-offer-flash: linear-gradient(0deg, rgba(255, 0, 91, 0.32) 0%, rgba(255, 0, 91, 0.016) 100%), linear-gradient(90deg, #040506 0%, #040506 100%);
91
+ --lemmo-gradient-offer-dots: radial-gradient(circle at 1px 1px, rgba(0, 240, 255, 0.15) 1px, rgba(209, 254, 23, 0) 0);
92
+ --lemmo-gradient-offer-combo: linear-gradient(135deg, #ff007f 0%, #d1004e 40%, #8b006a 100%);
93
+ --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(0, 240, 255, 0.15);
94
+ --lemmo-gradient-overlay-darken: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
95
+ }