@astryxdesign/theme-stone 0.0.0-bootstrap.0 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +62 -1
- package/dist/chunk-UIELT3KV.mjs +66 -0
- package/dist/icons.d.ts +3 -0
- package/dist/icons.d.ts.map +1 -0
- package/dist/icons.js +63 -0
- package/dist/icons.mjs +6 -0
- package/dist/source.d.ts +3 -0
- package/dist/source.d.ts.map +1 -0
- package/dist/source.js +713 -0
- package/dist/source.mjs +650 -0
- package/dist/stone.d.ts +11 -0
- package/dist/stone.js +195 -0
- package/dist/stone.variants.d.ts +93 -0
- package/dist/stoneTheme.d.ts +259 -0
- package/dist/stoneTheme.d.ts.map +1 -0
- package/dist/theme.css +611 -0
- package/package.json +56 -5
- package/src/icons.tsx +77 -0
- package/src/source.ts +4 -0
- package/src/stoneTheme.ts +652 -0
package/dist/source.mjs
ADDED
|
@@ -0,0 +1,650 @@
|
|
|
1
|
+
import {
|
|
2
|
+
stoneIconRegistry
|
|
3
|
+
} from "./chunk-UIELT3KV.mjs";
|
|
4
|
+
|
|
5
|
+
// src/stoneTheme.ts
|
|
6
|
+
import { defineTheme, defineSyntaxTheme } from "@astryxdesign/core/theme";
|
|
7
|
+
var INPUT_STATUS_VARS = {
|
|
8
|
+
"status:success": {
|
|
9
|
+
"--color-success": "light-dark(#7f977e, #99b298)"
|
|
10
|
+
// Green T60 / T70
|
|
11
|
+
},
|
|
12
|
+
"status:warning": {
|
|
13
|
+
"--color-warning": "light-dark(#9f8f68, #bbaa81)"
|
|
14
|
+
// Yellow T60 / T70
|
|
15
|
+
},
|
|
16
|
+
"status:error": {
|
|
17
|
+
"--color-error": "light-dark(#a58b86, #c0a5a1)"
|
|
18
|
+
// Red T60 / T70
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
var stoneSyntax = defineSyntaxTheme({
|
|
22
|
+
name: "xds-stone",
|
|
23
|
+
tokens: {
|
|
24
|
+
keyword: ["#645a72", "#b2a7c1"],
|
|
25
|
+
// Purple T40 / T70
|
|
26
|
+
string: ["#4e6357", "#9bb19a"],
|
|
27
|
+
// Teal T40 / Green T70
|
|
28
|
+
comment: ["#5e5e5e", "#ababb0"],
|
|
29
|
+
// Stone Neutral T40 / T70
|
|
30
|
+
number: ["#755752", "#bea792"],
|
|
31
|
+
// Red T40 / Orange T70
|
|
32
|
+
function: ["#506072", "#99adc6"],
|
|
33
|
+
// Blue T40 / T70
|
|
34
|
+
type: ["#645a72", "#b2a7c1"],
|
|
35
|
+
// Purple T40 / T70
|
|
36
|
+
variable: ["#5e5e5e", "#ababb0"],
|
|
37
|
+
// Stone Neutral T40 / T70
|
|
38
|
+
operator: ["#5e5e5e", "#ababb0"],
|
|
39
|
+
// Stone Neutral T40 / T70
|
|
40
|
+
constant: ["#755752", "#bea792"],
|
|
41
|
+
// Red T40 / Orange T70
|
|
42
|
+
tag: ["#775751", "#c7a39d"],
|
|
43
|
+
// Red T40 / T70
|
|
44
|
+
attribute: ["#79693f", "#b6aa90"],
|
|
45
|
+
// Yellow T45 / T70
|
|
46
|
+
property: ["#4e6357", "#94b2a0"],
|
|
47
|
+
// Teal T40 / T70
|
|
48
|
+
punctuation: ["#5e5e5e", "#ababb0"],
|
|
49
|
+
// Stone Neutral T40 / T70
|
|
50
|
+
background: ["#f3f3f5", "#171719"]
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
var stoneTheme = defineTheme({
|
|
54
|
+
name: "stone",
|
|
55
|
+
typography: {
|
|
56
|
+
scale: { base: 14, ratio: 1.25 },
|
|
57
|
+
body: {
|
|
58
|
+
family: "Figtree",
|
|
59
|
+
fallbacks: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
|
|
60
|
+
},
|
|
61
|
+
heading: {
|
|
62
|
+
family: "Montserrat",
|
|
63
|
+
fallbacks: '"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
|
64
|
+
weights: { 3: "bold", 4: "bold" }
|
|
65
|
+
},
|
|
66
|
+
code: {
|
|
67
|
+
family: "JetBrains Mono",
|
|
68
|
+
fallbacks: '"SF Mono", Monaco, Consolas, monospace'
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
motion: { fast: 125, medium: 300, slow: 700, ratio: 0.75 },
|
|
72
|
+
syntax: stoneSyntax,
|
|
73
|
+
tokens: {
|
|
74
|
+
// =========================================================================
|
|
75
|
+
// Colors — warm stone palette
|
|
76
|
+
// Core: #28282A, #84848B, #D8D8DB, #f3f3f5, #FFFFFF
|
|
77
|
+
// =========================================================================
|
|
78
|
+
// Core semantic — all neutrals H=291
|
|
79
|
+
// Stone 900 T=16 C=1.4, Stone 500 T=55 C=4, Stone 300 T=86 C=1.6, Stone 100 T=96 C=1
|
|
80
|
+
"--color-accent": ["#25252a", "#f3f3f5"],
|
|
81
|
+
// light: Stone Neutral T15
|
|
82
|
+
"--color-accent-muted": ["#25252a14", "#f3f3f5"],
|
|
83
|
+
// light: Stone Neutral T15 · 8%
|
|
84
|
+
"--color-neutral": ["#25252a0f", "#f3f3f5"],
|
|
85
|
+
// light: Stone Neutral T15 · 6%
|
|
86
|
+
"--color-background-surface": ["#ffffff", "#1b1b1f"],
|
|
87
|
+
// dark: Stone Neutral T10
|
|
88
|
+
"--color-background-body": ["#f3f3f5", "#111015"],
|
|
89
|
+
// dark: Stone Neutral T5
|
|
90
|
+
"--color-overlay": ["#25252a80", "#28282a"],
|
|
91
|
+
// light: Stone Neutral T15 · 50%
|
|
92
|
+
"--color-overlay-hover": ["#25252a0d", "#f3f3f5"],
|
|
93
|
+
// light: Stone Neutral T15 · 5%
|
|
94
|
+
"--color-overlay-pressed": ["#25252a1a", "#f3f3f5"],
|
|
95
|
+
// light: Stone Neutral T15 · 10%
|
|
96
|
+
"--color-background-muted": ["#e2e2e8", "#3b3b3f"],
|
|
97
|
+
// light: Stone Neutral T90
|
|
98
|
+
// Text — H=291
|
|
99
|
+
"--color-text-primary": ["#25252a", "#f3f3f5"],
|
|
100
|
+
// light: Stone Neutral T15
|
|
101
|
+
"--color-text-secondary": ["#83838a", "#9d9da3"],
|
|
102
|
+
// T55 C=4 / T65 C=3
|
|
103
|
+
"--color-text-disabled": ["#d7d7da", "#5e5e61"],
|
|
104
|
+
// T86 C=1.6 / T40 C=2
|
|
105
|
+
"--color-text-accent": ["#25252a", "#f3f3f5"],
|
|
106
|
+
// light: Stone Neutral T15
|
|
107
|
+
"--color-on-dark": "#FFFFFF",
|
|
108
|
+
"--color-on-light": ["#25252a", "#28282a"],
|
|
109
|
+
// light: Stone Neutral T15
|
|
110
|
+
"--color-on-accent": ["#ffffff", "#25252a"],
|
|
111
|
+
// dark: Stone Neutral T15
|
|
112
|
+
// Text on top of matching status surface (badge fill, banner content).
|
|
113
|
+
"--color-on-success": ["#374c36", "#d0e9ce"],
|
|
114
|
+
// Green T30 / T90
|
|
115
|
+
"--color-on-error": ["#58413e", "#f9dcd7"],
|
|
116
|
+
// Red T30 / T90
|
|
117
|
+
"--color-on-warning": ["#524622", "#f4e1b7"],
|
|
118
|
+
// Yellow T30 / T90
|
|
119
|
+
// Icon — H=291
|
|
120
|
+
"--color-icon-accent": ["#25252a", "#f3f3f5"],
|
|
121
|
+
// light: Stone Neutral T15
|
|
122
|
+
"--color-icon-primary": ["#25252a", "#f3f3f5"],
|
|
123
|
+
// light: Stone Neutral T15
|
|
124
|
+
"--color-icon-secondary": ["#83838a", "#9d9da3"],
|
|
125
|
+
// T55 C=4 / T65 C=3
|
|
126
|
+
"--color-icon-disabled": ["#d7d7da", "#5e5e61"],
|
|
127
|
+
// T86 C=1.6 / T40 C=2
|
|
128
|
+
// Surface variants — H=291
|
|
129
|
+
"--color-background-card": ["#FFFFFF", "#242325"],
|
|
130
|
+
// T14
|
|
131
|
+
"--color-background-popover": ["#ffffff", "#25252a"],
|
|
132
|
+
// dark: Stone Neutral T15
|
|
133
|
+
"--color-background-inverted": ["#25252a", "#f3f3f5"],
|
|
134
|
+
// light: Stone Neutral T15
|
|
135
|
+
// Status / Sentiment — T50 from palette for icons/borders (visible color)
|
|
136
|
+
"--color-success": ["#374c36", "#b4cdb2"],
|
|
137
|
+
// Green T30 / T80
|
|
138
|
+
"--color-success-muted": ["#d0e9ce", "#b4cdb2"],
|
|
139
|
+
// Green T90 / T80
|
|
140
|
+
"--color-error": ["#58413e", "#dcc0bc"],
|
|
141
|
+
// Red T30 / T80
|
|
142
|
+
"--color-error-muted": ["#f9dcd7", "#dcc0bc"],
|
|
143
|
+
// Red T90 / T80
|
|
144
|
+
"--color-warning": ["#524622", "#d7c59c"],
|
|
145
|
+
// Yellow T30 / T80
|
|
146
|
+
"--color-warning-muted": ["#f4e1b7", "#d7c59c"],
|
|
147
|
+
// Yellow T90 / T80
|
|
148
|
+
// Border — H=291
|
|
149
|
+
"--color-border": ["#e2e2e8", "#f3f3f5"],
|
|
150
|
+
// light: Stone Neutral T90
|
|
151
|
+
"--color-border-emphasized": ["#83838a", "#5e5e61"],
|
|
152
|
+
// T55 C=4 / T40 C=2
|
|
153
|
+
// Effects — H=291
|
|
154
|
+
"--color-skeleton": ["#d4d4da", "#5e5e64"],
|
|
155
|
+
// T85 / T40 from H=291 C=3
|
|
156
|
+
"--color-shadow": ["#25252a1a", "#000000"],
|
|
157
|
+
// light: Stone Neutral T15 · 10%
|
|
158
|
+
"--color-tint-hover": ["black", "white"],
|
|
159
|
+
// Typography override
|
|
160
|
+
"--text-supporting-size": "12px",
|
|
161
|
+
// Categorical hues
|
|
162
|
+
// Light: T90 solid bg + T30 text (pastel surface, dark text)
|
|
163
|
+
// Dark: T35 solid bg + T90 text — snaps to canonical palette stops
|
|
164
|
+
// per theming-infra.mdc §7. T90 dark text is the SAME hex as
|
|
165
|
+
// the light-mode bg pastel — clean palette symmetry, ~6–9:1
|
|
166
|
+
// contrast on the T35 surface across all hues (passes AA Body).
|
|
167
|
+
// Borders: light T85 / dark T25 — one step inward from surface in both
|
|
168
|
+
// modes, matching the light-mode T90/T85 spacing.
|
|
169
|
+
// Categorical — Blue H=265 C=10
|
|
170
|
+
"--color-background-blue": ["#d7e4f5", "#485362"],
|
|
171
|
+
// light T90 / dark T35
|
|
172
|
+
"--color-border-blue": ["#c9d6e7", "#313c4a"],
|
|
173
|
+
// light T85 / dark T25
|
|
174
|
+
"--color-icon-blue": ["#3c4856", "#d7e4f5"],
|
|
175
|
+
// light T30 / dark T90
|
|
176
|
+
"--color-text-blue": ["#3c4856", "#d7e4f5"],
|
|
177
|
+
// Categorical — Cyan H=190 C=10
|
|
178
|
+
"--color-background-cyan": ["#cce8e5", "#3e5755"],
|
|
179
|
+
"--color-border-cyan": ["#bedad7", "#28403e"],
|
|
180
|
+
"--color-icon-cyan": ["#334b49", "#cce8e5"],
|
|
181
|
+
"--color-text-cyan": ["#334b49", "#cce8e5"],
|
|
182
|
+
// Categorical — Gray (pure neutral, C=0). Same T35/T25/T90 pattern from
|
|
183
|
+
// the neutral H=291 C=3 ramp.
|
|
184
|
+
"--color-background-gray": ["#e2e2e8", "#525257"],
|
|
185
|
+
// light: Stone Neutral T90
|
|
186
|
+
"--color-border-gray": ["#d4d4da", "#3b3b3f"],
|
|
187
|
+
// light: Stone Neutral T85
|
|
188
|
+
"--color-icon-gray": ["#46464b", "#e2e2e8"],
|
|
189
|
+
// light: Stone Neutral T30
|
|
190
|
+
"--color-text-gray": ["#46464b", "#e2e2e8"],
|
|
191
|
+
// light: Stone Neutral T30
|
|
192
|
+
// Categorical — Green H=142 C=17
|
|
193
|
+
"--color-background-green": ["#d0e9ce", "#425841"],
|
|
194
|
+
"--color-border-green": ["#c2dbc0", "#2b402b"],
|
|
195
|
+
"--color-icon-green": ["#374c36", "#d0e9ce"],
|
|
196
|
+
"--color-text-green": ["#374c36", "#d0e9ce"],
|
|
197
|
+
// Categorical — Orange H=70 C=22
|
|
198
|
+
"--color-background-orange": ["#ffdcbb", "#684d32"],
|
|
199
|
+
"--color-border-orange": ["#f1ceae", "#4f361c"],
|
|
200
|
+
"--color-icon-orange": ["#5b4227", "#ffdcbb"],
|
|
201
|
+
"--color-text-orange": ["#5b4227", "#ffdcbb"],
|
|
202
|
+
// Categorical — Pink H=340 C=9
|
|
203
|
+
"--color-background-pink": ["#f0dde8", "#5e4e57"],
|
|
204
|
+
"--color-border-pink": ["#e2cfda", "#463740"],
|
|
205
|
+
"--color-icon-pink": ["#52424c", "#f0dde8"],
|
|
206
|
+
"--color-text-pink": ["#52424c", "#f0dde8"],
|
|
207
|
+
// Categorical — Purple H=307 C=11
|
|
208
|
+
"--color-background-purple": ["#e8dff3", "#564f60"],
|
|
209
|
+
"--color-border-purple": ["#d9d1e5", "#3f3949"],
|
|
210
|
+
"--color-icon-purple": ["#4b4454", "#e8dff3"],
|
|
211
|
+
"--color-text-purple": ["#4b4454", "#e8dff3"],
|
|
212
|
+
// Categorical — Red H=33 C=11
|
|
213
|
+
"--color-background-red": ["#f9dcd7", "#644d49"],
|
|
214
|
+
"--color-border-red": ["#ebcec9", "#4c3633"],
|
|
215
|
+
"--color-icon-red": ["#58413e", "#f9dcd7"],
|
|
216
|
+
"--color-text-red": ["#58413e", "#f9dcd7"],
|
|
217
|
+
// Categorical — Teal H=158 C=9
|
|
218
|
+
"--color-background-teal": ["#d4e7dc", "#46564d"],
|
|
219
|
+
"--color-border-teal": ["#c6d9ce", "#303f36"],
|
|
220
|
+
"--color-icon-teal": ["#3b4a41", "#d4e7dc"],
|
|
221
|
+
"--color-text-teal": ["#3b4a41", "#d4e7dc"],
|
|
222
|
+
// Categorical — Yellow H=90 C=23
|
|
223
|
+
"--color-background-yellow": ["#f4e1b7", "#5e512d"],
|
|
224
|
+
"--color-border-yellow": ["#e5d3a9", "#463a18"],
|
|
225
|
+
"--color-icon-yellow": ["#524622", "#f4e1b7"],
|
|
226
|
+
"--color-text-yellow": ["#524622", "#f4e1b7"],
|
|
227
|
+
// =========================================================================
|
|
228
|
+
// Radius — clean and subtle
|
|
229
|
+
// =========================================================================
|
|
230
|
+
"--radius-none": "0.125rem",
|
|
231
|
+
"--radius-inner": "0.25rem",
|
|
232
|
+
"--radius-element": "0.5rem",
|
|
233
|
+
"--radius-container": "0.75rem",
|
|
234
|
+
"--radius-page": "1.5rem",
|
|
235
|
+
"--radius-full": "9999px",
|
|
236
|
+
// =========================================================================
|
|
237
|
+
// Shadows
|
|
238
|
+
// =========================================================================
|
|
239
|
+
"--shadow-low": "0 2px 4px #28282A0D, 0 4px 8px #28282A1A",
|
|
240
|
+
"--shadow-med": "0 2px 4px #28282A0D, 0 4px 12px #28282A1A",
|
|
241
|
+
"--shadow-high": "0 4px 6px #28282A1A, 0 12px 24px #28282A26",
|
|
242
|
+
"--shadow-inset-hover": "inset 0px 0px 0px 2px #28282A30",
|
|
243
|
+
"--shadow-inset-selected": "inset 0px 0px 0px 2px #28282A50",
|
|
244
|
+
"--shadow-inset-success": "inset 0px 0px 0px 2px #83838a30",
|
|
245
|
+
"--shadow-inset-warning": "inset 0px 0px 0px 2px #83838a30",
|
|
246
|
+
"--shadow-inset-error": "inset 0px 0px 0px 2px #83838a30"
|
|
247
|
+
},
|
|
248
|
+
components: {
|
|
249
|
+
button: {
|
|
250
|
+
base: {
|
|
251
|
+
borderRadius: "var(--radius-full)"
|
|
252
|
+
},
|
|
253
|
+
"variant:secondary": {
|
|
254
|
+
backgroundColor: "transparent",
|
|
255
|
+
borderWidth: "1.5px",
|
|
256
|
+
borderStyle: "solid",
|
|
257
|
+
borderColor: "var(--color-border-emphasized)",
|
|
258
|
+
":hover": {
|
|
259
|
+
backgroundColor: "var(--color-neutral)"
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
"variant:destructive": {
|
|
263
|
+
backgroundColor: "var(--color-background-red)",
|
|
264
|
+
color: "var(--color-text-red)"
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
// Semantic variants point at categorical hue tokens — single source of truth.
|
|
268
|
+
badge: {
|
|
269
|
+
"variant:info": {
|
|
270
|
+
backgroundColor: "var(--color-background-blue)",
|
|
271
|
+
color: "var(--color-text-blue)"
|
|
272
|
+
},
|
|
273
|
+
"variant:neutral": {
|
|
274
|
+
backgroundColor: "var(--color-background-gray)",
|
|
275
|
+
color: "var(--color-text-gray)"
|
|
276
|
+
},
|
|
277
|
+
"variant:success": {
|
|
278
|
+
backgroundColor: "var(--color-background-green)",
|
|
279
|
+
color: "var(--color-text-green)"
|
|
280
|
+
},
|
|
281
|
+
"variant:warning": {
|
|
282
|
+
backgroundColor: "var(--color-background-yellow)",
|
|
283
|
+
color: "var(--color-text-yellow)"
|
|
284
|
+
},
|
|
285
|
+
"variant:error": {
|
|
286
|
+
backgroundColor: "var(--color-background-red)",
|
|
287
|
+
color: "var(--color-text-red)"
|
|
288
|
+
}
|
|
289
|
+
},
|
|
290
|
+
// StyleX paints the banner surface from @layer priority4 (above
|
|
291
|
+
// @layer astryx-theme), so a direct backgroundColor override loses the
|
|
292
|
+
// cascade. Redefine the muted token instead so StyleX's var() resolves
|
|
293
|
+
// to the categorical bg in our scope.
|
|
294
|
+
banner: {
|
|
295
|
+
"status:info": {
|
|
296
|
+
"--color-accent-muted": "var(--color-background-blue)",
|
|
297
|
+
"--color-text-primary": "var(--color-text-blue)",
|
|
298
|
+
"--color-text-secondary": "var(--color-text-blue)",
|
|
299
|
+
"--color-accent": "var(--color-text-blue)"
|
|
300
|
+
},
|
|
301
|
+
"status:success": {
|
|
302
|
+
"--color-success-muted": "var(--color-background-green)",
|
|
303
|
+
"--color-text-primary": "var(--color-text-green)",
|
|
304
|
+
"--color-text-secondary": "var(--color-text-green)",
|
|
305
|
+
"--color-success": "var(--color-text-green)"
|
|
306
|
+
},
|
|
307
|
+
"status:warning": {
|
|
308
|
+
"--color-warning-muted": "var(--color-background-yellow)",
|
|
309
|
+
"--color-text-primary": "var(--color-text-yellow)",
|
|
310
|
+
"--color-text-secondary": "var(--color-text-yellow)",
|
|
311
|
+
"--color-warning": "var(--color-text-yellow)"
|
|
312
|
+
},
|
|
313
|
+
"status:error": {
|
|
314
|
+
"--color-error-muted": "var(--color-background-red)",
|
|
315
|
+
"--color-text-primary": "var(--color-text-red)",
|
|
316
|
+
"--color-text-secondary": "var(--color-text-red)",
|
|
317
|
+
"--color-error": "var(--color-text-red)"
|
|
318
|
+
}
|
|
319
|
+
},
|
|
320
|
+
// Fill: light = T90 (same hex as banner/badge surface — fill reads as
|
|
321
|
+
// the same color family as the matching status surface). Dark = T70.
|
|
322
|
+
// Hexes from the preview Tonal Palettes ramp. accent (default) +
|
|
323
|
+
// indeterminate both route to blue for the in-progress / loading look.
|
|
324
|
+
"progressbar-fill": {
|
|
325
|
+
"variant:accent": {
|
|
326
|
+
backgroundColor: "light-dark(#d7e4f5, #a0acbc)"
|
|
327
|
+
// Blue T90 / T70
|
|
328
|
+
},
|
|
329
|
+
"variant:success": {
|
|
330
|
+
backgroundColor: "light-dark(#d0e9ce, #9ab298)"
|
|
331
|
+
// Green T90 / T70
|
|
332
|
+
},
|
|
333
|
+
"variant:warning": {
|
|
334
|
+
backgroundColor: "light-dark(#f4e1b7, #bbaa82)"
|
|
335
|
+
// Yellow T90 / T70
|
|
336
|
+
},
|
|
337
|
+
"variant:error": {
|
|
338
|
+
backgroundColor: "light-dark(#f9dcd7, #c0a5a0)"
|
|
339
|
+
// Red T90 / T70
|
|
340
|
+
}
|
|
341
|
+
},
|
|
342
|
+
// Track default --color-background-muted reads near-body in stone;
|
|
343
|
+
// redirect to --color-skeleton so the channel stays visible.
|
|
344
|
+
"progressbar-track": {
|
|
345
|
+
base: {
|
|
346
|
+
backgroundColor: "var(--color-skeleton)"
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
// Switch off-state track reads --color-background-gray by default.
|
|
350
|
+
// Redefine it inside the switch scope to --color-skeleton, matching
|
|
351
|
+
// the ProgressBar track. The on-state reads --color-accent (unaffected);
|
|
352
|
+
// disabled-off also picks up --color-skeleton for consistency.
|
|
353
|
+
switch: {
|
|
354
|
+
base: {
|
|
355
|
+
"--color-background-gray": "var(--color-skeleton)"
|
|
356
|
+
}
|
|
357
|
+
},
|
|
358
|
+
// FieldStatus surface matches badge — see badge override above.
|
|
359
|
+
"field-status": {
|
|
360
|
+
"type:success": {
|
|
361
|
+
backgroundColor: "var(--color-background-green)"
|
|
362
|
+
},
|
|
363
|
+
"type:warning": {
|
|
364
|
+
backgroundColor: "var(--color-background-yellow)"
|
|
365
|
+
},
|
|
366
|
+
"type:error": {
|
|
367
|
+
backgroundColor: "var(--color-background-red)"
|
|
368
|
+
}
|
|
369
|
+
},
|
|
370
|
+
// Input status borders + icons across all 9 input components share the
|
|
371
|
+
// same softer T60/T70 redirection. See INPUT_STATUS_VARS above.
|
|
372
|
+
"text-input": INPUT_STATUS_VARS,
|
|
373
|
+
textarea: INPUT_STATUS_VARS,
|
|
374
|
+
"number-input": INPUT_STATUS_VARS,
|
|
375
|
+
"date-input": INPUT_STATUS_VARS,
|
|
376
|
+
"time-input": INPUT_STATUS_VARS,
|
|
377
|
+
selector: INPUT_STATUS_VARS,
|
|
378
|
+
"multi-selector": INPUT_STATUS_VARS,
|
|
379
|
+
typeahead: INPUT_STATUS_VARS,
|
|
380
|
+
tokenizer: INPUT_STATUS_VARS,
|
|
381
|
+
card: {
|
|
382
|
+
base: {
|
|
383
|
+
padding: "var(--spacing-3)"
|
|
384
|
+
}
|
|
385
|
+
},
|
|
386
|
+
section: {
|
|
387
|
+
base: {
|
|
388
|
+
padding: "var(--spacing-3)"
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
},
|
|
392
|
+
icons: stoneIconRegistry
|
|
393
|
+
});
|
|
394
|
+
var stonePalettes = {
|
|
395
|
+
neutral: {
|
|
396
|
+
hue: 291,
|
|
397
|
+
chroma: 3,
|
|
398
|
+
0: "#000000",
|
|
399
|
+
5: "#111015",
|
|
400
|
+
10: "#1b1b1f",
|
|
401
|
+
15: "#25252a",
|
|
402
|
+
20: "#303034",
|
|
403
|
+
25: "#3b3b3f",
|
|
404
|
+
30: "#46464b",
|
|
405
|
+
35: "#525257",
|
|
406
|
+
40: "#5e5e63",
|
|
407
|
+
45: "#6a6a6f",
|
|
408
|
+
50: "#77777c",
|
|
409
|
+
55: "#838388",
|
|
410
|
+
60: "#909095",
|
|
411
|
+
65: "#9d9da3",
|
|
412
|
+
70: "#ababb0",
|
|
413
|
+
75: "#b8b8be",
|
|
414
|
+
80: "#c6c6cc",
|
|
415
|
+
85: "#d4d4da",
|
|
416
|
+
90: "#e2e2e8",
|
|
417
|
+
95: "#f0f0f6",
|
|
418
|
+
100: "#ffffff"
|
|
419
|
+
},
|
|
420
|
+
blue: {
|
|
421
|
+
hue: 265,
|
|
422
|
+
chroma: 10,
|
|
423
|
+
0: "#000000",
|
|
424
|
+
5: "#04121e",
|
|
425
|
+
10: "#111c29",
|
|
426
|
+
15: "#1b2734",
|
|
427
|
+
20: "#26313f",
|
|
428
|
+
25: "#313c4a",
|
|
429
|
+
30: "#3c4856",
|
|
430
|
+
35: "#485362",
|
|
431
|
+
40: "#545f6e",
|
|
432
|
+
45: "#606c7b",
|
|
433
|
+
50: "#6c7888",
|
|
434
|
+
55: "#798595",
|
|
435
|
+
60: "#8692a2",
|
|
436
|
+
65: "#939faf",
|
|
437
|
+
70: "#a0acbd",
|
|
438
|
+
75: "#adbacb",
|
|
439
|
+
80: "#bbc8d9",
|
|
440
|
+
85: "#c9d6e7",
|
|
441
|
+
90: "#d7e4f5",
|
|
442
|
+
95: "#e7f2ff",
|
|
443
|
+
100: "#ffffff"
|
|
444
|
+
},
|
|
445
|
+
cyan: {
|
|
446
|
+
hue: 190,
|
|
447
|
+
chroma: 10,
|
|
448
|
+
0: "#000000",
|
|
449
|
+
5: "#001613",
|
|
450
|
+
10: "#071f1e",
|
|
451
|
+
15: "#122a28",
|
|
452
|
+
20: "#1d3433",
|
|
453
|
+
25: "#28403e",
|
|
454
|
+
30: "#334b49",
|
|
455
|
+
35: "#3e5755",
|
|
456
|
+
40: "#4a6361",
|
|
457
|
+
45: "#566f6d",
|
|
458
|
+
50: "#627c7a",
|
|
459
|
+
55: "#6f8986",
|
|
460
|
+
60: "#7b9693",
|
|
461
|
+
65: "#88a3a0",
|
|
462
|
+
70: "#95b1ae",
|
|
463
|
+
75: "#a3bebb",
|
|
464
|
+
80: "#b0ccc9",
|
|
465
|
+
85: "#bedad7",
|
|
466
|
+
90: "#cce8e5",
|
|
467
|
+
95: "#daf7f4",
|
|
468
|
+
100: "#ffffff"
|
|
469
|
+
},
|
|
470
|
+
green: {
|
|
471
|
+
hue: 142,
|
|
472
|
+
chroma: 17,
|
|
473
|
+
0: "#000000",
|
|
474
|
+
5: "#001700",
|
|
475
|
+
10: "#0c200a",
|
|
476
|
+
15: "#162a16",
|
|
477
|
+
20: "#213521",
|
|
478
|
+
25: "#2b402b",
|
|
479
|
+
30: "#374c36",
|
|
480
|
+
35: "#425841",
|
|
481
|
+
40: "#4e644d",
|
|
482
|
+
45: "#5a7059",
|
|
483
|
+
50: "#667d65",
|
|
484
|
+
55: "#728a71",
|
|
485
|
+
60: "#7f977e",
|
|
486
|
+
65: "#8ca48b",
|
|
487
|
+
70: "#99b298",
|
|
488
|
+
75: "#a7bfa5",
|
|
489
|
+
80: "#b4cdb2",
|
|
490
|
+
85: "#c2dbc0",
|
|
491
|
+
90: "#d0e9ce",
|
|
492
|
+
95: "#def8dc",
|
|
493
|
+
100: "#ffffff"
|
|
494
|
+
},
|
|
495
|
+
teal: {
|
|
496
|
+
hue: 158,
|
|
497
|
+
chroma: 9,
|
|
498
|
+
0: "#000000",
|
|
499
|
+
5: "#00150a",
|
|
500
|
+
10: "#101e17",
|
|
501
|
+
15: "#1a2921",
|
|
502
|
+
20: "#25342b",
|
|
503
|
+
25: "#303f36",
|
|
504
|
+
30: "#3b4a41",
|
|
505
|
+
35: "#46564d",
|
|
506
|
+
40: "#526259",
|
|
507
|
+
45: "#5e6e65",
|
|
508
|
+
50: "#6a7b71",
|
|
509
|
+
55: "#77887e",
|
|
510
|
+
60: "#83958a",
|
|
511
|
+
65: "#90a297",
|
|
512
|
+
70: "#9dafa5",
|
|
513
|
+
75: "#abbdb2",
|
|
514
|
+
80: "#b8cbc0",
|
|
515
|
+
85: "#c6d9ce",
|
|
516
|
+
90: "#d4e7dc",
|
|
517
|
+
95: "#e2f5ea",
|
|
518
|
+
100: "#ffffff"
|
|
519
|
+
},
|
|
520
|
+
yellow: {
|
|
521
|
+
hue: 90,
|
|
522
|
+
chroma: 23,
|
|
523
|
+
0: "#000000",
|
|
524
|
+
5: "#1f0f00",
|
|
525
|
+
10: "#261a00",
|
|
526
|
+
15: "#2f2500",
|
|
527
|
+
20: "#3a2f0d",
|
|
528
|
+
25: "#463a18",
|
|
529
|
+
30: "#524622",
|
|
530
|
+
35: "#5e512d",
|
|
531
|
+
40: "#6b5d39",
|
|
532
|
+
45: "#786944",
|
|
533
|
+
50: "#857650",
|
|
534
|
+
55: "#92825c",
|
|
535
|
+
60: "#9f8f68",
|
|
536
|
+
65: "#ad9c75",
|
|
537
|
+
70: "#bbaa81",
|
|
538
|
+
75: "#c9b78e",
|
|
539
|
+
80: "#d7c59c",
|
|
540
|
+
85: "#e5d3a9",
|
|
541
|
+
90: "#f4e1b7",
|
|
542
|
+
95: "#ffefc7",
|
|
543
|
+
100: "#ffffff"
|
|
544
|
+
},
|
|
545
|
+
orange: {
|
|
546
|
+
hue: 70,
|
|
547
|
+
chroma: 22,
|
|
548
|
+
0: "#000000",
|
|
549
|
+
5: "#250a00",
|
|
550
|
+
10: "#2d1700",
|
|
551
|
+
15: "#372104",
|
|
552
|
+
20: "#432c12",
|
|
553
|
+
25: "#4f361c",
|
|
554
|
+
30: "#5b4227",
|
|
555
|
+
35: "#684d32",
|
|
556
|
+
40: "#75593d",
|
|
557
|
+
45: "#826548",
|
|
558
|
+
50: "#8f7154",
|
|
559
|
+
55: "#9d7e60",
|
|
560
|
+
60: "#aa8b6d",
|
|
561
|
+
65: "#b89879",
|
|
562
|
+
70: "#c6a586",
|
|
563
|
+
75: "#d4b393",
|
|
564
|
+
80: "#e3c0a0",
|
|
565
|
+
85: "#f1ceae",
|
|
566
|
+
90: "#ffdcbb",
|
|
567
|
+
95: "#ffeddc",
|
|
568
|
+
100: "#ffffff"
|
|
569
|
+
},
|
|
570
|
+
red: {
|
|
571
|
+
hue: 33,
|
|
572
|
+
chroma: 11,
|
|
573
|
+
0: "#000000",
|
|
574
|
+
5: "#210a04",
|
|
575
|
+
10: "#2a1714",
|
|
576
|
+
15: "#35211e",
|
|
577
|
+
20: "#402b28",
|
|
578
|
+
25: "#4c3633",
|
|
579
|
+
30: "#58413e",
|
|
580
|
+
35: "#644d49",
|
|
581
|
+
40: "#715955",
|
|
582
|
+
45: "#7e6561",
|
|
583
|
+
50: "#8a716d",
|
|
584
|
+
55: "#987e7a",
|
|
585
|
+
60: "#a58b86",
|
|
586
|
+
65: "#b39893",
|
|
587
|
+
70: "#c0a5a1",
|
|
588
|
+
75: "#ceb3ae",
|
|
589
|
+
80: "#dcc0bc",
|
|
590
|
+
85: "#ebcec9",
|
|
591
|
+
90: "#f9dcd7",
|
|
592
|
+
95: "#ffece9",
|
|
593
|
+
100: "#ffffff"
|
|
594
|
+
},
|
|
595
|
+
pink: {
|
|
596
|
+
hue: 340,
|
|
597
|
+
chroma: 9,
|
|
598
|
+
0: "#000000",
|
|
599
|
+
5: "#1b0c16",
|
|
600
|
+
10: "#251720",
|
|
601
|
+
15: "#30222a",
|
|
602
|
+
20: "#3b2c35",
|
|
603
|
+
25: "#463740",
|
|
604
|
+
30: "#52424c",
|
|
605
|
+
35: "#5e4e57",
|
|
606
|
+
40: "#6a5a63",
|
|
607
|
+
45: "#776670",
|
|
608
|
+
50: "#83727c",
|
|
609
|
+
55: "#907f89",
|
|
610
|
+
60: "#9d8c96",
|
|
611
|
+
65: "#ab99a3",
|
|
612
|
+
70: "#b8a6b1",
|
|
613
|
+
75: "#c6b4be",
|
|
614
|
+
80: "#d4c1cc",
|
|
615
|
+
85: "#e2cfda",
|
|
616
|
+
90: "#f0dde8",
|
|
617
|
+
95: "#ffebf7",
|
|
618
|
+
100: "#ffffff"
|
|
619
|
+
},
|
|
620
|
+
purple: {
|
|
621
|
+
hue: 307,
|
|
622
|
+
chroma: 11,
|
|
623
|
+
0: "#000000",
|
|
624
|
+
5: "#150e1d",
|
|
625
|
+
10: "#1f1927",
|
|
626
|
+
15: "#292332",
|
|
627
|
+
20: "#342e3d",
|
|
628
|
+
25: "#3f3949",
|
|
629
|
+
30: "#4b4454",
|
|
630
|
+
35: "#564f60",
|
|
631
|
+
40: "#635b6d",
|
|
632
|
+
45: "#6f6779",
|
|
633
|
+
50: "#7b7486",
|
|
634
|
+
55: "#888193",
|
|
635
|
+
60: "#958da0",
|
|
636
|
+
65: "#a39aad",
|
|
637
|
+
70: "#b0a8bb",
|
|
638
|
+
75: "#beb5c9",
|
|
639
|
+
80: "#cbc3d7",
|
|
640
|
+
85: "#d9d1e5",
|
|
641
|
+
90: "#e8dff3",
|
|
642
|
+
95: "#f6edff",
|
|
643
|
+
100: "#ffffff"
|
|
644
|
+
}
|
|
645
|
+
};
|
|
646
|
+
export {
|
|
647
|
+
stoneIconRegistry,
|
|
648
|
+
stonePalettes,
|
|
649
|
+
stoneTheme
|
|
650
|
+
};
|
package/dist/stone.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @generated by `astryx theme build` — do not edit manually.
|
|
3
|
+
* Source: src/stoneTheme.ts
|
|
4
|
+
* Command: astryx theme build src/stoneTheme.ts --out dist/theme.css
|
|
5
|
+
* Generated: 2026-06-24T18:16:14.110Z
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import type { DefinedTheme } from '@astryxdesign/core/theme';
|
|
9
|
+
import type { IconRegistry } from '@astryxdesign/core/Icon';
|
|
10
|
+
export declare const stoneIconRegistry: IconRegistry;
|
|
11
|
+
export declare const stoneTheme: DefinedTheme;
|