@womp/kookie-ui 0.4.0 → 0.5.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.
Files changed (21) hide show
  1. package/components.css +468 -266
  2. package/package.json +1 -1
  3. package/src/components/_internal/base-card.css +5 -5
  4. package/src/components/_internal/base-checkbox.css +17 -3
  5. package/src/components/_internal/base-dialog.css +4 -4
  6. package/src/components/_internal/base-menu.css +3 -3
  7. package/src/components/accordion.css +5 -5
  8. package/src/components/callout.css +5 -5
  9. package/src/components/chatbar.css +6 -6
  10. package/src/components/checkbox-cards.css +30 -0
  11. package/src/components/hover-card.css +3 -3
  12. package/src/components/popover.css +4 -4
  13. package/src/components/radio-cards.css +30 -0
  14. package/src/components/select.css +2 -2
  15. package/src/components/shell.css +1 -1
  16. package/src/components/table.css +5 -5
  17. package/src/components/tooltip.css +1 -1
  18. package/src/styles/tokens/radius.css +47 -4
  19. package/styles.css +486 -267
  20. package/tokens/base.css +18 -1
  21. package/tokens.css +18 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@womp/kookie-ui",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
5
5
  "keywords": [
6
6
  "react",
package/src/components/_internal/base-card.css CHANGED
@@ -147,35 +147,35 @@
147
147
  --base-card-padding-right: var(--space-2);
148
148
  --base-card-padding-bottom: var(--space-2);
149
149
  --base-card-padding-left: var(--space-2);
150
- --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
150
+ --base-card-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-1)));
151
151
  }
152
152
  &:where(.rt-r-size-2) {
153
153
  --base-card-padding-top: var(--space-3);
154
154
  --base-card-padding-right: var(--space-3);
155
155
  --base-card-padding-bottom: var(--space-3);
156
156
  --base-card-padding-left: var(--space-3);
157
- --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
157
+ --base-card-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
158
158
  }
159
159
  &:where(.rt-r-size-3) {
160
160
  --base-card-padding-top: var(--space-4);
161
161
  --base-card-padding-right: var(--space-4);
162
162
  --base-card-padding-bottom: var(--space-4);
163
163
  --base-card-padding-left: var(--space-4);
164
- --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
164
+ --base-card-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-3)));
165
165
  }
166
166
  &:where(.rt-r-size-4) {
167
167
  --base-card-padding-top: var(--space-5);
168
168
  --base-card-padding-right: var(--space-5);
169
169
  --base-card-padding-bottom: var(--space-5);
170
170
  --base-card-padding-left: var(--space-5);
171
- --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
171
+ --base-card-border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-4)));
172
172
  }
173
173
  &:where(.rt-r-size-5) {
174
174
  --base-card-padding-top: var(--space-6);
175
175
  --base-card-padding-right: var(--space-6);
176
176
  --base-card-padding-bottom: var(--space-6);
177
177
  --base-card-padding-left: var(--space-6);
178
- --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
178
+ --base-card-border-radius: min(var(--radius-surface-9), calc(var(--radius-surface-5) + var(--space-5)));
179
179
  }
180
180
  }
181
181
  }
package/src/components/_internal/base-checkbox.css CHANGED
@@ -15,6 +15,20 @@
15
15
  border-radius: var(--skeleton-radius);
16
16
  --skeleton-radius-override: var(--checkbox-border-radius);
17
17
 
18
+ /*
19
+ * Ceiling on the mark's corner, as a ratio of its own box.
20
+ *
21
+ * A checkbox is small and does not grow with the radius theme, so the
22
+ * radius ramp outruns it: at `full` the corner reaches half the box and
23
+ * the mark becomes a circle — geometrically identical to Radio, which is
24
+ * `border-radius: 100%`. That collapses the distinction between choosing
25
+ * many and choosing one, so the corner is clamped below a circle at every
26
+ * theme. 0.4 stays visibly square next to a Radio of the same size while
27
+ * leaving the ramp intact through `large`.
28
+ */
29
+ --checkbox-radius-ratio-max: 0.4;
30
+ --checkbox-radius-max: calc(var(--checkbox-size) * var(--checkbox-radius-ratio-max));
31
+
18
32
 
