@navikt/ds-tailwind 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.
Files changed (2) hide show
  1. package/package.json +4 -4
  2. package/tailwind.config.js +96 -96
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-tailwind",
3
- "version": "5.4.0",
3
+ "version": "5.5.0",
4
4
  "description": "Tailwind config based on @navikt/ds-tokens",
5
5
  "author": "Aksel | NAV designsystem team",
6
6
  "keywords": [
@@ -22,14 +22,14 @@
22
22
  "directory": "@navikt/core/tailwind"
23
23
  },
24
24
  "devDependencies": {
25
- "@navikt/ds-tokens": "^5.4.0",
25
+ "@navikt/ds-tokens": "^5.5.0",
26
26
  "@types/jest": "^29.0.0",
27
27
  "color": "4.2.3",
28
28
  "jest": "^29.0.0",
29
29
  "lodash": "^4.17.21",
30
30
  "ts-jest": "^29.0.0",
31
- "ts-node": "10.9.0",
32
- "typescript": "^4.8.0"
31
+ "ts-node": "^10.9.1",
32
+ "typescript": "^5.1.6"
33
33
  },
34
34
  "publishConfig": {
35
35
  "access": "public",
package/tailwind.config.js CHANGED
@@ -1,10 +1,12 @@
1
1
  module.exports = {
2
2
  "theme": {
3
3
  "colors": {
4
+ "bg-default": "rgba(255, 255, 255, 1)",
5
+ "bg-subtle": "rgba(236, 238, 240, 1)",
6
+ "border-subtle-hover": "rgba(5, 23, 51, 0.34)",
4
7
  "border-default": "rgba(2, 20, 49, 0.49)",
5
8
  "border-strong": "rgba(1, 11, 24, 0.68)",
6
9
  "border-divider": "rgba(7, 26, 54, 0.21)",
7
- "border-subtle-hover": "rgba(5, 23, 51, 0.34)",
8
10
  "border-subtle": "rgba(7, 26, 54, 0.21)",
9
11
  "border-action-selected": "rgba(0, 69, 156, 1)",
10
12
  "border-action": "rgba(0, 103, 197, 1)",
@@ -20,6 +22,95 @@ module.exports = {
20
22
  "border-alt-1": "rgba(130, 105, 162, 1)",
21
23
  "border-alt-2": "rgba(127, 137, 0, 1)",
22
24
  "border-alt-3": "rgba(0, 91, 130, 1)",
25
+ "icon-default": "rgba(35, 38, 42, 1)",
26
+ "icon-subtle": "rgba(1, 11, 24, 0.68)",
27
+ "icon-action-selected": "rgba(0, 69, 156, 1)",
28
+ "icon-action-on-action-subtle": "rgba(0, 86, 180, 1)",
29
+ "icon-action": "rgba(0, 103, 197, 1)",
30
+ "icon-success": "rgba(6, 137, 58, 1)",
31
+ "icon-danger": "rgba(195, 0, 0, 1)",
32
+ "icon-warning": "rgba(199, 115, 0, 1)",
33
+ "icon-info": "rgba(35, 107, 125, 1)",
34
+ "icon-alt-1": "rgba(99, 70, 137, 1)",
35
+ "icon-alt-2": "rgba(127, 137, 0, 1)",
36
+ "icon-alt-3": "rgba(0, 91, 130, 1)",
37
+ "icon-on-neutral": "rgba(255, 255, 255, 1)",
38
+ "icon-on-inverted": "rgba(255, 255, 255, 1)",
39
+ "icon-on-action": "rgba(255, 255, 255, 1)",
40
+ "icon-on-success": "rgba(255, 255, 255, 1)",
41
+ "icon-on-danger": "rgba(255, 255, 255, 1)",
42
+ "icon-on-warning": "rgba(35, 38, 42, 1)",
43
+ "icon-on-info": "rgba(35, 38, 42, 1)",
44
+ "surface-hover": "rgba(18, 43, 68, 0.08)",
45
+ "surface-active": "rgba(17, 41, 64, 0.13)",
46
+ "surface-inverted-hover": "rgba(66, 71, 79, 1)",
47
+ "surface-inverted-active": "rgba(82, 89, 98, 1)",
48
+ "surface-action-subtle-hover": "rgba(204, 225, 255, 1)",
49
+ "surface-action-hover": "rgba(0, 86, 180, 1)",
50
+ "surface-action-active": "rgba(0, 69, 156, 1)",
51
+ "surface-action-selected-hover": "rgba(0, 52, 125, 1)",
52
+ "surface-neutral-subtle-hover": "rgba(17, 41, 64, 0.13)",
53
+ "surface-neutral-active": "rgba(35, 38, 42, 1)",
54
+ "surface-neutral-hover": "rgba(66, 71, 79, 1)",
55
+ "surface-success-subtle-hover": "rgba(153, 222, 173, 1)",
56
+ "surface-success-hover": "rgba(0, 124, 46, 1)",
57
+ "surface-danger-subtle-hover": "rgba(246, 130, 130, 1)",
58
+ "surface-danger-hover": "rgba(173, 0, 0, 1)",
59
+ "surface-danger-active": "rgba(140, 0, 0, 1)",
60
+ "surface-warning-subtle-hover": "rgba(255, 215, 153, 1)",
61
+ "surface-info-subtle-hover": "rgba(181, 241, 255, 1)",
62
+ "surface-default": "rgba(255, 255, 255, 1)",
63
+ "surface-selected": "rgba(230, 240, 255, 1)",
64
+ "surface-subtle": "rgba(242, 243, 245, 1)",
65
+ "surface-transparent": "rgba(255, 255, 255, 0)",
66
+ "surface-backdrop": "rgba(2, 20, 49, 0.49)",
67
+ "surface-inverted": "rgba(35, 38, 42, 1)",
68
+ "surface-action-subtle": "rgba(230, 240, 255, 1)",
69
+ "surface-action-selected": "rgba(0, 69, 156, 1)",
70
+ "surface-action": "rgba(0, 103, 197, 1)",
71
+ "surface-neutral-subtle": "rgba(18, 43, 68, 0.08)",
72
+ "surface-neutral-moderate": "rgba(17, 41, 64, 0.13)",
73
+ "surface-neutral-selected": "rgba(35, 38, 42, 1)",
74
+ "surface-neutral": "rgba(82, 89, 98, 1)",
75
+ "surface-success-subtle": "rgba(204, 241, 214, 1)",
76
+ "surface-success-moderate": "rgba(153, 222, 173, 1)",
77
+ "surface-success": "rgba(6, 137, 58, 1)",
78
+ "surface-danger-subtle": "rgba(255, 194, 194, 1)",
79
+ "surface-danger-moderate": "rgba(246, 130, 130, 1)",
80
+ "surface-danger": "rgba(195, 0, 0, 1)",
81
+ "surface-warning-subtle": "rgba(255, 236, 204, 1)",
82
+ "surface-warning-moderate": "rgba(255, 215, 153, 1)",
83
+ "surface-warning": "rgba(255, 145, 0, 1)",
84
+ "surface-info-subtle": "rgba(216, 249, 255, 1)",
85
+ "surface-info-moderate": "rgba(181, 241, 255, 1)",
86
+ "surface-info": "rgba(102, 203, 236, 1)",
87
+ "surface-alt-1-subtle": "rgba(224, 216, 233, 1)",
88
+ "surface-alt-1-moderate": "rgba(192, 178, 210, 1)",
89
+ "surface-alt-1": "rgba(130, 105, 162, 1)",
90
+ "surface-alt-2-subtle": "rgba(249, 252, 204, 1)",
91
+ "surface-alt-2-moderate": "rgba(236, 243, 153, 1)",
92
+ "surface-alt-2": "rgba(193, 203, 51, 1)",
93
+ "surface-alt-3-subtle": "rgba(204, 226, 240, 1)",
94
+ "surface-alt-3-moderate": "rgba(153, 196, 221, 1)",
95
+ "surface-alt-3-strong": "rgba(0, 52, 83, 1)",
96
+ "surface-alt-3": "rgba(0, 91, 130, 1)",
97
+ "text-default": "rgba(35, 38, 42, 1)",
98
+ "text-subtle": "rgba(1, 11, 24, 0.68)",
99
+ "text-visited": "rgba(99, 70, 137, 1)",
100
+ "text-danger": "rgba(195, 0, 0, 1)",
101
+ "text-action-selected": "rgba(0, 69, 156, 1)",
102
+ "text-action-on-action-subtle": "rgba(0, 86, 180, 1)",
103
+ "text-action": "rgba(0, 103, 197, 1)",
104
+ "text-on-inverted": "rgba(255, 255, 255, 1)",
105
+ "text-on-neutral": "rgba(255, 255, 255, 1)",
106
+ "text-on-action": "rgba(255, 255, 255, 1)",
107
+ "text-on-success": "rgba(255, 255, 255, 1)",
108
+ "text-on-danger": "rgba(255, 255, 255, 1)",
109
+ "text-on-warning": "rgba(35, 38, 42, 1)",
110
+ "text-on-info": "rgba(35, 38, 42, 1)",
111
+ "text-on-alt-1": "rgba(255, 255, 255, 1)",
112
+ "text-on-alt-2": "rgba(35, 38, 42, 1)",
113
+ "text-on-alt-3": "rgba(255, 255, 255, 1)",
23
114
  "data-surface-1": "rgba(51, 134, 224, 1)",
24
115
  "data-surface-1-subtle": "rgba(204, 225, 255, 1)",
25
116
  "data-surface-2": "rgba(0, 91, 130, 1)",
@@ -140,98 +231,7 @@ module.exports = {
140
231
  "purple-600": "rgba(82, 56, 116, 1)",
141
232
  "purple-700": "rgba(65, 43, 93, 1)",
142
233
  "purple-800": "rgba(48, 31, 70, 1)",
143
- "purple-900": "rgba(31, 20, 47, 1)",
144
- "text-default": "rgba(35, 38, 42, 1)",
145
- "text-subtle": "rgba(1, 11, 24, 0.68)",
146
- "text-visited": "rgba(99, 70, 137, 1)",
147
- "text-danger": "rgba(195, 0, 0, 1)",
148
- "text-action-selected": "rgba(0, 69, 156, 1)",
149
- "text-action-on-action-subtle": "rgba(0, 86, 180, 1)",
150
- "text-action": "rgba(0, 103, 197, 1)",
151
- "text-on-inverted": "rgba(255, 255, 255, 1)",
152
- "text-on-neutral": "rgba(255, 255, 255, 1)",
153
- "text-on-action": "rgba(255, 255, 255, 1)",
154
- "text-on-success": "rgba(255, 255, 255, 1)",
155
- "text-on-danger": "rgba(255, 255, 255, 1)",
156
- "text-on-warning": "rgba(35, 38, 42, 1)",
157
- "text-on-info": "rgba(35, 38, 42, 1)",
158
- "text-on-alt-1": "rgba(255, 255, 255, 1)",
159
- "text-on-alt-2": "rgba(35, 38, 42, 1)",
160
- "text-on-alt-3": "rgba(255, 255, 255, 1)",
161
- "bg-default": "rgba(255, 255, 255, 1)",
162
- "bg-subtle": "rgba(236, 238, 240, 1)",
163
- "surface-default": "rgba(255, 255, 255, 1)",
164
- "surface-hover": "rgba(18, 43, 68, 0.08)",
165
- "surface-active": "rgba(17, 41, 64, 0.13)",
166
- "surface-selected": "rgba(230, 240, 255, 1)",
167
- "surface-subtle": "rgba(242, 243, 245, 1)",
168
- "surface-transparent": "rgba(255, 255, 255, 0)",
169
- "surface-backdrop": "rgba(2, 20, 49, 0.49)",
170
- "surface-inverted-hover": "rgba(66, 71, 79, 1)",
171
- "surface-inverted-active": "rgba(82, 89, 98, 1)",
172
- "surface-inverted": "rgba(35, 38, 42, 1)",
173
- "surface-action-subtle-hover": "rgba(204, 225, 255, 1)",
174
- "surface-action-subtle": "rgba(230, 240, 255, 1)",
175
- "surface-action-hover": "rgba(0, 86, 180, 1)",
176
- "surface-action-active": "rgba(0, 69, 156, 1)",
177
- "surface-action-selected-hover": "rgba(0, 52, 125, 1)",
178
- "surface-action-selected": "rgba(0, 69, 156, 1)",
179
- "surface-action": "rgba(0, 103, 197, 1)",
180
- "surface-neutral-subtle-hover": "rgba(17, 41, 64, 0.13)",
181
- "surface-neutral-subtle": "rgba(18, 43, 68, 0.08)",
182
- "surface-neutral-moderate": "rgba(17, 41, 64, 0.13)",
183
- "surface-neutral-hover": "rgba(66, 71, 79, 1)",
184
- "surface-neutral-selected": "rgba(35, 38, 42, 1)",
185
- "surface-neutral-active": "rgba(35, 38, 42, 1)",
186
- "surface-neutral": "rgba(82, 89, 98, 1)",
187
- "surface-success-subtle-hover": "rgba(153, 222, 173, 1)",
188
- "surface-success-subtle": "rgba(204, 241, 214, 1)",
189
- "surface-success-moderate": "rgba(153, 222, 173, 1)",
190
- "surface-success": "rgba(6, 137, 58, 1)",
191
- "surface-success-hover": "rgba(0, 124, 46, 1)",
192
- "surface-danger-subtle-hover": "rgba(246, 130, 130, 1)",
193
- "surface-danger-subtle": "rgba(255, 194, 194, 1)",
194
- "surface-danger-moderate": "rgba(246, 130, 130, 1)",
195
- "surface-danger-hover": "rgba(173, 0, 0, 1)",
196
- "surface-danger-active": "rgba(140, 0, 0, 1)",
197
- "surface-danger": "rgba(195, 0, 0, 1)",
198
- "surface-warning-subtle-hover": "rgba(255, 215, 153, 1)",
199
- "surface-warning-subtle": "rgba(255, 236, 204, 1)",
200
- "surface-warning-moderate": "rgba(255, 215, 153, 1)",
201
- "surface-warning": "rgba(255, 145, 0, 1)",
202
- "surface-info-subtle-hover": "rgba(181, 241, 255, 1)",
203
- "surface-info-subtle": "rgba(216, 249, 255, 1)",
204
- "surface-info-moderate": "rgba(181, 241, 255, 1)",
205
- "surface-info": "rgba(102, 203, 236, 1)",
206
- "surface-alt-1-subtle": "rgba(224, 216, 233, 1)",
207
- "surface-alt-1-moderate": "rgba(192, 178, 210, 1)",
208
- "surface-alt-1": "rgba(130, 105, 162, 1)",
209
- "surface-alt-2-subtle": "rgba(249, 252, 204, 1)",
210
- "surface-alt-2-moderate": "rgba(236, 243, 153, 1)",
211
- "surface-alt-2": "rgba(193, 203, 51, 1)",
212
- "surface-alt-3-subtle": "rgba(204, 226, 240, 1)",
213
- "surface-alt-3-moderate": "rgba(153, 196, 221, 1)",
214
- "surface-alt-3-strong": "rgba(0, 52, 83, 1)",
215
- "surface-alt-3": "rgba(0, 91, 130, 1)",
216
- "icon-default": "rgba(35, 38, 42, 1)",
217
- "icon-subtle": "rgba(1, 11, 24, 0.68)",
218
- "icon-action-selected": "rgba(0, 69, 156, 1)",
219
- "icon-action-on-action-subtle": "rgba(0, 86, 180, 1)",
220
- "icon-action": "rgba(0, 103, 197, 1)",
221
- "icon-success": "rgba(6, 137, 58, 1)",
222
- "icon-danger": "rgba(195, 0, 0, 1)",
223
- "icon-warning": "rgba(199, 115, 0, 1)",
224
- "icon-info": "rgba(35, 107, 125, 1)",
225
- "icon-alt-1": "rgba(99, 70, 137, 1)",
226
- "icon-alt-2": "rgba(127, 137, 0, 1)",
227
- "icon-alt-3": "rgba(0, 91, 130, 1)",
228
- "icon-on-neutral": "rgba(255, 255, 255, 1)",
229
- "icon-on-inverted": "rgba(255, 255, 255, 1)",
230
- "icon-on-action": "rgba(255, 255, 255, 1)",
231
- "icon-on-success": "rgba(255, 255, 255, 1)",
232
- "icon-on-danger": "rgba(255, 255, 255, 1)",
233
- "icon-on-warning": "rgba(35, 38, 42, 1)",
234
- "icon-on-info": "rgba(35, 38, 42, 1)"
234
+ "purple-900": "rgba(31, 20, 47, 1)"
235
235
  },
236
236
  "screen": {
237
237
  "sm": "480px",
@@ -269,13 +269,13 @@ module.exports = {
269
269
  "tooltip": 3000
270
270
  },
271
271
  "boxShadow": {
272
+ "focus": "0 0 0 3px rgba(0, 52, 125, 1)",
273
+ "focus-inverted": "0 0 0 3px rgba(153, 195, 255, 1)",
272
274
  "xsmall": "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)",
273
275
  "small": "0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18)",
274
276
  "medium": "0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15)",
275
277
  "large": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12)",
276
- "xlarge": "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)",
277
- "focus-inverted": "0 0 0 3px rgba(153, 195, 255, 1)",
278
- "focus": "0 0 0 3px rgba(0, 52, 125, 1)"
278
+ "xlarge": "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)"
279
279
  },
280
280
  "fontWeight": {
281
281
  "bold": "600",