ui-style-kit-css 1.0.4 → 1.2.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 (6) hide show
  1. package/CHANGELOG.md +79 -12
  2. package/README.md +23 -1
  3. package/dist/ui-style-kit.css +342 -0
  4. package/dist/ui-style-kit.min.css +1 -1
  5. package/package.json +5 -3
  6. package/styles/interactive-surface-bridge.css +341 -0
package/CHANGELOG.md CHANGED
@@ -1,45 +1,112 @@
1
1
  # Changelog
2
2
 
3
3
  All notable changes to this project will be documented in this file.
4
+ Entries are aligned to commits merged into `main` between tagged release points.
5
+
6
+ ## [Unreleased]
7
+
8
+ ## [1.2.1] - 2026-06-01
9
+
10
+ ### Changed - 1.2.1 release metadata
11
+
12
+ - Bumped package version metadata to `1.2.1`.
13
+ - Aligned `package-lock.json` root metadata with `package.json` at `1.2.1`.
14
+
15
+ ## [1.2.0] - 2026-06-01
16
+
17
+ ### Changed - Release stabilization
18
+
19
+ - Bumped package version metadata to `1.2.0`.
20
+ - Aligned `package-lock.json` root metadata with `package.json` at `1.2.0`.
21
+ - Updated release workflow guidance to avoid release branch version rewrites during pull request automation.
22
+
23
+ ## [1.1.3] - 2026-06-01
24
+
25
+ ### Changed - 1.1.3 release metadata
26
+
27
+ - Bumped package version metadata to `1.1.3`.
28
+ - Aligned `package-lock.json` root metadata with `package.json` at `1.1.3`.
29
+
30
+ ## [1.1.2] - 2026-06-01
31
+
32
+ ### Fixed - Sync workflow push ambiguity
33
+
34
+ - Fixed `git push` in `.github/workflows/sync-package-version-with-main.yml` to explicitly target branch refs, preventing potential conflicts with tag refs.
35
+
36
+ ### Changed - Release metadata
37
+
38
+ - Bumped package version metadata to `1.1.2`.
39
+ - Aligned `package-lock.json` root metadata with `package.json` at `1.1.2`.
40
+
41
+ ## [1.1.1] - 2026-06-01
42
+
43
+ ### Changed - Release readiness
44
+
45
+ - Bumped package version metadata to `1.1.1` for the next publish target.
46
+ - Aligned `package-lock.json` root metadata with `package.json` at `1.1.1`.
47
+ - Hardened npm publish automation to validate release tag/version alignment before attempting `npm publish`.
48
+ - Updated changelog history alignment notes to reflect tagged release progression.
49
+
50
+ ## [1.1.0] - 2026-06-01
51
+
52
+ ### Added - UI Style Kit bridge
53
+
54
+ - Added `styles/interactive-surface-bridge.css` to map UI Style Kit tokens to `interactive-surface-css` token hooks.
55
+ - Added new package export aliases:
56
+ - `ui-style-kit-css/interactive-surface-bridge`
57
+ - `ui-style-kit-css/styles/interactive-surface-bridge`
58
+
59
+ ### Changed - UI Style Kit bridge
60
+
61
+ - Included `interactive-surface-bridge.css` in the combined `dist/ui-style-kit.css` and `dist/ui-style-kit.min.css` build pipeline.
62
+ - Updated README and wiki setup docs with first-class cross-library integration guidance.
63
+ - Added package integrity coverage for interactive surface bridge export and bundling.
64
+ - Included release metadata correction commit (`chore(release): bump version to 1.0.4`) in the `1.0.4..v1.1.0` commit range.
4
65
 
5
66
  ## [1.0.4] - 2026-05-26
6
67
 
7
- ### Changed
68
+ ### Changed - 1.0.4
8
69
 
9
- - Bumped package version to `1.0.4` for a clean npm republish after failed `1.0.2` / `1.0.3` attempts.
10
- - Synced release metadata in `package.json` and `package-lock.json` to `1.0.4`.
70
+ - Added deployment/build prep updates across CI, publish, and release workflows (`[chore] Build deployment pieces`).
71
+ - Synced `package.json` version from `main` (`chore: sync package.json version with main`).
11
72
 
12
73
  ## [1.0.3] - 2026-05-26
13
74
 
14
- ### Fixed
75
+ ### Added - 1.0.3
76
+
77
+ - Added `.github/workflows/npm-publish.yml` (`Add publish workflow`).
78
+
79
+ ### Changed - 1.0.3
15
80
 
16
- - Standardized changelog formatting and version notation for the latest patch release entry.
17
- - Replaced legacy demo image references with branded assets (`logo.png`, `assets/seo/social-card.png`).
81
+ - Updated `package.json` version metadata and changelog formatting for the `1.0.3` line.
82
+ - Applied pull request follow-up changelog fix (`Potential fix for pull request finding`).
83
+ - Included `package.json` sync commits from automation (`chore: sync package.json version with main`).
18
84
 
