@navikt/ds-tailwind 8.14.0 → 8.15.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 (3) hide show
  1. package/README.md +9 -3
  2. package/package.json +8 -5
  3. package/tailwind4.css +416 -0
package/README.md CHANGED
@@ -9,7 +9,7 @@ Custom tailwind-preset based on `@navikt/ds-tokens`.
9
9
  npm install @navikt/ds-tailwind
10
10
  ```
11
11
 
12
- ## Usage
12
+ ## Use with tailwind v3
13
13
 
14
14
  ```javascript
15
15
  // tailwind.config.js
@@ -19,10 +19,16 @@ module.exports = {
19
19
  };
20
20
  ```
21
21
 
22
+ ## Use with tailwind v4
23
+
24
+ ```css
25
+ @import "tailwindcss";
26
+ @import "@navikt/ds-tailwind/v4";
27
+ ```
28
+
22
29
  ## Learn more
23
30
 
24
- - [Docs](https://aksel.nav.no/komponenter)
25
- - [Storybook](https://aksel.nav.no/storybook/)
31
+ - [Docs](https://aksel.nav.no/grunnleggende/kode/tailwind)
26
32
 
27
33
  ## License
28
34
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-tailwind",
3
- "version": "8.14.0",
3
+ "version": "8.15.0",
4
4
  "description": "Tailwind config based on @navikt/ds-tokens",
5
5
  "author": "Aksel | Nav designsystem team",
6
6
  "keywords": [
@@ -10,10 +10,11 @@
10
10
  "license": "MIT",
11
11
  "files": [
12
12
  "tailwind.config.js",
13
- "tailwind.config.d.ts"
13
+ "tailwind.config.d.ts",
14
+ "tailwind4.css"
14
15
  ],
15
16
  "scripts": {
16
- "build": "yarn tsx ./src/build.ts",
17
+ "build": "yarn tsx ./src/build-v3.ts && yarn tsx ./src/build-v4.ts",
17
18
  "test": "vitest run",
18
19
  "test:watch": "vitest watch"
19
20
  },
@@ -27,11 +28,12 @@
27
28
  },
28
29
  "homepage": "https://aksel.nav.no/grunnleggende/kode/tailwind/",
29
30
  "devDependencies": {
30
- "@navikt/ds-tokens": "^8.14.0",
31
+ "@navikt/ds-tokens": "^8.15.0",
32
+ "@types/node": "^24.10.9",
31
33
  "tailwindcss": "^3.3.3",
32
34
  "tsx": "^4.20.6",
33
35
  "typescript": "6.0.3",
34
- "vitest": "4.1.8"
36
+ "vitest": "4.1.9"
35
37
  },
36
38
  "publishConfig": {
37
39
  "access": "public",
@@ -50,6 +52,7 @@
50
52
  "default": "./tailwind.config.js"
51
53
  }
52
54
  },
55
+ "./v4": "./tailwind4.css",
53
56
  "./package.json": "./package.json"
54
57
  }
55
58
  }
package/tailwind4.css ADDED
@@ -0,0 +1,416 @@
1
+ @theme {
2
+ --color-ax-bg-neutral-soft: var(--ax-bg-neutral-soft);
3
+ --color-ax-bg-neutral-softA: var(--ax-bg-neutral-softA);
4
+ --color-ax-bg-neutral-moderate: var(--ax-bg-neutral-moderate);
5
+ --color-ax-bg-neutral-moderateA: var(--ax-bg-neutral-moderateA);
6
+ --color-ax-bg-neutral-moderate-hover: var(--ax-bg-neutral-moderate-hover);
7
+ --color-ax-bg-neutral-moderate-hoverA: var(--ax-bg-neutral-moderate-hoverA);
8
+ --color-ax-bg-neutral-moderate-pressed: var(--ax-bg-neutral-moderate-pressed);
9
+ --color-ax-bg-neutral-moderate-pressedA: var(--ax-bg-neutral-moderate-pressedA);
10
+ --color-ax-bg-neutral-strong: var(--ax-bg-neutral-strong);
11
+ --color-ax-bg-neutral-strong-hover: var(--ax-bg-neutral-strong-hover);
12
+ --color-ax-bg-neutral-strong-pressed: var(--ax-bg-neutral-strong-pressed);
13
+ --color-ax-bg-accent-soft: var(--ax-bg-accent-soft);
14
+ --color-ax-bg-accent-softA: var(--ax-bg-accent-softA);
15
+ --color-ax-bg-accent-moderate: var(--ax-bg-accent-moderate);
16
+ --color-ax-bg-accent-moderateA: var(--ax-bg-accent-moderateA);
17
+ --color-ax-bg-accent-moderate-hover: var(--ax-bg-accent-moderate-hover);
18
+ --color-ax-bg-accent-moderate-hoverA: var(--ax-bg-accent-moderate-hoverA);
19
+ --color-ax-bg-accent-moderate-pressed: var(--ax-bg-accent-moderate-pressed);
20
+ --color-ax-bg-accent-moderate-pressedA: var(--ax-bg-accent-moderate-pressedA);
21
+ --color-ax-bg-accent-strong: var(--ax-bg-accent-strong);
22
+ --color-ax-bg-accent-strong-hover: var(--ax-bg-accent-strong-hover);
23
+ --color-ax-bg-accent-strong-pressed: var(--ax-bg-accent-strong-pressed);
24
+ --color-ax-bg-success-soft: var(--ax-bg-success-soft);
25
+ --color-ax-bg-success-softA: var(--ax-bg-success-softA);
26
+ --color-ax-bg-success-moderate: var(--ax-bg-success-moderate);
27
+ --color-ax-bg-success-moderateA: var(--ax-bg-success-moderateA);
28
+ --color-ax-bg-success-moderate-hover: var(--ax-bg-success-moderate-hover);
29
+ --color-ax-bg-success-moderate-hoverA: var(--ax-bg-success-moderate-hoverA);
30
+ --color-ax-bg-success-moderate-pressed: var(--ax-bg-success-moderate-pressed);
31
+ --color-ax-bg-success-moderate-pressedA: var(--ax-bg-success-moderate-pressedA);
32
+ --color-ax-bg-success-strong: var(--ax-bg-success-strong);
33
+ --color-ax-bg-success-strong-hover: var(--ax-bg-success-strong-hover);
34
+ --color-ax-bg-success-strong-pressed: var(--ax-bg-success-strong-pressed);
35
+ --color-ax-bg-warning-soft: var(--ax-bg-warning-soft);
36
+ --color-ax-bg-warning-softA: var(--ax-bg-warning-softA);
37
+ --color-ax-bg-warning-moderate: var(--ax-bg-warning-moderate);
38
+ --color-ax-bg-warning-moderateA: var(--ax-bg-warning-moderateA);
39
+ --color-ax-bg-warning-moderate-hover: var(--ax-bg-warning-moderate-hover);
40
+ --color-ax-bg-warning-moderate-hoverA: var(--ax-bg-warning-moderate-hoverA);
41
+ --color-ax-bg-warning-moderate-pressed: var(--ax-bg-warning-moderate-pressed);
42
+ --color-ax-bg-warning-moderate-pressedA: var(--ax-bg-warning-moderate-pressedA);
43
+ --color-ax-bg-warning-strong: var(--ax-bg-warning-strong);
44
+ --color-ax-bg-warning-strong-hover: var(--ax-bg-warning-strong-hover);
45
+ --color-ax-bg-warning-strong-pressed: var(--ax-bg-warning-strong-pressed);
46
+ --color-ax-bg-danger-soft: var(--ax-bg-danger-soft);
47
+ --color-ax-bg-danger-softA: var(--ax-bg-danger-softA);
48
+ --color-ax-bg-danger-moderate: var(--ax-bg-danger-moderate);
49
+ --color-ax-bg-danger-moderateA: var(--ax-bg-danger-moderateA);
50
+ --color-ax-bg-danger-moderate-hover: var(--ax-bg-danger-moderate-hover);
51
+ --color-ax-bg-danger-moderate-hoverA: var(--ax-bg-danger-moderate-hoverA);
52
+ --color-ax-bg-danger-moderate-pressed: var(--ax-bg-danger-moderate-pressed);
53
+ --color-ax-bg-danger-moderate-pressedA: var(--ax-bg-danger-moderate-pressedA);
54
+ --color-ax-bg-danger-strong: var(--ax-bg-danger-strong);
55
+ --color-ax-bg-danger-strong-hover: var(--ax-bg-danger-strong-hover);
56
+ --color-ax-bg-danger-strong-pressed: var(--ax-bg-danger-strong-pressed);
57
+ --color-ax-bg-info-soft: var(--ax-bg-info-soft);
58
+ --color-ax-bg-info-softA: var(--ax-bg-info-softA);
59
+ --color-ax-bg-info-moderate: var(--ax-bg-info-moderate);
60
+ --color-ax-bg-info-moderateA: var(--ax-bg-info-moderateA);
61
+ --color-ax-bg-info-moderate-hover: var(--ax-bg-info-moderate-hover);
62
+ --color-ax-bg-info-moderate-hoverA: var(--ax-bg-info-moderate-hoverA);
63
+ --color-ax-bg-info-moderate-pressed: var(--ax-bg-info-moderate-pressed);
64
+ --color-ax-bg-info-moderate-pressedA: var(--ax-bg-info-moderate-pressedA);
65
+ --color-ax-bg-info-strong: var(--ax-bg-info-strong);
66
+ --color-ax-bg-info-strong-hover: var(--ax-bg-info-strong-hover);
67
+ --color-ax-bg-info-strong-pressed: var(--ax-bg-info-strong-pressed);
68
+ --color-ax-bg-brand-magenta-soft: var(--ax-bg-brand-magenta-soft);
69
+ --color-ax-bg-brand-magenta-softA: var(--ax-bg-brand-magenta-softA);
70
+ --color-ax-bg-brand-magenta-moderate: var(--ax-bg-brand-magenta-moderate);
71
+ --color-ax-bg-brand-magenta-moderateA: var(--ax-bg-brand-magenta-moderateA);
72
+ --color-ax-bg-brand-magenta-moderate-hover: var(--ax-bg-brand-magenta-moderate-hover);
73
+ --color-ax-bg-brand-magenta-moderate-hoverA: var(--ax-bg-brand-magenta-moderate-hoverA);
74
+ --color-ax-bg-brand-magenta-moderate-pressed: var(--ax-bg-brand-magenta-moderate-pressed);
75
+ --color-ax-bg-brand-magenta-moderate-pressedA: var(--ax-bg-brand-magenta-moderate-pressedA);
76
+ --color-ax-bg-brand-magenta-strong: var(--ax-bg-brand-magenta-strong);
77
+ --color-ax-bg-brand-magenta-strong-hover: var(--ax-bg-brand-magenta-strong-hover);
78
+ --color-ax-bg-brand-magenta-strong-pressed: var(--ax-bg-brand-magenta-strong-pressed);
79
+ --color-ax-bg-brand-beige-soft: var(--ax-bg-brand-beige-soft);
80
+ --color-ax-bg-brand-beige-softA: var(--ax-bg-brand-beige-softA);
81
+ --color-ax-bg-brand-beige-moderate: var(--ax-bg-brand-beige-moderate);
82
+ --color-ax-bg-brand-beige-moderateA: var(--ax-bg-brand-beige-moderateA);
83
+ --color-ax-bg-brand-beige-moderate-hover: var(--ax-bg-brand-beige-moderate-hover);
84
+ --color-ax-bg-brand-beige-moderate-hoverA: var(--ax-bg-brand-beige-moderate-hoverA);
85
+ --color-ax-bg-brand-beige-moderate-pressed: var(--ax-bg-brand-beige-moderate-pressed);
86
+ --color-ax-bg-brand-beige-moderate-pressedA: var(--ax-bg-brand-beige-moderate-pressedA);
87
+ --color-ax-bg-brand-beige-strong: var(--ax-bg-brand-beige-strong);
88
+ --color-ax-bg-brand-beige-strong-hover: var(--ax-bg-brand-beige-strong-hover);
89
+ --color-ax-bg-brand-beige-strong-pressed: var(--ax-bg-brand-beige-strong-pressed);
90
+ --color-ax-bg-brand-blue-soft: var(--ax-bg-brand-blue-soft);
91
+ --color-ax-bg-brand-blue-softA: var(--ax-bg-brand-blue-softA);
92
+ --color-ax-bg-brand-blue-moderate: var(--ax-bg-brand-blue-moderate);
93
+ --color-ax-bg-brand-blue-moderateA: var(--ax-bg-brand-blue-moderateA);
94
+ --color-ax-bg-brand-blue-moderate-hover: var(--ax-bg-brand-blue-moderate-hover);
95
+ --color-ax-bg-brand-blue-moderate-hoverA: var(--ax-bg-brand-blue-moderate-hoverA);
96
+ --color-ax-bg-brand-blue-moderate-pressed: var(--ax-bg-brand-blue-moderate-pressed);
97
+ --color-ax-bg-brand-blue-moderate-pressedA: var(--ax-bg-brand-blue-moderate-pressedA);
98
+ --color-ax-bg-brand-blue-strong: var(--ax-bg-brand-blue-strong);
99
+ --color-ax-bg-brand-blue-strong-hover: var(--ax-bg-brand-blue-strong-hover);
100
+ --color-ax-bg-brand-blue-strong-pressed: var(--ax-bg-brand-blue-strong-pressed);
101
+ --color-ax-bg-meta-purple-soft: var(--ax-bg-meta-purple-soft);
102
+ --color-ax-bg-meta-purple-softA: var(--ax-bg-meta-purple-softA);
103
+ --color-ax-bg-meta-purple-moderate: var(--ax-bg-meta-purple-moderate);
104
+ --color-ax-bg-meta-purple-moderateA: var(--ax-bg-meta-purple-moderateA);
105
+ --color-ax-bg-meta-purple-moderate-hover: var(--ax-bg-meta-purple-moderate-hover);
106
+ --color-ax-bg-meta-purple-moderate-hoverA: var(--ax-bg-meta-purple-moderate-hoverA);
107
+ --color-ax-bg-meta-purple-moderate-pressed: var(--ax-bg-meta-purple-moderate-pressed);
108
+ --color-ax-bg-meta-purple-moderate-pressedA: var(--ax-bg-meta-purple-moderate-pressedA);
109
+ --color-ax-bg-meta-purple-strong: var(--ax-bg-meta-purple-strong);
110
+ --color-ax-bg-meta-purple-strong-hover: var(--ax-bg-meta-purple-strong-hover);
111
+ --color-ax-bg-meta-purple-strong-pressed: var(--ax-bg-meta-purple-strong-pressed);
112
+ --color-ax-bg-meta-lime-soft: var(--ax-bg-meta-lime-soft);
113
+ --color-ax-bg-meta-lime-softA: var(--ax-bg-meta-lime-softA);
114
+ --color-ax-bg-meta-lime-moderate: var(--ax-bg-meta-lime-moderate);
115
+ --color-ax-bg-meta-lime-moderateA: var(--ax-bg-meta-lime-moderateA);
116
+ --color-ax-bg-meta-lime-moderate-hover: var(--ax-bg-meta-lime-moderate-hover);
117
+ --color-ax-bg-meta-lime-moderate-hoverA: var(--ax-bg-meta-lime-moderate-hoverA);
118
+ --color-ax-bg-meta-lime-moderate-pressed: var(--ax-bg-meta-lime-moderate-pressed);
119
+ --color-ax-bg-meta-lime-moderate-pressedA: var(--ax-bg-meta-lime-moderate-pressedA);
120
+ --color-ax-bg-meta-lime-strong: var(--ax-bg-meta-lime-strong);
121
+ --color-ax-bg-meta-lime-strong-hover: var(--ax-bg-meta-lime-strong-hover);
122
+ --color-ax-bg-meta-lime-strong-pressed: var(--ax-bg-meta-lime-strong-pressed);
123
+ --color-ax-bg-default: var(--ax-bg-default);
124
+ --color-ax-bg-input: var(--ax-bg-input);
125
+ --color-ax-bg-raised: var(--ax-bg-raised);
126
+ --color-ax-bg-sunken: var(--ax-bg-sunken);
127
+ --color-ax-bg-overlay: var(--ax-bg-overlay);
128
+ --color-ax-text-neutral: var(--ax-text-neutral);
129
+ --color-ax-text-neutral-subtle: var(--ax-text-neutral-subtle);
130
+ --color-ax-text-neutral-decoration: var(--ax-text-neutral-decoration);
131
+ --color-ax-text-neutral-contrast: var(--ax-text-neutral-contrast);
132
+ --color-ax-text-accent: var(--ax-text-accent);
133
+ --color-ax-text-accent-subtle: var(--ax-text-accent-subtle);
134
+ --color-ax-text-accent-decoration: var(--ax-text-accent-decoration);
135
+ --color-ax-text-accent-contrast: var(--ax-text-accent-contrast);
136
+ --color-ax-text-success: var(--ax-text-success);
137
+ --color-ax-text-success-subtle: var(--ax-text-success-subtle);
138
+ --color-ax-text-success-decoration: var(--ax-text-success-decoration);
139
+ --color-ax-text-success-contrast: var(--ax-text-success-contrast);
140
+ --color-ax-text-warning: var(--ax-text-warning);
141
+ --color-ax-text-warning-subtle: var(--ax-text-warning-subtle);
142
+ --color-ax-text-warning-decoration: var(--ax-text-warning-decoration);
143
+ --color-ax-text-warning-contrast: var(--ax-text-warning-contrast);
144
+ --color-ax-text-danger: var(--ax-text-danger);
145
+ --color-ax-text-danger-subtle: var(--ax-text-danger-subtle);
146
+ --color-ax-text-danger-decoration: var(--ax-text-danger-decoration);
147
+ --color-ax-text-danger-contrast: var(--ax-text-danger-contrast);
148
+ --color-ax-text-info: var(--ax-text-info);
149
+ --color-ax-text-info-subtle: var(--ax-text-info-subtle);
150
+ --color-ax-text-info-decoration: var(--ax-text-info-decoration);
151
+ --color-ax-text-info-contrast: var(--ax-text-info-contrast);
152
+ --color-ax-text-brand-magenta: var(--ax-text-brand-magenta);
153
+ --color-ax-text-brand-magenta-subtle: var(--ax-text-brand-magenta-subtle);
154
+ --color-ax-text-brand-magenta-decoration: var(--ax-text-brand-magenta-decoration);
155
+ --color-ax-text-brand-magenta-contrast: var(--ax-text-brand-magenta-contrast);
156
+ --color-ax-text-brand-beige: var(--ax-text-brand-beige);
157
+ --color-ax-text-brand-beige-subtle: var(--ax-text-brand-beige-subtle);
158
+ --color-ax-text-brand-beige-decoration: var(--ax-text-brand-beige-decoration);
159
+ --color-ax-text-brand-beige-contrast: var(--ax-text-brand-beige-contrast);
160
+ --color-ax-text-brand-blue: var(--ax-text-brand-blue);
161
+ --color-ax-text-brand-blue-subtle: var(--ax-text-brand-blue-subtle);
162
+ --color-ax-text-brand-blue-decoration: var(--ax-text-brand-blue-decoration);
163
+ --color-ax-text-brand-blue-contrast: var(--ax-text-brand-blue-contrast);
164
+ --color-ax-text-meta-purple: var(--ax-text-meta-purple);
165
+ --color-ax-text-meta-purple-subtle: var(--ax-text-meta-purple-subtle);
166
+ --color-ax-text-meta-purple-decoration: var(--ax-text-meta-purple-decoration);
167
+ --color-ax-text-meta-purple-contrast: var(--ax-text-meta-purple-contrast);
168
+ --color-ax-text-meta-lime: var(--ax-text-meta-lime);
169
+ --color-ax-text-meta-lime-subtle: var(--ax-text-meta-lime-subtle);
170
+ --color-ax-text-meta-lime-decoration: var(--ax-text-meta-lime-decoration);
171
+ --color-ax-text-meta-lime-contrast: var(--ax-text-meta-lime-contrast);
172
+ --color-ax-text-logo: var(--ax-text-logo);
173
+ --color-ax-border-neutral: var(--ax-border-neutral);
174
+ --color-ax-border-neutral-subtle: var(--ax-border-neutral-subtle);
175
+ --color-ax-border-neutral-subtleA: var(--ax-border-neutral-subtleA);
176
+ --color-ax-border-neutral-strong: var(--ax-border-neutral-strong);
177
+ --color-ax-border-accent: var(--ax-border-accent);
178
+ --color-ax-border-accent-subtle: var(--ax-border-accent-subtle);
179
+ --color-ax-border-accent-subtleA: var(--ax-border-accent-subtleA);
180
+ --color-ax-border-accent-strong: var(--ax-border-accent-strong);
181
+ --color-ax-border-success: var(--ax-border-success);
182
+ --color-ax-border-success-subtle: var(--ax-border-success-subtle);
183
+ --color-ax-border-success-subtleA: var(--ax-border-success-subtleA);
184
+ --color-ax-border-success-strong: var(--ax-border-success-strong);
185
+ --color-ax-border-warning: var(--ax-border-warning);
186
+ --color-ax-border-warning-subtle: var(--ax-border-warning-subtle);
187
+ --color-ax-border-warning-subtleA: var(--ax-border-warning-subtleA);
188
+ --color-ax-border-warning-strong: var(--ax-border-warning-strong);
189
+ --color-ax-border-danger: var(--ax-border-danger);
190
+ --color-ax-border-danger-subtle: var(--ax-border-danger-subtle);
191
+ --color-ax-border-danger-subtleA: var(--ax-border-danger-subtleA);
192
+ --color-ax-border-danger-strong: var(--ax-border-danger-strong);
193
+ --color-ax-border-info: var(--ax-border-info);
194
+ --color-ax-border-info-subtle: var(--ax-border-info-subtle);
195
+ --color-ax-border-info-subtleA: var(--ax-border-info-subtleA);
196
+ --color-ax-border-info-strong: var(--ax-border-info-strong);
197
+ --color-ax-border-brand-magenta: var(--ax-border-brand-magenta);
198
+ --color-ax-border-brand-magenta-subtle: var(--ax-border-brand-magenta-subtle);
199
+ --color-ax-border-brand-magenta-subtleA: var(--ax-border-brand-magenta-subtleA);
200
+ --color-ax-border-brand-magenta-strong: var(--ax-border-brand-magenta-strong);
201
+ --color-ax-border-brand-beige: var(--ax-border-brand-beige);
202
+ --color-ax-border-brand-beige-subtle: var(--ax-border-brand-beige-subtle);
203
+ --color-ax-border-brand-beige-subtleA: var(--ax-border-brand-beige-subtleA);
204
+ --color-ax-border-brand-beige-strong: var(--ax-border-brand-beige-strong);
205
+ --color-ax-border-brand-blue: var(--ax-border-brand-blue);
206
+ --color-ax-border-brand-blue-subtle: var(--ax-border-brand-blue-subtle);
207
+ --color-ax-border-brand-blue-subtleA: var(--ax-border-brand-blue-subtleA);
208
+ --color-ax-border-brand-blue-strong: var(--ax-border-brand-blue-strong);
209
+ --color-ax-border-meta-purple: var(--ax-border-meta-purple);
210
+ --color-ax-border-meta-purple-subtle: var(--ax-border-meta-purple-subtle);
211
+ --color-ax-border-meta-purple-subtleA: var(--ax-border-meta-purple-subtleA);
212
+ --color-ax-border-meta-purple-strong: var(--ax-border-meta-purple-strong);
213
+ --color-ax-border-meta-lime: var(--ax-border-meta-lime);
214
+ --color-ax-border-meta-lime-subtle: var(--ax-border-meta-lime-subtle);
215
+ --color-ax-border-meta-lime-subtleA: var(--ax-border-meta-lime-subtleA);
216
+ --color-ax-border-meta-lime-strong: var(--ax-border-meta-lime-strong);
217
+ --color-ax-border-focus: var(--ax-border-focus);
218
+ --color-ax-neutral-100: var(--ax-neutral-100);
219
+ --color-ax-neutral-200: var(--ax-neutral-200);
220
+ --color-ax-neutral-300: var(--ax-neutral-300);
221
+ --color-ax-neutral-400: var(--ax-neutral-400);
222
+ --color-ax-neutral-500: var(--ax-neutral-500);
223
+ --color-ax-neutral-600: var(--ax-neutral-600);
224
+ --color-ax-neutral-700: var(--ax-neutral-700);
225
+ --color-ax-neutral-800: var(--ax-neutral-800);
226
+ --color-ax-neutral-900: var(--ax-neutral-900);
227
+ --color-ax-neutral-1000: var(--ax-neutral-1000);
228
+ --color-ax-neutral-000: var(--ax-neutral-000);
229
+ --color-ax-neutral-100A: var(--ax-neutral-100A);
230
+ --color-ax-neutral-200A: var(--ax-neutral-200A);
231
+ --color-ax-neutral-300A: var(--ax-neutral-300A);
232
+ --color-ax-neutral-400A: var(--ax-neutral-400A);
233
+ --color-ax-accent-100: var(--ax-accent-100);
234
+ --color-ax-accent-200: var(--ax-accent-200);
235
+ --color-ax-accent-300: var(--ax-accent-300);
236
+ --color-ax-accent-400: var(--ax-accent-400);
237
+ --color-ax-accent-500: var(--ax-accent-500);
238
+ --color-ax-accent-600: var(--ax-accent-600);
239
+ --color-ax-accent-700: var(--ax-accent-700);
240
+ --color-ax-accent-800: var(--ax-accent-800);
241
+ --color-ax-accent-900: var(--ax-accent-900);
242
+ --color-ax-accent-1000: var(--ax-accent-1000);
243
+ --color-ax-accent-100A: var(--ax-accent-100A);
244
+ --color-ax-accent-200A: var(--ax-accent-200A);
245
+ --color-ax-accent-300A: var(--ax-accent-300A);
246
+ --color-ax-accent-400A: var(--ax-accent-400A);
247
+ --color-ax-success-100: var(--ax-success-100);
248
+ --color-ax-success-200: var(--ax-success-200);
249
+ --color-ax-success-300: var(--ax-success-300);
250
+ --color-ax-success-400: var(--ax-success-400);
251
+ --color-ax-success-500: var(--ax-success-500);
252
+ --color-ax-success-600: var(--ax-success-600);
253
+ --color-ax-success-700: var(--ax-success-700);
254
+ --color-ax-success-800: var(--ax-success-800);
255
+ --color-ax-success-900: var(--ax-success-900);
256
+ --color-ax-success-1000: var(--ax-success-1000);
257
+ --color-ax-success-100A: var(--ax-success-100A);
258
+ --color-ax-success-200A: var(--ax-success-200A);
259
+ --color-ax-success-300A: var(--ax-success-300A);
260
+ --color-ax-success-400A: var(--ax-success-400A);
261
+ --color-ax-warning-100: var(--ax-warning-100);
262
+ --color-ax-warning-200: var(--ax-warning-200);
263
+ --color-ax-warning-300: var(--ax-warning-300);
264
+ --color-ax-warning-400: var(--ax-warning-400);
265
+ --color-ax-warning-500: var(--ax-warning-500);
266
+ --color-ax-warning-600: var(--ax-warning-600);
267
+ --color-ax-warning-700: var(--ax-warning-700);
268
+ --color-ax-warning-800: var(--ax-warning-800);
269
+ --color-ax-warning-900: var(--ax-warning-900);
270
+ --color-ax-warning-1000: var(--ax-warning-1000);
271
+ --color-ax-warning-100A: var(--ax-warning-100A);
272
+ --color-ax-warning-200A: var(--ax-warning-200A);
273
+ --color-ax-warning-300A: var(--ax-warning-300A);
274
+ --color-ax-warning-400A: var(--ax-warning-400A);
275
+ --color-ax-danger-100: var(--ax-danger-100);
276
+ --color-ax-danger-200: var(--ax-danger-200);
277
+ --color-ax-danger-300: var(--ax-danger-300);
278
+ --color-ax-danger-400: var(--ax-danger-400);
279
+ --color-ax-danger-500: var(--ax-danger-500);
280
+ --color-ax-danger-600: var(--ax-danger-600);
281
+ --color-ax-danger-700: var(--ax-danger-700);
282
+ --color-ax-danger-800: var(--ax-danger-800);
283
+ --color-ax-danger-900: var(--ax-danger-900);
284
+ --color-ax-danger-1000: var(--ax-danger-1000);
285
+ --color-ax-danger-100A: var(--ax-danger-100A);
286
+ --color-ax-danger-200A: var(--ax-danger-200A);
287
+ --color-ax-danger-300A: var(--ax-danger-300A);
288
+ --color-ax-danger-400A: var(--ax-danger-400A);
289
+ --color-ax-info-100: var(--ax-info-100);
290
+ --color-ax-info-200: var(--ax-info-200);
291
+ --color-ax-info-300: var(--ax-info-300);
292
+ --color-ax-info-400: var(--ax-info-400);
293
+ --color-ax-info-500: var(--ax-info-500);
294
+ --color-ax-info-600: var(--ax-info-600);
295
+ --color-ax-info-700: var(--ax-info-700);
296
+ --color-ax-info-800: var(--ax-info-800);
297
+ --color-ax-info-900: var(--ax-info-900);
298
+ --color-ax-info-1000: var(--ax-info-1000);
299
+ --color-ax-info-100A: var(--ax-info-100A);
300
+ --color-ax-info-200A: var(--ax-info-200A);
301
+ --color-ax-info-300A: var(--ax-info-300A);
302
+ --color-ax-info-400A: var(--ax-info-400A);
303
+ --color-ax-brand-magenta-100: var(--ax-brand-magenta-100);
304
+ --color-ax-brand-magenta-200: var(--ax-brand-magenta-200);
305
+ --color-ax-brand-magenta-300: var(--ax-brand-magenta-300);
306
+ --color-ax-brand-magenta-400: var(--ax-brand-magenta-400);
307
+ --color-ax-brand-magenta-500: var(--ax-brand-magenta-500);
308
+ --color-ax-brand-magenta-600: var(--ax-brand-magenta-600);
309
+ --color-ax-brand-magenta-700: var(--ax-brand-magenta-700);
310
+ --color-ax-brand-magenta-800: var(--ax-brand-magenta-800);
311
+ --color-ax-brand-magenta-900: var(--ax-brand-magenta-900);
312
+ --color-ax-brand-magenta-1000: var(--ax-brand-magenta-1000);
313
+ --color-ax-brand-magenta-100A: var(--ax-brand-magenta-100A);
314
+ --color-ax-brand-magenta-200A: var(--ax-brand-magenta-200A);
315
+ --color-ax-brand-magenta-300A: var(--ax-brand-magenta-300A);
316
+ --color-ax-brand-magenta-400A: var(--ax-brand-magenta-400A);
317
+ --color-ax-brand-beige-100: var(--ax-brand-beige-100);
318
+ --color-ax-brand-beige-200: var(--ax-brand-beige-200);
319
+ --color-ax-brand-beige-300: var(--ax-brand-beige-300);
320
+ --color-ax-brand-beige-400: var(--ax-brand-beige-400);
321
+ --color-ax-brand-beige-500: var(--ax-brand-beige-500);
322
+ --color-ax-brand-beige-600: var(--ax-brand-beige-600);
323
+ --color-ax-brand-beige-700: var(--ax-brand-beige-700);
324
+ --color-ax-brand-beige-800: var(--ax-brand-beige-800);
325
+ --color-ax-brand-beige-900: var(--ax-brand-beige-900);
326
+ --color-ax-brand-beige-1000: var(--ax-brand-beige-1000);
327
+ --color-ax-brand-beige-100A: var(--ax-brand-beige-100A);
328
+ --color-ax-brand-beige-200A: var(--ax-brand-beige-200A);
329
+ --color-ax-brand-beige-300A: var(--ax-brand-beige-300A);
330
+ --color-ax-brand-beige-400A: var(--ax-brand-beige-400A);
331
+ --color-ax-brand-blue-100: var(--ax-brand-blue-100);
332
+ --color-ax-brand-blue-200: var(--ax-brand-blue-200);
333
+ --color-ax-brand-blue-300: var(--ax-brand-blue-300);
334
+ --color-ax-brand-blue-400: var(--ax-brand-blue-400);
335
+ --color-ax-brand-blue-500: var(--ax-brand-blue-500);
336
+ --color-ax-brand-blue-600: var(--ax-brand-blue-600);
337
+ --color-ax-brand-blue-700: var(--ax-brand-blue-700);
338
+ --color-ax-brand-blue-800: var(--ax-brand-blue-800);
339
+ --color-ax-brand-blue-900: var(--ax-brand-blue-900);
340
+ --color-ax-brand-blue-1000: var(--ax-brand-blue-1000);
341
+ --color-ax-brand-blue-100A: var(--ax-brand-blue-100A);
342
+ --color-ax-brand-blue-200A: var(--ax-brand-blue-200A);
343
+ --color-ax-brand-blue-300A: var(--ax-brand-blue-300A);
344
+ --color-ax-brand-blue-400A: var(--ax-brand-blue-400A);
345
+ --color-ax-meta-purple-100: var(--ax-meta-purple-100);
346
+ --color-ax-meta-purple-200: var(--ax-meta-purple-200);
347
+ --color-ax-meta-purple-300: var(--ax-meta-purple-300);
348
+ --color-ax-meta-purple-400: var(--ax-meta-purple-400);
349
+ --color-ax-meta-purple-500: var(--ax-meta-purple-500);
350
+ --color-ax-meta-purple-600: var(--ax-meta-purple-600);
351
+ --color-ax-meta-purple-700: var(--ax-meta-purple-700);
352
+ --color-ax-meta-purple-800: var(--ax-meta-purple-800);
353
+ --color-ax-meta-purple-900: var(--ax-meta-purple-900);
354
+ --color-ax-meta-purple-1000: var(--ax-meta-purple-1000);
355
+ --color-ax-meta-purple-100A: var(--ax-meta-purple-100A);
356
+ --color-ax-meta-purple-200A: var(--ax-meta-purple-200A);
357
+ --color-ax-meta-purple-300A: var(--ax-meta-purple-300A);
358
+ --color-ax-meta-purple-400A: var(--ax-meta-purple-400A);
359
+ --color-ax-meta-lime-100: var(--ax-meta-lime-100);
360
+ --color-ax-meta-lime-200: var(--ax-meta-lime-200);
361
+ --color-ax-meta-lime-300: var(--ax-meta-lime-300);
362
+ --color-ax-meta-lime-400: var(--ax-meta-lime-400);
363
+ --color-ax-meta-lime-500: var(--ax-meta-lime-500);
364
+ --color-ax-meta-lime-600: var(--ax-meta-lime-600);
365
+ --color-ax-meta-lime-700: var(--ax-meta-lime-700);
366
+ --color-ax-meta-lime-800: var(--ax-meta-lime-800);
367
+ --color-ax-meta-lime-900: var(--ax-meta-lime-900);
368
+ --color-ax-meta-lime-1000: var(--ax-meta-lime-1000);
369
+ --color-ax-meta-lime-100A: var(--ax-meta-lime-100A);
370
+ --color-ax-meta-lime-200A: var(--ax-meta-lime-200A);
371
+ --color-ax-meta-lime-300A: var(--ax-meta-lime-300A);
372
+ --color-ax-meta-lime-400A: var(--ax-meta-lime-400A);
373
+
374
+ --shadow-ax-dialog: var(--ax-shadow-dialog);
375
+
376
+ --font-size-ax-heading-2xlarge: var(--ax-font-size-heading-2xlarge);
377
+ --font-size-ax-heading-xlarge: var(--ax-font-size-heading-xlarge);
378
+ --font-size-ax-heading-large: var(--ax-font-size-heading-large);
379
+ --font-size-ax-heading-medium: var(--ax-font-size-heading-medium);
380
+ --font-size-ax-heading-small: var(--ax-font-size-heading-small);
381
+ --font-size-ax-heading-xsmall: var(--ax-font-size-heading-xsmall);
382
+ --font-size-ax-xlarge: var(--ax-font-size-xlarge);
383
+ --font-size-ax-large: var(--ax-font-size-large);
384
+ --font-size-ax-medium: var(--ax-font-size-medium);
385
+ --font-size-ax-small: var(--ax-font-size-small);
386
+
387
+ --font-weight-ax-bold: var(--ax-font-weight-bold);
388
+ --font-weight-ax-regular: var(--ax-font-weight-regular);
389
+
390
+ --leading-ax-heading-2xlarge: var(--ax-font-line-height-heading-2xlarge);
391
+ --leading-ax-heading-xlarge: var(--ax-font-line-height-heading-xlarge);
392
+ --leading-ax-heading-large: var(--ax-font-line-height-heading-large);
393
+ --leading-ax-heading-medium: var(--ax-font-line-height-heading-medium);
394
+ --leading-ax-heading-small: var(--ax-font-line-height-heading-small);
395
+ --leading-ax-heading-xsmall: var(--ax-font-line-height-heading-xsmall);
396
+ --leading-ax-xlarge: var(--ax-font-line-height-xlarge);
397
+ --leading-ax-large: var(--ax-font-line-height-large);
398
+ --leading-ax-medium: var(--ax-font-line-height-medium);
399
+
400
+ --font-family-ax-font-family: var(--ax-font-family);
401
+
402
+ --opacity-ax-disabled: var(--ax-opacity-disabled);
403
+
404
+ --radius-ax-2: var(--ax-radius-2);
405
+ --radius-ax-4: var(--ax-radius-4);
406
+ --radius-ax-8: var(--ax-radius-8);
407
+ --radius-ax-12: var(--ax-radius-12);
408
+ --radius-ax-16: var(--ax-radius-16);
409
+ --radius-ax-full: var(--ax-radius-full);
410
+
411
+ --breakpoint-ax-sm: 480px;
412
+ --breakpoint-ax-md: 768px;
413
+ --breakpoint-ax-lg: 1024px;
414
+ --breakpoint-ax-xl: 1280px;
415
+ --breakpoint-ax-2xl: 1440px;
416
+ }