@kolkrabbi/kol-theme 0.1.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 (14) hide show
  1. package/README.md +26 -0
  2. package/kol-base-tokens.css +74 -0
  3. package/kol-color.css +280 -0
  4. package/kol-components-atoms.css +709 -0
  5. package/kol-components-molecules.css +255 -0
  6. package/kol-components-organisms.css +220 -0
  7. package/kol-opacity.css +369 -0
  8. package/kol-opaque.css +203 -0
  9. package/kol-theme.css +110 -0
  10. package/kol-type-mono-classes.css +115 -0
  11. package/kol-typography-mono.css +64 -0
  12. package/kol-typography.css +1090 -0
  13. package/kol-utilities.css +92 -0
  14. package/package.json +34 -0
package/kol-opacity.css ADDED
@@ -0,0 +1,369 @@
1
+ /**
2
+ * kol-opacity.css — Foreground opacity system (KOL tier)
3
+ *
4
+ * Single source of truth for the fg opacity scale. Consolidates what used to be
5
+ * scattered across kol-color-simple.css and framework/app.css.
6
+ *
7
+ * Scale: 01, 02, 04, 08, 12, 16, 24, 32, 40, 48, 64, 80, 88, 96 (14 stops)
8
+ *
9
+ * Tier pairs:
10
+ * - Standard (foreground on primary surface — var(--kol-surface-on-primary))
11
+ * - Inverse (foreground on inverse surface — var(--kol-surface-on-inverse))
12
+ *
13
+ * Layers:
14
+ * - Tokens (--kol-fg-*, --kol-fg-inverse-*) for use in CSS rules
15
+ * (pseudo-elements, animations, gradients, descendant selectors)
16
+ * - Classes (.bg-fg-*, .text-fg-*, .border-fg-* + inverse + hover) for JSX
17
+ *
18
+ * Every color-mix expression uses `var(<token>, currentColor)` — fallback is
19
+ * load-bearing for SVG theming where the element's `color:` is the active paint.
20
+ *
21
+ * Semantic text role classes (.text-emphasis/lede/body/meta/subtle) live here
22
+ * too — they map directly to the fg-* primitives below, no intermediate alias
23
+ * tokens. Single source of truth per opacity stop.
24
+ */
25
+
26
+ :root {
27
+ /* ============================================================================
28
+ * TOKENS — Standard tier (foreground on primary surface)
29
+ * ============================================================================ */
30
+
31
+ --kol-fg-01: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent);
32
+ --kol-fg-02: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent);
33
+ --kol-fg-04: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent);
34
+ --kol-fg-08: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent);
35
+ --kol-fg-12: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent);
36
+ --kol-fg-16: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent);
37
+ --kol-fg-24: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent);
38
+ --kol-fg-32: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent);
39
+ --kol-fg-40: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent);
40
+ --kol-fg-48: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent);
41
+ --kol-fg-64: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent);
42
+ --kol-fg-80: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent);
43
+ --kol-fg-88: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent);
44
+ --kol-fg-96: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent);
45
+
46
+ /* ============================================================================
47
+ * TOKENS — Absolute tier (theme-independent black, fixed opacity stops)
48
+ * ============================================================================ */
49
+
50
+ --kol-fg-absolute-01: color-mix(in srgb, var(--kol-color-absolute-black) 1%, transparent);
51
+ --kol-fg-absolute-02: color-mix(in srgb, var(--kol-color-absolute-black) 2%, transparent);
52
+ --kol-fg-absolute-04: color-mix(in srgb, var(--kol-color-absolute-black) 4%, transparent);
53
+ --kol-fg-absolute-08: color-mix(in srgb, var(--kol-color-absolute-black) 8%, transparent);
54
+ --kol-fg-absolute-12: color-mix(in srgb, var(--kol-color-absolute-black) 12%, transparent);
55
+ --kol-fg-absolute-16: color-mix(in srgb, var(--kol-color-absolute-black) 16%, transparent);
56
+ --kol-fg-absolute-24: color-mix(in srgb, var(--kol-color-absolute-black) 24%, transparent);
57
+ --kol-fg-absolute-32: color-mix(in srgb, var(--kol-color-absolute-black) 32%, transparent);
58
+ --kol-fg-absolute-40: color-mix(in srgb, var(--kol-color-absolute-black) 40%, transparent);
59
+ --kol-fg-absolute-48: color-mix(in srgb, var(--kol-color-absolute-black) 48%, transparent);
60
+ --kol-fg-absolute-64: color-mix(in srgb, var(--kol-color-absolute-black) 64%, transparent);
61
+ --kol-fg-absolute-80: color-mix(in srgb, var(--kol-color-absolute-black) 80%, transparent);
62
+ --kol-fg-absolute-88: color-mix(in srgb, var(--kol-color-absolute-black) 88%, transparent);
63
+ --kol-fg-absolute-96: color-mix(in srgb, var(--kol-color-absolute-black) 96%, transparent);
64
+
65
+ /* ============================================================================
66
+ * TOKENS — Inverse tier (foreground on inverse surface)
67
+ * ============================================================================ */
68
+
69
+ --kol-fg-inverse-01: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent);
70
+ --kol-fg-inverse-02: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent);
71
+ --kol-fg-inverse-04: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent);
72
+ --kol-fg-inverse-08: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent);
73
+ --kol-fg-inverse-12: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent);
74
+ --kol-fg-inverse-16: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent);
75
+ --kol-fg-inverse-24: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent);
76
+ --kol-fg-inverse-32: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent);
77
+ --kol-fg-inverse-40: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent);
78
+ --kol-fg-inverse-48: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent);
79
+ --kol-fg-inverse-64: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent);
80
+ --kol-fg-inverse-80: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent);
81
+ --kol-fg-inverse-88: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent);
82
+ --kol-fg-inverse-96: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent);
83
+
84
+ /* Semantic text roles map directly to fg-* primitives via the .text-* role
85
+ * classes below — no intermediate alias tokens. */
86
+ }
87
+
88
+ /* ==============================================================================
89
+ * CLASSES — Base (no stop, 100% opacity)
90
+ * ============================================================================== */
91
+
92
+ .bg-fg { background-color: var(--kol-surface-on-primary, currentColor); }
93
+ .bg-fg-inverse { background-color: var(--kol-surface-on-inverse, currentColor); }
94
+
95
+ .text-fg { color: var(--kol-surface-on-primary, currentColor); }
96
+ .text-fg-inverse { color: var(--kol-surface-on-inverse, currentColor); }
97
+
98
+ .border-fg { border-color: var(--kol-surface-on-primary, currentColor); }
99
+ .border-fg-inverse { border-color: var(--kol-surface-on-inverse, currentColor); }
100
+
101
+ /* ==============================================================================
102
+ * CLASSES — Background opacity (standard tier)
103
+ * ============================================================================== */
104
+
105
+ .bg-fg-01 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); }
106
+ .bg-fg-02 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); }
107
+ .bg-fg-04 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); }
108
+ .bg-fg-08 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); }
109
+ .bg-fg-12 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); }
110
+ .bg-fg-16 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); }
111
+ .bg-fg-24 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); }
112
+ .bg-fg-32 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); }
113
+ .bg-fg-40 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); }
114
+ .bg-fg-48 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); }
115
+ .bg-fg-64 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); }
116
+ .bg-fg-80 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); }
117
+ .bg-fg-88 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); }
118
+ .bg-fg-96 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); }
119
+
120
+ /* ==============================================================================
121
+ * CLASSES — Background opacity (inverse tier)
122
+ * ============================================================================== */
123
+
124
+ .bg-fg-inverse-01 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); }
125
+ .bg-fg-inverse-02 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); }
126
+ .bg-fg-inverse-04 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); }
127
+ .bg-fg-inverse-08 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); }
128
+ .bg-fg-inverse-12 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); }
129
+ .bg-fg-inverse-16 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); }
130
+ .bg-fg-inverse-24 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); }
131
+ .bg-fg-inverse-32 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); }
132
+ .bg-fg-inverse-40 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); }
133
+ .bg-fg-inverse-48 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); }
134
+ .bg-fg-inverse-64 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); }
135
+ .bg-fg-inverse-80 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); }
136
+ .bg-fg-inverse-88 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); }
137
+ .bg-fg-inverse-96 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); }
138
+
139
+ /* ==============================================================================
140
+ * CLASSES — Background opacity (absolute tier — fixed black, theme-independent)
141
+ * ============================================================================== */
142
+
143
+ .bg-fg-absolute-01 { background-color: var(--kol-fg-absolute-01); }
144
+ .bg-fg-absolute-02 { background-color: var(--kol-fg-absolute-02); }
145
+ .bg-fg-absolute-04 { background-color: var(--kol-fg-absolute-04); }
146
+ .bg-fg-absolute-08 { background-color: var(--kol-fg-absolute-08); }
147
+ .bg-fg-absolute-12 { background-color: var(--kol-fg-absolute-12); }
148
+ .bg-fg-absolute-16 { background-color: var(--kol-fg-absolute-16); }
149
+ .bg-fg-absolute-24 { background-color: var(--kol-fg-absolute-24); }
150
+ .bg-fg-absolute-32 { background-color: var(--kol-fg-absolute-32); }
151
+ .bg-fg-absolute-40 { background-color: var(--kol-fg-absolute-40); }
152
+ .bg-fg-absolute-48 { background-color: var(--kol-fg-absolute-48); }
153
+ .bg-fg-absolute-64 { background-color: var(--kol-fg-absolute-64); }
154
+ .bg-fg-absolute-80 { background-color: var(--kol-fg-absolute-80); }
155
+ .bg-fg-absolute-88 { background-color: var(--kol-fg-absolute-88); }
156
+ .bg-fg-absolute-96 { background-color: var(--kol-fg-absolute-96); }
157
+
158
+ /* ==============================================================================
159
+ * CLASSES — Background hover (standard + inverse)
160
+ * ============================================================================== */
161
+
162
+ .hover\:bg-fg-01:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); }
163
+ .hover\:bg-fg-02:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); }
164
+ .hover\:bg-fg-04:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); }
165
+ .hover\:bg-fg-08:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); }
166
+ .hover\:bg-fg-12:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); }
167
+ .hover\:bg-fg-16:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); }
168
+ .hover\:bg-fg-24:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); }
169
+ .hover\:bg-fg-32:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); }
170
+ .hover\:bg-fg-40:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); }
171
+ .hover\:bg-fg-48:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); }
172
+ .hover\:bg-fg-64:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); }
173
+ .hover\:bg-fg-80:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); }
174
+ .hover\:bg-fg-88:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); }
175
+ .hover\:bg-fg-96:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); }
176
+
177
+ .hover\:bg-fg-inverse-01:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); }
178
+ .hover\:bg-fg-inverse-02:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); }
179
+ .hover\:bg-fg-inverse-04:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); }
180
+ .hover\:bg-fg-inverse-08:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); }
181
+ .hover\:bg-fg-inverse-12:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); }
182
+ .hover\:bg-fg-inverse-16:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); }
183
+ .hover\:bg-fg-inverse-24:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); }
184
+ .hover\:bg-fg-inverse-32:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); }
185
+ .hover\:bg-fg-inverse-40:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); }
186
+ .hover\:bg-fg-inverse-48:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); }
187
+ .hover\:bg-fg-inverse-64:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); }
188
+ .hover\:bg-fg-inverse-80:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); }
189
+ .hover\:bg-fg-inverse-88:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); }
190
+ .hover\:bg-fg-inverse-96:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); }
191
+
192
+ /* ==============================================================================
193
+ * CLASSES — Text opacity (standard + inverse)
194
+ * ============================================================================== */
195
+
196
+ .text-fg-01 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); }
197
+ .text-fg-02 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); }
198
+ .text-fg-04 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); }
199
+ .text-fg-08 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); }
200
+ .text-fg-12 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); }
201
+ .text-fg-16 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); }
202
+ .text-fg-24 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); }
203
+ .text-fg-32 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); }
204
+ .text-fg-40 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); }
205
+ .text-fg-48 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); }
206
+ .text-fg-64 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); }
207
+ .text-fg-80 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); }
208
+ .text-fg-88 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); }
209
+ .text-fg-96 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); }
210
+
211
+ .text-fg-inverse-01 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); }
212
+ .text-fg-inverse-02 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); }
213
+ .text-fg-inverse-04 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); }
214
+ .text-fg-inverse-08 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); }
215
+ .text-fg-inverse-12 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); }
216
+ .text-fg-inverse-16 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); }
217
+ .text-fg-inverse-24 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); }
218
+ .text-fg-inverse-32 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); }
219
+ .text-fg-inverse-40 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); }
220
+ .text-fg-inverse-48 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); }
221
+ .text-fg-inverse-64 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); }
222
+ .text-fg-inverse-80 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); }
223
+ .text-fg-inverse-88 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); }
224
+ .text-fg-inverse-96 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); }
225
+
226
+ /* ==============================================================================
227
+ * CLASSES — Text hover (standard + inverse)
228
+ * ============================================================================== */
229
+
230
+ .hover\:text-fg-01:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); }
231
+ .hover\:text-fg-02:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); }
232
+ .hover\:text-fg-04:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); }
233
+ .hover\:text-fg-08:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); }
234
+ .hover\:text-fg-12:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); }
235
+ .hover\:text-fg-16:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); }
236
+ .hover\:text-fg-24:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); }
237
+ .hover\:text-fg-32:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); }
238
+ .hover\:text-fg-40:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); }
239
+ .hover\:text-fg-48:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); }
240
+ .hover\:text-fg-64:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); }
241
+ .hover\:text-fg-80:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); }
242
+ .hover\:text-fg-88:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); }
243
+ .hover\:text-fg-96:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); }
244
+
245
+ .hover\:text-fg-inverse-01:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); }
246
+ .hover\:text-fg-inverse-02:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); }
247
+ .hover\:text-fg-inverse-04:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); }
248
+ .hover\:text-fg-inverse-08:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); }
249
+ .hover\:text-fg-inverse-12:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); }
250
+ .hover\:text-fg-inverse-16:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); }
251
+ .hover\:text-fg-inverse-24:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); }
252
+ .hover\:text-fg-inverse-32:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); }
253
+ .hover\:text-fg-inverse-40:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); }
254
+ .hover\:text-fg-inverse-48:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); }
255
+ .hover\:text-fg-inverse-64:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); }
256
+ .hover\:text-fg-inverse-80:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); }
257
+ .hover\:text-fg-inverse-88:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); }
258
+ .hover\:text-fg-inverse-96:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); }
259
+
260
+ /* ==============================================================================
261
+ * CLASSES — Border opacity (standard + inverse)
262
+ * ============================================================================== */
263
+
264
+ .border-fg-01 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); }
265
+ .border-fg-02 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); }
266
+ .border-fg-04 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); }
267
+ .border-fg-08 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); }
268
+ .border-fg-12 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); }
269
+ .border-fg-16 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); }
270
+ .border-fg-24 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); }
271
+ .border-fg-32 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); }
272
+ .border-fg-40 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); }
273
+ .border-fg-48 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); }
274
+ .border-fg-64 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); }
275
+ .border-fg-80 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); }
276
+ .border-fg-88 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); }
277
+ .border-fg-96 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); }
278
+
279
+ .border-fg-inverse-01 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); }
280
+ .border-fg-inverse-02 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); }
281
+ .border-fg-inverse-04 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); }
282
+ .border-fg-inverse-08 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); }
283
+ .border-fg-inverse-12 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); }
284
+ .border-fg-inverse-16 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); }
285
+ .border-fg-inverse-24 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); }
286
+ .border-fg-inverse-32 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); }
287
+ .border-fg-inverse-40 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); }
288
+ .border-fg-inverse-48 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); }
289
+ .border-fg-inverse-64 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); }
290
+ .border-fg-inverse-80 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); }
291
+ .border-fg-inverse-88 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); }
292
+ .border-fg-inverse-96 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); }
293
+
294
+ /* ==============================================================================
295
+ * CLASSES — Border hover (standard + inverse)
296
+ * ============================================================================== */
297
+
298
+ .hover\:border-fg-01:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); }
299
+ .hover\:border-fg-02:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); }
300
+ .hover\:border-fg-04:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); }
301
+ .hover\:border-fg-08:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); }
302
+ .hover\:border-fg-12:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); }
303
+ .hover\:border-fg-16:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); }
304
+ .hover\:border-fg-24:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); }
305
+ .hover\:border-fg-32:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); }
306
+ .hover\:border-fg-40:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); }
307
+ .hover\:border-fg-48:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); }
308
+ .hover\:border-fg-64:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); }
309
+ .hover\:border-fg-80:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); }
310
+ .hover\:border-fg-88:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); }
311
+ .hover\:border-fg-96:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); }
312
+
313
+ .hover\:border-fg-inverse-01:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); }
314
+ .hover\:border-fg-inverse-02:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); }
315
+ .hover\:border-fg-inverse-04:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); }
316
+ .hover\:border-fg-inverse-08:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); }
317
+ .hover\:border-fg-inverse-12:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); }
318
+ .hover\:border-fg-inverse-16:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); }
319
+ .hover\:border-fg-inverse-24:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); }
320
+ .hover\:border-fg-inverse-32:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); }
321
+ .hover\:border-fg-inverse-40:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); }
322
+ .hover\:border-fg-inverse-48:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); }
323
+ .hover\:border-fg-inverse-64:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); }
324
+ .hover\:border-fg-inverse-80:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); }
325
+ .hover\:border-fg-inverse-88:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); }
326
+ .hover\:border-fg-inverse-96:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); }
327
+
328
+ /* ==============================================================================
329
+ * SEMANTIC OPACITY DESCRIPTORS
330
+ *
331
+ * Six-stop hierarchy: subtle / mute / meta / body / strong / emphasis. Each
332
+ * stop is a token (--kol-fg-*) and a class family (text-*, bg-*, border-*,
333
+ * ring-*) so the same descriptor names work across every property.
334
+ *
335
+ * Stops:
336
+ * subtle 24% — dividers, disabled hints, faintest visible
337
+ * mute 32% — dim labels, quiet UI hints
338
+ * meta 48% — labels, eyebrows, captions (current text-meta workhorse)
339
+ * body 64% — running copy, links (current text-body default)
340
+ * strong 80% — emphasized body, <strong> (renamed from text-lede)
341
+ * emphasis 100% — headings, max ink (current text-emphasis)
342
+ *
343
+ * Tokens chain through the existing fg-opacity ramp — single source of truth
344
+ * (the 14-stop --kol-fg-{01..96} family) is preserved; descriptors are aliases.
345
+ * ============================================================================== */
346
+
347
+ :root {
348
+ --kol-fg-subtle: var(--kol-fg-24);
349
+ --kol-fg-meta: var(--kol-fg-48);
350
+ --kol-fg-body: var(--kol-fg-64);
351
+ --kol-fg-strong: var(--kol-fg-80);
352
+ --kol-fg-emphasis: var(--kol-surface-on-primary);
353
+ }
354
+
355
+ /* ─── Text descriptors (5 stops — `mute` retired 2026-04-30, 0 consumers).
356
+ * bg-* / border-* / ring-* descriptor families dropped same date —
357
+ * consumers reach for numeric --kol-fg-NN stops instead. ─── */
358
+
359
+ .text-subtle { color: var(--kol-fg-subtle); }
360
+ .text-meta { color: var(--kol-fg-meta); }
361
+ .text-body { color: var(--kol-fg-body); }
362
+ .text-strong { color: var(--kol-fg-strong); }
363
+ .text-emphasis { color: var(--kol-fg-emphasis); }
364
+
365
+ .hover\:text-subtle:hover { color: var(--kol-fg-subtle); }
366
+ .hover\:text-meta:hover { color: var(--kol-fg-meta); }
367
+ .hover\:text-body:hover { color: var(--kol-fg-body); }
368
+ .hover\:text-strong:hover { color: var(--kol-fg-strong); }
369
+ .hover\:text-emphasis:hover { color: var(--kol-fg-emphasis); }
package/kol-opaque.css ADDED
@@ -0,0 +1,203 @@
1
+ /**
2
+ * kol-opaque.css — Opaque neutral scale (KOL tier)
3
+ *
4
+ * The SOLID mirror of kol-opacity.css. Same 14 stops, same source ink — the
5
+ * only difference is what the ink is mixed INTO:
6
+ *
7
+ * fg → color-mix(ink X%, transparent) — alpha foreground; bg bleeds through
8
+ * oq → color-mix(ink X%, surface) — opaque neutral; flattened onto surface
9
+ *
10
+ * Use `oq` when you need an OPAQUE grey (cover layer, chip over a photo, any
11
+ * fill that must hide what's behind it). Use `fg` when you want the foreground
12
+ * tinting a transparent layer. They are different primitives — `oq` is not a
13
+ * transparency, it is a baked grey.
14
+ *
15
+ * Auto-themes for free: --kol-surface-on-primary and --kol-surface-primary both
16
+ * flip in dark mode, so color-mix recomputes. No hardcoded light/dark blocks.
17
+ *
18
+ * Scale: 01, 02, 04, 08, 12, 16, 24, 32, 40, 48, 64, 80, 88, 96 (14 stops)
19
+ *
20
+ * Tier pairs:
21
+ * - Standard (ink-on-primary flattened onto --kol-surface-primary)
22
+ * - Inverse (ink-on-inverse flattened onto --kol-surface-inverse)
23
+ *
24
+ * Layers:
25
+ * - Tokens (--kol-oq-*, --kol-oq-inverse-*) for use in CSS rules
26
+ * - Classes (.bg-oq-*, .text-oq-*, .border-oq-* + inverse + hover) for JSX
27
+ */
28
+
29
+ :root {
30
+ /* ============================================================================
31
+ * TOKENS — Standard tier (ink-on-primary, flattened onto primary surface)
32
+ * ============================================================================ */
33
+
34
+ --kol-oq-01: color-mix(in srgb, var(--kol-surface-on-primary) 1%, var(--kol-surface-primary));
35
+ --kol-oq-02: color-mix(in srgb, var(--kol-surface-on-primary) 2%, var(--kol-surface-primary));
36
+ --kol-oq-04: color-mix(in srgb, var(--kol-surface-on-primary) 4%, var(--kol-surface-primary));
37
+ --kol-oq-08: color-mix(in srgb, var(--kol-surface-on-primary) 8%, var(--kol-surface-primary));
38
+ --kol-oq-12: color-mix(in srgb, var(--kol-surface-on-primary) 12%, var(--kol-surface-primary));
39
+ --kol-oq-16: color-mix(in srgb, var(--kol-surface-on-primary) 16%, var(--kol-surface-primary));
40
+ --kol-oq-24: color-mix(in srgb, var(--kol-surface-on-primary) 24%, var(--kol-surface-primary));
41
+ --kol-oq-32: color-mix(in srgb, var(--kol-surface-on-primary) 32%, var(--kol-surface-primary));
42
+ --kol-oq-40: color-mix(in srgb, var(--kol-surface-on-primary) 40%, var(--kol-surface-primary));
43
+ --kol-oq-48: color-mix(in srgb, var(--kol-surface-on-primary) 48%, var(--kol-surface-primary));
44
+ --kol-oq-64: color-mix(in srgb, var(--kol-surface-on-primary) 64%, var(--kol-surface-primary));
45
+ --kol-oq-80: color-mix(in srgb, var(--kol-surface-on-primary) 80%, var(--kol-surface-primary));
46
+ --kol-oq-88: color-mix(in srgb, var(--kol-surface-on-primary) 88%, var(--kol-surface-primary));
47
+ --kol-oq-96: color-mix(in srgb, var(--kol-surface-on-primary) 96%, var(--kol-surface-primary));
48
+
49
+ /* ============================================================================
50
+ * TOKENS — Inverse tier (ink-on-inverse, flattened onto inverse surface)
51
+ * ============================================================================ */
52
+
53
+ --kol-oq-inverse-01: color-mix(in srgb, var(--kol-surface-on-inverse) 1%, var(--kol-surface-inverse));
54
+ --kol-oq-inverse-02: color-mix(in srgb, var(--kol-surface-on-inverse) 2%, var(--kol-surface-inverse));
55
+ --kol-oq-inverse-04: color-mix(in srgb, var(--kol-surface-on-inverse) 4%, var(--kol-surface-inverse));
56
+ --kol-oq-inverse-08: color-mix(in srgb, var(--kol-surface-on-inverse) 8%, var(--kol-surface-inverse));
57
+ --kol-oq-inverse-12: color-mix(in srgb, var(--kol-surface-on-inverse) 12%, var(--kol-surface-inverse));
58
+ --kol-oq-inverse-16: color-mix(in srgb, var(--kol-surface-on-inverse) 16%, var(--kol-surface-inverse));
59
+ --kol-oq-inverse-24: color-mix(in srgb, var(--kol-surface-on-inverse) 24%, var(--kol-surface-inverse));
60
+ --kol-oq-inverse-32: color-mix(in srgb, var(--kol-surface-on-inverse) 32%, var(--kol-surface-inverse));
61
+ --kol-oq-inverse-40: color-mix(in srgb, var(--kol-surface-on-inverse) 40%, var(--kol-surface-inverse));
62
+ --kol-oq-inverse-48: color-mix(in srgb, var(--kol-surface-on-inverse) 48%, var(--kol-surface-inverse));
63
+ --kol-oq-inverse-64: color-mix(in srgb, var(--kol-surface-on-inverse) 64%, var(--kol-surface-inverse));
64
+ --kol-oq-inverse-80: color-mix(in srgb, var(--kol-surface-on-inverse) 80%, var(--kol-surface-inverse));
65
+ --kol-oq-inverse-88: color-mix(in srgb, var(--kol-surface-on-inverse) 88%, var(--kol-surface-inverse));
66
+ --kol-oq-inverse-96: color-mix(in srgb, var(--kol-surface-on-inverse) 96%, var(--kol-surface-inverse));
67
+ }
68
+
69
+ /* ==============================================================================
70
+ * CLASSES — Background opacity (standard + inverse)
71
+ * ============================================================================== */
72
+
73
+ .bg-oq-01 { background-color: var(--kol-oq-01); }
74
+ .bg-oq-02 { background-color: var(--kol-oq-02); }
75
+ .bg-oq-04 { background-color: var(--kol-oq-04); }
76
+ .bg-oq-08 { background-color: var(--kol-oq-08); }
77
+ .bg-oq-12 { background-color: var(--kol-oq-12); }
78
+ .bg-oq-16 { background-color: var(--kol-oq-16); }
79
+ .bg-oq-24 { background-color: var(--kol-oq-24); }
80
+ .bg-oq-32 { background-color: var(--kol-oq-32); }
81
+ .bg-oq-40 { background-color: var(--kol-oq-40); }
82
+ .bg-oq-48 { background-color: var(--kol-oq-48); }
83
+ .bg-oq-64 { background-color: var(--kol-oq-64); }
84
+ .bg-oq-80 { background-color: var(--kol-oq-80); }
85
+ .bg-oq-88 { background-color: var(--kol-oq-88); }
86
+ .bg-oq-96 { background-color: var(--kol-oq-96); }
87
+
88
+ .bg-oq-inverse-01 { background-color: var(--kol-oq-inverse-01); }
89
+ .bg-oq-inverse-02 { background-color: var(--kol-oq-inverse-02); }
90
+ .bg-oq-inverse-04 { background-color: var(--kol-oq-inverse-04); }
91
+ .bg-oq-inverse-08 { background-color: var(--kol-oq-inverse-08); }
92
+ .bg-oq-inverse-12 { background-color: var(--kol-oq-inverse-12); }
93
+ .bg-oq-inverse-16 { background-color: var(--kol-oq-inverse-16); }
94
+ .bg-oq-inverse-24 { background-color: var(--kol-oq-inverse-24); }
95
+ .bg-oq-inverse-32 { background-color: var(--kol-oq-inverse-32); }
96
+ .bg-oq-inverse-40 { background-color: var(--kol-oq-inverse-40); }
97
+ .bg-oq-inverse-48 { background-color: var(--kol-oq-inverse-48); }
98
+ .bg-oq-inverse-64 { background-color: var(--kol-oq-inverse-64); }
99
+ .bg-oq-inverse-80 { background-color: var(--kol-oq-inverse-80); }
100
+ .bg-oq-inverse-88 { background-color: var(--kol-oq-inverse-88); }
101
+ .bg-oq-inverse-96 { background-color: var(--kol-oq-inverse-96); }
102
+
103
+ /* ==============================================================================
104
+ * CLASSES — Background hover (standard + inverse)
105
+ * ============================================================================== */
106
+
107
+ .hover\:bg-oq-01:hover { background-color: var(--kol-oq-01); }
108
+ .hover\:bg-oq-02:hover { background-color: var(--kol-oq-02); }
109
+ .hover\:bg-oq-04:hover { background-color: var(--kol-oq-04); }
110
+ .hover\:bg-oq-08:hover { background-color: var(--kol-oq-08); }
111
+ .hover\:bg-oq-12:hover { background-color: var(--kol-oq-12); }
112
+ .hover\:bg-oq-16:hover { background-color: var(--kol-oq-16); }
113
+ .hover\:bg-oq-24:hover { background-color: var(--kol-oq-24); }
114
+ .hover\:bg-oq-32:hover { background-color: var(--kol-oq-32); }
115
+ .hover\:bg-oq-40:hover { background-color: var(--kol-oq-40); }
116
+ .hover\:bg-oq-48:hover { background-color: var(--kol-oq-48); }
117
+ .hover\:bg-oq-64:hover { background-color: var(--kol-oq-64); }
118
+ .hover\:bg-oq-80:hover { background-color: var(--kol-oq-80); }
119
+ .hover\:bg-oq-88:hover { background-color: var(--kol-oq-88); }
120
+ .hover\:bg-oq-96:hover { background-color: var(--kol-oq-96); }
121
+
122
+ .hover\:bg-oq-inverse-01:hover { background-color: var(--kol-oq-inverse-01); }
123
+ .hover\:bg-oq-inverse-02:hover { background-color: var(--kol-oq-inverse-02); }
124
+ .hover\:bg-oq-inverse-04:hover { background-color: var(--kol-oq-inverse-04); }
125
+ .hover\:bg-oq-inverse-08:hover { background-color: var(--kol-oq-inverse-08); }
126
+ .hover\:bg-oq-inverse-12:hover { background-color: var(--kol-oq-inverse-12); }
127
+ .hover\:bg-oq-inverse-16:hover { background-color: var(--kol-oq-inverse-16); }
128
+ .hover\:bg-oq-inverse-24:hover { background-color: var(--kol-oq-inverse-24); }
129
+ .hover\:bg-oq-inverse-32:hover { background-color: var(--kol-oq-inverse-32); }
130
+ .hover\:bg-oq-inverse-40:hover { background-color: var(--kol-oq-inverse-40); }
131
+ .hover\:bg-oq-inverse-48:hover { background-color: var(--kol-oq-inverse-48); }
132
+ .hover\:bg-oq-inverse-64:hover { background-color: var(--kol-oq-inverse-64); }
133
+ .hover\:bg-oq-inverse-80:hover { background-color: var(--kol-oq-inverse-80); }
134
+ .hover\:bg-oq-inverse-88:hover { background-color: var(--kol-oq-inverse-88); }
135
+ .hover\:bg-oq-inverse-96:hover { background-color: var(--kol-oq-inverse-96); }
136
+
137
+ /* ==============================================================================
138
+ * CLASSES — Text opacity (standard + inverse)
139
+ * ============================================================================== */
140
+
141
+ .text-oq-01 { color: var(--kol-oq-01); }
142
+ .text-oq-02 { color: var(--kol-oq-02); }
143
+ .text-oq-04 { color: var(--kol-oq-04); }
144
+ .text-oq-08 { color: var(--kol-oq-08); }
145
+ .text-oq-12 { color: var(--kol-oq-12); }
146
+ .text-oq-16 { color: var(--kol-oq-16); }
147
+ .text-oq-24 { color: var(--kol-oq-24); }
148
+ .text-oq-32 { color: var(--kol-oq-32); }
149
+ .text-oq-40 { color: var(--kol-oq-40); }
150
+ .text-oq-48 { color: var(--kol-oq-48); }
151
+ .text-oq-64 { color: var(--kol-oq-64); }
152
+ .text-oq-80 { color: var(--kol-oq-80); }
153
+ .text-oq-88 { color: var(--kol-oq-88); }
154
+ .text-oq-96 { color: var(--kol-oq-96); }
155
+
156
+ .text-oq-inverse-01 { color: var(--kol-oq-inverse-01); }
157
+ .text-oq-inverse-02 { color: var(--kol-oq-inverse-02); }
158
+ .text-oq-inverse-04 { color: var(--kol-oq-inverse-04); }
159
+ .text-oq-inverse-08 { color: var(--kol-oq-inverse-08); }
160
+ .text-oq-inverse-12 { color: var(--kol-oq-inverse-12); }
161
+ .text-oq-inverse-16 { color: var(--kol-oq-inverse-16); }
162
+ .text-oq-inverse-24 { color: var(--kol-oq-inverse-24); }
163
+ .text-oq-inverse-32 { color: var(--kol-oq-inverse-32); }
164
+ .text-oq-inverse-40 { color: var(--kol-oq-inverse-40); }
165
+ .text-oq-inverse-48 { color: var(--kol-oq-inverse-48); }
166
+ .text-oq-inverse-64 { color: var(--kol-oq-inverse-64); }
167
+ .text-oq-inverse-80 { color: var(--kol-oq-inverse-80); }
168
+ .text-oq-inverse-88 { color: var(--kol-oq-inverse-88); }
169
+ .text-oq-inverse-96 { color: var(--kol-oq-inverse-96); }
170
+
171
+ /* ==============================================================================
172
+ * CLASSES — Border opacity (standard + inverse)
173
+ * ============================================================================== */
174
+
175
+ .border-oq-01 { border-color: var(--kol-oq-01); }
176
+ .border-oq-02 { border-color: var(--kol-oq-02); }
177
+ .border-oq-04 { border-color: var(--kol-oq-04); }
178
+ .border-oq-08 { border-color: var(--kol-oq-08); }
179
+ .border-oq-12 { border-color: var(--kol-oq-12); }
180
+ .border-oq-16 { border-color: var(--kol-oq-16); }
181
+ .border-oq-24 { border-color: var(--kol-oq-24); }
182
+ .border-oq-32 { border-color: var(--kol-oq-32); }
183
+ .border-oq-40 { border-color: var(--kol-oq-40); }
184
+ .border-oq-48 { border-color: var(--kol-oq-48); }
185
+ .border-oq-64 { border-color: var(--kol-oq-64); }
186
+ .border-oq-80 { border-color: var(--kol-oq-80); }
187
+ .border-oq-88 { border-color: var(--kol-oq-88); }
188
+ .border-oq-96 { border-color: var(--kol-oq-96); }
189
+
190
+ .border-oq-inverse-01 { border-color: var(--kol-oq-inverse-01); }
191
+ .border-oq-inverse-02 { border-color: var(--kol-oq-inverse-02); }
192
+ .border-oq-inverse-04 { border-color: var(--kol-oq-inverse-04); }
193
+ .border-oq-inverse-08 { border-color: var(--kol-oq-inverse-08); }
194
+ .border-oq-inverse-12 { border-color: var(--kol-oq-inverse-12); }
195
+ .border-oq-inverse-16 { border-color: var(--kol-oq-inverse-16); }
196
+ .border-oq-inverse-24 { border-color: var(--kol-oq-inverse-24); }
197
+ .border-oq-inverse-32 { border-color: var(--kol-oq-inverse-32); }
198
+ .border-oq-inverse-40 { border-color: var(--kol-oq-inverse-40); }
199
+ .border-oq-inverse-48 { border-color: var(--kol-oq-inverse-48); }
200
+ .border-oq-inverse-64 { border-color: var(--kol-oq-inverse-64); }
201
+ .border-oq-inverse-80 { border-color: var(--kol-oq-inverse-80); }
202
+ .border-oq-inverse-88 { border-color: var(--kol-oq-inverse-88); }
203
+ .border-oq-inverse-96 { border-color: var(--kol-oq-inverse-96); }