@womp/kookie-ui 0.27.1 → 0.28.1
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/components.css +72 -66
- package/package.json +1 -1
- package/src/components/_internal/base-menu.css +4 -4
- package/src/components/shell.css +7 -7
- package/src/components/sidebar.css +22 -9
- package/src/styles/tokens/radius.css +66 -25
- package/styles.css +136 -103
- package/tokens/base.css +64 -37
- package/tokens.css +64 -37
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* RADIUS
|
|
3
3
|
*
|
|
4
|
-
* v2's structure
|
|
4
|
+
* v2's structure and v2's corners (since 0.28.0; see docs/LOG.md, 2026-10-27).
|
|
5
5
|
*
|
|
6
6
|
* 1. The palette: --radius-0 to --radius-10, plus --radius-full. Raw corners, scaled by the
|
|
7
7
|
* Theme radius through --radius-factor. --radius-full is 9999px at `full` and 0px below it.
|
|
@@ -11,12 +11,16 @@
|
|
|
11
11
|
* the palette step N below it.
|
|
12
12
|
* --radius-row-N a row's corner inside a panel that hugs rows. Half the row's own
|
|
13
13
|
* height at `full`, --radius-control-N below it.
|
|
14
|
-
* --radius-
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* and
|
|
18
|
-
*
|
|
19
|
-
*
|
|
14
|
+
* --radius-panel-N a panel that hugs rows (menus, Select, Combobox): its row's corner
|
|
15
|
+
* plus its padding, so the rows are concentric with it. 0 at `none`.
|
|
16
|
+
* --radius-surface-N a surface's corner: cards, tables, panes, popovers.
|
|
17
|
+
* --radius-overlay-N a detached surface's corner: dialogs and sheets. The corner of the
|
|
18
|
+
* surface one size up.
|
|
19
|
+
* Surfaces and overlays are set per Theme radius: v2's bands at `medium` and below, a
|
|
20
|
+
* flatter v1 band at `large` and `full`. They never go pill. `large` and `full` share them, so turning the dial up never squares a card.
|
|
21
|
+
* 3. Nesting: a pane inside a pane is concentric where it can be. Inner corner = outer corner
|
|
22
|
+
* minus outer padding, never below 8px and never above its own corner. See the end of this
|
|
23
|
+
* file.
|
|
20
24
|
*/
|
|
21
25
|
|
|
22
26
|
[data-radius] {
|
|
@@ -43,44 +47,78 @@
|
|
|
43
47
|
--radius-row-3: var(--radius-control-3);
|
|
44
48
|
--radius-row-4: var(--radius-control-4);
|
|
45
49
|
|
|
46
|
-
--radius-
|
|
47
|
-
--radius-
|
|
48
|
-
--radius-
|
|
49
|
-
--radius-
|
|
50
|
+
--radius-panel-1: calc(var(--radius-row-1) + var(--panel-p-1));
|
|
51
|
+
--radius-panel-2: calc(var(--radius-row-2) + var(--panel-p-2));
|
|
52
|
+
--radius-panel-3: calc(var(--radius-row-3) + var(--panel-p-3));
|
|
53
|
+
--radius-panel-4: calc(var(--radius-row-4) + var(--panel-p-4));
|
|
50
54
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
+
/* The surface band at `large` and `full`, by eye (Kushagra, 2026-10-27): v2's band
|
|
56
|
+
(24/32/40/48, v2 tokens/config.ts radiusLevels) read too round, and so did 28px at
|
|
57
|
+
size 2. These sit at or under the surface padding (16/24/32/40), where the concentric
|
|
58
|
+
rule alone would square every nested surface, so nesting has a floor (section 3).
|
|
59
|
+
See docs/LOG.md, 2026-10-27. */
|
|
60
|
+
--radius-surface-1: calc(16px * var(--scale));
|
|
61
|
+
--radius-surface-2: calc(20px * var(--scale));
|
|
62
|
+
--radius-surface-3: calc(24px * var(--scale));
|
|
63
|
+
--radius-surface-4: calc(28px * var(--scale));
|
|
64
|
+
|
|
65
|
+
--radius-overlay-1: calc(20px * var(--scale));
|
|
66
|
+
--radius-overlay-2: calc(24px * var(--scale));
|
|
67
|
+
--radius-overlay-3: calc(28px * var(--scale));
|
|
68
|
+
--radius-overlay-4: calc(32px * var(--scale));
|
|
55
69
|
}
|
|
56
70
|
|
|
57
71
|
[data-radius='none'] {
|
|
58
72
|
--radius-factor: 0;
|
|
59
|
-
--radius-surface-factor: 0;
|
|
60
73
|
--radius-full: 0px;
|
|
74
|
+
--radius-panel-1: 0px;
|
|
75
|
+
--radius-panel-2: 0px;
|
|
76
|
+
--radius-panel-3: 0px;
|
|
77
|
+
--radius-panel-4: 0px;
|
|
78
|
+
--radius-surface-1: 0px;
|
|
79
|
+
--radius-surface-2: 0px;
|
|
80
|
+
--radius-surface-3: 0px;
|
|
81
|
+
--radius-surface-4: 0px;
|
|
82
|
+
--radius-overlay-1: 0px;
|
|
83
|
+
--radius-overlay-2: 0px;
|
|
84
|
+
--radius-overlay-3: 0px;
|
|
85
|
+
--radius-overlay-4: 0px;
|
|
61
86
|
}
|
|
62
87
|
|
|
63
88
|
[data-radius='small'] {
|
|
64
89
|
--radius-factor: 0.75;
|
|
65
|
-
--radius-surface-factor: 0.5;
|
|
66
90
|
--radius-full: 0px;
|
|
91
|
+
--radius-surface-1: calc(5px * var(--scale));
|
|
92
|
+
--radius-surface-2: calc(6px * var(--scale));
|
|
93
|
+
--radius-surface-3: calc(8px * var(--scale));
|
|
94
|
+
--radius-surface-4: calc(10px * var(--scale));
|
|
95
|
+
--radius-overlay-1: calc(6px * var(--scale));
|
|
96
|
+
--radius-overlay-2: calc(8px * var(--scale));
|
|
97
|
+
--radius-overlay-3: calc(10px * var(--scale));
|
|
98
|
+
--radius-overlay-4: calc(12px * var(--scale));
|
|
67
99
|
}
|
|
68
100
|
|
|
69
101
|
[data-radius='medium'] {
|
|
70
102
|
--radius-factor: 1;
|
|
71
|
-
--radius-surface-factor: 0.75;
|
|
72
103
|
--radius-full: 0px;
|
|
104
|
+
--radius-surface-1: calc(12px * var(--scale));
|
|
105
|
+
--radius-surface-2: calc(18px * var(--scale));
|
|
106
|
+
--radius-surface-3: calc(24px * var(--scale));
|
|
107
|
+
--radius-surface-4: calc(30px * var(--scale));
|
|
108
|
+
--radius-overlay-1: calc(18px * var(--scale));
|
|
109
|
+
--radius-overlay-2: calc(24px * var(--scale));
|
|
110
|
+
--radius-overlay-3: calc(30px * var(--scale));
|
|
111
|
+
--radius-overlay-4: calc(36px * var(--scale));
|
|
73
112
|
}
|
|
74
113
|
|
|
75
114
|
[data-radius='large'] {
|
|
115
|
+
/* Surfaces and overlays keep the base band, which is large's and full's. */
|
|
76
116
|
--radius-factor: 1.5;
|
|
77
|
-
--radius-surface-factor: 0.9;
|
|
78
117
|
--radius-full: 0px;
|
|
79
118
|
}
|
|
80
119
|
|
|
81
120
|
[data-radius='full'] {
|
|
82
121
|
--radius-factor: 2;
|
|
83
|
-
--radius-surface-factor: 1;
|
|
84
122
|
--radius-full: 9999px;
|
|
85
123
|
|
|
86
124
|
/* A control at `full` is a capsule: half its own height. */
|
|
@@ -105,7 +143,10 @@
|
|
|
105
143
|
* --kui-sf-p its padding (--surface-p-N)
|
|
106
144
|
* --kui-sf-r the corner to draw: its own, or the nested corner when inside another
|
|
107
145
|
* and on its CHILDREN:
|
|
108
|
-
* --kui-nest outer corner minus outer padding
|
|
146
|
+
* --kui-nest outer corner minus outer padding, at least 8px. v1's corners are at or
|
|
147
|
+
* under their padding, where v2's rule gives 0 and the inner pane squares;
|
|
148
|
+
* a tighter inner corner reads fine, a square one reads as a missing
|
|
149
|
+
* corner. min() with its own corner keeps `small` and `none` honest.
|
|
109
150
|
*
|
|
110
151
|
* --kui-nest is written from the size tokens, not from --kui-sf-radius and --kui-sf-p: a
|
|
111
152
|
* direct child that is itself a surface would resolve those against its own declarations.
|
|
@@ -122,28 +163,28 @@
|
|
|
122
163
|
--kui-sf-p: var(--surface-p-1);
|
|
123
164
|
}
|
|
124
165
|
&:where(.kui-r-size-1) > * {
|
|
125
|
-
--kui-nest: max(
|
|
166
|
+
--kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
|
|
126
167
|
}
|
|
127
168
|
&:where(.kui-r-size-2) {
|
|
128
169
|
--kui-sf-radius: var(--radius-surface-2);
|
|
129
170
|
--kui-sf-p: var(--surface-p-2);
|
|
130
171
|
}
|
|
131
172
|
&:where(.kui-r-size-2) > * {
|
|
132
|
-
--kui-nest: max(
|
|
173
|
+
--kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
|
|
133
174
|
}
|
|
134
175
|
&:where(.kui-r-size-3) {
|
|
135
176
|
--kui-sf-radius: var(--radius-surface-3);
|
|
136
177
|
--kui-sf-p: var(--surface-p-3);
|
|
137
178
|
}
|
|
138
179
|
&:where(.kui-r-size-3) > * {
|
|
139
|
-
--kui-nest: max(
|
|
180
|
+
--kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
|
|
140
181
|
}
|
|
141
182
|
&:where(.kui-r-size-4) {
|
|
142
183
|
--kui-sf-radius: var(--radius-surface-4);
|
|
143
184
|
--kui-sf-p: var(--surface-p-4);
|
|
144
185
|
}
|
|
145
186
|
&:where(.kui-r-size-4) > * {
|
|
146
|
-
--kui-nest: max(
|
|
187
|
+
--kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
|
|
147
188
|
}
|
|
148
189
|
}
|
|
149
190
|
}
|