ui-style-kit-css 2.3.0 → 2.4.0

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 (120) hide show
  1. package/CHANGELOG.md +40 -2
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +91 -42
  4. package/STYLE-MAP.md +9 -5
  5. package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
  6. package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
  7. package/dist/assets/bauhaus-barlow.ttf +0 -0
  8. package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
  9. package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
  10. package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
  11. package/dist/assets/bento-manrope-OFL.txt +93 -0
  12. package/dist/assets/bento-manrope.ttf +0 -0
  13. package/dist/assets/clay-grain.png +0 -0
  14. package/dist/assets/clay-rounded-OFL.txt +93 -0
  15. package/dist/assets/clay-rounded.ttf +0 -0
  16. package/dist/assets/neo-noir-corner-dark.png +0 -0
  17. package/dist/assets/neo-noir-corner-light.png +0 -0
  18. package/dist/assets/neo-noir-texture-dark.png +0 -0
  19. package/dist/assets/neo-noir-texture-light.png +0 -0
  20. package/dist/assets/organic-display-OFL.txt +93 -0
  21. package/dist/assets/organic-display.ttf +0 -0
  22. package/dist/assets/organic-icons-LICENSE.txt +21 -0
  23. package/dist/assets/organic-sans-OFL.txt +93 -0
  24. package/dist/assets/organic-sans.ttf +0 -0
  25. package/dist/ui-style-kit.css +47483 -15117
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +47344 -15106
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +47510 -15134
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +2821 -279
  32. package/dist/visual/bauhaus.css +2 -4692
  33. package/dist/visual/bento.css +2 -4708
  34. package/dist/visual/brutalism.css +812 -224
  35. package/dist/visual/clay.css +2 -4786
  36. package/dist/visual/cyberpunk.css +2238 -267
  37. package/dist/visual/data-terminal.css +1671 -293
  38. package/dist/visual/editorial-luxe.css +1889 -243
  39. package/dist/visual/industrial-utility.css +2717 -255
  40. package/dist/visual/maximalist.css +1768 -447
  41. package/dist/visual/minimal-saas.css +1076 -382
  42. package/dist/visual/neo-noir.css +2 -4787
  43. package/dist/visual/neumorphism.css +1266 -388
  44. package/dist/visual/organic-modern.css +2 -4764
  45. package/dist/visual/paper-editorial.css +2551 -276
  46. package/dist/visual/retro-glass.css +2235 -319
  47. package/dist/visual/retrofuturism.css +1460 -382
  48. package/dist/visual/tactile.css +2251 -443
  49. package/dist/visual/technical-blueprint.css +2207 -285
  50. package/dist/visual/y2k.css +1481 -294
  51. package/docs/ART-DECO.md +80 -0
  52. package/docs/BAUHAUS.md +152 -0
  53. package/docs/BENTO.md +121 -0
  54. package/docs/CLAY.md +127 -0
  55. package/docs/DEMO-SHOWCASE.md +65 -0
  56. package/docs/ECOSYSTEM.md +4 -4
  57. package/docs/EDITORIAL-LUX.md +75 -0
  58. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  59. package/docs/NATIVE-ELEMENTS.md +23 -17
  60. package/docs/NEO-NOIR.md +94 -0
  61. package/docs/ORGANIC-MODERN.md +91 -0
  62. package/docs/PAPER-EDITORIAL.md +63 -0
  63. package/docs/PUBLISHING.md +31 -10
  64. package/docs/RELEASE-2.4.0.md +88 -0
  65. package/docs/RETRO-GLASS.md +105 -0
  66. package/docs/STYLE-GUIDE.md +40 -25
  67. package/docs/TACTILE.md +38 -0
  68. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  69. package/docs/TOKENS.md +80 -3
  70. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  71. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  72. package/manifest.json +618 -27
  73. package/package.json +18 -10
  74. package/styles/art-deco.css +1397 -12
  75. package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
  76. package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
  77. package/styles/assets/bauhaus-barlow.ttf +0 -0
  78. package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
  79. package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
  80. package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
  81. package/styles/assets/bento-manrope-OFL.txt +93 -0
  82. package/styles/assets/bento-manrope.ttf +0 -0
  83. package/styles/assets/clay-grain.png +0 -0
  84. package/styles/assets/clay-rounded-OFL.txt +93 -0
  85. package/styles/assets/clay-rounded.ttf +0 -0
  86. package/styles/assets/neo-noir-corner-dark.png +0 -0
  87. package/styles/assets/neo-noir-corner-light.png +0 -0
  88. package/styles/assets/neo-noir-texture-dark.png +0 -0
  89. package/styles/assets/neo-noir-texture-light.png +0 -0
  90. package/styles/assets/organic-display-OFL.txt +93 -0
  91. package/styles/assets/organic-display.ttf +0 -0
  92. package/styles/assets/organic-icons-LICENSE.txt +21 -0
  93. package/styles/assets/organic-sans-OFL.txt +93 -0
  94. package/styles/assets/organic-sans.ttf +0 -0
  95. package/styles/bauhaus.css +878 -107
  96. package/styles/bento.css +1176 -108
  97. package/styles/brutalism.css +262 -11
  98. package/styles/clay.css +1303 -68
  99. package/styles/compat-layout.css +1 -2
  100. package/styles/components.css +105 -34
  101. package/styles/content-overflow.css +11 -5
  102. package/styles/cyberpunk.css +1852 -47
  103. package/styles/data-terminal.css +1116 -12
  104. package/styles/editorial-luxe.css +576 -12
  105. package/styles/industrial-utility.css +1771 -12
  106. package/styles/interactive-surface-bridge.css +30 -20
  107. package/styles/interactive-surface-theme.css +21 -11
  108. package/styles/maximalist.css +1214 -132
  109. package/styles/minimal-saas.css +459 -88
  110. package/styles/native-elements.css +347 -171
  111. package/styles/neo-noir.css +656 -14
  112. package/styles/neumorphism.css +1018 -146
  113. package/styles/organic-modern.css +688 -18
  114. package/styles/paper-editorial.css +1048 -12
  115. package/styles/retro-glass.css +635 -46
  116. package/styles/retrofuturism.css +944 -56
  117. package/styles/tactile.css +1810 -108
  118. package/styles/technical-blueprint.css +668 -17
  119. package/styles/theme-colors.css +2 -2
  120. package/styles/y2k.css +950 -42
