Skip to content

Commit b64f870

Browse files
claudeclaude
committed
feat: add --k-scale token for configurable control sizing
Introduce a unitless --k-scale CSS custom property that controls the dimensions of interactive controls independently of font-size. Define derived size tokens (--k-size-sm/md/lg) that bake in the multiplier, so components reference semantic tokens instead of hardcoded rem values. Scoping --k-scale to a container (e.g. .compact-sidebar { --k-scale: 0.85 }) scales only descendant controls without affecting text or the rest of the page. https://claude.ai/code/session_01UeEamizUgKrTfKTi44grHr
1 parent 1464aaf commit b64f870

13 files changed

Lines changed: 68 additions & 29 deletions

File tree

‎demo/src/theme-customizer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ function generateCSS(settings: ThemeSettings): string {
134134

135135
if (scale !== 1) {
136136
lines.push(` font-size: ${scale * 100}%;`);
137+
lines.push(` --k-scale: ${scale};`);
137138
}
138139

139140
lines.push('}');

‎docs/pages/theming.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,3 +65,33 @@ Animation curves live in `--k-ease` and related tokens. Adjust them globally or
6565

6666
When you need reduced motion support, respect the `prefers-reduced-motion` media query and reduce durations or disable
6767
animations in your overrides.
68+
69+
## Control Scaling
70+
71+
The `--k-scale` token is a unitless multiplier for interactive control dimensions (buttons, inputs, selects, switches,
72+
checkboxes, etc.). The default is `1`. Components reference derived size tokens `--k-size-sm`, `--k-size-md`, and
73+
`--k-size-lg` which incorporate the scale:
74+
75+
```css
76+
:root {
77+
--k-scale: 0.9; /* compact controls, normal text */
78+
}
79+
```
80+
81+
Because `--k-scale` is a CSS custom property, you can scope it to any container:
82+
83+
```css
84+
.compact-sidebar { --k-scale: 0.85; }
85+
.spacious-hero { --k-scale: 1.1; }
86+
```
87+
88+
This is independent of `font-size`—text stays at whatever size you set, while control dimensions scale separately. You
89+
can also override the derived tokens directly if you need full control:
90+
91+
```css
92+
:root {
93+
--k-size-sm: 2rem;
94+
--k-size-md: 2.25rem;
95+
--k-size-lg: 2.5rem;
96+
}
97+
```

‎src/components/button/style.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
/* Default size (when no size attribute or size="md") */
3939
[k="button"]:not([size]),
4040
[k="button"][size="md"] {
41-
height: 2.5rem;
41+
height: var(--k-size-md);
4242
padding-left: 1rem;
4343
padding-right: 1rem;
4444
}
@@ -114,7 +114,7 @@
114114

115115
/* Size: sm */
116116
[k="button"][size="sm"] {
117-
height: 2.25rem;
117+
height: var(--k-size-sm);
118118
border-radius: calc(var(--k-radius) - 2px);
119119
padding-left: 0.75rem;
120120
padding-right: 0.75rem;
@@ -123,15 +123,15 @@
123123

124124
/* Size: lg */
125125
[k="button"][size="lg"] {
126-
height: 2.75rem;
126+
height: var(--k-size-lg);
127127
border-radius: calc(var(--k-radius) - 2px);
128128
padding-left: 2rem;
129129
padding-right: 2rem;
130130
}
131131

132132
/* Size: icon */
133133
[k="button"][size="icon"] {
134-
height: 2.5rem;
135-
width: 2.5rem;
134+
height: var(--k-size-md);
135+
width: var(--k-size-md);
136136
padding: 0;
137137
}

‎src/components/checkbox/style.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
[k="checkbox"] {
44
appearance: none;
5-
width: 1rem;
6-
height: 1rem;
5+
width: calc(1rem * var(--k-scale));
6+
height: calc(1rem * var(--k-scale));
77
border: 1px solid hsl(var(--k-input));
88
border-radius: calc(var(--k-radius) - 2px);
99
background-color: hsl(var(--k-background));
@@ -16,8 +16,8 @@
1616

1717
[k="checkbox"]::before {
1818
content: "";
19-
width: 0.5rem;
20-
height: 0.5rem;
19+
width: calc(0.5rem * var(--k-scale));
20+
height: calc(0.5rem * var(--k-scale));
2121
transform: scale(0);
2222
transition: transform 150ms cubic-bezier(0.4,0,0.2,1);
2323
background-color: hsl(var(--k-foreground));

‎src/components/color-picker/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
[k="color-picker"] {
44
appearance: none;
5-
width: 2.5rem;
6-
height: 2.5rem;
5+
width: var(--k-size-md);
6+
height: var(--k-size-md);
77
padding: 0.25rem;
88
border: 1px solid hsl(var(--k-input));
99
border-radius: var(--k-radius);

‎src/components/dropdown-menu/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
border-radius: calc(var(--k-radius) - 0.125rem);
3636
text-align: left;
3737
padding: 0.5rem 0.75rem;
38-
min-height: 2.375rem;
38+
min-height: calc(2.375rem * var(--k-scale));
3939
white-space: nowrap;
4040
font: inherit;
4141
font-size: 1.05rem;

‎src/components/input/style.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
transition-duration: 150ms;
1414

1515
/* Default size */
16-
height: 2.5rem;
16+
height: var(--k-size-md);
1717
padding-left: 0.75rem;
1818
padding-right: 0.75rem;
1919
}
@@ -45,7 +45,7 @@
4545

4646
/* Size: sm */
4747
[k="input"][size="sm"] {
48-
height: 2.25rem;
48+
height: var(--k-size-sm);
4949
border-radius: calc(var(--k-radius) - 2px);
5050
padding-left: 0.5rem;
5151
padding-right: 0.5rem;
@@ -54,7 +54,7 @@
5454

5555
/* Size: lg */
5656
[k="input"][size="lg"] {
57-
height: 2.75rem;
57+
height: var(--k-size-lg);
5858
padding-left: 1rem;
5959
padding-right: 1rem;
6060
}

‎src/components/radio-group/style.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
[k="radio"] {
1010
appearance: none;
1111
margin: 0;
12-
width: 1rem;
13-
height: 1rem;
12+
width: calc(1rem * var(--k-scale));
13+
height: calc(1rem * var(--k-scale));
1414
border-radius: 9999px;
1515
border: 1px solid hsl(var(--k-input));
1616
background-color: hsl(var(--k-background));
@@ -22,8 +22,8 @@
2222

2323
[k="radio"]::before {
2424
content: "";
25-
width: 0.5rem;
26-
height: 0.5rem;
25+
width: calc(0.5rem * var(--k-scale));
26+
height: calc(0.5rem * var(--k-scale));
2727
border-radius: 9999px;
2828
background-color: hsl(var(--k-primary));
2929
transform: scale(0);

‎src/components/select/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
border-radius: var(--k-radius);
77
border: 1px solid hsl(var(--k-input));
88
background-color: hsl(var(--k-background));
9-
height: 2.5rem;
9+
height: var(--k-size-md);
1010
padding-left: 0.75rem;
1111
padding-right: 2rem;
1212
font-size: 0.875rem;

‎src/components/switch/style.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
appearance: none;
55
position: relative;
66
display: inline-block;
7-
width: 2.625rem;
8-
height: 1.375rem;
7+
width: calc(2.625rem * var(--k-scale));
8+
height: calc(1.375rem * var(--k-scale));
99
border-radius: 9999px;
1010
background-color: hsl(var(--k-input));
1111
border: 1px solid hsl(var(--k-input));
@@ -17,10 +17,10 @@
1717
[k="switch"]::before {
1818
content: "";
1919
position: absolute;
20-
top: 0.125rem;
21-
left: 0.1875rem;
22-
width: 1rem;
23-
height: 1rem;
20+
top: calc(0.125rem * var(--k-scale));
21+
left: calc(0.1875rem * var(--k-scale));
22+
width: calc(1rem * var(--k-scale));
23+
height: calc(1rem * var(--k-scale));
2424
border-radius: 9999px;
2525
background-color: hsl(var(--k-background));
2626
transition: transform 250ms var(--k-ease);
@@ -32,7 +32,7 @@
3232
}
3333

3434
[k="switch"]:checked::before {
35-
transform: translateX(1.2rem);
35+
transform: translateX(calc(1.2rem * var(--k-scale)));
3636
}
3737

3838
[k="switch"]:focus-visible {

0 commit comments

Comments
 (0)