@navikt/ds-tokens 7.10.0 → 7.12.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 (16) hide show
  1. package/dist/darkside/dark-tokens.css +199 -210
  2. package/dist/darkside/light-tokens.css +200 -211
  3. package/dist/darkside/tokens-cjs.js +194 -205
  4. package/dist/darkside/tokens.css +400 -422
  5. package/dist/darkside/tokens.d.ts +194 -205
  6. package/dist/darkside/tokens.js +194 -205
  7. package/dist/darkside/tokens.less +194 -205
  8. package/dist/darkside/tokens.scss +194 -205
  9. package/dist/tokens.css +1 -1
  10. package/package.json +2 -9
  11. package/types.ts +11 -36
  12. package/dist/darkside/static/tokens-cjs.js +0 -456
  13. package/dist/darkside/static/tokens.d.ts +0 -454
  14. package/dist/darkside/static/tokens.js +0 -454
  15. package/dist/darkside/static/tokens.less +0 -447
  16. package/dist/darkside/static/tokens.scss +0 -447
package/dist/darkside/tokens.scss CHANGED
@@ -10,9 +10,19 @@
10
10
  * Used for setting opacity on disabled elements.
11
11
  */
12
12
  $ax-opacity-disabled: var(--ax-opacity-disabled);
13
+ $ax-bg-neutral-soft: var(--ax-bg-neutral-soft);
14
+ $ax-bg-neutral-softA: var(--ax-bg-neutral-softA);
15
+ $ax-bg-neutral-moderate: var(--ax-bg-neutral-moderate);
16
+ $ax-bg-neutral-moderateA: var(--ax-bg-neutral-moderateA);
17
+ $ax-bg-neutral-moderate-hover: var(--ax-bg-neutral-moderate-hover);
18
+ $ax-bg-neutral-moderate-hoverA: var(--ax-bg-neutral-moderate-hoverA);
19
+ $ax-bg-neutral-moderate-pressed: var(--ax-bg-neutral-moderate-pressed);
20
+ $ax-bg-neutral-moderate-pressedA: var(--ax-bg-neutral-moderate-pressedA);
21
+ $ax-bg-neutral-strong: var(--ax-bg-neutral-strong);
22
+ $ax-bg-neutral-strong-hover: var(--ax-bg-neutral-strong-hover);
23
+ $ax-bg-neutral-strong-pressed: var(--ax-bg-neutral-strong-pressed);
13
24
  $ax-bg-accent-soft: var(--ax-bg-accent-soft);
14
- $ax-bg-accent-hover: var(--ax-bg-accent-hover);
15
- $ax-bg-accent-hoverA: var(--ax-bg-accent-hoverA);
25
+ $ax-bg-accent-softA: var(--ax-bg-accent-softA);
16
26
  $ax-bg-accent-moderate: var(--ax-bg-accent-moderate);
17
27
  $ax-bg-accent-moderateA: var(--ax-bg-accent-moderateA);
18
28
  $ax-bg-accent-moderate-hover: var(--ax-bg-accent-moderate-hover);
@@ -23,8 +33,7 @@
23
33
  $ax-bg-accent-strong-hover: var(--ax-bg-accent-strong-hover);
24
34
  $ax-bg-accent-strong-pressed: var(--ax-bg-accent-strong-pressed);
25
35
  $ax-bg-success-soft: var(--ax-bg-success-soft);
26
- $ax-bg-success-hover: var(--ax-bg-success-hover);
27
- $ax-bg-success-hoverA: var(--ax-bg-success-hoverA);
36
+ $ax-bg-success-softA: var(--ax-bg-success-softA);
28
37
  $ax-bg-success-moderate: var(--ax-bg-success-moderate);
29
38
  $ax-bg-success-moderateA: var(--ax-bg-success-moderateA);
30
39
  $ax-bg-success-moderate-hover: var(--ax-bg-success-moderate-hover);
@@ -35,8 +44,7 @@
35
44
  $ax-bg-success-strong-hover: var(--ax-bg-success-strong-hover);
36
45
  $ax-bg-success-strong-pressed: var(--ax-bg-success-strong-pressed);
37
46
  $ax-bg-warning-soft: var(--ax-bg-warning-soft);
38
- $ax-bg-warning-hover: var(--ax-bg-warning-hover);
39
- $ax-bg-warning-hoverA: var(--ax-bg-warning-hoverA);
47
+ $ax-bg-warning-softA: var(--ax-bg-warning-softA);
40
48
  $ax-bg-warning-moderate: var(--ax-bg-warning-moderate);
41
49
  $ax-bg-warning-moderateA: var(--ax-bg-warning-moderateA);
42
50
  $ax-bg-warning-moderate-hover: var(--ax-bg-warning-moderate-hover);
@@ -47,8 +55,7 @@
47
55
  $ax-bg-warning-strong-hover: var(--ax-bg-warning-strong-hover);
48
56
  $ax-bg-warning-strong-pressed: var(--ax-bg-warning-strong-pressed);
49
57
  $ax-bg-danger-soft: var(--ax-bg-danger-soft);
50
- $ax-bg-danger-hover: var(--ax-bg-danger-hover);
51
- $ax-bg-danger-hoverA: var(--ax-bg-danger-hoverA);
58
+ $ax-bg-danger-softA: var(--ax-bg-danger-softA);
52
59
  $ax-bg-danger-moderate: var(--ax-bg-danger-moderate);
53
60
  $ax-bg-danger-moderateA: var(--ax-bg-danger-moderateA);
54
61
  $ax-bg-danger-moderate-hover: var(--ax-bg-danger-moderate-hover);
@@ -59,8 +66,7 @@
59
66
  $ax-bg-danger-strong-hover: var(--ax-bg-danger-strong-hover);
60
67
  $ax-bg-danger-strong-pressed: var(--ax-bg-danger-strong-pressed);
