@navikt/ds-tokens 7.8.0 → 7.9.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.
- package/dist/darkside/dark-tokens.css +183 -182
- package/dist/darkside/light-tokens.css +182 -181
- package/dist/darkside/static/tokens-cjs.js +484 -0
- package/dist/darkside/static/tokens.d.ts +482 -0
- package/dist/darkside/static/tokens.js +482 -0
- package/dist/darkside/static/tokens.less +475 -0
- package/dist/darkside/static/tokens.scss +475 -0
- package/dist/darkside/tokens-cjs.js +188 -184
- package/dist/darkside/tokens.css +366 -363
- package/dist/darkside/tokens.d.ts +188 -184
- package/dist/darkside/tokens.js +188 -184
- package/dist/darkside/tokens.less +482 -0
- package/dist/darkside/tokens.scss +482 -0
- package/dist/tokens.css +1 -1
- package/package.json +31 -7
- package/types.ts +222 -0
package/types.ts
ADDED
|
@@ -0,0 +1,222 @@
|
|
|
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 ColorRoles = (typeof ColorRolesList)[number];
|
|
18
|
+
|
|
19
|
+
export type GlobalColorScale =
|
|
20
|
+
| "100"
|
|
21
|
+
| "200"
|
|
22
|
+
| "300"
|
|
23
|
+
| "400"
|
|
24
|
+
| "500"
|
|
25
|
+
| "600"
|
|
26
|
+
| "700"
|
|
27
|
+
| "800"
|
|
28
|
+
| "900"
|
|
29
|
+
| "1000"
|
|
30
|
+
| "000"
|
|
31
|
+
| "100A"
|
|
32
|
+
| "200A"
|
|
33
|
+
| "300A"
|
|
34
|
+
| "400A";
|
|
35
|
+
|
|
36
|
+
export type GlobalColorKeys =
|
|
37
|
+
| `${Extract<ColorRoles, "neutral">}-${Extract<GlobalColorScale, "000">}`
|
|
38
|
+
| `${ColorRoles}-${Exclude<GlobalColorScale, "000">}`;
|
|
39
|
+
|
|
40
|
+
/* Semantic tokens */
|
|
41
|
+
|
|
42
|
+
export type DefaultBgKeys =
|
|
43
|
+
| "default"
|
|
44
|
+
| "input"
|
|
45
|
+
| "raised"
|
|
46
|
+
| "sunken"
|
|
47
|
+
| "overlay";
|
|
48
|
+
|
|
49
|
+
export type StaticBgKeys =
|
|
50
|
+
| ColorRoles
|
|
51
|
+
| `${ColorRoles}-moderate`
|
|
52
|
+
| `${ColorRoles}-moderateA`
|
|
53
|
+
| `${ColorRoles}-strong`
|
|
54
|
+
| `${ColorRoles}-raised`;
|
|
55
|
+
|
|
56
|
+
export type StatefulBgKeys =
|
|
57
|
+
| `${ColorRoles}-hover`
|
|
58
|
+
| `${ColorRoles}-hoverA`
|
|
59
|
+
| `${ColorRoles}-moderate-hover`
|
|
60
|
+
| `${ColorRoles}-moderate-hoverA`
|
|
61
|
+
| `${ColorRoles}-moderate-pressed`
|
|
62
|
+
| `${ColorRoles}-moderate-pressedA`
|
|
63
|
+
| `${ColorRoles}-strong-hover`
|
|
64
|
+
| `${ColorRoles}-strong-pressed`
|
|
65
|
+
| `${ColorRoles}-raised-hover`;
|
|
66
|
+
|
|
67
|
+
export type DefaultTextColorKeys = "default" | "subtle" | "icon" | "logo";
|
|
68
|
+
|
|
69
|
+
export type TextColorKeys =
|
|
70
|
+
| ColorRoles
|
|
71
|
+
| `${ColorRoles}-strong`
|
|
72
|
+
| `${ColorRoles}-icon`
|
|
73
|
+
| `${ColorRoles}-contrast`;
|
|
74
|
+
|
|
75
|
+
export type BorderColorKeys =
|
|
76
|
+
| "default"
|
|
77
|
+
| "subtle"
|
|
78
|
+
| "subtleA"
|
|
79
|
+
| "strong"
|
|
80
|
+
| "focus";
|
|
81
|
+
|
|
82
|
+
export type BorderColorWithRoleKeys =
|
|
83
|
+
| ColorRoles
|
|
84
|
+
| `${ColorRoles}-subtle`
|
|
85
|
+
| `${ColorRoles}-subtleA`
|
|
86
|
+
| `${ColorRoles}-strong`;
|
|
87
|
+
|
|
88
|
+
export type SpacingKeys =
|
|
89
|
+
| "0"
|
|
90
|
+
| "05"
|
|
91
|
+
| "1"
|
|
92
|
+
| "1-alt"
|
|
93
|
+
| "2"
|
|
94
|
+
| "3"
|
|
95
|
+
| "4"
|
|
96
|
+
| "5"
|
|
97
|
+
| "6"
|
|
98
|
+
| "7"
|
|
99
|
+
| "8"
|
|
100
|
+
| "9"
|
|
101
|
+
| "10"
|
|
102
|
+
| "11"
|
|
103
|
+
| "12"
|
|
104
|
+
| "14"
|
|
105
|
+
| "16"
|
|
106
|
+
| "18"
|
|
107
|
+
| "20"
|
|
108
|
+
| "24"
|
|
109
|
+
| "32";
|
|
110
|
+
|
|
111
|
+
export type ShadowKeys = "dialog";
|
|
112
|
+
|
|
113
|
+
export type BorderRadiusKeys = "small" | "medium" | "large" | "xlarge" | "full";
|
|
114
|
+
|
|
115
|
+
export type BreakPointKeys =
|
|
116
|
+
| "xs"
|
|
117
|
+
| "sm"
|
|
118
|
+
| "sm-down"
|
|
119
|
+
| "md"
|
|
120
|
+
| "md-down"
|
|
121
|
+
| "lg"
|
|
122
|
+
| "lg-down"
|
|
123
|
+
| "xl"
|
|
124
|
+
| "xl-down"
|
|
125
|
+
| "2xl"
|
|
126
|
+
| "2xl-down";
|
|
127
|
+
|
|
128
|
+
/* Typo-tokens */
|
|
129
|
+
export type FontFamilyKeys = "family";
|
|
130
|
+
|
|
131
|
+
export type FontSizeKeys =
|
|
132
|
+
| "size-heading-2xlarge"
|
|
133
|
+
| "size-heading-xlarge"
|
|
134
|
+
| "size-heading-large"
|
|
135
|
+
| "size-heading-medium"
|
|
136
|
+
| "size-heading-small"
|
|
137
|
+
| "size-heading-xsmall"
|
|
138
|
+
| "size-xlarge"
|
|
139
|
+
| "size-large"
|
|
140
|
+
| "size-medium"
|
|
141
|
+
| "size-small";
|
|
142
|
+
|
|
143
|
+
export type FontLineHeightKeys =
|
|
144
|
+
| "line-height-heading-2xlarge"
|
|
145
|
+
| "line-height-heading-xlarge"
|
|
146
|
+
| "line-height-heading-large"
|
|
147
|
+
| "line-height-heading-medium"
|
|
148
|
+
| "line-height-heading-small"
|
|
149
|
+
| "line-height-heading-xsmall"
|
|
150
|
+
| "line-height-xlarge"
|
|
151
|
+
| "line-height-large"
|
|
152
|
+
| "line-height-medium";
|
|
153
|
+
|
|
154
|
+
export type FontWeightKeys = "weight-bold" | "weight-regular";
|
|
155
|
+
|
|
156
|
+
/* Legacy tokens */
|
|
157
|
+
export type LegacyShadowKeys =
|
|
158
|
+
| "xsmall"
|
|
159
|
+
| "small"
|
|
160
|
+
| "medium"
|
|
161
|
+
| "large"
|
|
162
|
+
| "xlarge";
|
|
163
|
+
|
|
164
|
+
export type LegacyBgColorKeys = "bg-default" | "bg-subtle";
|
|
165
|
+
|
|
166
|
+
export type LegacySurfaceColorKeys =
|
|
167
|
+
| "surface-default"
|
|
168
|
+
| "surface-selected"
|
|
169
|
+
| "surface-subtle"
|
|
170
|
+
| "surface-transparent"
|
|
171
|
+
| "surface-backdrop"
|
|
172
|
+
| "surface-inverted"
|
|
173
|
+
| "surface-action-subtle"
|
|
174
|
+
| "surface-action-selected"
|
|
175
|
+
| "surface-action"
|
|
176
|
+
| "surface-neutral-subtle"
|
|
177
|
+
| "surface-neutral-moderate"
|
|
178
|
+
| "surface-neutral-selected"
|
|
179
|
+
| "surface-neutral"
|
|
180
|
+
| "surface-success-subtle"
|
|
181
|
+
| "surface-success-moderate"
|
|
182
|
+
| "surface-success"
|
|
183
|
+
| "surface-danger-subtle"
|
|
184
|
+
| "surface-danger-moderate"
|
|
185
|
+
| "surface-danger"
|
|
186
|
+
| "surface-warning-subtle"
|
|
187
|
+
| "surface-warning-moderate"
|
|
188
|
+
| "surface-warning"
|
|
189
|
+
| "surface-info-subtle"
|
|
190
|
+
| "surface-info-moderate"
|
|
191
|
+
| "surface-info"
|
|
192
|
+
| "surface-alt-1-subtle"
|
|
193
|
+
| "surface-alt-1-moderate"
|
|
194
|
+
| "surface-alt-1"
|
|
195
|
+
| "surface-alt-2-subtle"
|
|
196
|
+
| "surface-alt-2-moderate"
|
|
197
|
+
| "surface-alt-2"
|
|
198
|
+
| "surface-alt-3-subtle"
|
|
199
|
+
| "surface-alt-3-moderate"
|
|
200
|
+
| "surface-alt-3-strong"
|
|
201
|
+
| "surface-alt-3";
|
|
202
|
+
|
|
203
|
+
export type LegacyBorderColorKeys =
|
|
204
|
+
| "border-default"
|
|
205
|
+
| "border-strong"
|
|
206
|
+
| "border-divider"
|
|
207
|
+
| "border-subtle"
|
|
208
|
+
| "border-action-selected"
|
|
209
|
+
| "border-action-hover"
|
|
210
|
+
| "border-action"
|
|
211
|
+
| "border-selected"
|
|
212
|
+
| "border-success"
|
|
213
|
+
| "border-danger"
|
|
214
|
+
| "border-warning"
|
|
215
|
+
| "border-info"
|
|
216
|
+
| "border-focus-on-inverted"
|
|
217
|
+
| "border-focus"
|
|
218
|
+
| "border-on-inverted"
|
|
219
|
+
| "border-on-inverted-subtle"
|
|
220
|
+
| "border-alt-1"
|
|
221
|
+
| "border-alt-2"
|
|
222
|
+
| "border-alt-3";
|