19
85
  ## [1.0.2] - 2026-05-25
20
86
 
21
- ### Added
87
+ ### Added - 1.0.2
22
88
 
23
89
  - `.github/workflows/sync-package-version-with-main.yml` to keep pull request branch versions aligned with `main`.
24
90
  - `.github/workflows/release-version-alignment.yml` to enforce matching GitHub tag, `package.json`, changelog entry, and npm publish target version.
25
91
 
26
- ### Changed
92
+ ### Changed - 1.0.2
27
93
 
28
94
  - Bumped package version to `1.0.2`.
29
- - Upgraded `stylelint` from `^16.24.0` to `^17.12.0`.
95
+ - Upgraded `stylelint` from `16.26.1` to `17.12.0`.
30
96
  - Updated GitHub Actions in CI:
31
97
  - `actions/checkout` from `v4` to `v6`
32
98
  - `actions/setup-node` from `v4` to `v6`
99
+ - Updated release alignment notes and changelog formatting during review feedback.
33
100
 
34
101
  ## [1.0.1] - 2026-05-25
35
102
 
36
- ### Fixed
103
+ ### Fixed - 1.0.1
37
104
 
38
105
  - Patched release metadata and demo HTML (`package.json`, `index.html`) for package stability.
39
106
 
40
107
  ## [1.0.0] - 2026-05-24
41
108
 
42
- ### Added
109
+ ### Added - 1.0.0
43
110
 
44
111
  - Full project wiki under `wiki/`
45
112
  - `CODE_OF_CONDUCT.md`
@@ -65,7 +132,7 @@ All notable changes to this project will be documented in this file.
65
132
  - `.stylelintignore`
66
133
  - package scripts and dev dependencies
67
134
 
68
- ### Changed
135
+ ### Changed - 1.0.0
69
136
 
70
137
  - Expanded `index.html` with comprehensive SEO, social metadata, and JSON-LD structured data.
71
138
  - Updated README with quality, community, and SEO sections.
package/README.md CHANGED
@@ -95,6 +95,28 @@ import "ui-style-kit-css/styles/minimal-saas.css";
95
95
  import "ui-style-kit-css/styles/cyberpunk.css";
