@lemmo-lab/tokens 1.0.1 → 2.0.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 (21) hide show
  1. package/README.md +1 -1
  2. package/dist/css/themes/index.css +1 -1
  3. package/dist/css/themes/light.css +57 -190
  4. package/dist/css/themes/midnight.css +66 -142
  5. package/dist/css/themes/neon.css +63 -139
  6. package/dist/css/variables.css +286 -575
  7. package/dist/js/tokens.d.ts +1 -1
  8. package/dist/js/tokens.js +398 -180
  9. package/dist/tailwind/preset.js +13 -11
  10. package/package.json +1 -2
  11. package/dist/css/system-design/lemmo.breakpoints.css +0 -19
  12. package/dist/css/system-design/lemmo.colors.css +0 -196
  13. package/dist/css/system-design/lemmo.elevation.css +0 -23
  14. package/dist/css/system-design/lemmo.gradients.css +0 -62
  15. package/dist/css/system-design/lemmo.motion.css +0 -28
  16. package/dist/css/system-design/lemmo.radius.css +0 -27
  17. package/dist/css/system-design/lemmo.sizes.css +0 -54
  18. package/dist/css/system-design/lemmo.spacing.css +0 -42
  19. package/dist/css/system-design/lemmo.strokes.css +0 -18
  20. package/dist/css/system-design/lemmo.tokens.css +0 -14
  21. package/dist/css/system-design/lemmo.typography.css +0 -120
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  ## 🌟 Architecture & Multi-Theme System
8
8
 
9
- Lemu adopts a **Three-Tier Token Model**:
9
+ Lemmo adopts a **Three-Tier Token Model**:
10
10
  1. **Tier 1 — Core Primitives (`packages/tokens/src/core/`)**: Raw palettes, 4px spacing ladder, typography scales, radius, elevation, motion, breakpoints.
11
11
  2. **Tier 2 — Semantic Contract (`packages/tokens/src/semantic/`)**: Named component roles (`--surface-primary`, `--text-primary`, `--border-default`, etc.) that alias Tier 1 primitives.
12
12
  3. **Tier 3 — Themes (`packages/tokens/src/themes/`)**:
package/dist/css/themes/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @lemmo-lab/tokens - All Theme Presets Index
2
+ * @lemmo-lab/tokens (v2) - All Theme Presets Index
3
3
  */
4
4
  @import "./light.css";
5
5
  @import "./midnight.css";
package/dist/css/themes/light.css CHANGED
@@ -1,228 +1,95 @@
1
1
  /**
2
- * @lemmo-lab/tokens - LIGHT Theme Preset
3
- * Auto-generated by Style Dictionary pipeline. DO NOT EDIT DIRECTLY.
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.
4
5
  */
5
6
 
6
7
  [data-theme='light'],
7
8
  :root[data-theme='light'],
