@navikt/ds-tokens 7.21.1 → 7.23.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 (18) hide show
  1. package/dist/darkside/tokens-cjs.js +1125 -277
  2. package/dist/darkside/tokens.css +824 -819
  3. package/dist/darkside/tokens.d.ts +865 -17
  4. package/dist/darkside/tokens.js +865 -17
  5. package/dist/darkside/tokens.less +865 -17
  6. package/dist/darkside/tokens.scss +865 -17
  7. package/dist/tokens-cjs.js +336 -326
  8. package/dist/tokens.css +329 -324
  9. package/dist/tokens.d.ts +331 -326
  10. package/dist/tokens.js +17 -6
  11. package/dist/tokens.less +5 -0
  12. package/dist/tokens.scss +5 -0
  13. package/docs.json +6 -1
  14. package/internal-types.ts +88 -0
  15. package/package.json +4 -4
  16. package/src/future-border.json +11 -0
  17. package/token_docs.js +277 -433
  18. package/types.ts +139 -123
package/types.ts CHANGED
@@ -1,98 +1,124 @@
1
- export type ColorTheme = "light" | "dark";
2
-
3
- export const ColorRolesList = [
4
- "neutral",
5
- "accent",
6
- "success",
7
- "warning",
8
- "danger",
9
- "info",
10
- "brand-magenta",
11
- "brand-beige",
12
- "brand-blue",
13
- "meta-purple",
14
- "meta-lime",
15
- ] as const;
16
-
17
- export type GlobalColorRoles = (typeof ColorRolesList)[number];
18
- export type SemanticColorRoles = GlobalColorRoles;
19
-
20
- export type GlobalColorScale =
21
- | "100"
22
- | "200"
23
- | "300"
24
- | "400"
25
- | "500"
26
- | "600"
27
- | "700"
28
- | "800"
29
- | "900"
30
- | "1000"
31
- | "000"
32
- | "100A"
33
- | "200A"
34
- | "300A"
35
- | "400A";
36
-
37
- export type GlobalColorKeys =
38
- | `${Extract<GlobalColorRoles, "neutral">}-${Extract<
39
- GlobalColorScale,
40
- "000"
41
- >}`
42
- | `${GlobalColorRoles}-${Exclude<GlobalColorScale, "000">}`;
43
-
44
- /* Semantic tokens */
45
-
46
- export type StaticDefaultBgKeys =
1
+ /* --------------------------------- Themes --------------------------------- */
2
+ type AkselColorTheme = "light" | "dark";
3
+
4
+ /* ------------------------------ Main colors ----------------------------- */
5
+ type AkselMainColorRole = "neutral" | "accent";
6
+
7
+ /* ------------------------------ Status colors ----------------------------- */
8
+ type AkselStatusColorRole = "info" | "success" | "warning" | "danger";
9
+
10
+ /* ------------------------------ Brand colors ------------------------------ */
11
+ type AkselBrandColorRole = "brand-magenta" | "brand-beige" | "brand-blue";
12
+
13
+ /* ------------------------------ Meta colors ------------------------------ */
14
+ type AkselMetaColorRole = "meta-purple" | "meta-lime";
15
+
16
+ /* ------------------------------- All colors ------------------------------- */
17
+ type AkselColorRole =
18
+ | AkselMainColorRole
19
+ | AkselStatusColorRole
20
+ | AkselBrandColorRole
21
+ | AkselMetaColorRole;
22
+
23
+ export type {
24
+ AkselColorTheme,
25
+ AkselColorRole,
26
+ AkselMainColorRole,
27
+ AkselStatusColorRole,
28
+ AkselBrandColorRole,
29
+ AkselMetaColorRole,
30
+ };
31
+
32
+ /* --------------------------- Backgrounds tokens --------------------------- */
33
+ type AkselRootBackgroundToken =
47
34
  | "default"
48
35
  | "input"
49
36
  | "raised"
50
37
  | "sunken"
51
38
  | "overlay";
52
39
 
