quasarframework/quasar · error · TypeError

Expected a numeric percent

Error message

Expected a numeric percent

What it means

Quasar's lighten(color, percent) validates its second argument as a number. The percent may be negative to darken (0–100 magnitude), but it must be numeric. A non-number (string, undefined, NaN-producing value from user input) triggers this TypeError before any math runs.

Source

Thrown at ui/src/utils/colors/colors.js:181

  if (m[1]) {
    const alpha = Number.parseFloat(m[5])
    const safeAlpha = Number.isFinite(alpha)
      ? Math.max(0, Math.min(1, alpha))
      : 1
    rgb.a = Math.round(safeAlpha * 100)
  }

  return rgb
}

/* works as darken if percent < 0 */
export function lighten(color, percent) {
  if (typeof color !== 'string') {
    throw new TypeError('Expected a string as color')
  }
  if (typeof percent !== 'number') {
    throw new TypeError('Expected a numeric percent')
  }

  const rgb = textToRgb(color),
    t = percent < 0 ? 0 : 255,
    p = Math.abs(percent) / 100,
    R = rgb.r,
    G = rgb.g,
    B = rgb.b

  return (
    '#' +
    (
      0x1_00_00_00 +
      (Math.round((t - R) * p) + R) * 0x1_00_00 +
      (Math.round((t - G) * p) + G) * 0x1_00 +
      (Math.round((t - B) * p) + B)
    )
      .toString(16)

View on GitHub (pinned to 4841521b5f)

Solutions

1. Parse the value: lighten(color, Number(percent)) or parseInt(percent, 10)
2. Supply the missing second argument if it was omitted
3. Validate/convert form/query input to a number before calling
4. Fix config files so the percent is stored as a JSON number, not a string

Example fix

// before
const shade = lighten(baseColor, input.value)
// after
const shade = lighten(baseColor, Number(input.value))

let pct = rawPercent
if (typeof pct === 'string') pct = Number(pct)
if (!Number.isFinite(pct)) pct = 0
const shaded = lighten(color, pct)

function isPercent(v) {
  return typeof v === 'number' && Number.isFinite(v)
}

try {
  out = lighten(color, rawPercent)
} catch (err) {
  if (err.message === 'Expected a numeric percent') {
    out = lighten(color, Number(rawPercent) || 0)
  } else {
    throw err
  }
}

When it happens

Trigger: lighten('#fff', '20') (string percent), lighten('#fff') (percent undefined), lighten(color, formValue) where formValue comes from an <input> as text without parsing.

Common situations: Reading the percent from a DOM input or URL query parameter (always strings); forgetting to pass the argument; JSON config storing the amount as a string like "25".

Understand the failure class

Background: Invalid argument type errors: "must be of type string", "expected X, got Y", and ERR_INVALID_ARG_TYPE explained — this error's family across 15 libraries.

Related errors

• Expected a string
• Expected a string as color
• Expected a string or a {r, g, b} object as color
• Expected a string or a {r, g, b[, a]} object as fgColor
• Expected 3 numbers below 256 (and optionally one below 100)

AI-assisted analysis of quasarframework/quasar@4841521b5f (2026-08-30). Data as JSON: /api/errors/061ddc9fd2eb05e1. Report an issue: GitHub.