@navikt/ds-tokens 0.6.0 → 0.7.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.
package/src/colors.json CHANGED
@@ -1 +1,449 @@
1
- {}
1
+ {
2
+ "navds": {
3
+ "global": {
4
+ "color": {
5
+ "blue": {
6
+ "50": {
7
+ "value": "rgba(230, 240, 255, 1)"
8
+ },
9
+ "100": {
10
+ "value": "rgba(204, 225, 255, 1)"
11
+ },
12
+ "200": {
13
+ "value": "rgba(153, 195, 255, 1)"
14
+ },
15
+ "300": {
16
+ "value": "rgba(102, 165, 244, 1)"
17
+ },
18
+ "400": {
19
+ "value": "rgba(51, 134, 224, 1)"
20
+ },
21
+ "500": {
22
+ "value": "rgba(0, 103, 197, 1)"
23
+ },
24
+ "600": {
25
+ "value": "rgba(0, 86, 180, 1)"
26
+ },
27
+ "700": {
28
+ "value": "rgba(0, 69, 156, 1)"
29
+ },
30
+ "800": {
31
+ "value": "rgba(0, 52, 125, 1)"
32
+ },
33
+ "900": {
34
+ "value": "rgba(0, 34, 82, 1)"
35
+ }
36
+ },
37
+ "deepblue": {
38
+ "50": {
39
+ "value": "rgba(230, 241, 248, 1)"
40
+ },
41
+ "100": {
42
+ "value": "rgba(204, 226, 240, 1)"
43
+ },
44
+ "200": {
45
+ "value": "rgba(153, 196, 221, 1)"
46
+ },
47
+ "300": {
48
+ "value": "rgba(102, 163, 196, 1)"
49
+ },
50
+ "400": {
51
+ "value": "rgba(51, 128, 165, 1)"
52
+ },
53
+ "500": {
54
+ "value": "rgba(0, 91, 130, 1)"
55
+ },
56
+ "600": {
57
+ "value": "rgba(0, 80, 119, 1)"
58
+ },
59
+ "700": {
60
+ "value": "rgba(0, 67, 103, 1)"
61
+ },
62
+ "800": {
63
+ "value": "rgba(0, 52, 83, 1)"
64
+ },
65
+ "900": {
66
+ "value": "rgba(0, 36, 58, 1)"
67
+ }
68
+ },
69
+ "gray": {
70
+ "50": {
71
+ "value": "rgba(247, 247, 247, 1)"
72
+ },
73
+ "100": {
74
+ "value": "rgba(241, 241, 241, 1)"
75
+ },
76
+ "200": {
77
+ "value": "rgba(201, 201, 201, 1)"
78
+ },
79
+ "400": {
80
+ "value": "rgba(160, 160, 160, 1)"
81
+ },
82
+ "600": {
83
+ "value": "rgba(106, 106, 106, 1)"
84
+ },
85
+ "800": {
86
+ "value": "rgba(79, 79, 79, 1)"
87
+ },
88
+ "900": {
89
+ "value": "rgba(38, 38, 38, 1)"
90
+ }
91
+ },
92
+ "green": {
93
+ "50": {
94
+ "value": "rgba(243, 252, 245, 1)"
95
+ },
96
+ "100": {
97
+ "value": "rgba(204, 241, 214, 1)"
98
+ },
99
+ "200": {
100
+ "value": "rgba(153, 222, 173, 1)"
101
+ },
102
+ "300": {
103
+ "value": "rgba(102, 199, 134, 1)"
104
+ },
105
+ "400": {
106
+ "value": "rgba(51, 170, 95, 1)"
107
+ },
108
+ "500": {
109
+ "value": "rgba(6, 137, 58, 1)"
110
+ },
111
+ "600": {
112
+ "value": "rgba(0, 124, 46, 1)"
113
+ },
114
+ "700": {
115
+ "value": "rgba(0, 106, 35, 1)"
116
+ },
117
+ "800": {
118
+ "value": "rgba(0, 85, 25, 1)"
119
+ },
120
+ "900": {
121
+ "value": "rgba(0, 59, 15, 1)"
122
+ }
123
+ },
124
+ "lightblue": {
125
+ "50": {
126
+ "value": "rgba(235, 252, 255, 1)"
127
+ },
128
+ "100": {
129
+ "value": "rgba(216, 249, 255, 1)"
130
+ },
131
+ "200": {
132
+ "value": "rgba(181, 241, 255, 1)"
133
+ },
134
+ "300": {
135
+ "value": "rgba(151, 230, 255, 1)"
136
+ },
137
+ "400": {
138
+ "value": "rgba(124, 218, 248, 1)"
139
+ },
140
+ "500": {
141
+ "value": "rgba(102, 203, 236, 1)"
142
+ },
143
+ "600": {
144
+ "value": "rgba(76, 173, 205, 1)"
145
+ },
146
+ "700": {
147
+ "value": "rgba(54, 141, 168, 1)"
148
+ },
149
+ "800": {
150
+ "value": "rgba(35, 107, 125, 1)"
151
+ },
152
+ "900": {
153
+ "value": "rgba(19, 72, 82, 1)"
154
+ }
155
+ },
156
+ "limegreen": {
157
+ "50": {
158
+ "value": "rgba(253, 255, 230, 1)"
159
+ },
160
+ "100": {
161
+ "value": "rgba(249, 252, 204, 1)"
162
+ },
163
+ "200": {
164
+ "value": "rgba(236, 243, 153, 1)"
165
+ },
166
+ "300": {
167
+ "value": "rgba(217, 227, 102, 1)"
168
+ },
169
+ "400": {
170
+ "value": "rgba(193, 203, 51, 1)"
171
+ },
172
+ "500": {
173
+ "value": "rgba(162, 173, 0, 1)"
174
+ },
175
+ "600": {
176
+ "value": "rgba(147, 158, 0, 1)"
177
+ },
178
+ "700": {
179
+ "value": "rgba(127, 137, 0, 1)"
180
+ },
181
+ "800": {
182
+ "value": "rgba(102, 110, 0, 1)"
183
+ },
184
+ "900": {
185
+ "value": "rgba(71, 78, 0, 1)"
186
+ }
187
+ },
188
+ "nav": {
189
+ "red": {
190
+ "value": "rgba(195, 0, 0, 1)"
191
+ }
192
+ },
193
+ "orange": {
194
+ "50": {
195
+ "value": "rgba(255, 249, 240, 1)"
196
+ },
197
+ "100": {
198
+ "value": "rgba(255, 236, 204, 1)"
199
+ },
200
+ "200": {
201
+ "value": "rgba(255, 215, 153, 1)"
202
+ },
203
+ "300": {
204
+ "value": "rgba(255, 193, 102, 1)"
205
+ },
206
+ "400": {
207
+ "value": "rgba(255, 170, 51, 1)"
208
+ },
209
+ "500": {
210
+ "value": "rgba(255, 145, 0, 1)"
211
+ },
212
+ "600": {
213
+ "value": "rgba(212, 123, 0, 1)"
214
+ },
215
+ "700": {
216
+ "value": "rgba(168, 100, 0, 1)"
217
+ },
218
+ "800": {
219
+ "value": "rgba(125, 76, 0, 1)"
220
+ },
221
+ "900": {
222
+ "value": "rgba(82, 51, 0, 1)"
223
+ }
224
+ },
225
+ "purple": {
226
+ "50": {
227
+ "value": "rgba(239, 236, 244, 1)"
228
+ },
229
+ "100": {
230
+ "value": "rgba(224, 216, 233, 1)"
231
+ },
232
+ "200": {
233
+ "value": "rgba(192, 178, 210, 1)"
234
+ },
235
+ "300": {
236
+ "value": "rgba(161, 141, 187, 1)"
237
+ },
238
+ "400": {
239
+ "value": "rgba(130, 105, 162, 1)"
240
+ },
241
+ "500": {
242
+ "value": "rgba(99, 70, 137, 1)"
243
+ },
244
+ "600": {
245
+ "value": "rgba(82, 56, 116, 1)"
246
+ },
247
+ "700": {
248
+ "value": "rgba(65, 43, 93, 1)"
249
+ },
250
+ "800": {
251
+ "value": "rgba(48, 31, 70, 1)"
252
+ },
253
+ "900": {
254
+ "value": "rgba(31, 20, 47, 1)"
255
+ }
256
+ },
257
+ "red": {
258
+ "50": {
259
+ "value": "rgba(253, 232, 230, 1)"
260
+ },
261
+ "100": {
262
+ "value": "rgba(249, 210, 204, 1)"
263
+ },
264
+ "200": {
265
+ "value": "rgba(239, 168, 157, 1)"
266
+ },
267
+ "300": {
268
+ "value": "rgba(225, 128, 113, 1)"
269
+ },
270
+ "400": {
271
+ "value": "rgba(208, 92, 74, 1)"
272
+ },
273
+ "500": {
274
+ "value": "rgba(186, 58, 38, 1)"
275
+ },
276
+ "600": {
277
+ "value": "rgba(163, 42, 23, 1)"
278
+ },
279
+ "700": {
280
+ "value": "rgba(136, 29, 12, 1)"
281
+ },
282
+ "800": {
283
+ "value": "rgba(106, 18, 4, 1)"
284
+ },
285
+ "900": {
286
+ "value": "rgba(72, 9, 0, 1)"
287
+ }
288
+ },
289
+ "transparent": {
290
+ "value": "rgba(255, 255, 255, 0)"
291
+ },
292
+ "white": {
293
+ "value": "rgba(255, 255, 255, 1)"
294
+ }
295
+ }
296
+ },
297
+ "semantic": {
298
+ "color": {
299
+ "border": {
300
+ "inverted": {
301
+ "value": "{navds.global.color.gray.200.value}"
302
+ },
303
+ "muted": {
304
+ "value": "{navds.global.color.gray.400.value}"
305
+ },
306
+ "@": {
307
+ "value": "{navds.global.color.gray.600.value}"
308
+ }
309
+ },
310
+ "canvas": {
311
+ "background": {
312
+ "inverted": {
313
+ "value": "{navds.global.color.gray.900.value}"
314
+ },
315
+ "light": {
316
+ "value": "{navds.global.color.white.value}"
317
+ },
318
+ "@": {
319
+ "value": "{navds.global.color.gray.100.value}"
320
+ }
321
+ }
322
+ },
323
+ "component": {
324
+ "background": {
325
+ "alternate": {
326
+ "value": "{navds.global.color.gray.50.value}"
327
+ },
328
+ "inverted": {
329
+ "value": "{navds.global.color.gray.900.value}"
330
+ },
331
+ "light": {
332
+ "value": "{navds.global.color.white.value}"
333
+ }
334
+ }
335
+ },
336
+ "divider": {
337
+ "value": "{navds.global.color.gray.200.value}"
338
+ },
339
+ "feedback": {
340
+ "danger": {
341
+ "background": {
342
+ "value": "{navds.global.color.red.100.value}"
343
+ },
344
+ "border": {
345
+ "value": "{navds.global.color.red.500.value}"
346
+ },
347
+ "icon": {
348
+ "value": "{navds.global.color.red.500.value}"
349
+ },
350
+ "text": {
351
+ "value": "{navds.global.color.red.500.value}"
352
+ }
353
+ },
354
+ "info": {
355
+ "background": {
356
+ "value": "{navds.global.color.lightblue.100.value}"
357
+ },
358
+ "border": {
359
+ "value": "{navds.global.color.lightblue.700.value}"
360
+ },
361
+ "icon": {
362
+ "value": "{navds.global.color.lightblue.700.value}"
363
+ }
364
+ },
365
+ "success": {
366
+ "background": {
367
+ "value": "{navds.global.color.green.100.value}"
368
+ },
369
+ "border": {
370
+ "value": "{navds.global.color.green.500.value}"
371
+ },
372
+ "icon": {
373
+ "value": "{navds.global.color.green.600.value}"
374
+ }
375
+ },
376
+ "warning": {
377
+ "background": {
378
+ "value": "{navds.global.color.orange.100.value}"
379
+ },
380
+ "border": {
381
+ "value": "{navds.global.color.orange.600.value}"
382
+ },
383
+ "icon": {
384
+ "value": "{navds.global.color.orange.500.value}"
385
+ }
386
+ }
387
+ },
388
+ "focus": {
389
+ "inverted": {
390
+ "value": "{navds.global.color.blue.200.value}"
391
+ },
392
+ "@": {
393
+ "value": "{navds.global.color.blue.800.value}"
394
+ }
395
+ },
396
+ "interaction": {
397
+ "danger": {
398
+ "hover": {
399
+ "value": "{navds.global.color.red.600.value}"
400
+ },
401
+ "selected": {
402
+ "value": "{navds.global.color.red.700.value}"
403
+ },
404
+ "@": {
405
+ "value": "{navds.global.color.red.500.value}"
406
+ }
407
+ },
408
+ "primary": {
409
+ "hover": {
410
+ "subtle": {
411
+ "value": "{navds.global.color.blue.50.value}"
412
+ },
413
+ "@": {
414
+ "value": "{navds.global.color.blue.600.value}"
415
+ }
416
+ },
417
+ "selected": {
418
+ "value": "{navds.global.color.deepblue.500.value}"
419
+ },
420
+ "@": {
421
+ "@": {
422
+ "value": "{navds.global.color.blue.500.value}"
423
+ }
424
+ }
425
+ }
426
+ },
427
+ "link": {
428
+ "visited": {
429
+ "value": "{navds.global.color.purple.500.value}"
430
+ },
431
+ "@": {
432
+ "value": "{navds.global.color.blue.500.value}"
433
+ }
434
+ },
435
+ "text": {
436
+ "inverted": {
437
+ "value": "{navds.global.color.white.value}"
438
+ },
439
+ "muted": {
440
+ "value": "{navds.global.color.gray.600.value}"
441
+ },
442
+ "@": {
443
+ "value": "{navds.global.color.gray.900.value}"
444
+ }
445
+ }
446
+ }
447
+ }
448
+ }
449
+ }
package/src/index.js CHANGED
@@ -1,147 +1,8 @@
1
- const Color = require("color");
2
- const newColors = require("./colors.json");
3
- const newSpacing = require("./spacing.json");
4
-
5
1
  const baseFontSize = 16;