53
- export type StaticBgKeys =
54
- | `${SemanticColorRoles}-soft`
55
- | `${SemanticColorRoles}-softA`
56
- | `${SemanticColorRoles}-moderate`
57
- | `${SemanticColorRoles}-moderateA`
58
- | `${SemanticColorRoles}-strong`;
59
-
60
- export type StatefulBgKeys =
61
- | `${SemanticColorRoles}-moderate-hover`
62
- | `${SemanticColorRoles}-moderate-hoverA`
63
- | `${SemanticColorRoles}-moderate-pressed`
64
- | `${SemanticColorRoles}-moderate-pressedA`
65
- | `${SemanticColorRoles}-strong-hover`
66
- | `${SemanticColorRoles}-strong-pressed`;
67
-
68
- export type DefaultTextColorKeys = "logo";
69
-
70
- export type TextColorKeys =
71
- | SemanticColorRoles
72
- | `${SemanticColorRoles}-subtle`
73
- | `${SemanticColorRoles}-icon`
74
- | `${SemanticColorRoles}-contrast`;
75
-
76
- export type BorderColorKeys = "focus";
77
-
78
- export type BorderColorWithRoleKeys =
79
- | SemanticColorRoles
80
- | `${SemanticColorRoles}-subtle`
81
- | `${SemanticColorRoles}-subtleA`
82
- | `${SemanticColorRoles}-strong`;
83
-
84
- export const spaceInPixels = [
85
- 0, 1, 2, 4, 6, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 96,
86
- 128,
87
- ] as const;
88
-
89
- export type SpaceKeys = `space-${(typeof spaceInPixels)[number]}`;
90
-
91
- export type ShadowKeys = "dialog";
92
-
93
- export type BorderRadiusKeys = "small" | "medium" | "large" | "xlarge" | "full";
94
-
95
- export type BreakPointKeys =
40
+ type AkselColoredStatelessBackgroundToken =
41
+ | `${AkselColorRole}-soft`
42
+ | `${AkselColorRole}-softA`
43
+ | `${AkselColorRole}-moderate`
44
+ | `${AkselColorRole}-moderateA`
45
+ | `${AkselColorRole}-strong`;
46
+
47
+ type AkselColoredStatefulBackgroundToken =
48
+ | `${AkselColorRole}-moderate-hover`
49
+ | `${AkselColorRole}-moderate-hoverA`
50
+ | `${AkselColorRole}-moderate-pressed`
51
+ | `${AkselColorRole}-moderate-pressedA`
52
+ | `${AkselColorRole}-strong-hover`
53
+ | `${AkselColorRole}-strong-pressed`;
54
+
55
+ export type {
56
+ AkselRootBackgroundToken,
57
+ AkselColoredStatelessBackgroundToken,
58
+ AkselColoredStatefulBackgroundToken,
59
+ };
60
+
61
+ /* ------------------------------- Text tokens ------------------------------ */
62
+ type AkselRootTextToken = "logo";
63
+
64
+ type AkselColoredTextToken =
65
+ | AkselColoredStatefulBackgroundToken
66
+ | `${AkselColoredStatefulBackgroundToken}-subtle`
67
+ | `${AkselColoredStatefulBackgroundToken}-decoration`
68
+ | `${AkselColoredStatefulBackgroundToken}-contrast`;
69
+
70
+ export type { AkselRootTextToken, AkselColoredTextToken };
71
+
72
+ /* ------------------------------ Border tokens ----------------------------- */
73
+ type AkselRootBorderToken = "focus";
74
+
75
+ type AkselColoredBorderToken =
76
+ | AkselColorRole
77
+ | `${AkselColorRole}-subtle`
78
+ | `${AkselColorRole}-subtleA`
79
+ | `${AkselColorRole}-strong`;
80
+
81
+ export type { AkselRootBorderToken, AkselColoredBorderToken };
82
+
83
+ /* ------------------------------ Space tokens ------------------------------ */
84
+ type AkselSpaceToken =
85
+ | "space-0"
86
+ | "space-1"
87
+ | "space-2"
88
+ | "space-4"
89
+ | "space-6"
90
+ | "space-8"
91
+ | "space-12"
92
+ | "space-16"
93
+ | "space-20"
94
+ | "space-24"
95
+ | "space-28"
96
+ | "space-32"
97
+ | "space-36"
98
+ | "space-40"
99
+ | "space-44"
100
+ | "space-48"
101
+ | "space-56"
102
+ | "space-64"
103
+ | "space-72"
104
+ | "space-80"
105
+ | "space-96"
106
+ | "space-128";
107
+
108
+ export type { AkselSpaceToken };
109
+
110
+ /* ------------------------------ Shadow tokens ----------------------------- */
111
+ type AkselShadowToken = "dialog";
112
+
113
+ export type { AkselShadowToken };
114
+
115
+ /* ------------------------------ Border Radius tokens --------------------- */
116
+ type AkselBorderRadiusToken = "2" | "4" | "8" | "12" | "full";
117
+
118
+ export type { AkselBorderRadiusToken };
119
+
120
+ /* ------------------------------ Breakpoints tokens ------------------------ */
121
+ type AkselBreakpointToken =
96
122
  | "xs"
