mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-11 02:59:59 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: use unraid css variables in sonner (#1634)

Browse Source 
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- Style
- Unified toast colors with theme variables for consistent light/dark
theming.
- Refined close button colors, borders, and hover state for improved
contrast and clarity.
  - Updated loading bar color to better align with muted text tones.
  - Visual-only updates; no behavioral changes.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Pujit Mehrotra
2025-08-28 16:26:32 -04:00
committed by GitHub
parent 0ead267838
commit 26a95af953
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
@tailwind-shared/sonner.css
View File

@@ -233,8 +233,8 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0; padding: 0;
color: var(--gray12); color: hsl(var(--foreground));
border: 1px solid var(--gray4); border: 1px solid hsl(var(--border));
transform: var(--toast-close-button-transform); transform: var(--toast-close-button-transform);
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
@@ -243,7 +243,7 @@
} }
[data-sonner-toast] [data-close-button] { [data-sonner-toast] [data-close-button] {
background: var(--gray1); background: hsl(var(--background));
} }
:where([data-sonner-toast]) :where([data-close-button]):focus-visible { :where([data-sonner-toast]) :where([data-close-button]):focus-visible {
@@ -255,8 +255,8 @@
} }
[data-sonner-toast]:hover [data-close-button]:hover { [data-sonner-toast]:hover [data-close-button]:hover {
background: var(--gray2); background: hsl(var(--muted));
border-color: var(--gray5); border-color: hsl(var(--border));
} }
/* Leave a ghost div to avoid setting hover to false when swiping out */ /* Leave a ghost div to avoid setting hover to false when swiping out */
@@ -414,9 +414,9 @@
} }
[data-sonner-toaster][data-theme='light'] { [data-sonner-toaster][data-theme='light'] {
--normal-bg: #fff; --normal-bg: hsl(var(--background));
--normal-border: var(--gray4); --normal-border: hsl(var(--border));
--normal-text: var(--gray12); --normal-text: hsl(var(--foreground));
--success-bg: hsl(143, 85%, 96%); --success-bg: hsl(143, 85%, 96%);
--success-border: hsl(145, 92%, 91%); --success-border: hsl(145, 92%, 91%);
@@ -436,21 +436,21 @@
} }
[data-sonner-toaster][data-theme='light'] [data-sonner-toast][data-invert='true'] { [data-sonner-toaster][data-theme='light'] [data-sonner-toast][data-invert='true'] {
--normal-bg: #000; --normal-bg: hsl(0 0% 3.9%);
--normal-border: hsl(0, 0%, 20%); --normal-border: hsl(0 0% 14.9%);
--normal-text: var(--gray1); --normal-text: hsl(0 0% 98%);
} }
[data-sonner-toaster][data-theme='dark'] [data-sonner-toast][data-invert='true'] { [data-sonner-toaster][data-theme='dark'] [data-sonner-toast][data-invert='true'] {
--normal-bg: #fff; --normal-bg: hsl(0 0% 100%);
--normal-border: var(--gray3); --normal-border: hsl(0 0% 89.8%);
--normal-text: var(--gray12); --normal-text: hsl(0 0% 3.9%);
} }
[data-sonner-toaster][data-theme='dark'] { [data-sonner-toaster][data-theme='dark'] {
--normal-bg: #000; --normal-bg: hsl(var(--background));
--normal-border: hsl(0, 0%, 20%); --normal-border: hsl(var(--border));
--normal-text: var(--gray1); --normal-text: hsl(var(--foreground));
--success-bg: hsl(150, 100%, 6%); --success-bg: hsl(150, 100%, 6%);
--success-border: hsl(147, 100%, 12%); --success-border: hsl(147, 100%, 12%);
@@ -541,7 +541,7 @@
.sonner-loading-bar { .sonner-loading-bar {
animation: sonner-spin 1.2s linear infinite; animation: sonner-spin 1.2s linear infinite;
background: var(--gray11); background: hsl(var(--muted-foreground));
border-radius: 6px; border-radius: 6px;
height: 8%; height: 8%;
left: -10%; left: -10%;