61
68
  $ax-bg-info-soft: var(--ax-bg-info-soft);
62
- $ax-bg-info-hover: var(--ax-bg-info-hover);
63
- $ax-bg-info-hoverA: var(--ax-bg-info-hoverA);
69
+ $ax-bg-info-softA: var(--ax-bg-info-softA);
64
70
  $ax-bg-info-moderate: var(--ax-bg-info-moderate);
65
71
  $ax-bg-info-moderateA: var(--ax-bg-info-moderateA);
66
72
  $ax-bg-info-moderate-hover: var(--ax-bg-info-moderate-hover);
@@ -70,128 +76,115 @@
70
76
  $ax-bg-info-strong: var(--ax-bg-info-strong);
71
77
  $ax-bg-info-strong-hover: var(--ax-bg-info-strong-hover);
72
78
  $ax-bg-info-strong-pressed: var(--ax-bg-info-strong-pressed);
73
- $ax-bg-brand-1-soft: var(--ax-bg-brand-1-soft);
74
- $ax-bg-brand-1-hover: var(--ax-bg-brand-1-hover);
75
- $ax-bg-brand-1-hoverA: var(--ax-bg-brand-1-hoverA);
76
- $ax-bg-brand-1-moderate: var(--ax-bg-brand-1-moderate);
77
- $ax-bg-brand-1-moderateA: var(--ax-bg-brand-1-moderateA);
78
- $ax-bg-brand-1-moderate-hover: var(--ax-bg-brand-1-moderate-hover);
79
- $ax-bg-brand-1-moderate-hoverA: var(--ax-bg-brand-1-moderate-hoverA);
80
- $ax-bg-brand-1-moderate-pressed: var(--ax-bg-brand-1-moderate-pressed);
81
- $ax-bg-brand-1-moderate-pressedA: var(--ax-bg-brand-1-moderate-pressedA);
82
- $ax-bg-brand-1-strong: var(--ax-bg-brand-1-strong);
83
- $ax-bg-brand-1-strong-hover: var(--ax-bg-brand-1-strong-hover);
84
- $ax-bg-brand-1-strong-pressed: var(--ax-bg-brand-1-strong-pressed);
85
- $ax-bg-brand-2-soft: var(--ax-bg-brand-2-soft);
86
- $ax-bg-brand-2-hover: var(--ax-bg-brand-2-hover);
87
- $ax-bg-brand-2-hoverA: var(--ax-bg-brand-2-hoverA);
88
- $ax-bg-brand-2-moderate: var(--ax-bg-brand-2-moderate);
89
- $ax-bg-brand-2-moderateA: var(--ax-bg-brand-2-moderateA);
90
- $ax-bg-brand-2-moderate-hover: var(--ax-bg-brand-2-moderate-hover);
91
- $ax-bg-brand-2-moderate-hoverA: var(--ax-bg-brand-2-moderate-hoverA);
92
- $ax-bg-brand-2-moderate-pressed: var(--ax-bg-brand-2-moderate-pressed);
93
- $ax-bg-brand-2-moderate-pressedA: var(--ax-bg-brand-2-moderate-pressedA);
94
- $ax-bg-brand-2-strong: var(--ax-bg-brand-2-strong);
95
- $ax-bg-brand-2-strong-hover: var(--ax-bg-brand-2-strong-hover);
96
- $ax-bg-brand-2-strong-pressed: var(--ax-bg-brand-2-strong-pressed);
97
- $ax-bg-brand-3-soft: var(--ax-bg-brand-3-soft);
98
- $ax-bg-brand-3-hover: var(--ax-bg-brand-3-hover);
99
- $ax-bg-brand-3-hoverA: var(--ax-bg-brand-3-hoverA);
100
- $ax-bg-brand-3-moderate: var(--ax-bg-brand-3-moderate);
101
- $ax-bg-brand-3-moderateA: var(--ax-bg-brand-3-moderateA);
102
- $ax-bg-brand-3-moderate-hover: var(--ax-bg-brand-3-moderate-hover);
103
- $ax-bg-brand-3-moderate-hoverA: var(--ax-bg-brand-3-moderate-hoverA);
104
- $ax-bg-brand-3-moderate-pressed: var(--ax-bg-brand-3-moderate-pressed);
105
- $ax-bg-brand-3-moderate-pressedA: var(--ax-bg-brand-3-moderate-pressedA);
106
- $ax-bg-brand-3-strong: var(--ax-bg-brand-3-strong);
107
- $ax-bg-brand-3-strong-hover: var(--ax-bg-brand-3-strong-hover);
108
- $ax-bg-brand-3-strong-pressed: var(--ax-bg-brand-3-strong-pressed);
109
- $ax-bg-meta-1-soft: var(--ax-bg-meta-1-soft);
110
- $ax-bg-meta-1-hover: var(--ax-bg-meta-1-hover);
111
- $ax-bg-meta-1-hoverA: var(--ax-bg-meta-1-hoverA);
112
- $ax-bg-meta-1-moderate: var(--ax-bg-meta-1-moderate);
113
- $ax-bg-meta-1-moderateA: var(--ax-bg-meta-1-moderateA);
114
- $ax-bg-meta-1-moderate-hover: var(--ax-bg-meta-1-moderate-hover);
115
- $ax-bg-meta-1-moderate-hoverA: var(--ax-bg-meta-1-moderate-hoverA);
116
- $ax-bg-meta-1-moderate-pressed: var(--ax-bg-meta-1-moderate-pressed);
117
- $ax-bg-meta-1-moderate-pressedA: var(--ax-bg-meta-1-moderate-pressedA);
118
- $ax-bg-meta-1-strong: var(--ax-bg-meta-1-strong);
119
- $ax-bg-meta-1-strong-hover: var(--ax-bg-meta-1-strong-hover);
120
- $ax-bg-meta-1-strong-pressed: var(--ax-bg-meta-1-strong-pressed);
121
- $ax-bg-meta-2-soft: var(--ax-bg-meta-2-soft);
122
- $ax-bg-meta-2-hover: var(--ax-bg-meta-2-hover);
123
- $ax-bg-meta-2-hoverA: var(--ax-bg-meta-2-hoverA);
124
- $ax-bg-meta-2-moderate: var(--ax-bg-meta-2-moderate);
125
- $ax-bg-meta-2-moderateA: var(--ax-bg-meta-2-moderateA);
126
- $ax-bg-meta-2-moderate-hover: var(--ax-bg-meta-2-moderate-hover);
127
- $ax-bg-meta-2-moderate-hoverA: var(--ax-bg-meta-2-moderate-hoverA);
128
- $ax-bg-meta-2-moderate-pressed: var(--ax-bg-meta-2-moderate-pressed);
129
- $ax-bg-meta-2-moderate-pressedA: var(--ax-bg-meta-2-moderate-pressedA);
130
- $ax-bg-meta-2-strong: var(--ax-bg-meta-2-strong);
131
- $ax-bg-meta-2-strong-hover: var(--ax-bg-meta-2-strong-hover);
132
- $ax-bg-meta-2-strong-pressed: var(--ax-bg-meta-2-strong-pressed);
79
+ $ax-bg-brand-magenta-soft: var(--ax-bg-brand-magenta-soft);
80
+ $ax-bg-brand-magenta-softA: var(--ax-bg-brand-magenta-softA);
81
+ $ax-bg-brand-magenta-moderate: var(--ax-bg-brand-magenta-moderate);
82
+ $ax-bg-brand-magenta-moderateA: var(--ax-bg-brand-magenta-moderateA);
83
+ $ax-bg-brand-magenta-moderate-hover: var(--ax-bg-brand-magenta-moderate-hover);
84
+ $ax-bg-brand-magenta-moderate-hoverA: var(--ax-bg-brand-magenta-moderate-hoverA);
85
+ $ax-bg-brand-magenta-moderate-pressed: var(--ax-bg-brand-magenta-moderate-pressed);
86
+ $ax-bg-brand-magenta-moderate-pressedA: var(--ax-bg-brand-magenta-moderate-pressedA);
87
+ $ax-bg-brand-magenta-strong: var(--ax-bg-brand-magenta-strong);
88
+ $ax-bg-brand-magenta-strong-hover: var(--ax-bg-brand-magenta-strong-hover);
89
+ $ax-bg-brand-magenta-strong-pressed: var(--ax-bg-brand-magenta-strong-pressed);
90
+ $ax-bg-brand-beige-soft: var(--ax-bg-brand-beige-soft);
91
+ $ax-bg-brand-beige-softA: var(--ax-bg-brand-beige-softA);
92
+ $ax-bg-brand-beige-moderate: var(--ax-bg-brand-beige-moderate);
93
+ $ax-bg-brand-beige-moderateA: var(--ax-bg-brand-beige-moderateA);
94
+ $ax-bg-brand-beige-moderate-hover: var(--ax-bg-brand-beige-moderate-hover);
95
+ $ax-bg-brand-beige-moderate-hoverA: var(--ax-bg-brand-beige-moderate-hoverA);
96
+ $ax-bg-brand-beige-moderate-pressed: var(--ax-bg-brand-beige-moderate-pressed);
97
+ $ax-bg-brand-beige-moderate-pressedA: var(--ax-bg-brand-beige-moderate-pressedA);
98
+ $ax-bg-brand-beige-strong: var(--ax-bg-brand-beige-strong);
99
+ $ax-bg-brand-beige-strong-hover: var(--ax-bg-brand-beige-strong-hover);
100
+ $ax-bg-brand-beige-strong-pressed: var(--ax-bg-brand-beige-strong-pressed);
101
+ $ax-bg-brand-blue-soft: var(--ax-bg-brand-blue-soft);
102
+ $ax-bg-brand-blue-softA: var(--ax-bg-brand-blue-softA);
103
+ $ax-bg-brand-blue-moderate: var(--ax-bg-brand-blue-moderate);
104
+ $ax-bg-brand-blue-moderateA: var(--ax-bg-brand-blue-moderateA);
105
+ $ax-bg-brand-blue-moderate-hover: var(--ax-bg-brand-blue-moderate-hover);
106
+ $ax-bg-brand-blue-moderate-hoverA: var(--ax-bg-brand-blue-moderate-hoverA);
107
+ $ax-bg-brand-blue-moderate-pressed: var(--ax-bg-brand-blue-moderate-pressed);
108
+ $ax-bg-brand-blue-moderate-pressedA: var(--ax-bg-brand-blue-moderate-pressedA);
109
+ $ax-bg-brand-blue-strong: var(--ax-bg-brand-blue-strong);
110
+ $ax-bg-brand-blue-strong-hover: var(--ax-bg-brand-blue-strong-hover);
111
+ $ax-bg-brand-blue-strong-pressed: var(--ax-bg-brand-blue-strong-pressed);
112
+ $ax-bg-meta-purple-soft: var(--ax-bg-meta-purple-soft);
113
+ $ax-bg-meta-purple-softA: var(--ax-bg-meta-purple-softA);
114
+ $ax-bg-meta-purple-moderate: var(--ax-bg-meta-purple-moderate);
115
+ $ax-bg-meta-purple-moderateA: var(--ax-bg-meta-purple-moderateA);
116
+ $ax-bg-meta-purple-moderate-hover: var(--ax-bg-meta-purple-moderate-hover);
117
+ $ax-bg-meta-purple-moderate-hoverA: var(--ax-bg-meta-purple-moderate-hoverA);
118
+ $ax-bg-meta-purple-moderate-pressed: var(--ax-bg-meta-purple-moderate-pressed);
119
+ $ax-bg-meta-purple-moderate-pressedA: var(--ax-bg-meta-purple-moderate-pressedA);
120
+ $ax-bg-meta-purple-strong: var(--ax-bg-meta-purple-strong);
121
+ $ax-bg-meta-purple-strong-hover: var(--ax-bg-meta-purple-strong-hover);
122
+ $ax-bg-meta-purple-strong-pressed: var(--ax-bg-meta-purple-strong-pressed);
123
+ $ax-bg-meta-lime-soft: var(--ax-bg-meta-lime-soft);
124
+ $ax-bg-meta-lime-softA: var(--ax-bg-meta-lime-softA);
125
+ $ax-bg-meta-lime-moderate: var(--ax-bg-meta-lime-moderate);
126
+ $ax-bg-meta-lime-moderateA: var(--ax-bg-meta-lime-moderateA);
127
+ $ax-bg-meta-lime-moderate-hover: var(--ax-bg-meta-lime-moderate-hover);
128
+ $ax-bg-meta-lime-moderate-hoverA: var(--ax-bg-meta-lime-moderate-hoverA);
129
+ $ax-bg-meta-lime-moderate-pressed: var(--ax-bg-meta-lime-moderate-pressed);
130
+ $ax-bg-meta-lime-moderate-pressedA: var(--ax-bg-meta-lime-moderate-pressedA);
131
+ $ax-bg-meta-lime-strong: var(--ax-bg-meta-lime-strong);
132
+ $ax-bg-meta-lime-strong-hover: var(--ax-bg-meta-lime-strong-hover);
133
+ $ax-bg-meta-lime-strong-pressed: var(--ax-bg-meta-lime-strong-pressed);
133
134
  $ax-bg-default: var(--ax-bg-default);
