Skip to content

fix: preserve opacity in scheme modifiers - #14

Draft
e-simpson wants to merge 1 commit into
mgcrea:mainfrom
e-simpson:codex/scheme-opacity
Draft

fix: preserve opacity in scheme modifiers#14
e-simpson wants to merge 1 commit into
mgcrea:mainfrom
e-simpson:codex/scheme-opacity

Conversation

@e-simpson

@e-simpson e-simpson commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR fixes opacity modifiers on semantic scheme: colors, adds Tailwind-style arbitrary alpha syntax, and correctly composes opacity with colors that already contain an alpha channel.

Root Cause

expandSchemeModifier treated the opacity suffix as part of the configured color name. For scheme:bg-encrypted/25, it looked for encrypted/25-dark and encrypted/25-light instead of looking up encrypted-dark and encrypted-light and then reattaching /25.

Changes

Core Implementation

  • Update: shared color opacity parsing and src/parser/modifiers.ts
    • Separates named or arbitrary opacity suffixes before resolving scheme color variants
    • Validates the dark and light colors using their actual configured names
    • Reattaches the unchanged opacity suffix to both expanded utilities
    • Preserves custom dark/light suffix configuration
    • Supports /[.37] raw alpha and /[37%] explicit percentages
    • Multiplies existing alpha on 8-digit configured or arbitrary hex colors instead of producing invalid 10-digit colors

Testing

  • Update: scheme, color parser, and shared color utility tests
  • Covers background, text, and border color prefixes
  • Covers named /0 through /100 semantics and arbitrary raw/percentage values
  • Covers arbitrary and configured 8-digit colors
  • Verifies custom scheme suffixes
  • Verifies missing-color validation does not include opacity in the lookup key
  • Verifies expanded utilities parse to colors with the requested alpha channel

Documentation

  • Update: the color-scheme guide with opacity expansion examples

Expansion Example

// Input
<View className="scheme:bg-encrypted/25" />

// Expansion
<View className="dark:bg-encrypted-dark/25 light:bg-encrypted-light/25" />
<View className="scheme:bg-encrypted/[.37]" />
// dark:bg-encrypted-dark/[.37] light:bg-encrypted-light/[.37]

Validation

  • bun run spec (28 files; 1,070 passed, 1 skipped)
  • bun run check
  • bun run lint
  • bun run format:check
  • bun run build

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant