@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page/utils/container-text-color.util.ts

@@ -7,26 +7,43 @@
  * surface they sit on, and what colour they default to, so the renderer
  * (`view-model.util.ts`) and the maker's Text Style panel cannot disagree — the same
  * reason `resolveTextColor` lives in one place (`text-style.util.ts`).
+ *
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: the v21 -> v22 colour bake calls
+ * `containerTextColorDefaults` and `titleSurfaceContrastFill`. Pin that migration's behaviour
+ * before changing either helper after it releases.
  */
 import type {
   Content,
   PageStyles,
   BrandPageType,
   ColorItem,
+  ShopContent,
+  SocialLinksContent,
   TextStyleDeclaration,
 } from '../models';
 import { BRAND_PAGE_TYPES } from '../models';
-import type { ContentTextStylePropertyKey } from '../constants';
+import {
+  CONTENT_TEXT_STYLE_PROPERTY_KEYS,
+  type ContentTextStylePropertyKey,
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_CARD_LEFT_IMAGE,
+} from '../constants';
 import {
   backgroundColorFromStyle,
   isTransparentColour,
   isHexTransparent,
 } from './color.util';
+import { isButtonContent } from './model.util';
 import {
   resolveColorReference,
   bestContrastBrandRole,
+  bestContrastNeutralRole,
+  firstViableContrastRole,
   toColorVarReference,
   roleValueOrDefault,
+  isBlankColorValue,
+  PALETTE_COLOR_IDS,
+  STRATEGY_COPY_MIN_CONTRAST,
 } from './color-palette.util';
 
 /**
@@ -42,11 +59,17 @@ export const CONTAINER_BOUND_TEXT_STYLE_KEYS: Partial<
   Record<Content['type'], ContentTextStylePropertyKey[]>
 > = {
   'mailing-list': ['titleStyle'],
-  'request-payment': ['titleStyle', 'descriptionStyle', 'itemTextStyle'],
+  'request-payment': [
+    'titleStyle',
+    'descriptionStyle',
+    'successMessageStyle',
+    'itemTextStyle',
+  ],
   'support-me': [
     'titleStyle',
     'headingStyle',
     'descriptionStyle',
+    'successMessageStyle',
     'itemTextStyle',
   ],
   'contact-form': ['titleStyle', 'descriptionStyle', 'successMessageStyle'],
@@ -67,6 +90,22 @@ const BUTTON_BOUND_TEXT_STYLE_KEYS: Partial<
   'support-me': ['itemTextStyle'],
 };
 
+/**
+ * Shop's title and description sit on the band (`backgroundStyle`), never the product
+ * tile (`fillColor`) — a sibling surface stacked below them, not behind them. Routed here
+ * rather than through `topmostSolidSurface`'s generic top-of-stack scan, which would pick
+ * the tile fill first and MIScolour the title against a surface it doesn't sit on.
+ */
+const SHOP_BAND_ROUTED_KEYS = new Set<ContentTextStylePropertyKey>([
+  'titleStyle',
+  'descriptionStyle',
+]);
+
+const isShopBandRoutedField = (
+  content: Content,
+  key: ContentTextStylePropertyKey,
+): boolean => content.type === 'shop-section' && SHOP_BAND_ROUTED_KEYS.has(key);
+
 /**
  * The filled surface the block's text sits on: the block's OWN container colour
  * (`backgroundStyle`, or `cardStyle` for contact-form) when set, else the global
@@ -121,21 +160,78 @@ const optionButtonSurfaceForContent = (
   return backgroundColorFromStyle(own) ? own : styles.buttonStyles?.style;
 };
 
+// The button label owns its own fill/text pairing and copyright is page-level — neither
+// contrasts a SECTION surface, so they get no birth-time contrast bake. This is keyed on the
+// FIELD name: `buttonTextStyle` is the CTA button embedded in a section (banner/about/…). A
+// STANDALONE button (general-link + its variants) instead keeps its label in `titleStyle` — a
+// key shared with ordinary headings — so that case is handled per content type, not here
+// (`isButtonLabelField`).
+const NON_SECTION_SURFACE_KEYS = new Set<ContentTextStylePropertyKey>([
+  'buttonTextStyle',
+  'copyrightStyle',
+]);
+
 /**
- * The surface a single container-bound text field contrasts: the option-button fill for
- * a button-bound field (`itemTextStyle`), else the block's card. THE per-field router
- * shared by the render default and the creation-time bake, so they cannot disagree on
- * which surface a field sits on.
+ * A standalone button's LABEL (`isButtonContent` → general-link, website, email, phone, and the
+ * social buttons — all store the label in `titleStyle`). Like `buttonTextStyle`, the label sits on
+ * the button fill, not a section surface: the button owns its own fill/text pairing, so it must not
+ * bake. With no baked colour the label inherits the button's on-fill text colour at render
+ * (`buttonStyles.style.color`), which is guaranteed to contrast the fill — whereas baking would
+ * contrast the PAGE instead and collide with the fill (the default theme paints both from the same
+ * brand role, hiding the text).
+ */
+const isButtonLabelField = (
+  content: Content,
+  key: ContentTextStylePropertyKey,
+): boolean => key === 'titleStyle' && isButtonContent(content);
+
+/**
+ * The colour the maker's Text Style swatch shows for a STANDALONE button's LABEL. The label is left
+ * uncoloured on the element (`isButtonLabelField` exempts it from the birth-time bake) and inherits
+ * the button's on-fill colour at render via CSS (`buttonStyles.style.color`). The panel has no
+ * inherited value to read off the element, so it derives the SAME colour here — the swatch matches
+ * the canvas, both from one helper, exactly as `containerTextColorDefaults` feeds the swatch for
+ * container-bound fields. `undefined` for a non-label field or a button with no text colour.
+ */
+export const buttonLabelColorDefault = (
+  content: Content,
+  styles: PageStyles,
+  key: string,
+): string | undefined =>
+  isButtonLabelField(content, key as ContentTextStylePropertyKey)
+    ? styles.buttonStyles?.style?.color || undefined
+    : undefined;
+
+/**
+ * The surface a single text field contrasts — THE per-field router shared by the render
+ * default and the creation-time bake, so they cannot disagree on which surface a field sits
+ * on: the option-button fill for a button-bound field (`itemTextStyle`), the block's card
+ * for a container-bound field (with the brandSite contact-form carve-out), the section's own
+ * topmost solid surface for any other text field, and nothing for the button label /
+ * copyright (they don't sit on a section surface).
  */
 const surfaceForTextStyleKey = (
   content: Content,
   styles: PageStyles,
   key: ContentTextStylePropertyKey,
   brandPageType?: BrandPageType,
-): BrandPageCssStyle | undefined =>
-  BUTTON_BOUND_TEXT_STYLE_KEYS[content.type]?.includes(key)
-    ? optionButtonSurfaceForContent(content, styles)
-    : containerSurfaceForContent(content, styles, brandPageType);
+): BrandPageCssStyle | undefined => {
+  if (NON_SECTION_SURFACE_KEYS.has(key)) {
+    return undefined;
+  }
+
+  if (BUTTON_BOUND_TEXT_STYLE_KEYS[content.type]?.includes(key)) {
+    return optionButtonSurfaceForContent(content, styles);
+  }
+
+  if (isShopBandRoutedField(content, key)) {
+    return (content as ShopContent).backgroundStyle;
+  }
+
+  return CONTAINER_BOUND_TEXT_STYLE_KEYS[content.type]?.includes(key)
+    ? containerSurfaceForContent(content, styles, brandPageType)
+    : topmostSolidSurface(content, styles.colors);
+};
 
 // A surface is worth contrasting only when it paints a visible solid. `transparent`
 // means the text really sits on whatever is behind, so defer to the global colour.