19
33
  /* Theme-level translucent override */
20
34
  :where([data-panel-background='translucent'], [data-material='translucent']) & {
@@ -77,17 +91,17 @@
77
91
  &:where(.rt-r-size-1) {
78
92
  --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
79
93
  --checkbox-indicator-size: var(--indicator-icon-size-1);
80
- --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
94
+ --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-small)), var(--checkbox-radius-max));
81
95
  }
82
96
  &:where(.rt-r-size-2) {
83
97
  --checkbox-size: var(--space-4);
84
98
  --checkbox-indicator-size: var(--indicator-icon-size-2);
85
- --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
99
+ --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
86
100
  }
87
101
  &:where(.rt-r-size-3) {
88
102
  --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
89
103
  --checkbox-indicator-size: var(--indicator-icon-size-3);
90
- --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
104
+ --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
91
105
  }
92
106
  }
93
107
  }
package/src/components/_internal/base-dialog.css CHANGED
@@ -90,19 +90,19 @@
90
90
  .rt-BaseDialogContent {
91
91
  &:where(.rt-r-size-1) {
92
92
  --dialog-content-padding: var(--space-5);
93
- border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
93
+ border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-2)));
94
94
  }
95
95
  &:where(.rt-r-size-2) {
96
96
  --dialog-content-padding: var(--space-6);
97
- border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
97
+ border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
98
98
  }
99
99
  &:where(.rt-r-size-3) {
100
100
  --dialog-content-padding: var(--space-7);
101
- border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
101
+ border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
102
102
  }
103
103
  &:where(.rt-r-size-4) {
104
104
  --dialog-content-padding: var(--space-8);
105
- border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
105
+ border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-5)));
106
106
  }
107
107
  }
108
108
  }
package/src/components/_internal/base-menu.css CHANGED
@@ -174,7 +174,7 @@
174
174
  --base-menu-item-padding-right: var(--space-2);
175
175
  --base-menu-item-padding-y: var(--space-1);
176
176
  --base-menu-item-height: var(--space-5);
177
- border-radius: var(--radius-3);
177
+ border-radius: var(--radius-surface-3);
178
178
 
179
179
  & :where(.rt-BaseMenuItem) {
180
180
  gap: var(--component-gap-2);
@@ -218,7 +218,7 @@
218
218
  --base-menu-item-padding-right: var(--space-3);
219
219
  --base-menu-item-padding-y: var(--space-1);
220
220
  --base-menu-item-height: var(--space-6);
221
- border-radius: var(--radius-5);
221
+ border-radius: var(--radius-surface-5);
222
222
 
223
223
  & :where(.rt-BaseMenuItem) {
224
224
  gap: var(--component-gap-3);
@@ -262,7 +262,7 @@
262
262
  --base-menu-item-padding-right: var(--space-3);
263
263
  --base-menu-item-padding-y: var(--space-2);
264
264
  --base-menu-item-height: var(--space-7);
265
- border-radius: var(--radius-6);
265
+ border-radius: var(--radius-surface-6);
266
266
 
267
267
  & :where(.rt-BaseMenuItem) {
268
268
  gap: var(--component-gap-4);
package/src/components/accordion.css CHANGED
@@ -25,20 +25,20 @@
25
25
  }
26
26
  }
27
27
 
28
- /* Size-specific border radius to match button */
28
+ /* Size-specific border radius — surface channel */
29
29
  @breakpoints {
30
30
  .rt-AccordionRoot {
31
31
  &:where(.rt-r-size-1) {
32
- border-radius: var(--radius-1);
32
+ border-radius: var(--radius-surface-1);
33
33
  }
34
34
  &:where(.rt-r-size-2) {
35
- border-radius: var(--radius-2);
35
+ border-radius: var(--radius-surface-2);
36
36
  }
37
37
  &:where(.rt-r-size-3) {
38
- border-radius: var(--radius-3);
38
+ border-radius: var(--radius-surface-3);
39
39
  }
40
40
  &:where(.rt-r-size-4) {
41
- border-radius: var(--radius-4);
41
+ border-radius: var(--radius-surface-4);
42
42
  }
43
43
  }
44
44
  }
package/src/components/callout.css CHANGED
@@ -90,7 +90,7 @@
90
90
  row-gap: var(--space-2);
91
91
  column-gap: var(--space-2);
92
92
  padding: var(--space-3);
93
- --callout-border-radius: max(var(--radius-1), var(--radius-full));
93
+ --callout-border-radius: var(--radius-surface-1);
94
94
  --callout-icon-height: var(--line-height-1);
95
95
  --callout-icon-size: var(--content-icon-size-1);
96
96
  }
