@cdx-ui/styles 0.0.1-beta.53 → 0.0.1-beta.55
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
package/css/theme.css
CHANGED
|
@@ -406,7 +406,7 @@
|
|
|
406
406
|
--color-surface-action-tint-active: var(--color-brand-300);
|
|
407
407
|
--color-surface-action-tint-hover: var(--color-brand-200);
|
|
408
408
|
--color-surface-backdrop: rgba(0, 0, 0, 0.5);
|
|
409
|
-
--color-surface-background: var(--color-base-
|
|
409
|
+
--color-surface-background: var(--color-base-50);
|
|
410
410
|
--color-surface-brand-core: var(--color-brand-input);
|
|
411
411
|
--color-surface-brand-strong: var(--color-brand-700);
|
|
412
412
|
--color-surface-brand-subtle: var(--color-brand-200);
|
|
@@ -535,7 +535,7 @@
|
|
|
535
535
|
--color-surface-action-tint-active: var(--color-brand-300);
|
|
536
536
|
--color-surface-action-tint-hover: var(--color-brand-200);
|
|
537
537
|
--color-surface-backdrop: rgba(0, 0, 0, 0.5);
|
|
538
|
-
--color-surface-background: var(--color-base-
|
|
538
|
+
--color-surface-background: var(--color-base-50);
|
|
539
539
|
--color-surface-brand-core: var(--color-brand-input);
|
|
540
540
|
--color-surface-brand-strong: var(--color-brand-700);
|
|
541
541
|
--color-surface-brand-subtle: var(--color-brand-200);
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.DEFAULT_PRESET = void 0;
|
|
7
|
+
exports.applyThemeOverride = applyThemeOverride;
|
|
8
|
+
var _prestigeVsDefault = _interopRequireDefault(require("../runtime/prestige-vs-default.json"));
|
|
9
|
+
var _pulseVsDefault = _interopRequireDefault(require("../runtime/pulse-vs-default.json"));
|
|
10
|
+
var _tokenToCssVar = _interopRequireDefault(require("../runtime/token-to-css-var.json"));
|
|
11
|
+
var _theming = require("./theming");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
// ---------------------------------------------------------------------------
|
|
14
|
+
// Constants
|
|
15
|
+
// ---------------------------------------------------------------------------
|
|
16
|
+
|
|
17
|
+
/** The build-time default preset. Apps ship with Poise baked into CSS. */
|
|
18
|
+
const DEFAULT_PRESET = exports.DEFAULT_PRESET = 'poise';
|
|
19
|
+
|
|
20
|
+
// ---------------------------------------------------------------------------
|
|
21
|
+
// Preset patch lookup
|
|
22
|
+
// ---------------------------------------------------------------------------
|
|
23
|
+
|
|
24
|
+
const PRESET_PATCHES = {
|
|
25
|
+
poise: null,
|
|
26
|
+
prestige: _prestigeVsDefault.default,
|
|
27
|
+
pulse: _pulseVsDefault.default
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
// ---------------------------------------------------------------------------
|
|
31
|
+
// Platform detection
|
|
32
|
+
// ---------------------------------------------------------------------------
|
|
33
|
+
|
|
34
|
+
function detectPlatform() {
|
|
35
|
+
try {
|
|
36
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
37
|
+
const {
|
|
38
|
+
Platform: RNPlatform
|
|
39
|
+
} = require('react-native');
|
|
40
|
+
const os = RNPlatform.OS;
|
|
41
|
+
if (os === 'ios' || os === 'android') return os;
|
|
42
|
+
return 'web';
|
|
43
|
+
} catch {
|
|
44
|
+
return 'web';
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// ---------------------------------------------------------------------------
|
|
49
|
+
// Result type
|
|
50
|
+
// ---------------------------------------------------------------------------
|
|
51
|
+
|
|
52
|
+
// ---------------------------------------------------------------------------
|
|
53
|
+
// Options
|
|
54
|
+
// ---------------------------------------------------------------------------
|
|
55
|
+
|
|
56
|
+
// ---------------------------------------------------------------------------
|
|
57
|
+
// Orchestrator
|
|
58
|
+
// ---------------------------------------------------------------------------
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Apply a `ThemeOverride` end-to-end: schema version gate, preset patch
|
|
62
|
+
* selection, palette generation, and `Uniwind.updateCSSVariables` calls.
|
|
63
|
+
*
|
|
64
|
+
* Encapsulates the full runtime theme application sequence so consuming
|
|
65
|
+
* apps don't need to orchestrate lower-level utilities or import Uniwind
|
|
66
|
+
* directly.
|
|
67
|
+
*/
|
|
68
|
+
function applyThemeOverride(override, options = {}) {
|
|
69
|
+
const {
|
|
70
|
+
runtimeMap = _tokenToCssVar.default,
|
|
71
|
+
runtimePlatform = detectPlatform()
|
|
72
|
+
} = options;
|
|
73
|
+
|
|
74
|
+
// --- Schema version gate ---
|
|
75
|
+
if (!(0, _theming.isSchemaVersionSupported)(override)) {
|
|
76
|
+
return {
|
|
77
|
+
applied: false,
|
|
78
|
+
reason: 'unsupported_schema_version'
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
const basePreset = override.$extensions['com.forge.ui.themeOverride'].basePreset;
|
|
82
|
+
const hasInputs = override.inputs !== undefined && Object.keys(override.inputs).length > 0;
|
|
83
|
+
const hasOverrides = override.overrides !== undefined && Object.keys(override.overrides).length > 0;
|
|
84
|
+
|
|
85
|
+
// --- Metadata-only check ---
|
|
86
|
+
const isDefaultPreset = basePreset === DEFAULT_PRESET;
|
|
87
|
+
if (isDefaultPreset && !hasInputs && !hasOverrides) {
|
|
88
|
+
return {
|
|
89
|
+
applied: false,
|
|
90
|
+
reason: 'no_theme_changes'
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// --- Preset patch step ---
|
|
95
|
+
let presetMaps = {
|
|
96
|
+
light: {},
|
|
97
|
+
dark: {}
|
|
98
|
+
};
|
|
99
|
+
if (!isDefaultPreset) {
|
|
100
|
+
const patch = PRESET_PATCHES[basePreset];
|
|
101
|
+
if (patch) {
|
|
102
|
+
presetMaps = (0, _theming.presetPatchToUniwindMaps)(patch, runtimeMap, runtimePlatform);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// --- FI override step ---
|
|
107
|
+
let overrideMaps = {
|
|
108
|
+
light: {},
|
|
109
|
+
dark: {}
|
|
110
|
+
};
|
|
111
|
+
if (hasInputs || hasOverrides) {
|
|
112
|
+
overrideMaps = (0, _theming.themeOverrideToUniwindMaps)(override, runtimeMap);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// --- Merge per mode (FI wins on collision) ---
|
|
116
|
+
const mergedLight = {
|
|
117
|
+
...presetMaps.light,
|
|
118
|
+
...overrideMaps.light
|
|
119
|
+
};
|
|
120
|
+
const mergedDark = {
|
|
121
|
+
...presetMaps.dark,
|
|
122
|
+
...overrideMaps.dark
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
// --- Non-default preset with no FI changes still needs patch application ---
|
|
126
|
+
if (Object.keys(mergedLight).length === 0 && Object.keys(mergedDark).length === 0) {
|
|
127
|
+
return {
|
|
128
|
+
applied: false,
|
|
129
|
+
reason: 'no_theme_changes'
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// --- Apply via Uniwind ---
|
|
134
|
+
try {
|
|
135
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
136
|
+
const {
|
|
137
|
+
Uniwind
|
|
138
|
+
} = require('uniwind');
|
|
139
|
+
if (Object.keys(mergedLight).length > 0) {
|
|
140
|
+
Uniwind.updateCSSVariables('light', mergedLight);
|
|
141
|
+
}
|
|
142
|
+
if (Object.keys(mergedDark).length > 0) {
|
|
143
|
+
Uniwind.updateCSSVariables('dark', mergedDark);
|
|
144
|
+
}
|
|
145
|
+
} catch {
|
|
146
|
+
throw new Error('applyThemeOverride requires "uniwind" to be installed. ' + 'Add it as a dependency in your app.');
|
|
147
|
+
}
|
|
148
|
+
return {
|
|
149
|
+
applied: true,
|
|
150
|
+
light: mergedLight,
|
|
151
|
+
dark: mergedDark
|
|
152
|
+
};
|
|
153
|
+
}
|
|
154
|
+
//# sourceMappingURL=applyThemeOverride.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_prestigeVsDefault","_interopRequireDefault","require","_pulseVsDefault","_tokenToCssVar","_theming","e","__esModule","default","DEFAULT_PRESET","exports","PRESET_PATCHES","poise","prestige","prestigePatch","pulse","pulsePatch","detectPlatform","Platform","RNPlatform","os","OS","applyThemeOverride","override","options","runtimeMap","defaultRuntimeMap","runtimePlatform","isSchemaVersionSupported","applied","reason","basePreset","$extensions","hasInputs","inputs","undefined","Object","keys","length","hasOverrides","overrides","isDefaultPreset","presetMaps","light","dark","patch","presetPatchToUniwindMaps","overrideMaps","themeOverrideToUniwindMaps","mergedLight","mergedDark","Uniwind","updateCSSVariables","Error"],"sourceRoot":"../../src","sources":["applyThemeOverride.ts"],"mappings":"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","ignoreList":[]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -3,7 +3,72 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
6
|
+
Object.defineProperty(exports, "DEFAULT_PRESET", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _theming.DEFAULT_PRESET;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "INPUT_TOKEN_MAP", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _types.INPUT_TOKEN_MAP;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "OVERRIDE_SCHEMA_VERSION", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _types.OVERRIDE_SCHEMA_VERSION;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "SUPPORTED_OVERRIDE_SCHEMA_VERSIONS", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _types.SUPPORTED_OVERRIDE_SCHEMA_VERSIONS;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(exports, "applyThemeOverride", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return _theming.applyThemeOverride;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
Object.defineProperty(exports, "generateColorScale", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () {
|
|
39
|
+
return _palette.generateColorScale;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(exports, "generatePalettesFromInputs", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function () {
|
|
45
|
+
return _palette.generatePalettesFromInputs;
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
Object.defineProperty(exports, "isSchemaVersionSupported", {
|
|
49
|
+
enumerable: true,
|
|
50
|
+
get: function () {
|
|
51
|
+
return _theming.isSchemaVersionSupported;
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
Object.defineProperty(exports, "presetFonts", {
|
|
55
|
+
enumerable: true,
|
|
56
|
+
get: function () {
|
|
57
|
+
return _types.presetFonts;
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
Object.defineProperty(exports, "presetPatchToUniwindMaps", {
|
|
61
|
+
enumerable: true,
|
|
62
|
+
get: function () {
|
|
63
|
+
return _theming.presetPatchToUniwindMaps;
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
Object.defineProperty(exports, "themeOverrideToUniwindMaps", {
|
|
67
|
+
enumerable: true,
|
|
68
|
+
get: function () {
|
|
69
|
+
return _theming.themeOverrideToUniwindMaps;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
7
72
|
Object.defineProperty(exports, "useCdxFonts", {
|
|
8
73
|
enumerable: true,
|
|
9
74
|
get: function () {
|
|
@@ -16,78 +81,9 @@ Object.defineProperty(exports, "useForgeFonts", {
|
|
|
16
81
|
return _useForgeFonts.useForgeFonts;
|
|
17
82
|
}
|
|
18
83
|
});
|
|
84
|
+
var _types = require("./types");
|
|
85
|
+
var _palette = require("./palette");
|
|
86
|
+
var _theming = require("./theming");
|
|
19
87
|
var _useForgeFonts = require("./useForgeFonts");
|
|
20
88
|
var _useCdxFonts = require("./useCdxFonts");
|
|
21
|
-
// ---------------------------------------------------------------------------
|
|
22
|
-
// Types
|
|
23
|
-
// ---------------------------------------------------------------------------
|
|
24
|
-
|
|
25
|
-
/** A DTCG token leaf node. */
|
|
26
|
-
|
|
27
|
-
/** Recursive token group — every non-leaf node in a theme object. */
|
|
28
|
-
|
|
29
|
-
/** The three built-in Forge UI theme presets. */
|
|
30
|
-
|
|
31
|
-
/** Theme metadata stored under `$extensions.com.forge.ui.theme`. */
|
|
32
|
-
|
|
33
|
-
/** Override metadata stored under `$extensions.com.forge.ui.themeOverride`. */
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* A complete Forge UI theme object (DTCG-compatible).
|
|
37
|
-
*
|
|
38
|
-
* Presets (Poise, Prestige, Pulse) are full theme objects. At runtime the
|
|
39
|
-
* build-time default preset is augmented by FI overrides via
|
|
40
|
-
* `applyThemeOverrides`.
|
|
41
|
-
*/
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* A theme override using the hybrid input + semantic structure.
|
|
45
|
-
*
|
|
46
|
-
* - `inputs` — flat map of abstract FI-selected brand values (e.g.
|
|
47
|
-
* `brandPrimary`, `displayFont`). Palette generation expands these into
|
|
48
|
-
* full token scales at runtime.
|
|
49
|
-
* - `overrides` — per-mode flat maps of token dot-paths to resolved values
|
|
50
|
-
* for direct semantic token overrides beyond what inputs generate.
|
|
51
|
-
* - `$extensions` — required metadata including base preset and schema version.
|
|
52
|
-
*/
|
|
53
|
-
|
|
54
|
-
// ---------------------------------------------------------------------------
|
|
55
|
-
// Constants
|
|
56
|
-
// ---------------------------------------------------------------------------
|
|
57
|
-
|
|
58
|
-
/** Current override schema version. Consuming apps gate compatibility on this. */
|
|
59
|
-
const OVERRIDE_SCHEMA_VERSION = exports.OVERRIDE_SCHEMA_VERSION = '1.0.0';
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Schema versions that consuming apps accept. Includes the current version and
|
|
63
|
-
* may include the immediately prior version during transition windows.
|
|
64
|
-
* @see docs/internal/token-architecture/16-override-structure.md § 4
|
|
65
|
-
*/
|
|
66
|
-
const SUPPORTED_OVERRIDE_SCHEMA_VERSIONS = exports.SUPPORTED_OVERRIDE_SCHEMA_VERSIONS = ['1.0.0'];
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
* Schema-level mapping from known input keys to the token path pattern each
|
|
70
|
-
* affects. Used by override application (S5) to route inputs to the correct
|
|
71
|
-
* palette/token namespace. Distinct from the full runtime map (S3).
|
|
72
|
-
*/
|
|
73
|
-
const INPUT_TOKEN_MAP = exports.INPUT_TOKEN_MAP = {
|
|
74
|
-
brandPrimary: 'color.brand',
|
|
75
|
-
accentPrimary: 'color.accent',
|
|
76
|
-
basePrimary: 'color.base',
|
|
77
|
-
displayFont: 'font.display'
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
/**
|
|
81
|
-
* Allowed display font families per preset, consumed by the theme editor for
|
|
82
|
-
* font selection and by consuming apps for validation.
|
|
83
|
-
*/
|
|
84
|
-
const presetFonts = exports.presetFonts = {
|
|
85
|
-
poise: ['Crimson Pro', 'Bitter', 'DM Sans'],
|
|
86
|
-
prestige: ['Libre Caslon Text', 'Cormorant', 'Libre Franklin'],
|
|
87
|
-
pulse: ['Outfit', 'Manrope', 'Public Sans']
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
// ---------------------------------------------------------------------------
|
|
91
|
-
// Hooks
|
|
92
|
-
// ---------------------------------------------------------------------------
|
|
93
89
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
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":[]}
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.generateColorScale = generateColorScale;
|
|
7
|
+
exports.generatePalettesFromInputs = generatePalettesFromInputs;
|
|
8
|
+
var _leonardoContrastColors = require("@adobe/leonardo-contrast-colors");
|
|
9
|
+
// ---------------------------------------------------------------------------
|
|
10
|
+
// Types
|
|
11
|
+
// ---------------------------------------------------------------------------
|
|
12
|
+
|
|
13
|
+
/** Palette step keys produced by `generateColorScale`. */
|
|
14
|
+
|
|
15
|
+
/** Token category that supports palette generation. */
|
|
16
|
+
|
|
17
|
+
/** Map of palette step → resolved hex color. */
|
|
18
|
+
|
|
19
|
+
/** Map of token dot-path → resolved hex color (e.g. `color.brand.500` → `#548cdc`). */
|
|
20
|
+
|
|
21
|
+
// ---------------------------------------------------------------------------
|
|
22
|
+
// Constants
|
|
23
|
+
// ---------------------------------------------------------------------------
|
|
24
|
+
|
|
25
|
+
const REFERENCE_BACKGROUND = '#ffffff';
|
|
26
|
+
const PALETTE_STEPS = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'];
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Contrast ratios for each palette step against white (#ffffff).
|
|
30
|
+
*
|
|
31
|
+
* Step 700 targets WCAG AA for normal text (≥ 4.5:1).
|
|
32
|
+
*/
|
|
33
|
+
const CONTRAST_RATIOS = {
|
|
34
|
+
'50': 1.04,
|
|
35
|
+
'100': 1.16,
|
|
36
|
+
'200': 1.46,
|
|
37
|
+
'300': 1.85,
|
|
38
|
+
'400': 2.45,
|
|
39
|
+
'500': 3.4,
|
|
40
|
+
'600': 4.8,
|
|
41
|
+
'700': 6.4,
|
|
42
|
+
'800': 8.6,
|
|
43
|
+
'900': 12,
|
|
44
|
+
'950': 16.8
|
|
45
|
+
};
|
|
46
|
+
const HEX_REGEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
|
|
47
|
+
|
|
48
|
+
// ---------------------------------------------------------------------------
|
|
49
|
+
// Validation
|
|
50
|
+
// ---------------------------------------------------------------------------
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Validate and normalise a hex color string.
|
|
54
|
+
*
|
|
55
|
+
* Accepts `#RGB` (4 chars) or `#RRGGBB` (7 chars). Throws a descriptive
|
|
56
|
+
* `TypeError` for any other input.
|
|
57
|
+
*
|
|
58
|
+
* @returns The normalised 7-character hex string (e.g. `#aabbcc`).
|
|
59
|
+
*/
|
|
60
|
+
function validateHex(hex) {
|
|
61
|
+
if (typeof hex !== 'string') {
|
|
62
|
+
throw new TypeError(`Invalid hex color: expected a string, received ${typeof hex}`);
|
|
63
|
+
}
|
|
64
|
+
if (!HEX_REGEX.test(hex)) {
|
|
65
|
+
throw new TypeError(`Invalid hex color "${hex}": must be a 4-character (#RGB) or 7-character (#RRGGBB) hex string starting with "#"`);
|
|
66
|
+
}
|
|
67
|
+
if (hex.length === 4) {
|
|
68
|
+
const [, r, g, b] = hex;
|
|
69
|
+
return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
|
|
70
|
+
}
|
|
71
|
+
return hex.toLowerCase();
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// ---------------------------------------------------------------------------
|
|
75
|
+
// Core generation — wraps Leonardo behind a thin interface
|
|
76
|
+
// ---------------------------------------------------------------------------
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Generate an 11-step contrast-based color scale from a single hex color.
|
|
80
|
+
*
|
|
81
|
+
* Uses `@adobe/leonardo-contrast-colors` internally. The generation algorithm
|
|
82
|
+
* is wrapped behind this function so the underlying library is swappable
|
|
83
|
+
* without changing the public API.
|
|
84
|
+
*
|
|
85
|
+
* @param hex - A valid hex color string (`#RGB` or `#RRGGBB`).
|
|
86
|
+
* @param category - The token namespace (`'brand'` or `'accent'`).
|
|
87
|
+
* @returns A `PaletteTokenMap` keyed by token dot-paths
|
|
88
|
+
* (e.g. `"color.brand.50"` through `"color.brand.950"` plus `"color.brand.input"`).
|
|
89
|
+
*/
|
|
90
|
+
function generateColorScale(hex, category) {
|
|
91
|
+
const normalised = validateHex(hex);
|
|
92
|
+
const ratiosObject = {};
|
|
93
|
+
for (const step of PALETTE_STEPS) {
|
|
94
|
+
ratiosObject[step] = CONTRAST_RATIOS[step];
|
|
95
|
+
}
|
|
96
|
+
const color = new _leonardoContrastColors.Color({
|
|
97
|
+
name: 'palette',
|
|
98
|
+
colorKeys: [normalised],
|
|
99
|
+
colorSpace: 'CAM02p',
|
|
100
|
+
ratios: ratiosObject,
|
|
101
|
+
smooth: true,
|
|
102
|
+
output: 'HEX'
|
|
103
|
+
});
|
|
104
|
+
const bg = new _leonardoContrastColors.BackgroundColor({
|
|
105
|
+
name: 'background',
|
|
106
|
+
colorKeys: [REFERENCE_BACKGROUND],
|
|
107
|
+
colorSpace: 'CAM02p',
|
|
108
|
+
smooth: true,
|
|
109
|
+
ratios: [],
|
|
110
|
+
output: 'HEX'
|
|
111
|
+
});
|
|
112
|
+
const theme = new _leonardoContrastColors.Theme({
|
|
113
|
+
colors: [color],
|
|
114
|
+
backgroundColor: bg,
|
|
115
|
+
lightness: 100,
|
|
116
|
+
contrast: 1,
|
|
117
|
+
saturation: 100,
|
|
118
|
+
output: 'HEX',
|
|
119
|
+
formula: 'wcag2'
|
|
120
|
+
});
|
|
121
|
+
const pairs = theme.contrastColorPairs;
|
|
122
|
+
const tokenPrefix = `color.${category}`;
|
|
123
|
+
const result = {};
|
|
124
|
+
for (const step of PALETTE_STEPS) {
|
|
125
|
+
result[`${tokenPrefix}.${step}`] = pairs[step].toLowerCase();
|
|
126
|
+
}
|
|
127
|
+
result[`${tokenPrefix}.input`] = normalised;
|
|
128
|
+
return result;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// ---------------------------------------------------------------------------
|
|
132
|
+
// Convenience wrapper
|
|
133
|
+
// ---------------------------------------------------------------------------
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Colour-input keys whose token path starts with `color.` — these trigger
|
|
137
|
+
* palette generation. Mirrors the colour entries from `INPUT_TOKEN_MAP`
|
|
138
|
+
* (defined in the package barrel) without creating a circular import.
|
|
139
|
+
*
|
|
140
|
+
* Keep in sync with `INPUT_TOKEN_MAP` in `./index.ts`.
|
|
141
|
+
*/
|
|
142
|
+
const COLOR_INPUT_ENTRIES = [['brandPrimary', 'color.brand'], ['accentPrimary', 'color.accent']];
|
|
143
|
+
|
|
144
|
+
/**
|
|
145
|
+
* Generate palettes for all colour inputs in a theme override `inputs` object.
|
|
146
|
+
*
|
|
147
|
+
* Iterates over known colour-input keys that map to a `color.*` token
|
|
148
|
+
* namespace. For each matching key present in `inputs`, runs
|
|
149
|
+
* `generateColorScale` and merges the results into a single flat map of
|
|
150
|
+
* token dot-paths to hex values — ready for the S5 override application
|
|
151
|
+
* merge step.
|
|
152
|
+
*
|
|
153
|
+
* Non-colour inputs (e.g. `displayFont`) are silently skipped.
|
|
154
|
+
*
|
|
155
|
+
* @param inputs - The `inputs` object from a `ThemeOverride`.
|
|
156
|
+
* @returns A merged `Record<string, string>` of all generated token
|
|
157
|
+
* dot-paths to hex values.
|
|
158
|
+
*
|
|
159
|
+
* @example
|
|
160
|
+
* ```ts
|
|
161
|
+
* const inputs = { brandPrimary: '#0052cc', accentPrimary: '#FF8C42', displayFont: 'Poppins' };
|
|
162
|
+
* const result = generatePalettesFromInputs(inputs);
|
|
163
|
+
* // {
|
|
164
|
+
* // "color.brand.50": "#...", …, "color.brand.input": "#0052cc",
|
|
165
|
+
* // "color.accent.50": "#...", …, "color.accent.input": "#ff8c42"
|
|
166
|
+
* // }
|
|
167
|
+
* ```
|
|
168
|
+
*/
|
|
169
|
+
function generatePalettesFromInputs(inputs) {
|
|
170
|
+
const result = {};
|
|
171
|
+
for (const [inputKey, tokenPath] of COLOR_INPUT_ENTRIES) {
|
|
172
|
+
const value = inputs[inputKey];
|
|
173
|
+
if (typeof value !== 'string') continue;
|
|
174
|
+
const category = tokenPath.replace('color.', '');
|
|
175
|
+
const scale = generateColorScale(value, category);
|
|
176
|
+
Object.assign(result, scale);
|
|
177
|
+
}
|
|
178
|
+
return result;
|
|
179
|
+
}
|
|
180
|
+
//# sourceMappingURL=palette.js.map
|
|
@@ -0,0 +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":"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","ignoreList":[]}
|