@aglyn/shared-ui-theme 1.0.0-beta.246 → 1.0.0-beta.249

package/src/lib/util/theme-editor-fields.js

@@ -424,8 +424,12 @@ export const FONT_FAMILY_FIELD = {
         step: 1
     }
 };
-/** The raw-JSON component overrides, limited to the sanitizer's whitelist. */ export const COMPONENT_OVERRIDES_FIELD = {
-    label: 'Component overrides',
+/**
+ * The site-wide look of components: the click-only fields in
+ * {@link THEME_COMPONENT_LOOK_FIELDS}, with the full override set behind
+ * them limited to the sanitizer's whitelist.
+ */ export const COMPONENT_OVERRIDES_FIELD = {
+    label: 'Style components',
     components: HOST_THEME_COMPONENT_WHITELIST
 };
 /**
@@ -506,7 +510,7 @@ export const FONT_FAMILY_FIELD = {
     {
         id: 'components',
         label: COMPONENT_OVERRIDES_FIELD.label,
-        kind: 'json',
+        kind: 'components',
         perScheme: false,
         options: COMPONENT_OVERRIDES_FIELD.components
     }
@@ -541,8 +545,12 @@ export const FONT_FAMILY_FIELD = {
 }
 /**
  * Sets one color for one scheme, or clears it with `undefined` so the slot
- * inherits again. A palette color writes `main` and keeps whatever else its
- * record carries, and clearing it drops the record; a group member that
+ * inherits again. A palette color writes a record of `main` alone: its
+ * `light`, `dark` and `contrastText` were derived from (or authored for) the
+ * old `main`, and the editor offers no control for them, so a kept shade
+ * would go on painting the old color (an outlined button reads `dark`) with
+ * no way for the owner to see or change it. Dropped, the theme derives them
+ * from the new `main`. Clearing it drops the record; a group member that
  * leaves its group empty drops the group.
  */ export function writeThemeColor(theme, scheme, token, hex) {
     return setSchemeValue(theme, scheme, (colors)=>{
@@ -555,10 +563,19 @@ export const FONT_FAMILY_FIELD = {
         const [group, key] = token.split('.');
         if (!key) {
             const paletteKey = group;
-            if (hex) next[paletteKey] = _extends({}, next[paletteKey], {
+            if (hex) next[paletteKey] = {
                 main: hex
-            });
+            };
             else delete next[paletteKey];
+            // An accent's tint is a wash of its old `main` for the same reason, so
+            // it goes too and the theme washes one from the new color.
+            const tint = next.tint;
+            if (tint && paletteKey in tint) {
+                const rest = _extends({}, tint);
+                delete rest[paletteKey];
+                if (Object.keys(rest).length) next.tint = rest;
+                else delete next.tint;
+            }
             return next;
         }
         const groupKey = group;
@@ -865,5 +882,520 @@ function fontEntry(choice) {
         components
     });
 }
+/**
+ * Removes one leaf from the site's component overrides, and every slot,
+ * branch and component it leaves empty, so a field set back to "Theme
+ * default" stores nothing and the site inherits that property again.
+ */ export function clearComponentOverride(theme, target) {
+    var _theme_components;
+    const existing = (_theme_components = theme.components) == null ? void 0 : _theme_components[target.component];
+    if (!existing) return theme;
+    const entry = _extends({}, existing);
+    if (target.target === 'defaultProps') {
+        const props = _extends({}, entry.defaultProps);
+        delete props[target.property];
+        if (Object.keys(props).length) entry.defaultProps = props;
+        else delete entry.defaultProps;
+    } else {
+        var _target_slot;
+        const branch = target.target === 'sx' ? 'sx' : 'styleOverrides';
+        const styles = _extends({}, entry[branch]);
+        const slot = (_target_slot = target.slot) != null ? _target_slot : 'root';
+        const slotStyles = _extends({}, styles[slot]);
+        if (target.media) {
+            const query = THEME_EDITOR_MEDIA_QUERIES[target.media];
+            const scoped = _extends({}, slotStyles[query]);
+            delete scoped[target.property];
+            if (Object.keys(scoped).length) slotStyles[query] = scoped;
+            else delete slotStyles[query];
+        } else {
+            delete slotStyles[target.property];
+        }
+        if (Object.keys(slotStyles).length) styles[slot] = slotStyles;
+        else delete styles[slot];
+        if (Object.keys(styles).length) {
+            if (branch === 'sx') entry.sx = styles;
+            else entry.styleOverrides = styles;
+        } else {
+            delete entry[branch];
+        }
+    }
+    const components = _extends({}, theme.components);
+    if (Object.keys(entry).length) components[target.component] = entry;
+    else delete components[target.component];
+    const next = _extends({}, theme);
+    if (Object.keys(components).length) next.components = components;
+    else delete next.components;
+    return next;
+}
+/** The value one override leaf holds; `undefined` when the site does not set it. */ export function readComponentOverride(theme, target) {
+    var _target_slot;
+    var _theme_components, _entry_defaultProps, _slotStyles_query;
+    const entry = theme == null ? void 0 : (_theme_components = theme.components) == null ? void 0 : _theme_components[target.component];
+    if (!entry) return undefined;
+    if (target.target === 'defaultProps') return (_entry_defaultProps = entry.defaultProps) == null ? void 0 : _entry_defaultProps[target.property];
+    const styles = target.target === 'sx' ? entry.sx : entry.styleOverrides;
+    const slotStyles = styles == null ? void 0 : styles[(_target_slot = target.slot) != null ? _target_slot : 'root'];
+    if (!target.media) return slotStyles == null ? void 0 : slotStyles[target.property];
+    const query = THEME_EDITOR_MEDIA_QUERIES[target.media];
+    return slotStyles == null ? void 0 : (_slotStyles_query = slotStyles[query]) == null ? void 0 : _slotStyles_query[target.property];
+}
+export const THEME_COMPONENT_LOOK_GROUPS = [
+    {
+        group: 'button',
+        label: 'Buttons'
+    },
+    {
+        group: 'input',
+        label: 'Form inputs'
+    },
+    {
+        group: 'card',
+        label: 'Cards'
+    }
+];
+/** The select's value for a field the site does not set: the theme's own look. */ export const THEME_LOOK_DEFAULT = '';
+/** The select's value for a leaf set to something no choice names, by hand or by AI. */ export const THEME_LOOK_CUSTOM = '__custom__';
+function lookTarget(component, target, property, slot = target === 'defaultProps' ? null : 'root') {
+    return {
+        component,
+        target,
+        slot,
+        property,
+        media: null
+    };
+}
+/**
+ * Corner choices, as multiples of the site's Border radius (an `sx`
+ * `borderRadius` number is one), so a component follows the Shape & spacing
+ * slider instead of freezing a pixel value.
+ */ const CORNER_OPTIONS = [
+    {
+        value: 'square',
+        label: 'Square',
+        stored: 0
+    },
+    {
+        value: 'subtle',
+        label: 'Half the site radius',
+        stored: 0.5
+    },
+    {
+        value: 'site',
+        label: 'The site radius',
+        stored: 1
+    },
+    {
+        value: 'rounded',
+        label: 'Twice the site radius',
+        stored: 2
+    },
+    {
+        value: 'extra',
+        label: 'Three times the site radius',
+        stored: 3
+    }
+];
+const PILL_OPTION = {
+    value: 'pill',
+    label: 'Pill',
+    stored: '999px'
+};
+/**
+ * Every component look field, in the order the card shows them.
+ *
+ * Inputs style both of MUI's boxes: `MuiOutlinedInput` and `MuiFilledInput`,
+ * because the Input style choice picks between them and the other choices
+ * have to hold whichever is in use. A border color sets the outlined box's
+ * own border, which the Besigner's Input element draws, and the notched
+ * outline a stock text field draws.
+ */ export const THEME_COMPONENT_LOOK_FIELDS = [
+    {
+        id: 'button.variant',
+        group: 'button',
+        label: 'Button style',
+        kind: 'select',
+        targets: [
+            lookTarget('MuiButton', 'defaultProps', 'variant')
+        ],
+        options: [
+            {
+                value: 'contained',
+                label: 'Filled',
+                stored: 'contained'
+            },
+            {
+                value: 'outlined',
+                label: 'Outlined',
+                stored: 'outlined'
+            },
+            {
+                value: 'text',
+                label: 'Text only',
+                stored: 'text'
+            }
+        ]
+    },
+    {
+        id: 'button.corners',
+        group: 'button',
+        label: 'Button corners',
+        kind: 'select',
+        targets: [
+            lookTarget('MuiButton', 'sx', 'borderRadius')
+        ],
+        options: [
+            ...CORNER_OPTIONS,
+            PILL_OPTION
+        ]
+    },
+    {
+        id: 'button.textCase',
+        group: 'button',
+        label: 'Button text case',
+        kind: 'select',
+        targets: [
+            lookTarget('MuiButton', 'styleOverrides', 'textTransform')
+        ],
+        options: [
+            {
+                value: 'none',
+                label: 'As typed',
+                stored: 'none'
+            },
+            {
+                value: 'uppercase',
+                label: 'UPPERCASE',
+                stored: 'uppercase'
+            },
+            {
+                value: 'capitalize',
+                label: 'Capitalize Each Word',
+                stored: 'capitalize'
+            }
+        ]
+    },
+    {
+        id: 'button.weight',
+        group: 'button',
+        label: 'Button text weight',
+        kind: 'select',
+        targets: [
+            lookTarget('MuiButton', 'styleOverrides', 'fontWeight')
+        ],
+        options: [
+            {
+                value: '400',
+                label: 'Regular',
+                stored: 400
+            },
+            {
+                value: '500',
+                label: 'Medium',
+                stored: 500
+            },
+            {
+                value: '600',
+                label: 'Semibold',
+                stored: 600
+            },
+            {
+                value: '700',
+                label: 'Bold',
+                stored: 700
+            }
+        ]
+    },
+    {
+        id: 'button.padding',
+        group: 'button',
+        label: 'Button padding',
+        kind: 'select',
+        // Spacing units, so padding follows the site's Spacing unit.
+        targets: [
+            lookTarget('MuiButton', 'sx', 'px'),
+            lookTarget('MuiButton', 'sx', 'py')
+        ],
+        options: [
+            {
+                value: 'compact',
+                label: 'Compact',
+                stored: [
+                    1.5,
+                    0.5
+                ]
+            },
+            {
+                value: 'comfortable',
+                label: 'Comfortable',
+                stored: [
+                    2,
+                    0.75
+                ]
+            },
+            {
+                value: 'roomy',
+                label: 'Roomy',
+                stored: [
+                    3,
+                    1
+                ]
+            },
+            {
+                value: 'wide',
+                label: 'Wide',
+                stored: [
+                    4,
+                    1.25
+                ]
+            }
+        ]
+    },
+    {
+        id: 'input.variant',
+        group: 'input',
+        label: 'Input style',
+        kind: 'select',
+        targets: [
+            lookTarget('MuiTextField', 'defaultProps', 'variant')
+        ],
+        options: [
+            {
+                value: 'outlined',
+                label: 'Outlined',
+                stored: 'outlined'
+            },
+            {
+                value: 'filled',
+                label: 'Filled',
+                stored: 'filled'
+            }
+        ]
+    },
+    {
+        id: 'input.corners',
+        group: 'input',
+        label: 'Input corners',
+        kind: 'select',
+        targets: [
+            lookTarget('MuiOutlinedInput', 'sx', 'borderRadius'),
+            lookTarget('MuiFilledInput', 'sx', 'borderRadius')
+        ],
+        // A filled box's underline runs edge to edge; clipping it to the corners
+        // keeps it inside a rounded box.
+        companions: [
+            _extends({}, lookTarget('MuiFilledInput', 'styleOverrides', 'overflow'), {
+                value: 'hidden'
+            })
+        ],
+        options: [
+            ...CORNER_OPTIONS,
+            PILL_OPTION
+        ]
+    },
+    {
+        id: 'input.background',
+        group: 'input',
+        label: 'Input background',
+        kind: 'color',
+        targets: [
+            lookTarget('MuiOutlinedInput', 'sx', 'bgcolor'),
+            lookTarget('MuiFilledInput', 'sx', 'bgcolor')
+        ],
+        options: [
+            {
+                value: 'transparent',
+                label: 'None',
+                stored: 'transparent'
+            },
+            {
+                value: 'paper',
+                label: 'Paper',
+                stored: 'background.paper',
+                token: 'background.paper'
+            },
+            {
+                value: 'background',
+                label: 'Background',
+                stored: 'background.default',
+                token: 'background.default'
+            },
+            {
+                value: 'tintPrimary',
+                label: 'Primary tint',
+                stored: 'tint.primary',
+                token: 'tint.primary'
+            },
+            {
+                value: 'tintSecondary',
+                label: 'Secondary tint',
+                stored: 'tint.secondary',
+                token: 'tint.secondary'
+            },
+            {
+                value: 'tintTertiary',
+                label: 'Tertiary tint',
+                stored: 'tint.tertiary',
+                token: 'tint.tertiary'
+            }
+        ]
+    },
+    {
+        id: 'input.border',
+        group: 'input',
+        label: 'Input border color',
+        kind: 'color',
+        targets: [
+            lookTarget('MuiOutlinedInput', 'sx', 'borderColor'),
+            lookTarget('MuiOutlinedInput', 'sx', 'borderColor', 'notchedOutline')
+        ],
+        options: [
+            {
+                value: 'divider',
+                label: 'Divider',
+                stored: 'divider',
+                token: 'divider'
+            },
+            {
+                value: 'textSecondary',
+                label: 'Secondary text',
+                stored: 'text.secondary',
+                token: 'text.secondary'
+            },
+            {
+                value: 'text',
+                label: 'Text',
+                stored: 'text.primary',
+                token: 'text.primary'
+            },
+            {
+                value: 'primary',
+                label: 'Primary',
+                stored: 'primary.main',
+                token: 'primary'
+            },
+            {
+                value: 'secondary',
+                label: 'Secondary',
+                stored: 'secondary.main',
+                token: 'secondary'
+            },
+            {
+                value: 'tertiary',
+                label: 'Tertiary',
+                stored: 'tertiary.main',
+                token: 'tertiary'
+            }
+        ]
+    },
+    {
+        id: 'card.variant',
+        group: 'card',
+        label: 'Card style',
+        kind: 'select',
+        targets: [
+            lookTarget('MuiCard', 'defaultProps', 'variant')
+        ],
+        options: [
+            {
+                value: 'elevation',
+                label: 'Shadow',
+                stored: 'elevation'
+            },
+            {
+                value: 'outlined',
+                label: 'Outline',
+                stored: 'outlined'
+            }
+        ]
+    },
+    {
+        id: 'card.elevation',
+        group: 'card',
+        label: 'Card shadow depth',
+        kind: 'select',
+        targets: [
+            lookTarget('MuiCard', 'defaultProps', 'elevation')
+        ],
+        options: [
+            {
+                value: '0',
+                label: 'Flat',
+                stored: 0
+            },
+            {
+                value: '1',
+                label: 'Soft',
+                stored: 1
+            },
+            {
+                value: '3',
+                label: 'Medium',
+                stored: 3
+            },
+            {
+                value: '8',
+                label: 'Strong',
+                stored: 8
+            }
+        ]
+    },
+    {
+        id: 'card.corners',
+        group: 'card',
+        label: 'Card corners',
+        kind: 'select',
+        targets: [
+            lookTarget('MuiCard', 'sx', 'borderRadius')
+        ],
+        options: CORNER_OPTIONS
+    }
+];
+/** The catalog entry for a look field id. */ export function themeComponentLookField(id) {
+    const field = THEME_COMPONENT_LOOK_FIELDS.find((entry)=>entry.id === id);
+    if (!field) throw new Error(`unknown component look field ${id}`);
+    return field;
+}
+function storedFor(option, index) {
+    return Array.isArray(option.stored) ? option.stored[index] : option.stored;
+}
+/**
+ * A look field as its select shows it: the choice the site's overrides hold,
+ * {@link THEME_LOOK_DEFAULT} when they set nothing, or
+ * {@link THEME_LOOK_CUSTOM} when they set a value no choice names.
+ */ export function readComponentLook(theme, field) {
+    const values = field.targets.map((target)=>readComponentOverride(theme, target));
+    if (values.every((value)=>value === undefined)) return THEME_LOOK_DEFAULT;
+    const match = field.options.find((option)=>values.every((value, index)=>value === storedFor(option, index)));
+    return match ? match.value : THEME_LOOK_CUSTOM;
+}
+/**
+ * Sets a look field to one of its choices, or back to the theme's own look
+ * with {@link THEME_LOOK_DEFAULT}, which clears every leaf it sets. Any other
+ * value changes nothing.
+ */ export function writeComponentLook(theme, field, value) {
+    var _field_companions;
+    if (value === THEME_LOOK_DEFAULT) {
+        var _field_companions1;
+        let next = theme;
+        for (const target of [
+            ...field.targets,
+            ...(_field_companions1 = field.companions) != null ? _field_companions1 : []
+        ]){
+            next = clearComponentOverride(next, target);
+        }
+        return next;
+    }
+    const option = field.options.find((entry)=>entry.value === value);
+    if (!option) return theme;
+    let next = theme;
+    field.targets.forEach((target, index)=>{
+        next = writeComponentOverride(next, _extends({}, target, {
+            value: storedFor(option, index)
+        }));
+    });
+    for (const companion of (_field_companions = field.companions) != null ? _field_companions : [])next = writeComponentOverride(next, companion);
+    return next;
+}
 
 //# sourceMappingURL=theme-editor-fields.js.map