@@ -316,9 +412,10 @@ export const rteFrameFallbackColour = (
  * resolved (`withRoleDefaults`); `bestContrastBrandRole` itself reads raw values because
  * its other callers pair it with their own blank-role fallbacks.
  */
-const cardContrastColour = (
+const contrastRoleColour = (
   surface: BrandPageCssStyle | undefined,
   styles: PageStyles,
+  best: (against: string, colors: ColorItem[]) => string | undefined,
 ): string | undefined => {
   const surfaceColour = resolveColorReference(
     backgroundColorFromStyle(surface) ?? '',
@@ -330,71 +427,400 @@ const cardContrastColour = (
     return undefined;
   }
 
-  const role = bestContrastBrandRole(
+  const role = best(
     surfaceColour,
     (styles.colors ?? []).map((c) => ({
       ...c,
       value: roleValueOrDefault(c.id, c.value) ?? c.value,
     })),
-    0,
   );
 
   return role ? toColorVarReference(role) : undefined;
 };
 
+// Brand roles in preference order: logo-text (`palette-0`) leads, logo-background (`palette-1`)
+// second — the site-identity hierarchy every text field follows before contrast is even compared.
+const BRAND_ROLE_HIERARCHY = [
+  PALETTE_COLOR_IDS.primary,
+  PALETTE_COLOR_IDS.secondary,
+];
+
+// The first brand role (by the hierarchy) that clears the minimum viable contrast on `against`.
+const viableBrandRole = (
+  against: string,
+  colors: ColorItem[],
+): string | undefined =>
+  firstViableContrastRole(
+    against,
+    colors,
+    BRAND_ROLE_HIERARCHY,
+    STRATEGY_COPY_MIN_CONTRAST,
+  );
+
 /**
- * Bakes a readable colour into a container-bound block's text so the renderer just paints
- * what's stored (no render-time contrast logic). Run when the block is created and whenever
- * its text style changes.
- *
- * For each container-bound text field with no colour of its own, on a solid surface that is
- * NOT the button fill, it writes whichever BRAND role contrasts THAT field's surface most —
- * the card for card fields, the option-button fill for `itemTextStyle`
- * (`surfaceForTextStyleKey`). A button-fill surface is skipped: its render-time pairing
- * (`containerTextColorDefaults`) supplies the button's own text colour, so `itemTextStyle`
- * on the default option fill needs no bake. Explicitly-coloured fields are left alone; so is
- * a palette with no usable brand role.
- *
- * Mutates and returns `content`.
+ * Brand text on a SOLID surface (a card, or a section's own band). Follows the same logo-text-first
+ * hierarchy the page uses — `palette-0` while it clears the contrast floor, else `palette-1` — so a
+ * section leads with the brand identity rather than whichever brand merely contrasts most. A card
+ * always ends on a brand (never a neutral), so if neither role clears the floor it falls back to the
+ * best-contrast brand.
  */
-export const applyCardTextContrast = (
+const cardContrastColour = (
+  surface: BrandPageCssStyle | undefined,
+  styles: PageStyles,
+): string | undefined =>
+  contrastRoleColour(
+    surface,
+    styles,
+    (against, colors) =>
+      viableBrandRole(against, colors) ??
+      bestContrastBrandRole(against, colors),
+  );
+
+/**
+ * The colour for text that sits on the PAGE background (a section that paints nothing solid),
+ * replacing the retired base coat. Same brand hierarchy as `cardContrastColour` — logo-text
+ * (`palette-0`) leads while it clears the floor, else `palette-1` — but where a card falls back to a
+ * brand, the page falls to the best-contrast NEUTRAL (legibility on a plain surface), and for an
+ * unresolvable page (image/gradient) to `neutral-dark`.
+ */
+const pageContrastColour = (styles: PageStyles): string | undefined => {
+  const surface = styles.backgroundStyles?.style;
+
+  return (
+    contrastRoleColour(surface, styles, viableBrandRole) ??
+    contrastRoleColour(surface, styles, bestContrastNeutralRole) ??
+    toColorVarReference(PALETTE_COLOR_IDS.neutralDark)
+  );
+};
+
+/**
+ * Assigns the birth-time colour for ONE text field, given the surface it sits on:
+ *  - a solid surface that is NOT the button fill → the brand hierarchy for it (`cardContrastColour`);
+ *  - a solid surface that IS the button fill → nothing (the render-time pairing supplies the
+ *    button's own text colour — the `itemTextStyle`-on-option-button case);
+ *  - no solid surface → the page background (`pageContrastColour`).
+ * Mutates `field`.
+ */
+const bakeFieldColour = (
+  field: { color?: string },
+  surface: BrandPageCssStyle | undefined,
+  styles: PageStyles,
+): void => {
+  if (isSolidSurface(surface, styles.colors)) {
+    if (surfaceMatchesButtonFill(surface, styles)) {
+      return;
+    }
+
+    const colour = cardContrastColour(surface, styles);
+
+    if (colour) {
+      field.color = colour;
+    }
+
+    return;
+  }
+
+  const colour = pageContrastColour(styles);
+
+  if (colour) {
+    field.color = colour;
+  }
+};
+
+/**
+ * The surface ANY text field ends up contrasting — a cascade so no field ever dead-ends
+ * uncoloured: the field's OWN surface (`surfaceForTextStyleKey`) if it paints a solid, else the
+ * SECTION's own painted surface (`topmostSolidSurface`) — which catches a container whose router
+ * yields nothing, e.g. the brandSite contact-form card — else `undefined`, meaning the page.
+ */
+const effectiveFieldSurface = (
   content: Content,
   styles: PageStyles,
+  key: ContentTextStylePropertyKey,
   brandPageType?: BrandPageType,
-): Content => {
-  const keys = CONTAINER_BOUND_TEXT_STYLE_KEYS[content.type];
+): BrandPageCssStyle | undefined => {
+  const own = surfaceForTextStyleKey(content, styles, key, brandPageType);
 
-  if (!keys?.length) {
-    return content;
+  if (isSolidSurface(own, styles.colors)) {
+    return own;
   }
 
-  keys.forEach((key) => {
-    const field = (content as unknown as Record<string, TextStyleDeclaration>)[
-      key
-    ];
+  // A shop title/description stops at the band: the section-wide fallback below would
+  // otherwise pick up the tile fill, the same surface `isShopBandRoutedField` steers
+  // around above.
+  return isShopBandRoutedField(content, key)
+    ? undefined
+    : topmostSolidSurface(content, styles.colors);
+};
+
+/**
+ * The contrast colour for whatever sits on the title's own surface — the one the title itself
+ * gets. Two callers: a social-links section's icons (baked once onto `iconFillStyles.fill` at
+ * migration or birth, so they never follow a title recolour) and a shop section's "no products"
+ * label (read live in the view model, so it does follow one — there's no stored field to freeze).
+ */
+export const titleSurfaceContrastFill = (
+  content: Content,
+  styles: PageStyles,
+  brandPageType?: BrandPageType,
+): string | undefined => {
+  const probe: { color?: string } = {};
+
+  bakeFieldColour(
+    probe,
+    effectiveFieldSurface(content, styles, 'titleStyle', brandPageType),
+    styles,
+  );
+
+  return probe.color;
+};
+
+type RteNode = {
+  type?: string;
+  text?: string;
+  marks?: { type: string; attrs?: { color?: string } }[];
+  content?: RteNode[];
+};
+
+// The colour on the first text run of an RTE doc (`item.text`), where the birth bake moves a
+// field's colour. Read-only depth-first walk; `undefined` for a plain string or an uncoloured run.
+const firstRunColour = (value: unknown): string | undefined => {
+  const walk = (node: RteNode): string | undefined => {
+    if (node.type === 'text') {
+      return node.marks?.find((mark) => mark.type === 'textStyle')?.attrs
+        ?.color;
+    }
+
+    for (const child of node.content ?? []) {
+      const found = walk(child);
+
+      if (found) {
+        return found;
+      }
+    }
+
+    return undefined;
+  };
+
+  return typeof value === 'object' && value !== null
+    ? walk(value as RteNode)
+    : undefined;
+};
+
+// Whether every VISIBLE run (non-whitespace text) in a doc carries a colour mark — used to decide
+// whether applyTextContrast's bake is redundant. A doc with some coloured runs and some not (an
+// accent word, or a hyperlink, which setRteTextColor always colours) still needs the bake, or its
+// uncoloured runs fall back to the inherited colour.
+const everyRunColoured = (value: unknown): boolean => {
+  let sawVisibleRun = false;
+  let allColoured = true;
+
+  const walk = (node: RteNode): void => {
+    if (node.type === 'text') {
+      if (!node.text?.trim()) return;
+
+      sawVisibleRun = true;
+
+      if (
+        !node.marks?.find((mark) => mark.type === 'textStyle')?.attrs?.color
+      ) {
+        allColoured = false;
+      }
 
-    // Never overwrite an explicit element colour.
-    if (!field || field.color) {
       return;
     }
 
-    const surface = surfaceForTextStyleKey(content, styles, key, brandPageType);
+    (node.content ?? []).forEach(walk);
+  };
+
+  if (typeof value === 'object' && value !== null) walk(value as RteNode);
+
+  return sawVisibleRun && allColoured;
+};
+
+// A text item's effective (rendered) colour. The RTE run MARK is authoritative and read FIRST: a
+// recolour writes the mark but does NOT clear a stale `textStyle.color` left by an earlier bake, so
+// preferring the style would return the old colour, not what the item shows. `textStyle.color` is
+// the fallback for an item that has no run yet (e.g. a freshly inherited, still-empty item).
+const textItemColour = (item: {
+  textStyle?: { color?: string };
+  text?: unknown;
+}): string | undefined => firstRunColour(item.text) || item.textStyle?.color;
 
-    // A button-fill surface is contrasted by the button's own text colour at render, so it
-    // needs no baked colour — skip it, exactly as a button-fill card is skipped.
+// A top-level field's own doc, paired by name (`titleStyle` ↔ `title`, `descriptionStyle` ↔
+// `description`, …) — the same convention every Content model follows.
+const textFieldKey = (key: ContentTextStylePropertyKey): string =>
+  key.replace(/Style$/, '');
+
+/**
+ * Bakes a readable colour into a SECTION's text at BIRTH so the renderer just paints what's
+ * stored (no render-time contrast logic). Run when a block is created and whenever its text
+ * style changes.
+ *
+ * Every text field (and every `textItems[]` entry) contrasts the topmost solid thing beneath it —
+ * its own field surface, else the section's painted surface, else the PAGE background
+ * (`effectiveFieldSurface`) — taking the brand hierarchy on a solid surface and `pageContrastColour`
+ * on the bare page (the replacement for the retired base coat, ADR-0020). The exempt fields never
+ * bake — the section CTA button label (`buttonTextStyle`) and copyright by key, and a standalone
+ * button's own label (`titleStyle` on an `isButtonContent`) by type; all own their fill/text
+ * pairing rather than a section surface. A field sitting on the button fill likewise defers to the
+ * render-time pairing. A social-links section's icons get their own stored fill
+ * (`titleSurfaceContrastFill`).
+ *
+ * Explicitly-coloured fields are left alone; so is a palette with no usable role.
+ *
+ * Mutates and returns `content`.
+ */
+export const applyTextContrast = (
+  content: Content,
+  styles: PageStyles,
+  brandPageType?: BrandPageType,
+): Content => {
+  const record = content as unknown as Record<string, TextStyleDeclaration>;
+  const rawContent = content as unknown as Record<string, unknown>;
+
+  (
+    Object.keys(
+      CONTENT_TEXT_STYLE_PROPERTY_KEYS,
+    ) as ContentTextStylePropertyKey[]
+  ).forEach((key) => {
+    const field = record[key];
+
+    // Absent, already coloured — via its style OR every visible run of its paired doc (a recolour
+    // moves colour to the marks without clearing a stale `field.color`, same as textItemColour) —
+    // an exempt key (section button / copyright), or a standalone button's own label → leave it alone.
     if (
-      !isSolidSurface(surface, styles.colors) ||
-      surfaceMatchesButtonFill(surface, styles)
+      !field ||
+      field.color ||
+      everyRunColoured(rawContent[textFieldKey(key)]) ||
+      NON_SECTION_SURFACE_KEYS.has(key) ||
+      isButtonLabelField(content, key)
     ) {
       return;
     }
 
-    const colour = cardContrastColour(surface, styles);
+    bakeFieldColour(
+      field,
+      effectiveFieldSurface(content, styles, key, brandPageType),
+      styles,
+    );
+  });
 
-    if (colour) {
-      field.color = colour;
+  // Per-item text styles (`textItems[]` — the brand-site text section) are not top-level keys, so
+  // the loop above misses them. Items stack vertically, so a new (bottom) item INHERITS the colour
+  // of the item directly ABOVE it — the copy reads as one block and a newly-added item continues
+  // the last item's colour. Only the first item (nothing above) contrasts the surface; the inherit
+  // chains down the stack, so a fresh section still resolves to one contrast colour throughout.
+  const items = (
+    content as {
+      textItems?: { textStyle?: { color?: string }; text?: unknown }[];
     }
-  });
+  ).textItems;
+
+  if (Array.isArray(items)) {
+    const surface = topmostSolidSurface(content, styles.colors);
+
+    items.forEach((item, index) => {
+      // Already coloured — via its style OR its run mark (birth authoring moves colour to the mark
+      // and clears the style). Skipping the mark case is what stops a recoloured item being
+      // re-contrasted, and keeps it usable as the colour the item below inherits.
+      if (!item.textStyle || textItemColour(item)) {
+        return;
+      }
+
+      const above = index > 0 ? textItemColour(items[index - 1]) : undefined;
+
+      if (above) {
+        item.textStyle.color = above;
+
+        return;
+      }
+
+      bakeFieldColour(item.textStyle, surface, styles);
+    });
+  }
+
+  if (content.type === 'social-links') {
+    const socialLinks = content as SocialLinksContent;
+    const iconFillStyles = socialLinks.iconFillStyles ?? {};
+
+    if (isBlankColorValue(iconFillStyles.fill)) {
+      const fill = titleSurfaceContrastFill(content, styles, brandPageType);
+
+      if (fill) {
+        socialLinks.iconFillStyles = { ...iconFillStyles, fill };
+      }
+    }
+  }
 
   return content;
 };
+
+/**
+ * Phase 2 (ADR-0020): the surface fields a section can paint behind its text, TOP of the
+ * stack first (the closest painted layer is what the text sits on). A render-local mirror
+ * of the raised/backdrop split in `SURFACE_STACK_RANK` (`section-color-matches.ts`) — kept
+ * here so the renderer's contrast bake doesn't depend on the settings-panel module. Only
+ * the single-solid-surface fields are walked; array/overlay/tint layers are out of v1 scope.
+ * Extract to a shared leaf if a third consumer appears.
+ */
+const SURFACE_FIELDS_TOP_FIRST = [
+  'cardStyle',
+  'fillColor',
+  'backgroundStyle',
+  'backgroundColor',
+] as const;
+
+/**
+ * A banner paints its `cardStyle` ONLY in the two card layouts (`isCard` in `BANNER_LAYOUTS`,
+ * `BannerSection.vue`); every other layout — including the default `centered` — renders the
+ * content directly on the band, so the transparent `backgroundStyle` lets the site background
+ * show through. The factory seeds `cardStyle` white regardless, so counting it as the surface in
+ * a non-card layout would contrast a card the banner never paints (dark title on a dark page).
+ */
+const BANNER_CARD_DISPLAY_STYLES = new Set<string>([
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_CARD_LEFT_IMAGE,
+]);
+
+const isSurfaceFieldPainted = (content: Content, field: string): boolean => {
+  if (field === 'cardStyle' && content.type === 'banner-section') {
+    return BANNER_CARD_DISPLAY_STYLES.has(
+      (content as { displayStyle?: string }).displayStyle ?? '',
+    );
+  }
+
+  return true;
+};
+
+/**
+ * The topmost solid surface painted behind a section's text — the highest-stacked surface
+ * field that resolves to a visible solid — or `undefined` when the section paints nothing solid
+ * (the text then sits on the page background, `applyTextContrast`'s page branch). A field the
+ * section does not actually paint in its current layout is skipped (`isSurfaceFieldPainted`).
+ * Palette refs are resolved first (via `isSolidSurface`), so a `var(--palette-N)` fill counts as
+ * the solid it resolves to.
+ */
+export const topmostSolidSurface = (
+  content: Content,
+  colors: ColorItem[] = [],
+): BrandPageCssStyle | undefined => {
+  const record = content as unknown as Record<
+    string,
+    BrandPageCssStyle | undefined
+  >;
+
+  for (const field of SURFACE_FIELDS_TOP_FIRST) {
+    if (!isSurfaceFieldPainted(content, field)) {
+      continue;
+    }
+
+    const style = record[field];
+
+    if (isSolidSurface(style, colors)) {
+      return style;
+    }
+  }
+
+  return undefined;
+};

package/src/brand-page/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './style.util';
+export * from './text-role-css.util';
 export * from './color-palette.util';
 export * from './shape-color-match.util';
 export * from './shape-color-apply.util';