6
-
7
2
  const getFontSize = (size) => `${size / baseFontSize}rem`;
8
- // https://github.com/hihayk/scale/blob/69b766bba2db046d3e8cb4026ae32a32c897f9ff/src/utils.js#L44
9
- const mixColors = (color, step, amount, mixColor) => {
10
- const saturation = Math.round(Color(color).hsl().color[1]);
11
- // Setting directly to hex returns different result...
12
- return Color(
13
- Color(color)
14
- .saturate(((step + 1) / 5) * (saturation / 100))
15
- .mix(Color(mixColor), ((amount / 100) * (step + 1)) / 5)
16
- .string()
17
- ).hex();
18
- };
19
-
20
- const lightColor = (color, step) => mixColors(color, step, 100, "white");
21
- const darkColor = (color, step) => mixColors(color, step, 85, "black");
22
-
23
- const baseColors = {
24
- blue: "#0067c5",
25
- deepblue: "#005B82",
26
- lightblue: "#66CBEC",
27
- orange: "#FF9100",
28
- green: "#06893A",
29
- red: "#BA3A26",
30
- purple: "#634689",
31
- limegreen: "#a2ad00",
32
- };
33
-
34
- const white = "#ffffff";
35
- const darkgray = "#262626";
36
- const lightgray = "#F1F1F1";
37
-
38
- const gray = (n) => Color(lightgray).mix(Color(darkgray), n).hex();
39
3
 