134
135
  $ax-bg-input: var(--ax-bg-input);
135
136
  $ax-bg-raised: var(--ax-bg-raised);
136
137
  $ax-bg-sunken: var(--ax-bg-sunken);
137
138
  $ax-bg-overlay: var(--ax-bg-overlay);
138
- $ax-bg-soft: var(--ax-bg-soft);
139
- $ax-bg-hover: var(--ax-bg-hover);
140
- $ax-bg-hoverA: var(--ax-bg-hoverA);
141
- $ax-bg-moderate: var(--ax-bg-moderate);
142
- $ax-bg-moderateA: var(--ax-bg-moderateA);
143
- $ax-bg-moderate-hover: var(--ax-bg-moderate-hover);
144
- $ax-bg-moderate-hoverA: var(--ax-bg-moderate-hoverA);
145
- $ax-bg-moderate-pressed: var(--ax-bg-moderate-pressed);
146
- $ax-bg-moderate-pressedA: var(--ax-bg-moderate-pressedA);
147
- $ax-bg-strong: var(--ax-bg-strong);
148
- $ax-bg-strong-hover: var(--ax-bg-strong-hover);
149
- $ax-bg-strong-pressed: var(--ax-bg-strong-pressed);
139
+ $ax-text-neutral: var(--ax-text-neutral);
140
+ $ax-text-neutral-subtle: var(--ax-text-neutral-subtle);
141
+ $ax-text-neutral-icon: var(--ax-text-neutral-icon);
150
142
  $ax-text-accent: var(--ax-text-accent);