8
9
  .theme-light {
9
- --page-background: #f8f9fa;
10
+ /* Colors & Roles */
10
11
  --lemmo-page-background: #f8f9fa;
11
- --lemu-page-background: #f8f9fa;
12
- --page-foreground: #131517;
13
12
  --lemmo-page-foreground: #131517;
14
- --lemu-page-foreground: #131517;
15
- --surface-primary-background: #ffffff;
16
13
  --lemmo-surface-primary-background: #ffffff;
17
- --lemu-surface-primary-background: #ffffff;
18
- --surface-primary-foreground: #131517;
19
14
  --lemmo-surface-primary-foreground: #131517;
20
- --lemu-surface-primary-foreground: #131517;
21
- --surface-secondary-background: #e9ecef;
22
15
  --lemmo-surface-secondary-background: #e9ecef;
23
- --lemu-surface-secondary-background: #e9ecef;
24
- --surface-secondary-foreground: #495057;
25
16
  --lemmo-surface-secondary-foreground: #495057;
26
- --lemu-surface-secondary-foreground: #495057;
27
- --surface-tertiary-background: #ffffff;
28
17
  --lemmo-surface-tertiary-background: #ffffff;
29
- --lemu-surface-tertiary-background: #ffffff;
30
- --surface-tertiary-foreground: #131517;
31
18
  --lemmo-surface-tertiary-foreground: #131517;
32
- --lemu-surface-tertiary-foreground: #131517;
33
- --surface-elevated-background: #ffffff;
34
19
  --lemmo-surface-elevated-background: #ffffff;
35
- --lemu-surface-elevated-background: #ffffff;
36
- --surface-elevated-foreground: #131517;
37
20
  --lemmo-surface-elevated-foreground: #131517;
38
- --lemu-surface-elevated-foreground: #131517;
39
- --surface-glass-background: rgba(255, 255, 255, 0.88);
40
21
  --lemmo-surface-glass-background: rgba(255, 255, 255, 0.88);
41
- --lemu-surface-glass-background: rgba(255, 255, 255, 0.88);
42
- --surface-glass-foreground: #131517;
43
22
  --lemmo-surface-glass-foreground: #131517;
44
- --lemu-surface-glass-foreground: #131517;
45
- --surface-brand-background: #d1fe17;
46
- --lemmo-surface-brand-background: #d1fe17;
47
- --lemu-surface-brand-background: #d1fe17;
48
- --surface-brand-foreground: #131517;
49
- --lemmo-surface-brand-foreground: #131517;
50
- --lemu-surface-brand-foreground: #131517;
51
- --text-primary: #131517;
23
+ --lemmo-surface-brand-background: #386b00;
24
+ --lemmo-surface-brand-foreground: #ffffff;
52
25
  --lemmo-text-primary: #131517;
53
- --lemu-text-primary: #131517;
54
- --text-secondary: #495057;
55
26
  --lemmo-text-secondary: #495057;
56
- --lemu-text-secondary: #495057;
57
- --text-muted: #6c757d;
58
27
  --lemmo-text-muted: #6c757d;
59
- --lemu-text-muted: #6c757d;
60
- --text-faint: #adb5bd;
61
28
  --lemmo-text-faint: #adb5bd;
62
- --lemu-text-faint: #adb5bd;
63
- --text-onBrand: #131517;
64
- --lemmo-text-onBrand: #131517;
65
- --lemu-text-onBrand: #131517;
66
- --text-reverted: #ffffff;
29
+ --lemmo-text-on-brand: #ffffff;
67
30
  --lemmo-text-reverted: #ffffff;
68
- --lemu-text-reverted: #ffffff;
69
- --text-danger: #b7094c;
70
- --lemmo-text-danger: #b7094c;
71
- --lemu-text-danger: #b7094c;
72
- --text-warning: #d00000;
73
- --lemmo-text-warning: #d00000;
74
- --lemu-text-warning: #d00000;
75
- --text-success: #1b4332;
76
- --lemmo-text-success: #1b4332;
77
- --lemu-text-success: #1b4332;
78
- --text-info: #03045e;
79
- --lemmo-text-info: #03045e;
80
- --lemu-text-info: #03045e;
81
- --border-default: rgba(0, 0, 0, 0.18);
82
- --lemmo-border-default: rgba(0, 0, 0, 0.18);
83
- --lemu-border-default: rgba(0, 0, 0, 0.18);
84
- --border-subtle: rgba(0, 0, 0, 0.08);
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);
85
36
  --lemmo-border-subtle: rgba(0, 0, 0, 0.08);
86
- --lemu-border-subtle: rgba(0, 0, 0, 0.08);
87
- --border-mid: rgba(0, 0, 0, 0.12);
88
- --lemmo-border-mid: rgba(0, 0, 0, 0.12);
89
- --lemu-border-mid: rgba(0, 0, 0, 0.12);
90
- --border-danger: #d90429;
91
- --lemmo-border-danger: #d90429;
92
- --lemu-border-danger: #d90429;
93
- --border-warning: #e85d04;
94
- --lemmo-border-warning: #e85d04;
95
- --lemu-border-warning: #e85d04;
96
- --border-success: #2b9348;
97
- --lemmo-border-success: #2b9348;
98
- --lemu-border-success: #2b9348;
99
- --border-info: #0077b6;
100
- --lemmo-border-info: #0077b6;
101
- --lemu-border-info: #0077b6;
102
- --interactive-primary-background: #d1fe17;
103
- --lemmo-interactive-primary-background: #d1fe17;
104
- --lemu-interactive-primary-background: #d1fe17;
105
- --interactive-primary-foreground: #131517;
106
- --lemmo-interactive-primary-foreground: #131517;
107
- --lemu-interactive-primary-foreground: #131517;
108
- --interactive-primary-hover: #c4ee0b;
109
- --lemmo-interactive-primary-hover: #c4ee0b;
110
- --lemu-interactive-primary-hover: #c4ee0b;
111
- --interactive-secondary-background: #0256fe;
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;
112
45
  --lemmo-interactive-secondary-background: #0256fe;
