@navikt/ds-tokens 7.22.0 → 7.23.1
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/darkside/tokens-cjs.js +11 -11
- package/dist/darkside/tokens.css +825 -825
- package/dist/darkside/tokens.d.ts +11 -11
- package/dist/darkside/tokens.js +11 -11
- package/dist/darkside/tokens.less +11 -11
- package/dist/darkside/tokens.scss +11 -11
- package/dist/tokens-cjs.js +336 -331
- package/dist/tokens.css +329 -329
- package/dist/tokens.d.ts +331 -331
- package/dist/tokens.js +12 -6
- package/internal-types.ts +88 -0
- package/package.json +3 -2
- package/token_docs.js +40 -45
- package/types.ts +133 -124
package/dist/tokens.js
CHANGED
|
@@ -14,7 +14,8 @@ export const ABreakpointXlDown = "1279px";
|
|
|
14
14
|
export const ABreakpoint2xl = "1440px";
|
|
15
15
|
export const ABreakpoint2xlDown = "1439px";
|
|
16
16
|
export const ATextWidthMax = "576px";
|
|
17
|
-
export const AFontFamily =
|
|
17
|
+
export const AFontFamily =
|
|
18
|
+
"'Source Sans 3', 'Source Sans Pro', Arial, sans-serif";
|
|
18
19
|
export const AFontLineHeightHeading2xlarge = "3.25rem";
|
|
19
20
|
export const AFontLineHeightHeadingXlarge = "2.5rem";
|
|
20
21
|
export const AFontLineHeightHeadingLarge = "2.25rem";
|
|
@@ -307,11 +308,16 @@ export const APurple800 = "rgba(48, 31, 70, 1)";
|
|
|
307
308
|
export const APurple900 = "rgba(31, 20, 47, 1)";
|
|
308
309
|
export const AShadowFocus = "0 0 0 3px rgba(0, 52, 125, 1)";
|
|
309
310
|
export const AShadowFocusInverted = "0 0 0 3px rgba(153, 195, 255, 1)";
|
|
310
|
-
export const AShadowXsmall =
|
|
311
|
-
|
|
312
|
-
export const
|
|
313
|
-
|
|
314
|
-
export const
|
|
311
|
+
export const AShadowXsmall =
|
|
312
|
+
"0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)";
|
|
313
|
+
export const AShadowSmall =
|
|
314
|
+
"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)";
|
|
315
|
+
export const AShadowMedium =
|
|
316
|
+
"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)";
|
|
317
|
+
export const AShadowLarge =
|
|
318
|
+
"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)";
|
|
319
|
+
export const AShadowXlarge =
|
|
320
|
+
"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)";
|
|
315
321
|
export const ASpacing0 = "0";
|
|
316
322
|
export const ASpacing1 = "0.25rem";
|
|
317
323
|
export const ASpacing2 = "0.5rem";
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { AkselColorRole, AkselSpaceToken } from "./types";
|
|
2
|
+
|
|
3
|
+
type GlobalColorScale =
|
|
4
|
+
| "100"
|
|
5
|
+
| "200"
|
|
6
|
+
| "300"
|
|
7
|
+
| "400"
|
|
8
|
+
| "500"
|
|
9
|
+
| "600"
|
|
10
|
+
| "700"
|
|
11
|
+
| "800"
|
|
12
|
+
| "900"
|
|
13
|
+
| "1000"
|
|
14
|
+
| "000"
|
|
15
|
+
| "100A"
|
|
16
|
+
| "200A"
|
|
17
|
+
| "300A"
|
|
18
|
+
| "400A";
|
|
19
|
+
|
|
20
|
+
type GlobalColorKeys =
|
|
21
|
+
| `${Extract<AkselColorRole, "neutral">}-${Extract<GlobalColorScale, "000">}`
|
|
22
|
+
| `${AkselColorRole}-${Exclude<GlobalColorScale, "000">}`;
|
|
23
|
+
|
|
24
|
+
type ExtractNumber<T> = T extends `space-${infer N extends number}` ? N : never;
|
|
25
|
+
|
|
26
|
+
const spaceObject: Record<ExtractNumber<AkselSpaceToken>, any> = {
|
|
27
|
+
"0": "",
|
|
28
|
+
"1": "",
|
|
29
|
+
"2": "",
|
|
30
|
+
"4": "",
|
|
31
|
+
"6": "",
|
|
32
|
+
"8": "",
|
|
33
|
+
"12": "",
|
|
34
|
+
"16": "",
|
|
35
|
+
"20": "",
|
|
36
|
+
"24": "",
|
|
37
|
+
"28": "",
|
|
38
|
+
"32": "",
|
|
39
|
+
"36": "",
|
|
40
|
+
"40": "",
|
|
41
|
+
"44": "",
|
|
42
|
+
"48": "",
|
|
43
|
+
"56": "",
|
|
44
|
+
"64": "",
|
|
45
|
+
"72": "",
|
|
46
|
+
"80": "",
|
|
47
|
+
"96": "",
|
|
48
|
+
"128": "",
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const spaceInPixels = Object.keys(spaceObject).map(Number);
|
|
52
|
+
|
|
53
|
+
/* ------------------------------ Font tokens ------------------------------- */
|
|
54
|
+
type FontFamilyKeys = "family";
|
|
55
|
+
|
|
56
|
+
type FontSizeKeys =
|
|
57
|
+
| "size-heading-2xlarge"
|
|
58
|
+
| "size-heading-xlarge"
|
|
59
|
+
| "size-heading-large"
|
|
60
|
+
| "size-heading-medium"
|
|
61
|
+
| "size-heading-small"
|
|
62
|
+
| "size-heading-xsmall"
|
|
63
|
+
| "size-xlarge"
|
|
64
|
+
| "size-large"
|
|
65
|
+
| "size-medium"
|
|
66
|
+
| "size-small";
|
|
67
|
+
|
|
68
|
+
type FontLineHeightKeys =
|
|
69
|
+
| "line-height-heading-2xlarge"
|
|
70
|
+
| "line-height-heading-xlarge"
|
|
71
|
+
| "line-height-heading-large"
|
|
72
|
+
| "line-height-heading-medium"
|
|
73
|
+
| "line-height-heading-small"
|
|
74
|
+
| "line-height-heading-xsmall"
|
|
75
|
+
| "line-height-xlarge"
|
|
76
|
+
| "line-height-large"
|
|
77
|
+
| "line-height-medium";
|
|
78
|
+
|
|
79
|
+
export type FontWeightKeys = "weight-bold" | "weight-regular";
|
|
80
|
+
|
|
81
|
+
export { spaceInPixels };
|
|
82
|
+
export type {
|
|
83
|
+
GlobalColorScale,
|
|
84
|
+
GlobalColorKeys,
|
|
85
|
+
FontFamilyKeys,
|
|
86
|
+
FontSizeKeys,
|
|
87
|
+
FontLineHeightKeys,
|
|
88
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-tokens",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.23.1",
|
|
4
4
|
"description": "Design-tokens for Nav designsystem",
|
|
5
5
|
"author": "Aksel | Nav designsystem team",
|
|
6
6
|
"keywords": [
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
"/dist",
|
|
15
15
|
"/src",
|
|
16
16
|
"types.ts",
|
|
17
|
+
"internal-types.ts",
|
|
17
18
|
"docs.json",
|
|
18
19
|
"token_docs.js",
|
|
19
20
|
"!/dist/darkside",
|
|
@@ -36,7 +37,7 @@
|
|
|
36
37
|
"devDependencies": {
|
|
37
38
|
"@figma/plugin-typings": "^1.100.2",
|
|
38
39
|
"colorjs.io": "^0.5.2",
|
|
39
|
-
"esbuild": "^0.25.
|
|
40
|
+
"esbuild": "^0.25.5",
|
|
40
41
|
"lightningcss": "^1.29.3",
|
|
41
42
|
"lodash": "^4.17.21",
|
|
42
43
|
"style-dictionary": "^4.1.1",
|