151
- $ax-text-accent-strong: var(--ax-text-accent-strong);
143
+ $ax-text-accent-subtle: var(--ax-text-accent-subtle);
152
144
  $ax-text-accent-icon: var(--ax-text-accent-icon);
153
145
  $ax-text-success: var(--ax-text-success);
154
- $ax-text-success-strong: var(--ax-text-success-strong);
146
+ $ax-text-success-subtle: var(--ax-text-success-subtle);
155
147
  $ax-text-success-icon: var(--ax-text-success-icon);
156
148
  $ax-text-warning: var(--ax-text-warning);
157
- $ax-text-warning-strong: var(--ax-text-warning-strong);
149
+ $ax-text-warning-subtle: var(--ax-text-warning-subtle);
158
150
  $ax-text-warning-icon: var(--ax-text-warning-icon);
159
151
  $ax-text-danger: var(--ax-text-danger);
160
- $ax-text-danger-strong: var(--ax-text-danger-strong);
152
+ $ax-text-danger-subtle: var(--ax-text-danger-subtle);
161
153
  $ax-text-danger-icon: var(--ax-text-danger-icon);
162
154
  $ax-text-info: var(--ax-text-info);
163
- $ax-text-info-strong: var(--ax-text-info-strong);
155
+ $ax-text-info-subtle: var(--ax-text-info-subtle);
164
156
  $ax-text-info-icon: var(--ax-text-info-icon);