113
- --lemu-interactive-secondary-background: #0256fe;
114
- --interactive-secondary-foreground: #ffffff;
115
46
  --lemmo-interactive-secondary-foreground: #ffffff;
116
- --lemu-interactive-secondary-foreground: #ffffff;
117
- --interactive-secondary-hover: #1544ed;
118
- --lemmo-interactive-secondary-hover: #1544ed;
119
- --lemu-interactive-secondary-hover: #1544ed;
120
- --status-danger-background: #ffe3e3;
47
+ --lemmo-interactive-secondary-hover: #245ef1;
121
48
  --lemmo-status-danger-background: #ffe3e3;
122
- --lemu-status-danger-background: #ffe3e3;
123
- --status-danger-foreground: #b7094c;
124
- --lemmo-status-danger-foreground: #b7094c;
125
- --lemu-status-danger-foreground: #b7094c;
126
- --status-danger-border: #d90429;
127
- --lemmo-status-danger-border: #d90429;
128
- --lemu-status-danger-border: #d90429;
129
- --status-danger-glow: #ff8787;
49
+ --lemmo-status-danger-foreground: #a4161a;
50
+ --lemmo-status-danger-border: #c9184a;
130
51
  --lemmo-status-danger-glow: #ff8787;
131
- --lemu-status-danger-glow: #ff8787;
132
- --status-warning-background: #fff3bf;
133
52
  --lemmo-status-warning-background: #fff3bf;
134
- --lemu-status-warning-background: #fff3bf;
135
- --status-warning-foreground: #d00000;
136
- --lemmo-status-warning-foreground: #d00000;
137
- --lemu-status-warning-foreground: #d00000;
138
- --status-warning-border: #e85d04;
139
- --lemmo-status-warning-border: #e85d04;
140
- --lemu-status-warning-border: #e85d04;
141
- --status-warning-glow: #ffe066;
53
+ --lemmo-status-warning-foreground: #8a4500;
54
+ --lemmo-status-warning-border: #b05d00;
142
55
  --lemmo-status-warning-glow: #ffe066;
143
- --lemu-status-warning-glow: #ffe066;
144
- --status-success-background: #d3f9d8;
145
56
  --lemmo-status-success-background: #d3f9d8;
146
- --lemu-status-success-background: #d3f9d8;
147
- --status-success-foreground: #1b4332;
148
57
  --lemmo-status-success-foreground: #1b4332;
149
- --lemu-status-success-foreground: #1b4332;
150
- --status-success-border: #2b9348;
151
- --lemmo-status-success-border: #2b9348;
152
- --lemu-status-success-border: #2b9348;
153
- --status-success-glow: #8ce99a;
58
+ --lemmo-status-success-border: #2d6a4f;
154
59
  --lemmo-status-success-glow: #8ce99a;
155
- --lemu-status-success-glow: #8ce99a;
156
- --status-info-background: #e7f5ff;
157
60
  --lemmo-status-info-background: #e7f5ff;
158
- --lemu-status-info-background: #e7f5ff;
159
- --status-info-foreground: #03045e;
160
- --lemmo-status-info-foreground: #03045e;
161
- --lemu-status-info-foreground: #03045e;
162
- --status-info-border: #0077b6;
163
- --lemmo-status-info-border: #0077b6;
164
- --lemu-status-info-border: #0077b6;
165
- --status-info-glow: #74c0fc;
61
+ --lemmo-status-info-foreground: #00296b;
62
+ --lemmo-status-info-border: #00509d;
166
63
  --lemmo-status-info-glow: #74c0fc;
167
- --lemu-status-info-glow: #74c0fc;
168
- --radius-base: .5rem;
169
- --lemmo-radius-base: .5rem;
170
- --lemu-radius-base: .5rem;
171
-
172
- /* System Design Light Theme Overrides */
173
- --lemmo-color-page-primary: #f8f9fa;
174
- --lemmo-color-app-background: #f1f3f5;
175
- --lemmo-color-surface-tertiary: #ffffff;
176
- --lemmo-color-surface-primary: #ffffff;
177
- --lemmo-color-surface-secondary: #e9ecef;
178
- --lemmo-color-surface-elevated: #ffffff;
179
- --lemmo-color-surface-glass: rgba(255, 255, 255, 0.88);
180
- --lemmo-color-font-primary: #131517;
181
- --lemmo-color-font-secondary: #495057;
182
- --lemmo-color-font-muted: #6c757d;
183
- --lemmo-color-font-faint: #adb5bd;
184
- --lemmo-color-font-on-brand: #131517;
185
- --lemmo-color-font-reverted: #ffffff;
186
- --lemmo-color-separator-card: rgba(0, 0, 0, 0.06);
187
- --lemmo-color-border-soft: rgba(0, 0, 0, 0.08);
188
- --lemmo-color-border-mid: rgba(0, 0, 0, 0.12);
189
- --lemmo-color-border-strong: rgba(0, 0, 0, 0.18);
190
64
 