96
96
  ```
97
97
 
98
+ ## Integration with Interactive Surface CSS
99
+
100
+ This package now ships with an integration bridge for `interactive-surface-css`.
101
+
102
+ If you import the combined build (`dist/ui-style-kit.css`), the bridge is already included.
103
+
104
+ If you import individual style files, also import the bridge file:
105
+
106
+ ```js
107
+ import "interactive-surface-css/interactive-surface.css";
108
+ import "ui-style-kit-css/styles/minimal-saas.css";
109
+ import "ui-style-kit-css/styles/interactive-surface-bridge.css";
110
+ ```
111
+
112
+ Shortcut export path:
113
+
114
+ ```js
115
+ import "ui-style-kit-css/interactive-surface-bridge";
116
+ ```
117
+
118
+ The bridge maps active `data-ui`, `data-theme`, and `data-mode` tokens to `.interactive-surface` tokens, including variant tokens (`variant-primary`, `variant-secondary`, etc.) and focus/icon color hooks.
119
+
98
120
  ## Browser / CDN usage
99
121
 
100
122
  After publishing to NPM:
@@ -127,7 +149,7 @@ Local usage:
127
149
  ## UI systems
128
150
 
129
151
  | UI style | `data-ui` | Class prefix |
130
- |---|---:|---:|
152
+ | --- | ---: | ---: |
131
153
  | Minimal SaaS | `minimal-saas` | `saas` |
132
154
  | Bento UI | `bento` | `bento` |
133
155
  | Maximalist / Playful | `maximalist` | `max` |
package/dist/ui-style-kit.css CHANGED
@@ -10375,3 +10375,345 @@
10375
10375
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-ui="retro-glass"] { --rg-panel-alpha: .96; --rg-panel-strong-alpha: 1; --rg-panel-soft-alpha: .9; } }
10376
10376
  [data-ui="retro-glass"] :focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; }
10377
10377
  @media (prefers-reduced-motion: reduce) { [data-ui="retro-glass"] *, [data-ui="retro-glass"] *::before, [data-ui="retro-glass"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
10378
+
10379
+ /* =========================================================
10380
+ UI Style Kit CSS x Interactive Surface CSS Bridge
10381
+
10382
+ This optional bridge maps UI Style Kit semantic tokens to
10383
+ interactive-surface-css tokens so both libraries can be
10384
+ used together without per-theme overrides.
10385
+ ========================================================= */
10386
+
10387
+ :where([data-ui][data-theme][data-mode]) .interactive-surface {
10388
+ --interactive-surface-border-width: 1px;
10389
+ }
10390
+
10391
+ :where([data-ui="minimal-saas"][data-theme][data-mode]) .interactive-surface {
10392
+ --interactive-surface-bg: var(--saas-surface-strong, var(--saas-surface, var(--saas-bg)));
10393
+ --interactive-surface-fg: var(--saas-text);
10394
+ --interactive-surface-border-color: var(--saas-border);
10395
+ --interactive-surface-focus-ring-color: var(--saas-focus, var(--saas-accent, var(--saas-primary)));
10396
+ --interactive-surface-radius: var(--saas-radius-md, 0.75rem);
10397
+ --interactive-surface-state-layer-color: var(--saas-text);
10398
+ --interactive-surface-light-icon-color: var(--saas-warning, var(--saas-accent));
10399
+ --interactive-surface-dark-icon-color: var(--saas-text);
10400
+ --interactive-surface-accessibility-icon-color: var(--saas-focus, var(--saas-accent));
10401
+ --interactive-surface-light-icon-color-dark: var(--saas-warning, var(--saas-accent));
10402
+ --interactive-surface-dark-icon-color-dark: var(--saas-text);
10403
+ --interactive-surface-accessibility-icon-color-dark: var(--saas-focus, var(--saas-accent));
10404
+ --interactive-surface-variant-primary-bg: var(--saas-primary);
10405
+ --interactive-surface-variant-primary-fg: var(--saas-primary-text, var(--saas-bg));
10406
+ --interactive-surface-variant-primary-border-color: var(--saas-primary);
10407
+ --interactive-surface-variant-secondary-bg: var(--saas-secondary);
10408
+ --interactive-surface-variant-secondary-fg: var(--saas-secondary-text, var(--saas-bg));
10409
+ --interactive-surface-variant-secondary-border-color: var(--saas-secondary);
10410
+ --interactive-surface-variant-accent-bg: var(--saas-accent);
10411
+ --interactive-surface-variant-accent-border-color: var(--saas-accent);
10412
+ --interactive-surface-variant-subtle-bg: var(--saas-surface-soft, var(--saas-surface));
10413
+ --interactive-surface-variant-subtle-fg: var(--saas-text);
10414
+ --interactive-surface-variant-subtle-border-color: var(--saas-border);
10415
+ --interactive-surface-variant-warning-bg: var(--saas-warning);
10416
+ --interactive-surface-variant-warning-border-color: var(--saas-warning);
10417
+ --interactive-surface-variant-danger-bg: var(--saas-danger);
10418
+ --interactive-surface-variant-danger-border-color: var(--saas-danger);
10419
+ }
10420
+
10421
+ :where([data-ui="bento"][data-theme][data-mode]) .interactive-surface {
10422
+ --interactive-surface-bg: var(--bento-surface-strong, var(--bento-surface, var(--bento-bg)));
10423
+ --interactive-surface-fg: var(--bento-text);
10424
+ --interactive-surface-border-color: var(--bento-border);
10425
+ --interactive-surface-focus-ring-color: var(--bento-focus, var(--bento-accent, var(--bento-primary)));
10426
+ --interactive-surface-radius: var(--bento-radius-md, 0.75rem);
10427
+ --interactive-surface-state-layer-color: var(--bento-text);
10428
+ --interactive-surface-light-icon-color: var(--bento-warning, var(--bento-accent));
10429
+ --interactive-surface-dark-icon-color: var(--bento-text);
10430
+ --interactive-surface-accessibility-icon-color: var(--bento-focus, var(--bento-accent));
10431
+ --interactive-surface-light-icon-color-dark: var(--bento-warning, var(--bento-accent));
10432
+ --interactive-surface-dark-icon-color-dark: var(--bento-text);
10433
+ --interactive-surface-accessibility-icon-color-dark: var(--bento-focus, var(--bento-accent));
10434
+ --interactive-surface-variant-primary-bg: var(--bento-primary);
10435
+ --interactive-surface-variant-primary-fg: var(--bento-primary-text, var(--bento-bg));
10436
+ --interactive-surface-variant-primary-border-color: var(--bento-primary);
10437
+ --interactive-surface-variant-secondary-bg: var(--bento-secondary);
10438
+ --interactive-surface-variant-secondary-fg: var(--bento-secondary-text, var(--bento-bg));
10439
+ --interactive-surface-variant-secondary-border-color: var(--bento-secondary);
10440
+ --interactive-surface-variant-accent-bg: var(--bento-accent);
10441
+ --interactive-surface-variant-accent-border-color: var(--bento-accent);
10442
+ --interactive-surface-variant-subtle-bg: var(--bento-surface-soft, var(--bento-surface));
10443
+ --interactive-surface-variant-subtle-fg: var(--bento-text);
10444
+ --interactive-surface-variant-subtle-border-color: var(--bento-border);
10445
+ --interactive-surface-variant-warning-bg: var(--bento-warning);
10446
+ --interactive-surface-variant-warning-border-color: var(--bento-warning);
10447
+ --interactive-surface-variant-danger-bg: var(--bento-danger);
10448
+ --interactive-surface-variant-danger-border-color: var(--bento-danger);
10449
+ }
10450
+
10451
+ :where([data-ui="maximalist"][data-theme][data-mode]) .interactive-surface {
10452
+ --interactive-surface-bg: var(--max-surface-strong, var(--max-surface, var(--max-bg)));
10453
+ --interactive-surface-fg: var(--max-text);
10454
+ --interactive-surface-border-color: var(--max-border);
10455
+ --interactive-surface-focus-ring-color: var(--max-focus, var(--max-accent, var(--max-primary)));
10456
+ --interactive-surface-radius: var(--max-radius-md, 0.75rem);
10457
+ --interactive-surface-state-layer-color: var(--max-text);
10458
+ --interactive-surface-light-icon-color: var(--max-warning, var(--max-accent));
10459
+ --interactive-surface-dark-icon-color: var(--max-text);
10460
+ --interactive-surface-accessibility-icon-color: var(--max-focus, var(--max-accent));
10461
+ --interactive-surface-light-icon-color-dark: var(--max-warning, var(--max-accent));
10462
+ --interactive-surface-dark-icon-color-dark: var(--max-text);
10463
+ --interactive-surface-accessibility-icon-color-dark: var(--max-focus, var(--max-accent));
10464
+ --interactive-surface-variant-primary-bg: var(--max-primary);
10465
+ --interactive-surface-variant-primary-fg: var(--max-primary-text, var(--max-bg));
10466
+ --interactive-surface-variant-primary-border-color: var(--max-primary);
10467
+ --interactive-surface-variant-secondary-bg: var(--max-secondary);
10468
+ --interactive-surface-variant-secondary-fg: var(--max-secondary-text, var(--max-bg));
10469
+ --interactive-surface-variant-secondary-border-color: var(--max-secondary);
10470
+ --interactive-surface-variant-accent-bg: var(--max-accent);
10471
+ --interactive-surface-variant-accent-border-color: var(--max-accent);
10472
+ --interactive-surface-variant-subtle-bg: var(--max-surface-soft, var(--max-surface));
10473
+ --interactive-surface-variant-subtle-fg: var(--max-text);
10474
+ --interactive-surface-variant-subtle-border-color: var(--max-border);
10475
+ --interactive-surface-variant-warning-bg: var(--max-warning);
10476
+ --interactive-surface-variant-warning-border-color: var(--max-warning);
10477
+ --interactive-surface-variant-danger-bg: var(--max-danger);
10478
+ --interactive-surface-variant-danger-border-color: var(--max-danger);
10479
+ }
10480
+
10481
+ :where([data-ui="bauhaus"][data-theme][data-mode]) .interactive-surface {
10482
+ --interactive-surface-bg: var(--bau-surface-strong, var(--bau-surface, var(--bau-bg)));
10483
+ --interactive-surface-fg: var(--bau-text);
10484
+ --interactive-surface-border-color: var(--bau-border);
10485
+ --interactive-surface-focus-ring-color: var(--bau-focus, var(--bau-accent, var(--bau-primary)));
10486
+ --interactive-surface-radius: var(--bau-radius-md, 0.75rem);
10487
+ --interactive-surface-state-layer-color: var(--bau-text);
10488
+ --interactive-surface-light-icon-color: var(--bau-warning, var(--bau-accent));
10489
+ --interactive-surface-dark-icon-color: var(--bau-text);
10490
+ --interactive-surface-accessibility-icon-color: var(--bau-focus, var(--bau-accent));
10491
+ --interactive-surface-light-icon-color-dark: var(--bau-warning, var(--bau-accent));
10492
+ --interactive-surface-dark-icon-color-dark: var(--bau-text);
10493
+ --interactive-surface-accessibility-icon-color-dark: var(--bau-focus, var(--bau-accent));
10494
+ --interactive-surface-variant-primary-bg: var(--bau-primary);
10495
+ --interactive-surface-variant-primary-fg: var(--bau-primary-text, var(--bau-bg));
10496
+ --interactive-surface-variant-primary-border-color: var(--bau-primary);
10497
+ --interactive-surface-variant-secondary-bg: var(--bau-secondary);
10498
+ --interactive-surface-variant-secondary-fg: var(--bau-secondary-text, var(--bau-bg));
10499
+ --interactive-surface-variant-secondary-border-color: var(--bau-secondary);
10500
+ --interactive-surface-variant-accent-bg: var(--bau-accent);
10501
+ --interactive-surface-variant-accent-border-color: var(--bau-accent);
10502
+ --interactive-surface-variant-subtle-bg: var(--bau-surface-soft, var(--bau-surface));
10503
+ --interactive-surface-variant-subtle-fg: var(--bau-text);
10504
+ --interactive-surface-variant-subtle-border-color: var(--bau-border);
10505
+ --interactive-surface-variant-warning-bg: var(--bau-warning);
10506
+ --interactive-surface-variant-warning-border-color: var(--bau-warning);
10507
+ --interactive-surface-variant-danger-bg: var(--bau-danger);
10508
+ --interactive-surface-variant-danger-border-color: var(--bau-danger);
10509
+ }
10510
+
10511
+ :where([data-ui="tactile"][data-theme][data-mode]) .interactive-surface {
10512
+ --interactive-surface-bg: var(--tactile-surface-strong, var(--tactile-surface, var(--tactile-bg)));
10513
+ --interactive-surface-fg: var(--tactile-text);
10514
+ --interactive-surface-border-color: var(--tactile-border);
10515
+ --interactive-surface-focus-ring-color: var(--tactile-focus, var(--tactile-accent, var(--tactile-primary)));
10516
+ --interactive-surface-radius: var(--tactile-radius-md, 0.75rem);
10517
+ --interactive-surface-state-layer-color: var(--tactile-text);
10518
+ --interactive-surface-light-icon-color: var(--tactile-warning, var(--tactile-accent));
10519
+ --interactive-surface-dark-icon-color: var(--tactile-text);
10520
+ --interactive-surface-accessibility-icon-color: var(--tactile-focus, var(--tactile-accent));
10521
+ --interactive-surface-light-icon-color-dark: var(--tactile-warning, var(--tactile-accent));
10522
+ --interactive-surface-dark-icon-color-dark: var(--tactile-text);
10523
+ --interactive-surface-accessibility-icon-color-dark: var(--tactile-focus, var(--tactile-accent));
10524
+ --interactive-surface-variant-primary-bg: var(--tactile-primary);
10525
+ --interactive-surface-variant-primary-fg: var(--tactile-primary-text, var(--tactile-bg));
10526
+ --interactive-surface-variant-primary-border-color: var(--tactile-primary);
10527
+ --interactive-surface-variant-secondary-bg: var(--tactile-secondary);
10528
+ --interactive-surface-variant-secondary-fg: var(--tactile-secondary-text, var(--tactile-bg));
10529
+ --interactive-surface-variant-secondary-border-color: var(--tactile-secondary);
10530
+ --interactive-surface-variant-accent-bg: var(--tactile-accent);
10531
+ --interactive-surface-variant-accent-border-color: var(--tactile-accent);
10532
+ --interactive-surface-variant-subtle-bg: var(--tactile-surface-soft, var(--tactile-surface));
10533
+ --interactive-surface-variant-subtle-fg: var(--tactile-text);
10534
+ --interactive-surface-variant-subtle-border-color: var(--tactile-border);
10535
+ --interactive-surface-variant-warning-bg: var(--tactile-warning);
10536
+ --interactive-surface-variant-warning-border-color: var(--tactile-warning);
10537
+ --interactive-surface-variant-danger-bg: var(--tactile-danger);
10538
+ --interactive-surface-variant-danger-border-color: var(--tactile-danger);
10539
+ }
10540
+
10541
+ :where([data-ui="neumorphism"][data-theme][data-mode]) .interactive-surface {
10542
+ --interactive-surface-bg: var(--neo-surface-strong, var(--neo-surface, var(--neo-bg)));
10543
+ --interactive-surface-fg: var(--neo-text);
10544
+ --interactive-surface-border-color: var(--neo-border);
10545
+ --interactive-surface-focus-ring-color: var(--neo-focus, var(--neo-accent, var(--neo-primary)));
10546
+ --interactive-surface-radius: var(--neo-radius-md, 0.75rem);
10547
+ --interactive-surface-state-layer-color: var(--neo-text);
10548
+ --interactive-surface-light-icon-color: var(--neo-warning, var(--neo-accent));
10549
+ --interactive-surface-dark-icon-color: var(--neo-text);
10550
+ --interactive-surface-accessibility-icon-color: var(--neo-focus, var(--neo-accent));
10551
+ --interactive-surface-light-icon-color-dark: var(--neo-warning, var(--neo-accent));
10552
+ --interactive-surface-dark-icon-color-dark: var(--neo-text);
10553
+ --interactive-surface-accessibility-icon-color-dark: var(--neo-focus, var(--neo-accent));
10554
+ --interactive-surface-variant-primary-bg: var(--neo-primary);
10555
+ --interactive-surface-variant-primary-fg: var(--neo-primary-text, var(--neo-bg));
10556
+ --interactive-surface-variant-primary-border-color: var(--neo-primary);
10557
+ --interactive-surface-variant-secondary-bg: var(--neo-secondary);
10558
+ --interactive-surface-variant-secondary-fg: var(--neo-secondary-text, var(--neo-bg));
10559
+ --interactive-surface-variant-secondary-border-color: var(--neo-secondary);
10560
+ --interactive-surface-variant-accent-bg: var(--neo-accent);
10561
+ --interactive-surface-variant-accent-border-color: var(--neo-accent);
10562
+ --interactive-surface-variant-subtle-bg: var(--neo-surface-soft, var(--neo-surface));
10563
+ --interactive-surface-variant-subtle-fg: var(--neo-text);
10564
+ --interactive-surface-variant-subtle-border-color: var(--neo-border);
10565
+ --interactive-surface-variant-warning-bg: var(--neo-warning);
10566
+ --interactive-surface-variant-warning-border-color: var(--neo-warning);
10567
+ --interactive-surface-variant-danger-bg: var(--neo-danger);
10568
+ --interactive-surface-variant-danger-border-color: var(--neo-danger);
10569
+ }
10570
+
10571
+ :where([data-ui="retrofuturism"][data-theme][data-mode]) .interactive-surface {
10572
+ --interactive-surface-bg: var(--retro-surface-strong, var(--retro-surface, var(--retro-bg)));
10573
+ --interactive-surface-fg: var(--retro-text);
10574
+ --interactive-surface-border-color: var(--retro-border);
10575
+ --interactive-surface-focus-ring-color: var(--retro-focus, var(--retro-accent, var(--retro-primary)));
10576
+ --interactive-surface-radius: var(--retro-radius-md, 0.75rem);
10577
+ --interactive-surface-state-layer-color: var(--retro-text);
10578
+ --interactive-surface-light-icon-color: var(--retro-warning, var(--retro-accent));
10579
+ --interactive-surface-dark-icon-color: var(--retro-text);
10580
+ --interactive-surface-accessibility-icon-color: var(--retro-focus, var(--retro-accent));
10581
+ --interactive-surface-light-icon-color-dark: var(--retro-warning, var(--retro-accent));
10582
+ --interactive-surface-dark-icon-color-dark: var(--retro-text);
10583
+ --interactive-surface-accessibility-icon-color-dark: var(--retro-focus, var(--retro-accent));
10584
+ --interactive-surface-variant-primary-bg: var(--retro-primary);
10585
+ --interactive-surface-variant-primary-fg: var(--retro-primary-text, var(--retro-bg));
10586
+ --interactive-surface-variant-primary-border-color: var(--retro-primary);
10587
+ --interactive-surface-variant-secondary-bg: var(--retro-secondary);
10588
+ --interactive-surface-variant-secondary-fg: var(--retro-secondary-text, var(--retro-bg));
10589
+ --interactive-surface-variant-secondary-border-color: var(--retro-secondary);
10590
+ --interactive-surface-variant-accent-bg: var(--retro-accent);
10591
+ --interactive-surface-variant-accent-border-color: var(--retro-accent);
10592
+ --interactive-surface-variant-subtle-bg: var(--retro-surface-soft, var(--retro-surface));
10593
+ --interactive-surface-variant-subtle-fg: var(--retro-text);
10594
+ --interactive-surface-variant-subtle-border-color: var(--retro-border);
10595
+ --interactive-surface-variant-warning-bg: var(--retro-warning);
10596
+ --interactive-surface-variant-warning-border-color: var(--retro-warning);
10597
+ --interactive-surface-variant-danger-bg: var(--retro-danger);
10598
+ --interactive-surface-variant-danger-border-color: var(--retro-danger);
10599
+ }
10600
+
10601
+ :where([data-ui="brutalism"][data-theme][data-mode]) .interactive-surface {
10602
+ --interactive-surface-bg: var(--brutal-surface-strong, var(--brutal-surface, var(--brutal-bg)));
10603
+ --interactive-surface-fg: var(--brutal-text);
10604
+ --interactive-surface-border-color: var(--brutal-border);
10605
+ --interactive-surface-focus-ring-color: var(--brutal-focus, var(--brutal-accent, var(--brutal-primary)));
10606
+ --interactive-surface-radius: var(--brutal-radius-md, 0.75rem);
10607
+ --interactive-surface-state-layer-color: var(--brutal-text);
10608
+ --interactive-surface-light-icon-color: var(--brutal-warning, var(--brutal-accent));
10609
+ --interactive-surface-dark-icon-color: var(--brutal-text);
10610
+ --interactive-surface-accessibility-icon-color: var(--brutal-focus, var(--brutal-accent));
10611
+ --interactive-surface-light-icon-color-dark: var(--brutal-warning, var(--brutal-accent));
10612
+ --interactive-surface-dark-icon-color-dark: var(--brutal-text);
10613
+ --interactive-surface-accessibility-icon-color-dark: var(--brutal-focus, var(--brutal-accent));
10614
+ --interactive-surface-variant-primary-bg: var(--brutal-primary);
10615
+ --interactive-surface-variant-primary-fg: var(--brutal-primary-text, var(--brutal-bg));
10616
+ --interactive-surface-variant-primary-border-color: var(--brutal-primary);
10617
+ --interactive-surface-variant-secondary-bg: var(--brutal-secondary);
10618
+ --interactive-surface-variant-secondary-fg: var(--brutal-secondary-text, var(--brutal-bg));
10619
+ --interactive-surface-variant-secondary-border-color: var(--brutal-secondary);
10620
+ --interactive-surface-variant-accent-bg: var(--brutal-accent);
10621
+ --interactive-surface-variant-accent-border-color: var(--brutal-accent);
10622
+ --interactive-surface-variant-subtle-bg: var(--brutal-surface-soft, var(--brutal-surface));
10623
+ --interactive-surface-variant-subtle-fg: var(--brutal-text);
10624
+ --interactive-surface-variant-subtle-border-color: var(--brutal-border);
10625
+ --interactive-surface-variant-warning-bg: var(--brutal-warning);
10626
+ --interactive-surface-variant-warning-border-color: var(--brutal-warning);
10627
+ --interactive-surface-variant-danger-bg: var(--brutal-danger);
10628
+ --interactive-surface-variant-danger-border-color: var(--brutal-danger);
10629
+ }
10630
+
10631
+ :where([data-ui="cyberpunk"][data-theme][data-mode]) .interactive-surface {
10632
+ --interactive-surface-bg: var(--cyber-surface-strong, var(--cyber-surface, var(--cyber-bg)));
10633
+ --interactive-surface-fg: var(--cyber-text);
10634
+ --interactive-surface-border-color: var(--cyber-border);
10635
+ --interactive-surface-focus-ring-color: var(--cyber-focus, var(--cyber-accent, var(--cyber-primary)));
10636
+ --interactive-surface-radius: var(--cyber-radius-md, 0.75rem);
10637
+ --interactive-surface-state-layer-color: var(--cyber-text);
10638
+ --interactive-surface-light-icon-color: var(--cyber-warning, var(--cyber-accent));
10639
+ --interactive-surface-dark-icon-color: var(--cyber-text);
10640
+ --interactive-surface-accessibility-icon-color: var(--cyber-focus, var(--cyber-accent));
10641
+ --interactive-surface-light-icon-color-dark: var(--cyber-warning, var(--cyber-accent));
10642
+ --interactive-surface-dark-icon-color-dark: var(--cyber-text);
10643
+ --interactive-surface-accessibility-icon-color-dark: var(--cyber-focus, var(--cyber-accent));
10644
+ --interactive-surface-variant-primary-bg: var(--cyber-primary);
10645
+ --interactive-surface-variant-primary-fg: var(--cyber-primary-text, var(--cyber-bg));
10646
+ --interactive-surface-variant-primary-border-color: var(--cyber-primary);
10647
+ --interactive-surface-variant-secondary-bg: var(--cyber-secondary);
10648
+ --interactive-surface-variant-secondary-fg: var(--cyber-secondary-text, var(--cyber-bg));
10649
+ --interactive-surface-variant-secondary-border-color: var(--cyber-secondary);
10650
+ --interactive-surface-variant-accent-bg: var(--cyber-accent);
10651
+ --interactive-surface-variant-accent-border-color: var(--cyber-accent);
10652
+ --interactive-surface-variant-subtle-bg: var(--cyber-surface-soft, var(--cyber-surface));
10653
+ --interactive-surface-variant-subtle-fg: var(--cyber-text);
10654
+ --interactive-surface-variant-subtle-border-color: var(--cyber-border);
10655
+ --interactive-surface-variant-warning-bg: var(--cyber-warning);
10656
+ --interactive-surface-variant-warning-border-color: var(--cyber-warning);
10657
+ --interactive-surface-variant-danger-bg: var(--cyber-danger);
10658
+ --interactive-surface-variant-danger-border-color: var(--cyber-danger);
10659
+ }
10660
+
10661
+ :where([data-ui="y2k"][data-theme][data-mode]) .interactive-surface {
10662
+ --interactive-surface-bg: var(--y2k-surface-strong, var(--y2k-surface, var(--y2k-bg)));
10663
+ --interactive-surface-fg: var(--y2k-text);
10664
+ --interactive-surface-border-color: var(--y2k-border);
10665
+ --interactive-surface-focus-ring-color: var(--y2k-focus, var(--y2k-accent, var(--y2k-primary)));
10666
+ --interactive-surface-radius: var(--y2k-radius-md, 0.75rem);
10667
+ --interactive-surface-state-layer-color: var(--y2k-text);
10668
+ --interactive-surface-light-icon-color: var(--y2k-warning, var(--y2k-accent));
10669
+ --interactive-surface-dark-icon-color: var(--y2k-text);
10670
+ --interactive-surface-accessibility-icon-color: var(--y2k-focus, var(--y2k-accent));
10671
+ --interactive-surface-light-icon-color-dark: var(--y2k-warning, var(--y2k-accent));
10672
+ --interactive-surface-dark-icon-color-dark: var(--y2k-text);
10673
+ --interactive-surface-accessibility-icon-color-dark: var(--y2k-focus, var(--y2k-accent));
10674
+ --interactive-surface-variant-primary-bg: var(--y2k-primary);
10675
+ --interactive-surface-variant-primary-fg: var(--y2k-primary-text, var(--y2k-bg));
10676
+ --interactive-surface-variant-primary-border-color: var(--y2k-primary);
10677
+ --interactive-surface-variant-secondary-bg: var(--y2k-secondary);
10678
+ --interactive-surface-variant-secondary-fg: var(--y2k-secondary-text, var(--y2k-bg));
10679
+ --interactive-surface-variant-secondary-border-color: var(--y2k-secondary);
10680
+ --interactive-surface-variant-accent-bg: var(--y2k-accent);
10681
+ --interactive-surface-variant-accent-border-color: var(--y2k-accent);
10682
+ --interactive-surface-variant-subtle-bg: var(--y2k-surface-soft, var(--y2k-surface));
10683
+ --interactive-surface-variant-subtle-fg: var(--y2k-text);
10684
+ --interactive-surface-variant-subtle-border-color: var(--y2k-border);
10685
+ --interactive-surface-variant-warning-bg: var(--y2k-warning);
10686
+ --interactive-surface-variant-warning-border-color: var(--y2k-warning);
10687
+ --interactive-surface-variant-danger-bg: var(--y2k-danger);
10688
+ --interactive-surface-variant-danger-border-color: var(--y2k-danger);
10689
+ }
10690
+
10691
+ :where([data-ui="retro-glass"][data-theme][data-mode]) .interactive-surface {
10692
+ --interactive-surface-bg: var(--rg-surface-strong, var(--rg-surface, var(--rg-bg)));
10693
+ --interactive-surface-fg: var(--rg-text);
10694
+ --interactive-surface-border-color: var(--rg-border);
10695
+ --interactive-surface-focus-ring-color: var(--rg-focus, var(--rg-accent, var(--rg-primary)));
10696
+ --interactive-surface-radius: var(--rg-radius-md, 0.75rem);
10697
+ --interactive-surface-state-layer-color: var(--rg-text);
10698
+ --interactive-surface-light-icon-color: var(--rg-warning, var(--rg-accent));
10699
+ --interactive-surface-dark-icon-color: var(--rg-text);
10700
+ --interactive-surface-accessibility-icon-color: var(--rg-focus, var(--rg-accent));
10701
+ --interactive-surface-light-icon-color-dark: var(--rg-warning, var(--rg-accent));
10702
+ --interactive-surface-dark-icon-color-dark: var(--rg-text);
10703
+ --interactive-surface-accessibility-icon-color-dark: var(--rg-focus, var(--rg-accent));
10704
+ --interactive-surface-variant-primary-bg: var(--rg-primary);
10705
+ --interactive-surface-variant-primary-fg: var(--rg-primary-text, var(--rg-bg));
10706
+ --interactive-surface-variant-primary-border-color: var(--rg-primary);
10707
+ --interactive-surface-variant-secondary-bg: var(--rg-secondary);
10708
+ --interactive-surface-variant-secondary-fg: var(--rg-secondary-text, var(--rg-bg));
10709
+ --interactive-surface-variant-secondary-border-color: var(--rg-secondary);
10710
+ --interactive-surface-variant-accent-bg: var(--rg-accent);
10711
+ --interactive-surface-variant-accent-border-color: var(--rg-accent);
10712
+ --interactive-surface-variant-subtle-bg: var(--rg-surface-soft, var(--rg-surface));
10713
+ --interactive-surface-variant-subtle-fg: var(--rg-text);
10714
+ --interactive-surface-variant-subtle-border-color: var(--rg-border);
10715
+ --interactive-surface-variant-warning-bg: var(--rg-warning);
10716
+ --interactive-surface-variant-warning-border-color: var(--rg-warning);
10717
+ --interactive-surface-variant-danger-bg: var(--rg-danger);
10718
+ --interactive-surface-variant-danger-border-color: var(--rg-danger);
10719
+ }