165
- $ax-text-brand-1: var(--ax-text-brand-1);
166
- $ax-text-brand-1-strong: var(--ax-text-brand-1-strong);
167
- $ax-text-brand-1-icon: var(--ax-text-brand-1-icon);
168
- $ax-text-brand-2: var(--ax-text-brand-2);
169
- $ax-text-brand-2-strong: var(--ax-text-brand-2-strong);
170
- $ax-text-brand-2-icon: var(--ax-text-brand-2-icon);
171
- $ax-text-brand-3: var(--ax-text-brand-3);
172
- $ax-text-brand-3-strong: var(--ax-text-brand-3-strong);
173
- $ax-text-brand-3-icon: var(--ax-text-brand-3-icon);
174
- $ax-text-meta-1: var(--ax-text-meta-1);
175
- $ax-text-meta-1-strong: var(--ax-text-meta-1-strong);
176
- $ax-text-meta-1-icon: var(--ax-text-meta-1-icon);
177
- $ax-text-meta-2: var(--ax-text-meta-2);
178
- $ax-text-meta-2-strong: var(--ax-text-meta-2-strong);
179
- $ax-text-meta-2-icon: var(--ax-text-meta-2-icon);
157
+ $ax-text-brand-magenta: var(--ax-text-brand-magenta);
158
+ $ax-text-brand-magenta-subtle: var(--ax-text-brand-magenta-subtle);
159
+ $ax-text-brand-magenta-icon: var(--ax-text-brand-magenta-icon);
160
+ $ax-text-brand-beige: var(--ax-text-brand-beige);
161
+ $ax-text-brand-beige-subtle: var(--ax-text-brand-beige-subtle);
162
+ $ax-text-brand-beige-icon: var(--ax-text-brand-beige-icon);
163
+ $ax-text-brand-blue: var(--ax-text-brand-blue);
164
+ $ax-text-brand-blue-subtle: var(--ax-text-brand-blue-subtle);
165
+ $ax-text-brand-blue-icon: var(--ax-text-brand-blue-icon);
166
+ $ax-text-meta-purple: var(--ax-text-meta-purple);
167
+ $ax-text-meta-purple-subtle: var(--ax-text-meta-purple-subtle);
168
+ $ax-text-meta-purple-icon: var(--ax-text-meta-purple-icon);
169
+ $ax-text-meta-lime: var(--ax-text-meta-lime);
170
+ $ax-text-meta-lime-subtle: var(--ax-text-meta-lime-subtle);
171
+ $ax-text-meta-lime-icon: var(--ax-text-meta-lime-icon);
172
+ $ax-text-neutral-contrast: var(--ax-text-neutral-contrast);
180
173
  $ax-text-accent-contrast: var(--ax-text-accent-contrast);
181
174
  $ax-text-danger-contrast: var(--ax-text-danger-contrast);
182
175
  $ax-text-info-contrast: var(--ax-text-info-contrast);
183
176
  $ax-text-success-contrast: var(--ax-text-success-contrast);
184
177
  $ax-text-warning-contrast: var(--ax-text-warning-contrast);
185
- $ax-text-brand-1-contrast: var(--ax-text-brand-1-contrast);
186
- $ax-text-brand-2-contrast: var(--ax-text-brand-2-contrast);
187
- $ax-text-brand-3-contrast: var(--ax-text-brand-3-contrast);
188
- $ax-text-meta-1-contrast: var(--ax-text-meta-1-contrast);
189
- $ax-text-meta-2-contrast: var(--ax-text-meta-2-contrast);
190
- $ax-text-default: var(--ax-text-default);
191
- $ax-text-subtle: var(--ax-text-subtle);
192
- $ax-text-icon: var(--ax-text-icon);
178
+ $ax-text-brand-magenta-contrast: var(--ax-text-brand-magenta-contrast);
179
+ $ax-text-brand-beige-contrast: var(--ax-text-brand-beige-contrast);
180
+ $ax-text-brand-blue-contrast: var(--ax-text-brand-blue-contrast);
181
+ $ax-text-meta-purple-contrast: var(--ax-text-meta-purple-contrast);
182
+ $ax-text-meta-lime-contrast: var(--ax-text-meta-lime-contrast);
193
183
  $ax-text-logo: var(--ax-text-logo);
194
- $ax-text-contrast: var(--ax-text-contrast);
184
+ $ax-border-neutral: var(--ax-border-neutral);
185
+ $ax-border-neutral-subtle: var(--ax-border-neutral-subtle);
186
+ $ax-border-neutral-subtleA: var(--ax-border-neutral-subtleA);
187
+ $ax-border-neutral-strong: var(--ax-border-neutral-strong);
195
188
  $ax-border-accent: var(--ax-border-accent);
196
189
  $ax-border-accent-subtle: var(--ax-border-accent-subtle);
197
190
  $ax-border-accent-subtleA: var(--ax-border-accent-subtleA);
@@ -212,30 +205,26 @@
212
205
  $ax-border-info-subtle: var(--ax-border-info-subtle);
213
206
  $ax-border-info-subtleA: var(--ax-border-info-subtleA);
214
207
  $ax-border-info-strong: var(--ax-border-info-strong);
215
- $ax-border-brand-1: var(--ax-border-brand-1);
216
- $ax-border-brand-1-subtle: var(--ax-border-brand-1-subtle);
217
- $ax-border-brand-1-subtleA: var(--ax-border-brand-1-subtleA);
218
- $ax-border-brand-1-strong: var(--ax-border-brand-1-strong);
219
- $ax-border-brand-2: var(--ax-border-brand-2);
220
- $ax-border-brand-2-subtle: var(--ax-border-brand-2-subtle);
221
- $ax-border-brand-2-subtleA: var(--ax-border-brand-2-subtleA);
222
- $ax-border-brand-2-strong: var(--ax-border-brand-2-strong);
223
- $ax-border-brand-3: var(--ax-border-brand-3);
224
- $ax-border-brand-3-subtle: var(--ax-border-brand-3-subtle);
225
- $ax-border-brand-3-subtleA: var(--ax-border-brand-3-subtleA);
226
- $ax-border-brand-3-strong: var(--ax-border-brand-3-strong);
227
- $ax-border-meta-1: var(--ax-border-meta-1);
228
- $ax-border-meta-1-subtle: var(--ax-border-meta-1-subtle);
229
- $ax-border-meta-1-subtleA: var(--ax-border-meta-1-subtleA);
230
- $ax-border-meta-1-strong: var(--ax-border-meta-1-strong);
231
- $ax-border-meta-2: var(--ax-border-meta-2);
232
- $ax-border-meta-2-subtle: var(--ax-border-meta-2-subtle);
233
- $ax-border-meta-2-subtleA: var(--ax-border-meta-2-subtleA);
234
- $ax-border-meta-2-strong: var(--ax-border-meta-2-strong);
235
- $ax-border-default: var(--ax-border-default);
236
- $ax-border-subtle: var(--ax-border-subtle);
237
- $ax-border-subtleA: var(--ax-border-subtleA);
238
- $ax-border-strong: var(--ax-border-strong);
208
+ $ax-border-brand-magenta: var(--ax-border-brand-magenta);
209
+ $ax-border-brand-magenta-subtle: var(--ax-border-brand-magenta-subtle);
210
+ $ax-border-brand-magenta-subtleA: var(--ax-border-brand-magenta-subtleA);
211
+ $ax-border-brand-magenta-strong: var(--ax-border-brand-magenta-strong);
212
+ $ax-border-brand-beige: var(--ax-border-brand-beige);
213
+ $ax-border-brand-beige-subtle: var(--ax-border-brand-beige-subtle);
214
+ $ax-border-brand-beige-subtleA: var(--ax-border-brand-beige-subtleA);
215
+ $ax-border-brand-beige-strong: var(--ax-border-brand-beige-strong);
216
+ $ax-border-brand-blue: var(--ax-border-brand-blue);
217
+ $ax-border-brand-blue-subtle: var(--ax-border-brand-blue-subtle);
218
+ $ax-border-brand-blue-subtleA: var(--ax-border-brand-blue-subtleA);
219
+ $ax-border-brand-blue-strong: var(--ax-border-brand-blue-strong);
220
+ $ax-border-meta-purple: var(--ax-border-meta-purple);
221
+ $ax-border-meta-purple-subtle: var(--ax-border-meta-purple-subtle);
222
+ $ax-border-meta-purple-subtleA: var(--ax-border-meta-purple-subtleA);
223
+ $ax-border-meta-purple-strong: var(--ax-border-meta-purple-strong);
224
+ $ax-border-meta-lime: var(--ax-border-meta-lime);
225
+ $ax-border-meta-lime-subtle: var(--ax-border-meta-lime-subtle);
226
+ $ax-border-meta-lime-subtleA: var(--ax-border-meta-lime-subtleA);
227
+ $ax-border-meta-lime-strong: var(--ax-border-meta-lime-strong);
239
228
  $ax-border-focus: var(--ax-border-focus);
