From 566e48d7954cc7224c067aa37d779b88100c3123 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bence=20Toppant=C3=B3?= Date: Fri, 19 Jun 2026 13:00:54 +0200 Subject: [PATCH] feat(emotion): support alpha color modifier in applyColorModifiers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add handling for the Tokens Studio `alpha` modifier type, replacing a color's alpha channel with the given value (clamped to 0–1) while preserving its hue/saturation/lightness. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../emotion/src/styleUtils/applyColorModifiers.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/emotion/src/styleUtils/applyColorModifiers.ts b/packages/emotion/src/styleUtils/applyColorModifiers.ts index fc1948ea2a..c4b866eb6a 100644 --- a/packages/emotion/src/styleUtils/applyColorModifiers.ts +++ b/packages/emotion/src/styleUtils/applyColorModifiers.ts @@ -26,7 +26,7 @@ import { colorToHsla } from '@instructure/ui-color-utils' type ModifyColor = { value: string modify: { - type: 'lighten' | 'darken' + type: 'lighten' | 'darken' | 'alpha' value: number } } @@ -65,6 +65,11 @@ const resolveModifyColor = ({ value, modify }: ModifyColor): string => { const newL = modifyLightness(l, modify.value, modify.type) return formatHsla(h, s, newL, a) } + if (modify.type === 'alpha') { + const { h, s, l } = colorToHsla(value) + const newA = Math.min(1, Math.max(0, Number(modify.value))) + return formatHsla(h, s, l, newA) + } return value } @@ -73,9 +78,11 @@ const resolveModifyColor = ({ value, modify }: ModifyColor): string => { * shaped as `{ value, modify: { type, value } }`. Entries with `modify.type` of * `'darken'` or `'lighten'` are transformed in HSL space using the same math * Tokens Studio applies (`space: "hsl"`): `amount` is a 0–1 fraction of the - * remaining distance to black/white. Plain values and unrecognized modifier - * types are passed through unchanged. Nested plain objects are walked - * recursively so modifiers anywhere in the tree get resolved. + * remaining distance to black/white. Entries with `modify.type` of `'alpha'` + * have their alpha channel replaced by `modify.value` (clamped to 0–1), matching + * Tokens Studio's `alpha` modifier. Plain values and unrecognized modifier types + * are passed through unchanged. Nested plain objects are walked recursively so + * modifiers anywhere in the tree get resolved. * * @param componentTheme - Theme map whose values can be CSS strings, `ModifyColor` * objects, or nested theme objects containing the same.