@udir-design/theme 0.1.0-2 → 1.0.0-alpha.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 (18) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +12 -2
  3. package/dist/colors.d.ts +10 -0
  4. package/dist/udir/builtin-colors.css +87 -0
  5. package/dist/udir/color/accent.css +24 -0
  6. package/dist/udir/color/support1.css +24 -0
  7. package/dist/udir/color/support2.css +24 -0
  8. package/dist/udir/color/support3.css +24 -0
  9. package/dist/udir/color-scheme/dark.css +473 -0
  10. package/dist/udir/color-scheme/light.css +473 -0
  11. package/dist/udir/semantic.css +54 -51
  12. package/dist/udir/typography/primary.css +22 -54
  13. package/dist/udir/typography/secondary.css +22 -54
  14. package/dist/udir.css +1118 -1604
  15. package/package.json +11 -5
  16. package/dist/udir/color-mode/contrast.css +0 -311
  17. package/dist/udir/color-mode/dark.css +0 -623
  18. package/dist/udir/color-mode/light.css +0 -623
package/package.json CHANGED
@@ -1,22 +1,28 @@
1
1
  {
2
2
  "name": "@udir-design/theme",
3
- "version": "0.1.0-2",
3
+ "license": "MIT",
4
+ "version": "1.0.0-alpha.0",
4
5
  "type": "module",
5
6
  "exports": {
6
- ".": "./dist/udir.css",
7
- "./*": "./dist/*"
7
+ ".": {
8
+ "types": "./dist/colors.d.ts",
9
+ "default": "./dist/udir.css"
10
+ }
8
11
  },
9
12
  "files": [
10
13
  "./dist"
11
14
  ],
12
- "dependencies": {},
15
+ "dependencies": {
16
+ "@digdir/designsystemet-react": "1.0.0-next.48"
17
+ },
13
18
  "devDependencies": {
14
19
  "rimraf": "^6.0.1",
15
20
  "@udir-design/tokens": "0.0.0"
16
21
  },
17
22
  "scripts": {
18
23
  "copy-css": "cp -r ../../design-tokens/dist/ ./dist/",
24
+ "postprocess-css": "../../@internal/build-tools/bin/postprocess-css-colors.ts ./dist/udir.css",
19
25
  "clean": "rimraf ./dist",
20
- "build": "pnpm clean && pnpm copy-css"
26
+ "build": "pnpm clean && pnpm copy-css && pnpm postprocess-css"
21
27
  }
22
28
  }
package/dist/udir/color-mode/contrast.css DELETED
@@ -1,311 +0,0 @@
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
- }