@navikt/ds-tokens 7.22.0 → 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 (14) hide show
  1. package/dist/darkside/tokens-cjs.js +11 -11
  2. package/dist/darkside/tokens.css +825 -825
  3. package/dist/darkside/tokens.d.ts +11 -11
  4. package/dist/darkside/tokens.js +11 -11
  5. package/dist/darkside/tokens.less +11 -11
  6. package/dist/darkside/tokens.scss +11 -11
  7. package/dist/tokens-cjs.js +336 -331
  8. package/dist/tokens.css +329 -329
  9. package/dist/tokens.d.ts +331 -331
  10. package/dist/tokens.js +12 -6
  11. package/internal-types.ts +88 -0
  12. package/package.json +3 -2
  13. package/token_docs.js +40 -45
  14. package/types.ts +133 -124
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}-decoration`
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 = "2" | "4" | "8" | "12" | "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,52 +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 LegacyBorderRadiusKeys =
134
+ export type { AkselBreakpointToken };
135
+
136
+ /* ------------------------------ Legacy tokens ----------------------------- */
137
+ type AkselLegacyBorderRadiusToken =
138
138
  | "small"
139
139
  | "medium"
140
140
  | "large"
141
141
  | "xlarge"
142
142
  | "full";
143
143
 
144
- export type LegacyShadowKeys =
144
+ type AkselLegacyShadowToken =
145
145
  | "xsmall"
146
146
  | "small"
147
147
  | "medium"
148
148
  | "large"
149
149
  | "xlarge";
150
150
 
151
- export type LegacyBgColorKeys = "bg-default" | "bg-subtle";
151
+ type AkselLegacyBackgroundColorToken = "bg-default" | "bg-subtle";
152
152
 
153
- export type LegacySurfaceColorKeys =
153
+ type AkselLegacySurfaceColorToken =
154
154
  | "surface-default"
155
155
  | "surface-selected"
156
156
  | "surface-subtle"
@@ -187,7 +187,7 @@ export type LegacySurfaceColorKeys =
187
187
  | "surface-alt-3-strong"
188
188
  | "surface-alt-3";
189
189
 
190
- export type LegacyBorderColorKeys =
190
+ type AkselLegacyBorderColorToken =
191
191
  | "border-default"
192
192
  | "border-strong"
193
193
  | "border-divider"
@@ -208,7 +208,7 @@ export type LegacyBorderColorKeys =
208
208
  | "border-alt-2"
209
209
  | "border-alt-3";
210
210
 
211
- export type LegacySpacingKeys =
211
+ type AkselLegacySpacingToken =
212
212
  | "0"
213
213
  | "05"
214
214
  | "1"
@@ -230,3 +230,12 @@ export type LegacySpacingKeys =
230
230
  | "20"
231
231
  | "24"
232
232
  | "32";
233
+
234
+ export type {
235
+ AkselLegacyBorderRadiusToken,
236
+ AkselLegacyShadowToken,
237
+ AkselLegacyBackgroundColorToken,
238
+ AkselLegacySurfaceColorToken,
239
+ AkselLegacyBorderColorToken,
240
+ AkselLegacySpacingToken,
241
+ };