@@ -98,7 +98,7 @@
98
98
  row-gap: var(--space-2);
99
99
  column-gap: var(--space-3);
100
100
  padding: var(--space-4);
101
- --callout-border-radius: max(var(--radius-2), var(--radius-full));
101
+ --callout-border-radius: var(--radius-surface-2);
102
102
  --callout-icon-height: var(--line-height-2);
103
103
  --callout-icon-size: var(--content-icon-size-2);
104
104
  }
@@ -106,7 +106,7 @@
106
106
  row-gap: var(--space-3);
107
107
  column-gap: var(--space-4);
108
108
  padding: var(--space-5);
109
- --callout-border-radius: max(var(--radius-3), var(--radius-full));
109
+ --callout-border-radius: var(--radius-surface-3);
110
110
  --callout-icon-height: var(--line-height-3);
111
111
  --callout-icon-size: var(--content-icon-size-3);
112
112
  }
@@ -114,7 +114,7 @@
114
114
  row-gap: var(--space-3);
115
115
  column-gap: var(--space-5);
116
116
  padding: var(--space-6);
117
- --callout-border-radius: max(var(--radius-4), var(--radius-full));
117
+ --callout-border-radius: var(--radius-surface-4);
118
118
  --callout-icon-height: var(--line-height-4);
119
119
  --callout-icon-size: var(--content-icon-size-4);
120
120
  }
@@ -122,7 +122,7 @@
122
122
  row-gap: var(--space-4);
123
123
  column-gap: var(--space-6);
124
124
  padding: var(--space-7);
125
- --callout-border-radius: max(var(--radius-5), var(--radius-full));
125
+ --callout-border-radius: var(--radius-surface-5);
126
126
  --callout-icon-height: var(--line-height-5);
127
127
  --callout-icon-size: var(--content-icon-size-5);
128
128
  }
package/src/components/chatbar.css CHANGED
@@ -184,7 +184,7 @@
184
184
  @breakpoints {
185
185
  .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarBox {
186
186
  /* Map Chatbar size 1 to Card size 2 */
187
- border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
187
+ border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
188
188
  padding: var(--space-3);
189
189
  }
190
190
  .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarInput {
@@ -196,7 +196,7 @@
196
196
  }
197
197
  .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarBox {
198
198
  /* Map Chatbar size 2 to Card size 3 */
199
- border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
199
+ border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-3)));
200
200
  padding: var(--space-4);
201
201
  }
202
202
  .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarInput {
@@ -208,7 +208,7 @@
208
208
  }
209
209
  .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox {
210
210
  /* Custom Chatbar size 3, different to Card size 4 */
211
- border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
211
+ border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-3)));
212
212
  padding: var(--space-4);
213
213
  }
214
214
  .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput {
@@ -236,13 +236,13 @@
236
236
  /* Reduced radius when collapsed (scale down by 1) */
237
237
  @breakpoints {
238
238
  .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-1) .rt-ChatbarBox {
239
- border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
239
+ border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-1)));
240
240
  }
241
241
  .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-2) .rt-ChatbarBox {
242
- border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
242
+ border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
243
243
  }
244
244
  .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-3) .rt-ChatbarBox {
245
- border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
245
+ border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
246
246
  }
247
247
  }
248
248
 
package/src/components/checkbox-cards.css CHANGED
@@ -137,3 +137,33 @@
137
137
  background-color: var(--gray-a5);
138
138
  }
139
139
  }