240
229
  $ax-neutral-100: var(--ax-neutral-100);
241
230
  $ax-neutral-200: var(--ax-neutral-200);
@@ -322,76 +311,76 @@
322
311
  $ax-info-200A: var(--ax-info-200A);
323
312
  $ax-info-300A: var(--ax-info-300A);
324
313
  $ax-info-400A: var(--ax-info-400A);
325
- $ax-brand-1-100: var(--ax-brand-1-100);
326
- $ax-brand-1-200: var(--ax-brand-1-200);
327
- $ax-brand-1-300: var(--ax-brand-1-300);
328
- $ax-brand-1-400: var(--ax-brand-1-400);
329
- $ax-brand-1-500: var(--ax-brand-1-500);
330
- $ax-brand-1-600: var(--ax-brand-1-600);
331
- $ax-brand-1-700: var(--ax-brand-1-700);
332
- $ax-brand-1-800: var(--ax-brand-1-800);
333
- $ax-brand-1-900: var(--ax-brand-1-900);
334
- $ax-brand-1-1000: var(--ax-brand-1-1000);
335
- $ax-brand-1-100A: var(--ax-brand-1-100A);
336
- $ax-brand-1-200A: var(--ax-brand-1-200A);
337
- $ax-brand-1-300A: var(--ax-brand-1-300A);
338
- $ax-brand-1-400A: var(--ax-brand-1-400A);
339
- $ax-brand-2-100: var(--ax-brand-2-100);
340
- $ax-brand-2-200: var(--ax-brand-2-200);
341
- $ax-brand-2-300: var(--ax-brand-2-300);
342
- $ax-brand-2-400: var(--ax-brand-2-400);
343
- $ax-brand-2-500: var(--ax-brand-2-500);
344
- $ax-brand-2-600: var(--ax-brand-2-600);
345
- $ax-brand-2-700: var(--ax-brand-2-700);
346
- $ax-brand-2-800: var(--ax-brand-2-800);
347
- $ax-brand-2-900: var(--ax-brand-2-900);
348
- $ax-brand-2-1000: var(--ax-brand-2-1000);
349
- $ax-brand-2-100A: var(--ax-brand-2-100A);
350
- $ax-brand-2-200A: var(--ax-brand-2-200A);
351
- $ax-brand-2-300A: var(--ax-brand-2-300A);
352
- $ax-brand-2-400A: var(--ax-brand-2-400A);
353
- $ax-brand-3-100: var(--ax-brand-3-100);
354
- $ax-brand-3-200: var(--ax-brand-3-200);
355
- $ax-brand-3-300: var(--ax-brand-3-300);
356
- $ax-brand-3-400: var(--ax-brand-3-400);
357
- $ax-brand-3-500: var(--ax-brand-3-500);
358
- $ax-brand-3-600: var(--ax-brand-3-600);
359
- $ax-brand-3-700: var(--ax-brand-3-700);
360
- $ax-brand-3-800: var(--ax-brand-3-800);
361
- $ax-brand-3-900: var(--ax-brand-3-900);
362
- $ax-brand-3-1000: var(--ax-brand-3-1000);
363
- $ax-brand-3-100A: var(--ax-brand-3-100A);
364
- $ax-brand-3-200A: var(--ax-brand-3-200A);
365
- $ax-brand-3-300A: var(--ax-brand-3-300A);
366
- $ax-brand-3-400A: var(--ax-brand-3-400A);
367
- $ax-meta-1-100: var(--ax-meta-1-100);
368
- $ax-meta-1-200: var(--ax-meta-1-200);
369
- $ax-meta-1-300: var(--ax-meta-1-300);
370
- $ax-meta-1-400: var(--ax-meta-1-400);
371
- $ax-meta-1-500: var(--ax-meta-1-500);
372
- $ax-meta-1-600: var(--ax-meta-1-600);
373
- $ax-meta-1-700: var(--ax-meta-1-700);
374
- $ax-meta-1-800: var(--ax-meta-1-800);
375
- $ax-meta-1-900: var(--ax-meta-1-900);
376
- $ax-meta-1-1000: var(--ax-meta-1-1000);
377
- $ax-meta-1-100A: var(--ax-meta-1-100A);
378
- $ax-meta-1-200A: var(--ax-meta-1-200A);
379
- $ax-meta-1-300A: var(--ax-meta-1-300A);
380
- $ax-meta-1-400A: var(--ax-meta-1-400A);
381
- $ax-meta-2-100: var(--ax-meta-2-100);
382
- $ax-meta-2-200: var(--ax-meta-2-200);
383
- $ax-meta-2-300: var(--ax-meta-2-300);
384
- $ax-meta-2-400: var(--ax-meta-2-400);
385
- $ax-meta-2-500: var(--ax-meta-2-500);
386
- $ax-meta-2-600: var(--ax-meta-2-600);
387
- $ax-meta-2-700: var(--ax-meta-2-700);
388
- $ax-meta-2-800: var(--ax-meta-2-800);
389
- $ax-meta-2-900: var(--ax-meta-2-900);
390
- $ax-meta-2-1000: var(--ax-meta-2-1000);
391
- $ax-meta-2-100A: var(--ax-meta-2-100A);
392
- $ax-meta-2-200A: var(--ax-meta-2-200A);
393
- $ax-meta-2-300A: var(--ax-meta-2-300A);
394
- $ax-meta-2-400A: var(--ax-meta-2-400A);
314
+ $ax-brand-magenta-100: var(--ax-brand-magenta-100);
315
+ $ax-brand-magenta-200: var(--ax-brand-magenta-200);
316
+ $ax-brand-magenta-300: var(--ax-brand-magenta-300);
317
+ $ax-brand-magenta-400: var(--ax-brand-magenta-400);
318
+ $ax-brand-magenta-500: var(--ax-brand-magenta-500);
319
+ $ax-brand-magenta-600: var(--ax-brand-magenta-600);
320
+ $ax-brand-magenta-700: var(--ax-brand-magenta-700);
321
+ $ax-brand-magenta-800: var(--ax-brand-magenta-800);
322
+ $ax-brand-magenta-900: var(--ax-brand-magenta-900);
323
+ $ax-brand-magenta-1000: var(--ax-brand-magenta-1000);
324
+ $ax-brand-magenta-100A: var(--ax-brand-magenta-100A);
325
+ $ax-brand-magenta-200A: var(--ax-brand-magenta-200A);
326
+ $ax-brand-magenta-300A: var(--ax-brand-magenta-300A);
327
+ $ax-brand-magenta-400A: var(--ax-brand-magenta-400A);
328
+ $ax-brand-beige-100: var(--ax-brand-beige-100);
329
+ $ax-brand-beige-200: var(--ax-brand-beige-200);
330
+ $ax-brand-beige-300: var(--ax-brand-beige-300);
331
+ $ax-brand-beige-400: var(--ax-brand-beige-400);
332
+ $ax-brand-beige-500: var(--ax-brand-beige-500);
333
+ $ax-brand-beige-600: var(--ax-brand-beige-600);
334
+ $ax-brand-beige-700: var(--ax-brand-beige-700);
335
+ $ax-brand-beige-800: var(--ax-brand-beige-800);
336
+ $ax-brand-beige-900: var(--ax-brand-beige-900);
337
+ $ax-brand-beige-1000: var(--ax-brand-beige-1000);
338
+ $ax-brand-beige-100A: var(--ax-brand-beige-100A);
339
+ $ax-brand-beige-200A: var(--ax-brand-beige-200A);
340
+ $ax-brand-beige-300A: var(--ax-brand-beige-300A);
341
+ $ax-brand-beige-400A: var(--ax-brand-beige-400A);
342
+ $ax-brand-blue-100: var(--ax-brand-blue-100);
343
+ $ax-brand-blue-200: var(--ax-brand-blue-200);
344
+ $ax-brand-blue-300: var(--ax-brand-blue-300);
345
+ $ax-brand-blue-400: var(--ax-brand-blue-400);
346
+ $ax-brand-blue-500: var(--ax-brand-blue-500);
347
+ $ax-brand-blue-600: var(--ax-brand-blue-600);
348
+ $ax-brand-blue-700: var(--ax-brand-blue-700);
349
+ $ax-brand-blue-800: var(--ax-brand-blue-800);
350
+ $ax-brand-blue-900: var(--ax-brand-blue-900);
351
+ $ax-brand-blue-1000: var(--ax-brand-blue-1000);
352
+ $ax-brand-blue-100A: var(--ax-brand-blue-100A);
353
+ $ax-brand-blue-200A: var(--ax-brand-blue-200A);
354
+ $ax-brand-blue-300A: var(--ax-brand-blue-300A);
355
+ $ax-brand-blue-400A: var(--ax-brand-blue-400A);
356
+ $ax-meta-purple-100: var(--ax-meta-purple-100);
357
+ $ax-meta-purple-200: var(--ax-meta-purple-200);
358
+ $ax-meta-purple-300: var(--ax-meta-purple-300);
359
+ $ax-meta-purple-400: var(--ax-meta-purple-400);
360
+ $ax-meta-purple-500: var(--ax-meta-purple-500);
361
+ $ax-meta-purple-600: var(--ax-meta-purple-600);
362
+ $ax-meta-purple-700: var(--ax-meta-purple-700);
363
+ $ax-meta-purple-800: var(--ax-meta-purple-800);
364
+ $ax-meta-purple-900: var(--ax-meta-purple-900);
365
+ $ax-meta-purple-1000: var(--ax-meta-purple-1000);
366
+ $ax-meta-purple-100A: var(--ax-meta-purple-100A);
367
+ $ax-meta-purple-200A: var(--ax-meta-purple-200A);
368
+ $ax-meta-purple-300A: var(--ax-meta-purple-300A);
369
+ $ax-meta-purple-400A: var(--ax-meta-purple-400A);
370
+ $ax-meta-lime-100: var(--ax-meta-lime-100);
371
+ $ax-meta-lime-200: var(--ax-meta-lime-200);
372
+ $ax-meta-lime-300: var(--ax-meta-lime-300);
373
+ $ax-meta-lime-400: var(--ax-meta-lime-400);
374
+ $ax-meta-lime-500: var(--ax-meta-lime-500);
375
+ $ax-meta-lime-600: var(--ax-meta-lime-600);
376
+ $ax-meta-lime-700: var(--ax-meta-lime-700);
377
+ $ax-meta-lime-800: var(--ax-meta-lime-800);
378
+ $ax-meta-lime-900: var(--ax-meta-lime-900);
379
+ $ax-meta-lime-1000: var(--ax-meta-lime-1000);
380
+ $ax-meta-lime-100A: var(--ax-meta-lime-100A);
381
+ $ax-meta-lime-200A: var(--ax-meta-lime-200A);
382
+ $ax-meta-lime-300A: var(--ax-meta-lime-300A);
383
+ $ax-meta-lime-400A: var(--ax-meta-lime-400A);
395
384
  $ax-space-0: var(--ax-space-0);
