@navikt/ds-tokens 5.4.0 → 5.5.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/dist/tokens-cjs.js +95 -95
- package/dist/tokens.css +76 -76
- package/dist/tokens.d.ts +95 -95
- package/dist/tokens.js +95 -95
- package/dist/tokens.less +95 -95
- package/dist/tokens.scss +95 -95
- package/package.json +3 -3
- package/src/border.json +6 -8
- package/src/colors-bg.json +10 -0
- package/src/colors-border-stateful.json +7 -0
- package/src/colors-border.json +58 -0
- package/src/colors-icon.json +61 -0
- package/src/colors-surface-stateful.json +58 -0
- package/src/colors-surface.json +109 -0
- package/src/colors-text.json +55 -0
- package/src/shadow-stateful.json +12 -0
- package/src/shadow.json +0 -6
- package/src/semantic-colors.json +0 -346
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-tokens",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.5.0",
|
|
4
4
|
"description": "Design-tokens for NAV designsystem",
|
|
5
5
|
"author": "Aksel | NAV designsystem team",
|
|
6
6
|
"keywords": [
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"nodemon": "^3.0.1",
|
|
37
37
|
"style-dictionary": "^3.0.2",
|
|
38
38
|
"ts-jest": "^29.0.0",
|
|
39
|
-
"ts-node": "10.9.
|
|
40
|
-
"typescript": "^
|
|
39
|
+
"ts-node": "^10.9.1",
|
|
40
|
+
"typescript": "^5.1.6"
|
|
41
41
|
},
|
|
42
42
|
"publishConfig": {
|
|
43
43
|
"access": "public",
|
package/src/border.json
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"a": {
|
|
3
|
-
"border": {
|
|
4
|
-
"
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
"full": { "value": "9999px" }
|
|
10
|
-
}
|
|
3
|
+
"border-radius": {
|
|
4
|
+
"small": { "value": "2px" },
|
|
5
|
+
"medium": { "value": "4px" },
|
|
6
|
+
"large": { "value": "8px" },
|
|
7
|
+
"xlarge": { "value": "12px" },
|
|
8
|
+
"full": { "value": "9999px" }
|
|
11
9
|
}
|
|
12
10
|
}
|
|
13
11
|
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{
|
|
2
|
+
"a": {
|
|
3
|
+
"border-default": {
|
|
4
|
+
"value": "{a.grayalpha.500.value}"
|
|
5
|
+
},
|
|
6
|
+
"border-strong": {
|
|
7
|
+
"value": "{a.grayalpha.700.value}"
|
|
8
|
+
},
|
|
9
|
+
"border-divider": {
|
|
10
|
+
"value": "{a.grayalpha.300.value}"
|
|
11
|
+
},
|
|
12
|
+
"border-subtle": {
|
|
13
|
+
"value": "{a.grayalpha.300.value}"
|
|
14
|
+
},
|
|
15
|
+
"border-action-selected": {
|
|
16
|
+
"value": "{a.blue.700.value}"
|
|
17
|
+
},
|
|
18
|
+
"border-action": {
|
|
19
|
+
"value": "{a.blue.500.value}"
|
|
20
|
+
},
|
|
21
|
+
"border-selected": {
|
|
22
|
+
"value": "{a.blue.500.value}"
|
|
23
|
+
},
|
|
24
|
+
"border-success": {
|
|
25
|
+
"value": "{a.green.500.value}"
|
|
26
|
+
},
|
|
27
|
+
"border-danger": {
|
|
28
|
+
"value": "{a.red.500.value}"
|
|
29
|
+
},
|
|
30
|
+
"border-warning": {
|
|
31
|
+
"value": "{a.orange.600.value}"
|
|
32
|
+
},
|
|
33
|
+
"border-info": {
|
|
34
|
+
"value": "{a.lightblue.700.value}"
|
|
35
|
+
},
|
|
36
|
+
"border-focus-on-inverted": {
|
|
37
|
+
"value": "{a.blue.200.value}"
|
|
38
|
+
},
|
|
39
|
+
"border-focus": {
|
|
40
|
+
"value": "{a.blue.800.value}"
|
|
41
|
+
},
|
|
42
|
+
"border-on-inverted": {
|
|
43
|
+
"value": "{a.gray.200.value}"
|
|
44
|
+
},
|
|
45
|
+
"border-on-inverted-subtle": {
|
|
46
|
+
"value": "{a.gray.700.value}"
|
|
47
|
+
},
|
|
48
|
+
"border-alt-1": {
|
|
49
|
+
"value": "{a.purple.400.value}"
|
|
50
|
+
},
|
|
51
|
+
"border-alt-2": {
|
|
52
|
+
"value": "{a.limegreen.700.value}"
|
|
53
|
+
},
|
|
54
|
+
"border-alt-3": {
|
|
55
|
+
"value": "{a.deepblue.500.value}"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"a": {
|
|
3
|
+
"icon-default": {
|
|
4
|
+
"value": "{a.gray.900.value}"
|
|
5
|
+
},
|
|
6
|
+
"icon-subtle": {
|
|
7
|
+
"value": "{a.grayalpha.700.value}"
|
|
8
|
+
},
|
|
9
|
+
"icon-action-selected": {
|
|
10
|
+
"value": "{a.blue.700.value}"
|
|
11
|
+
},
|
|
12
|
+
"icon-action-on-action-subtle": {
|
|
13
|
+
"value": "{a.blue.600.value}"
|
|
14
|
+
},
|
|
15
|
+
"icon-action": {
|
|
16
|
+
"value": "{a.blue.500.value}"
|
|
17
|
+
},
|
|
18
|
+
"icon-success": {
|
|
19
|
+
"value": "{a.green.500.value}"
|
|
20
|
+
},
|
|
21
|
+
"icon-danger": {
|
|
22
|
+
"value": "{a.red.500.value}"
|
|
23
|
+
},
|
|
24
|
+
"icon-warning": {
|
|
25
|
+
"value": "{a.orange.600.value}"
|
|
26
|
+
},
|
|
27
|
+
"icon-info": {
|
|
28
|
+
"value": "{a.lightblue.800.value}"
|
|
29
|
+
},
|
|
30
|
+
"icon-alt-1": {
|
|
31
|
+
"value": "{a.purple.500.value}"
|
|
32
|
+
},
|
|
33
|
+
"icon-alt-2": {
|
|
34
|
+
"value": "{a.limegreen.700.value}"
|
|
35
|
+
},
|
|
36
|
+
"icon-alt-3": {
|
|
37
|
+
"value": "{a.deepblue.500.value}"
|
|
38
|
+
},
|
|
39
|
+
"icon-on-neutral": {
|
|
40
|
+
"value": "{a.white.value}"
|
|
41
|
+
},
|
|
42
|
+
"icon-on-inverted": {
|
|
43
|
+
"value": "{a.white.value}"
|
|
44
|
+
},
|
|
45
|
+
"icon-on-action": {
|
|
46
|
+
"value": "{a.white.value}"
|
|
47
|
+
},
|
|
48
|
+
"icon-on-success": {
|
|
49
|
+
"value": "{a.white.value}"
|
|
50
|
+
},
|
|
51
|
+
"icon-on-danger": {
|
|
52
|
+
"value": "{a.white.value}"
|
|
53
|
+
},
|
|
54
|
+
"icon-on-warning": {
|
|
55
|
+
"value": "{a.gray.900.value}"
|
|
56
|
+
},
|
|
57
|
+
"icon-on-info": {
|
|
58
|
+
"value": "{a.gray.900.value}"
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{
|
|
2
|
+
"a": {
|
|
3
|
+
"surface-hover": {
|
|
4
|
+
"value": "{a.grayalpha.100.value}"
|
|
5
|
+
},
|
|
6
|
+
"surface-active": {
|
|
7
|
+
"value": "{a.grayalpha.200.value}"
|
|
8
|
+
},
|
|
9
|
+
"surface-inverted-hover": {
|
|
10
|
+
"value": "{a.gray.800.value}"
|
|
11
|
+
},
|
|
12
|
+
"surface-inverted-active": {
|
|
13
|
+
"value": "{a.gray.700.value}"
|
|
14
|
+
},
|
|
15
|
+
"surface-action-subtle-hover": {
|
|
16
|
+
"value": "{a.blue.100.value}"
|
|
17
|
+
},
|
|
18
|
+
"surface-action-hover": {
|
|
19
|
+
"value": "{a.blue.600.value}"
|
|
20
|
+
},
|
|
21
|
+
"surface-action-active": {
|
|
22
|
+
"value": "{a.blue.700.value}"
|
|
23
|
+
},
|
|
24
|
+
"surface-action-selected-hover": {
|
|
25
|
+
"value": "{a.blue.800.value}"
|
|
26
|
+
},
|
|
27
|
+
"surface-neutral-subtle-hover": {
|
|
28
|
+
"value": "{a.grayalpha.200.value}"
|
|
29
|
+
},
|
|
30
|
+
"surface-neutral-active": {
|
|
31
|
+
"value": "{a.gray.900.value}"
|
|
32
|
+
},
|
|
33
|
+
"surface-neutral-hover": {
|
|
34
|
+
"value": "{a.gray.800.value}"
|
|
35
|
+
},
|
|
36
|
+
"surface-success-subtle-hover": {
|
|
37
|
+
"value": "{a.green.200.value}"
|
|
38
|
+
},
|
|
39
|
+
"surface-success-hover": {
|
|
40
|
+
"value": "{a.green.600.value}"
|
|
41
|
+
},
|
|
42
|
+
"surface-danger-subtle-hover": {
|
|
43
|
+
"value": "{a.red.200.value}"
|
|
44
|
+
},
|
|
45
|
+
"surface-danger-hover": {
|
|
46
|
+
"value": "{a.red.600.value}"
|
|
47
|
+
},
|
|
48
|
+
"surface-danger-active": {
|
|
49
|
+
"value": "{a.red.700.value}"
|
|
50
|
+
},
|
|
51
|
+
"surface-warning-subtle-hover": {
|
|
52
|
+
"value": "{a.orange.200.value}"
|
|
53
|
+
},
|
|
54
|
+
"surface-info-subtle-hover": {
|
|
55
|
+
"value": "{a.lightblue.200.value}"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
{
|
|
2
|
+
"a": {
|
|
3
|
+
"surface-default": {
|
|
4
|
+
"value": "{a.white.value}"
|
|
5
|
+
},
|
|
6
|
+
"surface-selected": {
|
|
7
|
+
"value": "{a.blue.50.value}"
|
|
8
|
+
},
|
|
9
|
+
"surface-subtle": {
|
|
10
|
+
"value": "{a.gray.50.value}"
|
|
11
|
+
},
|
|
12
|
+
"surface-transparent": {
|
|
13
|
+
"value": "{a.transparent.value}"
|
|
14
|
+
},
|
|
15
|
+
"surface-backdrop": {
|
|
16
|
+
"value": "{a.grayalpha.500.value}"
|
|
17
|
+
},
|
|
18
|
+
"surface-inverted": {
|
|
19
|
+
"value": "{a.gray.900.value}"
|
|
20
|
+
},
|
|
21
|
+
"surface-action-subtle": {
|
|
22
|
+
"value": "{a.blue.50.value}"
|
|
23
|
+
},
|
|
24
|
+
"surface-action-selected": {
|
|
25
|
+
"value": "{a.blue.700.value}"
|
|
26
|
+
},
|
|
27
|
+
"surface-action": {
|
|
28
|
+
"value": "{a.blue.500.value}"
|
|
29
|
+
},
|
|
30
|
+
"surface-neutral-subtle": {
|
|
31
|
+
"value": "{a.grayalpha.100.value}"
|
|
32
|
+
},
|
|
33
|
+
"surface-neutral-moderate": {
|
|
34
|
+
"value": "{a.grayalpha.200.value}"
|
|
35
|
+
},
|
|
36
|
+
"surface-neutral-selected": {
|
|
37
|
+
"value": "{a.gray.900.value}"
|
|
38
|
+
},
|
|
39
|
+
"surface-neutral": {
|
|
40
|
+
"value": "{a.gray.700.value}"
|
|
41
|
+
},
|
|
42
|
+
"surface-success-subtle": {
|
|
43
|
+
"value": "{a.green.100.value}"
|
|
44
|
+
},
|
|
45
|
+
"surface-success-moderate": {
|
|
46
|
+
"value": "{a.green.200.value}"
|
|
47
|
+
},
|
|
48
|
+
"surface-success": {
|
|
49
|
+
"value": "{a.green.500.value}"
|
|
50
|
+
},
|
|
51
|
+
"surface-danger-subtle": {
|
|
52
|
+
"value": "{a.red.100.value}"
|
|
53
|
+
},
|
|
54
|
+
"surface-danger-moderate": {
|
|
55
|
+
"value": "{a.red.200.value}"
|
|
56
|
+
},
|
|
57
|
+
"surface-danger": {
|
|
58
|
+
"value": "{a.red.500.value}"
|
|
59
|
+
},
|
|
60
|
+
"surface-warning-subtle": {
|
|
61
|
+
"value": "{a.orange.100.value}"
|
|
62
|
+
},
|
|
63
|
+
"surface-warning-moderate": {
|
|
64
|
+
"value": "{a.orange.200.value}"
|
|
65
|
+
},
|
|
66
|
+
"surface-warning": {
|
|
67
|
+
"value": "{a.orange.500.value}"
|
|
68
|
+
},
|
|
69
|
+
"surface-info-subtle": {
|
|
70
|
+
"value": "{a.lightblue.100.value}"
|
|
71
|
+
},
|
|
72
|
+
"surface-info-moderate": {
|
|
73
|
+
"value": "{a.lightblue.200.value}"
|
|
74
|
+
},
|
|
75
|
+
"surface-info": {
|
|
76
|
+
"value": "{a.lightblue.500.value}"
|
|
77
|
+
},
|
|
78
|
+
"surface-alt-1-subtle": {
|
|
79
|
+
"value": "{a.purple.100.value}"
|
|
80
|
+
},
|
|
81
|
+
"surface-alt-1-moderate": {
|
|
82
|
+
"value": "{a.purple.200.value}"
|
|
83
|
+
},
|
|
84
|
+
"surface-alt-1": {
|
|
85
|
+
"value": "{a.purple.400.value}"
|
|
86
|
+
},
|
|
87
|
+
"surface-alt-2-subtle": {
|
|
88
|
+
"value": "{a.limegreen.100.value}"
|
|
89
|
+
},
|
|
90
|
+
"surface-alt-2-moderate": {
|
|
91
|
+
"value": "{a.limegreen.200.value}"
|
|
92
|
+
},
|
|
93
|
+
"surface-alt-2": {
|
|
94
|
+
"value": "{a.limegreen.400.value}"
|
|
95
|
+
},
|
|
96
|
+
"surface-alt-3-subtle": {
|
|
97
|
+
"value": "{a.deepblue.100.value}"
|
|
98
|
+
},
|
|
99
|
+
"surface-alt-3-moderate": {
|
|
100
|
+
"value": "{a.deepblue.200.value}"
|
|
101
|
+
},
|
|
102
|
+
"surface-alt-3-strong": {
|
|
103
|
+
"value": "{a.deepblue.800.value}"
|
|
104
|
+
},
|
|
105
|
+
"surface-alt-3": {
|
|
106
|
+
"value": "{a.deepblue.500.value}"
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
{
|
|
2
|
+
"a": {
|
|
3
|
+
"text-default": {
|
|
4
|
+
"value": "{a.gray.900.value}"
|
|
5
|
+
},
|
|
6
|
+
"text-subtle": {
|
|
7
|
+
"value": "{a.grayalpha.700.value}"
|
|
8
|
+
},
|
|
9
|
+
"text-visited": {
|
|
10
|
+
"value": "{a.purple.500.value}"
|
|
11
|
+
},
|
|
12
|
+
"text-danger": {
|
|
13
|
+
"value": "{a.red.500.value}"
|
|
14
|
+
},
|
|
15
|
+
"text-action-selected": {
|
|
16
|
+
"value": "{a.blue.700.value}"
|
|
17
|
+
},
|
|
18
|
+
"text-action-on-action-subtle": {
|
|
19
|
+
"value": "{a.blue.600.value}"
|
|
20
|
+
},
|
|
21
|
+
"text-action": {
|
|
22
|
+
"value": "{a.blue.500.value}"
|
|
23
|
+
},
|
|
24
|
+
"text-on-inverted": {
|
|
25
|
+
"value": "{a.white.value}"
|
|
26
|
+
},
|
|
27
|
+
"text-on-neutral": {
|
|
28
|
+
"value": "{a.white.value}"
|
|
29
|
+
},
|
|
30
|
+
"text-on-action": {
|
|
31
|
+
"value": "{a.white.value}"
|
|
32
|
+
},
|
|
33
|
+
"text-on-success": {
|
|
34
|
+
"value": "{a.white.value}"
|
|
35
|
+
},
|
|
36
|
+
"text-on-danger": {
|
|
37
|
+
"value": "{a.white.value}"
|
|
38
|
+
},
|
|
39
|
+
"text-on-warning": {
|
|
40
|
+
"value": "{a.gray.900.value}"
|
|
41
|
+
},
|
|
42
|
+
"text-on-info": {
|
|
43
|
+
"value": "{a.gray.900.value}"
|
|
44
|
+
},
|
|
45
|
+
"text-on-alt-1": {
|
|
46
|
+
"value": "{a.white.value}"
|
|
47
|
+
},
|
|
48
|
+
"text-on-alt-2": {
|
|
49
|
+
"value": "{a.gray.900.value}"
|
|
50
|
+
},
|
|
51
|
+
"text-on-alt-3": {
|
|
52
|
+
"value": "{a.white.value}"
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
package/src/shadow.json
CHANGED
|
@@ -15,12 +15,6 @@
|
|
|
15
15
|
},
|
|
16
16
|
"xlarge": {
|
|
17
17
|
"value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)"
|
|
18
|
-
},
|
|
19
|
-
"focus": {
|
|
20
|
-
"inverted": {
|
|
21
|
-
"value": "0 0 0 3px {a.border.focus.on.inverted.value}"
|
|
22
|
-
},
|
|
23
|
-
"@": { "value": "0 0 0 3px {a.border.focus.@.value}" }
|
|
24
18
|
}
|
|
25
19
|
}
|
|
26
20
|
}
|