@kolkrabbi/kol-theme 0.45.0 → 0.46.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-components-molecules.css +54 -1
- package/package.json +1 -1
|
@@ -859,10 +859,22 @@
|
|
|
859
859
|
padding: var(--kol-row-pad);
|
|
860
860
|
min-height: var(--kol-row-min-h);
|
|
861
861
|
background: var(--kol-row-bg);
|
|
862
|
-
|
|
862
|
+
/* the FALLBACK is not optional. A variant with no frame publishes no
|
|
863
|
+
* `--kol-row-border`, and `border-color: var(--undefined)` is invalid at
|
|
864
|
+
* computed-value time — it resolves to `unset`, which INHERITS, which is
|
|
865
|
+
* currentColor, which is the text colour. That is how `default`'s hairline
|
|
866
|
+
* divider rendered as a solid white rule. */
|
|
867
|
+
border-color: var(--kol-row-border, transparent);
|
|
863
868
|
transition: background-color 300ms var(--kol-ease-house),
|
|
864
869
|
border-color 300ms var(--kol-ease-house);
|
|
865
870
|
}
|
|
871
|
+
|
|
872
|
+
/* the divider is its OWN longhand, declared after the shorthand above so it
|
|
873
|
+
* wins on order — `default`'s bottom rule is not the same thing as a framed
|
|
874
|
+
* variant's border, and one property cannot carry both. */
|
|
875
|
+
.kol-row--divided {
|
|
876
|
+
border-bottom: 1px solid var(--kol-fg-08);
|
|
877
|
+
}
|
|
866
878
|
.kol-row > .kol-row-thumb {
|
|
867
879
|
width: var(--kol-row-thumb);
|
|
868
880
|
}
|
|
@@ -964,3 +976,44 @@
|
|
|
964
976
|
.kol-expand-content {
|
|
965
977
|
transition: opacity 300ms var(--kol-ease-house);
|
|
966
978
|
}
|
|
979
|
+
|
|
980
|
+
/* ─────────────────────────────────────────────────────────────────────
|
|
981
|
+
* ContentMedia — the hover zoom
|
|
982
|
+
*
|
|
983
|
+
* A state the house serves on image-led cards: the artwork creeps up
|
|
984
|
+
* inside its own frame while the frame holds still. ContentMedia already
|
|
985
|
+
* clips, so the scale has something to push against — without that
|
|
986
|
+
* overflow the image just grows out of the card.
|
|
987
|
+
*
|
|
988
|
+
* Keyed off the CARD's hover, not the media's, because the whole tile is
|
|
989
|
+
* the affordance; hovering the caption must zoom too. Transform only —
|
|
990
|
+
* it is the one property that scales without relayout, and a wall of
|
|
991
|
+
* these must not thrash the grid.
|
|
992
|
+
*
|
|
993
|
+
* 1.06 and 600ms, deliberately slow and small: a zoom you can SEE
|
|
994
|
+
* happening reads as a photograph breathing; a fast one reads as a
|
|
995
|
+
* glitch.
|
|
996
|
+
* ───────────────────────────────────────────────────────────────────── */
|
|
997
|
+
.kol-media-zoom > img,
|
|
998
|
+
.kol-media-zoom > video {
|
|
999
|
+
transition: transform 600ms var(--kol-ease-house);
|
|
1000
|
+
transform-origin: center;
|
|
1001
|
+
}
|
|
1002
|
+
|
|
1003
|
+
@media (hover: hover) {
|
|
1004
|
+
.group:hover .kol-media-zoom > img,
|
|
1005
|
+
.group:hover .kol-media-zoom > video {
|
|
1006
|
+
transform: scale(1.06);
|
|
1007
|
+
}
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1011
|
+
.kol-media-zoom > img,
|
|
1012
|
+
.kol-media-zoom > video {
|
|
1013
|
+
transition: none;
|
|
1014
|
+
}
|
|
1015
|
+
.group:hover .kol-media-zoom > img,
|
|
1016
|
+
.group:hover .kol-media-zoom > video {
|
|
1017
|
+
transform: none;
|
|
1018
|
+
}
|
|
1019
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.46.0",
|
|
4
4
|
"description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|