{"record":{"id":"061ddc9fd2eb05e1","repo":"quasarframework/quasar","slug":"expected-a-numeric-percent","errorCode":null,"errorMessage":"Expected a numeric percent","messagePattern":"Expected a numeric percent","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"ui/src/utils/colors/colors.js","lineNumber":181,"sourceCode":"\n  if (m[1]) {\n    const alpha = Number.parseFloat(m[5])\n    const safeAlpha = Number.isFinite(alpha)\n      ? Math.max(0, Math.min(1, alpha))\n      : 1\n    rgb.a = Math.round(safeAlpha * 100)\n  }\n\n  return rgb\n}\n\n/* works as darken if percent < 0 */\nexport function lighten(color, percent) {\n  if (typeof color !== 'string') {\n    throw new TypeError('Expected a string as color')\n  }\n  if (typeof percent !== 'number') {\n    throw new TypeError('Expected a numeric percent')\n  }\n\n  const rgb = textToRgb(color),\n    t = percent < 0 ? 0 : 255,\n    p = Math.abs(percent) / 100,\n    R = rgb.r,\n    G = rgb.g,\n    B = rgb.b\n\n  return (\n    '#' +\n    (\n      0x1_00_00_00 +\n      (Math.round((t - R) * p) + R) * 0x1_00_00 +\n      (Math.round((t - G) * p) + G) * 0x1_00 +\n      (Math.round((t - B) * p) + B)\n    )\n      .toString(16)","sourceCodeStart":163,"sourceCodeEnd":199,"githubUrl":"https://github.com/quasarframework/quasar/blob/4841521b5f635a971eb9e2710e5542efd194691b/ui/src/utils/colors/colors.js#L163-L199","documentation":"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.","triggerScenarios":"lighten('#fff', '20') (string percent), lighten('#fff') (percent undefined), lighten(color, formValue) where formValue comes from an <input> as text without parsing.","commonSituations":"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\".","solutions":["Parse the value: lighten(color, Number(percent)) or parseInt(percent, 10)","Supply the missing second argument if it was omitted","Validate/convert form/query input to a number before calling","Fix config files so the percent is stored as a JSON number, not a string"],"exampleFix":"// before\nconst shade = lighten(baseColor, input.value)\n// after\nconst shade = lighten(baseColor, Number(input.value))","handlingStrategy":"validation","validationCode":"let pct = rawPercent\nif (typeof pct === 'string') pct = Number(pct)\nif (!Number.isFinite(pct)) pct = 0\nconst shaded = lighten(color, pct)","typeGuard":"function isPercent(v) {\n  return typeof v === 'number' && Number.isFinite(v)\n}","tryCatchPattern":"try {\n  out = lighten(color, rawPercent)\n} catch (err) {\n  if (err.message === 'Expected a numeric percent') {\n    out = lighten(color, Number(rawPercent) || 0)\n  } else {\n    throw err\n  }\n}","preventionTips":["Coerce input/query/form values with Number() before color math","Always pass both arguments to lighten/darken","Store percents as numbers in JSON config, not quoted strings","Reject NaN early: Number.isFinite check at the boundary"],"tags":["colors","type-mismatch","typeerror"],"backgroundTag":"invalid-argument-type","analyzedSha":"4841521b5f635a971eb9e2710e5542efd194691b","analyzedAt":"2026-08-30T01:13:14.944Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}