@cdx-ui/styles 0.0.1-beta.54 → 0.0.1-beta.56
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/css/theme.css +2 -2
- package/lib/commonjs/applyThemeOverride.js +154 -0
- package/lib/commonjs/applyThemeOverride.js.map +1 -0
- package/lib/commonjs/index.js +69 -73
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/palette.js +180 -0
- package/lib/commonjs/palette.js.map +1 -0
- package/lib/commonjs/theming.js +218 -0
- package/lib/commonjs/theming.js.map +1 -0
- package/lib/commonjs/types.js +75 -0
- package/lib/commonjs/types.js.map +1 -0
- package/lib/module/applyThemeOverride.js +149 -0
- package/lib/module/applyThemeOverride.js.map +1 -0
- package/lib/module/index.js +8 -62
- package/lib/module/index.js.map +1 -1
- package/lib/module/palette.js +176 -0
- package/lib/module/palette.js.map +1 -0
- package/lib/module/theming.js +202 -0
- package/lib/module/theming.js.map +1 -0
- package/lib/module/types.js +71 -0
- package/lib/module/types.js.map +1 -0
- package/lib/runtime/prestige-vs-default.json +1 -0
- package/lib/runtime/pulse-vs-default.json +1 -0
- package/lib/runtime/token-to-css-var.json +632 -0
- package/lib/typescript/applyThemeOverride.d.ts +26 -0
- package/lib/typescript/applyThemeOverride.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +7 -89
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/palette.d.ts +48 -0
- package/lib/typescript/palette.d.ts.map +1 -0
- package/lib/typescript/theming.d.ts +40 -0
- package/lib/typescript/theming.d.ts.map +1 -0
- package/lib/typescript/types.d.ts +90 -0
- package/lib/typescript/types.d.ts.map +1 -0
- package/package.json +27 -8
- package/runtime/prestige-vs-default.json +1 -0
- package/runtime/pulse-vs-default.json +1 -0
- package/runtime/token-to-css-var.json +632 -0
- package/src/__tests__/applyThemeOverride.test.ts +488 -0
- package/src/__tests__/generateColorScale.test.ts +202 -0
- package/src/__tests__/theming.test.ts +525 -0
- package/src/applyThemeOverride.ts +139 -0
- package/src/index.ts +33 -103
- package/src/palette.ts +226 -0
- package/src/theming.ts +230 -0
- package/src/types.ts +112 -0
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { BackgroundColor, Color, Theme } from '@adobe/leonardo-contrast-colors';
|
|
4
|
+
|
|
5
|
+
// ---------------------------------------------------------------------------
|
|
6
|
+
// Types
|
|
7
|
+
// ---------------------------------------------------------------------------
|
|
8
|
+
|
|
9
|
+
/** Palette step keys produced by `generateColorScale`. */
|
|
10
|
+
|
|
11
|
+
/** Token category that supports palette generation. */
|
|
12
|
+
|
|
13
|
+
/** Map of palette step → resolved hex color. */
|
|
14
|
+
|
|
15
|
+
/** Map of token dot-path → resolved hex color (e.g. `color.brand.500` → `#548cdc`). */
|
|
16
|
+
|
|
17
|
+
// ---------------------------------------------------------------------------
|
|
18
|
+
// Constants
|
|
19
|
+
// ---------------------------------------------------------------------------
|
|
20
|
+
|
|
21
|
+
const REFERENCE_BACKGROUND = '#ffffff';
|
|
22
|
+
const PALETTE_STEPS = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'];
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Contrast ratios for each palette step against white (#ffffff).
|
|
26
|
+
*
|
|
27
|
+
* Step 700 targets WCAG AA for normal text (≥ 4.5:1).
|
|
28
|
+
*/
|
|
29
|
+
const CONTRAST_RATIOS = {
|
|
30
|
+
'50': 1.04,
|
|
31
|
+
'100': 1.16,
|
|
32
|
+
'200': 1.46,
|
|
33
|
+
'300': 1.85,
|
|
34
|
+
'400': 2.45,
|
|
35
|
+
'500': 3.4,
|
|
36
|
+
'600': 4.8,
|
|
37
|
+
'700': 6.4,
|
|
38
|
+
'800': 8.6,
|
|
39
|
+
'900': 12,
|
|
40
|
+
'950': 16.8
|
|
41
|
+
};
|
|
42
|
+
const HEX_REGEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
|
|
43
|
+
|
|
44
|
+
// ---------------------------------------------------------------------------
|
|
45
|
+
// Validation
|
|
46
|
+
// ---------------------------------------------------------------------------
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Validate and normalise a hex color string.
|
|
50
|
+
*
|
|
51
|
+
* Accepts `#RGB` (4 chars) or `#RRGGBB` (7 chars). Throws a descriptive
|
|
52
|
+
* `TypeError` for any other input.
|
|
53
|
+
*
|
|
54
|
+
* @returns The normalised 7-character hex string (e.g. `#aabbcc`).
|
|
55
|
+
*/
|
|
56
|
+
function validateHex(hex) {
|
|
57
|
+
if (typeof hex !== 'string') {
|
|
58
|
+
throw new TypeError(`Invalid hex color: expected a string, received ${typeof hex}`);
|
|
59
|
+
}
|
|
60
|
+
if (!HEX_REGEX.test(hex)) {
|
|
61
|
+
throw new TypeError(`Invalid hex color "${hex}": must be a 4-character (#RGB) or 7-character (#RRGGBB) hex string starting with "#"`);
|
|
62
|
+
}
|
|
63
|
+
if (hex.length === 4) {
|
|
64
|
+
const [, r, g, b] = hex;
|
|
65
|
+
return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
|
|
66
|
+
}
|
|
67
|
+
return hex.toLowerCase();
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// ---------------------------------------------------------------------------
|
|
71
|
+
// Core generation — wraps Leonardo behind a thin interface
|
|
72
|
+
// ---------------------------------------------------------------------------
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* Generate an 11-step contrast-based color scale from a single hex color.
|
|
76
|
+
*
|
|
77
|
+
* Uses `@adobe/leonardo-contrast-colors` internally. The generation algorithm
|
|
78
|
+
* is wrapped behind this function so the underlying library is swappable
|
|
79
|
+
* without changing the public API.
|
|
80
|
+
*
|
|
81
|
+
* @param hex - A valid hex color string (`#RGB` or `#RRGGBB`).
|
|
82
|
+
* @param category - The token namespace (`'brand'` or `'accent'`).
|
|
83
|
+
* @returns A `PaletteTokenMap` keyed by token dot-paths
|
|
84
|
+
* (e.g. `"color.brand.50"` through `"color.brand.950"` plus `"color.brand.input"`).
|
|
85
|
+
*/
|
|
86
|
+
export function generateColorScale(hex, category) {
|
|
87
|
+
const normalised = validateHex(hex);
|
|
88
|
+
const ratiosObject = {};
|
|
89
|
+
for (const step of PALETTE_STEPS) {
|
|
90
|
+
ratiosObject[step] = CONTRAST_RATIOS[step];
|
|
91
|
+
}
|
|
92
|
+
const color = new Color({
|
|
93
|
+
name: 'palette',
|
|
94
|
+
colorKeys: [normalised],
|
|
95
|
+
colorSpace: 'CAM02p',
|
|
96
|
+
ratios: ratiosObject,
|
|
97
|
+
smooth: true,
|
|
98
|
+
output: 'HEX'
|
|
99
|
+
});
|
|
100
|
+
const bg = new BackgroundColor({
|
|
101
|
+
name: 'background',
|
|
102
|
+
colorKeys: [REFERENCE_BACKGROUND],
|
|
103
|
+
colorSpace: 'CAM02p',
|
|
104
|
+
smooth: true,
|
|
105
|
+
ratios: [],
|
|
106
|
+
output: 'HEX'
|
|
107
|
+
});
|
|
108
|
+
const theme = new Theme({
|
|
109
|
+
colors: [color],
|
|
110
|
+
backgroundColor: bg,
|
|
111
|
+
lightness: 100,
|
|
112
|
+
contrast: 1,
|
|
113
|
+
saturation: 100,
|
|
114
|
+
output: 'HEX',
|
|
115
|
+
formula: 'wcag2'
|
|
116
|
+
});
|
|
117
|
+
const pairs = theme.contrastColorPairs;
|
|
118
|
+
const tokenPrefix = `color.${category}`;
|
|
119
|
+
const result = {};
|
|
120
|
+
for (const step of PALETTE_STEPS) {
|
|
121
|
+
result[`${tokenPrefix}.${step}`] = pairs[step].toLowerCase();
|
|
122
|
+
}
|
|
123
|
+
result[`${tokenPrefix}.input`] = normalised;
|
|
124
|
+
return result;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// ---------------------------------------------------------------------------
|
|
128
|
+
// Convenience wrapper
|
|
129
|
+
// ---------------------------------------------------------------------------
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* Colour-input keys whose token path starts with `color.` — these trigger
|
|
133
|
+
* palette generation. Mirrors the colour entries from `INPUT_TOKEN_MAP`
|
|
134
|
+
* (defined in the package barrel) without creating a circular import.
|
|
135
|
+
*
|
|
136
|
+
* Keep in sync with `INPUT_TOKEN_MAP` in `./index.ts`.
|
|
137
|
+
*/
|
|
138
|
+
const COLOR_INPUT_ENTRIES = [['brandPrimary', 'color.brand'], ['accentPrimary', 'color.accent']];
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
* Generate palettes for all colour inputs in a theme override `inputs` object.
|
|
142
|
+
*
|
|
143
|
+
* Iterates over known colour-input keys that map to a `color.*` token
|
|
144
|
+
* namespace. For each matching key present in `inputs`, runs
|
|
145
|
+
* `generateColorScale` and merges the results into a single flat map of
|
|
146
|
+
* token dot-paths to hex values — ready for the S5 override application
|
|
147
|
+
* merge step.
|
|
148
|
+
*
|
|
149
|
+
* Non-colour inputs (e.g. `displayFont`) are silently skipped.
|
|
150
|
+
*
|
|
151
|
+
* @param inputs - The `inputs` object from a `ThemeOverride`.
|
|
152
|
+
* @returns A merged `Record<string, string>` of all generated token
|
|
153
|
+
* dot-paths to hex values.
|
|
154
|
+
*
|
|
155
|
+
* @example
|
|
156
|
+
* ```ts
|
|
157
|
+
* const inputs = { brandPrimary: '#0052cc', accentPrimary: '#FF8C42', displayFont: 'Poppins' };
|
|
158
|
+
* const result = generatePalettesFromInputs(inputs);
|
|
159
|
+
* // {
|
|
160
|
+
* // "color.brand.50": "#...", …, "color.brand.input": "#0052cc",
|
|
161
|
+
* // "color.accent.50": "#...", …, "color.accent.input": "#ff8c42"
|
|
162
|
+
* // }
|
|
163
|
+
* ```
|
|
164
|
+
*/
|
|
165
|
+
export function generatePalettesFromInputs(inputs) {
|
|
166
|
+
const result = {};
|
|
167
|
+
for (const [inputKey, tokenPath] of COLOR_INPUT_ENTRIES) {
|
|
168
|
+
const value = inputs[inputKey];
|
|
169
|
+
if (typeof value !== 'string') continue;
|
|
170
|
+
const category = tokenPath.replace('color.', '');
|
|
171
|
+
const scale = generateColorScale(value, category);
|
|
172
|
+
Object.assign(result, scale);
|
|
173
|
+
}
|
|
174
|
+
return result;
|
|
175
|
+
}
|
|
176
|
+
//# sourceMappingURL=palette.js.map
|
|
@@ -0,0 +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":"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","ignoreList":[]}
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { generatePalettesFromInputs } from './palette';
|
|
4
|
+
import { INPUT_TOKEN_MAP, SUPPORTED_OVERRIDE_SCHEMA_VERSIONS } from './types';
|
|
5
|
+
|
|
6
|
+
// ---------------------------------------------------------------------------
|
|
7
|
+
// Re-export orchestrator
|
|
8
|
+
// ---------------------------------------------------------------------------
|
|
9
|
+
|
|
10
|
+
export { applyThemeOverride, DEFAULT_PRESET } from './applyThemeOverride';
|
|
11
|
+
|
|
12
|
+
// ---------------------------------------------------------------------------
|
|
13
|
+
// Types
|
|
14
|
+
// ---------------------------------------------------------------------------
|
|
15
|
+
|
|
16
|
+
/** Per-mode CSS variable maps ready for `Uniwind.updateCSSVariables`. */
|
|
17
|
+
|
|
18
|
+
/** Runtime map: token dot-paths → CSS custom property names. */
|
|
19
|
+
|
|
20
|
+
// ---------------------------------------------------------------------------
|
|
21
|
+
// Schema version gate
|
|
22
|
+
// ---------------------------------------------------------------------------
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Check whether a `ThemeOverride`'s schema version is supported by the current
|
|
26
|
+
* build of `@cdx-ui/styles`.
|
|
27
|
+
*/
|
|
28
|
+
export function isSchemaVersionSupported(override) {
|
|
29
|
+
const version = override.$extensions['com.forge.ui.themeOverride'].schemaVersion;
|
|
30
|
+
return SUPPORTED_OVERRIDE_SCHEMA_VERSIONS.includes(version);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// ---------------------------------------------------------------------------
|
|
34
|
+
// DTCG tree walker
|
|
35
|
+
// ---------------------------------------------------------------------------
|
|
36
|
+
|
|
37
|
+
function isTokenValue(node) {
|
|
38
|
+
return typeof node === 'object' && node !== null && '$value' in node && '$type' in node;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Recursively walk a nested DTCG object and collect all `$value` leaves with
|
|
43
|
+
* their full dot-path.
|
|
44
|
+
*/
|
|
45
|
+
function flattenDtcg(node, prefix, result) {
|
|
46
|
+
for (const key of Object.keys(node)) {
|
|
47
|
+
if (key.startsWith('$')) continue;
|
|
48
|
+
const child = node[key];
|
|
49
|
+
const path = prefix ? `${prefix}.${key}` : key;
|
|
50
|
+
if (isTokenValue(child)) {
|
|
51
|
+
result[path] = child.$value;
|
|
52
|
+
} else if (typeof child === 'object' && child !== null) {
|
|
53
|
+
flattenDtcg(child, path, result);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// ---------------------------------------------------------------------------
|
|
59
|
+
// Shared mode-bucketing
|
|
60
|
+
// ---------------------------------------------------------------------------
|
|
61
|
+
|
|
62
|
+
function bucketByMode(flatTokens, runtimeMap, runtimePlatform) {
|
|
63
|
+
const light = {};
|
|
64
|
+
const dark = {};
|
|
65
|
+
for (const [dotPath, value] of Object.entries(flatTokens)) {
|
|
66
|
+
const strValue = String(value);
|
|
67
|
+
if (dotPath.startsWith('modes.light.')) {
|
|
68
|
+
const cssVar = runtimeMap[dotPath];
|
|
69
|
+
if (cssVar) light[cssVar] = strValue;
|
|
70
|
+
} else if (dotPath.startsWith('modes.dark.')) {
|
|
71
|
+
const cssVar = runtimeMap[dotPath];
|
|
72
|
+
if (cssVar) dark[cssVar] = strValue;
|
|
73
|
+
} else if (dotPath.startsWith('platform.')) {
|
|
74
|
+
const segments = dotPath.split('.');
|
|
75
|
+
const platform = segments[1];
|
|
76
|
+
if (platform !== runtimePlatform) continue;
|
|
77
|
+
const cssVar = runtimeMap[dotPath];
|
|
78
|
+
if (cssVar) {
|
|
79
|
+
light[cssVar] = strValue;
|
|
80
|
+
dark[cssVar] = strValue;
|
|
81
|
+
}
|
|
82
|
+
} else {
|
|
83
|
+
const cssVar = runtimeMap[dotPath];
|
|
84
|
+
if (cssVar) {
|
|
85
|
+
light[cssVar] = strValue;
|
|
86
|
+
dark[cssVar] = strValue;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
return {
|
|
91
|
+
light,
|
|
92
|
+
dark
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// ---------------------------------------------------------------------------
|
|
97
|
+
// Preset patch → Uniwind maps
|
|
98
|
+
// ---------------------------------------------------------------------------
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Convert a nested DTCG preset patch (sparse, `$type`/`$value` leaves) into
|
|
102
|
+
* per-mode CSS variable maps suitable for `Uniwind.updateCSSVariables`.
|
|
103
|
+
*
|
|
104
|
+
* @param patch - A sparse DTCG token object (preset patch).
|
|
105
|
+
* @param runtimeMap - The generated token-to-CSS-var mapping.
|
|
106
|
+
* @param runtimePlatform - Current platform (`'web' | 'ios' | 'android'`).
|
|
107
|
+
*/
|
|
108
|
+
export function presetPatchToUniwindMaps(patch, runtimeMap, runtimePlatform) {
|
|
109
|
+
const flat = {};
|
|
110
|
+
flattenDtcg(patch, '', flat);
|
|
111
|
+
return bucketByMode(flat, runtimeMap, runtimePlatform);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// ---------------------------------------------------------------------------
|
|
115
|
+
// FI override → Uniwind maps
|
|
116
|
+
// ---------------------------------------------------------------------------
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Non-color input keys from INPUT_TOKEN_MAP whose token path does NOT start
|
|
120
|
+
* with `color.`. These are handled separately from palette generation.
|
|
121
|
+
*/
|
|
122
|
+
const FONT_INPUT_ENTRIES = Object.entries(INPUT_TOKEN_MAP).filter(([, tokenPath]) => !tokenPath.startsWith('color.'));
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Convert a hybrid FI override (`ThemeOverride`) into per-mode CSS variable
|
|
126
|
+
* maps suitable for `Uniwind.updateCSSVariables`.
|
|
127
|
+
*
|
|
128
|
+
* Processing:
|
|
129
|
+
* 1. Generate palettes from color `inputs` (via S4).
|
|
130
|
+
* 2. Map font inputs to token paths.
|
|
131
|
+
* 3. For each mode, merge palette + fonts + explicit `overrides.{mode}` entries.
|
|
132
|
+
* 4. Map all token dot-paths to CSS variable names via runtime map.
|
|
133
|
+
*
|
|
134
|
+
* @param override - A `ThemeOverride` object.
|
|
135
|
+
* @param runtimeMap - The generated token-to-CSS-var mapping.
|
|
136
|
+
* @param runtimePlatform - Current platform (`'web' | 'ios' | 'android'`).
|
|
137
|
+
*/
|
|
138
|
+
export function themeOverrideToUniwindMaps(override, runtimeMap
|
|
139
|
+
// runtimePlatform: Platform,
|
|
140
|
+
) {
|
|
141
|
+
const light = {};
|
|
142
|
+
const dark = {};
|
|
143
|
+
const inputs = override.inputs;
|
|
144
|
+
const overrides = override.overrides;
|
|
145
|
+
if (!inputs && !overrides) {
|
|
146
|
+
return {
|
|
147
|
+
light,
|
|
148
|
+
dark
|
|
149
|
+
};
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// --- Palette generation from colour inputs ---
|
|
153
|
+
let paletteTokens = {};
|
|
154
|
+
if (inputs) {
|
|
155
|
+
paletteTokens = generatePalettesFromInputs(inputs);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
// --- Font input mapping ---
|
|
159
|
+
const fontTokens = {};
|
|
160
|
+
if (inputs) {
|
|
161
|
+
for (const [inputKey, tokenPath] of FONT_INPUT_ENTRIES) {
|
|
162
|
+
const value = inputs[inputKey];
|
|
163
|
+
if (value !== undefined) {
|
|
164
|
+
fontTokens[tokenPath] = String(value);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// --- Merge per mode ---
|
|
170
|
+
const modes = ['light', 'dark'];
|
|
171
|
+
for (const mode of modes) {
|
|
172
|
+
const bucket = mode === 'light' ? light : dark;
|
|
173
|
+
|
|
174
|
+
// 1. Palette-generated primitives (mode-independent → both buckets)
|
|
175
|
+
for (const [dotPath, hexValue] of Object.entries(paletteTokens)) {
|
|
176
|
+
const cssVar = runtimeMap[dotPath];
|
|
177
|
+
if (cssVar) bucket[cssVar] = hexValue;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
// 2. Font input mappings (mode-independent → both buckets)
|
|
181
|
+
for (const [tokenPath, value] of Object.entries(fontTokens)) {
|
|
182
|
+
const modePrefixed = `modes.${mode}.${tokenPath}`;
|
|
183
|
+
const cssVar = runtimeMap[modePrefixed] ?? runtimeMap[tokenPath];
|
|
184
|
+
if (cssVar) bucket[cssVar] = value;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// 3. Explicit per-mode overrides (wins on collision)
|
|
188
|
+
const modeOverrides = overrides?.[mode];
|
|
189
|
+
if (modeOverrides) {
|
|
190
|
+
for (const [dotPath, value] of Object.entries(modeOverrides)) {
|
|
191
|
+
const modePrefixed = `modes.${mode}.${dotPath}`;
|
|
192
|
+
const cssVar = runtimeMap[modePrefixed] ?? runtimeMap[dotPath];
|
|
193
|
+
if (cssVar) bucket[cssVar] = String(value);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
return {
|
|
198
|
+
light,
|
|
199
|
+
dark
|
|
200
|
+
};
|
|
201
|
+
}
|
|
202
|
+
//# sourceMappingURL=theming.js.map
|
|
@@ -0,0 +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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","ignoreList":[]}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// ---------------------------------------------------------------------------
|
|
4
|
+
// Types
|
|
5
|
+
// ---------------------------------------------------------------------------
|
|
6
|
+
|
|
7
|
+
/** A DTCG token leaf node. */
|
|
8
|
+
|
|
9
|
+
/** Recursive token group — every non-leaf node in a theme object. */
|
|
10
|
+
|
|
11
|
+
/** The three built-in Forge UI theme presets. */
|
|
12
|
+
|
|
13
|
+
/** Theme metadata stored under `$extensions.com.forge.ui.theme`. */
|
|
14
|
+
|
|
15
|
+
/** Override metadata stored under `$extensions.com.forge.ui.themeOverride`. */
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* A complete Forge UI theme object (DTCG-compatible).
|
|
19
|
+
*
|
|
20
|
+
* Presets (Poise, Prestige, Pulse) are full theme objects. At runtime the
|
|
21
|
+
* build-time default preset is augmented by FI overrides via
|
|
22
|
+
* `applyThemeOverrides`.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* A theme override using the hybrid input + semantic structure.
|
|
27
|
+
*
|
|
28
|
+
* - `inputs` — flat map of abstract FI-selected brand values (e.g.
|
|
29
|
+
* `brandPrimary`, `displayFont`). Palette generation expands these into
|
|
30
|
+
* full token scales at runtime.
|
|
31
|
+
* - `overrides` — per-mode flat maps of token dot-paths to resolved values
|
|
32
|
+
* for direct semantic token overrides beyond what inputs generate.
|
|
33
|
+
* - `$extensions` — required metadata including base preset and schema version.
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
// ---------------------------------------------------------------------------
|
|
37
|
+
// Constants
|
|
38
|
+
// ---------------------------------------------------------------------------
|
|
39
|
+
|
|
40
|
+
/** Current override schema version. Consuming apps gate compatibility on this. */
|
|
41
|
+
export const OVERRIDE_SCHEMA_VERSION = '1.0.0';
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Schema versions that consuming apps accept. Includes the current version and
|
|
45
|
+
* may include the immediately prior version during transition windows.
|
|
46
|
+
* @see docs/internal/token-architecture/16-override-structure.md § 4
|
|
47
|
+
*/
|
|
48
|
+
export const SUPPORTED_OVERRIDE_SCHEMA_VERSIONS = ['1.0.0'];
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Schema-level mapping from known input keys to the token path pattern each
|
|
52
|
+
* affects. Used by override application (S5) to route inputs to the correct
|
|
53
|
+
* palette/token namespace. Distinct from the full runtime map (S3).
|
|
54
|
+
*/
|
|
55
|
+
export const INPUT_TOKEN_MAP = {
|
|
56
|
+
brandPrimary: 'color.brand',
|
|
57
|
+
accentPrimary: 'color.accent',
|
|
58
|
+
basePrimary: 'color.base',
|
|
59
|
+
displayFont: 'font.display'
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* Allowed display font families per preset, consumed by the theme editor for
|
|
64
|
+
* font selection and by consuming apps for validation.
|
|
65
|
+
*/
|
|
66
|
+
export const presetFonts = {
|
|
67
|
+
poise: ['Crimson Pro', 'Bitter', 'DM Sans'],
|
|
68
|
+
prestige: ['Libre Caslon Text', 'Cormorant', 'Libre Franklin'],
|
|
69
|
+
pulse: ['Outfit', 'Manrope', 'Public Sans']
|
|
70
|
+
};
|
|
71
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["OVERRIDE_SCHEMA_VERSION","SUPPORTED_OVERRIDE_SCHEMA_VERSIONS","INPUT_TOKEN_MAP","brandPrimary","accentPrimary","basePrimary","displayFont","presetFonts","poise","prestige","pulse"],"sourceRoot":"../../src","sources":["types.ts"],"mappings":";;AAAA;AACA;AACA;;AAEA;;AAOA;;AAKA;;AAGA;;AAOA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAaA;AACA;AACA;;AAEA;AACA,OAAO,MAAMA,uBAAuB,GAAG,OAAgB;;AAEvD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,kCAAqD,GAAG,CAAC,OAAO,CAAU;;AAEvF;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAG;EAC7BC,YAAY,EAAE,aAAa;EAC3BC,aAAa,EAAE,cAAc;EAC7BC,WAAW,EAAE,YAAY;EACzBC,WAAW,EAAE;AACf,CAA2C;;AAE3C;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAA8C,GAAG;EAC5DC,KAAK,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,SAAS,CAAC;EAC3CC,QAAQ,EAAE,CAAC,mBAAmB,EAAE,WAAW,EAAE,gBAAgB,CAAC;EAC9DC,KAAK,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa;AAC5C,CAAU","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{}
|