@navikt/ds-tokens 4.2.0 → 4.4.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 (9) hide show
  1. package/dist/tokens-cjs.js +6 -6
  2. package/dist/tokens.css +6 -6
  3. package/dist/tokens.d.ts +1 -1
  4. package/dist/tokens.js +6 -6
  5. package/dist/tokens.less +6 -6
  6. package/dist/tokens.scss +6 -6
  7. package/docs.json +8 -5
  8. package/package.json +1 -1
  9. package/src/shadow.json +5 -5
package/dist/tokens-cjs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 21 Jun 2023 10:02:15 GMT
3
+ * Generated on Thu, 22 Jun 2023 13:26:32 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -275,11 +275,11 @@ module.exports = {
275
275
  "AIconOnDanger": "rgba(255, 255, 255, 1)",
276
276
  "AIconOnWarning": "rgba(38, 38, 38, 1)",
277
277
  "AIconOnInfo": "rgba(38, 38, 38, 1)",
278
- "AShadowXsmall": "0 1px 2px 0 rgba(0, 0, 0, 0.12)",
279
- "AShadowSmall": "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1)",
280
- "AShadowMedium": "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)",
281
- "AShadowLarge": "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)",
282
- "AShadowXlarge": "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)",
278
+ "AShadowXsmall": "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)",
279
+ "AShadowSmall": "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)",
280
+ "AShadowMedium": "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)",
281
+ "AShadowLarge": "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)",
282
+ "AShadowXlarge": "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)",
283
283
  "AShadowFocusInverted": "0 0 0 3px rgba(153, 195, 255, 1)",
284
284
  "AShadowFocus": "0 0 0 3px rgba(0, 52, 125, 1)",
285
285
  "ASpacing0": "0",
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 21 Jun 2023 10:02:14 GMT
3
+ * Generated on Thu, 22 Jun 2023 13:26:32 GMT
4
4
  */
5
5
 
6
6
  :root, :host {
@@ -24,11 +24,11 @@
24
24
  --a-spacing-2: 0.5rem;
25
25
  --a-spacing-1: 0.25rem;
26
26
  --a-spacing-0: 0;
27
- --a-shadow-xlarge: 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1);
28
- --a-shadow-large: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
29
- --a-shadow-medium: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
30
- --a-shadow-small: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
31
- --a-shadow-xsmall: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
27
+ --a-shadow-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);
28
+ --a-shadow-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);
29
+ --a-shadow-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);
30
+ --a-shadow-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);
31
+ --a-shadow-xsmall: 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20);
32
32
  --a-purple-900: rgba(31, 20, 47, 1);
33
33
  --a-purple-800: rgba(48, 31, 70, 1);
34
34
  --a-purple-700: rgba(65, 43, 93, 1);
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 21 Jun 2023 10:02:15 GMT
3
+ * Generated on Thu, 22 Jun 2023 13:26:32 GMT
4
4
  */
5
5
 
6
6
  export const ABreakpointXs : string;
package/dist/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 21 Jun 2023 10:02:15 GMT
3
+ * Generated on Thu, 22 Jun 2023 13:26:32 GMT
4
4
  */
5
5
 
6
6
  export const ABreakpointXs = "0";
@@ -274,11 +274,11 @@ export const AIconOnSuccess = "rgba(255, 255, 255, 1)";
274
274
  export const AIconOnDanger = "rgba(255, 255, 255, 1)";
275
275
  export const AIconOnWarning = "rgba(38, 38, 38, 1)";
276
276
  export const AIconOnInfo = "rgba(38, 38, 38, 1)";
277
- export const AShadowXsmall = "0 1px 2px 0 rgba(0, 0, 0, 0.12)";
278
- export const AShadowSmall = "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1)";
279
- export const AShadowMedium = "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)";
280
- export const AShadowLarge = "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)";
281
- export const AShadowXlarge = "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)";
277
+ export const AShadowXsmall = "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)";
278
+ export const AShadowSmall = "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)";
279
+ export const AShadowMedium = "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)";
280
+ export const AShadowLarge = "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)";
281
+ export const AShadowXlarge = "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)";
282
282
  export const AShadowFocusInverted = "0 0 0 3px rgba(153, 195, 255, 1)";
283
283
  export const AShadowFocus = "0 0 0 3px rgba(0, 52, 125, 1)";
284
284
  export const ASpacing0 = "0";
package/dist/tokens.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 21 Jun 2023 10:02:14 GMT
3
+ // Generated on Thu, 22 Jun 2023 13:26:32 GMT
4
4
 
