@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.
- package/README.md +26 -0
- package/kol-base-tokens.css +74 -0
- package/kol-color.css +280 -0
- package/kol-components-atoms.css +709 -0
- package/kol-components-molecules.css +255 -0
- package/kol-components-organisms.css +220 -0
- package/kol-opacity.css +369 -0
- package/kol-opaque.css +203 -0
- package/kol-theme.css +110 -0
- package/kol-type-mono-classes.css +115 -0
- package/kol-typography-mono.css +64 -0
- package/kol-typography.css +1090 -0
- package/kol-utilities.css +92 -0
- package/package.json +34 -0
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* KOL Utilities — generic helper classes.
|
|
3
|
+
*
|
|
4
|
+
* Curated from kol-theme/_new-css/utilities.css during Phase 5 sync. Dropped:
|
|
5
|
+
* - bg-opacity-hex-* / hover:bg-opacity-hex-* / inverse-* family (~600 lines)
|
|
6
|
+
* The --kol-opacity-hex-* tokens were retired in kol-client Phase 4a and
|
|
7
|
+
* consolidated into the color-mix-based --kol-fg-* family in kol-opacity.css.
|
|
8
|
+
* - .reveal* family ([data-reveal] is the canonical reveal pattern in
|
|
9
|
+
* kol-client; shipping a parallel .reveal API would create drift)
|
|
10
|
+
* - wordmarkBrand / logomarkBrand filter utilities (proposal-specific
|
|
11
|
+
* brand chrome, not DS scope)
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
.flex-center {
|
|
15
|
+
display: flex;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
align-items: center;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.absolute-center {
|
|
21
|
+
position: absolute;
|
|
22
|
+
top: 50%;
|
|
23
|
+
left: 50%;
|
|
24
|
+
transform: translate(-50%, -50%);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.text-balance {
|
|
28
|
+
text-wrap: balance;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Responsive page padding — standard horizontal inset for route pages. */
|
|
32
|
+
.breakpoint-padding {
|
|
33
|
+
padding-left: 1rem;
|
|
34
|
+
padding-right: 1rem;
|
|
35
|
+
}
|
|
36
|
+
@media (min-width: 768px) {
|
|
37
|
+
.breakpoint-padding {
|
|
38
|
+
padding-left: 1.25rem;
|
|
39
|
+
padding-right: 1.25rem;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
@media (min-width: 1024px) {
|
|
43
|
+
.breakpoint-padding {
|
|
44
|
+
padding-left: 1.5rem;
|
|
45
|
+
padding-right: 1.5rem;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Screen-reader-only — hide visually but keep accessible. */
|
|
50
|
+
.sr-only {
|
|
51
|
+
position: absolute;
|
|
52
|
+
width: 1px;
|
|
53
|
+
height: 1px;
|
|
54
|
+
padding: 0;
|
|
55
|
+
margin: -1px;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
clip: rect(0, 0, 0, 0);
|
|
58
|
+
white-space: nowrap;
|
|
59
|
+
border-width: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Fullbleed — escape parent container to span viewport edge-to-edge.
|
|
63
|
+
Extracted from kol-site.css during Phase 4b unwind.
|
|
64
|
+
Used by landing-tier sections that span 100vw regardless of column shell. */
|
|
65
|
+
.fullbleed {
|
|
66
|
+
width: 100vw;
|
|
67
|
+
margin-left: calc(50% - 50vw);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Cap-baseline trim — crops the line box to cap-height top + alphabetic
|
|
71
|
+
* baseline bottom. Modern primitive for tight UI labels (Button, Toggle,
|
|
72
|
+
* Dropdown text) where vertical centering matters more than ascender /
|
|
73
|
+
* descender room. Replaces the `line-height: 100%` hack with explicit metrics.
|
|
74
|
+
*
|
|
75
|
+
* Browser support: Chrome 133+, Safari 18.2+. Firefox not yet — falls back to
|
|
76
|
+
* default line-box behavior, no visual break. Opt-in only; do not blanket-apply. */
|
|
77
|
+
.text-trim {
|
|
78
|
+
text-box-trim: trim-start trim-end;
|
|
79
|
+
text-box-edge: cap alphabetic;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Suppress native number-input spinner arrows. Apply to <input type="number">
|
|
83
|
+
* when a custom Stepper renders chevron buttons instead. */
|
|
84
|
+
.hide-number-spinners::-webkit-inner-spin-button,
|
|
85
|
+
.hide-number-spinners::-webkit-outer-spin-button {
|
|
86
|
+
-webkit-appearance: none;
|
|
87
|
+
appearance: none;
|
|
88
|
+
margin: 0;
|
|
89
|
+
}
|
|
90
|
+
.hide-number-spinners {
|
|
91
|
+
-moz-appearance: textfield;
|
|
92
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kolkrabbi/kol-theme",
|
|
3
|
+
"version": "0.1.0",
|
|
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
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"sideEffects": [
|
|
8
|
+
"*.css"
|
|
9
|
+
],
|
|
10
|
+
"style": "./kol-theme.css",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": "./kol-theme.css",
|
|
13
|
+
"./*": "./*"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"*.css",
|
|
17
|
+
"README.md"
|
|
18
|
+
],
|
|
19
|
+
"keywords": [
|
|
20
|
+
"kol",
|
|
21
|
+
"kolkrabbi",
|
|
22
|
+
"design-system",
|
|
23
|
+
"css",
|
|
24
|
+
"design-tokens"
|
|
25
|
+
],
|
|
26
|
+
"repository": {
|
|
27
|
+
"type": "git",
|
|
28
|
+
"url": "git+https://github.com/kolkrabbi/kol-design-system.git",
|
|
29
|
+
"directory": "packages/theme"
|
|
30
|
+
},
|
|
31
|
+
"publishConfig": {
|
|
32
|
+
"access": "public"
|
|
33
|
+
}
|
|
34
|
+
}
|