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