191
- --lemmo-text-primary: var(--lemmo-color-font-primary);
192
- --lemmo-text-secondary: var(--lemmo-color-font-secondary);
193
- --lemmo-text-muted: var(--lemmo-color-font-muted);
194
- --lemmo-text-faint: var(--lemmo-color-font-faint);
195
- --lemmo-text-reverted: var(--lemmo-color-font-reverted);
196
- --lemmo-surface-primary: var(--lemmo-color-surface-primary);
197
- --lemmo-surface-secondary: var(--lemmo-color-surface-secondary);
198
- --lemmo-surface-tertiary: var(--lemmo-color-surface-tertiary);
199
- --lemmo-surface-elevated: var(--lemmo-color-surface-elevated);
200
- --lemmo-surface-glass: var(--lemmo-color-surface-glass);
201
- --lemmo-border-default: var(--lemmo-color-border-strong);
202
- --lemmo-border-subtle: var(--lemmo-color-border-soft);
65
+ /* Radius Base */
66
+ --lemmo-radius-base: .5rem;
203
67
 
204
- --lemu-color-page-primary: var(--lemmo-color-page-primary);
205
- --lemu-color-app-background: var(--lemmo-color-app-background);
206
- --lemu-color-surface-tertiary: var(--lemmo-color-surface-tertiary);
207
- --lemu-color-surface-primary: var(--lemmo-color-surface-primary);
208
- --lemu-color-surface-secondary: var(--lemmo-color-surface-secondary);
209
- --lemu-color-surface-elevated: var(--lemmo-color-surface-elevated);
210
- --lemu-color-surface-glass: var(--lemmo-color-surface-glass);
211
- --lemu-color-font-primary: var(--lemmo-color-font-primary);
212
- --lemu-color-font-secondary: var(--lemmo-color-font-secondary);
213
- --lemu-color-font-muted: var(--lemmo-color-font-muted);
214
- --lemu-color-font-faint: var(--lemmo-color-font-faint);
215
- --lemu-color-font-reverted: var(--lemmo-color-font-reverted);
216
- --lemu-text-primary: var(--lemmo-text-primary);
217
- --lemu-text-secondary: var(--lemmo-text-secondary);
218
- --lemu-text-muted: var(--lemmo-text-muted);
219
- --lemu-text-faint: var(--lemmo-text-faint);
220
- --lemu-text-reverted: var(--lemmo-text-reverted);
221
- --lemu-surface-primary: var(--lemmo-surface-primary);
222
- --lemu-surface-secondary: var(--lemmo-surface-secondary);
223
- --lemu-surface-tertiary: var(--lemmo-surface-tertiary);
224
- --lemu-surface-elevated: var(--lemmo-surface-elevated);
225
- --lemu-surface-glass: var(--lemmo-surface-glass);
226
- --lemu-border-default: var(--lemmo-border-default);
227
- --lemu-border-subtle: var(--lemmo-border-subtle);
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));
228
95
  }
package/dist/css/themes/midnight.css CHANGED
@@ -1,171 +1,95 @@
1
1
  /**
2
- * @lemmo-lab/tokens - MIDNIGHT Theme Preset
3
- * Auto-generated by Style Dictionary pipeline. DO NOT EDIT DIRECTLY.
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.
4
5
  */
5
6
 
6
7
  [data-theme='midnight'],
7
8
  :root[data-theme='midnight'],
