useConsistentLightnessNotation (CSS)
Language CSS
Summary
Section titled “Summary”- Rule available since:
v2.6.3 - Diagnostic Category:
lint/nursery/useConsistentLightnessNotation - This rule has a safe fix.
- The default severity of this rule is information.
- Sources:
- Same as
lightness-notation
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "useConsistentLightnessNotation": "error" } } }}Description
Section titled “Description”Enforce a consistent notation for the lightness of colors.
The lab(), lch(), oklab(), and oklch() color functions accept their first value,
the lightness, either as a percentage or as a number. Both notations describe the same
color: oklch(85% 0.17 88) and oklch(0.85 0.17 88) are equal. Writing lightness the same
way everywhere makes colors easier to read and compare.
For oklab() and oklch(), the number 1 equals 100%. For lab() and lch(), the
number 100 equals 100%.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”a { color: oklch(0.85 0.17 88); }code-block.css:1:18 lint/nursery/useConsistentLightnessNotation FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This lightness is written as a number instead of a percentage.
> 1 │ a { color: oklch(0.85 0.17 88); }
│ ^^^^
2 │
ℹ Writing lightness the same way in every color makes colors easier to read and compare.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Safe fix: Use 85% instead.
1 │ - a·{·color:·oklch(0.85·0.17·88);·}
1 │ + a·{·color:·oklch(85%·0.17·88);·}
2 2 │
a { color: lab(86 -40 30); }code-block.css:1:16 lint/nursery/useConsistentLightnessNotation FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This lightness is written as a number instead of a percentage.
> 1 │ a { color: lab(86 -40 30); }
│ ^^
2 │
ℹ Writing lightness the same way in every color makes colors easier to read and compare.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Safe fix: Use 86% instead.
1 │ a·{·color:·lab(86%·-40·30);·}
│ +
a { color: oklch(85% 0.17 88); }a { color: oklab(86% -0.2 0.15); }a { color: lch(85% 60 88); }a { color: lab(86% -40 30); }a { color: oklch(from red 50% c h); }Options
Section titled “Options”notation
Section titled “notation”Default: "percentage"
Whether lightness is written as a percentage ("percentage") or as a number ("number").
{ "linter": { "rules": { "nursery": { "useConsistentLightnessNotation": { "level": "on", "options": { "notation": "number" } } } } }}Invalid
Section titled “Invalid”a { color: oklch(85% 0.17 88); }code-block.css:1:18 lint/nursery/useConsistentLightnessNotation FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This lightness is written as a percentage instead of a number.
> 1 │ a { color: oklch(85% 0.17 88); }
│ ^^^
2 │
ℹ Writing lightness the same way in every color makes colors easier to read and compare.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Safe fix: Use 0.85 instead.
1 │ - a·{·color:·oklch(85%·0.17·88);·}
1 │ + a·{·color:·oklch(0.85·0.17·88);·}
2 2 │
a { color: oklch(0.85 0.17 88); }a { color: lab(86 -40 30); }Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.