140
+
141
+ /*
142
+ * Pin the item shell to the control channel.
143
+ *
144
+ * These are selection controls that happen to be card-shaped, not surfaces:
145
+ * they sit in a row of choices and read as one large target each. Inheriting
146
+ * BaseCard's damped surface radius made them square off while every other
147
+ * control in the same form stayed round, so they take the control channel
148
+ * instead — the same formulas BaseCard used before the surface split. The
149
+ * mark inside keeps its own radius.
150
+ */
151
+ @breakpoints {
152
+ .rt-CheckboxCardsItem {
153
+ &:where(.rt-r-size-1) {
154
+ --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
155
+ }
156
+ &:where(.rt-r-size-2) {
157
+ --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
158
+ }
159
+ &:where(.rt-r-size-3) {
160
+ --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
161
+ }
162
+ &:where(.rt-r-size-4) {
163
+ --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
164
+ }
165
+ &:where(.rt-r-size-5) {
166
+ --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
167
+ }
168
+ }
169
+ }
package/src/components/hover-card.css CHANGED
@@ -25,15 +25,15 @@
25
25
  .rt-HoverCardContent {
26
26
  &:where(.rt-r-size-1) {
27
27
  --hover-card-content-padding: var(--space-3);
28
- border-radius: var(--radius-4);
28
+ border-radius: var(--radius-surface-4);
29
29
  }
30
30
  &:where(.rt-r-size-2) {
31
31
  --hover-card-content-padding: var(--space-4);
32
- border-radius: var(--radius-4);
32
+ border-radius: var(--radius-surface-4);
33
33
  }
34
34
  &:where(.rt-r-size-3) {
35
35
  --hover-card-content-padding: var(--space-5);
36
- border-radius: var(--radius-5);
36
+ border-radius: var(--radius-surface-5);
37
37
  }
38
38
  }
39
39
  }
package/src/components/popover.css CHANGED
@@ -95,22 +95,22 @@
95
95
  &:where(.rt-r-size-1) {
96
96
  --popover-content-padding: var(--space-3);
97
97
  --popover-toolbar-padding: var(--space-2);
98
- border-radius: min(var(--radius-3), calc(var(--radius-1) + var(--space-2)));
98
+ border-radius: min(var(--radius-surface-3), calc(var(--radius-surface-1) + var(--space-2)));
99
99
  }
100
100
  &:where(.rt-r-size-2) {
101
101
  --popover-content-padding: var(--space-4);
102
102
  --popover-toolbar-padding: var(--space-2);
103
- border-radius: min(var(--radius-4), calc(var(--radius-2) + var(--space-3)));
103
+ border-radius: min(var(--radius-surface-4), calc(var(--radius-surface-2) + var(--space-3)));
104
104
  }
105
105
  &:where(.rt-r-size-3) {
106
106
  --popover-content-padding: var(--space-5);
107
107
  --popover-toolbar-padding: var(--space-3);
108
- border-radius: min(var(--radius-5), calc(var(--radius-3) + var(--space-4)));
108
+ border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-3) + var(--space-4)));
109
109
  }
110
110
  &:where(.rt-r-size-4) {
111
111
  --popover-content-padding: var(--space-6);
112
112
  --popover-toolbar-padding: var(--space-4);
113
- border-radius: min(var(--radius-6), calc(var(--radius-4) + var(--space-5)));
113
+ border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-4) + var(--space-5)));
114
114
  }
115
115
  }
116
116
  }
package/src/components/radio-cards.css CHANGED
@@ -121,3 +121,33 @@
121
121
  }
122
122
  outline-color: var(--gray-8);
123
123
  }
124
+
125
+ /*
126
+ * Pin the item shell to the control channel.
127
+ *
128
+ * These are selection controls that happen to be card-shaped, not surfaces:
129
+ * they sit in a row of choices and read as one large target each. Inheriting
130
+ * BaseCard's damped surface radius made them square off while every other
131
+ * control in the same form stayed round, so they take the control channel
132
+ * instead — the same formulas BaseCard used before the surface split. The
133
+ * mark inside keeps its own radius.
134
+ */
135
+ @breakpoints {
136
+ .rt-RadioCardsItem {
137
+ &:where(.rt-r-size-1) {
138
+ --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
139
+ }
140
+ &:where(.rt-r-size-2) {
141
+ --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
142
+ }
143
+ &:where(.rt-r-size-3) {
144
+ --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
145
+ }
146
+ &:where(.rt-r-size-4) {
147
+ --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
148
+ }
149
+ &:where(.rt-r-size-5) {
150
+ --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
151
+ }
152
+ }
153
+ }
package/src/components/select.css CHANGED
@@ -270,7 +270,7 @@
270
270
  --select-item-height: var(--space-5);