8
9
  .theme-midnight {
9
- --page-background: #000000;
10
+ /* Colors & Roles */
10
11
  --lemmo-page-background: #000000;
11
- --lemu-page-background: #000000;
12
- --page-foreground: #ffffff;
13
12
  --lemmo-page-foreground: #ffffff;
14
- --lemu-page-foreground: #ffffff;
15
- --surface-primary-background: #0c0c0c;
16
13
  --lemmo-surface-primary-background: #0c0c0c;
17
- --lemu-surface-primary-background: #0c0c0c;
18
- --surface-primary-foreground: #ffffff;
19
14
  --lemmo-surface-primary-foreground: #ffffff;
20
- --lemu-surface-primary-foreground: #ffffff;
21
- --surface-secondary-background: #161616;
22
15
  --lemmo-surface-secondary-background: #161616;
23
- --lemu-surface-secondary-background: #161616;
24
- --surface-secondary-foreground: #999999;
25
16
  --lemmo-surface-secondary-foreground: #999999;
26
- --lemu-surface-secondary-foreground: #999999;
27
- --surface-tertiary-background: #050505;
28
- --lemmo-surface-tertiary-background: #050505;
29
- --lemu-surface-tertiary-background: #050505;
30
- --surface-tertiary-foreground: #ffffff;
17
+ --lemmo-surface-tertiary-background: #040404;
31
18
  --lemmo-surface-tertiary-foreground: #ffffff;
32
- --lemu-surface-tertiary-foreground: #ffffff;
33
- --surface-elevated-background: #1e1e1e;
34
19
  --lemmo-surface-elevated-background: #1e1e1e;
35
- --lemu-surface-elevated-background: #1e1e1e;
36
- --surface-elevated-foreground: #ffffff;
37
20
  --lemmo-surface-elevated-foreground: #ffffff;
38
- --lemu-surface-elevated-foreground: #ffffff;
39
- --surface-glass-background: rgba(0, 0, 0, 0.92);
40
21
  --lemmo-surface-glass-background: rgba(0, 0, 0, 0.92);
41
- --lemu-surface-glass-background: rgba(0, 0, 0, 0.92);
42
- --surface-glass-foreground: #ffffff;
43
22
  --lemmo-surface-glass-foreground: #ffffff;
44
- --lemu-surface-glass-foreground: #ffffff;
45
- --surface-brand-background: #ffffff;
46
- --lemmo-surface-brand-background: #ffffff;
47
- --lemu-surface-brand-background: #ffffff;
48
- --surface-brand-foreground: #000000;
23
+ --lemmo-surface-brand-background: #d1fe17;
49
24
  --lemmo-surface-brand-foreground: #000000;
50
- --lemu-surface-brand-foreground: #000000;
51
- --text-primary: #ffffff;
52
25
  --lemmo-text-primary: #ffffff;
53
- --lemu-text-primary: #ffffff;
54
- --text-secondary: #999999;
55
26
  --lemmo-text-secondary: #999999;
56
- --lemu-text-secondary: #999999;
57
- --text-muted: #666666;
58
27
  --lemmo-text-muted: #666666;
59
- --lemu-text-muted: #666666;
60
- --text-faint: #444444;
61
28
  --lemmo-text-faint: #444444;
62
- --lemu-text-faint: #444444;
63
- --text-onBrand: #000000;
64
- --lemmo-text-onBrand: #000000;
65
- --lemu-text-onBrand: #000000;
66
- --text-reverted: #000000;
29
+ --lemmo-text-on-brand: #000000;
67
30
  --lemmo-text-reverted: #000000;
68
- --lemu-text-reverted: #000000;
69
- --text-danger: #ff4d4f;
70
- --lemmo-text-danger: #ff4d4f;
71
- --lemu-text-danger: #ff4d4f;
72
- --text-warning: #faad14;
73
- --lemmo-text-warning: #faad14;
74
- --lemu-text-warning: #faad14;
75
- --text-success: #52c41a;
76
- --lemmo-text-success: #52c41a;
77
- --lemu-text-success: #52c41a;
78
- --text-info: #1890ff;
79
- --lemmo-text-info: #1890ff;
80
- --lemu-text-info: #1890ff;
81
- --border-default: rgba(255, 255, 255, 0.2);
31
+ --lemmo-text-danger: #ff5462;
32
+ --lemmo-text-warning: #dfab01;
33
+ --lemmo-text-success: #4ee466;
34
+ --lemmo-text-info: #5b91fe;
82
35
  --lemmo-border-default: rgba(255, 255, 255, 0.2);
83
- --lemu-border-default: rgba(255, 255, 255, 0.2);
84
- --border-subtle: rgba(255, 255, 255, 0.08);
85
36
  --lemmo-border-subtle: rgba(255, 255, 255, 0.08);
86
- --lemu-border-subtle: rgba(255, 255, 255, 0.08);
87
- --border-mid: rgba(255, 255, 255, 0.12);
88
37
  --lemmo-border-mid: rgba(255, 255, 255, 0.12);
89
- --lemu-border-mid: rgba(255, 255, 255, 0.12);
90
- --border-danger: #ff4d4f;
91
- --lemmo-border-danger: #ff4d4f;
92
- --lemu-border-danger: #ff4d4f;
93
- --border-warning: #faad14;
94
- --lemmo-border-warning: #faad14;
95
- --lemu-border-warning: #faad14;
96
- --border-success: #52c41a;
97
- --lemmo-border-success: #52c41a;
98
- --lemu-border-success: #52c41a;
99
- --border-info: #1890ff;
100
- --lemmo-border-info: #1890ff;
101
- --lemu-border-info: #1890ff;
102
- --interactive-primary-background: #ffffff;
103
- --lemmo-interactive-primary-background: #ffffff;
104
- --lemu-interactive-primary-background: #ffffff;
105
- --interactive-primary-foreground: #000000;
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;
106
43
  --lemmo-interactive-primary-foreground: #000000;
107
- --lemu-interactive-primary-foreground: #000000;
108
- --interactive-primary-hover: #e6e6e6;
109
- --lemmo-interactive-primary-hover: #e6e6e6;
110
- --lemu-interactive-primary-hover: #e6e6e6;
111
- --interactive-secondary-background: #1f1f1f;
112
- --lemmo-interactive-secondary-background: #1f1f1f;
113
- --lemu-interactive-secondary-background: #1f1f1f;
114
- --interactive-secondary-foreground: #ffffff;
44
+ --lemmo-interactive-primary-hover: #c4ee0b;
45
+ --lemmo-interactive-secondary-background: #0256fe;
115
46
  --lemmo-interactive-secondary-foreground: #ffffff;
116
- --lemu-interactive-secondary-foreground: #ffffff;
117
- --interactive-secondary-hover: #2a2a2a;
118
- --lemmo-interactive-secondary-hover: #2a2a2a;
119
- --lemu-interactive-secondary-hover: #2a2a2a;
120
- --status-danger-background: #2a0a0a;
121
- --lemmo-status-danger-background: #2a0a0a;
122
- --lemu-status-danger-background: #2a0a0a;
123
- --status-danger-foreground: #ff7875;
124
- --lemmo-status-danger-foreground: #ff7875;
125
- --lemu-status-danger-foreground: #ff7875;
126
- --status-danger-border: #ff4d4f;
127
- --lemmo-status-danger-border: #ff4d4f;
128
- --lemu-status-danger-border: #ff4d4f;
129
- --status-danger-glow: #ff4d4f;
130
- --lemmo-status-danger-glow: #ff4d4f;
131
- --lemu-status-danger-glow: #ff4d4f;
132
- --status-warning-background: #2b1d00;
133
- --lemmo-status-warning-background: #2b1d00;
134
- --lemu-status-warning-background: #2b1d00;
135
- --status-warning-foreground: #ffc53d;
136
- --lemmo-status-warning-foreground: #ffc53d;
137
- --lemu-status-warning-foreground: #ffc53d;
138
- --status-warning-border: #faad14;
139
- --lemmo-status-warning-border: #faad14;
140
- --lemu-status-warning-border: #faad14;
141
- --status-warning-glow: #faad14;
142
- --lemmo-status-warning-glow: #faad14;
143
- --lemu-status-warning-glow: #faad14;
144
- --status-success-background: #092b00;
145
- --lemmo-status-success-background: #092b00;
146
- --lemu-status-success-background: #092b00;
147
- --status-success-foreground: #73d13d;
148
- --lemmo-status-success-foreground: #73d13d;
149
- --lemu-status-success-foreground: #73d13d;
150
- --status-success-border: #52c41a;
151
- --lemmo-status-success-border: #52c41a;
152
- --lemu-status-success-border: #52c41a;
153
- --status-success-glow: #52c41a;
154
- --lemmo-status-success-glow: #52c41a;
155
- --lemu-status-success-glow: #52c41a;
156
- --status-info-background: #001d40;
157
- --lemmo-status-info-background: #001d40;
158
- --lemu-status-info-background: #001d40;
159
- --status-info-foreground: #40a9ff;
160
- --lemmo-status-info-foreground: #40a9ff;
161
- --lemu-status-info-foreground: #40a9ff;
162
- --status-info-border: #1890ff;
163
- --lemmo-status-info-border: #1890ff;
164
- --lemu-status-info-border: #1890ff;
165
- --status-info-glow: #1890ff;
166
- --lemmo-status-info-glow: #1890ff;
167
- --lemu-status-info-glow: #1890ff;
168
- --radius-base: 0px;
169
- --lemmo-radius-base: 0px;
170
- --lemu-radius-base: 0px;
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));
171
95
  }