@rarui/styles 1.32.0 → 2.0.0-rc.1

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 (9) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +489 -43
  4. package/dist/index.js +1 -1
  5. package/dist/styles.css +1 -1
  6. package/dist/styles.css.zip +0 -0
  7. package/dist/themes/dark.css +1 -1
  8. package/dist/themes/dark.js +1 -1
  9. package/package.json +5 -4
package/dist/index.d.ts CHANGED
@@ -1,20 +1,225 @@
1
1
  // Generated by dts-bundle-generator v9.5.1
2
2
 
3
3
  import { RecipeVariants } from '@vanilla-extract/recipes';
4
- import React$1 from 'react';
5
- import { HTMLAttributes, MutableRefObject } from 'react';
6
4
 
7
- export type Theme = "dark" | "base";
8
- export interface ThemeProviderProperties {
9
- theme?: Theme;
10
- }
11
- export type ThemeProviderProps = ThemeProviderProperties & React$1.HTMLAttributes<HTMLElement>;
12
- export declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
13
- export interface ThemeProviderContextProps {
14
- refThemeProvider: React$1.MutableRefObject<null | HTMLDivElement>;
15
- currentTheme: Theme;
16
- }
17
- export declare const useTheme: () => ThemeProviderContextProps;
5
+ declare const varsThemeBase: {
6
+ colors: {
7
+ surface: {
8
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9
+ brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10
+ "brand-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
11
+ "brand-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
12
+ "brand-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
13
+ disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
14
+ error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
15
+ "error-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16
+ "error-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17
+ "error-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
18
+ hover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
19
+ info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
20
+ "info-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
21
+ "info-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
22
+ "info-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
23
+ invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
24
+ "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
25
+ "invert-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
26
+ "invert-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
+ "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
+ overlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
29
+ press: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
+ success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
33
+ "success-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
34
+ "success-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
35
+ "success-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
36
+ warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
37
+ "warning-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
38
+ "warning-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
39
+ "warning-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
40
+ };
41
+ content: {
42
+ brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
43
+ "brand-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
44
+ disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
45
+ error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
46
+ info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
47
+ invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
48
+ "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
49
+ "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
50
+ "on-brand": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
51
+ "on-error": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
52
+ "on-info": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
53
+ "on-success": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
54
+ "on-warning": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
55
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
56
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
57
+ success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
+ warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
+ "warning-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
+ };
61
+ border: {
62
+ brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
+ "brand-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64
+ disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
+ divider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
66
+ error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
67
+ info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
68
+ invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
69
+ "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
70
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
71
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
72
+ subdued: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
73
+ success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
74
+ warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
75
+ };
76
+ };
77
+ fontFamily: {
78
+ body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
79
+ heading: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
80
+ button: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
81
+ };
82
+ fontSize: {
83
+ body: {
84
+ xxs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
85
+ xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
+ s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
+ m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
89
+ xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
90
+ };
91
+ heading: {
92
+ xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
93
+ s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
94
+ m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
95
+ l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
96
+ xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
97
+ hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
98
+ };
99
+ button: {
100
+ xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
101
+ s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
102
+ m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
103
+ l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
104
+ };
105
+ label: {
106
+ s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
107
+ m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
108
+ l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
+ };
110
+ };
111
+ fontWeight: {
112
+ regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
114
+ semiBold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
115
+ bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
116
+ };
117
+ lineHeight: {
118
+ body: {
119
+ xxs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
120
+ xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
121
+ s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
122
+ m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
123
+ l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
124
+ xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
125
+ };
126
+ heading: {
127
+ xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
+ s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
129
+ m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
130
+ l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
131
+ xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
132
+ hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
133
+ };
134
+ button: {
135
+ s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
136
+ m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
137
+ l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
138
+ };
139
+ label: {
140
+ s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
141
+ m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
142
+ l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
143
+ };
144
+ };
145
+ elevation: {
146
+ none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
147
+ top: {
148
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
149
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
150
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
151
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
152
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
153
+ };
154
+ bottom: {
155
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
156
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
157
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
158
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
159
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
160
+ };
161
+ "focus-ring": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
162
+ };
163
+ shape: {
164
+ border: {
165
+ radius: {
166
+ none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
167
+ "2xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
168
+ xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
169
+ sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
170
+ md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
171
+ lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
172
+ xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
173
+ "2xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
174
+ pill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
175
+ button: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
176
+ input: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
177
+ };
178
+ width: {
179
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
180
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
181
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
182
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
183
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
+ };
185
+ };
186
+ };
187
+ spacing: {
188
+ "4xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
+ "3xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
+ "2xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
191
+ xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
192
+ s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
193
+ md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
194
+ lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
+ xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
+ "2xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
+ "3xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
198
+ "4xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
+ "5xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
+ "6xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
201
+ "7xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
202
+ "8xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
203
+ };
204
+ zIndex: {
205
+ 100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
206
+ 200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
207
+ 300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
208
+ 400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
209
+ 500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
210
+ 600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
211
+ 700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
212
+ 800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
213
+ 900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
214
+ };
215
+ breakpoint: {
216
+ xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
217
+ md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
218
+ lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
219
+ xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
220
+ };
221
+ };
222
+ declare const variables: string;
18
223
  declare const avatarStyles: {
19
224
  container: string;
20
225
  avatar: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -3955,13 +4160,13 @@ declare const fontWeightProperties: {
3955
4160
  bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3956
4161
  };
3957
4162
  declare const fontSizeProperties: {
3958
- hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3959
4163
  "body-xxs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3960
4164
  "body-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3961
4165
  "body-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3962
4166
  "body-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3963
4167
  "body-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3964
4168
  "body-xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4169
+ "heading-hero": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3965
4170
  "heading-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3966
4171
  "heading-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3967
4172
  "heading-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -3980,13 +4185,13 @@ declare const fontFamilyProperties: {
3980
4185
  button: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3981
4186
  };
3982
4187
  declare const lineHeightProperties: {
3983
- readonly hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3984
4188
  readonly "body-xxs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3985
4189
  readonly "body-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3986
4190
  readonly "body-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3987
4191
  readonly "body-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3988
4192
  readonly "body-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3989
4193
  readonly "body-xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4194
+ readonly "heading-hero": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3990
4195
  readonly "heading-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3991
4196
  readonly "heading-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3992
4197
  readonly "heading-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -4140,6 +4345,42 @@ declare const backgroundColorProperties: {
4140
4345
  "warning-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4141
4346
  "warning-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4142
4347
  };
4348
+ declare const boxFillProperties: {
4349
+ currentColor: string;
4350
+ transparent: string;
4351
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4352
+ brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4353
+ "brand-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4354
+ "brand-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4355
+ "brand-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4356
+ disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4357
+ error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4358
+ "error-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4359
+ "error-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4360
+ "error-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4361
+ hover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4362
+ info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4363
+ "info-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4364
+ "info-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4365
+ "info-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4366
+ invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4367
+ "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4368
+ "invert-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4369
+ "invert-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4370
+ "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4371
+ overlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4372
+ press: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4373
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4374
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4375
+ success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4376
+ "success-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4377
+ "success-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4378
+ "success-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4379
+ warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4380
+ "warning-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4381
+ "warning-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4382
+ "warning-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4383
+ };
4143
4384
  export interface BoxConditions<T> extends Conditions<T> {
4144
4385
  focus?: T;
4145
4386
  focusWithin?: T;
@@ -4166,6 +4407,10 @@ export interface BoxSprinkle extends BoxDynamicProperties {
4166
4407
  * The color property is used to set the color of the box.
4167
4408
  */
4168
4409
  color?: AddDollar<keyof typeof colorProperties> | BoxConditions<AddDollar<keyof typeof colorProperties>>;
4410
+ /**
4411
+ * The fill color property is used to set the color of the box.
4412
+ */
4413
+ fill?: AddDollar<keyof typeof boxFillProperties> | BoxConditions<AddDollar<keyof typeof boxFillProperties>>;
4169
4414
  /**
4170
4415
  * The borderRadius property rounds the corners of an box's outer border edge.
4171
4416
  */
@@ -4532,6 +4777,183 @@ export declare const box: {
4532
4777
  };
4533
4778
  name: "backgroundColor";
4534
4779
  };
4780
+ fill: {
4781
+ values: {
4782
+ background: {
4783
+ default: string;
4784
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4785
+ };
4786
+ brand: {
4787
+ default: string;
4788
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4789
+ };
4790
+ "brand-hover": {
4791
+ default: string;
4792
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4793
+ };
4794
+ "brand-press": {
4795
+ default: string;
4796
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4797
+ };
4798
+ "brand-subdued": {
4799
+ default: string;
4800
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4801
+ };
4802
+ disabled: {
4803
+ default: string;
4804
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4805
+ };
4806
+ error: {
4807
+ default: string;
4808
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4809
+ };
4810
+ "error-hover": {
4811
+ default: string;
4812
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4813
+ };
4814
+ "error-press": {
4815
+ default: string;
4816
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4817
+ };
4818
+ "error-subdued": {
4819
+ default: string;
4820
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4821
+ };
4822
+ hover: {
4823
+ default: string;
4824
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4825
+ };
4826
+ info: {
4827
+ default: string;
4828
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4829
+ };
4830
+ "info-hover": {
4831
+ default: string;
4832
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4833
+ };
4834
+ "info-press": {
4835
+ default: string;
4836
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4837
+ };
4838
+ "info-subdued": {
4839
+ default: string;
4840
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4841
+ };
4842
+ invert: {
4843
+ default: string;
4844
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4845
+ };
4846
+ "invert-disabled": {
4847
+ default: string;
4848
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4849
+ };
4850
+ "invert-hover": {
4851
+ default: string;
4852
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4853
+ };
4854
+ "invert-press": {
4855
+ default: string;
4856
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4857
+ };
4858
+ "invert-secondary": {
4859
+ default: string;
4860
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4861
+ };
4862
+ overlay: {
4863
+ default: string;
4864
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4865
+ };
4866
+ press: {
4867
+ default: string;
4868
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4869
+ };
4870
+ primary: {
4871
+ default: string;
4872
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4873
+ };
4874
+ secondary: {
4875
+ default: string;
4876
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4877
+ };
4878
+ success: {
4879
+ default: string;
4880
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4881
+ };
4882
+ "success-hover": {
4883
+ default: string;
4884
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4885
+ };
4886
+ "success-press": {
4887
+ default: string;
4888
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4889
+ };
4890
+ "success-subdued": {
4891
+ default: string;
4892
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4893
+ };
4894
+ warning: {
4895
+ default: string;
4896
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4897
+ };
4898
+ "warning-hover": {
4899
+ default: string;
4900
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4901
+ };
4902
+ "warning-press": {
4903
+ default: string;
4904
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4905
+ };
4906
+ "warning-subdued": {
4907
+ default: string;
4908
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4909
+ };
4910
+ transparent: {
4911
+ default: string;
4912
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4913
+ };
4914
+ currentColor: {
4915
+ default: string;
4916
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4917
+ };
4918
+ };
4919
+ staticScale: {
4920
+ currentColor: string;
4921
+ transparent: string;
4922
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4923
+ brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4924
+ "brand-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4925
+ "brand-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4926
+ "brand-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4927
+ disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4928
+ error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4929
+ "error-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4930
+ "error-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4931
+ "error-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4932
+ hover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4933
+ info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4934
+ "info-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4935
+ "info-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4936
+ "info-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4937
+ invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4938
+ "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4939
+ "invert-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4940
+ "invert-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4941
+ "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4942
+ overlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4943
+ press: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4944
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4945
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4946
+ success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4947
+ "success-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4948
+ "success-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4949
+ "success-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4950
+ warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4951
+ "warning-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4952
+ "warning-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4953
+ "warning-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4954
+ };
4955
+ name: "fill";
4956
+ };
4535
4957
  borderColor: {
4536
4958
  values: {
4537
4959
  brand: {
@@ -6391,10 +6813,6 @@ export declare const box: {
6391
6813
  };
6392
6814
  lineHeight: {
6393
6815
  values: {
6394
- hero: {
6395
- default: string;
6396
- conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
6397
- };
6398
6816
  "body-xxs": {
6399
6817
  default: string;
6400
6818
  conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
@@ -6419,6 +6837,10 @@ export declare const box: {
6419
6837
  default: string;
6420
6838
  conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
6421
6839
  };
6840
+ "heading-hero": {
6841
+ default: string;
6842
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
6843
+ };
6422
6844
  "heading-xs": {
6423
6845
  default: string;
6424
6846
  conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
@@ -6465,13 +6887,13 @@ export declare const box: {
6465
6887
  };
6466
6888
  };
6467
6889
  staticScale: {
6468
- readonly hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6469
6890
  readonly "body-xxs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6470
6891
  readonly "body-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6471
6892
  readonly "body-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6472
6893
  readonly "body-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6473
6894
  readonly "body-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6474
6895
  readonly "body-xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6896
+ readonly "heading-hero": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6475
6897
  readonly "heading-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6476
6898
  readonly "heading-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6477
6899
  readonly "heading-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -6515,10 +6937,6 @@ export declare const box: {
6515
6937
  };
6516
6938
  fontSize: {
6517
6939
  values: {
6518
- hero: {
6519
- default: string;
6520
- conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
6521
- };
6522
6940
  "body-xxs": {
6523
6941
  default: string;
6524
6942
  conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
@@ -6543,6 +6961,10 @@ export declare const box: {
6543
6961
  default: string;
6544
6962
  conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
6545
6963
  };
6964
+ "heading-hero": {
6965
+ default: string;
6966
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
6967
+ };
6546
6968
  "heading-xs": {
6547
6969
  default: string;
6548
6970
  conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
@@ -6589,13 +7011,13 @@ export declare const box: {
6589
7011
  };
6590
7012
  };
6591
7013
  staticScale: {
6592
- hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6593
7014
  "body-xxs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6594
7015
  "body-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6595
7016
  "body-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6596
7017
  "body-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6597
7018
  "body-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6598
7019
  "body-xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7020
+ "heading-hero": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6599
7021
  "heading-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6600
7022
  "heading-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6601
7023
  "heading-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -8970,6 +9392,9 @@ declare const selectStyles: {
8970
9392
  ":focus": {
8971
9393
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8972
9394
  };
9395
+ ":active": {
9396
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9397
+ };
8973
9398
  };
8974
9399
  error: {
8975
9400
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -8979,6 +9404,9 @@ declare const selectStyles: {
8979
9404
  ":focus": {
8980
9405
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8981
9406
  };
9407
+ ":active": {
9408
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9409
+ };
8982
9410
  };
8983
9411
  };
8984
9412
  /**
@@ -9048,6 +9476,9 @@ export declare const select: {
9048
9476
  ":focus": {
9049
9477
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9050
9478
  };
9479
+ ":active": {
9480
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9481
+ };
9051
9482
  };
9052
9483
  error: {
9053
9484
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -9057,6 +9488,9 @@ export declare const select: {
9057
9488
  ":focus": {
9058
9489
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9059
9490
  };
9491
+ ":active": {
9492
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9493
+ };
9060
9494
  };
9061
9495
  };
9062
9496
  size: {
@@ -9118,12 +9552,16 @@ declare const styles$5: {
9118
9552
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9119
9553
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9120
9554
  };
9121
- negative: {
9555
+ danger: {
9556
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9557
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9558
+ };
9559
+ inverted: {
9122
9560
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9123
9561
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9124
9562
  };
9125
9563
  neutral: {
9126
- backgroundColor: "transparent";
9564
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9127
9565
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9128
9566
  };
9129
9567
  };
@@ -9143,9 +9581,6 @@ declare const styles$5: {
9143
9581
  /**
9144
9582
  * Specifies whether the status is in subdued mode
9145
9583
  */
9146
- subdued: {
9147
- true: {};
9148
- };
9149
9584
  /**
9150
9585
  * Specifies the variant of the status
9151
9586
  */
@@ -9154,6 +9589,7 @@ declare const styles$5: {
9154
9589
  text: {
9155
9590
  backgroundColor: "transparent";
9156
9591
  };
9592
+ subdued: {};
9157
9593
  };
9158
9594
  }>;
9159
9595
  dot: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -9187,12 +9623,16 @@ declare const status$1: {
9187
9623
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9188
9624
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9189
9625
  };
9190
- negative: {
9626
+ danger: {
9627
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9628
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9629
+ };
9630
+ inverted: {
9191
9631
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9192
9632
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9193
9633
  };
9194
9634
  neutral: {
9195
- backgroundColor: "transparent";
9635
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9196
9636
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9197
9637
  };
9198
9638
  };
@@ -9206,14 +9646,12 @@ declare const status$1: {
9206
9646
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9207
9647
  };
9208
9648
  };
9209
- subdued: {
9210
- true: {};
9211
- };
9212
9649
  variant: {
9213
9650
  solid: {};
9214
9651
  text: {
9215
9652
  backgroundColor: "transparent";
9216
9653
  };
9654
+ subdued: {};
9217
9655
  };
9218
9656
  }>;
9219
9657
  dot: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -9795,10 +10233,6 @@ export declare const title: {
9795
10233
  };
9796
10234
  lineHeight: {
9797
10235
  values: {
9798
- hero: {
9799
- default: string;
9800
- conditions: Record<"xs" | "xl" | "md" | "lg", string>;
9801
- };
9802
10236
  xs: {
9803
10237
  default: string;
9804
10238
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
@@ -9819,6 +10253,10 @@ export declare const title: {
9819
10253
  default: string;
9820
10254
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
9821
10255
  };
10256
+ hero: {
10257
+ default: string;
10258
+ conditions: Record<"xs" | "xl" | "md" | "lg", string>;
10259
+ };
9822
10260
  };
9823
10261
  staticScale: {
9824
10262
  hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -9832,10 +10270,6 @@ export declare const title: {
9832
10270
  };
9833
10271
  fontSize: {
9834
10272
  values: {
9835
- hero: {
9836
- default: string;
9837
- conditions: Record<"xs" | "xl" | "md" | "lg", string>;
9838
- };
9839
10273
  xs: {
9840
10274
  default: string;
9841
10275
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
@@ -9856,6 +10290,10 @@ export declare const title: {
9856
10290
  default: string;
9857
10291
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
9858
10292
  };
10293
+ hero: {
10294
+ default: string;
10295
+ conditions: Record<"xs" | "xl" | "md" | "lg", string>;
10296
+ };
9859
10297
  };
9860
10298
  staticScale: {
9861
10299
  hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -10629,6 +11067,9 @@ declare const accordionStyles: {
10629
11067
  ":hover": {
10630
11068
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10631
11069
  };
11070
+ ":active": {
11071
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
11072
+ };
10632
11073
  ":disabled": {
10633
11074
  borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10634
11075
  backgroundColor: "transparent";
@@ -10673,6 +11114,9 @@ export declare const accordion: {
10673
11114
  ":hover": {
10674
11115
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10675
11116
  };
11117
+ ":active": {
11118
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
11119
+ };
10676
11120
  ":disabled": {
10677
11121
  borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10678
11122
  backgroundColor: "transparent";
@@ -11815,6 +12259,8 @@ export declare const tabs: {
11815
12259
  export {
11816
12260
  checkbox$1 as checkbox,
11817
12261
  status$1 as status,
12262
+ variables as variablesDark,
12263
+ varsThemeBase as variables,
11818
12264
  };
11819
12265
 
11820
12266
  export {};