Skip to content

css: resolve relative color channel keywords as numbers in the function's range #38553

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

Closed
robobun wants to merge 6 commits into from
Closed

css: resolve relative color channel keywords as numbers in the function's range #38553

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1d65d91
css: resolve relative color channel keywords as numbers in the functi…
robobun Aug 14, 2026
5e991f4
css: name the relative color scale factor after upstream's percent basis
robobun Aug 14, 2026
665179f
css: trim the relative color comments to the ones that explain something
robobun Aug 14, 2026
0a4db97
css: shorten the remaining relative color doc comments
robobun Aug 14, 2026
be7ca3d
css: scale keywords into the channel's basis in the relative percenta…
robobun Aug 14, 2026
9ecdaf2
ci: retrigger
robobun Aug 15, 2026
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
12 changes: 7 additions & 5 deletions docs/bundler/css.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,20 +131,22 @@ Relative color syntax modifies individual components of an existing color. Adjus

```css title="styles.css" icon="file-code"
.theme-color {
/* Start with a base color and increase lightness by 15% */
--accent: lch(from purple calc(l + 15%) c h);
/* Start with a base color and add 15 to its lightness, which runs from 0 to 100 */
--accent: lch(from purple calc(l + 15) c h);

/* Take our brand blue and make a desaturated version */
--subtle-blue: oklch(from var(--brand-blue) l calc(c * 0.8) h);
}
```

Bun's CSS bundler computes these relative color modifications at build time (when not using CSS variables) and generates static color values for browser compatibility:
The channel keywords (`l`, `c`, `h`, `r`, `alpha`, ...) are numbers in the range the color function itself uses: `rgb()` channels run from 0 to 255, `hsl()` saturation and lightness and `lab()`/`lch()` lightness from 0 to 100, `oklab()`/`oklch()` lightness and `alpha` from 0 to 1.

Bun's CSS bundler computes these relative color modifications at build time when the origin color is known, and leaves the ones that depend on CSS variables for the browser:

```css
.theme-color {
--accent: lch(69.32% 58.34 328.37);
--subtle-blue: oklch(60.92% 0.112 240.01);
--accent: lch(44.6915% 66.8257 327.105);
--subtle-blue: oklch(from var(--brand-blue) l calc(c * 0.8) h);
}
```

Expand Down
Loading