@navikt/ds-tokens 5.18.2 → 6.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 (12) hide show
  1. package/dist/tokens-cjs.js +6 -2
  2. package/dist/tokens.css +6 -2
  3. package/dist/tokens.d.ts +6 -2
  4. package/dist/tokens.js +6 -2
  5. package/dist/tokens.less +6 -2
  6. package/dist/tokens.scss +6 -2
  7. package/docs.json +13 -1
  8. package/package.json +1 -1
  9. package/src/colors-border.json +3 -0
  10. package/src/colors-icon.json +3 -0
  11. package/src/colors-text.json +3 -0
  12. package/src/index.js +2 -1
package/dist/tokens-cjs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 19 Feb 2024 09:12:42 GMT
3
+ * Generated on Mon, 19 Feb 2024 14:06:51 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -13,6 +13,8 @@ module.exports = {
13
13
  "ABreakpointLgDown": "1023px",
14
14
  "ABreakpointXl": "1280px",
15
15
  "ABreakpointXlDown": "1279px",
16
+ "ABreakpoint2xl": "1440px",
17
+ "ABreakpoint2xlDown": "1439px",
16
18
  "ATextWidthMax": "576px",
17
19
  "AFontFamily": "'Source Sans Pro', Arial, sans-serif",
18
20
  "AFontLineHeightHeading2xlarge": "3.25rem",
@@ -36,7 +38,6 @@ module.exports = {
36
38
  "AFontSizeSmall": "0.875rem",
37
39
  "AFontWeightBold": "600",
38
40
  "AFontWeightRegular": "400",
39
- "AZIndexModal": 2000,
40
41
  "AZIndexPopover": 1000,
41
42
  "AZIndexFocus": 10,
42
43
  "AZIndexTooltip": 3000,
@@ -53,6 +54,7 @@ module.exports = {
53
54
  "ABorderDivider": "rgba(7, 26, 54, 0.21)",
54
55
  "ABorderSubtle": "rgba(7, 26, 54, 0.21)",
55
56
  "ABorderActionSelected": "rgba(0, 69, 156, 1)",
57
+ "ABorderActionHover": "rgba(0, 86, 180, 1)",
56
58
  "ABorderAction": "rgba(0, 103, 197, 1)",
57
59
  "ABorderSelected": "rgba(0, 103, 197, 1)",
58
60
  "ABorderSuccess": "rgba(6, 137, 58, 1)",
@@ -69,6 +71,7 @@ module.exports = {
69
71
  "AIconDefault": "rgba(35, 38, 42, 1)",
70
72
  "AIconSubtle": "rgba(1, 11, 24, 0.68)",
71
73
  "AIconActionSelected": "rgba(0, 69, 156, 1)",
74
+ "AIconActionHover": "rgba(0, 86, 180, 1)",
72
75
  "AIconActionOnActionSubtle": "rgba(0, 86, 180, 1)",
73
76
  "AIconAction": "rgba(0, 103, 197, 1)",
74
77
  "AIconSuccess": "rgba(6, 137, 58, 1)",
@@ -143,6 +146,7 @@ module.exports = {
143
146
  "ATextVisited": "rgba(99, 70, 137, 1)",
144
147
  "ATextDanger": "rgba(195, 0, 0, 1)",
145
148
  "ATextActionSelected": "rgba(0, 69, 156, 1)",
149
+ "ATextActionHover": "rgba(0, 86, 180, 1)",
146
150
  "ATextActionOnActionSubtle": "rgba(0, 86, 180, 1)",
147
151
  "ATextAction": "rgba(0, 103, 197, 1)",
148
152
  "ATextOnInverted": "rgba(255, 255, 255, 1)",
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 19 Feb 2024 09:12:42 GMT
3
+ * Generated on Mon, 19 Feb 2024 14:06:51 GMT
4
4
  */
5
5
 
6
6
  :root, :host {
@@ -141,7 +141,6 @@
141
141
  --a-z-index-tooltip: 3000;
142
142
  --a-z-index-focus: 10;
143
143
  --a-z-index-popover: 1000;
144
- --a-z-index-modal: 2000;
145
144
  --a-font-weight-regular: 400;
146
145
  --a-font-weight-bold: 600;
147
146
  --a-font-size-small: 0.875rem;
@@ -165,6 +164,8 @@
165
164
  --a-font-line-height-heading-2xlarge: 3.25rem;
166
165
  --a-font-family: 'Source Sans Pro', Arial, sans-serif;
167
166
  --a-text-width-max: 576px;
167
+ --a-breakpoint-2xl-down: 1439px;
168
+ --a-breakpoint-2xl: 1440px;
168
169
  --a-breakpoint-xl-down: 1279px;
169
170
  --a-breakpoint-xl: 1280px;
170
171
  --a-breakpoint-lg-down: 1023px;
@@ -204,6 +205,7 @@
204
205
  --a-text-on-inverted: var(--a-white);
205
206
  --a-text-action: var(--a-blue-500);
206
207
  --a-text-action-on-action-subtle: var(--a-blue-600);
208
+ --a-text-action-hover: var(--a-blue-600);
207
209
  --a-text-action-selected: var(--a-blue-700);
208
210
  --a-text-danger: var(--a-red-500);
209
211
  --a-text-visited: var(--a-purple-500);
@@ -278,6 +280,7 @@
278
280
  --a-icon-success: var(--a-green-500);
279
281
  --a-icon-action: var(--a-blue-500);
280
282
  --a-icon-action-on-action-subtle: var(--a-blue-600);
283
+ --a-icon-action-hover: var(--a-blue-600);
281
284
  --a-icon-action-selected: var(--a-blue-700);
282
285
  --a-icon-subtle: var(--a-grayalpha-700);
283
286
  --a-icon-default: var(--a-gray-900);
@@ -294,6 +297,7 @@
294
297
  --a-border-success: var(--a-green-500);
295
298
  --a-border-selected: var(--a-blue-500);
296
299
  --a-border-action: var(--a-blue-500);
300
+ --a-border-action-hover: var(--a-blue-600);
297
301
  --a-border-action-selected: var(--a-blue-700);
298
302
  --a-border-subtle: var(--a-grayalpha-300);
299
303
  --a-border-divider: var(--a-grayalpha-300);
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 19 Feb 2024 09:12:42 GMT
3
+ * Generated on Mon, 19 Feb 2024 14:06:51 GMT
4
4
  */
5
5
 
6
6
  export const ABreakpointXs : "0";
@@ -12,6 +12,8 @@ export const ABreakpointLg : "1024px";
12
12
  export const ABreakpointLgDown : "1023px";
13
13
  export const ABreakpointXl : "1280px";
14
14
  export const ABreakpointXlDown : "1279px";
15
+ export const ABreakpoint2xl : "1440px";
16
+ export const ABreakpoint2xlDown : "1439px";
15
17
  export const ATextWidthMax : "576px";
16
18
  export const AFontFamily : "'Source Sans Pro', Arial, sans-serif";
17
19
  export const AFontLineHeightHeading2xlarge : "3.25rem";
@@ -35,7 +37,6 @@ export const AFontSizeMedium : "1rem";
35
37
  export const AFontSizeSmall : "0.875rem";
36
38
  export const AFontWeightBold : "600";
37
39
  export const AFontWeightRegular : "400";
38
- export const AZIndexModal : number;
39
40
  export const AZIndexPopover : number;
40
41
  export const AZIndexFocus : number;
41
42
  export const AZIndexTooltip : number;
@@ -52,6 +53,7 @@ export const ABorderStrong : "rgba(1, 11, 24, 0.68)";
52
53
  export const ABorderDivider : "rgba(7, 26, 54, 0.21)";
53
54
  export const ABorderSubtle : "rgba(7, 26, 54, 0.21)";
54
55
  export const ABorderActionSelected : "rgba(0, 69, 156, 1)";
56
+ export const ABorderActionHover : "rgba(0, 86, 180, 1)";
55
57
  export const ABorderAction : "rgba(0, 103, 197, 1)";
56
58
  export const ABorderSelected : "rgba(0, 103, 197, 1)";
57
59
  export const ABorderSuccess : "rgba(6, 137, 58, 1)";
@@ -68,6 +70,7 @@ export const ABorderAlt3 : "rgba(0, 91, 130, 1)";
68
70
  export const AIconDefault : "rgba(35, 38, 42, 1)";
69
71
  export const AIconSubtle : "rgba(1, 11, 24, 0.68)";
70
72
  export const AIconActionSelected : "rgba(0, 69, 156, 1)";
73
+ export const AIconActionHover : "rgba(0, 86, 180, 1)";
71
74
  export const AIconActionOnActionSubtle : "rgba(0, 86, 180, 1)";
72
75
  export const AIconAction : "rgba(0, 103, 197, 1)";
73
76
  export const AIconSuccess : "rgba(6, 137, 58, 1)";
@@ -142,6 +145,7 @@ export const ATextSubtle : "rgba(1, 11, 24, 0.68)";
142
145
  export const ATextVisited : "rgba(99, 70, 137, 1)";
143
146
  export const ATextDanger : "rgba(195, 0, 0, 1)";
144
147
  export const ATextActionSelected : "rgba(0, 69, 156, 1)";
148
+ export const ATextActionHover : "rgba(0, 86, 180, 1)";
145
149
  export const ATextActionOnActionSubtle : "rgba(0, 86, 180, 1)";
146
150
  export const ATextAction : "rgba(0, 103, 197, 1)";
147
151
  export const ATextOnInverted : "rgba(255, 255, 255, 1)";
package/dist/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 19 Feb 2024 09:12:42 GMT
3
+ * Generated on Mon, 19 Feb 2024 14:06:51 GMT
4
4
  */
5
5
 
6
6
  export const ABreakpointXs = "0";
@@ -12,6 +12,8 @@ export const ABreakpointLg = "1024px";
12
12
  export const ABreakpointLgDown = "1023px";
13
13
  export const ABreakpointXl = "1280px";
14
14
  export const ABreakpointXlDown = "1279px";
15
+ export const ABreakpoint2xl = "1440px";
16
+ export const ABreakpoint2xlDown = "1439px";
15
17
  export const ATextWidthMax = "576px";
16
18
  export const AFontFamily = "'Source Sans Pro', Arial, sans-serif";
17
19
  export const AFontLineHeightHeading2xlarge = "3.25rem";
@@ -35,7 +37,6 @@ export const AFontSizeMedium = "1rem";
35
37
  export const AFontSizeSmall = "0.875rem";
36
38
  export const AFontWeightBold = "600";
37
39
  export const AFontWeightRegular = "400";
38
- export const AZIndexModal = 2000;
39
40
  export const AZIndexPopover = 1000;
40
41
  export const AZIndexFocus = 10;
41
42
  export const AZIndexTooltip = 3000;
@@ -52,6 +53,7 @@ export const ABorderStrong = "rgba(1, 11, 24, 0.68)";
52
53
  export const ABorderDivider = "rgba(7, 26, 54, 0.21)";
53
54
  export const ABorderSubtle = "rgba(7, 26, 54, 0.21)";
54
55
  export const ABorderActionSelected = "rgba(0, 69, 156, 1)";
56
+ export const ABorderActionHover = "rgba(0, 86, 180, 1)";
55
57
  export const ABorderAction = "rgba(0, 103, 197, 1)";
56
58
  export const ABorderSelected = "rgba(0, 103, 197, 1)";
57
59
  export const ABorderSuccess = "rgba(6, 137, 58, 1)";
@@ -68,6 +70,7 @@ export const ABorderAlt3 = "rgba(0, 91, 130, 1)";
68
70
  export const AIconDefault = "rgba(35, 38, 42, 1)";
69
71
  export const AIconSubtle = "rgba(1, 11, 24, 0.68)";
70
72
  export const AIconActionSelected = "rgba(0, 69, 156, 1)";
73
+ export const AIconActionHover = "rgba(0, 86, 180, 1)";
71
74
  export const AIconActionOnActionSubtle = "rgba(0, 86, 180, 1)";
72
75
  export const AIconAction = "rgba(0, 103, 197, 1)";
73
76
  export const AIconSuccess = "rgba(6, 137, 58, 1)";
@@ -142,6 +145,7 @@ export const ATextSubtle = "rgba(1, 11, 24, 0.68)";
142
145
  export const ATextVisited = "rgba(99, 70, 137, 1)";
143
146
  export const ATextDanger = "rgba(195, 0, 0, 1)";
144
147
  export const ATextActionSelected = "rgba(0, 69, 156, 1)";
148
+ export const ATextActionHover = "rgba(0, 86, 180, 1)";
145
149
  export const ATextActionOnActionSubtle = "rgba(0, 86, 180, 1)";
146
150
  export const ATextAction = "rgba(0, 103, 197, 1)";
147
151
  export const ATextOnInverted = "rgba(255, 255, 255, 1)";
package/dist/tokens.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 19 Feb 2024 09:12:42 GMT
3
+ // Generated on Mon, 19 Feb 2024 14:06:51 GMT
4
4
 
5
5
  @a-breakpoint-xs: 0;
6
6
  @a-breakpoint-sm: 480px;
@@ -11,6 +11,8 @@
11
11
  @a-breakpoint-lg-down: 1023px;
12
12
  @a-breakpoint-xl: 1280px;
13
13
  @a-breakpoint-xl-down: 1279px;
14
+ @a-breakpoint-2xl: 1440px;
15
+ @a-breakpoint-2xl-down: 1439px;
14
16
  @a-text-width-max: 576px;
15
17
  @a-font-family: 'Source Sans Pro', Arial, sans-serif;
16
18
  @a-font-line-height-heading-2xlarge: 3.25rem;
@@ -34,7 +36,6 @@
34
36
  @a-font-size-small: 0.875rem;
35
37
  @a-font-weight-bold: 600;
36
38
  @a-font-weight-regular: 400;
37
- @a-z-index-modal: 2000;
38
39
  @a-z-index-popover: 1000;
39
40
  @a-z-index-focus: 10;
40
41
  @a-z-index-tooltip: 3000;
@@ -51,6 +52,7 @@
51
52
  @a-border-divider: rgba(7, 26, 54, 0.21);
52
53
  @a-border-subtle: rgba(7, 26, 54, 0.21);
53
54
  @a-border-action-selected: rgba(0, 69, 156, 1);
55
+ @a-border-action-hover: rgba(0, 86, 180, 1);
54
56
  @a-border-action: rgba(0, 103, 197, 1);
55
57
  @a-border-selected: rgba(0, 103, 197, 1);
56
58
  @a-border-success: rgba(6, 137, 58, 1);
@@ -67,6 +69,7 @@
67
69
  @a-icon-default: rgba(35, 38, 42, 1);
68
70
  @a-icon-subtle: rgba(1, 11, 24, 0.68);
69
71
  @a-icon-action-selected: rgba(0, 69, 156, 1);
72
+ @a-icon-action-hover: rgba(0, 86, 180, 1);
70
73
  @a-icon-action-on-action-subtle: rgba(0, 86, 180, 1);
71
74
  @a-icon-action: rgba(0, 103, 197, 1);
72
75
  @a-icon-success: rgba(6, 137, 58, 1);
@@ -141,6 +144,7 @@
141
144
  @a-text-visited: rgba(99, 70, 137, 1);
142
145
  @a-text-danger: rgba(195, 0, 0, 1);
143
146
  @a-text-action-selected: rgba(0, 69, 156, 1);
147
+ @a-text-action-hover: rgba(0, 86, 180, 1);
144
148
  @a-text-action-on-action-subtle: rgba(0, 86, 180, 1);
145
149
  @a-text-action: rgba(0, 103, 197, 1);
146
150
  @a-text-on-inverted: rgba(255, 255, 255, 1);
package/dist/tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 19 Feb 2024 09:12:42 GMT
3
+ // Generated on Mon, 19 Feb 2024 14:06:51 GMT
4
4
 
5
5
  $a-breakpoint-xs: 0;
6
6
  $a-breakpoint-sm: 480px;
@@ -11,6 +11,8 @@ $a-breakpoint-lg: 1024px;
11
11
  $a-breakpoint-lg-down: 1023px;
12
12
  $a-breakpoint-xl: 1280px;
13
13
  $a-breakpoint-xl-down: 1279px;
14
+ $a-breakpoint-2xl: 1440px;
15
+ $a-breakpoint-2xl-down: 1439px;
14
16
  $a-text-width-max: 576px;
15
17
  $a-font-family: 'Source Sans Pro', Arial, sans-serif;
16
18
  $a-font-line-height-heading-2xlarge: 3.25rem;
@@ -34,7 +36,6 @@ $a-font-size-medium: 1rem;
34
36
  $a-font-size-small: 0.875rem;
35
37
  $a-font-weight-bold: 600;
36
38
  $a-font-weight-regular: 400;
37
- $a-z-index-modal: 2000;
38
39
  $a-z-index-popover: 1000;
39
40
  $a-z-index-focus: 10;
40
41
  $a-z-index-tooltip: 3000;
@@ -51,6 +52,7 @@ $a-border-strong: rgba(1, 11, 24, 0.68);
51
52
  $a-border-divider: rgba(7, 26, 54, 0.21);
52
53
  $a-border-subtle: rgba(7, 26, 54, 0.21);
53
54
  $a-border-action-selected: rgba(0, 69, 156, 1);
55
+ $a-border-action-hover: rgba(0, 86, 180, 1);
54
56
  $a-border-action: rgba(0, 103, 197, 1);
55
57
  $a-border-selected: rgba(0, 103, 197, 1);
56
58
  $a-border-success: rgba(6, 137, 58, 1);
@@ -67,6 +69,7 @@ $a-border-alt-3: rgba(0, 91, 130, 1);
67
69
  $a-icon-default: rgba(35, 38, 42, 1);
68
70
  $a-icon-subtle: rgba(1, 11, 24, 0.68);
69
71
  $a-icon-action-selected: rgba(0, 69, 156, 1);
72
+ $a-icon-action-hover: rgba(0, 86, 180, 1);
70
73
  $a-icon-action-on-action-subtle: rgba(0, 86, 180, 1);
71
74
  $a-icon-action: rgba(0, 103, 197, 1);
72
75
  $a-icon-success: rgba(6, 137, 58, 1);
@@ -141,6 +144,7 @@ $a-text-subtle: rgba(1, 11, 24, 0.68);
141
144
  $a-text-visited: rgba(99, 70, 137, 1);
142
145
  $a-text-danger: rgba(195, 0, 0, 1);
143
146
  $a-text-action-selected: rgba(0, 69, 156, 1);
147
+ $a-text-action-hover: rgba(0, 86, 180, 1);
144
148
  $a-text-action-on-action-subtle: rgba(0, 86, 180, 1);
145
149
  $a-text-action: rgba(0, 103, 197, 1);
146
150
  $a-text-on-inverted: rgba(255, 255, 255, 1);
package/docs.json CHANGED
@@ -40,6 +40,16 @@
40
40
  "name": "--a-breakpoint-xl-down",
41
41
  "value": "1279px",
42
42
  "description": "@media (max-width: 1279px)"
43
+ },
44
+ {
45
+ "name": "--a-breakpoint-2xl",
46
+ "value": "1440px",
47
+ "description": "@media (min-width: 1440px)"
48
+ },
49
+ {
50
+ "name": "--a-breakpoint-2xl-down",
51
+ "value": "1439px",
52
+ "description": "@media (max-width: 1439px)"
43
53
  }
44
54
  ],
45
55
  "text-width": [{ "name": "--a-text-width-max", "value": "576px" }],
@@ -207,6 +217,7 @@
207
217
  ],
208
218
  "semantic-border-action": [
209
219
  { "name": "--a-border-action", "value": "rgba(0, 103, 197, 1)" },
220
+ { "name": "--a-border-action-hover", "value": "rgba(0, 86, 180, 1)" },
210
221
  { "name": "--a-border-action-selected", "value": "rgba(0, 69, 156, 1)" },
211
222
  { "name": "--a-border-selected", "value": "rgba(0, 103, 197, 1)" }
212
223
  ],
@@ -234,6 +245,7 @@
234
245
  { "name": "--a-text-visited", "value": "rgba(99, 70, 137, 1)" },
235
246
  { "name": "--a-text-danger", "value": "rgba(195, 0, 0, 1)" },
236
247
  { "name": "--a-text-action", "value": "rgba(0, 103, 197, 1)" },
248
+ { "name": "--a-text-action-hover", "value": "rgba(0, 86, 180, 1)" },
237
249
  { "name": "--a-text-action-selected", "value": "rgba(0, 69, 156, 1)" },
238
250
  {
239
251
  "name": "--a-text-action-on-action-subtle",
@@ -372,6 +384,7 @@
372
384
  "semantic-icon-action": [
373
385
  { "name": "--a-icon-action", "value": "rgba(0, 103, 197, 1)" },
374
386
  { "name": "--a-icon-action-selected", "value": "rgba(0, 69, 156, 1)" },
387
+ { "name": "--a-icon-action-hover", "value": "rgba(0, 86, 180, 1)" },
375
388
  {
376
389
  "name": "--a-icon-action-on-action-subtle",
377
390
  "value": "rgba(0, 86, 180, 1)"
@@ -531,7 +544,6 @@
531
544
  "z-index": [
532
545
  { "name": "--a-z-index-focus", "value": 10 },
533
546
  { "name": "--a-z-index-popover", "value": 1000 },
534
- { "name": "--a-z-index-modal", "value": 2000 },
535
547
  { "name": "--a-z-index-tooltip", "value": 3000 }
536
548
  ]
537
549
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-tokens",
3
- "version": "5.18.2",
3
+ "version": "6.0.0",
4
4
  "description": "Design-tokens for NAV designsystem",
5
5
  "author": "Aksel | NAV designsystem team",
6
6
  "keywords": [
package/src/colors-border.json CHANGED
@@ -15,6 +15,9 @@
15
15
  "border-action-selected": {
16
16
  "value": "{a.blue.700.value}"
17
17
  },
18
+ "border-action-hover": {
19
+ "value": "{a.blue.600.value}"
20
+ },
18
21
  "border-action": {
19
22
  "value": "{a.blue.500.value}"
20
23
  },
package/src/colors-icon.json CHANGED
@@ -9,6 +9,9 @@
9
9
  "icon-action-selected": {
10
10
  "value": "{a.blue.700.value}"
11
11
  },
12
+ "icon-action-hover": {
13
+ "value": "{a.blue.600.value}"
14
+ },
12
15
  "icon-action-on-action-subtle": {
13
16
  "value": "{a.blue.600.value}"
14
17
  },
package/src/colors-text.json CHANGED
@@ -15,6 +15,9 @@
15
15
  "text-action-selected": {
16
16
  "value": "{a.blue.700.value}"
17
17
  },
18
+ "text-action-hover": {
19
+ "value": "{a.blue.600.value}"
20
+ },
18
21
  "text-action-on-action-subtle": {
19
22
  "value": "{a.blue.600.value}"
20
23
  },
package/src/index.js CHANGED
@@ -13,6 +13,8 @@ module.exports = {
13
13
  "lg-down": { value: "1023px" },
14
14
  xl: { value: "1280px" },
15
15
  "xl-down": { value: "1279px" },
16
+ "2xl": { value: "1440px" },
17
+ "2xl-down": { value: "1439px" },
16
18
  },
17
19
  text: {
18
20
  width: {
@@ -56,7 +58,6 @@ module.exports = {
56
58
  },
57
59
  },
58
60
  "z-index": {
59
- modal: { value: 2000 },
60
61
  popover: { value: 1000 },
61
62
  focus: { value: 10 },
62
63
  tooltip: { value: 3000 },