@l3mpire/tokens 0.14.0 → 0.16.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 (8) hide show
  1. package/dist/css/components.css +45 -9
  2. package/dist/css/fonts.css +1 -1
  3. package/dist/css/primitives.css +121 -90
  4. package/dist/css/semantic.css +158 -114
  5. package/dist/css/tokens-dark.css +227 -158
  6. package/dist/css/tokens.css +250 -139
  7. package/dist/ts/tokens.ts +634 -523
  8. package/package.json +1 -1
package/dist/css/components.css CHANGED
@@ -26,14 +26,18 @@
26
26
  --comp-btn-disabled-ghost-bg: rgba(0, 0, 0, 0);
27
27
  --comp-btn-disabled-ghost-border: rgba(0, 0, 0, 0);
28
28
  --comp-badge-solid-indigo-text: var(--core-text-specific-tags-on-solid);
29
- --comp-badge-solid-rose-text: var(--core-text-specific-tags-on-solid);
30
- --comp-badge-solid-lime-text: var(--core-text-specific-tags-on-solid);
31
29
  --comp-badge-solid-violet-text: var(--core-text-specific-tags-on-solid);
32
30
  --comp-badge-solid-cyan-text: var(--core-text-specific-tags-on-solid);
33
31
  --comp-badge-solid-orange-text: var(--core-text-specific-tags-on-solid);
34
- --comp-badge-solid-emerald-text: var(--core-text-specific-tags-on-solid);
35
32
  --comp-badge-solid-fuchsia-text: var(--core-text-specific-tags-on-solid);
36
33
  --comp-badge-solid-amber-text: var(--core-text-specific-tags-on-solid);
34
+ --comp-badge-solid-teal-text: var(--core-text-specific-tags-on-solid);
35
+ --comp-badge-solid-sky-text: var(--core-text-specific-tags-on-solid);
36
+ --comp-badge-solid-purple-text: var(--core-text-specific-tags-on-solid);
37
+ --comp-badge-solid-pink-text: var(--core-text-specific-tags-on-solid);
38
+ --comp-badge-solid-rose-text: var(--core-text-specific-tags-on-solid);
39
+ --comp-badge-solid-lime-text: var(--core-text-specific-tags-on-solid);
40
+ --comp-badge-solid-emerald-text: var(--core-text-specific-tags-on-solid);
37
41
  --comp-badge-solid-slate-text: var(--core-text-specific-tags-on-solid);
38
42
  --comp-btn-outlined-neutral-bg-default: var(--grey-50);
39
43
  --comp-btn-outlined-neutral-bg-hover: var(--grey-100);
@@ -70,15 +74,19 @@
70
74
  --comp-badge-solid-warning-text: var(--core-text-main-invert-primary);
71
75
  --comp-badge-solid-neutral-bg: var(--core-bg-main-invert-secondary);
72
76
  --comp-badge-solid-neutral-text: var(--core-text-main-invert-primary);
73
- --comp-badge-solid-indigo-bg: var(--core-bg-specific-tags-solid-indigo);
77
+ --comp-badge-solid-indigo-bg: var(--core-bg-specific-tags-invert-indigo);
78
+ --comp-badge-solid-violet-bg: var(--core-bg-specific-tags-invert-violet);
79
+ --comp-badge-solid-cyan-bg: var(--core-bg-specific-tags-invert-cyan);
80
+ --comp-badge-solid-orange-bg: var(--core-bg-specific-tags-invert-orange);
81
+ --comp-badge-solid-fuchsia-bg: var(--core-bg-specific-tags-invert-fuchsia);
82
+ --comp-badge-solid-amber-bg: var(--core-bg-specific-tags-invert-amber);
83
+ --comp-badge-solid-teal-bg: var(--core-bg-specific-tags-invert-teal);
84
+ --comp-badge-solid-sky-bg: var(--core-bg-specific-tags-invert-sky);
85
+ --comp-badge-solid-purple-bg: var(--core-bg-specific-tags-invert-purple);
86
+ --comp-badge-solid-pink-bg: var(--core-bg-specific-tags-invert-pink);
74
87
  --comp-badge-solid-rose-bg: var(--core-bg-specific-tags-solid-rose);
