@l3mpire/tokens 0.13.0 → 0.15.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 +96 -30
  2. package/dist/css/fonts.css +1 -1
  3. package/dist/css/primitives.css +121 -90
  4. package/dist/css/semantic.css +163 -113
  5. package/dist/css/tokens-dark.css +239 -158
  6. package/dist/css/tokens.css +307 -160
  7. package/dist/ts/tokens.ts +679 -532
  8. package/package.json +1 -1
package/dist/css/semantic.css CHANGED
@@ -4,166 +4,216 @@
4
4
 
5
5
  :root {
6
6
  --core-bg-main-primary: #ffffff;
7
- --core-bg-main-secondary: #fafafa;
8
- --core-bg-main-tertiary: #f2f2f2;
9
- --core-bg-main-invert-primary: #213856;
10
- --core-bg-main-invert-secondary: #566f8f;
11
- --core-bg-main-invert-tertiary: #b7bec6;
12
- --core-bg-functional-disabled: #f2f2f2;
13
- --core-bg-functional-invert-success: #f0fdf0;
14
- --core-bg-functional-invert-critical: #fff5f5;
15
- --core-bg-functional-invert-info: #f5f8ff;
16
- --core-bg-functional-invert-warning: #fffef5;
17
- --core-bg-specific-highlight-text: #e5fce5;
18
- --core-bg-specific-tags-neutral: #f2f2f2;
7
+ --core-bg-main-secondary: #f9fafb;
8
+ --core-bg-main-tertiary: #f3f4f6;
9
+ --core-bg-main-hover: #e5e7eb;
10
+ --core-bg-main-invert-primary: #111827;
11
+ --core-bg-main-invert-secondary: #374151;
12
+ --core-bg-main-invert-tertiary: #9ca3af;
13
+ --core-bg-functional-disabled: #f3f4f6;
14
+ --core-bg-functional-success: #22c55e;
15
+ --core-bg-functional-critical: #ef4444;
16
+ --core-bg-functional-info: #3b82f6;
17
+ --core-bg-functional-warning: #eab308;
18
+ --core-bg-functional-invert-success: #f0fdf4;
19
+ --core-bg-functional-invert-critical: #fef2f2;
20
+ --core-bg-functional-invert-info: #eff6ff;
21
+ --core-bg-functional-invert-warning: #fefce8;
22
+ --core-bg-specific-highlight-text: #dcfce7;
23
+ --core-bg-specific-tags-neutral: #f3f4f6;
19
24
  --core-bg-specific-tags-indigo: #eef2ff;
20
25
  --core-bg-specific-tags-rose: #fff1f2;
21
26
  --core-bg-specific-tags-lime: #f7fee7;
22
27
  --core-bg-specific-tags-violet: #f5f3ff;
23
28
  --core-bg-specific-tags-cyan: #ecfeff;
24
- --core-bg-specific-tags-orange: #fff8f3;
29
+ --core-bg-specific-tags-orange: #fff7ed;
25
30
  --core-bg-specific-tags-emerald: #ecfdf5;
26
31
  --core-bg-specific-tags-fuchsia: #fdf4ff;
27
32
  --core-bg-specific-tags-amber: #fffbeb;
28
33
  --core-bg-specific-tags-slate: #f1f5f9;
29
- --core-text-main-primary: #213856;
30
- --core-text-main-secondary: #566f8f;
31
- --core-text-main-tertiary: #98a1ac;
34
+ --core-bg-specific-tags-neutral-hover: #e5e7eb;
35
+ --core-bg-specific-tags-teal: #f0fdfa;
36
+ --core-bg-specific-tags-sky: #f0f9ff;
37
+ --core-bg-specific-tags-purple: #faf5ff;
38
+ --core-bg-specific-tags-pink: #fdf2f8;
39
+ --core-bg-specific-tags-solid-indigo: #4f46e5;
40
+ --core-bg-specific-tags-solid-rose: #e11d48;
41
+ --core-bg-specific-tags-solid-lime: #4d7c0f;
42
+ --core-bg-specific-tags-solid-violet: #7c3aed;
43
+ --core-bg-specific-tags-solid-cyan: #0e7490;
44
+ --core-bg-specific-tags-solid-orange: #9a3412;
45
+ --core-bg-specific-tags-solid-emerald: #047857;
46
+ --core-bg-specific-tags-solid-fuchsia: #c026d3;
47
+ --core-bg-specific-tags-solid-amber: #b45309;
48
+ --core-bg-specific-tags-solid-slate: #475569;
49
+ --core-bg-specific-brands-logo-linkedin: #0069c9;
50
+ --core-bg-specific-brands-logo-linkedin-premium: #9f8333;
51
+ --core-bg-specific-brands-logo-hubspot: #ff7a59;
52
+ --core-bg-specific-brands-logo-salesforce: #00a1e0;
53
+ --core-bg-specific-ai: #ffffff;
54
+ --core-bg-specific-tags-invert-neutral: #374151;
55
+ --core-bg-specific-tags-invert-orange: #f97316;
56
+ --core-bg-specific-tags-invert-amber: #f59e0b;
57
+ --core-bg-specific-tags-invert-teal: #14b8a6;
58
+ --core-bg-specific-tags-invert-cyan: #06b6d4;
59
+ --core-bg-specific-tags-invert-sky: #0ea5e9;
60
+ --core-bg-specific-tags-invert-indigo: #6366f1;
61
+ --core-bg-specific-tags-invert-violet: #8b5cf6;
62
+ --core-bg-specific-tags-invert-purple: #a855f7;
63
+ --core-bg-specific-tags-invert-fuchsia: #d946ef;
64
+ --core-bg-specific-tags-invert-pink: #ec4899;
65
+ --core-text-main-primary: #1f2937;
66
+ --core-text-main-secondary: #5a6472;
67
+ --core-text-main-tertiary: #6b7280;
32
68
  --core-text-main-invert-primary: #ffffff;
33
- --core-text-main-invert-secondary: #f2f2f2;
34
- --core-text-main-invert-tertiary: #efefef;
35
- --core-text-functional-placeholder: #98a1ac;
36
- --core-text-functional-disabled: #b7bec6;
69
+ --core-text-main-invert-secondary: #f3f4f6;
70
+ --core-text-main-invert-tertiary: #e5e7eb;
71
+ --core-text-functional-placeholder: rgba(31, 41, 55, 0.5);
72
+ --core-text-functional-disabled: #9ca3af;
37
73
  --core-text-functional-disabled-invert: #ffffff;
38
- --core-text-functional-success: #31c52e;
39
- --core-text-functional-critical: #ec4343;
40
- --core-text-functional-info: #316bff;
41
- --core-text-functional-warning: #dfb009;
74
+ --core-text-functional-success: #15803d;
75
+ --core-text-functional-critical: #b91c1c;
76
+ --core-text-functional-info: #1d4ed8;
77
+ --core-text-functional-warning: #a16207;
42
78
  --core-text-specific-tags-indigo: #4338ca;
43
79
  --core-text-specific-tags-rose: #be123c;
44
80
  --core-text-specific-tags-lime: #4d7c0f;
45
81
  --core-text-specific-tags-violet: #6d28d9;
46
82
  --core-text-specific-tags-cyan: #0e7490;
47
- --core-text-specific-tags-orange: #b8422a;
83
+ --core-text-specific-tags-orange: #c2410c;
48
84
  --core-text-specific-tags-emerald: #047857;
49
85
  --core-text-specific-tags-fuchsia: #a21caf;
50
86
  --core-text-specific-tags-amber: #b45309;
51
87
  --core-text-specific-tags-slate: #475569;
52
- --core-border-main-primary: #efefef;
53
- --core-border-main-secondary: #e6e6e6;
54
- --core-border-main-invert-primary: #213856;
55
- --core-border-main-invert-secondary: #3d4f66;
56
- --core-border-functional-success: #31c52e;
57
- --core-border-functional-critical: #ec4343;
58
- --core-border-functional-info: #316bff;
59
- --core-border-functional-warning: #dfb009;
60
- --core-border-specific-tags-indigo: #c7d2fe;
88
+ --core-text-specific-tags-neutral: #374151;
89
+ --core-text-specific-tags-teal: #0f766e;
90
+ --core-text-specific-tags-sky: #0369a1;
91
+ --core-text-specific-tags-purple: #7e22ce;
92
+ --core-text-specific-tags-pink: #be185d;
93
+ --core-text-specific-tags-on-solid: #ffffff;
94
+ --core-border-main-primary: rgba(31, 41, 55, 0.1);
95
+ --core-border-main-secondary: rgba(31, 41, 55, 0.15);
96
+ --core-border-main-hover: rgba(31, 41, 55, 0.25);
97
+ --core-border-main-subtle: rgba(31, 41, 55, 0.03);
98
+ --core-border-main-darken: rgba(31, 41, 55, 0.5);
99
+ --core-border-main-invert-primary: #111827;
100
+ --core-border-main-invert-secondary: #374151;
101
+ --core-border-functional-success: #15803d;
102
+ --core-border-functional-critical: #b91c1c;
103
+ --core-border-functional-info: #1d4ed8;
104
+ --core-border-functional-warning: #a16207;
105
+ --core-border-specific-tags-indigo: #4338ca;
61
106
  --core-border-specific-tags-rose: #fecdd3;
62
107
  --core-border-specific-tags-lime: #d9f99d;
63
- --core-border-specific-tags-violet: #ddd6fe;
64
- --core-border-specific-tags-cyan: #a5f3fc;
65
- --core-border-specific-tags-orange: #ffe5d9;
108
+ --core-border-specific-tags-violet: #6d28d9;
109
+ --core-border-specific-tags-cyan: #0e7490;
110
+ --core-border-specific-tags-orange: #c2410c;
66
111
  --core-border-specific-tags-emerald: #a7f3d0;
67
- --core-border-specific-tags-fuchsia: #f5d0fe;
68
- --core-border-specific-tags-amber: #fde68a;
112
+ --core-border-specific-tags-fuchsia: #a21caf;
113
+ --core-border-specific-tags-amber: #b45309;
69
114
  --core-border-specific-tags-slate: #cbd5e1;
115
+ --core-border-specific-tags-neutral: #374151;
116
+ --core-border-specific-tags-teal: #0f766e;
117
+ --core-border-specific-tags-sky: #0369a1;
118
+ --core-border-specific-tags-purple: #7e22ce;
119
+ --core-border-specific-tags-pink: #be185d;
70
120
  --interactive-bg-primary-dark-default: #316bff;
71
121
  --interactive-bg-primary-dark-hover: #1f5eff;
72
122
  --interactive-bg-primary-dark-pressed: #134cdd;
73
- --interactive-bg-primary-light-default: #ffffff;
74
- --interactive-bg-primary-light-hover: #f5f8ff;
75
- --interactive-bg-primary-light-pressed: #c7dcff;
76
- --interactive-bg-dark-default: #213856;
77
- --interactive-bg-dark-hover: #3d4f66;
78
- --interactive-bg-dark-pressed: #566f8f;
79
- --interactive-bg-light-default: #ffffff;
80
- --interactive-bg-light-hover: #f2f2f2;
81
- --interactive-bg-light-pressed: #efefef;
123
+ --interactive-bg-primary-light-default: #f5f8ff;
124
+ --interactive-bg-primary-light-hover: #dbeafe;
125
+ --interactive-bg-primary-light-pressed: #bfdbfe;
126
+ --interactive-bg-dark-default: #111827;
127
+ --interactive-bg-dark-hover: #1f2937;
128
+ --interactive-bg-dark-pressed: #374151;
129
+ --interactive-bg-light-default: #f9fafb;
130
+ --interactive-bg-light-hover: #f3f4f6;
131
+ --interactive-bg-light-pressed: #e5e7eb;
82
132
  --interactive-bg-white-default: #ffffff;
83
- --interactive-bg-white-hover: #fafafa;
84
- --interactive-bg-white-pressed: #f2f2f2;
85
- --interactive-bg-critical-dark-default: #ec4343;
86
- --interactive-bg-critical-dark-hover: #d92828;
87
- --interactive-bg-critical-dark-pressed: #be0723;
133
+ --interactive-bg-white-hover: #f9fafb;
134
+ --interactive-bg-white-pressed: #f3f4f6;
135
+ --interactive-bg-critical-dark-default: #ef4444;
136
+ --interactive-bg-critical-dark-hover: #dc2626;
137
+ --interactive-bg-critical-dark-pressed: #b91c1c;
88
138
  --interactive-bg-critical-light-default: #ffffff;
89
- --interactive-bg-critical-light-hover: #ffe7e2;
90
- --interactive-bg-critical-light-pressed: #ffc9c9;
91
- --interactive-bg-success-dark-default: #31c52e;
92
- --interactive-bg-success-dark-hover: #1fb01c;
93
- --interactive-bg-success-dark-pressed: #009e00;
139
+ --interactive-bg-critical-light-hover: #fef2f2;
140
+ --interactive-bg-critical-light-pressed: #fee2e2;
141
+ --interactive-bg-success-dark-default: #22c55e;
142
+ --interactive-bg-success-dark-hover: #16a34a;
143
+ --interactive-bg-success-dark-pressed: #15803d;
94
144
  --interactive-bg-success-light-default: #ffffff;
95
- --interactive-bg-success-light-hover: #f0fdf0;
96
- --interactive-bg-success-light-pressed: #e5fce5;
97
- --interactive-bg-warning-dark-default: #f5ca3d;
98
- --interactive-bg-warning-dark-hover: #dfb009;
99
- --interactive-bg-warning-dark-pressed: #d9aa00;
145
+ --interactive-bg-success-light-hover: #f0fdf4;
146
+ --interactive-bg-success-light-pressed: #dcfce7;
147
+ --interactive-bg-warning-dark-default: #facc15;
148
+ --interactive-bg-warning-dark-hover: #eab308;
149
+ --interactive-bg-warning-dark-pressed: #ca8a04;
100
150
  --interactive-bg-warning-light-default: #ffffff;
101
- --interactive-bg-warning-light-hover: #fff8d3;
102
- --interactive-bg-warning-light-pressed: #fff0a7;
103
- --interactive-text-neutral-dark-default: #3d4f66;
104
- --interactive-text-neutral-dark-hover: #213856;
105
- --interactive-text-neutral-dark-pressed: #566f8f;
151
+ --interactive-bg-warning-light-hover: #fef9c3;
152
+ --interactive-bg-warning-light-pressed: #fef08a;
153
+ --interactive-text-neutral-dark-default: #1f2937;
154
+ --interactive-text-neutral-dark-hover: #111827;
155
+ --interactive-text-neutral-dark-pressed: #374151;
106
156
  --interactive-text-neutral-light-default: #ffffff;
107
- --interactive-text-neutral-light-hover: #f2f2f2;
108
- --interactive-text-neutral-light-pressed: #efefef;
157
+ --interactive-text-neutral-light-hover: #f3f4f6;
158
+ --interactive-text-neutral-light-pressed: #e5e7eb;
109
159
  --interactive-text-primary-dark-default: #316bff;
110
160
  --interactive-text-primary-dark-hover: #1f5eff;
111
161
  --interactive-text-primary-dark-pressed: #134cdd;
112
162
  --interactive-text-primary-light-default: #ffffff;
113
- --interactive-text-primary-light-hover: #e0ebff;
114
- --interactive-text-primary-light-pressed: #c7dcff;
163
+ --interactive-text-primary-light-hover: #eff6ff;
164
+ --interactive-text-primary-light-pressed: #bfdbfe;
115
165
  --interactive-text-white-default: #ffffff;
116
- --interactive-text-white-hover: #fafafa;
117
- --interactive-text-white-pressed: #f2f2f2;
118
- --interactive-text-critical-dark-default: #ec4343;
119
- --interactive-text-critical-dark-hover: #d92828;
120
- --interactive-text-critical-dark-pressed: #be0723;
166
+ --interactive-text-white-hover: #f9fafb;
167
+ --interactive-text-white-pressed: #f3f4f6;
168
+ --interactive-text-critical-dark-default: #ef4444;
169
+ --interactive-text-critical-dark-hover: #dc2626;
170
+ --interactive-text-critical-dark-pressed: #b91c1c;
121
171
  --interactive-text-critical-light-default: #ffffff;
122
- --interactive-text-critical-light-hover: #ffe7e2;
123
- --interactive-text-critical-light-pressed: #ffc9c9;
124
- --interactive-text-success-dark-default: #31c52e;
125
- --interactive-text-success-dark-hover: #1fb01c;
126
- --interactive-text-success-dark-pressed: #009e00;
172
+ --interactive-text-critical-light-hover: #fee2e2;
173
+ --interactive-text-critical-light-pressed: #fecaca;
174
+ --interactive-text-success-dark-default: #22c55e;
175
+ --interactive-text-success-dark-hover: #16a34a;
176
+ --interactive-text-success-dark-pressed: #15803d;
127
177
  --interactive-text-success-light-default: #ffffff;
128
- --interactive-text-success-light-hover: #f0fdf0;
129
- --interactive-text-success-light-pressed: #e5fce5;
130
- --interactive-text-warning-dark-default: #f5ca3d;
131
- --interactive-text-warning-dark-hover: #dfb009;
132
- --interactive-text-warning-dark-pressed: #d9aa00;
178
+ --interactive-text-success-light-hover: #f0fdf4;
179
+ --interactive-text-success-light-pressed: #dcfce7;
180
+ --interactive-text-warning-dark-default: #facc15;
181
+ --interactive-text-warning-dark-hover: #eab308;
182
+ --interactive-text-warning-dark-pressed: #ca8a04;
133
183
  --interactive-text-warning-light-default: #ffffff;
134
- --interactive-text-warning-light-hover: #fff8d3;
135
- --interactive-text-warning-light-pressed: #fff0a7;
136
- --interactive-border-neutral-dark-default: #213856;
137
- --interactive-border-neutral-dark-hover: #3d4f66;
138
- --interactive-border-neutral-dark-pressed: #566f8f;
184
+ --interactive-text-warning-light-hover: #fef9c3;
185
+ --interactive-text-warning-light-pressed: #fef08a;
186
+ --interactive-border-neutral-dark-default: #111827;
187
+ --interactive-border-neutral-dark-hover: #1f2937;
188
+ --interactive-border-neutral-dark-pressed: #374151;
139
189
  --interactive-border-neutral-light-default: #ffffff;
140
- --interactive-border-neutral-light-hover: #f2f2f2;
141
- --interactive-border-neutral-light-pressed: #efefef;
190
+ --interactive-border-neutral-light-hover: #f3f4f6;
191
+ --interactive-border-neutral-light-pressed: #e5e7eb;
142
192
  --interactive-border-neutral-white-default: #ffffff;
143
- --interactive-border-neutral-white-hover: #fafafa;
144
- --interactive-border-neutral-white-pressed: #f2f2f2;
193
+ --interactive-border-neutral-white-hover: #f9fafb;
194
+ --interactive-border-neutral-white-pressed: #f3f4f6;
145
195
  --interactive-border-primary-dark-default: #316bff;
146
196
  --interactive-border-primary-dark-hover: #1f5eff;
147
197
  --interactive-border-primary-dark-pressed: #134cdd;
148
198
  --interactive-border-primary-light-default: #ffffff;
149
- --interactive-border-primary-light-hover: #e0ebff;
150
- --interactive-border-primary-light-pressed: #c7dcff;
151
- --interactive-border-critical-dark-default: #ec4343;
152
- --interactive-border-critical-dark-hover: #d92828;
153
- --interactive-border-critical-dark-pressed: #be0723;
199
+ --interactive-border-primary-light-hover: #dbeafe;
200
+ --interactive-border-primary-light-pressed: #bfdbfe;
201
+ --interactive-border-critical-dark-default: #ef4444;
202
+ --interactive-border-critical-dark-hover: #dc2626;
203
+ --interactive-border-critical-dark-pressed: #b91c1c;
154
204
  --interactive-border-critical-light-default: #ffffff;
155
- --interactive-border-critical-light-hover: #ffe7e2;
156
- --interactive-border-critical-light-pressed: #ffc9c9;
157
- --interactive-border-success-dark-default: #31c52e;
158
- --interactive-border-success-dark-hover: #1fb01c;
159
- --interactive-border-success-dark-pressed: #009e00;
205
+ --interactive-border-critical-light-hover: #fee2e2;
206
+ --interactive-border-critical-light-pressed: #fecaca;
207
+ --interactive-border-success-dark-default: #22c55e;
208
+ --interactive-border-success-dark-hover: #16a34a;
209
+ --interactive-border-success-dark-pressed: #15803d;
160
210
  --interactive-border-success-light-default: #ffffff;
161
- --interactive-border-success-light-hover: #f0fdf0;
162
- --interactive-border-success-light-pressed: #e5fce5;
163
- --interactive-border-warning-dark-default: #f5ca3d;
164
- --interactive-border-warning-dark-hover: #dfb009;
165
- --interactive-border-warning-dark-pressed: #d9aa00;
211
+ --interactive-border-success-light-hover: #f0fdf4;
212
+ --interactive-border-success-light-pressed: #dcfce7;
213
+ --interactive-border-warning-dark-default: #eab308;
214
+ --interactive-border-warning-dark-hover: #ca8a04;
215
+ --interactive-border-warning-dark-pressed: #a16207;
166
216
  --interactive-border-warning-light-default: #ffffff;
167
- --interactive-border-warning-light-hover: #fff8d3;
168
- --interactive-border-warning-light-pressed: #fff0a7;
217
+ --interactive-border-warning-light-hover: #fef9c3;
218
+ --interactive-border-warning-light-pressed: #fef08a;
169
219
  }