package/styles/interactive-surface-bridge.css CHANGED
@@ -9,7 +9,7 @@
9
9
  surface behavior, avoiding per-theme and per-preset token maps.
10
10
  ========================================================= */
11
11
 
12
- :where([data-ui][data-theme][data-mode]) .interactive-surface {
12
+ :where([data-ui][data-mode]) .interactive-surface {
13
13
  --interactive-surface-border-width: 1px;
14
14
  /* Preserve the adapter's opaque paint while semantic surfaces may retain preset alpha. */
15
15
  --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
@@ -74,15 +74,25 @@
74
74
  transform 160ms ease;
75
75
  }
76
76
 
77
+ /**
78
+ * Gives bridged text links a WCAG-sized pointer target without changing button
79
+ * or form-control geometry.
80
+ */
81
+ :where([data-ui][data-mode]) a.interactive-surface {
82
+ display: inline-flex;
83
+ align-items: center;
84
+ min-block-size: 24px;
85
+ }
86
+
77
87
  @supports (color: color-mix(in srgb, black, white)) {
78
- :where([data-ui][data-theme][data-mode]) .interactive-surface {
88
+ :where([data-ui][data-mode]) .interactive-surface {
79
89
  --interactive-surface-level-3-bg: color-mix(in srgb, var(--interactive-surface-bg) 82%, var(--interactive-surface-variant-primary-bg));
80
90
  --interactive-surface-level-3-border-color: color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 72%, var(--interactive-surface-border-color));
81
91
  --interactive-surface-level-3-shadow: 0 14px 34px rgb(var(--usk-bg-rgb, 0 0 0) / .3), 0 0 0 1px color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 34%, transparent);
82
92
  }
83
93
  }
84
94
 