75
88
  --comp-badge-solid-lime-bg: var(--core-bg-specific-tags-solid-lime);
76
- --comp-badge-solid-violet-bg: var(--core-bg-specific-tags-solid-violet);
77
- --comp-badge-solid-cyan-bg: var(--core-bg-specific-tags-solid-cyan);
78
- --comp-badge-solid-orange-bg: var(--core-bg-specific-tags-solid-orange);
79
89
  --comp-badge-solid-emerald-bg: var(--core-bg-specific-tags-solid-emerald);
80
- --comp-badge-solid-fuchsia-bg: var(--core-bg-specific-tags-solid-fuchsia);
81
- --comp-badge-solid-amber-bg: var(--core-bg-specific-tags-solid-amber);
82
90
  --comp-badge-solid-slate-bg: var(--core-bg-specific-tags-solid-slate);
83
91
  --comp-badge-light-primary-bg: var(--core-bg-functional-invert-info);
84
92
  --comp-badge-light-primary-text: var(--core-text-functional-info);
@@ -110,6 +118,14 @@
110
118
  --comp-badge-light-amber-text: var(--core-text-specific-tags-amber);
111
119
  --comp-badge-light-slate-bg: var(--core-bg-specific-tags-slate);
112
120
  --comp-badge-light-slate-text: var(--core-text-specific-tags-slate);
121
+ --comp-badge-light-teal-bg: var(--core-bg-specific-tags-teal);
122
+ --comp-badge-light-teal-text: var(--core-text-specific-tags-teal);
123
+ --comp-badge-light-sky-bg: var(--core-bg-specific-tags-sky);
124
+ --comp-badge-light-sky-text: var(--core-text-specific-tags-sky);
125
+ --comp-badge-light-purple-bg: var(--core-bg-specific-tags-purple);
126
+ --comp-badge-light-purple-text: var(--core-text-specific-tags-purple);
127
+ --comp-badge-light-pink-bg: var(--core-bg-specific-tags-pink);
128
+ --comp-badge-light-pink-text: var(--core-text-specific-tags-pink);
113
129
  --comp-badge-outlined-primary-border: var(--core-border-functional-info);
114
130
  --comp-badge-outlined-primary-text: var(--core-text-functional-info);
115
131
  --comp-badge-outlined-success-border: var(--core-border-functional-success);
@@ -140,6 +156,14 @@
140
156
  --comp-badge-outlined-amber-text: var(--core-text-specific-tags-amber);
141
157
  --comp-badge-outlined-slate-border: var(--core-border-specific-tags-slate);
142
158
  --comp-badge-outlined-slate-text: var(--core-text-specific-tags-slate);
159
+ --comp-badge-outlined-teal-border: var(--core-border-specific-tags-teal);
160
+ --comp-badge-outlined-teal-text: var(--core-text-specific-tags-teal);
161
+ --comp-badge-outlined-sky-border: var(--core-border-specific-tags-sky);
162
+ --comp-badge-outlined-sky-text: var(--core-text-specific-tags-sky);
163
+ --comp-badge-outlined-purple-border: var(--core-border-specific-tags-purple);
164
+ --comp-badge-outlined-purple-text: var(--core-text-specific-tags-purple);
165
+ --comp-badge-outlined-pink-border: var(--core-border-specific-tags-pink);
166
+ --comp-badge-outlined-pink-text: var(--core-text-specific-tags-pink);
143
167
  --comp-browser-tab-border: var(--core-border-main-primary);
144
168
  --comp-browser-tab-item-bg: var(--core-bg-main-primary);
145
169
  --comp-browser-tab-item-border: var(--core-border-main-primary);
@@ -427,6 +451,18 @@
427
451
  --comp-tag-slate-bg: var(--core-bg-specific-tags-slate);
