@astryxdesign/theme-y2k 0.7.1-canary.e199fa4 → 0.7.1-canary.e71c4e9

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 +33 -10
  2. package/dist/source.mjs +33 -10
  3. package/dist/theme.css +36 -0
  4. package/dist/y2k.js +40 -0
  5. package/dist/y2kTheme.d.ts.map +1 -1
  6. package/package.json +3 -3
  7. package/src/y2kTheme.ts +52 -10
package/dist/source.js CHANGED
@@ -96,6 +96,34 @@ var y2kSyntax = (0, import_theme.defineSyntaxTheme)({
96
96
  "removed-marker": ["#8b1d24", "#d19f9d"]
97
97
  }
98
98
  });
99
+ var SECONDARY_BUTTON = {
100
+ backgroundColor: "var(--color-background-green)",
101
+ borderWidth: "1px",
102
+ borderStyle: "solid",
103
+ borderColor: "var(--color-text-green)",
104
+ color: "var(--color-text-green)",
105
+ ":hover": {
106
+ backgroundColor: "var(--color-border-green)"
107
+ }
108
+ };
109
+ var SECONDARY_SELECTOR = {
110
+ ":not(.astryx-input-group *)": {
111
+ backgroundColor: SECONDARY_BUTTON.backgroundColor,
112
+ borderWidth: SECONDARY_BUTTON.borderWidth,
113
+ borderStyle: SECONDARY_BUTTON.borderStyle,
114
+ borderColor: SECONDARY_BUTTON.borderColor,
115
+ color: SECONDARY_BUTTON.color
116
+ },
117
+ ":hover:not([data-disabled], [data-readonly], .astryx-input-group *)": SECONDARY_BUTTON[":hover"]
118
+ };
119
+ var SECONDARY_COMPLEX_SELECTOR = {
120
+ backgroundColor: SECONDARY_BUTTON.backgroundColor,
121
+ borderWidth: SECONDARY_BUTTON.borderWidth,
122
+ borderStyle: SECONDARY_BUTTON.borderStyle,
123
+ borderColor: SECONDARY_BUTTON.borderColor,
124
+ color: SECONDARY_BUTTON.color,
125
+ ":hover:not(:has(> :disabled))": SECONDARY_BUTTON[":hover"]
126
+ };
99
127
  var y2kTheme = (0, import_theme.defineTheme)({
100
128
  name: "y2k",
101
129
  typography: {
@@ -289,16 +317,7 @@ var y2kTheme = (0, import_theme.defineTheme)({
289
317
  color: "var(--color-background-body)",
290
318
  borderColor: "transparent"
291
319
  },
292
- "variant:secondary": {
293
- backgroundColor: "var(--color-background-green)",
294
- borderWidth: "1px",
295
- borderStyle: "solid",
296
- borderColor: "var(--color-text-green)",
297
- color: "var(--color-text-green)",
298
- ":hover": {
299
- backgroundColor: "var(--color-border-green)"
300
- }
301
- },
320
+ "variant:secondary": SECONDARY_BUTTON,
302
321
  "variant:ghost": {
303
322
  borderColor: "transparent"
304
323
  },
@@ -310,6 +329,10 @@ var y2kTheme = (0, import_theme.defineTheme)({
310
329
  borderColor: "var(--color-text-red)"
311
330
  }
312
331
  },
332
+ // Secondary selector triggers match the secondary Button (AST-079 FR2).
333
+ selector: { "variant:secondary": SECONDARY_SELECTOR },
334
+ "multi-selector": { "variant:secondary": SECONDARY_SELECTOR },
335
+ "complex-selector": { "variant:secondary": SECONDARY_COMPLEX_SELECTOR },
313
336
  badge: {
314
337
  base: {
315
338
  borderRadius: "9999px",
package/dist/source.mjs CHANGED
@@ -98,6 +98,34 @@ var y2kSyntax = defineSyntaxTheme({
98
98
  "removed-marker": ["#8b1d24", "#d19f9d"]
99
99
  }
100
100
  });
101
+ var SECONDARY_BUTTON = {
102
+ backgroundColor: "var(--color-background-green)",
103
+ borderWidth: "1px",
104
+ borderStyle: "solid",
105
+ borderColor: "var(--color-text-green)",
106
+ color: "var(--color-text-green)",
107
+ ":hover": {
108
+ backgroundColor: "var(--color-border-green)"
109
+ }
110
+ };
111
+ var SECONDARY_SELECTOR = {
112
+ ":not(.astryx-input-group *)": {
113
+ backgroundColor: SECONDARY_BUTTON.backgroundColor,
114
+ borderWidth: SECONDARY_BUTTON.borderWidth,
115
+ borderStyle: SECONDARY_BUTTON.borderStyle,
116
+ borderColor: SECONDARY_BUTTON.borderColor,
117
+ color: SECONDARY_BUTTON.color
118
+ },
119
+ ":hover:not([data-disabled], [data-readonly], .astryx-input-group *)": SECONDARY_BUTTON[":hover"]
120
+ };
121
+ var SECONDARY_COMPLEX_SELECTOR = {
122
+ backgroundColor: SECONDARY_BUTTON.backgroundColor,
123
+ borderWidth: SECONDARY_BUTTON.borderWidth,
124
+ borderStyle: SECONDARY_BUTTON.borderStyle,
125
+ borderColor: SECONDARY_BUTTON.borderColor,
126
+ color: SECONDARY_BUTTON.color,
127
+ ":hover:not(:has(> :disabled))": SECONDARY_BUTTON[":hover"]
128
+ };
101
129
  var y2kTheme = defineTheme({
102
130
  name: "y2k",
103
131
  typography: {
@@ -291,16 +319,7 @@ var y2kTheme = defineTheme({
291
319
  color: "var(--color-background-body)",
292
320
  borderColor: "transparent"
293
321
  },
294
- "variant:secondary": {
295
- backgroundColor: "var(--color-background-green)",
296
- borderWidth: "1px",
297
- borderStyle: "solid",
298
- borderColor: "var(--color-text-green)",
299
- color: "var(--color-text-green)",
300
- ":hover": {
301
- backgroundColor: "var(--color-border-green)"
302
- }
303
- },
322
+ "variant:secondary": SECONDARY_BUTTON,
304
323
  "variant:ghost": {
305
324
  borderColor: "transparent"
306
325
  },
@@ -312,6 +331,10 @@ var y2kTheme = defineTheme({
312
331
  borderColor: "var(--color-text-red)"
313
332
  }
314
333
  },
334
+ // Secondary selector triggers match the secondary Button (AST-079 FR2).
335
+ selector: { "variant:secondary": SECONDARY_SELECTOR },
336
+ "multi-selector": { "variant:secondary": SECONDARY_SELECTOR },
337
+ "complex-selector": { "variant:secondary": SECONDARY_COMPLEX_SELECTOR },
315
338
  badge: {
316
339
  base: {
317
340
  borderRadius: "9999px",
package/dist/theme.css CHANGED
@@ -440,6 +440,42 @@
440
440
  border-color: var(--color-text-red);
441
441
  }
442
442
 
443
+ .astryx-selector[data-variant="secondary"]:not(.astryx-input-group *) {
444
+ background-color: var(--color-background-green);
445
+ border-width: 1px;
446
+ border-style: solid;
447
+ border-color: var(--color-text-green);
448
+ color: var(--color-text-green);
449
+ }
450
+
451
+ .astryx-selector[data-variant="secondary"]:hover:not([data-disabled], [data-readonly], .astryx-input-group *):where(:not(:disabled,[aria-disabled="true"])) {
452
+ background-color: var(--color-border-green);
453
+ }
454
+
455
+ .astryx-multi-selector[data-variant="secondary"]:not(.astryx-input-group *) {
456
+ background-color: var(--color-background-green);
457
+ border-width: 1px;
458
+ border-style: solid;
459
+ border-color: var(--color-text-green);
460
+ color: var(--color-text-green);
461
+ }
462
+
463
+ .astryx-multi-selector[data-variant="secondary"]:hover:not([data-disabled], [data-readonly], .astryx-input-group *):where(:not(:disabled,[aria-disabled="true"])) {
464
+ background-color: var(--color-border-green);
465
+ }
466
+
467
+ .astryx-complex-selector[data-variant="secondary"] {
468
+ background-color: var(--color-background-green);
469
+ border-width: 1px;
470
+ border-style: solid;
471
+ border-color: var(--color-text-green);
472
+ color: var(--color-text-green);
473
+ }
474
+
475
+ .astryx-complex-selector[data-variant="secondary"]:hover:not(:has(> :disabled)):where(:not(:disabled,[aria-disabled="true"])) {
476
+ background-color: var(--color-border-green);
477
+ }
478
+
443
479
  .astryx-badge {
444
480
  border-radius: 9999px;
445
481
  border-width: 1.5px;
package/dist/y2k.js CHANGED
@@ -349,6 +349,46 @@ export const y2kTheme = {
349
349
  "borderColor": "var(--color-text-red)"
350
350
  }
351
351
  },
352
+ "selector": {
353
+ "variant:secondary": {
354
+ ":not(.astryx-input-group *)": {
355
+ "backgroundColor": "var(--color-background-green)",
356
+ "borderWidth": "1px",
357
+ "borderStyle": "solid",
358
+ "borderColor": "var(--color-text-green)",
359
+ "color": "var(--color-text-green)"
360
+ },
361
+ ":hover:not([data-disabled], [data-readonly], .astryx-input-group *)": {
362
+ "backgroundColor": "var(--color-border-green)"
363
+ }
364
+ }
365
+ },
366
+ "multi-selector": {
367
+ "variant:secondary": {
368
+ ":not(.astryx-input-group *)": {
369
+ "backgroundColor": "var(--color-background-green)",
370
+ "borderWidth": "1px",
371
+ "borderStyle": "solid",
372
+ "borderColor": "var(--color-text-green)",
373
+ "color": "var(--color-text-green)"
374
+ },
375
+ ":hover:not([data-disabled], [data-readonly], .astryx-input-group *)": {
376
+ "backgroundColor": "var(--color-border-green)"
377
+ }
378
+ }
379
+ },
380
+ "complex-selector": {
381
+ "variant:secondary": {
382
+ "backgroundColor": "var(--color-background-green)",
383
+ "borderWidth": "1px",
384
+ "borderStyle": "solid",
385
+ "borderColor": "var(--color-text-green)",
386
+ "color": "var(--color-text-green)",
387
+ ":hover:not(:has(> :disabled))": {
388
+ "backgroundColor": "var(--color-border-green)"
389
+ }
390
+ }
391
+ },
352
392
  "badge": {
353
393
  "base": {
354
394
  "borderRadius": "9999px",
package/dist/y2kTheme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"y2kTheme.d.ts","sourceRoot":"","sources":["../src/y2kTheme.ts"],"names":[],"mappings":"AA0CA,eAAO,MAAM,QAAQ,yDAsUnB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Pd,CAAC"}
1
+ {"version":3,"file":"y2kTheme.d.ts","sourceRoot":"","sources":["../src/y2kTheme.ts"],"names":[],"mappings":"AAyFA,eAAO,MAAM,QAAQ,yDAiUnB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Pd,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/theme-y2k",
3
- "version": "0.7.1-canary.e199fa4",
3
+ "version": "0.7.1-canary.e71c4e9",
4
4
  "displayName": "Y2K Theme",
5
5
  "private": false,
6
6
  "description": "Hot pinks, lime greens, and Poppins. Bubbly, playful, and unmistakably retro.",
@@ -57,11 +57,11 @@
57
57
  "lucide-react": "^1.18.0"
58
58
  },
59
59
  "peerDependencies": {
60
- "@astryxdesign/core": "0.7.1-canary.e199fa4",
60
+ "@astryxdesign/core": "0.7.1-canary.e71c4e9",
61
61
  "react": ">=19"
62
62
  },
63
63
  "devDependencies": {
64
- "@astryxdesign/cli": "0.7.1-canary.e199fa4"
64
+ "@astryxdesign/cli": "0.7.1-canary.e71c4e9"
65
65
  },
66
66
  "module": "./dist/source.mjs",
67
67
  "scripts": {
package/src/y2kTheme.ts CHANGED
@@ -40,6 +40,53 @@ const y2kSyntax = defineSyntaxTheme({
40
40
  },
41
41
  });
42
42
 
43
+ /**
44
+ * The secondary Button treatment. Selector, MultiSelector, and ComplexSelector
45
+ * reuse it for their `secondary` trigger so every secondary control in this
46
+ * theme matches (AST-079 FR2).
47
+ */
48
+ const SECONDARY_BUTTON = {
49
+ backgroundColor: 'var(--color-background-green)',
50
+ borderWidth: '1px',
51
+ borderStyle: 'solid',
52
+ borderColor: 'var(--color-text-green)',
53
+ color: 'var(--color-text-green)',
54
+ ':hover': {
55
+ backgroundColor: 'var(--color-border-green)',
56
+ },
57
+ } as const;
58
+
59
+ /**
60
+ * The secondary Button treatment on Selector and MultiSelector triggers
61
+ * (AST-079 FR2). Inside an InputGroup a trigger keeps the neutral fill and the
62
+ * group's edges instead (FR6). The hover stays off disabled and read-only
63
+ * triggers, which carry `data-disabled` and `data-readonly`.
64
+ */
65
+ const SECONDARY_SELECTOR = {
66
+ ':not(.astryx-input-group *)': {
67
+ backgroundColor: SECONDARY_BUTTON.backgroundColor,
68
+ borderWidth: SECONDARY_BUTTON.borderWidth,
69
+ borderStyle: SECONDARY_BUTTON.borderStyle,
70
+ borderColor: SECONDARY_BUTTON.borderColor,
71
+ color: SECONDARY_BUTTON.color,
72
+ },
73
+ ':hover:not([data-disabled], [data-readonly], .astryx-input-group *)':
74
+ SECONDARY_BUTTON[':hover'],
75
+ } as const;
76
+
77
+ /**
78
+ * The secondary Button treatment on ComplexSelector triggers (AST-079 FR2), with
79
+ * the hover kept off a disabled trigger, whose inner button is disabled.
80
+ */
81
+ const SECONDARY_COMPLEX_SELECTOR = {
82
+ backgroundColor: SECONDARY_BUTTON.backgroundColor,
83
+ borderWidth: SECONDARY_BUTTON.borderWidth,
84
+ borderStyle: SECONDARY_BUTTON.borderStyle,
85
+ borderColor: SECONDARY_BUTTON.borderColor,
86
+ color: SECONDARY_BUTTON.color,
87
+ ':hover:not(:has(> :disabled))': SECONDARY_BUTTON[':hover'],
88
+ } as const;
89
+
43
90
  export const y2kTheme = defineTheme({
44
91
  name: 'y2k',
45
92
 
@@ -264,16 +311,7 @@ export const y2kTheme = defineTheme({
264
311
  color: 'var(--color-background-body)',
265
312
  borderColor: 'transparent',
266
313
  },
267
- 'variant:secondary': {
268
- backgroundColor: 'var(--color-background-green)',
269
- borderWidth: '1px',
270
- borderStyle: 'solid',
271
- borderColor: 'var(--color-text-green)',
272
- color: 'var(--color-text-green)',
273
- ':hover': {
274
- backgroundColor: 'var(--color-border-green)',
275
- },
276
- },
314
+ 'variant:secondary': SECONDARY_BUTTON,
277
315
  'variant:ghost': {
278
316
  borderColor: 'transparent',
279
317
  },
@@ -285,6 +323,10 @@ export const y2kTheme = defineTheme({
285
323
  borderColor: 'var(--color-text-red)',
286
324
  },
287
325
  },
326
+ // Secondary selector triggers match the secondary Button (AST-079 FR2).
327
+ selector: {'variant:secondary': SECONDARY_SELECTOR},
328
+ 'multi-selector': {'variant:secondary': SECONDARY_SELECTOR},
329
+ 'complex-selector': {'variant:secondary': SECONDARY_COMPLEX_SELECTOR},
288
330
 
289
331
  badge: {
290
332
  base: {