@astryxdesign/theme-stone 0.7.1-canary.9d2b656 → 0.7.1-canary.9f2cdc0

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 (7) hide show
  1. package/dist/source.js +32 -11
  2. package/dist/source.mjs +32 -11
  3. package/dist/stone.js +33 -0
  4. package/dist/stoneTheme.d.ts.map +1 -1
  5. package/dist/theme.css +33 -0
  6. package/package.json +3 -3
  7. package/src/stoneTheme.ts +51 -11
package/dist/source.js CHANGED
@@ -122,6 +122,31 @@ var stoneSyntax = (0, import_theme.defineSyntaxTheme)({
122
122
  "removed-marker": ["#58413e", "#f9dcd7"]
123
123
  }
124
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
+ };
125
150
  var stoneTheme = (0, import_theme.defineTheme)({
126
151
  name: "stone",
127
152
  typography: {
@@ -338,15 +363,7 @@ var stoneTheme = (0, import_theme.defineTheme)({
338
363
  base: {
339
364
  borderRadius: "var(--radius-full)"
340
365
  },
341
- "variant:secondary": {
342
- backgroundColor: "transparent",
343
- borderWidth: "1.5px",
344
- borderStyle: "solid",
345
- borderColor: "var(--color-border-emphasized)",
346
- ":hover": {
347
- backgroundColor: "var(--color-neutral)"
348
- }
349
- },
366
+ "variant:secondary": SECONDARY_BUTTON,
350
367
  "variant:destructive": {
351
368
  backgroundColor: "var(--color-background-red)",
352
369
  color: "var(--color-text-red)"
@@ -462,8 +479,12 @@ var stoneTheme = (0, import_theme.defineTheme)({
462
479
  "number-input": INPUT_STATUS_VARS,
463
480
  "date-input": INPUT_STATUS_VARS,
464
481
  "time-input": INPUT_STATUS_VARS,
465
- selector: INPUT_STATUS_VARS,
466
- "multi-selector": INPUT_STATUS_VARS,
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 },
467
488
  typeahead: INPUT_STATUS_VARS,
468
489
  tokenizer: INPUT_STATUS_VARS,
469
490
  card: {
package/dist/source.mjs CHANGED
@@ -124,6 +124,31 @@ var stoneSyntax = defineSyntaxTheme({
124
124
  "removed-marker": ["#58413e", "#f9dcd7"]
125
125
  }
126
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
+ };
127
152
  var stoneTheme = defineTheme({
128
153
  name: "stone",
129
154
  typography: {
@@ -340,15 +365,7 @@ var stoneTheme = defineTheme({
340
365
  base: {
341
366
  borderRadius: "var(--radius-full)"
342
367
  },
343
- "variant:secondary": {
344
- backgroundColor: "transparent",
345
- borderWidth: "1.5px",
346
- borderStyle: "solid",
347
- borderColor: "var(--color-border-emphasized)",
348
- ":hover": {
349
- backgroundColor: "var(--color-neutral)"
350
- }
351
- },
368
+ "variant:secondary": SECONDARY_BUTTON,
352
369
  "variant:destructive": {
353
370
  backgroundColor: "var(--color-background-red)",
354
371
  color: "var(--color-text-red)"
@@ -464,8 +481,12 @@ var stoneTheme = defineTheme({
464
481
  "number-input": INPUT_STATUS_VARS,
465
482
  "date-input": INPUT_STATUS_VARS,
466
483
  "time-input": INPUT_STATUS_VARS,
467
- selector: INPUT_STATUS_VARS,
468
- "multi-selector": INPUT_STATUS_VARS,
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 },
469
490
  typeahead: INPUT_STATUS_VARS,
470
491
  tokenizer: INPUT_STATUS_VARS,
471
492
  card: {
package/dist/stone.js CHANGED
@@ -456,6 +456,17 @@ export const stoneTheme = {
456
456
  },
457
457
  "status:error": {
458
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
+ }
459
470
  }
460
471
  },
461
472
  "multi-selector": {
@@ -467,6 +478,28 @@ export const stoneTheme = {
467
478
  },
468
479
  "status:error": {
469
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
+ }
470
503
  }
471
504
  },
472
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":"AAoEA,eAAO,MAAM,UAAU,yDA6VrB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2PhB,CAAC"}
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
@@ -558,6 +558,17 @@
558
558
  --color-error: light-dark(#a58b86, #c0a5a1);
559
559
  }
560
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
+
561
572
  .astryx-multi-selector[data-status="success"] {
562
573
  --color-success: light-dark(#7f977e, #99b298);
563
574
  }
@@ -570,6 +581,28 @@
570
581
  --color-error: light-dark(#a58b86, #c0a5a1);
571
582
  }
572
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
+
573
606
  .astryx-typeahead[data-status="success"] {
574
607
  --color-success: light-dark(#7f977e, #99b298);
575
608
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/theme-stone",
3
- "version": "0.7.1-canary.9d2b656",
3
+ "version": "0.7.1-canary.9f2cdc0",
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.1-canary.9d2b656",
60
+ "@astryxdesign/core": "0.7.1-canary.9f2cdc0",
61
61
  "react": ">=19"
62
62
  },
63
63
  "devDependencies": {
64
- "@astryxdesign/cli": "0.7.1-canary.9d2b656"
64
+ "@astryxdesign/cli": "0.7.1-canary.9f2cdc0"
65
65
  },
66
66
  "module": "./dist/source.mjs",
67
67
  "scripts": {
package/src/stoneTheme.ts CHANGED
@@ -66,6 +66,50 @@ const stoneSyntax = defineSyntaxTheme({
66
66
  },
67
67
  });
68
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
+
69
113
  export const stoneTheme = defineTheme({
70
114
  name: 'stone',
71
115
 
@@ -269,15 +313,7 @@ export const stoneTheme = defineTheme({
269
313
  base: {
270
314
  borderRadius: 'var(--radius-full)',
271
315
  },
272
- 'variant:secondary': {
273
- backgroundColor: 'transparent',
274
- borderWidth: '1.5px',
275
- borderStyle: 'solid',
276
- borderColor: 'var(--color-border-emphasized)',
277
- ':hover': {
278
- backgroundColor: 'var(--color-neutral)',
279
- },
280
- },
316
+ 'variant:secondary': SECONDARY_BUTTON,
281
317
  'variant:destructive': {
282
318
  backgroundColor: 'var(--color-background-red)',
283
319
  color: 'var(--color-text-red)',
@@ -396,8 +432,12 @@ export const stoneTheme = defineTheme({
396
432
  'number-input': INPUT_STATUS_VARS,
397
433
  'date-input': INPUT_STATUS_VARS,
398
434
  'time-input': INPUT_STATUS_VARS,
399
- selector: INPUT_STATUS_VARS,
400
- 'multi-selector': INPUT_STATUS_VARS,
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},
401
441
  typeahead: INPUT_STATUS_VARS,
402
442
  tokenizer: INPUT_STATUS_VARS,
403
443