85
- :where([data-ui][data-theme][data-mode]) .interactive-surface::before {
95
+ :where([data-ui][data-mode]) .interactive-surface::before {
86
96
  position: absolute;
87
97
  inset: 0;
88
98
  border-radius: inherit;
@@ -93,72 +103,72 @@
93
103
  content: "";
94
104
  }
95
105
 
96
- :where([data-ui][data-theme][data-mode]) .interactive-surface:not([disabled]):not([aria-disabled="true"]):hover {
106
+ :where([data-ui][data-mode]) .interactive-surface:not([disabled]):not([aria-disabled="true"]):hover {
97
107
  --interactive-surface-state-layer-opacity: var(--interactive-surface-state-layer-opacity-hover);
98
108
 
99
109
  transform: translateY(-1px);
100
110
  }
101
111
 
102
- :where([data-ui][data-theme][data-mode]) .interactive-surface:not([disabled]):not([aria-disabled="true"]):active,
103
- :where([data-ui][data-theme][data-mode]) .interactive-surface[aria-pressed="true"],
104
- :where([data-ui][data-theme][data-mode]) .interactive-surface[aria-current="page"],
105
- :where([data-ui][data-theme][data-mode]) .interactive-surface.is-active {
112
+ :where([data-ui][data-mode]) .interactive-surface:not([disabled]):not([aria-disabled="true"]):active,
113
+ :where([data-ui][data-mode]) .interactive-surface[aria-pressed="true"],
114
+ :where([data-ui][data-mode]) .interactive-surface[aria-current="page"],
115
+ :where([data-ui][data-mode]) .interactive-surface.is-active {
106
116
  --interactive-surface-state-layer-opacity: var(--interactive-surface-state-layer-opacity-active);
107
117
 
108
118
  transform: translateY(0);
109
119
  }
110
120
 
111
- :where([data-ui][data-theme][data-mode]) .interactive-surface:focus-visible {
121
+ :where([data-ui][data-mode]) .interactive-surface:focus-visible {
112
122
  --interactive-surface-state-layer-opacity: var(--interactive-surface-state-layer-opacity-focus);
113
123
 
114
124
  outline: 2px solid var(--interactive-surface-focus-ring-color);
115
125
  outline-offset: 3px;
116
126
  }
117
127
 
118
- :where([data-ui][data-theme][data-mode]) .interactive-surface[disabled],
119
- :where([data-ui][data-theme][data-mode]) .interactive-surface[aria-disabled="true"] {
128
+ :where([data-ui][data-mode]) .interactive-surface[disabled],
129
+ :where([data-ui][data-mode]) .interactive-surface[aria-disabled="true"] {
120
130
  opacity: .56;
121
131
  cursor: not-allowed;
122
132
  }
123
133
 
124
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="primary"] {
134
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="primary"] {
125
135
  --interactive-surface-bg: var(--interactive-surface-variant-primary-bg);
126
136
  --interactive-surface-fg: var(--interactive-surface-variant-primary-fg);
127
137
  --interactive-surface-border-color: var(--interactive-surface-variant-primary-border-color);
128
138
  }
129
139
 
130
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="secondary"] {
140
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="secondary"] {
131
141
  --interactive-surface-bg: var(--interactive-surface-variant-secondary-bg);
132
142
  --interactive-surface-fg: var(--interactive-surface-variant-secondary-fg);
133
143
  --interactive-surface-border-color: var(--interactive-surface-variant-secondary-border-color);
134
144
  }
135
145
 
136
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="accent"] {
146
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="accent"] {
137
147
  --interactive-surface-bg: var(--interactive-surface-variant-accent-bg);
138
148
  --interactive-surface-fg: var(--interactive-surface-variant-accent-fg);
139
149
  --interactive-surface-border-color: var(--interactive-surface-variant-accent-border-color);
140
150
  }
141
151
 
142
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="subtle"] {
152
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="subtle"] {
143
153
  --interactive-surface-bg: var(--interactive-surface-variant-subtle-bg);
144
154
  --interactive-surface-fg: var(--interactive-surface-variant-subtle-fg);
145
155
  --interactive-surface-border-color: var(--interactive-surface-variant-subtle-border-color);
146
156
  }
147
157
 
148
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="warning"] {
158
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="warning"] {
149
159
  --interactive-surface-bg: var(--interactive-surface-variant-warning-bg);
150
160
  --interactive-surface-fg: var(--interactive-surface-variant-warning-fg);
151
161
  --interactive-surface-border-color: var(--interactive-surface-variant-warning-border-color);
152
162
  }
153
163
 
154
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="danger"] {
164
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="danger"] {
155
165
  --interactive-surface-bg: var(--interactive-surface-variant-danger-bg);
156
166
  --interactive-surface-fg: var(--interactive-surface-variant-danger-fg);
157
167
  --interactive-surface-border-color: var(--interactive-surface-variant-danger-border-color);
158
168
  }
159
169
 
160
170
  /* Surface levels define the three visual depths consumed by the demo and bridge hooks. */
161
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="1"] {
171
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="1"] {
162
172
  --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
163
173
  --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
164
174
  --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);
@@ -167,7 +177,7 @@
167
177
  --interactive-surface-state-layer-opacity-focus: .18;
168
178
  }
169
179
 
170
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="2"] {
180
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="2"] {
171
181
  --interactive-surface-level-bg: var(--interactive-surface-level-2-bg);
172
182
  --interactive-surface-level-border-color: var(--interactive-surface-level-2-border-color);
173
183
  --interactive-surface-level-shadow: var(--interactive-surface-level-2-shadow);
@@ -176,7 +186,7 @@
176
186
  --interactive-surface-state-layer-opacity-focus: .22;
177
187
  }
178
188
 
