@astryxdesign/theme-stone 0.7.1-canary.ff40b78 → 0.7.2-canary.374b53a

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 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": 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 },
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": 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 },
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.1
6
- * Core: @astryxdesign/core@0.7.1
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.1
6
- * Core: @astryxdesign/core@0.7.1
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": {
@@ -1 +1 @@
1
- {"version":3,"file":"stoneTheme.d.ts","sourceRoot":"","sources":["../src/stoneTheme.ts"],"names":[],"mappings":"AA6DA,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
@@ -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.1
6
- * Core: @astryxdesign/core@0.7.1
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
  }
@@ -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.1
6
- * Core: @astryxdesign/core@0.7.1
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.1-canary.ff40b78",
3
+ "version": "0.7.2-canary.374b53a",
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.ff40b78",
60
+ "@astryxdesign/core": "0.7.2-canary.374b53a",
61
61
  "react": ">=19"
62
62
  },
63
63
  "devDependencies": {
64
- "@astryxdesign/cli": "0.7.1-canary.ff40b78"
64
+ "@astryxdesign/cli": "0.7.2-canary.374b53a"
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': 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},
394
441
  typeahead: INPUT_STATUS_VARS,
395
442
  tokenizer: INPUT_STATUS_VARS,
396
443