428
452
  --comp-tag-slate-text: var(--core-text-specific-tags-slate);
429
453
  --comp-tag-slate-border: var(--core-border-specific-tags-slate);
454
+ --comp-tag-teal-bg: var(--core-bg-specific-tags-teal);
455
+ --comp-tag-teal-text: var(--core-text-specific-tags-teal);
456
+ --comp-tag-teal-border: var(--core-border-specific-tags-teal);
457
+ --comp-tag-sky-bg: var(--core-bg-specific-tags-sky);
458
+ --comp-tag-sky-text: var(--core-text-specific-tags-sky);
459
+ --comp-tag-sky-border: var(--core-border-specific-tags-sky);
460
+ --comp-tag-purple-bg: var(--core-bg-specific-tags-purple);
461
+ --comp-tag-purple-text: var(--core-text-specific-tags-purple);
462
+ --comp-tag-purple-border: var(--core-border-specific-tags-purple);
463
+ --comp-tag-pink-bg: var(--core-bg-specific-tags-pink);
464
+ --comp-tag-pink-text: var(--core-text-specific-tags-pink);
465
+ --comp-tag-pink-border: var(--core-border-specific-tags-pink);
430
466
  --comp-text-input-bg-default: var(--core-bg-main-primary);
431
467
  --comp-text-input-bg-disabled: var(--core-bg-functional-disabled);
432
468
  --comp-text-input-border-default: var(--core-border-main-primary);
package/dist/css/fonts.css CHANGED
@@ -20,5 +20,5 @@
20
20
  --font-weight-regular: 400;
21
21
  --font-weight-medium: 500;
22
22
  --font-weight-semibold: 600;
23
- --font-weight-bold: 700;
23
+ --font-weight-solid: 700;
24
24
  }
