{"record":{"id":"b91cb427842a5d58","repo":"quasarframework/quasar","slug":"expected-a-string-as-color","errorCode":null,"errorMessage":"Expected a string as color","messagePattern":"Expected a string as color","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"ui/src/utils/colors/colors.js","lineNumber":178,"sourceCode":"    g: Math.min(255, Math.max(0, Number.parseInt(m[3], 10))),\n    b: Math.min(255, Math.max(0, Number.parseInt(m[4], 10)))\n  }\n\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 +","sourceCodeStart":160,"sourceCodeEnd":196,"githubUrl":"https://github.com/quasarframework/quasar/blob/4841521b5f635a971eb9e2710e5542efd194691b/ui/src/utils/colors/colors.js#L160-L196","documentation":"Quasar's lighten(color, percent) lightens (or darkens, for negative percent) a color. It throws a TypeError when the first argument is not a string, since it delegates parsing to textToRgb() which requires string input. Note: unlike textToRgb, lighten does not accept {r,g,b} objects.","triggerScenarios":"lighten({ r: 255, g: 0, b: 0 }, 20) (object passed where only a string is accepted), lighten(null, 10), lighten(getPaletteColor(...), 10) if the palette lookup returns non-string.","commonSituations":"Passing the output of getPaletteColor or textToRgb (an object) back into lighten; refactoring code that previously passed a hex string; missing brand-color config so the variable resolves to undefined.","solutions":["Pass a color string: lighten('#ff0000', 20)","If you have an {r,g,b} object, convert first with rgbToString(obj) then call lighten","Check that the color variable/config is defined and a string at the call site","Use getPaletteColor to resolve a Quasar palette name into its hex string before calling"],"exampleFix":"// before\nlighten(textToRgb('#3498db'), 25) // TypeError\n// after\nlighten('#3498db', 25)\n// or\nlighten(rgbToString(textToRgb('#3498db')), 25)","handlingStrategy":"type-guard","validationCode":"if (typeof color !== 'string' || typeof percent !== 'number') {\n  throw new TypeError('lighten needs (string color, numeric percent)')\n}\nconst shaded = lighten(color, percent)","typeGuard":"function canLighten(color, percent) {\n  return typeof color === 'string' && typeof percent === 'number'\n}","tryCatchPattern":"try {\n  out = lighten(color, 20)\n} catch (err) {\n  if (err.message === 'Expected a string as color') {\n    out = lighten(rgbToString(color), 20) // color was an object\n  } else {\n    throw err\n  }\n}","preventionTips":["Remember lighten/darken take strings only — convert {r,g,b} objects with rgbToString first","Resolve palette names via getPaletteColor before passing to lighten","Provide default hex strings for config-driven colors","Type the function params (string, number) in your wrappers"],"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"}