lutra 0.1.77 → 0.1.78

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/dist/css/{2-init.css → 1-init.css} +10 -0
  2. package/dist/css/lutra.css +6 -7
  3. package/dist/css/themes/DefaultTheme.css +1 -1
  4. package/package.json +1 -1
  5. package/dist/css/1-props.css +0 -577
  6. /package/dist/css/{3-base.css → 2-base.css} +0 -0
  7. /package/dist/css/{4-typo.css → 3-typo.css} +0 -0
  8. /package/dist/css/{5-layout.css → 4-layout.css} +0 -0
  9. /package/dist/css/{6-media.css → 5-media.css} +0 -0
package/dist/css/{2-init.css → 1-init.css} RENAMED
@@ -1,3 +1,13 @@
1
+ /**
2
+ * Design Token System for Lutra Components
3
+ *
4
+ * Naming Pattern: --{component}-{css-property}[-{state}][--{modifier}]
5
+ *
6
+ * Colors: subtlest, subtler, subtle, normal, strong, stronger, strongest
7
+ * States: selected, checked, disabled, invalid, valid, success, danger, warn, info, loading
8
+ * Modifiers (double-dash): --hover, --focus, --active, --visited
9
+ */
10
+
1
11
  :root {
2
12
  /* Spacing Scale */
3
13
  --base-size: 16px;
package/dist/css/lutra.css CHANGED
@@ -1,8 +1,7 @@
1
- @layer l-props, l-init, l-base, l-typo, typo, l-layout, l-media, l-default, theme, media, misc;
1
+ @layer l-init, l-base, l-typo, typo, l-layout, l-media, l-default, theme, media, misc;
2
2
 
3
- @import "./1-props.css" layer(l-props);
4
- @import "./2-init.css" layer(l-init);
5
- @import "./3-base.css" layer(l-base);
6
- @import "./4-typo.css" layer(l-typo);
7
- @import "./5-layout.css" layer(l-layout);
8
- @import "./6-media.css" layer(l-media);
3
+ @import "./1-init.css" layer(l-init);
4
+ @import "./2-base.css" layer(l-base);
5
+ @import "./3-typo.css" layer(l-typo);
6
+ @import "./4-layout.css" layer(l-layout);
7
+ @import "./5-media.css" layer(l-media);
package/dist/css/themes/DefaultTheme.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer l-props, l-init, l-base, l-typo, typo, l-layout, l-media, l-default, theme, media, misc;
1
+ @layer l-init, l-base, l-typo, typo, l-layout, l-media, l-default, theme, media, misc;
2
2
 
3
3
  @layer l-default {
4
4
  :root {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lutra",
3
- "version": "0.1.77",
3
+ "version": "0.1.78",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",
package/dist/css/1-props.css DELETED
@@ -1,577 +0,0 @@
1
- /**
2
- * Design Token System for Lutra Components
3
- *
4
- * Naming Pattern: --{component}-{css-property}[-{state}][--{modifier}]
5
- *
6
- * Colors: subtlest, subtler, subtle, normal, strong, stronger, strongest
7
- * States: selected, checked, disabled, invalid, valid, success, danger, warn, info, loading
8
- * Modifiers (double-dash): --hover, --focus, --active, --visited
9
- */
10
-
11
-
12
- /**
13
- * Spacing Scale
14
- */
15
-
16
- @property --base-size { syntax: "<length>"; inherits: true; initial-value: 16px; }
17
-
18
- @property --space-025 { syntax: "<length>"; inherits: true; initial-value: 4px; }
19
- @property --space-050 { syntax: "<length>"; inherits: true; initial-value: 8px; }
20
- @property --space-075 { syntax: "<length>"; inherits: true; initial-value: 12px; }
21
- @property --space-100 { syntax: "<length>"; inherits: true; initial-value: 16px; }
22
- @property --space-125 { syntax: "<length>"; inherits: true; initial-value: 20px; }
23
- @property --space-150 { syntax: "<length>"; inherits: true; initial-value: 24px; }
24
- @property --space-175 { syntax: "<length>"; inherits: true; initial-value: 28px; }
25
- @property --space-200 { syntax: "<length>"; inherits: true; initial-value: 32px; }
26
- @property --space-225 { syntax: "<length>"; inherits: true; initial-value: 36px; }
27
- @property --space-250 { syntax: "<length>"; inherits: true; initial-value: 40px; }
28
- @property --space-300 { syntax: "<length>"; inherits: true; initial-value: 48px; }
29
- @property --space-350 { syntax: "<length>"; inherits: true; initial-value: 56px; }
30
- @property --space-400 { syntax: "<length>"; inherits: true; initial-value: 64px; }
31
- @property --space-450 { syntax: "<length>"; inherits: true; initial-value: 72px; }
32
- @property --space-500 { syntax: "<length>"; inherits: true; initial-value: 80px; }
33
- @property --space-550 { syntax: "<length>"; inherits: true; initial-value: 88px; }
34
- @property --space-600 { syntax: "<length>"; inherits: true; initial-value: 96px; }
35
- @property --space-700 { syntax: "<length>"; inherits: true; initial-value: 104px; }
36
- @property --space-800 { syntax: "<length>"; inherits: true; initial-value: 112px; }
37
- @property --space-900 { syntax: "<length>"; inherits: true; initial-value: 120px; }
38
- @property --space-1000 { syntax: "<length>"; inherits: true; initial-value: 128px; }
39
-
40
- @property --space-xxs { syntax: "<length>"; inherits: true; initial-value: 4px; }
41
- @property --space-xs { syntax: "<length>"; inherits: true; initial-value: 4px; }
42
- @property --space-sm { syntax: "<length>"; inherits: true; initial-value: 8px; }
43
- @property --space-md { syntax: "<length>"; inherits: true; initial-value: 16px; }
44
- @property --space-lg { syntax: "<length>"; inherits: true; initial-value: 24px; }
45
- @property --space-xl { syntax: "<length>"; inherits: true; initial-value: 32px; }
46
- @property --space-xxl { syntax: "<length>"; inherits: true; initial-value: 48px; }
47
- @property --space-xxxl { syntax: "<length>"; inherits: true; initial-value: 64px; }
48
- @property --space-xxxxl { syntax: "<length>"; inherits: true; initial-value: 80px; }
49
-
50
- /**
51
- * Fonts
52
- */
53
-
54
- @property --font-family { syntax: "<string>#"; inherits: true; initial-value: "sans-serif"; }
55
- @property --font-family-heading { syntax: "<string>#"; inherits: true; initial-value: "sans-serif"; }
56
- @property --font-family-mono { syntax: "<string>#"; inherits: true; initial-value: "monospace"; }
57
- @property --font-scale { syntax: "<number>"; inherits: true; initial-value: 1.2; }
58
- @property --font-size-base { syntax: "<length>"; inherits: true; initial-value: 16px; }
59
-
60
- /* font size */
61
- @property --font-size-xs { syntax: "<length>"; inherits: true; initial-value: 12px; }
62
- @property --font-size-sm { syntax: "<length>"; inherits: true; initial-value: 14px; }
63
- @property --font-size-p { syntax: "<length>"; inherits: true; initial-value: 16px; }
64
- @property --font-size-h6 { syntax: "<length>"; inherits: true; initial-value: 20px; }
65
- @property --font-size-h5 { syntax: "<length>"; inherits: true; initial-value: 24px; }
66
- @property --font-size-h4 { syntax: "<length>"; inherits: true; initial-value: 28px; }
67
- @property --font-size-h3 { syntax: "<length>"; inherits: true; initial-value: 32px; }
68
- @property --font-size-h2 { syntax: "<length>"; inherits: true; initial-value: 40px; }
69
- @property --font-size-h1 { syntax: "<length>"; inherits: true; initial-value: 48px; }
70
- @property --font-size-hero { syntax: "<length>"; inherits: true; initial-value: 64px; }
71
- @property --font-size-jumbo { syntax: "<length>"; inherits: true; initial-value: 80px; }
72
-
73
- /* font weight */
74
- @property --font-weight-thin { syntax: "<number>"; inherits: true; initial-value: 300; }
75
- @property --font-weight-light { syntax: "<number>"; inherits: true; initial-value: 400; }
76
- @property --font-weight-normal { syntax: "<number>"; inherits: true; initial-value: 500; }
77
- @property --font-weight-medium { syntax: "<number>"; inherits: true; initial-value: 600; }
78
- @property --font-weight-semibold { syntax: "<number>"; inherits: true; initial-value: 700; }
79
- @property --font-weight-bold { syntax: "<number>"; inherits: true; initial-value: 800; }
80
- @property --font-weight-black { syntax: "<number>"; inherits: true; initial-value: 900; }
81
-
82
- @property --font-weight-p { syntax: "<number>"; inherits: true; initial-value: 400; }
83
- @property --font-weight-h6 { syntax: "<number>"; inherits: true; initial-value: 500; }
84
- @property --font-weight-h5 { syntax: "<number>"; inherits: true; initial-value: 600; }
85
- @property --font-weight-h4 { syntax: "<number>"; inherits: true; initial-value: 600; }
86
- @property --font-weight-h3 { syntax: "<number>"; inherits: true; initial-value: 600; }
87
- @property --font-weight-h2 { syntax: "<number>"; inherits: true; initial-value: 700; }
88
- @property --font-weight-h1 { syntax: "<number>"; inherits: true; initial-value: 800; }
89
- @property --font-weight-hero { syntax: "<number>"; inherits: true; initial-value: 800; }
90
-
91
- /* line height */
92
- @property --font-line-height { syntax: "<number>"; inherits: true; initial-value: 1.5; }
93
- @property --font-line-height-tight { syntax: "<number>"; inherits: true; initial-value: 1.2; }
94
- @property --font-line-height-heading { syntax: "<number>"; inherits: true; initial-value: 1.5; }
95
- @property --font-line-height-heading-tight { syntax: "<number>"; inherits: true; initial-value: 1.2; }
96
- @property --font-line-height-mono { syntax: "<number>"; inherits: true; initial-value: 1.5; }
97
-
98
- /* text color */
99
- @property --text-color-p { syntax: "*"; inherits: true; initial-value: #333333; }
100
- @property --text-color-p-subtle { syntax: "*"; inherits: true; initial-value: #666666; }
101
- @property --text-color-p-subtler { syntax: "*"; inherits: true; initial-value: #999999; }
102
- @property --text-color-p-subtlest { syntax: "*"; inherits: true; initial-value: #cccccc; }
103
-
104
- @property --text-color-heading { syntax: "*"; inherits: true; initial-value: #333333; }
105
- @property --text-color-h6 { syntax: "*"; inherits: true; initial-value: #333333; }
106
- @property --text-color-h5 { syntax: "*"; inherits: true; initial-value: #333333; }
107
- @property --text-color-h4 { syntax: "*"; inherits: true; initial-value: #333333; }
108
- @property --text-color-h3 { syntax: "*"; inherits: true; initial-value: #333333; }
109
- @property --text-color-h2 { syntax: "*"; inherits: true; initial-value: #333333; }
110
- @property --text-color-h1 { syntax: "*"; inherits: true; initial-value: #333333; }
111
- @property --text-color-hero { syntax: "*"; inherits: true; initial-value: #333333; }
112
-
113
- /* links */
114
-
115
- @property --link-text-decoration { syntax: "*"; inherits: true; initial-value: none; }
116
- @property --link-text-decoration-hover { syntax: "*"; inherits: true; initial-value: underline; }
117
-
118
- @property --link-color { syntax: "*"; inherits: true; initial-value: #2563eb; }
119
- @property --link-color-visited { syntax: "*"; inherits: true; initial-value: #7c3aed; }
120
- @property --link-color-active { syntax: "*"; inherits: true; initial-value: #1d4ed8; }
121
- @property --link-color-hover { syntax: "*"; inherits: true; initial-value: #1d4ed8; }
122
- @property --link-color-disabled { syntax: "*"; inherits: true; initial-value: #cccccc; }
123
- @property --link-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
124
-
125
- @property --link-icon-size { syntax: "*"; inherits: true; initial-value: 24px; }
126
- @property --link-icon-order { syntax: "<number>"; inherits: true; initial-value: 1; }
127
-
128
- /**
129
- * Borders
130
- */
131
-
132
- @property --border-radius-scale { syntax: "<number>"; inherits: true; initial-value: 1.2; }
133
- @property --border-radius-base { syntax: "<length>"; inherits: true; initial-value: 8px; }
134
- @property --border-radius-sm { syntax: "<length>"; inherits: true; initial-value: 4px; }
135
- @property --border-radius-lg { syntax: "<length>"; inherits: true; initial-value: 12px; }
136
- @property --border-size-thin { syntax: "<length>"; inherits: true; initial-value: 1px; }
137
- @property --border-size-thick { syntax: "<length>"; inherits: true; initial-value: 2px; }
138
- @property --border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
139
-
140
- @property --border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
141
- @property --border-color-subtle { syntax: "*"; inherits: true; initial-value: #e2e8f0; }
142
- @property --border-color-strong { syntax: "*"; inherits: true; initial-value: #111111; }
143
- @property --border-color-stronger { syntax: "*"; inherits: true; initial-value: #111111; }
144
-
145
- @property --border-color-active { syntax: "*"; inherits: true; initial-value: #2563eb; }
146
- @property --border-color-inactive { syntax: "*"; inherits: true; initial-value: #d1d5db; }
147
- @property --border-color-disabled { syntax: "*"; inherits: true; initial-value: #d1d5db; }
148
- @property --border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
149
- @property --border-color-invalid { syntax: "*"; inherits: true; initial-value: #dc2626; }
150
- @property --border-color-valid { syntax: "*"; inherits: true; initial-value: #16a34a; }
151
- @property --border-color-success { syntax: "*"; inherits: true; initial-value: #16a34a; }
152
- @property --border-color-danger { syntax: "*"; inherits: true; initial-value: #dc2626; }
153
- @property --border-color-warn { syntax: "*"; inherits: true; initial-value: #ca8a04; }
154
- @property --border-color-info { syntax: "*"; inherits: true; initial-value: #2563eb; }
155
- @property --border-color-selected { syntax: "*"; inherits: true; initial-value: #2563eb; }
156
- @property --border-color-interest { syntax: "*"; inherits: true; initial-value: #7c3aed; }
157
- @property --border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
158
-
159
- /**
160
- * Forms
161
- */
162
-
163
- @property --form-background { syntax: "*"; inherits: true; initial-value: #ffffff; }
164
- @property --form-background-actions { syntax: "*"; inherits: true; initial-value: #ffffff; }
165
- @property --form-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
166
- @property --form-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
167
- @property --form-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
168
- @property --form-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
169
-
170
- @property --form-field-gap { syntax: "<length>"; inherits: true; initial-value: 24px; }
171
- @property --form-label-gap { syntax: "<length>"; inherits: true; initial-value: 8px; }
172
- @property --form-section-gap { syntax: "<length>"; inherits: true; initial-value: 32px; }
173
- @property --form-title-gap { syntax: "<length>"; inherits: true; initial-value: 16px; }
174
- @property --form-title-padding-block-end { syntax: "<length>"; inherits: true; initial-value: 8px; }
175
- @property --form-field-inside-gap { syntax: "<length>"; inherits: true; initial-value: 4px; }
176
- @property --form-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
177
- @property --form-padding-inline { syntax: "<length>"; inherits: true; initial-value: 32px; }
178
-
179
- /**
180
- * Fields
181
- */
182
-
183
- @property --field-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
184
-
185
- @property --field-background-active { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
186
- @property --field-background-inactive { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
187
- @property --field-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
188
- @property --field-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
189
- @property --field-background-invalid { syntax: "<color>"; inherits: true; initial-value: #fef2f2; }
190
- @property --field-background-valid { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
191
- @property --field-background-success { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
192
- @property --field-background-danger { syntax: "<color>"; inherits: true; initial-value: #fef2f2; }
193
- @property --field-background-warn { syntax: "<color>"; inherits: true; initial-value: #fefce8; }
194
- @property --field-background-info { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
195
- @property --field-background-selected { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
196
- @property --field-background-interest { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
197
- @property --field-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
198
-
199
- @property --field-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
200
- @property --field-border-color-active { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
201
- @property --field-border-color-inactive { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
202
- @property --field-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
203
- @property --field-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
204
- @property --field-border-color-invalid { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
205
- @property --field-border-color-valid { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
206
- @property --field-border-color-success { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
207
- @property --field-border-color-danger { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
208
- @property --field-border-color-warn { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
209
- @property --field-border-color-info { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
210
- @property --field-border-color-selected { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
211
- @property --field-border-color-interest { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
212
- @property --field-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
213
-
214
- @property --field-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
215
- @property --field-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
216
- @property --field-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
217
-
218
- @property --field-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
219
- @property --field-color-active { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
220
- @property --field-color-inactive { syntax: "<color>"; inherits: true; initial-value: #666666; }
221
- @property --field-color-disabled { syntax: "<color>"; inherits: true; initial-value: #cccccc; }
222
- @property --field-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
223
- @property --field-color-invalid { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
224
- @property --field-color-valid { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
225
- @property --field-color-success { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
226
- @property --field-color-danger { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
227
- @property --field-color-warn { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
228
- @property --field-color-info { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
229
- @property --field-color-selected { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
230
- @property --field-color-interest { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
231
- @property --field-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
232
-
233
- @property --field-label-color { syntax: "<color>"; inherits: true; initial-value: #111111; }
234
- @property --field-label-font-size { syntax: "*"; inherits: true; initial-value: 16px; }
235
- @property --field-label-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
236
-
237
- @property --field-placeholder-color { syntax: "<color>"; inherits: true; initial-value: #999999; }
238
- @property --field-padding-inline { syntax: "*"; inherits: true; initial-value: 8px; }
239
- @property --field-padding-block { syntax: "*"; inherits: true; initial-value: 8px; }
240
-
241
- @property --field-icon-size { syntax: "*"; inherits: true; initial-value: 24px; }
242
- @property --field-icon-order { syntax: "<number>"; inherits: true; initial-value: 1; }
243
- @property --field-group-gap { syntax: "<length>"; inherits: true; initial-value: 8px; }
244
-
245
- /**
246
- * Checkbox and Radio
247
- */
248
-
249
- @property --checkbox-size { syntax: "*"; inherits: true; initial-value: 18px; }
250
- @property --checkbox-border-radius { syntax: "*"; inherits: true; initial-value: 4px; }
251
- @property --checkbox-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
252
- @property --checkbox-background-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
253
- @property --checkbox-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
254
- @property --checkbox-border-color-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
255
- @property --checkbox-indicator-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
256
-
257
- /**
258
- * Toggle
259
- */
260
-
261
- @property --toggle-width { syntax: "*"; inherits: true; initial-value: 44px; }
262
- @property --toggle-height { syntax: "*"; inherits: true; initial-value: 24px; }
263
- @property --toggle-background { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
264
- @property --toggle-background-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
265
- @property --toggle-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
266
- @property --toggle-border-color-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
267
- @property --toggle-thumb-size { syntax: "*"; inherits: true; initial-value: 18px; }
268
- @property --toggle-thumb-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
269
- @property --toggle-thumb-shadow { syntax: "*"; inherits: true; initial-value: 0 1px 3px rgba(0, 0, 0, 0.2); }
270
-
271
- /**
272
- * Button Component
273
- */
274
-
275
- @property --button-base-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
276
- @property --button-base-color-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
277
-
278
- /* primary */
279
-
280
- @property --button-submit-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
281
- @property --button-submit-color-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
282
- @property --button-submit-color-disabled { syntax: "<color>"; inherits: true; initial-value: #cccccc; }
283
- @property --button-submit-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
284
- @property --button-submit-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
285
-
286
- @property --button-submit-background { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
287
- @property --button-submit-background-hover { syntax: "<color>"; inherits: true; initial-value: #1d4ed8; }
288
- @property --button-submit-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
289
- @property --button-submit-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
290
- @property --button-submit-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
291
-
292
- @property --button-submit-border-color { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
293
- @property --button-submit-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #1d4ed8; }
294
- @property --button-submit-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
295
- @property --button-submit-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
296
- @property --button-submit-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
297
-
298
- /* action */
299
- @property --button-action-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
300
- @property --button-action-color-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
301
- @property --button-action-color-disabled { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
302
- @property --button-action-color-focus { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
303
- @property --button-action-color-loading { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
304
-
305
- @property --button-action-background { syntax: "<color>"; inherits: true; initial-value: #111111; }
306
- @property --button-action-background-hover { syntax: "<color>"; inherits: true; initial-value: #111111; }
307
- @property --button-action-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
308
- @property --button-action-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
309
- @property --button-action-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
310
-
311
- @property --button-action-border-color { syntax: "<color>"; inherits: true; initial-value: #111111; }
312
- @property --button-action-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #111111; }
313
- @property --button-action-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #111111; }
314
- @property --button-action-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
315
- @property --button-action-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
316
-
317
- /* danger */
318
- @property --button-danger-color { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
319
- @property --button-danger-color-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
320
- @property --button-danger-color-disabled { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
321
- @property --button-danger-color-focus { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
322
- @property --button-danger-color-loading { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
323
-
324
- @property --button-danger-background { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
325
- @property --button-danger-background-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
326
- @property --button-danger-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
327
- @property --button-danger-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
328
- @property --button-danger-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
329
-
330
- @property --button-danger-border-color { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
331
- @property --button-danger-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
332
- @property --button-danger-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
333
- @property --button-danger-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
334
- @property --button-danger-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
335
-
336
- /* success */
337
- @property --button-success-color { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
338
- @property --button-success-color-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
339
- @property --button-success-color-disabled { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
340
- @property --button-success-color-focus { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
341
- @property --button-success-color-loading { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
342
-
343
- @property --button-success-background { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
344
- @property --button-success-background-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
345
- @property --button-success-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
346
- @property --button-success-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
347
- @property --button-success-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
348
-
349
- @property --button-success-border-color { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
350
- @property --button-success-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
351
- @property --button-success-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
352
- @property --button-success-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
353
- @property --button-success-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
354
-
355
- @property --button-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
356
- @property --button-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
357
- @property --button-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
358
-
359
- @property --button-padding-inline { syntax: "*"; inherits: true; initial-value: 16px; }
360
- @property --button-padding-block { syntax: "*"; inherits: true; initial-value: 8px; }
361
- @property --button-padding { syntax: "*"; inherits: true; initial-value: 8px; }
362
- @property --button-border { syntax: "*"; inherits: true; initial-value: none; }
363
-
364
- @property --button-font-weight { syntax: "<number>"; inherits: true; initial-value: 500; }
365
-
366
- @property --button-icon-size { syntax: "*"; inherits: true; initial-value: 24px; }
367
- @property --button-icon-order { syntax: "<number>"; inherits: true; initial-value: 1; }
368
-
369
- /**
370
- * Shadows
371
- */
372
-
373
- @property --shadow-color { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
374
- @property --shadow-base { syntax: "*"; inherits: true; initial-value: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
375
-
376
- /**
377
- * Code
378
- */
379
-
380
- @property --code-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
381
- @property --code-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
382
- @property --code-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
383
- @property --code-border-size { syntax: "<length>"; inherits: true; initial-value: 0; }
384
- @property --code-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
385
- @property --code-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
386
-
387
- @property --code-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
388
- @property --code-padding-block { syntax: "<length>"; inherits: true; initial-value: 8px; }
389
-
390
- /**
391
- * Backgrounds
392
- */
393
-
394
- @property --background-body { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
395
- @property --background-main { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
396
- @property --background-main-subtle { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
397
-
398
- @property --background-active { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
399
- @property --background-inactive { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
400
- @property --background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
401
- @property --background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
402
- @property --background-invalid { syntax: "<color>"; inherits: true; initial-value: #fef2f2; }
403
- @property --background-valid { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
404
- @property --background-success { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
405
- @property --background-danger { syntax: "<color>"; inherits: true; initial-value: #fef2f2; }
406
- @property --background-warn { syntax: "<color>"; inherits: true; initial-value: #fefce8; }
407
- @property --background-info { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
408
- @property --background-selected { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
409
- @property --background-interest { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
410
- @property --background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
411
-
412
- /**
413
- * Status Colors
414
- */
415
-
416
- @property --status-default-background { syntax: "<color>"; inherits: true; initial-value: #111111; }
417
- @property --status-default-color { syntax: "<color>"; inherits: true; initial-value: #111111; }
418
- @property --status-ok-background { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
419
- @property --status-ok-color { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
420
- @property --status-alert-background { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
421
- @property --status-alert-color { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
422
- @property --status-warn-background { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
423
- @property --status-warn-color { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
424
- @property --status-info-background { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
425
- @property --status-info-color { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
426
- @property --status-task-background { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
427
- @property --status-task-color { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
428
-
429
- /**
430
- * Focus
431
- */
432
-
433
- @property --focus-ring { syntax: "*"; inherits: true; initial-value: 2px solid #2563eb; }
434
- @property --focus-ring-size { syntax: "<length>"; inherits: true; initial-value: 2px; }
435
- @property --focus-ring-color { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
436
- @property --focus-ring-color-invalid { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
437
- @property --focus-ring-offset { syntax: "<length>"; inherits: true; initial-value: 0px; }
438
-
439
- /**
440
- * Transitions
441
- */
442
-
443
- @property --transition-duration-fast { syntax: "<time>"; inherits: true; initial-value: 0.15s; }
444
- @property --transition-duration-base { syntax: "<time>"; inherits: true; initial-value: 0.3s; }
445
- @property --transition-duration-slow { syntax: "<time>"; inherits: true; initial-value: 0.5s; }
446
- @property --transition-timing-function { syntax: "*"; inherits: true; initial-value: cubic-bezier(0.4, 0, 0.2, 1); }
447
-
448
- /**
449
- * Tooltips
450
- */
451
-
452
- @property --tooltip-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
453
- @property --tooltip-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
454
- @property --tooltip-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
455
- @property --tooltip-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
456
- @property --tooltip-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 8px rgba(0, 0, 0, 0.15); }
457
-
458
- /**
459
- * Toast (inherits from surface system)
460
- */
461
-
462
- @property --toast-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
463
- @property --toast-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
464
- @property --toast-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
465
- @property --toast-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
466
- @property --toast-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
467
- @property --toast-padding-block { syntax: "<length>"; inherits: true; initial-value: 12px; }
468
- @property --toast-gap { syntax: "<length>"; inherits: true; initial-value: 12px; }
469
- @property --toast-min-width { syntax: "<length>"; inherits: true; initial-value: 320px; }
470
- @property --toast-max-width { syntax: "<length>"; inherits: true; initial-value: 448px; }
471
- @property --toast-title-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
472
- @property --toast-title-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
473
- @property --toast-text-color { syntax: "*"; inherits: true; initial-value: #666666; }
474
- @property --toast-icon-size { syntax: "<length>"; inherits: true; initial-value: 20px; }
475
- @property --toast-offset { syntax: "<length>"; inherits: true; initial-value: 16px; }
476
-
477
- /**
478
- * Menu
479
- */
480
-
481
- @property --menu-background-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
482
- @property --menu-background-color-hover { syntax: "<color>"; inherits: true; initial-value: #dde8f2; }
483
- @property --menu-text-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
484
- @property --menu-text-color-subtle { syntax: "*"; inherits: true; initial-value: #666666; }
485
- @property --menu-border-color { syntax: "*"; inherits: true; initial-value: #cccccc; }
486
- @property --menu-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
487
- @property --menu-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
488
- @property --menu-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
489
-
490
- /**
491
- * Table
492
- */
493
-
494
- @property --table-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
495
- @property --table-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
496
- @property --table-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
497
- @property --table-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
498
-
499
- @property --table-cell-padding-inline { syntax: "<length>"; inherits: true; initial-value: 12px; }
500
- @property --table-cell-padding-block { syntax: "<length>"; inherits: true; initial-value: 8px; }
501
-
502
- @property --table-header-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
503
- @property --table-header-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
504
- @property --table-header-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
505
-
506
- @property --table-row-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
507
- @property --table-row-background-even { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
508
- @property --table-row-background-hover { syntax: "<color>"; inherits: true; initial-value: #f1f5f9; }
509
-
510
- @property --table-cell-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
511
-
512
- /**
513
- * Data List
514
- */
515
-
516
- @property --data-list-gap { syntax: "<length>"; inherits: true; initial-value: 12px; }
517
-
518
- /**
519
- * Modal
520
- */
521
-
522
- @property --modal-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
523
- @property --modal-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
524
- @property --modal-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
525
- @property --modal-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
526
- @property --modal-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
527
- @property --modal-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
528
-
529
- @property --modal-padding-inline { syntax: "<length>"; inherits: true; initial-value: 24px; }
530
- @property --modal-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
531
- @property --modal-width { syntax: "*"; inherits: true; initial-value: fit-content; }
532
- @property --modal-min-width { syntax: "*"; inherits: true; initial-value: auto; }
533
- @property --modal-max-width { syntax: "<length>"; inherits: true; initial-value: 640px; }
534
- @property --modal-max-height { syntax: "<length>"; inherits: true; initial-value: 600px; }
535
- @property --modal-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
536
-
537
- @property --modal-actions-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
538
- @property --modal-actions-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
539
- @property --modal-actions-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
540
- @property --modal-actions-padding-block { syntax: "<length>"; inherits: true; initial-value: 16px; }
541
-
542
- /**
543
- * Shared Surface System
544
- * These provide consistent defaults across all overlay components (Popover, Modal, Menu, Toast)
545
- */
546
-
547
- @property --surface-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
548
- @property --surface-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
549
- @property --surface-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
550
- @property --surface-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
551
-
552
- /**
553
- * Popover Component
554
- */
555
-
556
- @property --popover-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
557
- @property --popover-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
558
- @property --popover-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
559
- @property --popover-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
560
- @property --popover-width { syntax: "*"; inherits: true; initial-value: max-content; }
561
- @property --popover-max-width { syntax: "*"; inherits: true; initial-value: 1024px; }
562
- @property --popover-max-height { syntax: "*"; inherits: true; initial-value: 768px; }
563
-
564
- /**
565
- * Overlay System
566
- */
567
-
568
- @property --overlay-z-index { syntax: "<integer>"; inherits: true; initial-value: 1000; }
569
- @property --overlay-gap { syntax: "<length>"; inherits: true; initial-value: 12px; }
570
- @property --overlay-offset { syntax: "<length>"; inherits: true; initial-value: 16px; }
571
-
572
- /**
573
- * Scrim/Backdrop (shared across overlays)
574
- */
575
-
576
- @property --scrim-background { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.5); }
577
- @property --scrim-backdrop-filter { syntax: "*"; inherits: true; initial-value: blur(2px); }
/package/dist/css/{3-base.css → 2-base.css} RENAMED
File without changes
/package/dist/css/{4-typo.css → 3-typo.css} RENAMED
File without changes
/package/dist/css/{5-layout.css → 4-layout.css} RENAMED
File without changes
/package/dist/css/{6-media.css → 5-media.css} RENAMED
File without changes