package/dist/css/primitives.css CHANGED
@@ -3,96 +3,101 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --blue-50: #f5f8ff;
7
- --blue-100: #e0ebff;
8
- --blue-200: #c7dcff;
9
- --blue-300: #a3c7ff;
10
- --blue-400: #7aa8ff;
11
- --blue-500: #316bff;
12
- --blue-600: #1f5eff;
13
- --blue-700: #134cdd;
14
- --blue-800: #0d3bb0;
15
- --blue-900: #072d8e;
16
- --pink-50: #fff5f8;
17
- --pink-100: #ffeef2;
18
- --pink-200: #ffd9e4;
19
- --pink-300: #ffb0cc;
20
- --pink-400: #ff88aa;
21
- --pink-500: #ec6181;
22
- --pink-600: #d94872;
23
- --pink-700: #ab465e;
24
- --pink-800: #8a3649;
25
- --pink-900: #641225;
26
- --red-50: #fff5f5;
27
- --red-100: #ffe7e2;
28
- --red-200: #ffc9c9;
29
- --red-300: #f8b1b1;
30
- --red-400: #f57575;
31
- --red-500: #ec4343;
32
- --red-600: #d92828;
33
- --red-700: #be0723;
34
- --red-800: #9e0821;
35
- --red-900: #8c0000;
36
- --green-50: #f0fdf0;
37
- --green-100: #e5fce5;
38
- --green-200: #c8f4c8;
39
- --green-300: #9ae299;
40
- --green-400: #5dd85a;
41
- --green-500: #31c52e;
42
- --green-600: #1fb01c;
43
- --green-700: #009e00;
44
- --green-800: #008200;
45
- --green-900: #007300;
46
- --yellow-50: #fffef5;
47
- --yellow-100: #fff8d3;
48
- --yellow-200: #fff0a7;
49
- --yellow-300: #ffe172;
50
- --yellow-400: #f5ca3d;
51
- --yellow-500: #dfb009;
52
- --yellow-600: #d9aa00;
53
- --yellow-700: #b88f00;
54
- --yellow-800: #9c7700;
55
- --yellow-900: #916d00;
56
- --purple-50: #faf8ff;
57
- --purple-100: #f5f0ff;
58
- --purple-200: #ebe4ff;
59
- --purple-300: #d3bcfc;
60
- --purple-400: #b89df5;
61
- --purple-500: #9b7ce8;
62
- --purple-600: #7d5dd4;
63
- --purple-700: #6344b8;
64
- --purple-800: #4d3390;
65
- --purple-900: #2d1a51;
66
- --teal-50: #f0fdf9;
67
- --teal-100: #eafff6;
68
- --teal-200: #d1f9ea;
69
- --teal-300: #b4ffe2;
70
- --teal-400: #91e0bf;
71
- --teal-500: #6dd4a8;
72
- --teal-600: #44c38e;
73
- --teal-700: #2ca572;
74
- --teal-800: #1d7a54;
75
- --teal-900: #0d5034;
76
- --orange-50: #fff8f3;
77
- --orange-100: #fff0ec;
78
- --orange-200: #ffe5d9;
79
- --orange-300: #ffdabf;
80
- --orange-400: #ffc199;
81
- --orange-500: #f5967e;
82
- --orange-600: #f07254;
83
- --orange-700: #de5837;
84
- --orange-800: #b8422a;
85
- --orange-900: #892f19;
86
- --grey-50: #fafafa;
87
- --grey-100: #f2f2f2;
88
- --grey-200: #efefef;
89
- --grey-300: #e6e6e6;
90
- --grey-400: #b7bec6;
91
- --grey-500: #98a1ac;
92
- --grey-600: #838990;
93
- --grey-700: #566f8f;
94
- --grey-800: #3d4f66;
95
- --grey-900: #213856;
6
+ --blue-50: #eff6ff;
7
+ --blue-100: #dbeafe;
8
+ --blue-200: #bfdbfe;
9
+ --blue-300: #93c5fd;
10
+ --blue-400: #60a5fa;
11
+ --blue-500: #3b82f6;
12
+ --blue-600: #2563eb;
13
+ --blue-700: #1d4ed8;
14
+ --blue-800: #1e40af;
15
+ --blue-900: #1e3a8a;
16
+ --blue-950: #172554;
17
+ --pink-50: #fdf2f8;
18
+ --pink-75: #ffebf1;
19
+ --pink-100: #fce7f3;
20
+ --pink-200: #fbcfe8;
21
+ --pink-300: #f9a8d4;
22
+ --pink-400: #f472b6;
23
+ --pink-500: #ec4899;
24
+ --pink-600: #db2777;
25
+ --pink-700: #be185d;
26
+ --pink-800: #9d174d;
27
+ --pink-900: #831843;
28
+ --red-50: #fef2f2;
29
+ --red-100: #fee2e2;
30
+ --red-200: #fecaca;
31
+ --red-300: #fca5a5;
32
+ --red-400: #f87171;
33
+ --red-500: #ef4444;
34
+ --red-600: #dc2626;
35
+ --red-700: #b91c1c;
36
+ --red-800: #991b1b;
37
+ --red-900: #7f1d1d;
38
+ --red-950: #450a0a;
39
+ --green-50: #f0fdf4;
40
+ --green-100: #dcfce7;
41
+ --green-200: #bbf7d0;
42
+ --green-300: #86efac;
43
+ --green-400: #4ade80;
44
+ --green-500: #22c55e;
45
+ --green-600: #16a34a;
46
+ --green-700: #15803d;
47
+ --green-800: #166534;
48
+ --green-900: #14532d;
49
+ --green-950: #052e16;
50
+ --yellow-50: #fefce8;
51
+ --yellow-100: #fef9c3;
52
+ --yellow-200: #fef08a;
53
+ --yellow-300: #fde047;
54
+ --yellow-400: #facc15;
55
+ --yellow-500: #eab308;
56
+ --yellow-600: #ca8a04;
57
+ --yellow-700: #a16207;
58
+ --yellow-800: #854d0e;
59
+ --yellow-900: #713f12;
60
+ --yellow-950: #422006;
61
+ --purple-50: #faf5ff;
62
+ --purple-100: #f3e8ff;
63
+ --purple-200: #e9d5ff;
64
+ --purple-300: #d8b4fe;
65
+ --purple-400: #c084fc;
66
+ --purple-500: #a855f7;
67
+ --purple-600: #9333ea;
68
+ --purple-700: #7e22ce;
69
+ --purple-800: #6b21a8;
70
+ --purple-900: #581c87;
71
+ --teal-50: #f0fdfa;
72
+ --teal-100: #ccfbf1;
73
+ --teal-200: #99f6e4;
74
+ --teal-300: #5eead4;
75
+ --teal-400: #2dd4bf;
76
+ --teal-500: #14b8a6;
77
+ --teal-600: #0d9488;
78
+ --teal-700: #0f766e;
79
+ --teal-800: #115e59;
80
+ --teal-900: #134e4a;
81
+ --orange-50: #fff7ed;
82
+ --orange-100: #ffedd5;
83
+ --orange-200: #fed7aa;
84
+ --orange-300: #fdba74;
85
+ --orange-400: #fb923c;
86
+ --orange-500: #f97316;
87
+ --orange-600: #ea580c;
88
+ --orange-700: #c2410c;
89
+ --orange-800: #9a3412;
90
+ --orange-900: #7c2d12;
91
+ --grey-50: #f9fafb;
92
+ --grey-100: #f3f4f6;
93
+ --grey-200: #e5e7eb;
94
+ --grey-300: #d1d5db;
95
+ --grey-400: #9ca3af;
96
+ --grey-500: #6b7280;
97
+ --grey-600: #5a6472;
98
+ --grey-700: #374151;
99
+ --grey-800: #1f2937;
100
+ --grey-900: #111827;
96
101
  --grey-white: #ffffff;
