@cdx-ui/styles 0.0.1-beta.59 → 0.0.1-beta.60
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.
- package/lib/commonjs/index.js +6 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/palette.js +83 -1
- package/lib/commonjs/palette.js.map +1 -1
- package/lib/commonjs/theming.js +39 -2
- package/lib/commonjs/theming.js.map +1 -1
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/palette.js +82 -1
- package/lib/module/palette.js.map +1 -1
- package/lib/module/theming.js +39 -2
- package/lib/module/theming.js.map +1 -1
- package/lib/typescript/index.d.ts +1 -1
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/palette.d.ts +13 -1
- package/lib/typescript/palette.d.ts.map +1 -1
- package/lib/typescript/theming.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/__tests__/applyThemeOverride.test.ts +64 -0
- package/src/__tests__/generateColorScale.test.ts +95 -1
- package/src/__tests__/theming.test.ts +122 -0
- package/src/index.ts +1 -1
- package/src/palette.ts +82 -1
- package/src/theming.ts +40 -2
package/lib/commonjs/index.js
CHANGED
|
@@ -33,6 +33,12 @@ Object.defineProperty(exports, "applyThemeOverride", {
|
|
|
33
33
|
return _theming.applyThemeOverride;
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
|
+
Object.defineProperty(exports, "deriveBaseColorKey", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () {
|
|
39
|
+
return _palette.deriveBaseColorKey;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
36
42
|
Object.defineProperty(exports, "generateColorScale", {
|
|
37
43
|
enumerable: true,
|
|
38
44
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_types","require","_palette","_theming","_useForgeFonts","_useCdxFonts"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_types","require","_palette","_theming","_useForgeFonts","_useCdxFonts"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAsBA,IAAAC,QAAA,GAAAD,OAAA;AAOA,IAAAE,QAAA,GAAAF,OAAA;AAcA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA","ignoreList":[]}
|
package/lib/commonjs/palette.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.deriveBaseColorKey = deriveBaseColorKey;
|
|
6
7
|
exports.generateColorScale = generateColorScale;
|
|
7
8
|
exports.generatePalettesFromInputs = generatePalettesFromInputs;
|
|
8
9
|
var _leonardoContrastColors = require("@adobe/leonardo-contrast-colors");
|
|
@@ -128,6 +129,87 @@ function generateColorScale(hex, category) {
|
|
|
128
129
|
return result;
|
|
129
130
|
}
|
|
130
131
|
|
|
132
|
+
// ---------------------------------------------------------------------------
|
|
133
|
+
// Base color-key derivation
|
|
134
|
+
// ---------------------------------------------------------------------------
|
|
135
|
+
|
|
136
|
+
/** Saturation (0–1) applied to the brand hue to produce the base color key. */
|
|
137
|
+
const BASE_SATURATION = 0.05;
|
|
138
|
+
|
|
139
|
+
/** Convert a normalised hex string to HSL (`h` in degrees, `s`/`l` in 0–1). */
|
|
140
|
+
function hexToHsl(hex) {
|
|
141
|
+
const r = parseInt(hex.slice(1, 3), 16) / 255;
|
|
142
|
+
const g = parseInt(hex.slice(3, 5), 16) / 255;
|
|
143
|
+
const b = parseInt(hex.slice(5, 7), 16) / 255;
|
|
144
|
+
const max = Math.max(r, g, b);
|
|
145
|
+
const min = Math.min(r, g, b);
|
|
146
|
+
const delta = max - min;
|
|
147
|
+
const l = (max + min) / 2;
|
|
148
|
+
let h = 0;
|
|
149
|
+
let s = 0;
|
|
150
|
+
if (delta !== 0) {
|
|
151
|
+
s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
|
|
152
|
+
switch (max) {
|
|
153
|
+
case r:
|
|
154
|
+
h = (g - b) / delta + (g < b ? 6 : 0);
|
|
155
|
+
break;
|
|
156
|
+
case g:
|
|
157
|
+
h = (b - r) / delta + 2;
|
|
158
|
+
break;
|
|
159
|
+
default:
|
|
160
|
+
h = (r - g) / delta + 4;
|
|
161
|
+
break;
|
|
162
|
+
}
|
|
163
|
+
h *= 60;
|
|
164
|
+
}
|
|
165
|
+
return {
|
|
166
|
+
h,
|
|
167
|
+
s,
|
|
168
|
+
l
|
|
169
|
+
};
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/** Convert HSL (`h` in degrees, `s`/`l` in 0–1) to a normalised hex string. */
|
|
173
|
+
function hslToHex({
|
|
174
|
+
h,
|
|
175
|
+
s,
|
|
176
|
+
l
|
|
177
|
+
}) {
|
|
178
|
+
const c = (1 - Math.abs(2 * l - 1)) * s;
|
|
179
|
+
const hp = (h % 360 + 360) % 360 / 60;
|
|
180
|
+
const x = c * (1 - Math.abs(hp % 2 - 1));
|
|
181
|
+
let r = 0;
|
|
182
|
+
let g = 0;
|
|
183
|
+
let b = 0;
|
|
184
|
+
if (hp < 1) [r, g, b] = [c, x, 0];else if (hp < 2) [r, g, b] = [x, c, 0];else if (hp < 3) [r, g, b] = [0, c, x];else if (hp < 4) [r, g, b] = [0, x, c];else if (hp < 5) [r, g, b] = [x, 0, c];else [r, g, b] = [c, 0, x];
|
|
185
|
+
const m = l - c / 2;
|
|
186
|
+
const toHex = v => Math.round((v + m) * 255).toString(16).padStart(2, '0');
|
|
187
|
+
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/**
|
|
191
|
+
* Derive the base palette color key from a brand color.
|
|
192
|
+
*
|
|
193
|
+
* The base scale shares the brand's hue and lightness but is nearly neutral:
|
|
194
|
+
* the brand color is converted to HSL and its saturation is lowered to
|
|
195
|
+
* {@link BASE_SATURATION} (5%). The resulting hex is the color key fed to
|
|
196
|
+
* {@link generateColorScale} for the `base` category.
|
|
197
|
+
*
|
|
198
|
+
* @param brandHex - A valid hex color string (`#RGB` or `#RRGGBB`).
|
|
199
|
+
* @returns The normalised hex color key for the base scale.
|
|
200
|
+
*/
|
|
201
|
+
function deriveBaseColorKey(brandHex) {
|
|
202
|
+
const {
|
|
203
|
+
h,
|
|
204
|
+
l
|
|
205
|
+
} = hexToHsl(validateHex(brandHex));
|
|
206
|
+
return hslToHex({
|
|
207
|
+
h,
|
|
208
|
+
s: BASE_SATURATION,
|
|
209
|
+
l
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
|
|
131
213
|
// ---------------------------------------------------------------------------
|
|
132
214
|
// Convenience wrapper
|
|
133
215
|
// ---------------------------------------------------------------------------
|
|
@@ -139,7 +221,7 @@ function generateColorScale(hex, category) {
|
|
|
139
221
|
*
|
|
140
222
|
* Keep in sync with `INPUT_TOKEN_MAP` in `./index.ts`.
|
|
141
223
|
*/
|
|
142
|
-
const COLOR_INPUT_ENTRIES = [['brandPrimary', 'color.brand'], ['accentPrimary', 'color.accent']];
|
|
224
|
+
const COLOR_INPUT_ENTRIES = [['brandPrimary', 'color.brand'], ['accentPrimary', 'color.accent'], ['basePrimary', 'color.base']];
|
|
143
225
|
|
|
144
226
|
/**
|
|
145
227
|
* Generate palettes for all colour inputs in a theme override `inputs` object.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_leonardoContrastColors","require","REFERENCE_BACKGROUND","PALETTE_STEPS","CONTRAST_RATIOS","HEX_REGEX","validateHex","hex","TypeError","test","length","r","g","b","toLowerCase","generateColorScale","category","normalised","ratiosObject","step","color","Color","name","colorKeys","colorSpace","ratios","smooth","output","bg","BackgroundColor","theme","Theme","colors","backgroundColor","lightness","contrast","saturation","formula","pairs","contrastColorPairs","tokenPrefix","result","COLOR_INPUT_ENTRIES","generatePalettesFromInputs","inputs","inputKey","tokenPath","value","replace","scale","Object","assign"],"sourceRoot":"../../src","sources":["palette.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_leonardoContrastColors","require","REFERENCE_BACKGROUND","PALETTE_STEPS","CONTRAST_RATIOS","HEX_REGEX","validateHex","hex","TypeError","test","length","r","g","b","toLowerCase","generateColorScale","category","normalised","ratiosObject","step","color","Color","name","colorKeys","colorSpace","ratios","smooth","output","bg","BackgroundColor","theme","Theme","colors","backgroundColor","lightness","contrast","saturation","formula","pairs","contrastColorPairs","tokenPrefix","result","BASE_SATURATION","hexToHsl","parseInt","slice","max","Math","min","delta","l","h","s","hslToHex","c","abs","hp","x","m","toHex","v","round","toString","padStart","deriveBaseColorKey","brandHex","COLOR_INPUT_ENTRIES","generatePalettesFromInputs","inputs","inputKey","tokenPath","value","replace","scale","Object","assign"],"sourceRoot":"../../src","sources":["palette.ts"],"mappings":"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","ignoreList":[]}
|
package/lib/commonjs/theming.js
CHANGED
|
@@ -137,6 +137,39 @@ function presetPatchToUniwindMaps(patch, runtimeMap, runtimePlatform) {
|
|
|
137
137
|
*/
|
|
138
138
|
const FONT_INPUT_ENTRIES = Object.entries(_types.INPUT_TOKEN_MAP).filter(([, tokenPath]) => !tokenPath.startsWith('color.'));
|
|
139
139
|
|
|
140
|
+
/**
|
|
141
|
+
* Matches a token-reference alias value such as `{color.brand.700}` and
|
|
142
|
+
* captures the referenced token dot-path.
|
|
143
|
+
*/
|
|
144
|
+
const TOKEN_ALIAS_REGEX = /^\{([^}]+)\}$/;
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Resolve an `overrides.{mode}` value into the string written to the CSS
|
|
148
|
+
* variable map.
|
|
149
|
+
*
|
|
150
|
+
* - **Token-reference alias** (`{color.brand.700}`) → resolves the referenced
|
|
151
|
+
* token path via the runtime map and returns a CSS `var()` reference
|
|
152
|
+
* (`var(--color-brand-700)`), so the override tracks its source through the
|
|
153
|
+
* cascade — the same mechanism the base theme uses for its semantic tokens.
|
|
154
|
+
* Returns `null` when the referenced path is absent from the runtime map
|
|
155
|
+
* (e.g. a non-primitive target), so the caller skips it; this enforces the
|
|
156
|
+
* primitive-only alias constraint at the resolution layer.
|
|
157
|
+
* - **Literal value** (`#F5F7F6`, `8`) → returned as-is (stringified).
|
|
158
|
+
*
|
|
159
|
+
* @see docs/internal/token-architecture/16-override-structure.md — Token-reference aliases vs. literal values
|
|
160
|
+
*/
|
|
161
|
+
function resolveOverrideValue(value, runtimeMap) {
|
|
162
|
+
if (typeof value === 'string') {
|
|
163
|
+
const aliasMatch = TOKEN_ALIAS_REGEX.exec(value);
|
|
164
|
+
if (aliasMatch) {
|
|
165
|
+
const referencedPath = aliasMatch[1].trim();
|
|
166
|
+
const targetCssVar = runtimeMap[referencedPath];
|
|
167
|
+
return targetCssVar ? `var(${targetCssVar})` : null;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
return String(value);
|
|
171
|
+
}
|
|
172
|
+
|
|
140
173
|
/**
|
|
141
174
|
* Convert a hybrid FI override (`ThemeOverride`) into per-mode CSS variable
|
|
142
175
|
* maps suitable for `Uniwind.updateCSSVariables`.
|
|
@@ -200,13 +233,17 @@ function themeOverrideToUniwindMaps(override, runtimeMap
|
|
|
200
233
|
if (cssVar) bucket[cssVar] = value;
|
|
201
234
|
}
|
|
202
235
|
|
|
203
|
-
// 3. Explicit per-mode overrides (wins on collision)
|
|
236
|
+
// 3. Explicit per-mode overrides (wins on collision). Values may be
|
|
237
|
+
// token-reference aliases (resolved to a CSS var() reference) or
|
|
238
|
+
// literals; see resolveOverrideValue.
|
|
204
239
|
const modeOverrides = overrides?.[mode];
|
|
205
240
|
if (modeOverrides) {
|
|
206
241
|
for (const [dotPath, value] of Object.entries(modeOverrides)) {
|
|
207
242
|
const modePrefixed = `modes.${mode}.${dotPath}`;
|
|
208
243
|
const cssVar = runtimeMap[modePrefixed] ?? runtimeMap[dotPath];
|
|
209
|
-
if (cssVar)
|
|
244
|
+
if (!cssVar) continue;
|
|
245
|
+
const resolved = resolveOverrideValue(value, runtimeMap);
|
|
246
|
+
if (resolved !== null) bucket[cssVar] = resolved;
|
|
210
247
|
}
|
|
211
248
|
}
|
|
212
249
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_palette","require","_types","_applyThemeOverride","isSchemaVersionSupported","override","version","$extensions","schemaVersion","SUPPORTED_OVERRIDE_SCHEMA_VERSIONS","includes","isTokenValue","node","flattenDtcg","prefix","result","key","Object","keys","startsWith","child","path","$value","bucketByMode","flatTokens","runtimeMap","runtimePlatform","light","dark","dotPath","value","entries","strValue","String","cssVar","segments","split","platform","presetPatchToUniwindMaps","patch","flat","FONT_INPUT_ENTRIES","INPUT_TOKEN_MAP","filter","tokenPath","themeOverrideToUniwindMaps","inputs","overrides","paletteTokens","generatePalettesFromInputs","fontTokens","inputKey","undefined","modes","mode","bucket","hexValue","modePrefixed","modeOverrides"],"sourceRoot":"../../src","sources":["theming.ts"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["_palette","require","_types","_applyThemeOverride","isSchemaVersionSupported","override","version","$extensions","schemaVersion","SUPPORTED_OVERRIDE_SCHEMA_VERSIONS","includes","isTokenValue","node","flattenDtcg","prefix","result","key","Object","keys","startsWith","child","path","$value","bucketByMode","flatTokens","runtimeMap","runtimePlatform","light","dark","dotPath","value","entries","strValue","String","cssVar","segments","split","platform","presetPatchToUniwindMaps","patch","flat","FONT_INPUT_ENTRIES","INPUT_TOKEN_MAP","filter","tokenPath","TOKEN_ALIAS_REGEX","resolveOverrideValue","aliasMatch","exec","referencedPath","trim","targetCssVar","themeOverrideToUniwindMaps","inputs","overrides","paletteTokens","generatePalettesFromInputs","fontTokens","inputKey","undefined","modes","mode","bucket","hexValue","modePrefixed","modeOverrides","resolved"],"sourceRoot":"../../src","sources":["theming.ts"],"mappings":"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","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -9,7 +9,7 @@ export { OVERRIDE_SCHEMA_VERSION, SUPPORTED_OVERRIDE_SCHEMA_VERSIONS, INPUT_TOKE
|
|
|
9
9
|
// Palette generation
|
|
10
10
|
// ---------------------------------------------------------------------------
|
|
11
11
|
|
|
12
|
-
export { generateColorScale, generatePalettesFromInputs } from './palette';
|
|
12
|
+
export { generateColorScale, generatePalettesFromInputs, deriveBaseColorKey } from './palette';
|
|
13
13
|
// ---------------------------------------------------------------------------
|
|
14
14
|
// Theming utilities
|
|
15
15
|
// ---------------------------------------------------------------------------
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["OVERRIDE_SCHEMA_VERSION","SUPPORTED_OVERRIDE_SCHEMA_VERSIONS","INPUT_TOKEN_MAP","presetFonts","generateColorScale","generatePalettesFromInputs","isSchemaVersionSupported","presetPatchToUniwindMaps","themeOverrideToUniwindMaps","applyThemeOverride","DEFAULT_PRESET","useForgeFonts","useCdxFonts"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA;AACA;;AAEA,SACEA,uBAAuB,EACvBC,kCAAkC,EAClCC,eAAe,EACfC,WAAW,QACN,SAAS;AAahB;AACA;AACA;;AAEA,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,WAAW;
|
|
1
|
+
{"version":3,"names":["OVERRIDE_SCHEMA_VERSION","SUPPORTED_OVERRIDE_SCHEMA_VERSIONS","INPUT_TOKEN_MAP","presetFonts","generateColorScale","generatePalettesFromInputs","deriveBaseColorKey","isSchemaVersionSupported","presetPatchToUniwindMaps","themeOverrideToUniwindMaps","applyThemeOverride","DEFAULT_PRESET","useForgeFonts","useCdxFonts"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA;AACA;;AAEA,SACEA,uBAAuB,EACvBC,kCAAkC,EAClCC,eAAe,EACfC,WAAW,QACN,SAAS;AAahB;AACA;AACA;;AAEA,SAASC,kBAAkB,EAAEC,0BAA0B,EAAEC,kBAAkB,QAAQ,WAAW;AAG9F;AACA;AACA;;AAEA,SACEC,wBAAwB,EACxBC,wBAAwB,EACxBC,0BAA0B,EAC1BC,kBAAkB,EAClBC,cAAc,QACT,WAAW;AAIlB;AACA;AACA;;AAEA,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,WAAW,QAAQ,eAAe","ignoreList":[]}
|
package/lib/module/palette.js
CHANGED
|
@@ -124,6 +124,87 @@ export function generateColorScale(hex, category) {
|
|
|
124
124
|
return result;
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
+
// ---------------------------------------------------------------------------
|
|
128
|
+
// Base color-key derivation
|
|
129
|
+
// ---------------------------------------------------------------------------
|
|
130
|
+
|
|
131
|
+
/** Saturation (0–1) applied to the brand hue to produce the base color key. */
|
|
132
|
+
const BASE_SATURATION = 0.05;
|
|
133
|
+
|
|
134
|
+
/** Convert a normalised hex string to HSL (`h` in degrees, `s`/`l` in 0–1). */
|
|
135
|
+
function hexToHsl(hex) {
|
|
136
|
+
const r = parseInt(hex.slice(1, 3), 16) / 255;
|
|
137
|
+
const g = parseInt(hex.slice(3, 5), 16) / 255;
|
|
138
|
+
const b = parseInt(hex.slice(5, 7), 16) / 255;
|
|
139
|
+
const max = Math.max(r, g, b);
|
|
140
|
+
const min = Math.min(r, g, b);
|
|
141
|
+
const delta = max - min;
|
|
142
|
+
const l = (max + min) / 2;
|
|
143
|
+
let h = 0;
|
|
144
|
+
let s = 0;
|
|
145
|
+
if (delta !== 0) {
|
|
146
|
+
s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
|
|
147
|
+
switch (max) {
|
|
148
|
+
case r:
|
|
149
|
+
h = (g - b) / delta + (g < b ? 6 : 0);
|
|
150
|
+
break;
|
|
151
|
+
case g:
|
|
152
|
+
h = (b - r) / delta + 2;
|
|
153
|
+
break;
|
|
154
|
+
default:
|
|
155
|
+
h = (r - g) / delta + 4;
|
|
156
|
+
break;
|
|
157
|
+
}
|
|
158
|
+
h *= 60;
|
|
159
|
+
}
|
|
160
|
+
return {
|
|
161
|
+
h,
|
|
162
|
+
s,
|
|
163
|
+
l
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/** Convert HSL (`h` in degrees, `s`/`l` in 0–1) to a normalised hex string. */
|
|
168
|
+
function hslToHex({
|
|
169
|
+
h,
|
|
170
|
+
s,
|
|
171
|
+
l
|
|
172
|
+
}) {
|
|
173
|
+
const c = (1 - Math.abs(2 * l - 1)) * s;
|
|
174
|
+
const hp = (h % 360 + 360) % 360 / 60;
|
|
175
|
+
const x = c * (1 - Math.abs(hp % 2 - 1));
|
|
176
|
+
let r = 0;
|
|
177
|
+
let g = 0;
|
|
178
|
+
let b = 0;
|
|
179
|
+
if (hp < 1) [r, g, b] = [c, x, 0];else if (hp < 2) [r, g, b] = [x, c, 0];else if (hp < 3) [r, g, b] = [0, c, x];else if (hp < 4) [r, g, b] = [0, x, c];else if (hp < 5) [r, g, b] = [x, 0, c];else [r, g, b] = [c, 0, x];
|
|
180
|
+
const m = l - c / 2;
|
|
181
|
+
const toHex = v => Math.round((v + m) * 255).toString(16).padStart(2, '0');
|
|
182
|
+
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/**
|
|
186
|
+
* Derive the base palette color key from a brand color.
|
|
187
|
+
*
|
|
188
|
+
* The base scale shares the brand's hue and lightness but is nearly neutral:
|
|
189
|
+
* the brand color is converted to HSL and its saturation is lowered to
|
|
190
|
+
* {@link BASE_SATURATION} (5%). The resulting hex is the color key fed to
|
|
191
|
+
* {@link generateColorScale} for the `base` category.
|
|
192
|
+
*
|
|
193
|
+
* @param brandHex - A valid hex color string (`#RGB` or `#RRGGBB`).
|
|
194
|
+
* @returns The normalised hex color key for the base scale.
|
|
195
|
+
*/
|
|
196
|
+
export function deriveBaseColorKey(brandHex) {
|
|
197
|
+
const {
|
|
198
|
+
h,
|
|
199
|
+
l
|
|
200
|
+
} = hexToHsl(validateHex(brandHex));
|
|
201
|
+
return hslToHex({
|
|
202
|
+
h,
|
|
203
|
+
s: BASE_SATURATION,
|
|
204
|
+
l
|
|
205
|
+
});
|
|
206
|
+
}
|
|
207
|
+
|
|
127
208
|
// ---------------------------------------------------------------------------
|
|
128
209
|
// Convenience wrapper
|
|
129
210
|
// ---------------------------------------------------------------------------
|
|
@@ -135,7 +216,7 @@ export function generateColorScale(hex, category) {
|
|
|
135
216
|
*
|
|
136
217
|
* Keep in sync with `INPUT_TOKEN_MAP` in `./index.ts`.
|
|
137
218
|
*/
|
|
138
|
-
const COLOR_INPUT_ENTRIES = [['brandPrimary', 'color.brand'], ['accentPrimary', 'color.accent']];
|
|
219
|
+
const COLOR_INPUT_ENTRIES = [['brandPrimary', 'color.brand'], ['accentPrimary', 'color.accent'], ['basePrimary', 'color.base']];
|
|
139
220
|
|
|
140
221
|
/**
|
|
141
222
|
* Generate palettes for all colour inputs in a theme override `inputs` object.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["BackgroundColor","Color","Theme","REFERENCE_BACKGROUND","PALETTE_STEPS","CONTRAST_RATIOS","HEX_REGEX","validateHex","hex","TypeError","test","length","r","g","b","toLowerCase","generateColorScale","category","normalised","ratiosObject","step","color","name","colorKeys","colorSpace","ratios","smooth","output","bg","theme","colors","backgroundColor","lightness","contrast","saturation","formula","pairs","contrastColorPairs","tokenPrefix","result","COLOR_INPUT_ENTRIES","generatePalettesFromInputs","inputs","inputKey","tokenPath","value","replace","scale","Object","assign"],"sourceRoot":"../../src","sources":["palette.ts"],"mappings":";;AAAA,SAASA,eAAe,EAAEC,KAAK,EAAEC,KAAK,QAAuB,iCAAiC;;AAE9F;AACA;AACA;;AAEA;;AAeA;;AAGA;;AAGA;;AAGA;AACA;AACA;;AAEA,MAAMC,oBAAoB,GAAG,SAAS;AAEtC,MAAMC,aAAa,GAAG,CACpB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,CACG;;AAEV;AACA;AACA;AACA;AACA;AACA,MAAMC,eAA+D,GAAG;EACtE,IAAI,EAAE,IAAI;EACV,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,EAAE;EACT,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,SAAS,GAAG,+BAA+B;;AAEjD;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,WAAWA,CAACC,GAAW,EAAY;EAC1C,IAAI,OAAOA,GAAG,KAAK,QAAQ,EAAE;IAC3B,MAAM,IAAIC,SAAS,CAAC,kDAAkD,OAAOD,GAAG,EAAE,CAAC;EACrF;EAEA,IAAI,CAACF,SAAS,CAACI,IAAI,CAACF,GAAG,CAAC,EAAE;IACxB,MAAM,IAAIC,SAAS,CACjB,sBAAsBD,GAAG,uFAC3B,CAAC;EACH;EAEA,IAAIA,GAAG,CAACG,MAAM,KAAK,CAAC,EAAE;IACpB,MAAM,GAAGC,CAAC,EAAEC,CAAC,EAAEC,CAAC,CAAC,GAAGN,GAAG;IACvB,OAAO,IAAII,CAAC,GAAGA,CAAC,GAAGC,CAAC,GAAGA,CAAC,GAAGC,CAAC,GAAGA,CAAC,EAAE,CAACC,WAAW,CAAC,CAAC;EAClD;EAEA,OAAOP,GAAG,CAACO,WAAW,CAAC,CAAC;AAC1B;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAACR,GAAW,EAAES,QAAyB,EAAmB;EAC1F,MAAMC,UAAU,GAAGX,WAAW,CAACC,GAAG,CAAC;EAEnC,MAAMW,YAAoC,GAAG,CAAC,CAAC;EAC/C,KAAK,MAAMC,IAAI,IAAIhB,aAAa,EAAE;IAChCe,YAAY,CAACC,IAAI,CAAC,GAAGf,eAAe,CAACe,IAAI,CAAC;EAC5C;EAEA,MAAMC,KAAK,GAAG,IAAIpB,KAAK,CAAC;IACtBqB,IAAI,EAAE,SAAS;IACfC,SAAS,EAAE,CAACL,UAAU,CAAC;IACvBM,UAAU,EAAE,QAAQ;IACpBC,MAAM,EAAEN,YAAY;IACpBO,MAAM,EAAE,IAAI;IACZC,MAAM,EAAE;EACV,CAAC,CAAC;EAEF,MAAMC,EAAE,GAAG,IAAI5B,eAAe,CAAC;IAC7BsB,IAAI,EAAE,YAAY;IAClBC,SAAS,EAAE,CAACpB,oBAAoB,CAAC;IACjCqB,UAAU,EAAE,QAAQ;IACpBE,MAAM,EAAE,IAAI;IACZD,MAAM,EAAE,EAAE;IACVE,MAAM,EAAE;EACV,CAAC,CAAC;EAEF,MAAME,KAAK,GAAG,IAAI3B,KAAK,CAAC;IACtB4B,MAAM,EAAE,CAACT,KAAK,CAAC;IACfU,eAAe,EAAEH,EAAE;IACnBI,SAAS,EAAE,GAAG;IACdC,QAAQ,EAAE,CAAC;IACXC,UAAU,EAAE,GAAG;IACfP,MAAM,EAAE,KAAK;IACbQ,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,MAAMC,KAAK,GAAGP,KAAK,CAACQ,kBAAkB;EAEtC,MAAMC,WAAW,GAAG,SAASrB,QAAQ,EAAE;EACvC,MAAMsB,MAAuB,GAAG,CAAC,CAAC;EAElC,KAAK,MAAMnB,IAAI,IAAIhB,aAAa,EAAE;IAChCmC,MAAM,CAAC,GAAGD,WAAW,IAAIlB,IAAI,EAAE,CAAC,GAAGgB,KAAK,CAAChB,IAAI,CAAC,CAACL,WAAW,CAAC,CAAC;EAC9D;EAEAwB,MAAM,CAAC,GAAGD,WAAW,QAAQ,CAAC,GAAGpB,UAAU;EAE3C,OAAOqB,MAAM;AACf;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,
|
|
1
|
+
{"version":3,"names":["BackgroundColor","Color","Theme","REFERENCE_BACKGROUND","PALETTE_STEPS","CONTRAST_RATIOS","HEX_REGEX","validateHex","hex","TypeError","test","length","r","g","b","toLowerCase","generateColorScale","category","normalised","ratiosObject","step","color","name","colorKeys","colorSpace","ratios","smooth","output","bg","theme","colors","backgroundColor","lightness","contrast","saturation","formula","pairs","contrastColorPairs","tokenPrefix","result","BASE_SATURATION","hexToHsl","parseInt","slice","max","Math","min","delta","l","h","s","hslToHex","c","abs","hp","x","m","toHex","v","round","toString","padStart","deriveBaseColorKey","brandHex","COLOR_INPUT_ENTRIES","generatePalettesFromInputs","inputs","inputKey","tokenPath","value","replace","scale","Object","assign"],"sourceRoot":"../../src","sources":["palette.ts"],"mappings":"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","ignoreList":[]}
|
package/lib/module/theming.js
CHANGED
|
@@ -121,6 +121,39 @@ export function presetPatchToUniwindMaps(patch, runtimeMap, runtimePlatform) {
|
|
|
121
121
|
*/
|
|
122
122
|
const FONT_INPUT_ENTRIES = Object.entries(INPUT_TOKEN_MAP).filter(([, tokenPath]) => !tokenPath.startsWith('color.'));
|
|
123
123
|
|
|
124
|
+
/**
|
|
125
|
+
* Matches a token-reference alias value such as `{color.brand.700}` and
|
|
126
|
+
* captures the referenced token dot-path.
|
|
127
|
+
*/
|
|
128
|
+
const TOKEN_ALIAS_REGEX = /^\{([^}]+)\}$/;
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* Resolve an `overrides.{mode}` value into the string written to the CSS
|
|
132
|
+
* variable map.
|
|
133
|
+
*
|
|
134
|
+
* - **Token-reference alias** (`{color.brand.700}`) → resolves the referenced
|
|
135
|
+
* token path via the runtime map and returns a CSS `var()` reference
|
|
136
|
+
* (`var(--color-brand-700)`), so the override tracks its source through the
|
|
137
|
+
* cascade — the same mechanism the base theme uses for its semantic tokens.
|
|
138
|
+
* Returns `null` when the referenced path is absent from the runtime map
|
|
139
|
+
* (e.g. a non-primitive target), so the caller skips it; this enforces the
|
|
140
|
+
* primitive-only alias constraint at the resolution layer.
|
|
141
|
+
* - **Literal value** (`#F5F7F6`, `8`) → returned as-is (stringified).
|
|
142
|
+
*
|
|
143
|
+
* @see docs/internal/token-architecture/16-override-structure.md — Token-reference aliases vs. literal values
|
|
144
|
+
*/
|
|
145
|
+
function resolveOverrideValue(value, runtimeMap) {
|
|
146
|
+
if (typeof value === 'string') {
|
|
147
|
+
const aliasMatch = TOKEN_ALIAS_REGEX.exec(value);
|
|
148
|
+
if (aliasMatch) {
|
|
149
|
+
const referencedPath = aliasMatch[1].trim();
|
|
150
|
+
const targetCssVar = runtimeMap[referencedPath];
|
|
151
|
+
return targetCssVar ? `var(${targetCssVar})` : null;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
return String(value);
|
|
155
|
+
}
|
|
156
|
+
|
|
124
157
|
/**
|
|
125
158
|
* Convert a hybrid FI override (`ThemeOverride`) into per-mode CSS variable
|
|
126
159
|
* maps suitable for `Uniwind.updateCSSVariables`.
|
|
@@ -184,13 +217,17 @@ export function themeOverrideToUniwindMaps(override, runtimeMap
|
|
|
184
217
|
if (cssVar) bucket[cssVar] = value;
|
|
185
218
|
}
|
|
186
219
|
|
|
187
|
-
// 3. Explicit per-mode overrides (wins on collision)
|
|
220
|
+
// 3. Explicit per-mode overrides (wins on collision). Values may be
|
|
221
|
+
// token-reference aliases (resolved to a CSS var() reference) or
|
|
222
|
+
// literals; see resolveOverrideValue.
|
|
188
223
|
const modeOverrides = overrides?.[mode];
|
|
189
224
|
if (modeOverrides) {
|
|
190
225
|
for (const [dotPath, value] of Object.entries(modeOverrides)) {
|
|
191
226
|
const modePrefixed = `modes.${mode}.${dotPath}`;
|
|
192
227
|
const cssVar = runtimeMap[modePrefixed] ?? runtimeMap[dotPath];
|
|
193
|
-
if (cssVar)
|
|
228
|
+
if (!cssVar) continue;
|
|
229
|
+
const resolved = resolveOverrideValue(value, runtimeMap);
|
|
230
|
+
if (resolved !== null) bucket[cssVar] = resolved;
|
|
194
231
|
}
|
|
195
232
|
}
|
|
196
233
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["generatePalettesFromInputs","INPUT_TOKEN_MAP","SUPPORTED_OVERRIDE_SCHEMA_VERSIONS","applyThemeOverride","DEFAULT_PRESET","isSchemaVersionSupported","override","version","$extensions","schemaVersion","includes","isTokenValue","node","flattenDtcg","prefix","result","key","Object","keys","startsWith","child","path","$value","bucketByMode","flatTokens","runtimeMap","runtimePlatform","light","dark","dotPath","value","entries","strValue","String","cssVar","segments","split","platform","presetPatchToUniwindMaps","patch","flat","FONT_INPUT_ENTRIES","filter","tokenPath","themeOverrideToUniwindMaps","inputs","overrides","paletteTokens","fontTokens","inputKey","undefined","modes","mode","bucket","hexValue","modePrefixed","modeOverrides"],"sourceRoot":"../../src","sources":["theming.ts"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["generatePalettesFromInputs","INPUT_TOKEN_MAP","SUPPORTED_OVERRIDE_SCHEMA_VERSIONS","applyThemeOverride","DEFAULT_PRESET","isSchemaVersionSupported","override","version","$extensions","schemaVersion","includes","isTokenValue","node","flattenDtcg","prefix","result","key","Object","keys","startsWith","child","path","$value","bucketByMode","flatTokens","runtimeMap","runtimePlatform","light","dark","dotPath","value","entries","strValue","String","cssVar","segments","split","platform","presetPatchToUniwindMaps","patch","flat","FONT_INPUT_ENTRIES","filter","tokenPath","TOKEN_ALIAS_REGEX","resolveOverrideValue","aliasMatch","exec","referencedPath","trim","targetCssVar","themeOverrideToUniwindMaps","inputs","overrides","paletteTokens","fontTokens","inputKey","undefined","modes","mode","bucket","hexValue","modePrefixed","modeOverrides","resolved"],"sourceRoot":"../../src","sources":["theming.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { OVERRIDE_SCHEMA_VERSION, SUPPORTED_OVERRIDE_SCHEMA_VERSIONS, INPUT_TOKEN_MAP, presetFonts, } from './types';
|
|
2
2
|
export type { TokenValue, TokenGroup, Preset, ThemeMetadata, ThemeOverrideMetadata, ThemeObject, ThemeOverride, Mode, Platform, } from './types';
|
|
3
|
-
export { generateColorScale, generatePalettesFromInputs } from './palette';
|
|
3
|
+
export { generateColorScale, generatePalettesFromInputs, deriveBaseColorKey } from './palette';
|
|
4
4
|
export type { PaletteCategory, PaletteScale, PaletteStep, PaletteTokenMap } from './palette';
|
|
5
5
|
export { isSchemaVersionSupported, presetPatchToUniwindMaps, themeOverrideToUniwindMaps, applyThemeOverride, DEFAULT_PRESET, } from './theming';
|
|
6
6
|
export type { CssVariableMaps, RuntimeMap } from './theming';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,uBAAuB,EACvB,kCAAkC,EAClC,eAAe,EACf,WAAW,GACZ,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,UAAU,EACV,UAAU,EACV,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,IAAI,EACJ,QAAQ,GACT,MAAM,SAAS,CAAC;AAMjB,OAAO,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,uBAAuB,EACvB,kCAAkC,EAClC,eAAe,EACf,WAAW,GACZ,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,UAAU,EACV,UAAU,EACV,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,IAAI,EACJ,QAAQ,GACT,MAAM,SAAS,CAAC;AAMjB,OAAO,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAC/F,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAM7F,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,GACf,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC7D,YAAY,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAMhG,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** Palette step keys produced by `generateColorScale`. */
|
|
2
2
|
export type PaletteStep = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950' | 'input';
|
|
3
3
|
/** Token category that supports palette generation. */
|
|
4
|
-
export type PaletteCategory = 'brand' | 'accent';
|
|
4
|
+
export type PaletteCategory = 'brand' | 'accent' | 'base';
|
|
5
5
|
/** Map of palette step → resolved hex color. */
|
|
6
6
|
export type PaletteScale = Record<PaletteStep, string>;
|
|
7
7
|
/** Map of token dot-path → resolved hex color (e.g. `color.brand.500` → `#548cdc`). */
|
|
@@ -19,6 +19,18 @@ export type PaletteTokenMap = Record<string, string>;
|
|
|
19
19
|
* (e.g. `"color.brand.50"` through `"color.brand.950"` plus `"color.brand.input"`).
|
|
20
20
|
*/
|
|
21
21
|
export declare function generateColorScale(hex: string, category: PaletteCategory): PaletteTokenMap;
|
|
22
|
+
/**
|
|
23
|
+
* Derive the base palette color key from a brand color.
|
|
24
|
+
*
|
|
25
|
+
* The base scale shares the brand's hue and lightness but is nearly neutral:
|
|
26
|
+
* the brand color is converted to HSL and its saturation is lowered to
|
|
27
|
+
* {@link BASE_SATURATION} (5%). The resulting hex is the color key fed to
|
|
28
|
+
* {@link generateColorScale} for the `base` category.
|
|
29
|
+
*
|
|
30
|
+
* @param brandHex - A valid hex color string (`#RGB` or `#RRGGBB`).
|
|
31
|
+
* @returns The normalised hex color key for the base scale.
|
|
32
|
+
*/
|
|
33
|
+
export declare function deriveBaseColorKey(brandHex: string): string;
|
|
22
34
|
/**
|
|
23
35
|
* Generate palettes for all colour inputs in a theme override `inputs` object.
|
|
24
36
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/palette.ts"],"names":[],"mappings":"AAMA,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GACnB,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,OAAO,CAAC;AAEZ,uDAAuD;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/palette.ts"],"names":[],"mappings":"AAMA,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GACnB,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,OAAO,CAAC;AAEZ,uDAAuD;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1D,gDAAgD;AAChD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAEvD,uFAAuF;AACvF,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AA8ErD;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,GAAG,eAAe,CAgD1F;AAkED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAG3D;AAmBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GACtC,eAAe,CAcjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../src/theming.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,UAAU,EAEhB,MAAM,SAAS,CAAC;AAMjB,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC1E,YAAY,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAMhG,yEAAyE;AACzE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9B;AAED,gEAAgE;AAChE,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAMhD;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,aAAa,GAAG,OAAO,CAGzE;AAgFD;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,UAAU,EACjB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,QAAQ,GACxB,eAAe,CAIjB;
|
|
1
|
+
{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../src/theming.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,UAAU,EAEhB,MAAM,SAAS,CAAC;AAMjB,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC1E,YAAY,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAMhG,yEAAyE;AACzE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9B;AAED,gEAAgE;AAChE,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAMhD;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,aAAa,GAAG,OAAO,CAGzE;AAgFD;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,UAAU,EACjB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,QAAQ,GACxB,eAAe,CAIjB;AA+CD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,aAAa,EACvB,UAAU,EAAE,UAAU,GAErB,eAAe,CAgEjB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdx-ui/styles",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.60",
|
|
4
4
|
"main": "lib/commonjs/index.js",
|
|
5
5
|
"module": "lib/module/index.js",
|
|
6
6
|
"react-native": "src/index.ts",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"@expo-google-fonts/manrope": "0.4.2",
|
|
66
66
|
"@expo-google-fonts/outfit": "0.4.3",
|
|
67
67
|
"@expo-google-fonts/public-sans": "0.4.2",
|
|
68
|
-
"@cdx-ui/utils": "0.0.1-beta.
|
|
68
|
+
"@cdx-ui/utils": "0.0.1-beta.60"
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
71
|
"expo-font": ">=13.0.0",
|
|
@@ -96,6 +96,9 @@ jest.mock(
|
|
|
96
96
|
'color.accent.100': '--color-accent-100',
|
|
97
97
|
'color.accent.500': '--color-accent-500',
|
|
98
98
|
'color.accent.input': '--color-accent-input',
|
|
99
|
+
'color.base.50': '--color-base-50',
|
|
100
|
+
'color.base.500': '--color-base-500',
|
|
101
|
+
'color.base.950': '--color-base-950',
|
|
99
102
|
'font.display': '--font-display',
|
|
100
103
|
'modes.light.color.surface.background': '--color-surface-background',
|
|
101
104
|
'modes.dark.color.surface.background': '--color-surface-background',
|
|
@@ -131,6 +134,9 @@ const TEST_RUNTIME_MAP: RuntimeMap = {
|
|
|
131
134
|
'color.accent.100': '--color-accent-100',
|
|
132
135
|
'color.accent.500': '--color-accent-500',
|
|
133
136
|
'color.accent.input': '--color-accent-input',
|
|
137
|
+
'color.base.50': '--color-base-50',
|
|
138
|
+
'color.base.500': '--color-base-500',
|
|
139
|
+
'color.base.950': '--color-base-950',
|
|
134
140
|
'font.display': '--font-display',
|
|
135
141
|
'modes.light.color.surface.background': '--color-surface-background',
|
|
136
142
|
'modes.dark.color.surface.background': '--color-surface-background',
|
|
@@ -194,6 +200,30 @@ describe('applyThemeOverride', () => {
|
|
|
194
200
|
expect(mockUpdateCSSVariables).toHaveBeenCalledWith('dark', expect.any(Object));
|
|
195
201
|
});
|
|
196
202
|
|
|
203
|
+
it('applies a base palette from a basePrimary input', () => {
|
|
204
|
+
const override: ThemeOverride = {
|
|
205
|
+
$extensions: {
|
|
206
|
+
'com.forge.ui.themeOverride': {
|
|
207
|
+
basePreset: 'poise',
|
|
208
|
+
schemaVersion: '1.0.0',
|
|
209
|
+
},
|
|
210
|
+
},
|
|
211
|
+
inputs: { brandPrimary: '#0052cc', basePrimary: '#61666c' },
|
|
212
|
+
};
|
|
213
|
+
|
|
214
|
+
const result = applyThemeOverride(override, {
|
|
215
|
+
runtimeMap: TEST_RUNTIME_MAP,
|
|
216
|
+
runtimePlatform: 'web',
|
|
217
|
+
});
|
|
218
|
+
|
|
219
|
+
expect(result.applied).toBe(true);
|
|
220
|
+
if (result.applied) {
|
|
221
|
+
expect(result.light['--color-base-50']).toBeDefined();
|
|
222
|
+
expect(result.light['--color-base-500']).toBeDefined();
|
|
223
|
+
expect(result.dark['--color-base-950']).toBeDefined();
|
|
224
|
+
}
|
|
225
|
+
});
|
|
226
|
+
|
|
197
227
|
it('applies font input override', () => {
|
|
198
228
|
const override: ThemeOverride = {
|
|
199
229
|
$extensions: {
|
|
@@ -242,6 +272,40 @@ describe('applyThemeOverride', () => {
|
|
|
242
272
|
expect(result.dark['--color-surface-background']).toBe('#1a1a1a');
|
|
243
273
|
}
|
|
244
274
|
});
|
|
275
|
+
|
|
276
|
+
it('resolves alias overrides to var() references end-to-end', () => {
|
|
277
|
+
const override: ThemeOverride = {
|
|
278
|
+
$extensions: {
|
|
279
|
+
'com.forge.ui.themeOverride': {
|
|
280
|
+
basePreset: 'poise',
|
|
281
|
+
schemaVersion: '1.0.0',
|
|
282
|
+
},
|
|
283
|
+
},
|
|
284
|
+
inputs: { brandPrimary: '#0052cc' },
|
|
285
|
+
overrides: {
|
|
286
|
+
light: { 'color.surface.background': '{color.brand.700}' },
|
|
287
|
+
dark: { 'color.surface.background': '{color.brand.300}' },
|
|
288
|
+
},
|
|
289
|
+
};
|
|
290
|
+
|
|
291
|
+
const result = applyThemeOverride(override, {
|
|
292
|
+
runtimeMap: TEST_RUNTIME_MAP,
|
|
293
|
+
runtimePlatform: 'web',
|
|
294
|
+
});
|
|
295
|
+
|
|
296
|
+
expect(result.applied).toBe(true);
|
|
297
|
+
if (result.applied) {
|
|
298
|
+
expect(result.light['--color-surface-background']).toBe('var(--color-brand-700)');
|
|
299
|
+
expect(result.dark['--color-surface-background']).toBe('var(--color-brand-300)');
|
|
300
|
+
// The referenced primitive is present in the same batch (palette
|
|
301
|
+
// generation emitted it), so the var() reference resolves.
|
|
302
|
+
expect(result.light['--color-brand-700']).toBeDefined();
|
|
303
|
+
}
|
|
304
|
+
expect(mockUpdateCSSVariables).toHaveBeenCalledWith(
|
|
305
|
+
'light',
|
|
306
|
+
expect.objectContaining({ '--color-surface-background': 'var(--color-brand-700)' }),
|
|
307
|
+
);
|
|
308
|
+
});
|
|
245
309
|
});
|
|
246
310
|
|
|
247
311
|
describe('non-default preset patch + override', () => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { generateColorScale, generatePalettesFromInputs } from '../palette';
|
|
1
|
+
import { generateColorScale, generatePalettesFromInputs, deriveBaseColorKey } from '../palette';
|
|
2
2
|
|
|
3
3
|
const PALETTE_STEPS = [
|
|
4
4
|
'50',
|
|
@@ -63,6 +63,16 @@ describe('generateColorScale', () => {
|
|
|
63
63
|
expect(Object.keys(result)).toHaveLength(12);
|
|
64
64
|
});
|
|
65
65
|
|
|
66
|
+
it('returns all 11 contrast steps plus the input key for base', () => {
|
|
67
|
+
const result = generateColorScale('#797986', 'base');
|
|
68
|
+
|
|
69
|
+
for (const step of PALETTE_STEPS) {
|
|
70
|
+
expect(`color.base.${step}` in result).toBe(true);
|
|
71
|
+
}
|
|
72
|
+
expect('color.base.input' in result).toBe(true);
|
|
73
|
+
expect(Object.keys(result)).toHaveLength(12);
|
|
74
|
+
});
|
|
75
|
+
|
|
66
76
|
it('all generated values are valid 7-character hex strings', () => {
|
|
67
77
|
const result = generateColorScale('#0052cc', 'brand');
|
|
68
78
|
|
|
@@ -147,6 +157,65 @@ describe('generateColorScale', () => {
|
|
|
147
157
|
});
|
|
148
158
|
});
|
|
149
159
|
|
|
160
|
+
// ---------------------------------------------------------------------------
|
|
161
|
+
// deriveBaseColorKey
|
|
162
|
+
// ---------------------------------------------------------------------------
|
|
163
|
+
|
|
164
|
+
/** Saturation component (0–1) of a hex color in HSL. */
|
|
165
|
+
function saturation(hex: string): number {
|
|
166
|
+
const r = parseInt(hex.slice(1, 3), 16) / 255;
|
|
167
|
+
const g = parseInt(hex.slice(3, 5), 16) / 255;
|
|
168
|
+
const b = parseInt(hex.slice(5, 7), 16) / 255;
|
|
169
|
+
const max = Math.max(r, g, b);
|
|
170
|
+
const min = Math.min(r, g, b);
|
|
171
|
+
const l = (max + min) / 2;
|
|
172
|
+
const delta = max - min;
|
|
173
|
+
if (delta === 0) return 0;
|
|
174
|
+
return l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/** Hue component (degrees) of a hex color in HSL. */
|
|
178
|
+
function hue(hex: string): number {
|
|
179
|
+
const r = parseInt(hex.slice(1, 3), 16) / 255;
|
|
180
|
+
const g = parseInt(hex.slice(3, 5), 16) / 255;
|
|
181
|
+
const b = parseInt(hex.slice(5, 7), 16) / 255;
|
|
182
|
+
const max = Math.max(r, g, b);
|
|
183
|
+
const min = Math.min(r, g, b);
|
|
184
|
+
const delta = max - min;
|
|
185
|
+
if (delta === 0) return 0;
|
|
186
|
+
let h: number;
|
|
187
|
+
if (max === r) h = (g - b) / delta + (g < b ? 6 : 0);
|
|
188
|
+
else if (max === g) h = (b - r) / delta + 2;
|
|
189
|
+
else h = (r - g) / delta + 4;
|
|
190
|
+
return h * 60;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
describe('deriveBaseColorKey', () => {
|
|
194
|
+
it('returns a normalised 7-character hex string', () => {
|
|
195
|
+
expect(deriveBaseColorKey('#346099')).toMatch(/^#[0-9a-f]{6}$/);
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
it('lowers saturation to ~5%', () => {
|
|
199
|
+
// ~5% saturation rounded through 8-bit channels lands close to 0.05.
|
|
200
|
+
expect(saturation(deriveBaseColorKey('#346099'))).toBeCloseTo(0.05, 2);
|
|
201
|
+
expect(saturation(deriveBaseColorKey('#ff0000'))).toBeCloseTo(0.05, 2);
|
|
202
|
+
});
|
|
203
|
+
|
|
204
|
+
it('preserves the brand hue (within rounding tolerance)', () => {
|
|
205
|
+
// At 5% saturation the channels are nearly equal, so 8-bit rounding can
|
|
206
|
+
// nudge the hue by a couple of degrees — assert a small absolute tolerance.
|
|
207
|
+
expect(Math.abs(hue(deriveBaseColorKey('#346099')) - hue('#346099'))).toBeLessThan(5);
|
|
208
|
+
});
|
|
209
|
+
|
|
210
|
+
it('accepts shorthand hex and normalises the result', () => {
|
|
211
|
+
expect(deriveBaseColorKey('#36c')).toMatch(/^#[0-9a-f]{6}$/);
|
|
212
|
+
});
|
|
213
|
+
|
|
214
|
+
it('throws for invalid hex input', () => {
|
|
215
|
+
expect(() => deriveBaseColorKey('nope')).toThrow(TypeError);
|
|
216
|
+
});
|
|
217
|
+
});
|
|
218
|
+
|
|
150
219
|
// ---------------------------------------------------------------------------
|
|
151
220
|
// generatePalettesFromInputs
|
|
152
221
|
// ---------------------------------------------------------------------------
|
|
@@ -199,4 +268,29 @@ describe('generatePalettesFromInputs', () => {
|
|
|
199
268
|
expect(key).toMatch(/^color\.brand\./);
|
|
200
269
|
}
|
|
201
270
|
});
|
|
271
|
+
|
|
272
|
+
it('generates a base palette from a basePrimary input', () => {
|
|
273
|
+
const result = generatePalettesFromInputs({
|
|
274
|
+
basePrimary: deriveBaseColorKey('#346099'),
|
|
275
|
+
});
|
|
276
|
+
|
|
277
|
+
for (const step of PALETTE_STEPS) {
|
|
278
|
+
expect(`color.base.${step}` in result).toBe(true);
|
|
279
|
+
}
|
|
280
|
+
expect('color.base.input' in result).toBe(true);
|
|
281
|
+
});
|
|
282
|
+
|
|
283
|
+
it('generates brand, accent, and base palettes together', () => {
|
|
284
|
+
const result = generatePalettesFromInputs({
|
|
285
|
+
brandPrimary: '#0052cc',
|
|
286
|
+
accentPrimary: '#ff8c42',
|
|
287
|
+
basePrimary: deriveBaseColorKey('#0052cc'),
|
|
288
|
+
});
|
|
289
|
+
|
|
290
|
+
for (const step of PALETTE_STEPS) {
|
|
291
|
+
expect(`color.brand.${step}` in result).toBe(true);
|
|
292
|
+
expect(`color.accent.${step}` in result).toBe(true);
|
|
293
|
+
expect(`color.base.${step}` in result).toBe(true);
|
|
294
|
+
}
|
|
295
|
+
});
|
|
202
296
|
});
|
|
@@ -49,6 +49,10 @@ const MOCK_RUNTIME_MAP: RuntimeMap = {
|
|
|
49
49
|
'modes.dark.font.display': '--font-display',
|
|
50
50
|
'modes.light.border-radius.button': '--border-radius-button',
|
|
51
51
|
'modes.dark.border-radius.button': '--border-radius-button',
|
|
52
|
+
'modes.light.color.surface.action.strong': '--color-surface-action-strong',
|
|
53
|
+
'modes.dark.color.surface.action.strong': '--color-surface-action-strong',
|
|
54
|
+
'modes.light.color.content.link': '--color-content-link',
|
|
55
|
+
'modes.dark.color.content.link': '--color-content-link',
|
|
52
56
|
|
|
53
57
|
// Platform-prefixed tokens
|
|
54
58
|
'platform.web.font.sans': '--font-sans',
|
|
@@ -477,6 +481,124 @@ describe('themeOverrideToUniwindMaps', () => {
|
|
|
477
481
|
expect(Object.keys(result.light)).toHaveLength(1);
|
|
478
482
|
});
|
|
479
483
|
});
|
|
484
|
+
|
|
485
|
+
describe('token-reference aliases', () => {
|
|
486
|
+
it('resolves an alias override to a CSS var() reference', () => {
|
|
487
|
+
const override: ThemeOverride = {
|
|
488
|
+
...baseOverride,
|
|
489
|
+
overrides: {
|
|
490
|
+
light: { 'color.surface.action.strong': '{color.brand.700}' },
|
|
491
|
+
},
|
|
492
|
+
};
|
|
493
|
+
|
|
494
|
+
const result = themeOverrideToUniwindMaps(override, MOCK_RUNTIME_MAP, 'web');
|
|
495
|
+
|
|
496
|
+
expect(result.light['--color-surface-action-strong']).toBe('var(--color-brand-700)');
|
|
497
|
+
});
|
|
498
|
+
|
|
499
|
+
it('supports per-mode step shifts (brand.700 light / brand.300 dark)', () => {
|
|
500
|
+
const override: ThemeOverride = {
|
|
501
|
+
...baseOverride,
|
|
502
|
+
overrides: {
|
|
503
|
+
light: { 'color.surface.action.strong': '{color.brand.700}' },
|
|
504
|
+
dark: { 'color.surface.action.strong': '{color.brand.300}' },
|
|
505
|
+
},
|
|
506
|
+
};
|
|
507
|
+
|
|
508
|
+
const result = themeOverrideToUniwindMaps(override, MOCK_RUNTIME_MAP, 'web');
|
|
509
|
+
|
|
510
|
+
expect(result.light['--color-surface-action-strong']).toBe('var(--color-brand-700)');
|
|
511
|
+
expect(result.dark['--color-surface-action-strong']).toBe('var(--color-brand-300)');
|
|
512
|
+
});
|
|
513
|
+
|
|
514
|
+
it('resolves aliases targeting the accent scale', () => {
|
|
515
|
+
const override: ThemeOverride = {
|
|
516
|
+
...baseOverride,
|
|
517
|
+
overrides: {
|
|
518
|
+
light: { 'color.content.link': '{color.accent.600}' },
|
|
519
|
+
},
|
|
520
|
+
};
|
|
521
|
+
|
|
522
|
+
const result = themeOverrideToUniwindMaps(override, MOCK_RUNTIME_MAP, 'web');
|
|
523
|
+
|
|
524
|
+
expect(result.light['--color-content-link']).toBe('var(--color-accent-600)');
|
|
525
|
+
});
|
|
526
|
+
|
|
527
|
+
it('mixes alias and literal values in the same mode', () => {
|
|
528
|
+
const override: ThemeOverride = {
|
|
529
|
+
...baseOverride,
|
|
530
|
+
overrides: {
|
|
531
|
+
light: {
|
|
532
|
+
'color.surface.action.strong': '{color.brand.700}',
|
|
533
|
+
'color.surface.background': '#F5F7F6',
|
|
534
|
+
},
|
|
535
|
+
},
|
|
536
|
+
};
|
|
537
|
+
|
|
538
|
+
const result = themeOverrideToUniwindMaps(override, MOCK_RUNTIME_MAP, 'web');
|
|
539
|
+
|
|
540
|
+
expect(result.light['--color-surface-action-strong']).toBe('var(--color-brand-700)');
|
|
541
|
+
expect(result.light['--color-surface-background']).toBe('#F5F7F6');
|
|
542
|
+
});
|
|
543
|
+
|
|
544
|
+
it('passes a numeric literal through without alias treatment', () => {
|
|
545
|
+
const override: ThemeOverride = {
|
|
546
|
+
...baseOverride,
|
|
547
|
+
overrides: {
|
|
548
|
+
light: { 'border-radius.button': 8 },
|
|
549
|
+
},
|
|
550
|
+
};
|
|
551
|
+
|
|
552
|
+
const result = themeOverrideToUniwindMaps(override, MOCK_RUNTIME_MAP, 'web');
|
|
553
|
+
|
|
554
|
+
expect(result.light['--border-radius-button']).toBe('8');
|
|
555
|
+
});
|
|
556
|
+
|
|
557
|
+
it('alias override wins over a palette-generated primitive on collision', () => {
|
|
558
|
+
const override: ThemeOverride = {
|
|
559
|
+
...baseOverride,
|
|
560
|
+
inputs: { brandPrimary: '#0052cc' },
|
|
561
|
+
overrides: {
|
|
562
|
+
light: { 'color.brand.500': '{color.brand.700}' },
|
|
563
|
+
},
|
|
564
|
+
};
|
|
565
|
+
|
|
566
|
+
const result = themeOverrideToUniwindMaps(override, MOCK_RUNTIME_MAP, 'web');
|
|
567
|
+
|
|
568
|
+
expect(result.light['--color-brand-500']).toBe('var(--color-brand-700)');
|
|
569
|
+
});
|
|
570
|
+
|
|
571
|
+
it('skips an alias whose referenced primitive is absent from the runtime map', () => {
|
|
572
|
+
const override: ThemeOverride = {
|
|
573
|
+
...baseOverride,
|
|
574
|
+
overrides: {
|
|
575
|
+
light: { 'color.surface.background': '{color.brand.999}' },
|
|
576
|
+
},
|
|
577
|
+
};
|
|
578
|
+
|
|
579
|
+
const result = themeOverrideToUniwindMaps(override, MOCK_RUNTIME_MAP, 'web');
|
|
580
|
+
|
|
581
|
+
expect(result.light['--color-surface-background']).toBeUndefined();
|
|
582
|
+
expect(Object.keys(result.light)).toHaveLength(0);
|
|
583
|
+
});
|
|
584
|
+
|
|
585
|
+
it('skips an alias targeting a non-primitive token (primitive-only constraint)', () => {
|
|
586
|
+
const override: ThemeOverride = {
|
|
587
|
+
...baseOverride,
|
|
588
|
+
overrides: {
|
|
589
|
+
// `color.content.primary` exists only as a mode-prefixed semantic
|
|
590
|
+
// token, not as a resolvable primitive path — so it is not a valid
|
|
591
|
+
// alias target and resolution skips it.
|
|
592
|
+
light: { 'color.surface.action.strong': '{color.content.primary}' },
|
|
593
|
+
},
|
|
594
|
+
};
|
|
595
|
+
|
|
596
|
+
const result = themeOverrideToUniwindMaps(override, MOCK_RUNTIME_MAP, 'web');
|
|
597
|
+
|
|
598
|
+
expect(result.light['--color-surface-action-strong']).toBeUndefined();
|
|
599
|
+
expect(Object.keys(result.light)).toHaveLength(0);
|
|
600
|
+
});
|
|
601
|
+
});
|
|
480
602
|
});
|
|
481
603
|
|
|
482
604
|
// ---------------------------------------------------------------------------
|
package/src/index.ts
CHANGED
|
@@ -24,7 +24,7 @@ export type {
|
|
|
24
24
|
// Palette generation
|
|
25
25
|
// ---------------------------------------------------------------------------
|
|
26
26
|
|
|
27
|
-
export { generateColorScale, generatePalettesFromInputs } from './palette';
|
|
27
|
+
export { generateColorScale, generatePalettesFromInputs, deriveBaseColorKey } from './palette';
|
|
28
28
|
export type { PaletteCategory, PaletteScale, PaletteStep, PaletteTokenMap } from './palette';
|
|
29
29
|
|
|
30
30
|
// ---------------------------------------------------------------------------
|
package/src/palette.ts
CHANGED
|
@@ -20,7 +20,7 @@ export type PaletteStep =
|
|
|
20
20
|
| 'input';
|
|
21
21
|
|
|
22
22
|
/** Token category that supports palette generation. */
|
|
23
|
-
export type PaletteCategory = 'brand' | 'accent';
|
|
23
|
+
export type PaletteCategory = 'brand' | 'accent' | 'base';
|
|
24
24
|
|
|
25
25
|
/** Map of palette step → resolved hex color. */
|
|
26
26
|
export type PaletteScale = Record<PaletteStep, string>;
|
|
@@ -166,6 +166,86 @@ export function generateColorScale(hex: string, category: PaletteCategory): Pale
|
|
|
166
166
|
return result;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
+
// ---------------------------------------------------------------------------
|
|
170
|
+
// Base color-key derivation
|
|
171
|
+
// ---------------------------------------------------------------------------
|
|
172
|
+
|
|
173
|
+
/** Saturation (0–1) applied to the brand hue to produce the base color key. */
|
|
174
|
+
const BASE_SATURATION = 0.05;
|
|
175
|
+
|
|
176
|
+
/** Convert a normalised hex string to HSL (`h` in degrees, `s`/`l` in 0–1). */
|
|
177
|
+
function hexToHsl(hex: CssColor): { h: number; s: number; l: number } {
|
|
178
|
+
const r = parseInt(hex.slice(1, 3), 16) / 255;
|
|
179
|
+
const g = parseInt(hex.slice(3, 5), 16) / 255;
|
|
180
|
+
const b = parseInt(hex.slice(5, 7), 16) / 255;
|
|
181
|
+
|
|
182
|
+
const max = Math.max(r, g, b);
|
|
183
|
+
const min = Math.min(r, g, b);
|
|
184
|
+
const delta = max - min;
|
|
185
|
+
const l = (max + min) / 2;
|
|
186
|
+
|
|
187
|
+
let h = 0;
|
|
188
|
+
let s = 0;
|
|
189
|
+
if (delta !== 0) {
|
|
190
|
+
s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
|
|
191
|
+
switch (max) {
|
|
192
|
+
case r:
|
|
193
|
+
h = (g - b) / delta + (g < b ? 6 : 0);
|
|
194
|
+
break;
|
|
195
|
+
case g:
|
|
196
|
+
h = (b - r) / delta + 2;
|
|
197
|
+
break;
|
|
198
|
+
default:
|
|
199
|
+
h = (r - g) / delta + 4;
|
|
200
|
+
break;
|
|
201
|
+
}
|
|
202
|
+
h *= 60;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
return { h, s, l };
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/** Convert HSL (`h` in degrees, `s`/`l` in 0–1) to a normalised hex string. */
|
|
209
|
+
function hslToHex({ h, s, l }: { h: number; s: number; l: number }): CssColor {
|
|
210
|
+
const c = (1 - Math.abs(2 * l - 1)) * s;
|
|
211
|
+
const hp = (((h % 360) + 360) % 360) / 60;
|
|
212
|
+
const x = c * (1 - Math.abs((hp % 2) - 1));
|
|
213
|
+
|
|
214
|
+
let r = 0;
|
|
215
|
+
let g = 0;
|
|
216
|
+
let b = 0;
|
|
217
|
+
if (hp < 1) [r, g, b] = [c, x, 0];
|
|
218
|
+
else if (hp < 2) [r, g, b] = [x, c, 0];
|
|
219
|
+
else if (hp < 3) [r, g, b] = [0, c, x];
|
|
220
|
+
else if (hp < 4) [r, g, b] = [0, x, c];
|
|
221
|
+
else if (hp < 5) [r, g, b] = [x, 0, c];
|
|
222
|
+
else [r, g, b] = [c, 0, x];
|
|
223
|
+
|
|
224
|
+
const m = l - c / 2;
|
|
225
|
+
const toHex = (v: number) =>
|
|
226
|
+
Math.round((v + m) * 255)
|
|
227
|
+
.toString(16)
|
|
228
|
+
.padStart(2, '0');
|
|
229
|
+
|
|
230
|
+
return `#${toHex(r)}${toHex(g)}${toHex(b)}` as CssColor;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/**
|
|
234
|
+
* Derive the base palette color key from a brand color.
|
|
235
|
+
*
|
|
236
|
+
* The base scale shares the brand's hue and lightness but is nearly neutral:
|
|
237
|
+
* the brand color is converted to HSL and its saturation is lowered to
|
|
238
|
+
* {@link BASE_SATURATION} (5%). The resulting hex is the color key fed to
|
|
239
|
+
* {@link generateColorScale} for the `base` category.
|
|
240
|
+
*
|
|
241
|
+
* @param brandHex - A valid hex color string (`#RGB` or `#RRGGBB`).
|
|
242
|
+
* @returns The normalised hex color key for the base scale.
|
|
243
|
+
*/
|
|
244
|
+
export function deriveBaseColorKey(brandHex: string): string {
|
|
245
|
+
const { h, l } = hexToHsl(validateHex(brandHex));
|
|
246
|
+
return hslToHex({ h, s: BASE_SATURATION, l });
|
|
247
|
+
}
|
|
248
|
+
|
|
169
249
|
// ---------------------------------------------------------------------------
|
|
170
250
|
// Convenience wrapper
|
|
171
251
|
// ---------------------------------------------------------------------------
|
|
@@ -180,6 +260,7 @@ export function generateColorScale(hex: string, category: PaletteCategory): Pale
|
|
|
180
260
|
const COLOR_INPUT_ENTRIES: readonly (readonly [string, string])[] = [
|
|
181
261
|
['brandPrimary', 'color.brand'],
|
|
182
262
|
['accentPrimary', 'color.accent'],
|
|
263
|
+
['basePrimary', 'color.base'],
|
|
183
264
|
] as const;
|
|
184
265
|
|
|
185
266
|
/**
|
package/src/theming.ts
CHANGED
|
@@ -150,6 +150,39 @@ const FONT_INPUT_ENTRIES: readonly (readonly [string, string])[] = (
|
|
|
150
150
|
Object.entries(INPUT_TOKEN_MAP) as [string, string][]
|
|
151
151
|
).filter(([, tokenPath]) => !tokenPath.startsWith('color.'));
|
|
152
152
|
|
|
153
|
+
/**
|
|
154
|
+
* Matches a token-reference alias value such as `{color.brand.700}` and
|
|
155
|
+
* captures the referenced token dot-path.
|
|
156
|
+
*/
|
|
157
|
+
const TOKEN_ALIAS_REGEX = /^\{([^}]+)\}$/;
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* Resolve an `overrides.{mode}` value into the string written to the CSS
|
|
161
|
+
* variable map.
|
|
162
|
+
*
|
|
163
|
+
* - **Token-reference alias** (`{color.brand.700}`) → resolves the referenced
|
|
164
|
+
* token path via the runtime map and returns a CSS `var()` reference
|
|
165
|
+
* (`var(--color-brand-700)`), so the override tracks its source through the
|
|
166
|
+
* cascade — the same mechanism the base theme uses for its semantic tokens.
|
|
167
|
+
* Returns `null` when the referenced path is absent from the runtime map
|
|
168
|
+
* (e.g. a non-primitive target), so the caller skips it; this enforces the
|
|
169
|
+
* primitive-only alias constraint at the resolution layer.
|
|
170
|
+
* - **Literal value** (`#F5F7F6`, `8`) → returned as-is (stringified).
|
|
171
|
+
*
|
|
172
|
+
* @see docs/internal/token-architecture/16-override-structure.md — Token-reference aliases vs. literal values
|
|
173
|
+
*/
|
|
174
|
+
function resolveOverrideValue(value: string | number, runtimeMap: RuntimeMap): string | null {
|
|
175
|
+
if (typeof value === 'string') {
|
|
176
|
+
const aliasMatch = TOKEN_ALIAS_REGEX.exec(value);
|
|
177
|
+
if (aliasMatch) {
|
|
178
|
+
const referencedPath = aliasMatch[1].trim();
|
|
179
|
+
const targetCssVar = runtimeMap[referencedPath];
|
|
180
|
+
return targetCssVar ? `var(${targetCssVar})` : null;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
return String(value);
|
|
184
|
+
}
|
|
185
|
+
|
|
153
186
|
/**
|
|
154
187
|
* Convert a hybrid FI override (`ThemeOverride`) into per-mode CSS variable
|
|
155
188
|
* maps suitable for `Uniwind.updateCSSVariables`.
|
|
@@ -215,13 +248,18 @@ export function themeOverrideToUniwindMaps(
|
|
|
215
248
|
if (cssVar) bucket[cssVar] = value;
|
|
216
249
|
}
|
|
217
250
|
|
|
218
|
-
// 3. Explicit per-mode overrides (wins on collision)
|
|
251
|
+
// 3. Explicit per-mode overrides (wins on collision). Values may be
|
|
252
|
+
// token-reference aliases (resolved to a CSS var() reference) or
|
|
253
|
+
// literals; see resolveOverrideValue.
|
|
219
254
|
const modeOverrides = overrides?.[mode];
|
|
220
255
|
if (modeOverrides) {
|
|
221
256
|
for (const [dotPath, value] of Object.entries(modeOverrides)) {
|
|
222
257
|
const modePrefixed = `modes.${mode}.${dotPath}`;
|
|
223
258
|
const cssVar = runtimeMap[modePrefixed] ?? runtimeMap[dotPath];
|
|
224
|
-
if (cssVar)
|
|
259
|
+
if (!cssVar) continue;
|
|
260
|
+
|
|
261
|
+
const resolved = resolveOverrideValue(value, runtimeMap);
|
|
262
|
+
if (resolved !== null) bucket[cssVar] = resolved;
|
|
225
263
|
}
|
|
226
264
|
}
|
|
227
265
|
}
|