271
271
  --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
272
272
  --select-separator-margin-right: var(--space-2);
273
- border-radius: var(--radius-3);
273
+ border-radius: var(--radius-surface-3);
274
274
 
275
275
  & :where(.rt-SelectLabel) {
276
276
  font-size: var(--font-size-1);
@@ -293,7 +293,7 @@
293
293
  --select-item-height: var(--space-6);
294
294
  --select-item-indicator-width: var(--space-5);
295
295
  --select-separator-margin-right: var(--space-3);
296
- border-radius: var(--radius-4);
296
+ border-radius: var(--radius-surface-4);
297
297
 
298
298
  & :where(.rt-SelectLabel) {
299
299
  font-size: var(--font-size-2);
package/src/components/shell.css CHANGED
@@ -672,7 +672,7 @@
672
672
  .rt-ShellBottom[data-inset] {
673
673
  --shell-inset-gap: var(--space-2);
674
674
  margin: var(--shell-inset-gap);
675
- border-radius: var(--radius-3);
675
+ border-radius: var(--radius-surface-3);
676
676
  background: var(--color-background);
677
677
  box-shadow: var(--shadow-2);
678
678
  /* Override height: 100% so margin doesn't overflow */
package/src/components/table.css CHANGED
@@ -60,7 +60,7 @@
60
60
  @breakpoints {
61
61
  .rt-TableRoot {
62
62
  &:where(.rt-r-size-1) {
63
- --table-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
63
+ --table-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-1)));
64
64
  --table-cell-padding: var(--space-2);
65
65
  --table-cell-min-height: calc(36px * var(--scaling));
66
66
 
@@ -70,7 +70,7 @@
70
70
  }
71
71
  }
72
72
  &:where(.rt-r-size-2) {
73
- --table-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
73
+ --table-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
74
74
  --table-cell-padding: var(--space-3);
75
75
  --table-cell-min-height: calc(44px * var(--scaling));
76
76
 
@@ -80,7 +80,7 @@
80
80
  }
81
81
  }
82
82
  &:where(.rt-r-size-3) {
83
- --table-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
83
+ --table-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-3)));
84
84
  --table-cell-padding: var(--space-4);
85
85
  --table-cell-min-height: var(--space-8);
86
86
 
@@ -90,7 +90,7 @@
90
90
  }
91
91
  }
92
92
  &:where(.rt-r-size-4) {
93
- --table-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
93
+ --table-border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-4)));
94
94
  --table-cell-padding: var(--space-5);
95
95
  --table-cell-min-height: var(--space-9);
96
96
 
@@ -100,7 +100,7 @@
100
100
  }
101
101
  }
