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/src/components/auth/LoginPage.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export function LoginPage() {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
{error && ( {error && (
<div className="mb-4 p-3 bg-[rgba(253,164,175,0.10)] border border-[rgba(253,164,175,0.30)] rounded text-txt-danger text-sm"> <div className="mb-4 p-3 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
{error} {error}
</div> </div>
)} )}
packages/web/src/components/auth/RegisterPage.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export function RegisterPage() {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
{error && ( {error && (
<div className="mb-4 p-3 bg-[rgba(253,164,175,0.10)] border border-[rgba(253,164,175,0.30)] rounded text-txt-danger text-sm"> <div className="mb-4 p-3 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
{error} {error}
</div> </div>
)} )}
packages/web/src/components/chat/FriendsPage.tsx
+1 -1
View File
@@ -161,7 +161,7 @@ export function FriendsPage() {
</button> </button>
</form> </form>
{addStatus && ( {addStatus && (
<div className={`text-sm p-3 rounded-lg border ${addStatus.type === 'success' ? 'text-txt-positive border-[rgba(134,239,172,0.20)] bg-[rgba(134,239,172,0.05)]' : 'text-txt-danger border-[rgba(253,164,175,0.20)] bg-[rgba(253,164,175,0.05)]'}`}> <div className={`text-sm p-3 rounded-lg border ${addStatus.type === 'success' ? 'text-txt-positive border-status-online/20 bg-status-online/5' : 'text-txt-danger border-accent-rose/20 bg-accent-rose/5'}`}>
{addStatus.message} {addStatus.message}
</div> </div>
)} )}
packages/web/src/components/chat/MarkdownRenderer.tsx
+2 -2
View File
@@ -67,8 +67,8 @@ const aetherTheme = {
...themes.oneDark, ...themes.oneDark,
plain: { plain: {
...themes.oneDark.plain, ...themes.oneDark.plain,
backgroundColor: 'var(--bg-elevated)', backgroundColor: 'rgb(var(--bg-elevated))',
color: 'var(--text-message)', color: 'rgb(var(--text-message))',
}, },
}; };
packages/web/src/components/chat/Message.tsx
+1 -1
View File
@@ -286,7 +286,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
key={att.id} key={att.id}
href={`/api/uploads/${att.filename}`} href={`/api/uploads/${att.filename}`}
download={att.originalName} download={att.originalName}
className="flex items-center gap-3 p-4 bg-[rgba(26,26,35,0.50)] rounded-lg border border-border-hard hover:bg-interactive-hover transition-all max-w-[400px] mt-1 group/att" className="flex items-center gap-3 p-4 bg-surface-channel/50 rounded-lg border border-border-hard hover:bg-interactive-hover transition-all max-w-[400px] mt-1 group/att"
> >
<div className="p-2 bg-surface-base rounded text-txt-tertiary group-hover/att:text-txt-primary transition-colors"> <div className="p-2 bg-surface-base rounded text-txt-tertiary group-hover/att:text-txt-primary transition-colors">
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
packages/web/src/components/chat/MessageInput.tsx
+1 -1
View File
@@ -261,7 +261,7 @@ export function MessageInput({ channelId, channelName }: MessageInputProps) {
{/* File previews */} {/* File previews */}
{files.length > 0 && ( {files.length > 0 && (
<div className="p-4 flex flex-wrap gap-4 bg-[rgba(26,26,35,0.30)]"> <div className="p-4 flex flex-wrap gap-4 bg-surface-channel/30">
{files.map((file, i) => ( {files.map((file, i) => (
<div key={i} className="relative group bg-surface-channel rounded-lg p-2 max-w-[200px] shadow-elevation-low border border-border-hard"> <div key={i} className="relative group bg-surface-channel rounded-lg p-2 max-w-[200px] shadow-elevation-low border border-border-hard">
{file.type.startsWith('image/') ? ( {file.type.startsWith('image/') ? (
packages/web/src/components/chat/TypingIndicator.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export function TypingIndicator({ channelId }: TypingIndicatorProps) {
return ( return (
<div className="h-[24px] px-4 flex items-center text-[12px] text-txt-primary font-medium select-none pointer-events-none"> <div className="h-[24px] px-4 flex items-center text-[12px] text-txt-primary font-medium select-none pointer-events-none">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="flex gap-[2px] bg-[rgba(37,37,48,0.20)] rounded-full px-2 py-1"> <div className="flex gap-[2px] bg-surface-elevated/20 rounded-full px-2 py-1">
<div className="w-[5px] h-[5px] bg-txt-message rounded-full animate-bounce" style={{ animationDelay: '0ms', animationDuration: '0.8s' }} /> <div className="w-[5px] h-[5px] bg-txt-message rounded-full animate-bounce" style={{ animationDelay: '0ms', animationDuration: '0.8s' }} />
<div className="w-[5px] h-[5px] bg-txt-message rounded-full animate-bounce" style={{ animationDelay: '150ms', animationDuration: '0.8s' }} /> <div className="w-[5px] h-[5px] bg-txt-message rounded-full animate-bounce" style={{ animationDelay: '150ms', animationDuration: '0.8s' }} />
<div className="w-[5px] h-[5px] bg-txt-message rounded-full animate-bounce" style={{ animationDelay: '300ms', animationDuration: '0.8s' }} /> <div className="w-[5px] h-[5px] bg-txt-message rounded-full animate-bounce" style={{ animationDelay: '300ms', animationDuration: '0.8s' }} />
packages/web/src/components/layout/ChannelSidebar.tsx
+2 -2
View File
@@ -619,7 +619,7 @@ function UserAreaPanel({
}} }}
className="w-full h-1.5 rounded-full appearance-none cursor-pointer accent-accent-primary bg-surface-base [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md" className="w-full h-1.5 rounded-full appearance-none cursor-pointer accent-accent-primary bg-surface-base [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md"
style={{ style={{
background: `linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) ${inputVolume / 2}%, var(--interactive-muted) ${inputVolume / 2}%, var(--interactive-muted) 100%)`, background: `linear-gradient(to right, rgb(var(--accent-primary)) 0%, rgb(var(--accent-primary)) ${inputVolume / 2}%, rgb(var(--interactive-muted)) ${inputVolume / 2}%, rgb(var(--interactive-muted)) 100%)`,
}} }}
/> />
{/* Mic level meter */} {/* Mic level meter */}
@@ -705,7 +705,7 @@ function UserAreaPanel({
}} }}
className="w-full h-1.5 rounded-full appearance-none cursor-pointer bg-surface-base [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md" className="w-full h-1.5 rounded-full appearance-none cursor-pointer bg-surface-base [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md"
style={{ style={{
background: `linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) ${outputVolume / 2}%, var(--interactive-muted) ${outputVolume / 2}%, var(--interactive-muted) 100%)`, background: `linear-gradient(to right, rgb(var(--accent-primary)) 0%, rgb(var(--accent-primary)) ${outputVolume / 2}%, rgb(var(--interactive-muted)) ${outputVolume / 2}%, rgb(var(--interactive-muted)) 100%)`,
}} }}
/> />
</div> </div>
packages/web/src/components/layout/MemberSidebar.tsx
+2 -2
View File
@@ -15,7 +15,7 @@ function getMemberGroup(member: MemberWithUser, ownerId: string | undefined) {
return { return {
key: '__owner__', key: '__owner__',
label: 'OWNER', label: 'OWNER',
color: ownerRole?.color ?? 'var(--accent-rose)', color: ownerRole?.color ?? 'rgb(var(--accent-rose))',
position: Infinity, position: Infinity,
}; };
} }
@@ -79,7 +79,7 @@ export function MemberSidebar() {
return { color: sorted[0]!.color }; return { color: sorted[0]!.color };
} }
if (ownerId && member.userId === ownerId) { if (ownerId && member.userId === ownerId) {
return { color: 'var(--accent-rose)' }; return { color: 'rgb(var(--accent-rose))' };
} }
return undefined; return undefined;
}; };
packages/web/src/components/modals/ChannelSettingsModal.tsx
+2 -2
View File
@@ -104,7 +104,7 @@ export function ChannelSettingsModal() {
</div> </div>
{error && ( {error && (
<div className="p-2 bg-[rgba(253,164,175,0.10)] border border-[rgba(253,164,175,0.30)] rounded text-txt-danger text-sm"> <div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
{error} {error}
</div> </div>
)} )}
@@ -139,7 +139,7 @@ export function ChannelSettingsModal() {
</div> </div>
{isPrivate && !isFetching && ( {isPrivate && !isFetching && (
<div className="flex items-start gap-2 p-2 bg-[rgba(17,17,24,0.50)] rounded text-xs text-txt-tertiary"> <div className="flex items-start gap-2 p-2 bg-surface-input/50 rounded text-xs text-txt-tertiary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0 mt-0.5 text-txt-secondary"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0 mt-0.5 text-txt-secondary">
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" /> <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" />
</svg> </svg>
packages/web/src/components/modals/CreateChannel.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export function CreateChannelModal() {
<Modal isOpen={isOpen} onClose={closeModal} title="Create Channel"> <Modal isOpen={isOpen} onClose={closeModal} title="Create Channel">
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
{error && ( {error && (
<div className="mb-3 p-2 bg-[rgba(253,164,175,0.10)] border border-[rgba(253,164,175,0.30)] rounded text-txt-danger text-sm"> <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
{error} {error}
</div> </div>
)} )}
packages/web/src/components/modals/CreateServer.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export function CreateServerModal() {
<Modal isOpen={isOpen} onClose={closeModal} title="Create a Server"> <Modal isOpen={isOpen} onClose={closeModal} title="Create a Server">
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
{error && ( {error && (
<div className="mb-3 p-2 bg-[rgba(253,164,175,0.10)] border border-[rgba(253,164,175,0.30)] rounded text-txt-danger text-sm"> <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
{error} {error}
</div> </div>
)} )}
packages/web/src/components/modals/InviteModal.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export function InviteModal() {
Share this invite link with friends to let them join your server. Share this invite link with friends to let them join your server.
</p> </p>
{error && ( {error && (
<div className="mb-3 p-2 bg-[rgba(253,164,175,0.10)] border border-[rgba(253,164,175,0.30)] rounded text-txt-danger text-sm"> <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
{error} {error}
</div> </div>
)} )}
packages/web/src/components/modals/JoinServer.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ export function JoinServerModal() {
Enter an invite code to join an existing server. Enter an invite code to join an existing server.
</p> </p>
{error && ( {error && (
<div className="mb-3 p-2 bg-[rgba(253,164,175,0.10)] border border-[rgba(253,164,175,0.30)] rounded text-txt-danger text-sm"> <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
{error} {error}
</div> </div>
)} )}
packages/web/src/components/modals/ServerSettings.tsx
+2 -2
View File
@@ -189,7 +189,7 @@ function StreamingLimitsPanel() {
{/* Save / Reset */} {/* Save / Reset */}
{saveError && ( {saveError && (
<div className="p-2 bg-[rgba(253,164,175,0.10)] border border-[rgba(253,164,175,0.30)] rounded text-txt-danger text-sm">{saveError}</div> <div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{saveError}</div>
)} )}
{saveSuccess && ( {saveSuccess && (
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">Settings saved</div> <div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">Settings saved</div>
@@ -369,7 +369,7 @@ export function ServerSettingsModal() {
{/* Content */} {/* Content */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
{error && ( {error && (
<div className="mb-3 p-2 bg-[rgba(253,164,175,0.10)] border border-[rgba(253,164,175,0.30)] rounded text-txt-danger text-sm">{error}</div> <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{error}</div>
)} )}
{tab === 'overview' && ( {tab === 'overview' && (
packages/web/src/components/modals/UserSettings.tsx
+1 -1
View File
@@ -76,7 +76,7 @@ export function UserSettingsModal() {
</div> </div>
{error && ( {error && (
<div className="p-2 bg-[rgba(253,164,175,0.10)] border border-[rgba(253,164,175,0.30)] rounded text-txt-danger text-sm">{error}</div> <div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{error}</div>
)} )}
{success && ( {success && (
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">{success}</div> <div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">{success}</div>
packages/web/src/components/voice/VoiceControls.tsx
+1 -1
View File
@@ -115,7 +115,7 @@ export function VoiceControls() {
title="Connection Info" title="Connection Info"
> >
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className={qualityColor}> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className={qualityColor}>
<path d="M1.5 21.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM3.14 15.75a.75.75 0 01-.09-1.06A8.46 8.46 0 0112 11a8.46 8.46 0 018.95 3.69.75.75 0 01-1.15.97A6.96 6.96 0 0012 12.5a6.96 6.96 0 00-7.8 3.16.75.75 0 01-1.06.09zM6.37 18.3a.75.75 0 01-.08-1.06A5.46 5.46 0 0112 15a5.46 5.46 0 015.71 2.24.75.75 0 01-1.14.97A3.96 3.96 0 0012 16.5a3.96 3.96 0 00-4.57 1.71.75.75 0 01-1.06.09z" /> <path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" />
</svg> </svg>
</button> </button>
packages/web/src/components/voice/VoiceGrid.tsx
+1 -1
View File
@@ -134,7 +134,7 @@ export function VoiceGrid({ participants }: VoiceGridProps) {
{/* Bottom strip of other tiles */} {/* Bottom strip of other tiles */}
{!stripHidden && otherTiles.length > 0 && ( {!stripHidden && otherTiles.length > 0 && (
<div className="h-[120px] flex-shrink-0 flex items-center justify-center gap-2 p-2 bg-[rgba(11,11,16,0.50)] overflow-x-auto no-scrollbar"> <div className="h-[120px] flex-shrink-0 flex items-center justify-center gap-2 p-2 bg-surface-base/50 overflow-x-auto no-scrollbar">
{otherTiles.map((t) => ( {otherTiles.map((t) => (
<div <div
key={t.key} key={t.key}
packages/web/src/styles/globals.css
+41 -41
View File
@@ -4,55 +4,55 @@
@layer base { @layer base {
:root { :root {
/* ── Matte Surfaces ── */ /* ── Matte Surfaces (RGB channels for Tailwind opacity support) ── */
--bg-base: #0b0b10; --bg-base: 11 11 16;
--bg-channel: #1a1a23; --bg-channel: 26 26 35;
--bg-chat: #13131a; --bg-chat: 19 19 26;
--bg-members: #1a1a23; --bg-members: 26 26 35;
--bg-elevated: #252530; --bg-elevated: 37 37 48;
--bg-input: #111118; --bg-input: 17 17 24;
--bg-overlay: rgba(0, 0, 0, 0.85); --bg-overlay: rgba(0, 0, 0, 0.85);
/* ── Borders ── */ /* ── Borders ── */
--border-hard: #22222c; --border-hard: 34 34 44;
--border-soft: #2a2a36; --border-soft: 42 42 54;
/* ── Pastel Accents ── */ /* ── Pastel Accents ── */
--accent-mint: #86efac; --accent-mint: 134 239 172;
--accent-peach: #fca5a5; --accent-peach: 252 165 165;
--accent-lavender: #c4b5fd; --accent-lavender: 196 181 253;
--accent-sky: #7dd3fc; --accent-sky: 125 211 252;
--accent-amber: #fcd34d; --accent-amber: 252 211 77;
--accent-rose: #fda4af; --accent-rose: 253 164 175;
--accent-coral: #fb923c; --accent-coral: 251 146 60;
/* ── Primary Action (replaces blurple) ── */ /* ── Primary Action (replaces blurple) ── */
--accent-primary: #7c6cf6; --accent-primary: 124 108 246;
--accent-primary-hover: #6b5ce0; --accent-primary-hover: 107 92 224;
--accent-primary-active: #5f4fd0; --accent-primary-active: 95 79 208;
/* ── Text Hierarchy ── */ /* ── Text Hierarchy ── */
--text-primary: #efefef; --text-primary: 239 239 239;
--text-secondary: #a0a0aa; --text-secondary: 160 160 170;
--text-tertiary: #5c5c68; --text-tertiary: 92 92 104;
--text-category: #484854; --text-category: 72 72 84;
--text-message: #d8d8de; --text-message: 216 216 222;
--text-link: #7dd3fc; --text-link: 125 211 252;
--text-positive: #86efac; --text-positive: 134 239 172;
--text-warning: #fcd34d; --text-warning: 252 211 77;
--text-danger: #fca5a5; --text-danger: 252 165 165;
/* ── Interactive ── */ /* ── Interactive ── */
--interactive-hover: rgba(255, 255, 255, 0.06); --interactive-hover: rgba(255, 255, 255, 0.06);
--interactive-active: rgba(255, 255, 255, 0.12); --interactive-active: rgba(255, 255, 255, 0.12);
--interactive-selected: rgba(255, 255, 255, 0.16); --interactive-selected: rgba(255, 255, 255, 0.16);
--interactive-muted: #3a3a44; --interactive-muted: 58 58 68;
/* ── Status ── */ /* ── Status ── */
--status-online: #86efac; --status-online: 134 239 172;
--status-idle: #fcd34d; --status-idle: 252 211 77;
--status-dnd: #fca5a5; --status-dnd: 252 165 165;
--status-offline: #3a3a44; --status-offline: 58 58 68;
/* ── Glass Material ── */ /* ── Glass Material ── */
--glass-bg: rgba(20, 20, 26, 0.52); --glass-bg: rgba(20, 20, 26, 0.52);
@@ -60,7 +60,7 @@
--glass-highlight: rgba(255, 255, 255, 0.05); --glass-highlight: rgba(255, 255, 255, 0.05);
/* ── Notification ── */ /* ── Notification ── */
--notification: #fda4af; --notification: 253 164 175;
} }
* { * {
@@ -70,7 +70,7 @@
::selection { ::selection {
background: rgba(134, 239, 172, 0.25); background: rgba(134, 239, 172, 0.25);
color: var(--text-primary); color: rgb(var(--text-primary));
} }
html, body, #root { html, body, #root {
@@ -92,14 +92,14 @@
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--bg-input); background-color: rgb(var(--bg-input));
border-radius: 9999px; border-radius: 9999px;
border: 2px solid transparent; border: 2px solid transparent;
background-clip: padding-box; background-clip: padding-box;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: var(--bg-channel); background-color: rgb(var(--bg-channel));
} }
.no-scrollbar::-webkit-scrollbar { .no-scrollbar::-webkit-scrollbar {
@@ -180,23 +180,23 @@
.glass { .glass {
backdrop-filter: none; backdrop-filter: none;
-webkit-backdrop-filter: none; -webkit-backdrop-filter: none;
background: var(--bg-channel); background: rgb(var(--bg-channel));
} }
.glass-strip { .glass-strip {
backdrop-filter: none; backdrop-filter: none;
-webkit-backdrop-filter: none; -webkit-backdrop-filter: none;
background: var(--bg-channel); background: rgb(var(--bg-channel));
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.20); box-shadow: 2px 0 8px rgba(0, 0, 0, 0.20);
} }
.glass-bubble { .glass-bubble {
backdrop-filter: none; backdrop-filter: none;
-webkit-backdrop-filter: none; -webkit-backdrop-filter: none;
background: var(--bg-elevated); background: rgb(var(--bg-elevated));
} }
.glass-pill { .glass-pill {
backdrop-filter: none; backdrop-filter: none;
-webkit-backdrop-filter: none; -webkit-backdrop-filter: none;
background: var(--bg-elevated); background: rgb(var(--bg-elevated));
} }
} }
packages/web/tailwind.config.js
+33 -32
View File
@@ -8,59 +8,60 @@ export default {
extend: { extend: {
colors: { colors: {
// ── AETHER DRIFT TOKENS ── // ── AETHER DRIFT TOKENS ──
// RGB-channel variables enable Tailwind opacity modifiers (e.g. bg-accent-rose/10)
surface: { surface: {
base: 'var(--bg-base)', base: 'rgb(var(--bg-base) / <alpha-value>)',
channel: 'var(--bg-channel)', channel: 'rgb(var(--bg-channel) / <alpha-value>)',
chat: 'var(--bg-chat)', chat: 'rgb(var(--bg-chat) / <alpha-value>)',
members: 'var(--bg-members)', members: 'rgb(var(--bg-members) / <alpha-value>)',
elevated: 'var(--bg-elevated)', elevated: 'rgb(var(--bg-elevated) / <alpha-value>)',
input: 'var(--bg-input)', input: 'rgb(var(--bg-input) / <alpha-value>)',
overlay: 'var(--bg-overlay)', overlay: 'var(--bg-overlay)',
}, },
border: { border: {
hard: 'var(--border-hard)', hard: 'rgb(var(--border-hard) / <alpha-value>)',
soft: 'var(--border-soft)', soft: 'rgb(var(--border-soft) / <alpha-value>)',
}, },
accent: { accent: {
mint: 'var(--accent-mint)', mint: 'rgb(var(--accent-mint) / <alpha-value>)',
peach: 'var(--accent-peach)', peach: 'rgb(var(--accent-peach) / <alpha-value>)',
lavender: 'var(--accent-lavender)', lavender: 'rgb(var(--accent-lavender) / <alpha-value>)',
sky: 'var(--accent-sky)', sky: 'rgb(var(--accent-sky) / <alpha-value>)',
amber: 'var(--accent-amber)', amber: 'rgb(var(--accent-amber) / <alpha-value>)',
rose: 'var(--accent-rose)', rose: 'rgb(var(--accent-rose) / <alpha-value>)',
coral: 'var(--accent-coral)', coral: 'rgb(var(--accent-coral) / <alpha-value>)',
primary: 'var(--accent-primary)', primary: 'rgb(var(--accent-primary) / <alpha-value>)',
'primary-hover': 'var(--accent-primary-hover)', 'primary-hover': 'rgb(var(--accent-primary-hover) / <alpha-value>)',
'primary-active':'var(--accent-primary-active)', 'primary-active':'rgb(var(--accent-primary-active) / <alpha-value>)',
}, },
txt: { txt: {
primary: 'var(--text-primary)', primary: 'rgb(var(--text-primary) / <alpha-value>)',
secondary: 'var(--text-secondary)', secondary: 'rgb(var(--text-secondary) / <alpha-value>)',
tertiary: 'var(--text-tertiary)', tertiary: 'rgb(var(--text-tertiary) / <alpha-value>)',
message: 'var(--text-message)', message: 'rgb(var(--text-message) / <alpha-value>)',
link: 'var(--text-link)', link: 'rgb(var(--text-link) / <alpha-value>)',
positive: 'var(--text-positive)', positive: 'rgb(var(--text-positive) / <alpha-value>)',
warning: 'var(--text-warning)', warning: 'rgb(var(--text-warning) / <alpha-value>)',
danger: 'var(--text-danger)', danger: 'rgb(var(--text-danger) / <alpha-value>)',
}, },
interactive: { interactive: {
hover: 'var(--interactive-hover)', hover: 'var(--interactive-hover)',
active: 'var(--interactive-active)', active: 'var(--interactive-active)',
selected: 'var(--interactive-selected)', selected: 'var(--interactive-selected)',
muted: 'var(--interactive-muted)', muted: 'rgb(var(--interactive-muted) / <alpha-value>)',
}, },
status: { status: {
online: 'var(--status-online)', online: 'rgb(var(--status-online) / <alpha-value>)',
idle: 'var(--status-idle)', idle: 'rgb(var(--status-idle) / <alpha-value>)',
dnd: 'var(--status-dnd)', dnd: 'rgb(var(--status-dnd) / <alpha-value>)',
offline: 'var(--status-offline)', offline: 'rgb(var(--status-offline) / <alpha-value>)',
}, },
glass: { glass: {
bg: 'var(--glass-bg)', bg: 'var(--glass-bg)',
border: 'var(--glass-border)', border: 'var(--glass-border)',
highlight: 'var(--glass-highlight)', highlight: 'var(--glass-highlight)',
}, },
notification: 'var(--notification)', notification: 'rgb(var(--notification) / <alpha-value>)',
}, },
boxShadow: { 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)', '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)',