179
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="3"] {
189
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="3"] {
180
190
  --interactive-surface-level-bg: var(--interactive-surface-level-3-bg);
181
191
  --interactive-surface-level-border-color: var(--interactive-surface-level-3-border-color);
182
192
  --interactive-surface-level-shadow: var(--interactive-surface-level-3-shadow);
package/styles/interactive-surface-theme.css CHANGED
@@ -6,7 +6,7 @@
6
6
  hover, focus, active, disabled, and reduced-motion behavior.
7
7
  ========================================================= */
8
8
 
9
- :where([data-ui][data-theme][data-mode]) .interactive-surface {
9
+ :where([data-ui][data-mode]) .interactive-surface {
10
10
  --interactive-surface-border-width: 1px;
11
11
  /* Preserve the adapter's opaque paint while semantic surfaces may retain preset alpha. */
12
12
  --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
@@ -59,64 +59,74 @@
59
59
  color: var(--interactive-surface-fg);
60
60
  }
61
61
 
62
+ /**
63
+ * Gives bridged text links a WCAG-sized pointer target without changing button
64
+ * or form-control geometry.
65
+ */
66
+ :where([data-ui][data-mode]) a.interactive-surface {
67
+ display: inline-flex;
68
+ align-items: center;
69
+ min-block-size: 24px;
70
+ }
71
+
62
72
  @supports (color: color-mix(in srgb, black, white)) {
63
- :where([data-ui][data-theme][data-mode]) .interactive-surface {
73
+ :where([data-ui][data-mode]) .interactive-surface {
64
74
  --interactive-surface-level-3-bg: color-mix(in srgb, var(--interactive-surface-bg) 82%, var(--interactive-surface-variant-primary-bg));
65
75
  --interactive-surface-level-3-border-color: color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 72%, var(--interactive-surface-border-color));
66
76
  --interactive-surface-level-3-shadow: 0 14px 34px rgb(var(--usk-bg-rgb, 0 0 0) / .3), 0 0 0 1px color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 34%, transparent);
67
77
  }
68
78
  }
69
79
 
70
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="primary"] {
80
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="primary"] {
71
81
  --interactive-surface-bg: var(--interactive-surface-variant-primary-bg);
72
82
  --interactive-surface-fg: var(--interactive-surface-variant-primary-fg);
73
83
  --interactive-surface-border-color: var(--interactive-surface-variant-primary-border-color);
74
84
  }
75
85
 
76
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="secondary"] {
86
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="secondary"] {
77
87
  --interactive-surface-bg: var(--interactive-surface-variant-secondary-bg);
78
88
  --interactive-surface-fg: var(--interactive-surface-variant-secondary-fg);
79
89
  --interactive-surface-border-color: var(--interactive-surface-variant-secondary-border-color);
80
90
  }
81
91
 
82
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="accent"] {
92
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="accent"] {
83
93
  --interactive-surface-bg: var(--interactive-surface-variant-accent-bg);
84
94
  --interactive-surface-fg: var(--interactive-surface-variant-accent-fg);
85
95
  --interactive-surface-border-color: var(--interactive-surface-variant-accent-border-color);
86
96
  }
87
97
 
88
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="subtle"] {
98
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="subtle"] {
89
99
  --interactive-surface-bg: var(--interactive-surface-variant-subtle-bg);
90
100
  --interactive-surface-fg: var(--interactive-surface-variant-subtle-fg);
91
101
  --interactive-surface-border-color: var(--interactive-surface-variant-subtle-border-color);
92
102
  }
93
103
 
94
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="warning"] {
104
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="warning"] {
95
105
  --interactive-surface-bg: var(--interactive-surface-variant-warning-bg);
96
106
  --interactive-surface-fg: var(--interactive-surface-variant-warning-fg);
97
107
  --interactive-surface-border-color: var(--interactive-surface-variant-warning-border-color);
98
108
  }
99
109
 
100
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="danger"] {
110
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="danger"] {
101
111
  --interactive-surface-bg: var(--interactive-surface-variant-danger-bg);
102
112
  --interactive-surface-fg: var(--interactive-surface-variant-danger-fg);
103
113
  --interactive-surface-border-color: var(--interactive-surface-variant-danger-border-color);
104
114
  }
105
115
 
106
116
  /* Level selectors select paint depth without taking ownership of interaction states. */
107
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="1"] {
117
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="1"] {
108
118
  --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
109
119
  --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
110
120
  --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);
111
121
  }
112
122
 
113
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="2"] {
123
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="2"] {
114
124
  --interactive-surface-level-bg: var(--interactive-surface-level-2-bg);
115
125
  --interactive-surface-level-border-color: var(--interactive-surface-level-2-border-color);
116
126
  --interactive-surface-level-shadow: var(--interactive-surface-level-2-shadow);
117
127
  }
118
128
 
119
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="3"] {
129
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="3"] {
120
130
  --interactive-surface-level-bg: var(--interactive-surface-level-3-bg);
121
131
  --interactive-surface-level-border-color: var(--interactive-surface-level-3-border-color);
122
132
  --interactive-surface-level-shadow: var(--interactive-surface-level-3-shadow);