97
123
  | "sm"
98
124
  | "sm-down"
@@ -105,45 +131,26 @@ export type BreakPointKeys =
105
131
  | "2xl"
106
132
  | "2xl-down";
107
133
 
108
- /* Typo-tokens */
109
- export type FontFamilyKeys = "family";
110
-
111
- export type FontSizeKeys =
112
- | "size-heading-2xlarge"
113
- | "size-heading-xlarge"
114
- | "size-heading-large"
115
- | "size-heading-medium"
116
- | "size-heading-small"
117
- | "size-heading-xsmall"
118
- | "size-xlarge"
119
- | "size-large"
120
- | "size-medium"
121
- | "size-small";
122
-
123
- export type FontLineHeightKeys =
124
- | "line-height-heading-2xlarge"
125
- | "line-height-heading-xlarge"
126
- | "line-height-heading-large"
127
- | "line-height-heading-medium"
128
- | "line-height-heading-small"
129
- | "line-height-heading-xsmall"
130
- | "line-height-xlarge"
131
- | "line-height-large"
132
- | "line-height-medium";
133
-
134
- export type FontWeightKeys = "weight-bold" | "weight-regular";
135
-
136
- /* Legacy tokens */
137
- export type LegacyShadowKeys =
134
+ export type { AkselBreakpointToken };
135
+
136
+ /* ------------------------------ Legacy tokens ----------------------------- */
137
+ type AkselLegacyBorderRadiusToken =
138
+ | "small"
139
+ | "medium"
140
+ | "large"
141
+ | "xlarge"
142
+ | "full";
143
+
144
+ type AkselLegacyShadowToken =
138
145
  | "xsmall"
139
146
  | "small"
140
147
  | "medium"
141
148
  | "large"
142
149
  | "xlarge";
143
150
 
144
- export type LegacyBgColorKeys = "bg-default" | "bg-subtle";
151
+ type AkselLegacyBackgroundColorToken = "bg-default" | "bg-subtle";
145
152
 
146
- export type LegacySurfaceColorKeys =
153
+ type AkselLegacySurfaceColorToken =
147
154
  | "surface-default"
148
155
  | "surface-selected"
149
156
  | "surface-subtle"
@@ -180,7 +187,7 @@ export type LegacySurfaceColorKeys =
180
187
  | "surface-alt-3-strong"
181
188
  | "surface-alt-3";
182
189
 
183
- export type LegacyBorderColorKeys =
190
+ type AkselLegacyBorderColorToken =
184
191
  | "border-default"
185
192
  | "border-strong"
186
193
  | "border-divider"
@@ -201,7 +208,7 @@ export type LegacyBorderColorKeys =
201
208
  | "border-alt-2"
202
209
  | "border-alt-3";
203
210
 
204
- export type LegacySpacingKeys =
211
+ type AkselLegacySpacingToken =
205
212
  | "0"
206
213
  | "05"
207
214
  | "1"
@@ -223,3 +230,12 @@ export type LegacySpacingKeys =
223
230
  | "20"
224
231
  | "24"
225
232
  | "32";
233
+
234
+ export type {
235
+ AkselLegacyBorderRadiusToken,
236
+ AkselLegacyShadowToken,
237
+ AkselLegacyBackgroundColorToken,
238
+ AkselLegacySurfaceColorToken,
239
+ AkselLegacyBorderColorToken,
240
+ AkselLegacySpacingToken,
241
+ };