@kolkrabbi/kol-theme 0.185.0 → 0.187.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.
- package/kol-animation.css +53 -0
- package/kol-components-atoms.css +3 -1
- package/kol-typography.css +144 -0
- package/package.json +1 -1
package/kol-animation.css
CHANGED
|
@@ -183,6 +183,59 @@
|
|
|
183
183
|
.kol-card.has-reveal .kol-card-reveal { transition: none; }
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
+
/* ─────────────────────────────────────────────────────────────────────
|
|
187
|
+
* ContentCard `back` — the second cover (AppCardBackCover, kol-monitor
|
|
188
|
+
* 2026-10-24: a patch card's cover is the patch's OUTPUT now, and the rack
|
|
189
|
+
* it was built on is still worth seeing — "both on one card: the output in
|
|
190
|
+
* front and the rack revealed on hover"). Hover and keyboard focus reveal
|
|
191
|
+
* it; `selected` is never read, so the selected state does not move. The
|
|
192
|
+
* card root names the treatment in `data-back`; the three are on the
|
|
193
|
+
* open-questions page (round 17) for the user's pick:
|
|
194
|
+
*
|
|
195
|
+
* flip-image the media turns — the print flip's turn (0.4s ease-out,
|
|
196
|
+
* preserve-3d, perspective 1000) with a real back face; the
|
|
197
|
+
* plate and the corner controls stay put
|
|
198
|
+
* flip-card the whole card turns; the back fills it, bare
|
|
199
|
+
* hover the back CUTS in over the front — a swap, never an
|
|
200
|
+
* opacity crossfade (user: "not fade")
|
|
201
|
+
*
|
|
202
|
+
* Touch has no hover and gets nothing: the front is the card. Reduced
|
|
203
|
+
* motion drops the turn's transition, so both flips become the cut.
|
|
204
|
+
* ───────────────────────────────────────────────────────────────────── */
|
|
205
|
+
.kol-card[data-back] .kol-card-turn-inner {
|
|
206
|
+
position: relative;
|
|
207
|
+
}
|
|
208
|
+
.kol-card[data-back] .kol-card-face--back {
|
|
209
|
+
position: absolute;
|
|
210
|
+
inset: 0;
|
|
211
|
+
}
|
|
212
|
+
.kol-card[data-back^="flip"] .kol-card-turn,
|
|
213
|
+
.kol-card[data-back="flip-card"] {
|
|
214
|
+
perspective: 1000px;
|
|
215
|
+
}
|
|
216
|
+
.kol-card[data-back^="flip"] .kol-card-turn-inner {
|
|
217
|
+
transform-style: preserve-3d;
|
|
218
|
+
transition: transform 0.4s ease-out;
|
|
219
|
+
}
|
|
220
|
+
.kol-card[data-back^="flip"] .kol-card-face {
|
|
221
|
+
backface-visibility: hidden;
|
|
222
|
+
}
|
|
223
|
+
.kol-card[data-back^="flip"] .kol-card-face--back {
|
|
224
|
+
transform: rotateY(180deg);
|
|
225
|
+
}
|
|
226
|
+
.kol-card[data-back="hover"] .kol-card-face--back {
|
|
227
|
+
opacity: 0;
|
|
228
|
+
}
|
|
229
|
+
@media (hover: hover) {
|
|
230
|
+
.kol-card[data-back^="flip"]:hover .kol-card-turn-inner { transform: rotateY(180deg); }
|
|
231
|
+
.kol-card[data-back="hover"]:hover .kol-card-face--back { opacity: 1; }
|
|
232
|
+
}
|
|
233
|
+
.kol-card[data-back^="flip"]:focus-visible .kol-card-turn-inner { transform: rotateY(180deg); }
|
|
234
|
+
.kol-card[data-back="hover"]:focus-visible .kol-card-face--back { opacity: 1; }
|
|
235
|
+
@media (prefers-reduced-motion: reduce) {
|
|
236
|
+
.kol-card[data-back^="flip"] .kol-card-turn-inner { transition: none; }
|
|
237
|
+
}
|
|
238
|
+
|
|
186
239
|
/* ─────────────────────────────────────────────────────────────────────
|
|
187
240
|
* ContentMedia — the hover zoom
|
|
188
241
|
*
|
package/kol-components-atoms.css
CHANGED
|
@@ -801,7 +801,9 @@
|
|
|
801
801
|
color: var(--kol-fg-80);
|
|
802
802
|
text-transform: uppercase;
|
|
803
803
|
letter-spacing: 0.06em;
|
|
804
|
-
|
|
804
|
+
/* padding and gap ride the same list (2026-10-24, the rail's clip model, kol-framework.css): this rule outranks
|
|
805
|
+
* the framework's box rule, and a `transition` shorthand here would otherwise drop the collapse's easing */
|
|
806
|
+
transition: color 150ms ease, background 150ms ease, padding 180ms ease, gap 180ms ease;
|
|
805
807
|
}
|
|
806
808
|
|
|
807
809
|
.kol-sidenav-hop:hover {
|
package/kol-typography.css
CHANGED
|
@@ -1110,6 +1110,150 @@
|
|
|
1110
1110
|
|
|
1111
1111
|
.kol-prose blockquote cite::before { content: '— '; opacity: 0.6; }
|
|
1112
1112
|
|
|
1113
|
+
|
|
1114
|
+
/* =============================================================================
|
|
1115
|
+
* SHEET (the document voice) — kol-atlas's Research-Spec, class for class
|
|
1116
|
+
* (site-hub W4, user 2026-10-24: "I would like to use kol-atlas styles at least in part").
|
|
1117
|
+
* One rule per thing, the same on every page: h1–h4 with hairlines and the quiet `why` aside,
|
|
1118
|
+
* `when` / `dw` meta lines with their `k` key, `note`, `tb` item text, footnotes (`sup.fn`,
|
|
1119
|
+
* `ol.fns`), `term` and `term.missing`, the `media` figure grid, `tablewrap` plain and `kv`,
|
|
1120
|
+
* `totalbar`, the `ol` outline (details/summary, `mk`, `cnt`, `meta`) and `proj` — the numbered
|
|
1121
|
+
* margin with its gutter. The spec's own values; its four tokens map onto KOL's and nothing is
|
|
1122
|
+
* invented: ink → surface-on-primary · muted → fg-64 · line → fg-12 · soft → fg-04 · accent →
|
|
1123
|
+
* accent-primary · note → ui-error · display and body → the sans · mono → the mono. The sub-class
|
|
1124
|
+
* names stay the spec's (`.proj`, `.ol`, `.ms` …), scoped under .kol-sheet, so a document written
|
|
1125
|
+
* for kol-atlas renders here unchanged. Beside .kol-prose, not instead: prose is the article voice
|
|
1126
|
+
* (16/24, weight 300); the sheet is the research document (15/1.6, the outline, the numbers).
|
|
1127
|
+
* Source: kol-branding src/canvas/source/Research-Spec.dc.html (kol-atlas workspace.css).
|
|
1128
|
+
* ============================================================================= */
|
|
1129
|
+
.kol-sheet {
|
|
1130
|
+
--bg: var(--kol-surface-primary); --surface: var(--kol-surface-primary); --ink: var(--kol-surface-on-primary);
|
|
1131
|
+
--muted: var(--kol-fg-64); --line: var(--kol-fg-12); --soft: var(--kol-fg-04);
|
|
1132
|
+
--accent: var(--kol-accent-primary); --note: var(--ui-error);
|
|
1133
|
+
--edge: 724px;
|
|
1134
|
+
--display: var(--kol-font-family-sans); --body: var(--kol-font-family-sans); --mono: var(--kol-font-family-mono);
|
|
1135
|
+
}
|
|
1136
|
+
.kol-sheet{padding:16px 0 28px;min-width:0;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6}
|
|
1137
|
+
.kol-sheet h1,.kol-sheet h2,.kol-sheet h3,.kol-sheet h4{font-family:var(--display);line-height:1.2;text-wrap:balance;letter-spacing:-.005em;font-weight:700}
|
|
1138
|
+
.kol-sheet h1{font-size:36px;margin:0 0 12px}
|
|
1139
|
+
.kol-sheet h2{font-size:24px;margin:44px 0 16px;padding-top:24px;border-top:1px solid var(--line)}
|
|
1140
|
+
.kol-sheet h2:first-child,.kol-sheet h1+h2{border-top:0;padding-top:0;margin-top:20px}
|
|
1141
|
+
.kol-sheet h3{font-size:18px;margin:28px 0 4px;padding-top:18px;border-top:1px solid var(--line)}
|
|
1142
|
+
.kol-sheet h2+h3{border-top:0;padding-top:0;margin-top:16px}
|
|
1143
|
+
.kol-sheet .mk{font-size:15px;margin-left:8px}
|
|
1144
|
+
.kol-sheet h3 .why,.kol-sheet h2 .why{font-size:13px}
|
|
1145
|
+
.kol-sheet p{margin:8px 0;max-width:var(--edge)}
|
|
1146
|
+
.kol-sheet ul,.kol-sheet ol{margin:6px 0 10px;padding-left:22px;max-width:var(--edge)}
|
|
1147
|
+
.kol-sheet ul{list-style:disc}
|
|
1148
|
+
.kol-sheet ol{list-style:decimal}
|
|
1149
|
+
.kol-sheet li{margin:3px 0}
|
|
1150
|
+
.kol-sheet li::marker{color:var(--accent)}
|
|
1151
|
+
.kol-sheet strong{font-weight:600}
|
|
1152
|
+
.kol-sheet em{font-style:italic}
|
|
1153
|
+
.kol-sheet :not(pre)>code{font-family:var(--mono);font-size:.88em;background:color-mix(in srgb,var(--ink) 8%,transparent);padding:1px 5px;border-radius:4px}
|
|
1154
|
+
.kol-sheet a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:4px}
|
|
1155
|
+
.kol-sheet blockquote{margin:12px 0;padding:8px 14px;border-left:3px solid var(--line);color:var(--muted);max-width:var(--edge)}
|
|
1156
|
+
.kol-sheet hr{border:0;border-top:1px solid var(--line);margin:24px 0}
|
|
1157
|
+
.kol-sheet [id^="a-"]{scroll-margin-top:72px}
|
|
1158
|
+
.kol-sheet .tablewrap{overflow-x:auto;margin:12px 0;border:1px solid var(--line);border-radius:8px}
|
|
1159
|
+
.kol-sheet table{border-collapse:collapse;width:100%;font-size:13.5px}
|
|
1160
|
+
.kol-sheet th,.kol-sheet td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
|
|
1161
|
+
.kol-sheet th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--soft);font-weight:600}
|
|
1162
|
+
.kol-sheet tr:last-child td{border-bottom:0}
|
|
1163
|
+
.kol-sheet td.num,.kol-sheet th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
|
|
1164
|
+
.kol-sheet tr.group td{background:var(--soft);font-weight:600}
|
|
1165
|
+
.kol-sheet tr.total td{font-weight:700;background:var(--bg)}
|
|
1166
|
+
.kol-sheet .tablewrap.kv td:first-child{width:130px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
|
|
1167
|
+
.kol-sheet .totalbar{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:baseline;margin-top:22px;padding:14px 16px;border-radius:8px;background:var(--soft);font-size:13.5px}
|
|
1168
|
+
.kol-sheet .totalbar b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:16px}
|
|
1169
|
+
.kol-sheet .totalbar .over{color:var(--note)}
|
|
1170
|
+
.kol-sheet .term{border-bottom:1px dotted var(--accent);cursor:help;font-weight:500}
|
|
1171
|
+
.kol-sheet .term.missing{border:0;color:var(--note);background:var(--soft);padding:0 4px;border-radius:3px}
|
|
1172
|
+
.kol-sheet .media{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:16px 0}
|
|
1173
|
+
.kol-sheet .media figure{margin:0}
|
|
1174
|
+
.kol-sheet .media img,.kol-sheet .media video{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--soft);border:1px solid var(--line);border-radius:4px}
|
|
1175
|
+
.kol-sheet .media .doc{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--soft);border:1px solid var(--line);border-radius:4px;font-family:var(--mono);font-size:12px;text-decoration:none}
|
|
1176
|
+
.kol-sheet .media figcaption{margin-top:6px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
|
|
1177
|
+
.kol-sheet .why{font-family:var(--body);font-size:12px;font-weight:400;color:var(--muted);margin-left:6px}
|
|
1178
|
+
.kol-sheet p.when,.kol-sheet p.dw{font-size:13px;color:var(--muted);margin:0}
|
|
1179
|
+
.kol-sheet p.when .k,.kol-sheet p.dw .k{color:var(--ink)}
|
|
1180
|
+
.kol-sheet p.when+p:not(.dw){margin-top:12px}
|
|
1181
|
+
.kol-sheet p.dw+p{margin-top:12px}
|
|
1182
|
+
.kol-sheet p.note{font-size:10px;color:color-mix(in srgb,var(--ink) 48%,transparent);max-width:none;margin-top:10px}
|
|
1183
|
+
.kol-sheet p.tb{margin:6px 0 0;font-size:14.5px}
|
|
1184
|
+
.kol-sheet sup.fn{line-height:0;vertical-align:baseline;position:relative;top:-.5em;font-size:.75em}
|
|
1185
|
+
.kol-sheet sup.fn a{text-decoration:none;font-weight:600;color:color-mix(in srgb,var(--ink) 48%,transparent)}
|
|
1186
|
+
.kol-sheet ol.fns{font-size:10px;color:color-mix(in srgb,var(--ink) 48%,transparent);margin:32px 0 0;padding-left:0;list-style:none}
|
|
1187
|
+
.kol-sheet ol.fns li{margin:2px 0}
|
|
1188
|
+
.kol-sheet ol.fns .fnn{margin-right:.4em}
|
|
1189
|
+
.kol-sheet ol.fns .url{color:color-mix(in srgb,var(--ink) 36%,transparent);overflow-wrap:anywhere}
|
|
1190
|
+
.kol-sheet .ol .ms{margin-top:20px}
|
|
1191
|
+
.kol-sheet .ol .ms>summary.mh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-family:var(--display);font-weight:700;font-size:20px;padding:2px 8px;line-height:1.3}
|
|
1192
|
+
.kol-sheet .ol .mh a{color:var(--ink);text-decoration:none}
|
|
1193
|
+
.kol-sheet .ol .mh a:hover,.kol-sheet .ol .pt a:hover,.kol-sheet .ol li a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px}
|
|
1194
|
+
.kol-sheet .ol .mh .meta{margin-left:auto;font-family:var(--mono);font-weight:400;font-size:12px;color:var(--muted)}
|
|
1195
|
+
.kol-sheet .ol details.ph{margin-left:24px}
|
|
1196
|
+
.kol-sheet .ol summary{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:4px 8px;font-size:13.5px;line-height:1.45;cursor:pointer;list-style:none;border-radius:6px}
|
|
1197
|
+
.kol-sheet .ol summary::-webkit-details-marker{display:none}
|
|
1198
|
+
.kol-sheet .ol summary::before{content:"";flex:none;width:6px;height:6px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);align-self:center}
|
|
1199
|
+
.kol-sheet .ol details[open]>summary::before{transform:rotate(45deg)}
|
|
1200
|
+
.kol-sheet .ol details.empty>summary{cursor:default}
|
|
1201
|
+
.kol-sheet .ol details.empty>summary::before{visibility:hidden}
|
|
1202
|
+
.kol-sheet .ol .pt a{color:var(--ink);text-decoration:none;font-weight:600}
|
|
1203
|
+
.kol-sheet .ol .mk{font-size:12px}
|
|
1204
|
+
.kol-sheet .ol .cnt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
|
|
1205
|
+
.kol-sheet .ol ul{margin:0 0 4px;padding:0 10px 2px 34px;list-style:none}
|
|
1206
|
+
.kol-sheet .ol li{margin:4px 0;font-size:13px;line-height:1.5}
|
|
1207
|
+
.kol-sheet .ol li a{color:var(--ink);text-decoration:none}
|
|
1208
|
+
.kol-sheet .ol li .tn{display:inline-block;min-width:44px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
|
|
1209
|
+
.kol-sheet.proj{--g:64px;--ti:var(--g);--measure:calc(var(--edge) - var(--g));padding-left:var(--g)}
|
|
1210
|
+
.kol-sheet.proj .num{display:inline-block;width:var(--g);margin-left:calc(-1 * var(--g));font-variant-numeric:tabular-nums}
|
|
1211
|
+
.kol-sheet.proj h1,.kol-sheet.proj h1+p{margin-left:calc(-1 * var(--g))}
|
|
1212
|
+
.kol-sheet.proj h2,.kol-sheet.proj h3{margin-left:calc(-1 * var(--g));padding-left:var(--g)}
|
|
1213
|
+
.kol-sheet.proj h2{padding-left:0}
|
|
1214
|
+
.kol-sheet.proj h3 .num{color:var(--muted);font-weight:500}
|
|
1215
|
+
.kol-sheet.proj h3{margin-bottom:6px}
|
|
1216
|
+
.kol-sheet.proj h4{font-family:var(--body);font-size:15.5px;font-weight:600;letter-spacing:0;margin:26px 0 4px;line-height:1.4}
|
|
1217
|
+
.kol-sheet.proj h4 .num{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted);vertical-align:1px}
|
|
1218
|
+
.kol-sheet.proj h4.done::after{content:" \2713"}
|
|
1219
|
+
.kol-sheet.proj h4+p{margin-top:2px}
|
|
1220
|
+
.kol-sheet.proj p.tb{font-size:14.5px;color:color-mix(in srgb,var(--ink) 70%,transparent)}
|
|
1221
|
+
.kol-sheet.proj h4,.kol-sheet.proj p.tb{margin-left:var(--ti)}
|
|
1222
|
+
.kol-sheet.proj ul.tb,.kol-sheet.proj ol.tb{margin-left:calc(var(--ti) + 2px);padding-left:18px;font-size:14.5px;color:color-mix(in srgb,var(--ink) 70%,transparent)}
|
|
1223
|
+
.kol-sheet.proj .tb strong{color:var(--ink)}
|
|
1224
|
+
.kol-sheet.proj h1 .num,.kol-sheet.proj h2 .num{width:auto;margin-left:0;margin-right:1em}
|
|
1225
|
+
.kol-sheet.proj h2 .num{color:var(--accent)}
|
|
1226
|
+
.kol-sheet:not(.proj) h1 .num{margin-right:1em}
|
|
1227
|
+
.kol-sheet h1 .num{color:var(--accent)}
|
|
1228
|
+
.kol-sheet p.stats{display:flex;flex-wrap:wrap;gap:4px 24px}
|
|
1229
|
+
.kol-sheet.proj p[data-ms],.kol-sheet.proj ol.fns[data-ms]{margin-left:calc(-1 * var(--g))}
|
|
1230
|
+
.kol-sheet.proj ul[data-ms]{margin-left:calc(-1 * var(--g));padding-left:0;list-style:none}
|
|
1231
|
+
.kol-sheet.proj ul[data-ms] li{margin:4px 0;color:var(--muted)}
|
|
1232
|
+
.kol-sheet.proj ul[data-ms] li strong{color:var(--ink)}
|
|
1233
|
+
.kol-sheet.proj p,.kol-sheet.proj ol.fns{max-width:var(--measure)}
|
|
1234
|
+
.kol-sheet.proj p[data-ms],.kol-sheet.proj ul[data-ms],.kol-sheet.proj ol.fns[data-ms]{max-width:calc(var(--measure) + var(--g))}
|
|
1235
|
+
.kol-sheet.proj p.tb,.kol-sheet.proj ul.tb,.kol-sheet.proj ol.tb{max-width:calc(var(--measure) - var(--ti))}
|
|
1236
|
+
.kol-sheet.proj p.note{max-width:none}
|
|
1237
|
+
@media (max-width:560px){.kol-sheet{padding:16px 0 20px}}
|
|
1238
|
+
@media (max-width:767px){
|
|
1239
|
+
.kol-sheet.proj{--g:0px}
|
|
1240
|
+
.kol-sheet.proj .num,.kol-sheet.proj h1 .num,.kol-sheet.proj h2 .num{display:inline;width:auto;margin-left:0;margin-right:.5em}
|
|
1241
|
+
.kol-sheet .ol .why{display:none}
|
|
1242
|
+
}
|
|
1243
|
+
.kol-sheet h2:has(+ [data-embed^="ac-"]){height:0;margin:0;padding:0;border:0;overflow:hidden}
|
|
1244
|
+
.kol-sheet .tablewrap:not(.kv){border:0;border-radius:0;margin:24px 0}
|
|
1245
|
+
.kol-sheet p+.tablewrap:not(.kv){margin-top:40px}
|
|
1246
|
+
.kol-sheet .tablewrap:not(.kv) table{font-family:var(--mono);font-size:12px;line-height:1.4}
|
|
1247
|
+
.kol-sheet .tablewrap:not(.kv) th{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:0;line-height:1.3;color:var(--ink);background:var(--soft);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
|
|
1248
|
+
.kol-sheet .tablewrap:not(.kv) th:first-child{border-top-left-radius:4px}
|
|
1249
|
+
.kol-sheet .tablewrap:not(.kv) th:last-child{border-top-right-radius:4px}
|
|
1250
|
+
.kol-sheet .tablewrap:not(.kv) td{padding:12px 16px;color:var(--muted);border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);font-family:var(--mono)}
|
|
1251
|
+
.kol-sheet .tablewrap:not(.kv) tr:last-child td{border-bottom:0}
|
|
1252
|
+
.kol-sheet .tablewrap:not(.kv) tr.total td{font-weight:700;color:var(--ink);background:none}
|
|
1253
|
+
.kol-sheet .tablewrap:not(.kv) tr.total td strong{font-weight:700}
|
|
1254
|
+
.kol-sheet .tablewrap:not(.kv) td a{color:var(--ink);text-decoration:none}
|
|
1255
|
+
.kol-sheet .tablewrap:not(.kv) td a:hover{text-decoration:underline}
|
|
1256
|
+
|
|
1113
1257
|
/* =============================================================================
|
|
1114
1258
|
* TAILWIND CONTRACT — font-family exposures
|
|
1115
1259
|
* Lets JSX use font-display / font-narrow / etc. instead of arbitrary value
|