devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

refactor: convert color system to RGB channels for native Tailwind opacity

Browse Source 
Root cause fix for all broken CSS variable opacity modifiers. Converted
every hex CSS variable to space-separated RGB channels (e.g. #fda4af →
253 164 175) and updated Tailwind config to use rgb(var(...) / <alpha-value>).
This makes bg-accent-rose/10, border-border-hard/50, etc. work natively
everywhere — no more currentColor fallback. Reverted all previous explicit
rgba() workarounds back to clean Tailwind syntax. Also fixed the voice
connection wifi icon SVG (was bottom-left aligned, now centered).
This commit is contained in:
Jannis Braun
2026-03-02 17:46:21 +01:00
parent 0e235fdf1c
commit 37dc73231d
20 changed files with 97 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/tailwind.config.js
+33 -32
View File
@@ -8,59 +8,60 @@ export default {
extend: {
colors: {
// ── AETHER DRIFT TOKENS ──
// RGB-channel variables enable Tailwind opacity modifiers (e.g. bg-accent-rose/10)
surface: {
base: 'var(--bg-base)',
channel: 'var(--bg-channel)',
chat: 'var(--bg-chat)',
members: 'var(--bg-members)',
elevated: 'var(--bg-elevated)',
input: 'var(--bg-input)',
base: 'rgb(var(--bg-base) / <alpha-value>)',
channel: 'rgb(var(--bg-channel) / <alpha-value>)',
chat: 'rgb(var(--bg-chat) / <alpha-value>)',
members: 'rgb(var(--bg-members) / <alpha-value>)',
elevated: 'rgb(var(--bg-elevated) / <alpha-value>)',
input: 'rgb(var(--bg-input) / <alpha-value>)',
overlay: 'var(--bg-overlay)',
},
border: {
hard: 'var(--border-hard)',
soft: 'var(--border-soft)',
hard: 'rgb(var(--border-hard) / <alpha-value>)',
soft: 'rgb(var(--border-soft) / <alpha-value>)',
},
accent: {
mint: 'var(--accent-mint)',
peach: 'var(--accent-peach)',
lavender: 'var(--accent-lavender)',
sky: 'var(--accent-sky)',
amber: 'var(--accent-amber)',
rose: 'var(--accent-rose)',
coral: 'var(--accent-coral)',
primary: 'var(--accent-primary)',
'primary-hover': 'var(--accent-primary-hover)',
'primary-active':'var(--accent-primary-active)',
mint: 'rgb(var(--accent-mint) / <alpha-value>)',
peach: 'rgb(var(--accent-peach) / <alpha-value>)',
lavender: 'rgb(var(--accent-lavender) / <alpha-value>)',
sky: 'rgb(var(--accent-sky) / <alpha-value>)',
amber: 'rgb(var(--accent-amber) / <alpha-value>)',
rose: 'rgb(var(--accent-rose) / <alpha-value>)',
coral: 'rgb(var(--accent-coral) / <alpha-value>)',
primary: 'rgb(var(--accent-primary) / <alpha-value>)',
'primary-hover': 'rgb(var(--accent-primary-hover) / <alpha-value>)',
'primary-active':'rgb(var(--accent-primary-active) / <alpha-value>)',
},
txt: {
primary: 'var(--text-primary)',
secondary: 'var(--text-secondary)',
tertiary: 'var(--text-tertiary)',
message: 'var(--text-message)',
link: 'var(--text-link)',
positive: 'var(--text-positive)',
warning: 'var(--text-warning)',
danger: 'var(--text-danger)',
primary: 'rgb(var(--text-primary) / <alpha-value>)',
secondary: 'rgb(var(--text-secondary) / <alpha-value>)',
tertiary: 'rgb(var(--text-tertiary) / <alpha-value>)',
message: 'rgb(var(--text-message) / <alpha-value>)',
link: 'rgb(var(--text-link) / <alpha-value>)',
positive: 'rgb(var(--text-positive) / <alpha-value>)',
warning: 'rgb(var(--text-warning) / <alpha-value>)',
danger: 'rgb(var(--text-danger) / <alpha-value>)',
},
interactive: {
hover: 'var(--interactive-hover)',
active: 'var(--interactive-active)',
selected: 'var(--interactive-selected)',
muted: 'var(--interactive-muted)',
muted: 'rgb(var(--interactive-muted) / <alpha-value>)',
},
status: {
online: 'var(--status-online)',
idle: 'var(--status-idle)',
dnd: 'var(--status-dnd)',
offline: 'var(--status-offline)',
online: 'rgb(var(--status-online) / <alpha-value>)',
idle: 'rgb(var(--status-idle) / <alpha-value>)',
dnd: 'rgb(var(--status-dnd) / <alpha-value>)',
offline: 'rgb(var(--status-offline) / <alpha-value>)',
},
glass: {
bg: 'var(--glass-bg)',
border: 'var(--glass-border)',
highlight: 'var(--glass-highlight)',
},
notification: 'var(--notification)',
notification: 'rgb(var(--notification) / <alpha-value>)',
},
boxShadow: {
'header': '0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05)',