Skip to content

Add control scaling support with --k-scale token #109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
developit wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Add control scaling support with --k-scale token #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions demo/src/theme-customizer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ function generateCSS(settings: ThemeSettings): string {

if (scale !== 1) {
lines.push(` font-size: ${scale * 100}%;`);
lines.push(` --k-scale: ${scale};`);
}

lines.push('}');
Expand Down
30 changes: 30 additions & 0 deletions docs/pages/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,33 @@ Animation curves live in `--k-ease` and related tokens. Adjust them globally or

When you need reduced motion support, respect the `prefers-reduced-motion` media query and reduce durations or disable
animations in your overrides.

## Control Scaling

The `--k-scale` token is a unitless multiplier for interactive control dimensions (buttons, inputs, selects, switches,
checkboxes, etc.). The default is `1`. Components reference derived size tokens `--k-size-sm`, `--k-size-md`, and
`--k-size-lg` which incorporate the scale:

```css
:root {
--k-scale: 0.9; /* compact controls, normal text */
}
```

Because `--k-scale` is a CSS custom property, you can scope it to any container:

```css
.compact-sidebar { --k-scale: 0.85; }
.spacious-hero { --k-scale: 1.1; }
```

This is independent of `font-size`—text stays at whatever size you set, while control dimensions scale separately. You
can also override the derived tokens directly if you need full control:

```css
:root {
--k-size-sm: 2rem;
--k-size-md: 2.25rem;
--k-size-lg: 2.5rem;
}
```
10 changes: 5 additions & 5 deletions src/components/button/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
/* Default size (when no size attribute or size="md") */
[k="button"]:not([size]),
[k="button"][size="md"] {
height: 2.5rem;
height: var(--k-size-md);
padding-left: 1rem;
padding-right: 1rem;
}
Expand Down Expand Up @@ -114,7 +114,7 @@