97
102
  --beige-50: #fffbfb;
98
103
  --beige-100: #fff8f8;
@@ -175,6 +180,7 @@
175
180
  --emerald-800: #065f46;
176
181
  --emerald-900: #064e3b;
177
182
  --fuchsia-50: #fdf4ff;
183
+ --fuchsia-75: #fae8ff;
178
184
  --fuchsia-100: #fae8ff;
179
185
  --fuchsia-200: #f5d0fe;
180
186
  --fuchsia-300: #f0abfc;
@@ -204,6 +210,31 @@
204
210
  --slate-700: #334155;
205
211
  --slate-800: #1e293b;
206
212
  --slate-900: #0f172a;
213
+ --brand-50: #f5f8ff;
214
+ --brand-100: #e0ebff;
215
+ --brand-200: #c7dcff;
216
+ --brand-300: #a3c7ff;
217
+ --brand-400: #7aa8ff;
218
+ --brand-500: #316bff;
219
+ --brand-600: #1f5eff;
220
+ --brand-700: #134cdd;
221
+ --brand-800: #0d3bb0;
222
+ --brand-900: #072d8e;
223
+ --sky-50: #f0f9ff;
224
+ --sky-100: #e0f2fe;
225
+ --sky-200: #bae6fd;
226
+ --sky-300: #7dd3fc;
227
+ --sky-400: #38bdf8;
228
+ --sky-500: #0ea5e9;
229
+ --sky-600: #0284c7;
230
+ --sky-700: #0369a1;
231
+ --sky-800: #075985;
232
+ --sky-900: #0c4a6e;
233
+ --alpha-0: rgba(31, 41, 55, 0.03);
234
+ --alpha-1: rgba(31, 41, 55, 0.1);
235
+ --alpha-2: rgba(31, 41, 55, 0.15);
236
+ --alpha-3: rgba(31, 41, 55, 0.25);
237
+ --alpha-5: rgba(31, 41, 55, 0.5);
207
238
  --shadow-2: rgba(0, 0, 0, 0.02);
208
239
  --shadow-4: rgba(0, 0, 0, 0.04);
209
240
  --shadow-6: rgba(0, 0, 0, 0.06);