chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: adjusting colors in themes file for better visibility/distinction of entries in widgets like al changes, ivans, and rs in both lt and dark mode

Browse Source
This commit is contained in:
vkuchenik
2026-11-06 10:52:58 -08:00
parent e50638ab55
commit 58c6a40b06
1 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/theme.js
+16 -15
View File
@@ -2,7 +2,7 @@ import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecip
// REUSABLE GLASS SURFACE // REUSABLE GLASS SURFACE
const glassSurface = { const glassSurface = {
bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"}, bg: {base: "rgb(253 253 253 / 0.4)", _dark: "rgb(37 38 46 / 0.8)"},
backdropFilter: "blur(12px)", backdropFilter: "blur(12px)",
WebkitBackdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
border: "1px solid", border: "1px solid",
@@ -353,7 +353,7 @@ const glassPopoverRecipe = defineSlotRecipe({
borderRadius: "xl", borderRadius: "xl",
p: 3, p: 3,
boxShadow: "lg", boxShadow: "lg",
bg: {base: "rgba(255, 255, 255, 0.95)", _dark: "rgba(20, 22, 25, 0.95)"}, bg: {base: "rgba(255, 255, 255, 0.95)", _dark: "#353742"},
backdropFilter: "blur(15px)", backdropFilter: "blur(15px)",
WebkitBackdropFilter: "blur(15px)", WebkitBackdropFilter: "blur(15px)",
}, },
@@ -381,7 +381,7 @@ const glassDialogRecipe = defineSlotRecipe({
maxW: "60%", maxW: "60%",
minH: "80%", minH: "80%",
overflow: "hidden", overflow: "hidden",
bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgba(20, 22, 25, 0.8)"}, bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgb(22 23 28 / 0.9)"},
backdropFilter: "blur(15px)", backdropFilter: "blur(15px)",
WebkitBackdropFilter: "blur(15px)", WebkitBackdropFilter: "blur(15px)",
}, },
@@ -471,7 +471,7 @@ const glassTabRecipe = defineRecipe({
// --- THE GLASS EFFECT (Inactive) --- // --- THE GLASS EFFECT (Inactive) ---
// Uses a highly transparent white/black depending on mode // Uses a highly transparent white/black depending on mode
bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.03)"}, bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "#1e2027"},
backdropFilter: "blur(12px)", backdropFilter: "blur(12px)",
WebkitBackdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
border: "1px solid", border: "1px solid",
@@ -485,7 +485,7 @@ const glassTabRecipe = defineRecipe({
pr: "16px", pr: "16px",
// --- THE GLASS EFFECT (Hover) --- // --- THE GLASS EFFECT (Hover) ---
// Becomes slightly more opaque when you mouse over // Becomes slightly more opaque when you mouse over
bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)"}, bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "#191a22"},
borderColor: {base: "rgba(0, 0, 0, 0.1)", _dark: "rgba(255, 255, 255, 0.15)"}, borderColor: {base: "rgba(0, 0, 0, 0.1)", _dark: "rgba(255, 255, 255, 0.15)"},
color: "fg", color: "fg",
textDecoration: "none", textDecoration: "none",
@@ -538,7 +538,7 @@ const config = defineConfig({
opacity: "1 !important", opacity: "1 !important",
borderRadius: "3xl", borderRadius: "3xl",
_dark: { _dark: {
background: "#393c3fff !important", background: "#3B3D49FF !important",
borderColor: "#000000ff !important", borderColor: "#000000ff !important",
boxShadow: "0 0 10px #16181bff !important", boxShadow: "0 0 10px #16181bff !important",
opacity: "1 !important", opacity: "1 !important",
@@ -581,19 +581,20 @@ const config = defineConfig({
theme: { theme: {
semanticTokens: { semanticTokens: {
colors: { colors: {
text: { value: { base: "#000000", _dark: "#FFFFFF" } }, text: { value: { base: "#131315", _dark: "rgb(234 234 234 / 0.94)" } },
textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted
MainBackground: { value: { base: "#F9F9F9", _dark: "#141414" } }, MainBackground: { value: { base: "#f1f1f1", _dark: "#16171c" } },
titleColor: { value: { base: "colors.gray.800", _dark: "#FFFFFF" } }, titleColor: { value: { base: "colors.gray.800", _dark: "#e1e1e1" } },
iconColor: { value: { base: "colors.gray.600", _dark: "colors.gray.300" } }, // Fixed: Visible in dark mode iconColor: { value: { base: "#191919", _dark: "rgb(255 255 255 / 0.82)" } }, // Fixed: Visible in dark mode
glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } }, glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } },
gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}}, gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "#333540"}},
// WIDGET SPECIFIC VALUES // WIDGET SPECIFIC VALUES
widgetItemBg: { value: { base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" } }, widgetItemBg: { value: { base: "rgb(115 132 166 / 0.17)", _dark: "rgb(51 53 64)" } },
widgetItemExpandedBg: { value: { base: "rgba(0, 0, 0, 0.08)", _dark: "rgba(0, 0, 0, 0.3)" } }, widgetItemExpandedBg: { value: { base: "rgb(184 197 220 / 0.17)", _dark: "rgb(59 61 73)" } },
widgetBadgeBg: { value: { base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.5)" } }, widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90)" } },
widgetTextMuted: { value: { base: "colors.gray.600", _dark: "colors.gray.400" } }, widgetInnerBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(100 103 119)" } },
widgetTextMuted: { value: { base: "#262627", _dark: "rgb(236 236 236 / 0.9)" } },
// ALERT COLORS // ALERT COLORS
alertRed: { value: { base: "colors.red.600", _dark: "colors.red.400" } }, alertRed: { value: { base: "colors.red.600", _dark: "colors.red.400" } },