Color Oklch Required
All new color declarations in CSS / inline styles MUST use the oklch() color function.…
$ aoe install @community/rule-color-oklch-requiredProjection
Always in _index.xml · the agent never has to ask for this.
ColorOklchRequired [rule] v1.0.0
All new color declarations in CSS / inline styles MUST use the oklch() color function. Hex (#rrggbb), rgb(), and hsl() are prohibited for new code because they encode color in non-perceptual spaces, making consistent lightness ramps and dark-mode mirroring mathematically painful.
Loaded when retrieval picks the atom as adjacent / supporting.
ColorOklchRequired [rule] v1.0.0
All new color declarations in CSS / inline styles MUST use the oklch() color function. Hex (#rrggbb), rgb(), and hsl() are prohibited for new code because they encode color in non-perceptual spaces, making consistent lightness ramps and dark-mode mirroring mathematically painful.
Checks
- @community/check-color-oklch-required
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
medium
Severity Combination
any non-oklch color in author CSS → WARN
any non-oklch color in design tokens → BLOCK
all colors are oklch() → PASS
Failure Mode
Designers cannot reason about lightness consistency across hues; dark-mode mirroring requires bespoke tweaks per token; the palette drifts perceptually across components.
Remediation
- Convert hex tokens with @community/transform-rgb-to-oklch — feed the hex, store the oklch().
- Adopt @impeccable/template-oklch-palette as the starting scaffold (12 lightness stops × N hues).
- Add a stylelint rule
color-no-hexandcolor-named: neverplus a custom matcher that requires theoklch(token.
Exceptions
- Case: Vendor / third-party CSS
- Allowed When: The CSS is shipped by an external library and not authored by the team; track but do not block.
- Case: Color values inside SVG
imported from a designer asset - Allowed When: Asset is treated as a binary; flag for follow-up but do not block PR.
- Case: Color values inside SVG
Loaded when retrieval picks the atom as a focal / direct hit.
ColorOklchRequired [rule] v1.0.0
All new color declarations in CSS / inline styles MUST use the oklch() color function. Hex (#rrggbb), rgb(), and hsl() are prohibited for new code because they encode color in non-perceptual spaces, making consistent lightness ramps and dark-mode mirroring mathematically painful.
Checks
- @community/check-color-oklch-required
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
medium
Severity Combination
any non-oklch color in author CSS → WARN
any non-oklch color in design tokens → BLOCK
all colors are oklch() → PASS
Failure Mode
Designers cannot reason about lightness consistency across hues; dark-mode mirroring requires bespoke tweaks per token; the palette drifts perceptually across components.
Remediation
- Convert hex tokens with @community/transform-rgb-to-oklch — feed the hex, store the oklch().
- Adopt @impeccable/template-oklch-palette as the starting scaffold (12 lightness stops × N hues).
- Add a stylelint rule
color-no-hexandcolor-named: neverplus a custom matcher that requires theoklch(token.
Exceptions
- Case: Vendor / third-party CSS
- Allowed When: The CSS is shipped by an external library and not authored by the team; track but do not block.
- Case: Color values inside SVG
imported from a designer asset - Allowed When: Asset is treated as a binary; flag for follow-up but do not block PR.
- Case: Color values inside SVG
Relations
related: [@impeccable/template-oklch-palette, @impeccable/template-oklch-dark-mode-cascade, @community/transform-rgb-to-oklch, @community/rule-color-blacklist-brand, @community/counter-example-tailwind-blue-500, @community/anti-pattern-generic-saas-blue, @community/example-vercel-dashboard, @community/principle-color-system-foundation] see-also: [@community/check-color-oklch-required] validates-with: [@impeccable/template-oklch-palette, @impeccable/template-oklch-dark-mode-cascade]
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
medium
Validates With
- @impeccable/template-oklch-palette
- @impeccable/template-oklch-dark-mode-cascade
Severity Combination
any non-oklch color in author CSS → WARN
any non-oklch color in design tokens → BLOCK
all colors are oklch() → PASS
Failure Mode
Designers cannot reason about lightness consistency across hues; dark-mode mirroring requires bespoke tweaks per token; the palette drifts perceptually across components.
Remediation
- Convert hex tokens with @community/transform-rgb-to-oklch — feed the hex, store the oklch().
- Adopt @impeccable/template-oklch-palette as the starting scaffold (12 lightness stops × N hues).
- Add a stylelint rule
color-no-hexandcolor-named: neverplus a custom matcher that requires theoklch(token.
Exceptions
- Case: Vendor / third-party CSS
- Allowed When: The CSS is shipped by an external library and not authored by the team; track but do not block.
- Case: Color values inside SVG
imported from a designer asset - Allowed When: Asset is treated as a binary; flag for follow-up but do not block PR.
- Case: Color values inside SVG
See Also
- @community/check-color-oklch-required
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/rule-color-oklch-required/atom.yaml