@udir-design/theme 0.1.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 (9) hide show
  1. package/README.md +3 -0
  2. package/dist/udir/color-mode/contrast.css +311 -0
  3. package/dist/udir/color-mode/dark.css +623 -0
  4. package/dist/udir/color-mode/light.css +623 -0
  5. package/dist/udir/semantic.css +68 -0
  6. package/dist/udir/typography/primary.css +159 -0
  7. package/dist/udir/typography/secondary.css +159 -0
  8. package/dist/udir.css +1951 -0
  9. package/package.json +22 -0
package/README.md ADDED
@@ -0,0 +1,3 @@
1
+ # @udir-design/theme
2
+
3
+ The theme css used by @udir-design/react
package/dist/udir/color-mode/contrast.css ADDED
@@ -0,0 +1,311 @@
1
+ /**
2
+ * These files are generated from design tokens defind using Token Studio
3
+ */
4
+
5
+ @layer ds.theme.color-mode.contrast {
6
+ [data-ds-color-mode="contrast"] {
7
+ --ds-color-accent-1: #040404;
8
+ --ds-color-accent-2: #131313;
9
+ --ds-color-accent-3: #242424;
10
+ --ds-color-accent-4: #303030;
11
+ --ds-color-accent-5: #3e3e3e;
12
+ --ds-color-accent-6: #8b8b8b;
13
+ --ds-color-accent-7: #ababab;
14
+ --ds-color-accent-8: #cccccc;
15
+ --ds-color-accent-9: #ababab;
16
+ --ds-color-accent-10: #969696;
17
+ --ds-color-accent-11: #818181;
18
+ --ds-color-accent-12: #c6c6c6;
19
+ --ds-color-accent-13: #f0f0f0;
20
+ --ds-color-accent-contrast-1: #000000;
21
+ --ds-color-accent-contrast-2: #1b1b1b;
22
+ --ds-color-accent-background-default: var(--ds-color-accent-1);
23
+ --ds-color-accent-background-subtle: var(--ds-color-accent-2);
24
+ --ds-color-accent-surface-default: var(--ds-color-accent-3);
25
+ --ds-color-accent-surface-hover: var(--ds-color-accent-4);
26
+ --ds-color-accent-surface-active: var(--ds-color-accent-5);
27
+ --ds-color-accent-border-subtle: var(--ds-color-accent-6);
28
+ --ds-color-accent-border-default: var(--ds-color-accent-7);
29
+ --ds-color-accent-border-strong: var(--ds-color-accent-8);
30
+ --ds-color-accent-base-default: var(--ds-color-accent-9);
31
+ --ds-color-accent-base-hover: var(--ds-color-accent-10);
32
+ --ds-color-accent-base-active: var(--ds-color-accent-11);
33
+ --ds-color-accent-text-subtle: var(--ds-color-accent-12);
34
+ --ds-color-accent-text-default: var(--ds-color-accent-13);
35
+ --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
36
+ --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
37
+ --ds-color-neutral-1: #040404;
38
+ --ds-color-neutral-2: #131313;
39
+ --ds-color-neutral-3: #242424;
40
+ --ds-color-neutral-4: #303030;
41
+ --ds-color-neutral-5: #3e3e3e;
42
+ --ds-color-neutral-6: #8b8b8b;
43
+ --ds-color-neutral-7: #ababab;
44
+ --ds-color-neutral-8: #cccccc;
45
+ --ds-color-neutral-9: #1f1f1f;
46
+ --ds-color-neutral-10: #303030;
47
+ --ds-color-neutral-11: #424242;
48
+ --ds-color-neutral-12: #c6c6c6;
49
+ --ds-color-neutral-13: #f0f0f0;
50
+ --ds-color-neutral-contrast-1: #ffffff;
51
+ --ds-color-neutral-contrast-2: #b0b0b0;
52
+ --ds-color-neutral-background-default: var(--ds-color-neutral-1);
53
+ --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
54
+ --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
55
+ --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
56
+ --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
57
+ --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
58
+ --ds-color-neutral-border-default: var(--ds-color-neutral-7);
59
+ --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
60
+ --ds-color-neutral-base-default: var(--ds-color-neutral-9);
61
+ --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
62
+ --ds-color-neutral-base-active: var(--ds-color-neutral-11);
63
+ --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
64
+ --ds-color-neutral-text-default: var(--ds-color-neutral-13);
65
+ --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
66
+ --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
67
+ --ds-color-brand1-1: #020303;
68
+ --ds-color-brand1-2: #0c1511;
69
+ --ds-color-brand1-3: #18271f;
70
+ --ds-color-brand1-4: #1f342a;
71
+ --ds-color-brand1-5: #284336;
72
+ --ds-color-brand1-6: #5a9878;
73
+ --ds-color-brand1-7: #6fba93;
74
+ --ds-color-brand1-8: #a1d8bc;
75
+ --ds-color-brand1-9: #284336;
76
+ --ds-color-brand1-10: #345745;
77
+ --ds-color-brand1-11: #406b55;
78
+ --ds-color-brand1-12: #95d3b3;
79
+ --ds-color-brand1-13: #e4f4ec;
80
+ --ds-color-brand1-contrast-1: #ffffff;
81
+ --ds-color-brand1-contrast-2: #d3d8d6;
82
+ --ds-color-brand1-background-default: var(--ds-color-brand1-1);
83
+ --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
84
+ --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
85
+ --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
86
+ --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
87
+ --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
88
+ --ds-color-brand1-border-default: var(--ds-color-brand1-7);
89
+ --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
90
+ --ds-color-brand1-base-default: var(--ds-color-brand1-9);
91
+ --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
92
+ --ds-color-brand1-base-active: var(--ds-color-brand1-11);
93
+ --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
94
+ --ds-color-brand1-text-default: var(--ds-color-brand1-13);
95
+ --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
96
+ --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
97
+ --ds-color-brand2-1: #030304;
98
+ --ds-color-brand2-2: #111415;
99
+ --ds-color-brand2-3: #202428;
100
+ --ds-color-brand2-4: #2b3135;
101
+ --ds-color-brand2-5: #383f44;
102
+ --ds-color-brand2-6: #7e8d9a;
103
+ --ds-color-brand2-7: #9baebd;
104
+ --ds-color-brand2-8: #b8cfe1;
105
+ --ds-color-brand2-9: #24282b;
106
+ --ds-color-brand2-10: #33393f;
107
+ --ds-color-brand2-11: #444c53;
108
+ --ds-color-brand2-12: #b3c8da;
109
+ --ds-color-brand2-13: #eaf1f8;
110
+ --ds-color-brand2-contrast-1: #ffffff;
111
+ --ds-color-brand2-contrast-2: #babbbc;
112
+ --ds-color-brand2-background-default: var(--ds-color-brand2-1);
113
+ --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
114
+ --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
115
+ --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
116
+ --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
117
+ --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
118
+ --ds-color-brand2-border-default: var(--ds-color-brand2-7);
119
+ --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
120
+ --ds-color-brand2-base-default: var(--ds-color-brand2-9);
121
+ --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
122
+ --ds-color-brand2-base-active: var(--ds-color-brand2-11);
123
+ --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
124
+ --ds-color-brand2-text-default: var(--ds-color-brand2-13);
125
+ --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
126
+ --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
127
+ --ds-color-brand3-1: #040303;
128
+ --ds-color-brand3-2: #161310;
129
+ --ds-color-brand3-3: #27231e;
130
+ --ds-color-brand3-4: #353028;
131
+ --ds-color-brand3-5: #433c33;
132
+ --ds-color-brand3-6: #998974;
133
+ --ds-color-brand3-7: #bba98e;
134
+ --ds-color-brand3-8: #dec8a9;
135
+ --ds-color-brand3-9: #2c2721;
136
+ --ds-color-brand3-10: #3f3830;
137
+ --ds-color-brand3-11: #534a3f;
138
+ --ds-color-brand3-12: #d9c3a5;
139
+ --ds-color-brand3-13: #f7f0e7;
140
+ --ds-color-brand3-contrast-1: #ffffff;
141
+ --ds-color-brand3-contrast-2: #bdbbb9;
142
+ --ds-color-brand3-background-default: var(--ds-color-brand3-1);
143
+ --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
144
+ --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
145
+ --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
146
+ --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
147
+ --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
148
+ --ds-color-brand3-border-default: var(--ds-color-brand3-7);
149
+ --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
150
+ --ds-color-brand3-base-default: var(--ds-color-brand3-9);
151
+ --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
152
+ --ds-color-brand3-base-active: var(--ds-color-brand3-11);
153
+ --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
154
+ --ds-color-brand3-text-default: var(--ds-color-brand3-13);
155
+ --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
156
+ --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
157
+ --ds-color-success-background-default: var(--ds-global-green-1);
158
+ --ds-color-success-background-subtle: var(--ds-global-green-2);
159
+ --ds-color-success-surface-default: var(--ds-global-green-3);
160
+ --ds-color-success-surface-hover: var(--ds-global-green-4);
161
+ --ds-color-success-surface-active: var(--ds-global-green-5);
162
+ --ds-color-success-border-subtle: var(--ds-global-green-6);
163
+ --ds-color-success-border-default: var(--ds-global-green-7);
164
+ --ds-color-success-border-strong: var(--ds-global-green-8);
165
+ --ds-color-success-base-default: var(--ds-global-green-9);
166
+ --ds-color-success-base-hover: var(--ds-global-green-10);
167
+ --ds-color-success-base-active: var(--ds-global-green-11);
168
+ --ds-color-success-text-subtle: var(--ds-global-green-12);
169
+ --ds-color-success-text-default: var(--ds-global-green-13);
170
+ --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
171
+ --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
172
+ --ds-color-danger-background-default: var(--ds-global-red-1);
173
+ --ds-color-danger-background-subtle: var(--ds-global-red-2);
174
+ --ds-color-danger-surface-default: var(--ds-global-red-3);
175
+ --ds-color-danger-surface-hover: var(--ds-global-red-4);
176
+ --ds-color-danger-surface-active: var(--ds-global-red-5);
177
+ --ds-color-danger-border-subtle: var(--ds-global-red-6);
178
+ --ds-color-danger-border-default: var(--ds-global-red-7);
179
+ --ds-color-danger-border-strong: var(--ds-global-red-8);
180
+ --ds-color-danger-base-default: var(--ds-global-red-9);
181
+ --ds-color-danger-base-hover: var(--ds-global-red-10);
182
+ --ds-color-danger-base-active: var(--ds-global-red-11);
183
+ --ds-color-danger-text-subtle: var(--ds-global-red-12);
184
+ --ds-color-danger-text-default: var(--ds-global-red-13);
185
+ --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
186
+ --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
187
+ --ds-color-info-background-default: #000408;
188
+ --ds-color-info-background-subtle: #021423;
189
+ --ds-color-info-surface-default: #032540;
190
+ --ds-color-info-surface-hover: #043256;
191
+ --ds-color-info-surface-active: #063f6c;
192
+ --ds-color-info-border-subtle: #4291ce;
193
+ --ds-color-info-border-default: #78b1dc;
194
+ --ds-color-info-border-strong: #aed0ea;
195
+ --ds-color-info-base-default: #2a84c8;
196
+ --ds-color-info-base-hover: #0a6dba;
197
+ --ds-color-info-base-active: #085998;
198
+ --ds-color-info-text-subtle: #a6cbe8;
199
+ --ds-color-info-text-default: #e8f1f9;
200
+ --ds-color-info-contrast-default: #000000;
201
+ --ds-color-info-contrast-subtle: #040c13;
202
+ --ds-color-warning-background-default: var(--ds-global-yellow-1);
203
+ --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
204
+ --ds-color-warning-surface-default: var(--ds-global-yellow-3);
205
+ --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
206
+ --ds-color-warning-surface-active: var(--ds-global-yellow-5);
207
+ --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
208
+ --ds-color-warning-border-default: var(--ds-global-yellow-7);
209
+ --ds-color-warning-border-strong: var(--ds-global-yellow-8);
210
+ --ds-color-warning-base-default: var(--ds-global-orange-9);
211
+ --ds-color-warning-base-hover: var(--ds-global-orange-10);
212
+ --ds-color-warning-base-active: var(--ds-global-orange-11);
213
+ --ds-color-warning-text-subtle: var(--ds-global-orange-12);
214
+ --ds-color-warning-text-default: var(--ds-global-orange-13);
215
+ --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
216
+ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
217
+ --ds-color-focus-inner: #040404;
218
+ --ds-color-focus-outer: #f0f0f0;
219
+ --ds-global-blue-1: #000408;
220
+ --ds-global-blue-2: #021423;
221
+ --ds-global-blue-3: #032540;
222
+ --ds-global-blue-4: #043256;
223
+ --ds-global-blue-5: #063f6c;
224
+ --ds-global-blue-6: #4291ce;
225
+ --ds-global-blue-7: #78b1dc;
226
+ --ds-global-blue-8: #aed0ea;
227
+ --ds-global-blue-9: #2a84c8;
228
+ --ds-global-blue-10: #0a6dba;
229
+ --ds-global-blue-11: #085998;
230
+ --ds-global-blue-12: #a6cbe8;
231
+ --ds-global-blue-13: #e8f1f9;
232
+ --ds-global-blue-contrast-1: #000000;
233
+ --ds-global-blue-contrast-2: #040c13;
234
+ --ds-global-green-1: #000401;
235
+ --ds-global-green-2: #011704;
236
+ --ds-global-green-3: #022b08;
237
+ --ds-global-green-4: #03380a;
238
+ --ds-global-green-5: #03490d;
239
+ --ds-global-green-6: #379f45;
240
+ --ds-global-green-7: #71bb7b;
241
+ --ds-global-green-8: #aad6b0;
242
+ --ds-global-green-9: #118c23;
243
+ --ds-global-green-10: #057615;
244
+ --ds-global-green-11: #045f11;
245
+ --ds-global-green-12: #a3d2a9;
246
+ --ds-global-green-13: #e6f3e8;
247
+ --ds-global-green-contrast-1: #000000;
248
+ --ds-global-green-contrast-2: #010401;
249
+ --ds-global-orange-1: #060301;
250
+ --ds-global-orange-2: #200f05;
251
+ --ds-global-orange-3: #391b09;
252
+ --ds-global-orange-4: #4e250c;
253
+ --ds-global-orange-5: #633010;
254
+ --ds-global-orange-6: #c67849;
255
+ --ds-global-orange-7: #d69f7d;
256
+ --ds-global-orange-8: #e7c6b2;
257
+ --ds-global-orange-9: #bc6028;
258
+ --ds-global-orange-10: #a24d1a;
259
+ --ds-global-orange-11: #833f15;
260
+ --ds-global-orange-12: #e3bea6;
261
+ --ds-global-orange-13: #f8eee7;
262
+ --ds-global-orange-contrast-1: #000000;
263
+ --ds-global-orange-contrast-2: #060301;
264
+ --ds-global-purple-1: #060308;
265
+ --ds-global-purple-2: #1a0d26;
266
+ --ds-global-purple-3: #301748;
267
+ --ds-global-purple-4: #402060;
268
+ --ds-global-purple-5: #52287a;
269
+ --ds-global-purple-6: #9e7dbf;
270
+ --ds-global-purple-7: #b9a1d0;
271
+ --ds-global-purple-8: #d5c7e3;
272
+ --ds-global-purple-9: #b298cc;
273
+ --ds-global-purple-10: #a181c0;
274
+ --ds-global-purple-11: #8f69b5;
275
+ --ds-global-purple-12: #d0c0e0;
276
+ --ds-global-purple-13: #f2eef7;
277
+ --ds-global-purple-contrast-1: #000000;
278
+ --ds-global-purple-contrast-2: #18141b;
279
+ --ds-global-red-1: #0b0101;
280
+ --ds-global-red-2: #2b0606;
281
+ --ds-global-red-3: #4b0a0a;
282
+ --ds-global-red-4: #620e0e;
283
+ --ds-global-red-5: #7c1212;
284
+ --ds-global-red-6: #d66b6b;
285
+ --ds-global-red-7: #e29797;
286
+ --ds-global-red-8: #eec1c1;
287
+ --ds-global-red-9: #d76e6e;
288
+ --ds-global-red-10: #ce4e4e;
289
+ --ds-global-red-11: #c32727;
290
+ --ds-global-red-12: #ecbaba;
291
+ --ds-global-red-13: #faeded;
292
+ --ds-global-red-contrast-1: #000000;
293
+ --ds-global-red-contrast-2: #271414;
294
+ --ds-global-yellow-1: #040301;
295
+ --ds-global-yellow-2: #181304;
296
+ --ds-global-yellow-3: #2b2307;
297
+ --ds-global-yellow-4: #3a300a;
298
+ --ds-global-yellow-5: #4a3d0d;
299
+ --ds-global-yellow-6: #a7881c;
300
+ --ds-global-yellow-7: #cca723;
301
+ --ds-global-yellow-8: #edc94b;
302
+ --ds-global-yellow-9: #3d310a;
303
+ --ds-global-yellow-10: #52430e;
304
+ --ds-global-yellow-11: #695512;
305
+ --ds-global-yellow-12: #ebc232;
306
+ --ds-global-yellow-13: #faf0cd;
307
+ --ds-global-yellow-contrast-1: #ffffff;
308
+ --ds-global-yellow-contrast-2: #ccc9bf;
309
+ }
310
+
311
+ }