| 1 |
import { |
| 2 |
applyOwnedSection, |
| 3 |
collectOwnedPaths, |
| 4 |
purgeOwnedPaths, |
| 5 |
} from '@shared/lib/owned-globals'; |
| 6 |
|
| 7 |
const ownedSettings = ['color', 'custom']; |
| 8 |
// Per-leaf, so grading a heading's colour leaves its typography to the vibe layer. |
| 9 |
const ownedStyles = ['color', 'elements', 'blocks']; |
| 10 |
|
| 11 |
// A palette may declare a fontFamily leaf; the fonts layer owns it. |
| 12 |
const isExcludedPath = (_section, path) => |
| 13 |
path[path.length - 1] === 'fontFamily'; |
| 14 |
|
| 15 |
export const ownedPaletteSettingPaths = (palettes) => |
| 16 |
collectOwnedPaths({ |
| 17 |
payloads: palettes, |
| 18 |
section: 'settings', |
| 19 |
roots: ownedSettings, |
| 20 |
exclude: isExcludedPath, |
| 21 |
}); |
| 22 |
|
| 23 |
export const ownedPaletteStylePaths = (palettes) => |
| 24 |
collectOwnedPaths({ |
| 25 |
payloads: palettes, |
| 26 |
section: 'styles', |
| 27 |
roots: ownedStyles, |
| 28 |
exclude: isExcludedPath, |
| 29 |
}); |
| 30 |
|
| 31 |
const leaves = (...names) => |
| 32 |
Object.fromEntries(names.map((name) => [name, true])); |
| 33 |
|
| 34 |
const buttonColor = leaves('background', 'text'); |
| 35 |
|
| 36 |
// The theme fallback fires when /api/palettes cannot answer, so no payload names these. |
| 37 |
export const paletteShape = { |
| 38 |
settings: { |
| 39 |
color: leaves('palette', 'duotone'), |
| 40 |
custom: { |
| 41 |
color: leaves( |
| 42 |
'background-base', |
| 43 |
'background-sunken', |
| 44 |
'background-tint-1', |
| 45 |
'background-tint-1-ink', |
| 46 |
'background-tint-1-weak', |
| 47 |
'background-tint-2', |
| 48 |
'background-tint-2-ink', |
| 49 |
'background-tint-2-weak', |
| 50 |
'background-tint-3', |
| 51 |
'background-tint-3-ink', |
| 52 |
'background-tint-3-weak', |
| 53 |
'icon-ink', |
| 54 |
'icon-surface', |
| 55 |
'text-strong', |
| 56 |
'text-weak', |
| 57 |
), |
| 58 |
elements: { |
| 59 |
button: { |
| 60 |
color: buttonColor, |
| 61 |
':hover': { color: buttonColor }, |
| 62 |
':focus': { color: buttonColor }, |
| 63 |
}, |
| 64 |
}, |
| 65 |
}, |
| 66 |
}, |
| 67 |
styles: { |
| 68 |
color: leaves('text'), |
| 69 |
elements: { heading: { color: leaves('text') } }, |
| 70 |
blocks: { |
| 71 |
'core/pullquote': { |
| 72 |
color: leaves('background'), |
| 73 |
border: leaves('color'), |
| 74 |
}, |
| 75 |
'core/separator': { color: leaves('text') }, |
| 76 |
}, |
| 77 |
}, |
| 78 |
}; |
| 79 |
|
| 80 |
export const purgePaletteGlobals = ({ settings, styles }) => ({ |
| 81 |
settings: purgeOwnedPaths(settings, ownedPaletteSettingPaths([paletteShape])), |
| 82 |
styles: purgeOwnedPaths(styles, ownedPaletteStylePaths([paletteShape])), |
| 83 |
}); |
| 84 |
|
| 85 |
export const applyPaletteGlobals = ({ |
| 86 |
currentSettings, |
| 87 |
paletteSettings, |
| 88 |
palettes, |
| 89 |
}) => |
| 90 |
applyOwnedSection( |
| 91 |
currentSettings, |
| 92 |
paletteSettings, |
| 93 |
ownedPaletteSettingPaths(palettes), |
| 94 |
); |
| 95 |
|
| 96 |
export const applyPaletteStyles = ({ |
| 97 |
currentStyles, |
| 98 |
paletteStyles, |
| 99 |
palettes, |
| 100 |
}) => |
| 101 |
applyOwnedSection( |
| 102 |
currentStyles, |
| 103 |
paletteStyles, |
| 104 |
ownedPaletteStylePaths(palettes), |
| 105 |
); |
| 106 |
|