396
385
  $ax-space-1: var(--ax-space-1);
397
386
  $ax-space-2: var(--ax-space-2);
package/dist/tokens.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  :root, :host {
6
- --ax-version: "7.10.0";
6
+ --ax-version: "7.12.0";
7
7
  --a-spacing-1-alt: 0.375rem;
8
8
  --a-spacing-05: 0.125rem;
9
9
  --a-spacing-32: 8rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-tokens",
3
- "version": "7.10.0",
3
+ "version": "7.12.0",
4
4
  "description": "Design-tokens for Nav designsystem",
5
5
  "author": "Aksel | Nav designsystem team",
6
6
  "keywords": [
@@ -62,13 +62,6 @@
62
62
  "require": "./dist/darkside/tokens-cjs.js"
63
63
  },
64
64
  "./darkside-scss": "./dist/darkside/tokens.scss",
65
- "./darkside-less": "./dist/darkside/tokens.less",
66
- "./darkside-js-static": {
67
- "types": "./dist/darkside/static/tokens.d.ts",
68
- "import": "./dist/darkside/static/tokens.js",
69
- "require": "./dist/darkside/static/tokens-cjs.js"
70
- },
71
- "./darkside-scss-static": "./dist/darkside/static/tokens.scss",
72
- "./darkside-less-static": "./dist/darkside/static/tokens.less"
65
+ "./darkside-less": "./dist/darkside/tokens.less"
73
66
  }
