@kolkrabbi/kol-theme 0.13.3 → 0.13.4
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-atoms.css +72 -0
- package/package.json +1 -1
package/kol-components-atoms.css
CHANGED
|
@@ -867,3 +867,75 @@ a:hover .icon-hover,
|
|
|
867
867
|
border-top: 1px solid var(--kol-fg-08);
|
|
868
868
|
border-bottom: 1px solid var(--kol-fg-08);
|
|
869
869
|
}
|
|
870
|
+
|
|
871
|
+
/* ───── IconFrame — a static square frame holding one icon ─────
|
|
872
|
+
* Promoted 2026-07-30 from kol-website's SectionTitle, where the pattern was an
|
|
873
|
+
* anonymous <span> wearing `kol-btn kol-btn-secondary kol-btn-md kol-btn-icon`.
|
|
874
|
+
*
|
|
875
|
+
* These classes exist INSTEAD of reusing kol-btn-*, and that is the whole point
|
|
876
|
+
* of the component. On a <span>, the button's hover/active/focus/disabled rules
|
|
877
|
+
* are suppressed by the ELEMENT — "no states" was an accident of the tag, one
|
|
878
|
+
* element change away from leaking back. Here there are simply no state rules
|
|
879
|
+
* to inherit: no :hover, no :active, no :focus-visible, no :disabled, no
|
|
880
|
+
* transition, no cursor.
|
|
881
|
+
*
|
|
882
|
+
* Background/foreground/geometry are byte-identical to the kol-btn equivalents
|
|
883
|
+
* (declarations mirrored from .kol-btn-{variant} above and the pinned squares
|
|
884
|
+
* at .kol-btn-icon.kol-btn-{size}), so surfaces that migrate don't shift a
|
|
885
|
+
* pixel. `primary` and `secondary` are inverse pairs — they flip with the theme
|
|
886
|
+
* from the tokens alone, no per-theme props. */
|
|
887
|
+
.kol-icon-frame {
|
|
888
|
+
display: inline-flex;
|
|
889
|
+
align-items: center;
|
|
890
|
+
justify-content: center;
|
|
891
|
+
flex-shrink: 0;
|
|
892
|
+
line-height: 0;
|
|
893
|
+
border-radius: var(--kol-radius-sm);
|
|
894
|
+
padding: 0;
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
/* pinned squares — the box never moves with glyph size (user law 2026-07-28) */
|
|
898
|
+
.kol-icon-frame-sm { width: 28px; height: 28px; }
|
|
899
|
+
.kol-icon-frame-md { width: 32px; height: 32px; }
|
|
900
|
+
.kol-icon-frame-lg { width: 36px; height: 36px; }
|
|
901
|
+
|
|
902
|
+
.kol-icon-frame-primary {
|
|
903
|
+
background: var(--kol-surface-secondary);
|
|
904
|
+
color: var(--kol-surface-on-primary);
|
|
905
|
+
border: 1px solid transparent;
|
|
906
|
+
}
|
|
907
|
+
.kol-icon-frame-secondary {
|
|
908
|
+
background: var(--kol-surface-on-primary);
|
|
909
|
+
color: var(--kol-surface-primary);
|
|
910
|
+
border: 1px solid transparent;
|
|
911
|
+
}
|
|
912
|
+
.kol-icon-frame-accent {
|
|
913
|
+
background: var(--kol-accent-primary);
|
|
914
|
+
color: var(--kol-accent-on-primary);
|
|
915
|
+
border: 1px solid transparent;
|
|
916
|
+
}
|
|
917
|
+
.kol-icon-frame-outline {
|
|
918
|
+
background: transparent;
|
|
919
|
+
color: var(--kol-surface-on-primary);
|
|
920
|
+
border: 1px solid var(--kol-oq-16);
|
|
921
|
+
}
|
|
922
|
+
.kol-icon-frame-ghost {
|
|
923
|
+
background: transparent;
|
|
924
|
+
color: var(--kol-oq-48);
|
|
925
|
+
border: 1px solid transparent;
|
|
926
|
+
}
|
|
927
|
+
.kol-icon-frame-nav {
|
|
928
|
+
background: transparent;
|
|
929
|
+
color: var(--kol-oq-64);
|
|
930
|
+
border: 1px solid transparent;
|
|
931
|
+
}
|
|
932
|
+
.kol-icon-frame-grey {
|
|
933
|
+
background: var(--kol-oq-12);
|
|
934
|
+
color: var(--kol-surface-on-primary);
|
|
935
|
+
border: 1px solid transparent;
|
|
936
|
+
}
|
|
937
|
+
.kol-icon-frame-danger {
|
|
938
|
+
background: var(--ui-error);
|
|
939
|
+
color: var(--kol-color-absolute-white);
|
|
940
|
+
border: 1px solid transparent;
|
|
941
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-theme",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.4",
|
|
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",
|