40
4
  module.exports = {
41
5
  navds: {
42
- spacing: {
43
- ...(newSpacing?.navds?.spacing ?? {}),
44
- },
45
- ...(newColors?.global ?? {}),
46
- ...(newColors?.semantic ?? {}),
47
- color: {
48
- white: { value: white },
49
- darkgray: { value: darkgray },
50
- gray: {
51
- 90: { value: gray(1) },
52
- 80: { value: gray(0.8) },
53
- 60: { value: gray(0.6667) },
54
- 40: { value: gray(0.4) },
55
- 20: { value: gray(0.196) },
56
- 10: { value: gray(0) },
57
- },
58
- ...Object.entries(baseColors).reduce(
59
- (colors, [name, color]) => ({
60
- ...colors,
61
- [name]: {
62
- 90: { value: darkColor(color, 3) },
63
- 80: { value: darkColor(color, 2) },
64
- 70: { value: darkColor(color, 1) },
65
- 60: { value: darkColor(color, 0) },
66
- 50: { value: color },
67
- 40: { value: lightColor(color, 0) },
68
- 30: { value: lightColor(color, 1) },
69
- 20: { value: lightColor(color, 2) },
70
- 10: { value: lightColor(color, 3) },
71
- },
72
- }),
73
- {}
74
- ),
75
- disabled: { value: "{navds.color.gray.40.value}" },
76
- action: {
77
- default: { value: "{navds.color.blue.50.value}" },
78
- hover: { value: "{navds.color.blue.60.value}" },
79
- active: { value: "{navds.color.deepblue.50.value}" },
80
- },
81
- danger: {
82
- default: { value: "{navds.color.red.50.value}" },
83
- hover: { value: "{navds.color.red.60.value}" },
84
- active: { value: "{navds.color.red.70.value}" },
85
- },
86
- error: {
87
- border: { value: "{navds.color.red.50.value}" },
88
- background: { value: "{navds.color.red.10.value}" },
89
- },
90
- warning: {
91
- border: { value: "{navds.color.orange.60.value}" },
92
- background: { value: "{navds.color.orange.10.value}" },
93
- },
94
- info: {
95
- border: { value: "{navds.color.lightblue.70.value}" },
96
- background: { value: "{navds.color.lightblue.10.value}" },
97
- },
98
- success: {
99
- border: { value: "{navds.color.green.50.value}" },
100
- background: { value: "{navds.color.green.10.value}" },
101
- },
102
- border: { value: "{navds.color.gray.40.value}" },
103
- background: { value: "{navds.color.white.value}" },
104
- text: {
105
- primary: { value: "{navds.color.gray.90.value}" },
106
- inverse: { value: "{navds.color.white.value}" },
107
- disabled: { value: "{navds.color.gray.60.value}" },
108
- link: { value: "{navds.color.blue.50.value}" },
109
- error: { value: "{navds.color.red.50.value}" },
110
- },
111
- hover: { value: "{navds.color.gray.40.value}" },
112
- tag: {
113
- error: {
114
- border: { value: "{navds.color.red.50.value}" },
115
- background: { value: "{navds.color.red.10.value}" },
116
- },
117
- warning: {
118
- border: { value: "{navds.color.orange.60.value}" },
119
- background: { value: "{navds.color.orange.10.value}" },
120
- },
121
- info: {
122
- border: { value: "{navds.color.lightblue.70.value}" },
123
- background: { value: "{navds.color.lightblue.10.value}" },
124
- },
125
- success: {
126
- border: { value: "{navds.color.green.50.value}" },
127
- background: { value: "{navds.color.green.10.value}" },
128
- },
129
- },
130
- modal: {
131
- overlay: {
132
- value: "rgba(38, 38, 38, 0.7)",
133
- },
134
- },
135
- },
136
- border: {
137
- default: {
138
- value: "1px solid {navds.color.border.value}",
139
- },
140
- radius: { value: "4px" },
141
- },
142
- panel: {
143
- hover: { value: "1px solid {navds.color.blue.50.value}" },
144
- },
145
6
  font: {
146
7
  family: { value: '"Source Sans Pro", Arial, sans-serif' },
147
8
  line: {
@@ -179,35 +40,16 @@ module.exports = {
179
40
  },
180
41
  },
181
42
  shadow: {
182
- focus: { value: "0 0 0 3px {navds.color.blue.80.value}" },
183
- "focus-on-dark": { value: "0 0 0 3px {navds.color.orange.40.value}" },
184
- hover: { value: "{navds.color.hover.value} 0 2px 1px 0" },
185
- },
186
- text: {
187
- focus: { value: "{navds.color.blue.80.value}" },
188
- shadow: { value: "0 0 0 2px {navds.color.blue.80.value}" },
189
- },
190
- contentContainer: {
191
- maxWidth: { value: "79.5rem" },
192
- padding: {
193
- small: { value: "{navds.spacing.4.value}" },
194
- mediumAndLarger: { value: "{navds.spacing.6.value}" },
43
+ focus: { value: "0 0 0 3px {navds.semantic.color.focus.@.value}" },
44
+ "focus-inverted": {
45
+ value: "0 0 0 3px {navds.semantic.color.focus.inverted.value}",
195
46
  },
196
- },
197
- grid: {
198
- gutter: {
199
- small: { value: "{navds.spacing.4.value}" },
200
- mediumAndLarger: { value: "{navds.spacing.6.value}" },
47
+ popover: {
48
+ value: "0 2px 4px 0 {navds.global.color.gray.200.value}",
201
49
  },
202
- },
203
- layout: {
204
- background: {
205
- white: { value: white },
206
- gray: { value: "{navds.color.gray.10.value}" },
207
- },
208
- padding: {
209
- small: { value: "{navds.spacing.4.value}" },
210
- mediumAndLarger: { value: "{navds.spacing.10.value}" },
50
+ card: {
51
+ value:
52
+ "0 1px 3px 0 rgba(38,38,38,0.2),0 2px 1px 0 rgba(38,38,38,0.12),0 1px 1px 0 rgba(38,38,38,0.14)",
211
53
  },
212
54
  },
213
55
  "z-index": {
@@ -215,22 +57,5 @@ module.exports = {
215
57
  popover: { value: 1000 },
216
58
  focus: { value: 10 },
217
59
  },
218
- sidebar: {
219
- sticky: {
220
- offset: { value: "0" },
221
- },
222
- },
223
- checkmark: {
224
- image: {
225
- white: {
226
- value:
227
- "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
228
- },
229
- blue: {
230
- value:
231
- "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
232
- },
233
- },
234
- },
235
60
  },
236
61
  };