framework7io/framework7 · error · Error

Attempting to extend color ${originalColor.name} with color

Error message

Attempting to extend color ${originalColor.name} with color ${extendedColor.name} of different name for spec version ${specVersion}.

What it means

Material Design color system's validateExtendedColor asserts that, when extending a DynamicColor for a specific spec version, the extended color carries the same name as the original. A mismatch means the spec-version extension table is inconsistent. This is a programming/data error in the color spec definitions, not user input.

Source

Thrown at src/core/shared/material-color-utils.js:396

  }
  static darkerUnsafe(tone, ratio) {
    const darkerSafe = Contrast.darker(tone, ratio);
    return darkerSafe < 0 ? 0 : darkerSafe;
  }
}

class DislikeAnalyzer {
  static isDisliked(hct) {
    const huePasses = Math.round(hct.hue) >= 90 && Math.round(hct.hue) <= 111, chromaPasses = Math.round(hct.chroma) > 16, tonePasses = Math.round(hct.tone) < 65;
    return huePasses && chromaPasses && tonePasses;
  }
  static fixIfDisliked(hct) {
    return DislikeAnalyzer.isDisliked(hct) ? Hct.from(hct.hue, hct.chroma, 70) : hct;
  }
}

function validateExtendedColor(originalColor, specVersion, extendedColor) {
  if (originalColor.name !== extendedColor.name) throw new Error(`Attempting to extend color ${originalColor.name} with color ${extendedColor.name} of different name for spec version ${specVersion}.`);
  if (originalColor.isBackground !== extendedColor.isBackground) throw new Error(`Attempting to extend color ${originalColor.name} as a ${originalColor.isBackground ? "background" : "foreground"} with color ${extendedColor.name} as a ${extendedColor.isBackground ? "background" : "foreground"} for spec version ${specVersion}.`);
}

function extendSpecVersion(originlColor, specVersion, extendedColor) {
  return validateExtendedColor(originlColor, specVersion, extendedColor), DynamicColor.fromPalette({
    name: originlColor.name,
    palette: s => s.specVersion === specVersion ? extendedColor.palette(s) : originlColor.palette(s),
    tone: s => s.specVersion === specVersion ? extendedColor.tone(s) : originlColor.tone(s),
    isBackground: originlColor.isBackground,
    chromaMultiplier: s => {
      const chromaMultiplier = s.specVersion === specVersion ? extendedColor.chromaMultiplier : originlColor.chromaMultiplier;
      return void 0 !== chromaMultiplier ? chromaMultiplier(s) : 1;
    },
    background: s => {
      const background = s.specVersion === specVersion ? extendedColor.background : originlColor.background;
      return void 0 !== background ? background(s) : void 0;
    },
    secondBackground: s => {

View on GitHub (pinned to 6557591266)

Solutions

1. Make extendedColor.name match originalColor.name for every spec-version entry.
2. Restore the original color definition entries from upstream material-color-utils.
3. If a color was intentionally renamed, rename it consistently across all spec versions and all consumers.
4. Add a test extending every color across all spec versions to catch mismatches early.

Example fix

// before
extendSpecVersion(color, specVersion, { name: 'surface_dim', ... });
// after
extendSpecVersion(color, specVersion, { name: color.name, ... });

function validateNames(originalColor, extendedColor, specVersion) {
  if (originalColor.name !== extendedColor.name) {
    throw new Error(`spec ${specVersion}: expected extension named ${originalColor.name}, got ${extendedColor.name}`);
  }
}
// run for every color at module load: colors.forEach(c => validateNames(c, spec2025[c.name], '2025'))

function extensionMatchesOriginal(original, extended) {
  return extended.name === original.name;
}

try {
  const result = extendSpecVersion(color, specVersion, ext);
} catch (err) {
  if (/different name for spec version/.test(err.message)) {
    ext = { ...ext, name: color.name };
  } else throw err;
}

When it happens

Trigger: Calling MaterialDynamicColors extension machinery (extendSpecVersion) where the extended color for a spec version has a name differing from the original color's name.

Common situations: Hand-editing or partially copying the color spec tables; merging upstream color-utils versions so a color's spec-2025 counterpart was renamed; adding a new spec version entry with a wrong name field.

Related errors

• Attempting to extend color ${originalColor.name} as a ${orig
• `primaryDim` color is undefined prior to 2025 spec.
• `secondaryDim` color is undefined prior to 2025 spec.
• `tertiaryDim` color is undefined prior to 2025 spec.
• Color ${name} has secondBackgrounddefined, but background is

AI-assisted analysis of framework7io/framework7@6557591266 (2026-09-02). Data as JSON: /api/errors/d924b1a77c55cc15. Report an issue: GitHub.