/* Size: sm */
[k="button"][size="sm"] {
height: 2.25rem;
height: var(--k-size-sm);
border-radius: calc(var(--k-radius) - 2px);
padding-left: 0.75rem;
padding-right: 0.75rem;
Expand All @@ -123,15 +123,15 @@

/* Size: lg */
[k="button"][size="lg"] {
height: 2.75rem;
height: var(--k-size-lg);
border-radius: calc(var(--k-radius) - 2px);
padding-left: 2rem;
padding-right: 2rem;
}

/* Size: icon */
[k="button"][size="icon"] {
height: 2.5rem;
width: 2.5rem;
height: var(--k-size-md);
width: var(--k-size-md);
padding: 0;
}
8 changes: 4 additions & 4 deletions src/components/checkbox/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

[k="checkbox"] {
appearance: none;
width: 1rem;
height: 1rem;
width: calc(1rem * var(--k-scale));
height: calc(1rem * var(--k-scale));
border: 1px solid hsl(var(--k-input));
border-radius: calc(var(--k-radius) - 2px);
background-color: hsl(var(--k-background));
Expand All @@ -16,8 +16,8 @@

[k="checkbox"]::before {
content: "";
width: 0.5rem;
height: 0.5rem;
width: calc(0.5rem * var(--k-scale));
height: calc(0.5rem * var(--k-scale));
transform: scale(0);
transition: transform 150ms cubic-bezier(0.4,0,0.2,1);
background-color: hsl(var(--k-foreground));
Expand Down
4 changes: 2 additions & 2 deletions src/components/color-picker/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

[k="color-picker"] {
appearance: none;
width: 2.5rem;
height: 2.5rem;
width: var(--k-size-md);
height: var(--k-size-md);
padding: 0.25rem;
border: 1px solid hsl(var(--k-input));
border-radius: var(--k-radius);
Expand Down
2 changes: 1 addition & 1 deletion src/components/dropdown-menu/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
border-radius: calc(var(--k-radius) - 0.125rem);
text-align: left;
padding: 0.5rem 0.75rem;
min-height: 2.375rem;
min-height: calc(2.375rem * var(--k-scale));
white-space: nowrap;
font: inherit;
font-size: 1.05rem;
Expand Down
6 changes: 3 additions & 3 deletions src/components/input/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
transition-duration: 150ms;

/* Default size */
height: 2.5rem;
height: var(--k-size-md);
padding-left: 0.75rem;
padding-right: 0.75rem;
}
Expand Down Expand Up @@ -45,7 +45,7 @@

/* Size: sm */
[k="input"][size="sm"] {
height: 2.25rem;
height: var(--k-size-sm);
border-radius: calc(var(--k-radius) - 2px);
padding-left: 0.5rem;
padding-right: 0.5rem;
Expand All @@ -54,7 +54,7 @@

/* Size: lg */
[k="input"][size="lg"] {
height: 2.75rem;
height: var(--k-size-lg);
padding-left: 1rem;
padding-right: 1rem;
}
8 changes: 4 additions & 4 deletions src/components/radio-group/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
[k="radio"] {
appearance: none;
margin: 0;
width: 1rem;
height: 1rem;
width: calc(1rem * var(--k-scale));
height: calc(1rem * var(--k-scale));
border-radius: 9999px;
border: 1px solid hsl(var(--k-input));
background-color: hsl(var(--k-background));
Expand All @@ -22,8 +22,8 @@

[k="radio"]::before {
content: "";
width: 0.5rem;
height: 0.5rem;
width: calc(0.5rem * var(--k-scale));
height: calc(0.5rem * var(--k-scale));
border-radius: 9999px;
background-color: hsl(var(--k-primary));
transform: scale(0);
Expand Down
2 changes: 1 addition & 1 deletion src/components/select/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
border-radius: var(--k-radius);
border: 1px solid hsl(var(--k-input));
background-color: hsl(var(--k-background));
height: 2.5rem;
height: var(--k-size-md);
padding-left: 0.75rem;
padding-right: 2rem;
font-size: 0.875rem;
Expand Down
14 changes: 7 additions & 7 deletions src/components/switch/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
appearance: none;
position: relative;
display: inline-block;
width: 2.625rem;
height: 1.375rem;
width: calc(2.625rem * var(--k-scale));
height: calc(1.375rem * var(--k-scale));
border-radius: 9999px;
background-color: hsl(var(--k-input));
border: 1px solid hsl(var(--k-input));
Expand All @@ -17,10 +17,10 @@
[k="switch"]::before {
content: "";
position: absolute;
top: 0.125rem;
left: 0.1875rem;
width: 1rem;
height: 1rem;
top: calc(0.125rem * var(--k-scale));
left: calc(0.1875rem * var(--k-scale));
width: calc(1rem * var(--k-scale));
height: calc(1rem * var(--k-scale));
border-radius: 9999px;
background-color: hsl(var(--k-background));
transition: transform 250ms var(--k-ease);
Expand All @@ -32,7 +32,7 @@
}

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

[k="switch"]:focus-visible {
Expand Down
2 changes: 1 addition & 1 deletion src/components/tabs/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.25rem;
height: var(--k-size-sm);
width: fit-content;
background: hsl(var(--k-muted));
color: hsl(var(--k-muted-foreground));
Expand Down
2 changes: 1 addition & 1 deletion src/components/textarea/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
background-color: hsl(var(--k-background));
font: inherit;
font-size: 0.875rem;
min-height: 2.5rem;
min-height: var(--k-size-md);
padding: 0.5rem 0.75rem;
resize: vertical;
transition-property: color, background-color, border-color, box-shadow;
Expand Down
8 changes: 8 additions & 0 deletions src/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,14 @@
/* Radius */
--k-radius: 0.5rem;

/* Control scale multiplier (unitless) */
--k-scale: 1;

/* Derived control sizes */
--k-size-sm: calc(2.25rem * var(--k-scale));
--k-size-md: calc(2.5rem * var(--k-scale));
--k-size-lg: calc(2.75rem * var(--k-scale));

--k-ease-fallback: cubic-bezier(0.4, 0, 0.2, 1);
--k-ease-out: var(--k-ease-fallback);
--k-ease-elastic: var(--k-ease-fallback);
Expand Down
Loading