5
5
  @a-breakpoint-xs: 0;
6
6
  @a-breakpoint-sm: 480px;
@@ -273,11 +273,11 @@
273
273
  @a-icon-on-danger: rgba(255, 255, 255, 1);
274
274
  @a-icon-on-warning: rgba(38, 38, 38, 1);
275
275
  @a-icon-on-info: rgba(38, 38, 38, 1);
276
- @a-shadow-xsmall: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
277
- @a-shadow-small: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
278
- @a-shadow-medium: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
279
- @a-shadow-large: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
280
- @a-shadow-xlarge: 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1);
276
+ @a-shadow-xsmall: 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20);
277
+ @a-shadow-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);
278
+ @a-shadow-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);
279
+ @a-shadow-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);
280
+ @a-shadow-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);
281
281
  @a-shadow-focus-inverted: 0 0 0 3px rgba(153, 195, 255, 1);
282
282
  @a-shadow-focus: 0 0 0 3px rgba(0, 52, 125, 1);
283
283
  @a-spacing-0: 0;
package/dist/tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 21 Jun 2023 10:02:14 GMT
3
+ // Generated on Thu, 22 Jun 2023 13:26:32 GMT
4
4
 
5
5
  $a-breakpoint-xs: 0;
6
6
  $a-breakpoint-sm: 480px;
@@ -273,11 +273,11 @@ $a-icon-on-success: rgba(255, 255, 255, 1);
273
273
  $a-icon-on-danger: rgba(255, 255, 255, 1);
274
274
  $a-icon-on-warning: rgba(38, 38, 38, 1);
275
275
  $a-icon-on-info: rgba(38, 38, 38, 1);
276
- $a-shadow-xsmall: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
277
- $a-shadow-small: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
278
- $a-shadow-medium: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
279
- $a-shadow-large: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
280
- $a-shadow-xlarge: 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1);
276
+ $a-shadow-xsmall: 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20);
277
+ $a-shadow-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);
278
+ $a-shadow-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);
279
+ $a-shadow-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);
280
+ $a-shadow-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);
281
281
  $a-shadow-focus-inverted: 0 0 0 3px rgba(153, 195, 255, 1);
282
282
  $a-shadow-focus: 0 0 0 3px rgba(0, 52, 125, 1);
283
283
  $a-spacing-0: 0;
package/docs.json CHANGED
@@ -474,22 +474,25 @@
474
474
  { "name": "--a-border-radius-full", "value": "9999px" }
475
475
  ],
476
476
  "shadow": [
477
- { "name": "--a-shadow-xsmall", "value": "0 1px 2px 0 rgba(0, 0, 0, 0.12)" },
477
+ {
478
+ "name": "--a-shadow-xsmall",
479
+ "value": "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)"
480
+ },
478
481
  {
479
482
  "name": "--a-shadow-small",
480
- "value": "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1)"
483
+ "value": "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)"
481
484
  },
482
485
  {
483
486
  "name": "--a-shadow-medium",
484
- "value": "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)"
487
+ "value": "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)"
485
488
  },
486
489
  {
487
490
  "name": "--a-shadow-large",
488
- "value": "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)"
491
+ "value": "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)"
489
492
  },
490
493
  {
491
494
  "name": "--a-shadow-xlarge",
492
- "value": "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)"
495
+ "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)"
493
496
  },
494
497
  { "name": "--a-shadow-focus", "value": "0 0 0 3px rgba(0, 52, 125, 1)" },
495
498
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-tokens",
3
- "version": "4.2.0",
3
+ "version": "4.4.0",
4
4
  "description": "Design-tokens for NAV designsystem",
5
5
  "author": "Aksel | NAV designsystem team",
6
6
  "keywords": [
package/src/shadow.json CHANGED
@@ -2,19 +2,19 @@
2
2
  "a": {
3
3
  "shadow": {
4
4
  "xsmall": {
5
- "value": "0 1px 2px 0 rgba(0, 0, 0, 0.12)"
5
+ "value": "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)"
6
6
  },
7
7
  "small": {
8
- "value": "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1)"
8
+ "value": "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)"
9
9
  },
10
10
  "medium": {
11
- "value": "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)"
11
+ "value": "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)"
12
12
  },
13
13
  "large": {
14
- "value": "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)"
14
+ "value": "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)"
15
15
  },
16
16
  "xlarge": {
17
- "value": "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)"
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
18
  },
19
19
  "focus": {
20
20
  "inverted": {