@astryxdesign/theme-y2k 0.7.1-canary.ff40b78 → 0.7.1

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 +42 -11
  2. package/dist/source.mjs +42 -11
  3. package/dist/theme.css +41 -0
  4. package/dist/y2k.js +45 -0
  5. package/dist/y2kTheme.d.ts.map +1 -1
  6. package/package.json +3 -3
  7. package/src/y2kTheme.ts +60 -10
package/dist/source.js CHANGED
@@ -85,9 +85,45 @@ var y2kSyntax = (0, import_theme.defineSyntaxTheme)({
85
85
  attribute: ["#6c5c3e", "#bca987"],
86
86
  property: ["#3c6755", "#87b5a1"],
87
87
  punctuation: ["#5e5e5e", "#ababab"],
88
- background: ["#FFF6ED", "#190f00"]
88
+ background: ["#FFF6ED", "#190f00"],
89
+ // Diff rows: the muted green/red at 25% in light and 20% in dark keep
90
+ // every token at or above 4.5:1 on the tint. Markers: the tinted text
91
+ // tokens in light (7.3:1 / 7.9:1); in dark those tokens are near-black,
92
+ // so the string and tag colours mark the rows (5.1:1 each).
93
+ added: ["#C5E17A40", "#C5E17A33"],
94
+ removed: ["#FFC5C340", "#FFC5C333"],
95
+ "added-marker": ["#3a5500", "#a5af8b"],
96
+ "removed-marker": ["#8b1d24", "#d19f9d"]
89
97
  }
90
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
+ };
91
127
  var y2kTheme = (0, import_theme.defineTheme)({
92
128
  name: "y2k",
93
129
  typography: {
@@ -281,16 +317,7 @@ var y2kTheme = (0, import_theme.defineTheme)({
281
317
  color: "var(--color-background-body)",
282
318
  borderColor: "transparent"
283
319
  },
284
- "variant:secondary": {
285
- backgroundColor: "var(--color-background-green)",
286
- borderWidth: "1px",
287
- borderStyle: "solid",
288
- borderColor: "var(--color-text-green)",
289
- color: "var(--color-text-green)",
290
- ":hover": {
291
- backgroundColor: "var(--color-border-green)"
292
- }
293
- },
320
+ "variant:secondary": SECONDARY_BUTTON,
294
321
  "variant:ghost": {
295
322
  borderColor: "transparent"
296
323
  },
@@ -302,6 +329,10 @@ var y2kTheme = (0, import_theme.defineTheme)({
302
329
  borderColor: "var(--color-text-red)"
303
330
  }
304
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 },
305
336
  badge: {
306
337
  base: {
307
338
  borderRadius: "9999px",
package/dist/source.mjs CHANGED
@@ -87,9 +87,45 @@ var y2kSyntax = defineSyntaxTheme({
87
87
  attribute: ["#6c5c3e", "#bca987"],
88
88
  property: ["#3c6755", "#87b5a1"],
89
89
  punctuation: ["#5e5e5e", "#ababab"],
90
- background: ["#FFF6ED", "#190f00"]
90
+ background: ["#FFF6ED", "#190f00"],
91
+ // Diff rows: the muted green/red at 25% in light and 20% in dark keep
92
+ // every token at or above 4.5:1 on the tint. Markers: the tinted text
93
+ // tokens in light (7.3:1 / 7.9:1); in dark those tokens are near-black,
94
+ // so the string and tag colours mark the rows (5.1:1 each).
95
+ added: ["#C5E17A40", "#C5E17A33"],
96
+ removed: ["#FFC5C340", "#FFC5C333"],
97
+ "added-marker": ["#3a5500", "#a5af8b"],
98
+ "removed-marker": ["#8b1d24", "#d19f9d"]
91
99
  }
92
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
+ };
93
129
  var y2kTheme = defineTheme({
94
130
  name: "y2k",
95
131
  typography: {
@@ -283,16 +319,7 @@ var y2kTheme = defineTheme({
283
319
  color: "var(--color-background-body)",
284
320
  borderColor: "transparent"
285
321
  },
286
- "variant:secondary": {
287
- backgroundColor: "var(--color-background-green)",
288
- borderWidth: "1px",
289
- borderStyle: "solid",
290
- borderColor: "var(--color-text-green)",
291
- color: "var(--color-text-green)",
292
- ":hover": {
293
- backgroundColor: "var(--color-border-green)"
294
- }
295
- },
322
+ "variant:secondary": SECONDARY_BUTTON,
296
323
  "variant:ghost": {
297
324
  borderColor: "transparent"
298
325
  },
@@ -304,6 +331,10 @@ var y2kTheme = defineTheme({
304
331
  borderColor: "var(--color-text-red)"
305
332
  }
306
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 },
307
338
  badge: {
308
339
  base: {
309
340
  borderRadius: "9999px",
package/dist/theme.css CHANGED
@@ -173,6 +173,11 @@
173
173
  --color-syntax-property: light-dark(#3c6755, #87b5a1);
174
174
  --color-syntax-punctuation: light-dark(#5e5e5e, #ababab);
175
175
  --color-syntax-background: light-dark(#FFF6ED, #190f00);
176
+ --color-syntax-added: light-dark(#C5E17A40, #C5E17A33);
177
+ --color-syntax-removed: light-dark(#FFC5C340, #FFC5C333);
178
+ --color-syntax-diff-header: transparent;
179
+ --color-syntax-added-marker: light-dark(#3a5500, #a5af8b);
180
+ --color-syntax-removed-marker: light-dark(#8b1d24, #d19f9d);
176
181
  --spacing-0-5: 0.1875rem;
177
182
  --spacing-1: 0.375rem;
178
183
  --spacing-1-5: 0.5625rem;
@@ -435,6 +440,42 @@
435
440
  border-color: var(--color-text-red);
436
441
  }
437
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
+
438
479
  .astryx-badge {
439
480
  border-radius: 9999px;
440
481
  border-width: 1.5px;
package/dist/y2k.js CHANGED
@@ -105,6 +105,11 @@ export const y2kTheme = {
105
105
  "--color-syntax-property": "light-dark(#3c6755, #87b5a1)",
106
106
  "--color-syntax-punctuation": "light-dark(#5e5e5e, #ababab)",
107
107
  "--color-syntax-background": "light-dark(#FFF6ED, #190f00)",
108
+ "--color-syntax-added": "light-dark(#C5E17A40, #C5E17A33)",
109
+ "--color-syntax-removed": "light-dark(#FFC5C340, #FFC5C333)",
110
+ "--color-syntax-diff-header": "transparent",
111
+ "--color-syntax-added-marker": "light-dark(#3a5500, #a5af8b)",
112
+ "--color-syntax-removed-marker": "light-dark(#8b1d24, #d19f9d)",
108
113
  "--spacing-0-5": "0.1875rem",
109
114
  "--spacing-1": "0.375rem",
110
115
  "--spacing-1-5": "0.5625rem",
@@ -344,6 +349,46 @@ export const y2kTheme = {
344
349
  "borderColor": "var(--color-text-red)"
345
350
  }
346
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
+ },
347
392
  "badge": {
348
393
  "base": {
349
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":"AAkCA,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.ff40b78",
3
+ "version": "0.7.1",
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.ff40b78",
60
+ "@astryxdesign/core": "0.7.1",
61
61
  "react": ">=19"
62
62
  },
63
63
  "devDependencies": {
64
- "@astryxdesign/cli": "0.7.1-canary.ff40b78"
64
+ "@astryxdesign/cli": "0.7.1"
65
65
  },
66
66
  "module": "./dist/source.mjs",
67
67
  "scripts": {
package/src/y2kTheme.ts CHANGED
@@ -29,9 +29,64 @@ const y2kSyntax = defineSyntaxTheme({
29
29
  property: ['#3c6755', '#87b5a1'],
30
30
  punctuation: ['#5e5e5e', '#ababab'],
31
31
  background: ['#FFF6ED', '#190f00'],
32
+ // Diff rows: the muted green/red at 25% in light and 20% in dark keep
33
+ // every token at or above 4.5:1 on the tint. Markers: the tinted text
34
+ // tokens in light (7.3:1 / 7.9:1); in dark those tokens are near-black,
35
+ // so the string and tag colours mark the rows (5.1:1 each).
36
+ added: ['#C5E17A40', '#C5E17A33'],
37
+ removed: ['#FFC5C340', '#FFC5C333'],
38
+ 'added-marker': ['#3a5500', '#a5af8b'],
39
+ 'removed-marker': ['#8b1d24', '#d19f9d'],
32
40
  },
33
41
  });
34
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
+
35
90
  export const y2kTheme = defineTheme({
36
91
  name: 'y2k',
37
92
 
@@ -256,16 +311,7 @@ export const y2kTheme = defineTheme({
256
311
  color: 'var(--color-background-body)',
257
312
  borderColor: 'transparent',
258
313
  },
259
- 'variant:secondary': {
260
- backgroundColor: 'var(--color-background-green)',
261
- borderWidth: '1px',
262
- borderStyle: 'solid',
263
- borderColor: 'var(--color-text-green)',
264
- color: 'var(--color-text-green)',
265
- ':hover': {
266
- backgroundColor: 'var(--color-border-green)',
267
- },
268
- },
314
+ 'variant:secondary': SECONDARY_BUTTON,
269
315
  'variant:ghost': {
270
316
  borderColor: 'transparent',
271
317
  },
@@ -277,6 +323,10 @@ export const y2kTheme = defineTheme({
277
323
  borderColor: 'var(--color-text-red)',
278
324
  },
279
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},
280
330
 
281
331
  badge: {
282
332
  base: {