74
67
  }
package/types.ts CHANGED
@@ -7,15 +7,15 @@ export const ColorRolesList = [
7
7
  "warning",
8
8
  "danger",
9
9
  "info",
10
- "brand-1",
11
- "brand-2",
12
- "brand-3",
13
- "meta-1",
14
- "meta-2",
10
+ "brand-magenta",
11
+ "brand-beige",
12
+ "brand-blue",
13
+ "meta-purple",
14
+ "meta-lime",
15
15
  ] as const;
16
16
 
17
17
  export type GlobalColorRoles = (typeof ColorRolesList)[number];
18
- export type SemanticColorRoles = Exclude<GlobalColorRoles, "neutral">;
18
+ export type SemanticColorRoles = GlobalColorRoles;
19
19
 
20
20
  export type GlobalColorScale =
21
21
  | "100"
@@ -48,31 +48,16 @@ export type StaticDefaultBgKeys =
48
48
  | "input"
49
49
  | "raised"
50
50
  | "sunken"
51
- | "overlay"
52
- | "soft"
53
- | "moderate"
54
- | "moderateA"
55
- | "strong";
56
-
57
- export type StatefulDefaultBgKeys =
58
- | "hover"
59
- | "hoverA"
60
- | "moderate-hover"
61
- | "moderate-hoverA"
62
- | "moderate-pressed"
63
- | "moderate-pressedA"
64
- | "strong-hover"
65
- | "strong-pressed";
51
+ | "overlay";
66
52
 
67
53
  export type StaticBgKeys =
68
54
  | `${SemanticColorRoles}-soft`
55
+ | `${SemanticColorRoles}-softA`
69
56
  | `${SemanticColorRoles}-moderate`
70
57
  | `${SemanticColorRoles}-moderateA`
71
58
  | `${SemanticColorRoles}-strong`;
72
59
 
73
60
  export type StatefulBgKeys =
74
- | `${SemanticColorRoles}-hover`
75
- | `${SemanticColorRoles}-hoverA`
76
61
  | `${SemanticColorRoles}-moderate-hover`
77
62
  | `${SemanticColorRoles}-moderate-hoverA`
78
63
  | `${SemanticColorRoles}-moderate-pressed`
@@ -80,25 +65,15 @@ export type StatefulBgKeys =
80
65
  | `${SemanticColorRoles}-strong-hover`
81
66
  | `${SemanticColorRoles}-strong-pressed`;
82
67
 
83
- export type DefaultTextColorKeys =
84
- | "default"
85
- | "subtle"
86
- | "icon"
87
- | "logo"
88
- | "contrast";
68
+ export type DefaultTextColorKeys = "logo";
89
69
 
90
70
  export type TextColorKeys =
91
71
  | SemanticColorRoles
92
- | `${SemanticColorRoles}-strong`
72
+ | `${SemanticColorRoles}-subtle`
93
73
  | `${SemanticColorRoles}-icon`
94
74
  | `${SemanticColorRoles}-contrast`;
95
75
 
96
- export type BorderColorKeys =
97
- | "default"
98
- | "subtle"
99
- | "subtleA"
100
- | "strong"
101
- | "focus";
76
+ export type BorderColorKeys = "focus";
102
77
 
103
78
  export type BorderColorWithRoleKeys =
104
79
  | SemanticColorRoles