ui-style-kit-css 2.3.0 → 2.4.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 (122) hide show
  1. package/CHANGELOG.md +57 -2
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +102 -44
  4. package/STYLE-MAP.md +14 -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 +47898 -15121
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +47771 -15122
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +47932 -15145
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +3247 -295
  32. package/dist/visual/bauhaus.css +2 -4692
  33. package/dist/visual/bento.css +2 -4708
  34. package/dist/visual/brutalism.css +1229 -231
  35. package/dist/visual/clay.css +2 -4786
  36. package/dist/visual/cyberpunk.css +2663 -282
  37. package/dist/visual/data-terminal.css +2064 -276
  38. package/dist/visual/editorial-luxe.css +2315 -259
  39. package/dist/visual/industrial-utility.css +3142 -270
  40. package/dist/visual/maximalist.css +2185 -454
  41. package/dist/visual/minimal-saas.css +1503 -398
  42. package/dist/visual/neo-noir.css +2 -4787
  43. package/dist/visual/neumorphism.css +1690 -402
  44. package/dist/visual/organic-modern.css +2 -4764
  45. package/dist/visual/paper-editorial.css +2977 -292
  46. package/dist/visual/retro-glass.css +2625 -299
  47. package/dist/visual/retrofuturism.css +1885 -397
  48. package/dist/visual/tactile.css +2716 -498
  49. package/dist/visual/technical-blueprint.css +2599 -267
  50. package/dist/visual/y2k.css +1906 -309
  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/COLOR-THEMES.md +63 -0
  56. package/docs/DEMO-SHOWCASE.md +65 -0
  57. package/docs/ECOSYSTEM.md +4 -4
  58. package/docs/EDITORIAL-LUX.md +75 -0
  59. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  60. package/docs/NATIVE-ELEMENTS.md +23 -17
  61. package/docs/NEO-NOIR.md +94 -0
  62. package/docs/ORGANIC-MODERN.md +91 -0
  63. package/docs/PAPER-EDITORIAL.md +63 -0
  64. package/docs/PUBLISHING.md +31 -10
  65. package/docs/RELEASE-2.4.0.md +88 -0
  66. package/docs/RELEASE-2.4.1.md +35 -0
  67. package/docs/RETRO-GLASS.md +105 -0
  68. package/docs/STYLE-GUIDE.md +41 -26
  69. package/docs/TACTILE.md +38 -0
  70. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  71. package/docs/TOKENS.md +80 -3
  72. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  73. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  74. package/manifest.json +624 -28
  75. package/package.json +20 -11
  76. package/styles/art-deco.css +1402 -17
  77. package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
  78. package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
  79. package/styles/assets/bauhaus-barlow.ttf +0 -0
  80. package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
  81. package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
  82. package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
  83. package/styles/assets/bento-manrope-OFL.txt +93 -0
  84. package/styles/assets/bento-manrope.ttf +0 -0
  85. package/styles/assets/clay-grain.png +0 -0
  86. package/styles/assets/clay-rounded-OFL.txt +93 -0
  87. package/styles/assets/clay-rounded.ttf +0 -0
  88. package/styles/assets/neo-noir-corner-dark.png +0 -0
  89. package/styles/assets/neo-noir-corner-light.png +0 -0
  90. package/styles/assets/neo-noir-texture-dark.png +0 -0
  91. package/styles/assets/neo-noir-texture-light.png +0 -0
  92. package/styles/assets/organic-display-OFL.txt +93 -0
  93. package/styles/assets/organic-display.ttf +0 -0
  94. package/styles/assets/organic-icons-LICENSE.txt +21 -0
  95. package/styles/assets/organic-sans-OFL.txt +93 -0
  96. package/styles/assets/organic-sans.ttf +0 -0
  97. package/styles/bauhaus.css +881 -110
  98. package/styles/bento.css +1182 -113
  99. package/styles/brutalism.css +266 -15
  100. package/styles/clay.css +1307 -72
  101. package/styles/compat-layout.css +1 -2
  102. package/styles/components.css +107 -36
  103. package/styles/content-overflow.css +11 -5
  104. package/styles/cyberpunk.css +1856 -51
  105. package/styles/data-terminal.css +1122 -18
  106. package/styles/editorial-luxe.css +581 -17
  107. package/styles/industrial-utility.css +1775 -16
  108. package/styles/interactive-surface-bridge.css +30 -20
  109. package/styles/interactive-surface-theme.css +21 -11
  110. package/styles/maximalist.css +1215 -133
  111. package/styles/minimal-saas.css +465 -93
  112. package/styles/native-elements.css +347 -171
  113. package/styles/neo-noir.css +661 -19
  114. package/styles/neumorphism.css +1021 -149
  115. package/styles/organic-modern.css +693 -23
  116. package/styles/paper-editorial.css +1053 -17
  117. package/styles/retro-glass.css +639 -50
  118. package/styles/retrofuturism.css +948 -60
  119. package/styles/tactile.css +1813 -111
  120. package/styles/technical-blueprint.css +673 -22
  121. package/styles/theme-colors.css +412 -2
  122. package/styles/y2k.css +954 -46
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);