_⚠️ Potential issue_ | _🔴 Critical_ | _🏗️ Heavy lift_

[jackgranatowski]

⚠️ Potential issue | 🔴 Critical | 🏗️ Heavy lift

🧩 Analysis chain

🏁 Script executed:

git ls-files | grep -E "(tokens|base)\.css"

Repository: codeslash-dev/SLASHED

Length of output: 95

---

🏁 Script executed:

wc -l core/tokens.css core/base.css

Repository: codeslash-dev/SLASHED

Length of output: 119

---

🏁 Script executed:

# First, read the tokens.css file around lines 62-85 to see the exact definitions
cat -n core/tokens.css | sed -n '40,100p'

Repository: codeslash-dev/SLASHED

Length of output: 3739

---

🏁 Script executed:

# Look at the base color definitions at the top of the file
cat -n core/tokens.css | sed -n '1,50p'

Repository: codeslash-dev/SLASHED

Length of output: 3688

---

🏁 Script executed:

# Check core/base.css to see how mode switching is implemented
cat -n core/base.css

Repository: codeslash-dev/SLASHED

Length of output: 8903

---

🏁 Script executed:

# Look for --sf-color-code-bg definition in tokens.css
grep -n "sf-color-code-bg" core/tokens.css

Repository: codeslash-dev/SLASHED

Length of output: 47

---

🏁 Script executed:

# Search the entire core directory for --sf-color-code-bg
grep -r "sf-color-code-bg" core/

Repository: codeslash-dev/SLASHED

Length of output: 215

---

🏁 Script executed:

# Look for any media queries or dark mode definitions in tokens.css
grep -n "`@media`\|data-theme\|prefers-color-scheme" core/tokens.css

Repository: codeslash-dev/SLASHED

Length of output: 47

---

🏁 Script executed:

# Let me verify the exact color calculations by examining more of the tokens
cat -n core/tokens.css | sed -n '70,120p'

Repository: codeslash-dev/SLASHED

Length of output: 3180

---

🏁 Script executed:

# Let me trace through the color math to verify the contrast calculations
python3 <<'EOF'
# Light mode calculation
neutral_light_l = 0.55
text_light_calc = neutral_light_l - 0.4
print(f"Light mode:")
print(f"  --sf-color-neutral: oklch(0.55 0.02 260)")
print(f"  --sf-color-text: oklch(from neutral calc(l - 0.4)) = oklch({text_light_calc} 0.02 260)")
print(f"  --sf-color-base: oklch(0.98 0.005 260)")
print(f"  Contrast: text ({text_light_calc:.2f}) on surface (0.98) = Δl {abs(0.98 - text_light_calc):.2f}")

# Dark mode calculation
neutral_dark_l = 0.65
text_dark_calc = neutral_dark_l - 0.4
print(f"\nDark mode (after swap):")
print(f"  --sf-color-neutral-dark: oklch(0.65 0.02 260)")
print(f"  --sf-color-text: oklch(from neutral calc(l - 0.4)) = oklch({text_dark_calc} 0.02 260)")
print(f"  --sf-color-base-dark: oklch(0.2 0.02 260)")
print(f"  Contrast: text ({text_dark_calc:.2f}) on surface (0.2) = Δl {abs(0.2 - text_dark_calc):.2f}")

print(f"\nText-on-color hardcoded values:")
print(f"  Light mode: oklch(1 0 0) on primary oklch(0.45 0.2 264)")
print(f"  Dark mode: oklch(1 0 0) on primary oklch(0.7 0.15 264)")
print(f"  ^ Near-white text on light blue has poor contrast in dark mode")
EOF

Repository: codeslash-dev/SLASHED

Length of output: 761

---

🏁 Script executed:

# Check if there are any other semantic token definitions after line 120
cat -n core/tokens.css | sed -n '120,180p'

Repository: codeslash-dev/SLASHED

Length of output: 4180

---

Text tokens are not mode-aware and create inaccessible contrast in dark mode.

The --sf-color-text formulas at lines 62-68 derive from --sf-color-neutral using static luminance offsets. When dark mode swaps in --sf-color-neutral-dark: oklch(0.65 0.02 260), the text formula calc(l - 0.4) resolves to oklch(0.25). On the dark surface --sf-color-base-dark: oklch(0.2 0.02 260), this yields a luminance delta of only 0.05—critically low contrast.

Similarly, --sf-color-text--on-primary and related tokens are hardcoded to near-white (1.0 or 0.97 luminance). In dark mode, when --sf-color-primary-dark becomes oklch(0.7 0.15 264) (light blue), near-white text on this light surface produces poor contrast.

Additionally, --sf-color-code-bg is referenced at core/base.css:165 and 174 but is never defined in core/tokens.css.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@core/tokens.css` around lines 62 - 85, The text tokens (e.g.,
--sf-color-text, --sf-color-text--secondary, --sf-color-text--on-primary, etc.)
are not mode-aware and produce poor contrast in dark mode, and
--sf-color-code-bg is missing; fix by making these tokens depend on
theme-specific base/neutral variables or use a contrast-aware function: move the
oklch calc() definitions into theme blocks (e.g., :root and [data-theme="dark"])
or introduce explicit dark variants (e.g., --sf-color-text-dark,
--sf-color-text--on-primary-dark) and set the mode-specific tokens to reference
them, and replace hardcoded near-white on-* tokens with dynamic contrast-aware
values (or CSS color-contrast()) that compute readable text against
--sf-color-primary / --sf-color-base per mode; also add a definition for
--sf-color-code-bg in tokens (and its dark variant) so references in
core/base.css have a value.

Originally posted by @coderabbitai in #7 (comment)