@astryxdesign/theme-stone 0.7.1-canary.ff40b78 → 0.7.2-canary.01eab6a
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/dist/source.js +40 -12
- package/dist/source.mjs +40 -12
- package/dist/stone.d.ts +2 -2
- package/dist/stone.js +40 -2
- package/dist/stoneTheme.d.ts.map +1 -1
- package/dist/theme.css +40 -2
- package/dist/theme.css.d.ts +2 -2
- package/package.json +3 -3
- package/src/stoneTheme.ts +58 -11
package/dist/source.js
CHANGED
|
@@ -112,9 +112,41 @@ var stoneSyntax = (0, import_theme.defineSyntaxTheme)({
|
|
|
112
112
|
// Teal T40 / T70
|
|
113
113
|
punctuation: ["#5e5e5e", "#ababb0"],
|
|
114
114
|
// Stone Neutral T40 / T70
|
|
115
|
-
background: ["#f3f3f5", "#171719"]
|
|
115
|
+
background: ["#f3f3f5", "#171719"],
|
|
116
|
+
// Diff rows: the muted green/red at 25% in light and 20% in dark keep
|
|
117
|
+
// every token at or above 4.5:1 on the tint; the markers are the tinted
|
|
118
|
+
// text tokens (8.1:1 light, 8.8:1 dark on their tints).
|
|
119
|
+
added: ["#d0e9ce40", "#b4cdb233"],
|
|
120
|
+
removed: ["#f9dcd740", "#dcc0bc33"],
|
|
121
|
+
"added-marker": ["#374c36", "#d0e9ce"],
|
|
122
|
+
"removed-marker": ["#58413e", "#f9dcd7"]
|
|
116
123
|
}
|
|
117
124
|
});
|
|
125
|
+
var SECONDARY_BUTTON = {
|
|
126
|
+
backgroundColor: "transparent",
|
|
127
|
+
borderWidth: "1.5px",
|
|
128
|
+
borderStyle: "solid",
|
|
129
|
+
borderColor: "var(--color-border-emphasized)",
|
|
130
|
+
":hover": {
|
|
131
|
+
backgroundColor: "var(--color-neutral)"
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
var SECONDARY_SELECTOR = {
|
|
135
|
+
":not(.astryx-input-group *)": {
|
|
136
|
+
backgroundColor: SECONDARY_BUTTON.backgroundColor,
|
|
137
|
+
borderWidth: SECONDARY_BUTTON.borderWidth,
|
|
138
|
+
borderStyle: SECONDARY_BUTTON.borderStyle,
|
|
139
|
+
borderColor: SECONDARY_BUTTON.borderColor
|
|
140
|
+
},
|
|
141
|
+
":hover:not([data-disabled], [data-readonly], .astryx-input-group *)": SECONDARY_BUTTON[":hover"]
|
|
142
|
+
};
|
|
143
|
+
var SECONDARY_COMPLEX_SELECTOR = {
|
|
144
|
+
backgroundColor: SECONDARY_BUTTON.backgroundColor,
|
|
145
|
+
borderWidth: SECONDARY_BUTTON.borderWidth,
|
|
146
|
+
borderStyle: SECONDARY_BUTTON.borderStyle,
|
|
147
|
+
borderColor: SECONDARY_BUTTON.borderColor,
|
|
148
|
+
":hover:not(:has(> :disabled))": SECONDARY_BUTTON[":hover"]
|
|
149
|
+
};
|
|
118
150
|
var stoneTheme = (0, import_theme.defineTheme)({
|
|
119
151
|
name: "stone",
|
|
120
152
|
typography: {
|
|
@@ -331,15 +363,7 @@ var stoneTheme = (0, import_theme.defineTheme)({
|
|
|
331
363
|
base: {
|
|
332
364
|
borderRadius: "var(--radius-full)"
|
|
333
365
|
},
|
|
334
|
-
"variant:secondary":
|
|
335
|
-
backgroundColor: "transparent",
|
|
336
|
-
borderWidth: "1.5px",
|
|
337
|
-
borderStyle: "solid",
|
|
338
|
-
borderColor: "var(--color-border-emphasized)",
|
|
339
|
-
":hover": {
|
|
340
|
-
backgroundColor: "var(--color-neutral)"
|
|
341
|
-
}
|
|
342
|
-
},
|
|
366
|
+
"variant:secondary": SECONDARY_BUTTON,
|
|
343
367
|
"variant:destructive": {
|
|
344
368
|
backgroundColor: "var(--color-background-red)",
|
|
345
369
|
color: "var(--color-text-red)"
|
|
@@ -455,8 +479,12 @@ var stoneTheme = (0, import_theme.defineTheme)({
|
|
|
455
479
|
"number-input": INPUT_STATUS_VARS,
|
|
456
480
|
"date-input": INPUT_STATUS_VARS,
|
|
457
481
|
"time-input": INPUT_STATUS_VARS,
|
|
458
|
-
selector: INPUT_STATUS_VARS,
|
|
459
|
-
"multi-selector":
|
|
482
|
+
selector: { ...INPUT_STATUS_VARS, "variant:secondary": SECONDARY_SELECTOR },
|
|
483
|
+
"multi-selector": {
|
|
484
|
+
...INPUT_STATUS_VARS,
|
|
485
|
+
"variant:secondary": SECONDARY_SELECTOR
|
|
486
|
+
},
|
|
487
|
+
"complex-selector": { "variant:secondary": SECONDARY_COMPLEX_SELECTOR },
|
|
460
488
|
typeahead: INPUT_STATUS_VARS,
|
|
461
489
|
tokenizer: INPUT_STATUS_VARS,
|
|
462
490
|
card: {
|
package/dist/source.mjs
CHANGED
|
@@ -114,9 +114,41 @@ var stoneSyntax = defineSyntaxTheme({
|
|
|
114
114
|
// Teal T40 / T70
|
|
115
115
|
punctuation: ["#5e5e5e", "#ababb0"],
|
|
116
116
|
// Stone Neutral T40 / T70
|
|
117
|
-
background: ["#f3f3f5", "#171719"]
|
|
117
|
+
background: ["#f3f3f5", "#171719"],
|
|
118
|
+
// Diff rows: the muted green/red at 25% in light and 20% in dark keep
|
|
119
|
+
// every token at or above 4.5:1 on the tint; the markers are the tinted
|
|
120
|
+
// text tokens (8.1:1 light, 8.8:1 dark on their tints).
|
|
121
|
+
added: ["#d0e9ce40", "#b4cdb233"],
|
|
122
|
+
removed: ["#f9dcd740", "#dcc0bc33"],
|
|
123
|
+
"added-marker": ["#374c36", "#d0e9ce"],
|
|
124
|
+
"removed-marker": ["#58413e", "#f9dcd7"]
|
|
118
125
|
}
|
|
119
126
|
});
|
|
127
|
+
var SECONDARY_BUTTON = {
|
|
128
|
+
backgroundColor: "transparent",
|
|
129
|
+
borderWidth: "1.5px",
|
|
130
|
+
borderStyle: "solid",
|
|
131
|
+
borderColor: "var(--color-border-emphasized)",
|
|
132
|
+
":hover": {
|
|
133
|
+
backgroundColor: "var(--color-neutral)"
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
var SECONDARY_SELECTOR = {
|
|
137
|
+
":not(.astryx-input-group *)": {
|
|
138
|
+
backgroundColor: SECONDARY_BUTTON.backgroundColor,
|
|
139
|
+
borderWidth: SECONDARY_BUTTON.borderWidth,
|
|
140
|
+
borderStyle: SECONDARY_BUTTON.borderStyle,
|
|
141
|
+
borderColor: SECONDARY_BUTTON.borderColor
|
|
142
|
+
},
|
|
143
|
+
":hover:not([data-disabled], [data-readonly], .astryx-input-group *)": SECONDARY_BUTTON[":hover"]
|
|
144
|
+
};
|
|
145
|
+
var SECONDARY_COMPLEX_SELECTOR = {
|
|
146
|
+
backgroundColor: SECONDARY_BUTTON.backgroundColor,
|
|
147
|
+
borderWidth: SECONDARY_BUTTON.borderWidth,
|
|
148
|
+
borderStyle: SECONDARY_BUTTON.borderStyle,
|
|
149
|
+
borderColor: SECONDARY_BUTTON.borderColor,
|
|
150
|
+
":hover:not(:has(> :disabled))": SECONDARY_BUTTON[":hover"]
|
|
151
|
+
};
|
|
120
152
|
var stoneTheme = defineTheme({
|
|
121
153
|
name: "stone",
|
|
122
154
|
typography: {
|
|
@@ -333,15 +365,7 @@ var stoneTheme = defineTheme({
|
|
|
333
365
|
base: {
|
|
334
366
|
borderRadius: "var(--radius-full)"
|
|
335
367
|
},
|
|
336
|
-
"variant:secondary":
|
|
337
|
-
backgroundColor: "transparent",
|
|
338
|
-
borderWidth: "1.5px",
|
|
339
|
-
borderStyle: "solid",
|
|
340
|
-
borderColor: "var(--color-border-emphasized)",
|
|
341
|
-
":hover": {
|
|
342
|
-
backgroundColor: "var(--color-neutral)"
|
|
343
|
-
}
|
|
344
|
-
},
|
|
368
|
+
"variant:secondary": SECONDARY_BUTTON,
|
|
345
369
|
"variant:destructive": {
|
|
346
370
|
backgroundColor: "var(--color-background-red)",
|
|
347
371
|
color: "var(--color-text-red)"
|
|
@@ -457,8 +481,12 @@ var stoneTheme = defineTheme({
|
|
|
457
481
|
"number-input": INPUT_STATUS_VARS,
|
|
458
482
|
"date-input": INPUT_STATUS_VARS,
|
|
459
483
|
"time-input": INPUT_STATUS_VARS,
|
|
460
|
-
selector: INPUT_STATUS_VARS,
|
|
461
|
-
"multi-selector":
|
|
484
|
+
selector: { ...INPUT_STATUS_VARS, "variant:secondary": SECONDARY_SELECTOR },
|
|
485
|
+
"multi-selector": {
|
|
486
|
+
...INPUT_STATUS_VARS,
|
|
487
|
+
"variant:secondary": SECONDARY_SELECTOR
|
|
488
|
+
},
|
|
489
|
+
"complex-selector": { "variant:secondary": SECONDARY_COMPLEX_SELECTOR },
|
|
462
490
|
typeahead: INPUT_STATUS_VARS,
|
|
463
491
|
tokenizer: INPUT_STATUS_VARS,
|
|
464
492
|
card: {
|
package/dist/stone.d.ts
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
* @generated by `astryx theme build` — do not edit manually.
|
|
3
3
|
* Source: src/stoneTheme.ts
|
|
4
4
|
* Command: astryx theme build src/stoneTheme.ts --out dist/theme.css
|
|
5
|
-
* CLI: @astryxdesign/cli@0.7.
|
|
6
|
-
* Core: @astryxdesign/core@0.7.
|
|
5
|
+
* CLI: @astryxdesign/cli@0.7.2
|
|
6
|
+
* Core: @astryxdesign/core@0.7.2
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
import type { DefinedTheme } from '@astryxdesign/core/theme';
|
package/dist/stone.js
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
* @generated by `astryx theme build` — do not edit manually.
|
|
3
3
|
* Source: src/stoneTheme.ts
|
|
4
4
|
* Command: astryx theme build src/stoneTheme.ts --out dist/theme.css
|
|
5
|
-
* CLI: @astryxdesign/cli@0.7.
|
|
6
|
-
* Core: @astryxdesign/core@0.7.
|
|
5
|
+
* CLI: @astryxdesign/cli@0.7.2
|
|
6
|
+
* Core: @astryxdesign/core@0.7.2
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
import { stoneIconRegistry } from "./icons.mjs";
|
|
@@ -98,6 +98,11 @@ export const stoneTheme = {
|
|
|
98
98
|
"--color-syntax-property": "light-dark(#4e6357, #94b2a0)",
|
|
99
99
|
"--color-syntax-punctuation": "light-dark(#5e5e5e, #ababb0)",
|
|
100
100
|
"--color-syntax-background": "light-dark(#f3f3f5, #171719)",
|
|
101
|
+
"--color-syntax-added": "light-dark(#d0e9ce40, #b4cdb233)",
|
|
102
|
+
"--color-syntax-removed": "light-dark(#f9dcd740, #dcc0bc33)",
|
|
103
|
+
"--color-syntax-diff-header": "transparent",
|
|
104
|
+
"--color-syntax-added-marker": "light-dark(#374c36, #d0e9ce)",
|
|
105
|
+
"--color-syntax-removed-marker": "light-dark(#58413e, #f9dcd7)",
|
|
101
106
|
"--color-accent": "light-dark(#25252a, #f3f3f5)",
|
|
102
107
|
"--color-accent-muted": "light-dark(#25252a14, #f3f3f520)",
|
|
103
108
|
"--color-neutral": "light-dark(#25252a0f, #f3f3f51a)",
|
|
@@ -451,6 +456,17 @@ export const stoneTheme = {
|
|
|
451
456
|
},
|
|
452
457
|
"status:error": {
|
|
453
458
|
"--color-error": "light-dark(#a58b86, #c0a5a1)"
|
|
459
|
+
},
|
|
460
|
+
"variant:secondary": {
|
|
461
|
+
":not(.astryx-input-group *)": {
|
|
462
|
+
"backgroundColor": "transparent",
|
|
463
|
+
"borderWidth": "1.5px",
|
|
464
|
+
"borderStyle": "solid",
|
|
465
|
+
"borderColor": "var(--color-border-emphasized)"
|
|
466
|
+
},
|
|
467
|
+
":hover:not([data-disabled], [data-readonly], .astryx-input-group *)": {
|
|
468
|
+
"backgroundColor": "var(--color-neutral)"
|
|
469
|
+
}
|
|
454
470
|
}
|
|
455
471
|
},
|
|
456
472
|
"multi-selector": {
|
|
@@ -462,6 +478,28 @@ export const stoneTheme = {
|
|
|
462
478
|
},
|
|
463
479
|
"status:error": {
|
|
464
480
|
"--color-error": "light-dark(#a58b86, #c0a5a1)"
|
|
481
|
+
},
|
|
482
|
+
"variant:secondary": {
|
|
483
|
+
":not(.astryx-input-group *)": {
|
|
484
|
+
"backgroundColor": "transparent",
|
|
485
|
+
"borderWidth": "1.5px",
|
|
486
|
+
"borderStyle": "solid",
|
|
487
|
+
"borderColor": "var(--color-border-emphasized)"
|
|
488
|
+
},
|
|
489
|
+
":hover:not([data-disabled], [data-readonly], .astryx-input-group *)": {
|
|
490
|
+
"backgroundColor": "var(--color-neutral)"
|
|
491
|
+
}
|
|
492
|
+
}
|
|
493
|
+
},
|
|
494
|
+
"complex-selector": {
|
|
495
|
+
"variant:secondary": {
|
|
496
|
+
"backgroundColor": "transparent",
|
|
497
|
+
"borderWidth": "1.5px",
|
|
498
|
+
"borderStyle": "solid",
|
|
499
|
+
"borderColor": "var(--color-border-emphasized)",
|
|
500
|
+
":hover:not(:has(> :disabled))": {
|
|
501
|
+
"backgroundColor": "var(--color-neutral)"
|
|
502
|
+
}
|
|
465
503
|
}
|
|
466
504
|
},
|
|
467
505
|
"typeahead": {
|
package/dist/stoneTheme.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stoneTheme.d.ts","sourceRoot":"","sources":["../src/stoneTheme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"stoneTheme.d.ts","sourceRoot":"","sources":["../src/stoneTheme.ts"],"names":[],"mappings":"AAgHA,eAAO,MAAM,UAAU,yDAyVrB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2PhB,CAAC"}
|
package/dist/theme.css
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
* @generated by `astryx theme build` — do not edit manually.
|
|
3
3
|
* Source: src/stoneTheme.ts
|
|
4
4
|
* Command: astryx theme build src/stoneTheme.ts --out dist/theme.css
|
|
5
|
-
* CLI: @astryxdesign/cli@0.7.
|
|
6
|
-
* Core: @astryxdesign/core@0.7.
|
|
5
|
+
* CLI: @astryxdesign/cli@0.7.2
|
|
6
|
+
* Core: @astryxdesign/core@0.7.2
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
@layer reset, astryx-base, astryx-theme;
|
|
@@ -166,6 +166,11 @@
|
|
|
166
166
|
--color-syntax-property: light-dark(#4e6357, #94b2a0);
|
|
167
167
|
--color-syntax-punctuation: light-dark(#5e5e5e, #ababb0);
|
|
168
168
|
--color-syntax-background: light-dark(#f3f3f5, #171719);
|
|
169
|
+
--color-syntax-added: light-dark(#d0e9ce40, #b4cdb233);
|
|
170
|
+
--color-syntax-removed: light-dark(#f9dcd740, #dcc0bc33);
|
|
171
|
+
--color-syntax-diff-header: transparent;
|
|
172
|
+
--color-syntax-added-marker: light-dark(#374c36, #d0e9ce);
|
|
173
|
+
--color-syntax-removed-marker: light-dark(#58413e, #f9dcd7);
|
|
169
174
|
--color-accent: light-dark(#25252a, #f3f3f5);
|
|
170
175
|
--color-accent-muted: light-dark(#25252a14, #f3f3f520);
|
|
171
176
|
--color-neutral: light-dark(#25252a0f, #f3f3f51a);
|
|
@@ -553,6 +558,17 @@
|
|
|
553
558
|
--color-error: light-dark(#a58b86, #c0a5a1);
|
|
554
559
|
}
|
|
555
560
|
|
|
561
|
+
.astryx-selector[data-variant="secondary"]:not(.astryx-input-group *) {
|
|
562
|
+
background-color: transparent;
|
|
563
|
+
border-width: 1.5px;
|
|
564
|
+
border-style: solid;
|
|
565
|
+
border-color: var(--color-border-emphasized);
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
.astryx-selector[data-variant="secondary"]:hover:not([data-disabled], [data-readonly], .astryx-input-group *):where(:not(:disabled,[aria-disabled="true"])) {
|
|
569
|
+
background-color: var(--color-neutral);
|
|
570
|
+
}
|
|
571
|
+
|
|
556
572
|
.astryx-multi-selector[data-status="success"] {
|
|
557
573
|
--color-success: light-dark(#7f977e, #99b298);
|
|
558
574
|
}
|
|
@@ -565,6 +581,28 @@
|
|
|
565
581
|
--color-error: light-dark(#a58b86, #c0a5a1);
|
|
566
582
|
}
|
|
567
583
|
|
|
584
|
+
.astryx-multi-selector[data-variant="secondary"]:not(.astryx-input-group *) {
|
|
585
|
+
background-color: transparent;
|
|
586
|
+
border-width: 1.5px;
|
|
587
|
+
border-style: solid;
|
|
588
|
+
border-color: var(--color-border-emphasized);
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.astryx-multi-selector[data-variant="secondary"]:hover:not([data-disabled], [data-readonly], .astryx-input-group *):where(:not(:disabled,[aria-disabled="true"])) {
|
|
592
|
+
background-color: var(--color-neutral);
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.astryx-complex-selector[data-variant="secondary"] {
|
|
596
|
+
background-color: transparent;
|
|
597
|
+
border-width: 1.5px;
|
|
598
|
+
border-style: solid;
|
|
599
|
+
border-color: var(--color-border-emphasized);
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
.astryx-complex-selector[data-variant="secondary"]:hover:not(:has(> :disabled)):where(:not(:disabled,[aria-disabled="true"])) {
|
|
603
|
+
background-color: var(--color-neutral);
|
|
604
|
+
}
|
|
605
|
+
|
|
568
606
|
.astryx-typeahead[data-status="success"] {
|
|
569
607
|
--color-success: light-dark(#7f977e, #99b298);
|
|
570
608
|
}
|
package/dist/theme.css.d.ts
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
* @generated by `astryx theme build` — do not edit manually.
|
|
3
3
|
* Source: src/stoneTheme.ts
|
|
4
4
|
* Command: astryx theme build src/stoneTheme.ts --out dist/theme.css
|
|
5
|
-
* CLI: @astryxdesign/cli@0.7.
|
|
6
|
-
* Core: @astryxdesign/core@0.7.
|
|
5
|
+
* CLI: @astryxdesign/cli@0.7.2
|
|
6
|
+
* Core: @astryxdesign/core@0.7.2
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/theme-stone",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.2-canary.01eab6a",
|
|
4
4
|
"displayName": "Stone Theme",
|
|
5
5
|
"private": false,
|
|
6
6
|
"description": "Warm stone and slate, earthy and understated, with just enough character to feel handcrafted.",
|
|
@@ -57,11 +57,11 @@
|
|
|
57
57
|
"lucide-react": "^1.18.0"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
|
-
"@astryxdesign/core": "0.7.
|
|
60
|
+
"@astryxdesign/core": "0.7.2-canary.01eab6a",
|
|
61
61
|
"react": ">=19"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@astryxdesign/cli": "0.7.
|
|
64
|
+
"@astryxdesign/cli": "0.7.2-canary.01eab6a"
|
|
65
65
|
},
|
|
66
66
|
"module": "./dist/source.mjs",
|
|
67
67
|
"scripts": {
|
package/src/stoneTheme.ts
CHANGED
|
@@ -56,9 +56,60 @@ const stoneSyntax = defineSyntaxTheme({
|
|
|
56
56
|
property: ['#4e6357', '#94b2a0'], // Teal T40 / T70
|
|
57
57
|
punctuation: ['#5e5e5e', '#ababb0'], // Stone Neutral T40 / T70
|
|
58
58
|
background: ['#f3f3f5', '#171719'],
|
|
59
|
+
// Diff rows: the muted green/red at 25% in light and 20% in dark keep
|
|
60
|
+
// every token at or above 4.5:1 on the tint; the markers are the tinted
|
|
61
|
+
// text tokens (8.1:1 light, 8.8:1 dark on their tints).
|
|
62
|
+
added: ['#d0e9ce40', '#b4cdb233'],
|
|
63
|
+
removed: ['#f9dcd740', '#dcc0bc33'],
|
|
64
|
+
'added-marker': ['#374c36', '#d0e9ce'],
|
|
65
|
+
'removed-marker': ['#58413e', '#f9dcd7'],
|
|
59
66
|
},
|
|
60
67
|
});
|
|
61
68
|
|
|
69
|
+
/**
|
|
70
|
+
* The secondary Button treatment. Selector, MultiSelector, and ComplexSelector
|
|
71
|
+
* reuse it for their `secondary` trigger so every secondary control in this
|
|
72
|
+
* theme matches (AST-079 FR2).
|
|
73
|
+
*/
|
|
74
|
+
const SECONDARY_BUTTON = {
|
|
75
|
+
backgroundColor: 'transparent',
|
|
76
|
+
borderWidth: '1.5px',
|
|
77
|
+
borderStyle: 'solid',
|
|
78
|
+
borderColor: 'var(--color-border-emphasized)',
|
|
79
|
+
':hover': {
|
|
80
|
+
backgroundColor: 'var(--color-neutral)',
|
|
81
|
+
},
|
|
82
|
+
} as const;
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* The secondary Button treatment on Selector and MultiSelector triggers
|
|
86
|
+
* (AST-079 FR2). Inside an InputGroup a trigger keeps the neutral fill and the
|
|
87
|
+
* group's edges instead (FR6). The hover stays off disabled and read-only
|
|
88
|
+
* triggers, which carry `data-disabled` and `data-readonly`.
|
|
89
|
+
*/
|
|
90
|
+
const SECONDARY_SELECTOR = {
|
|
91
|
+
':not(.astryx-input-group *)': {
|
|
92
|
+
backgroundColor: SECONDARY_BUTTON.backgroundColor,
|
|
93
|
+
borderWidth: SECONDARY_BUTTON.borderWidth,
|
|
94
|
+
borderStyle: SECONDARY_BUTTON.borderStyle,
|
|
95
|
+
borderColor: SECONDARY_BUTTON.borderColor,
|
|
96
|
+
},
|
|
97
|
+
':hover:not([data-disabled], [data-readonly], .astryx-input-group *)':
|
|
98
|
+
SECONDARY_BUTTON[':hover'],
|
|
99
|
+
} as const;
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* The secondary Button treatment on ComplexSelector triggers (AST-079 FR2), with
|
|
103
|
+
* the hover kept off a disabled trigger, whose inner button is disabled.
|
|
104
|
+
*/
|
|
105
|
+
const SECONDARY_COMPLEX_SELECTOR = {
|
|
106
|
+
backgroundColor: SECONDARY_BUTTON.backgroundColor,
|
|
107
|
+
borderWidth: SECONDARY_BUTTON.borderWidth,
|
|
108
|
+
borderStyle: SECONDARY_BUTTON.borderStyle,
|
|
109
|
+
borderColor: SECONDARY_BUTTON.borderColor,
|
|
110
|
+
':hover:not(:has(> :disabled))': SECONDARY_BUTTON[':hover'],
|
|
111
|
+
} as const;
|
|
112
|
+
|
|
62
113
|
export const stoneTheme = defineTheme({
|
|
63
114
|
name: 'stone',
|
|
64
115
|
|
|
@@ -262,15 +313,7 @@ export const stoneTheme = defineTheme({
|
|
|
262
313
|
base: {
|
|
263
314
|
borderRadius: 'var(--radius-full)',
|
|
264
315
|
},
|
|
265
|
-
'variant:secondary':
|
|
266
|
-
backgroundColor: 'transparent',
|
|
267
|
-
borderWidth: '1.5px',
|
|
268
|
-
borderStyle: 'solid',
|
|
269
|
-
borderColor: 'var(--color-border-emphasized)',
|
|
270
|
-
':hover': {
|
|
271
|
-
backgroundColor: 'var(--color-neutral)',
|
|
272
|
-
},
|
|
273
|
-
},
|
|
316
|
+
'variant:secondary': SECONDARY_BUTTON,
|
|
274
317
|
'variant:destructive': {
|
|
275
318
|
backgroundColor: 'var(--color-background-red)',
|
|
276
319
|
color: 'var(--color-text-red)',
|
|
@@ -389,8 +432,12 @@ export const stoneTheme = defineTheme({
|
|
|
389
432
|
'number-input': INPUT_STATUS_VARS,
|
|
390
433
|
'date-input': INPUT_STATUS_VARS,
|
|
391
434
|
'time-input': INPUT_STATUS_VARS,
|
|
392
|
-
selector: INPUT_STATUS_VARS,
|
|
393
|
-
'multi-selector':
|
|
435
|
+
selector: {...INPUT_STATUS_VARS, 'variant:secondary': SECONDARY_SELECTOR},
|
|
436
|
+
'multi-selector': {
|
|
437
|
+
...INPUT_STATUS_VARS,
|
|
438
|
+
'variant:secondary': SECONDARY_SELECTOR,
|
|
439
|
+
},
|
|
440
|
+
'complex-selector': {'variant:secondary': SECONDARY_COMPLEX_SELECTOR},
|
|
394
441
|
typeahead: INPUT_STATUS_VARS,
|
|
395
442
|
tokenizer: INPUT_STATUS_VARS,
|
|
396
443
|
|