102
102
  &:where(.rt-r-size-5) {
103
- --table-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
103
+ --table-border-radius: min(var(--radius-surface-9), calc(var(--radius-surface-5) + var(--space-5)));
104
104
  --table-cell-padding: var(--space-6);
105
105
  --table-cell-min-height: var(--space-10);
106
106
 
package/src/components/tooltip.css CHANGED
@@ -2,7 +2,7 @@
2
2
  box-sizing: border-box;
3
3
  padding: var(--space-1) var(--space-2);
4
4
  background-color: var(--gray-12);
5
- border-radius: var(--radius-1);
5
+ border-radius: var(--radius-surface-1);
6
6
  z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */
7
7
 
8
8
  transform-origin: var(--radix-tooltip-content-transform-origin);
package/src/styles/tokens/radius.css CHANGED
@@ -1,45 +1,88 @@
1
+ /*
2
+ * RADIUS
3
+ *
4
+ * Two channels, one theme.
5
+ *
6
+ * `--radius-*` CONTROLS & MARKS — buttons, inputs, checkboxes, badges,
7
+ * switches, tabs. These scale aggressively with the theme
8
+ * and opt into `--radius-full` to become pills.
9
+ *
10
+ * `--radius-surface-*` SURFACES — cards, dialogs, popovers, menus, tables,
11
+ * callouts. These damp as the theme grows and never go
12
+ * pill. A surface at `full` is exactly as round as a
13
+ * surface at `medium`; `--radius-surface-factor` is
14
+ * capped at 1.
15
+ *
16
+ * The gap between the two channels is the point: round controls read as
17
+ * touchable, restrained surfaces read as architectural. Widening the theme
18
+ * widens that contrast instead of inflating everything at once.
19
+ */
20
+
1
21
  [data-radius] {
2
- /* */
22
+ /* Controls & marks */
3
23
  --radius-1: calc(6px * var(--scaling) * var(--radius-factor));
4
24
  --radius-2: calc(8px * var(--scaling) * var(--radius-factor));
5
25
  --radius-3: calc(10px * var(--scaling) * var(--radius-factor));
6
26
  --radius-4: calc(12px * var(--scaling) * var(--radius-factor));
7
-
27
+
8
28
  /* */
9
29
  --radius-5: calc(16px * var(--scaling) * var(--radius-factor));
10
30
  --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
11
31
  --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
12
32
  --radius-8: calc(28px * var(--scaling) * var(--radius-factor));
13
-
33
+
14
34
  /* */
15
35
  --radius-9: calc(32px * var(--scaling) * var(--radius-factor));
16
36
  --radius-10: calc(40px * var(--scaling) * var(--radius-factor));
17
37
  --radius-11: calc(48px * var(--scaling) * var(--radius-factor));
18
38
  --radius-12: calc(56px * var(--scaling) * var(--radius-factor));
39
+
40
+ /* Surfaces — same ramp, damped factor, no pill */
41
+ --radius-surface-1: calc(6px * var(--scaling) * var(--radius-surface-factor));
42
+ --radius-surface-2: calc(8px * var(--scaling) * var(--radius-surface-factor));
43
+ --radius-surface-3: calc(10px * var(--scaling) * var(--radius-surface-factor));
44
+ --radius-surface-4: calc(12px * var(--scaling) * var(--radius-surface-factor));
45
+
46
+ /* */
47
+ --radius-surface-5: calc(16px * var(--scaling) * var(--radius-surface-factor));
48
+ --radius-surface-6: calc(20px * var(--scaling) * var(--radius-surface-factor));
49
+ --radius-surface-7: calc(24px * var(--scaling) * var(--radius-surface-factor));
50
+ --radius-surface-8: calc(28px * var(--scaling) * var(--radius-surface-factor));
51
+
52
+ /* */
53
+ --radius-surface-9: calc(32px * var(--scaling) * var(--radius-surface-factor));
54
+ --radius-surface-10: calc(40px * var(--scaling) * var(--radius-surface-factor));
55
+ --radius-surface-11: calc(48px * var(--scaling) * var(--radius-surface-factor));
56
+ --radius-surface-12: calc(56px * var(--scaling) * var(--radius-surface-factor));
19
57
  }
20
58
 
21
59
 
22
60
  [data-radius='none'] {
23
61
  --radius-factor: 0;
62
+ --radius-surface-factor: 0;
24
63
  --radius-full: 0px;
25
64
  }
26
65
 
27
66
  [data-radius='small'] {
28
67
  --radius-factor: 0.75;
68
+ --radius-surface-factor: 0.5;
29
69
  --radius-full: 0px;
30
70
  }
31
71
 
32
72
  [data-radius='medium'] {
33
73
  --radius-factor: 1;
74
+ --radius-surface-factor: 0.75;
34
75
  --radius-full: 0px;
35
76
  }
36
77
 
37
78
  [data-radius='large'] {
38
79
  --radius-factor: 1.5;
80
+ --radius-surface-factor: 0.9;
39
81
  --radius-full: 0px;
40
82
  }
41
83
 
42
84
  [data-radius='full'] {
43
- --radius-factor: 2.0;
85
+ --radius-factor: 2;
86
+ --radius-surface-factor: 1;
44
87
  --radius-full: 9999px;
45
88
  }