mirror of
https://github.com/luxfi/explore.git
synced 2026-07-27 05:54:15 +00:00
v1.1.11 landed the three money values (Reward/Value/Fee) at 4.54:1 and killed the overflow + Menu-button clip, but the network-utilization % mapped to --color-badge-bright-green-fg (#25855A) measured 4.39:1 on the real #FAFAFA card background (not pure white) -- 0.11 under bar. Add dedicated semantic status tokens (--color-status-good/warn/bad) with darker light-theme shades (#1A7A47 / #B45309 / #B91C1C -> 5.1 / 4.8 / 6.1 :1 on #FAFAFA) and light shades for dark theme, and point getNetworkUtilizationParams at them. All four home-page values now clear 4.5:1 on every brand. Co-authored-by: Hanzo Dev <dev@hanzo.ai>
495 lines
18 KiB
CSS
495 lines
18 KiB
CSS
/*
|
|
* Design tokens — CSS custom properties
|
|
*
|
|
* These mirror the Chakra semantic tokens defined in
|
|
* toolkit/theme/foundations/semanticTokens.ts and
|
|
* toolkit/theme/foundations/colors.ts (DEFAULT_THEME_COLORS).
|
|
*
|
|
* Light mode is the default (:root). Dark mode activates via .dark class
|
|
* (applied by next-themes with the "class" strategy).
|
|
*
|
|
* Palette reference (true neutral grays):
|
|
* gray.50 = #FAFAFA gray.500 = #737373
|
|
* gray.100 = #F5F5F5 gray.600 = #525252
|
|
* gray.200 = #E5E5E5 gray.700 = #404040
|
|
* gray.300 = #D4D4D4 gray.800 = #262626
|
|
* gray.400 = #A3A3A3 gray.900 = #171717
|
|
*
|
|
* blackAlpha.50 = rgba(16,17,18,0.04) whiteAlpha.50 = rgba(255,255,255,0.04)
|
|
* blackAlpha.100 = rgba(16,17,18,0.06) whiteAlpha.100 = rgba(255,255,255,0.06)
|
|
* blackAlpha.200 = rgba(16,17,18,0.08) whiteAlpha.200 = rgba(255,255,255,0.08)
|
|
* blackAlpha.300 = rgba(16,17,18,0.16) whiteAlpha.300 = rgba(255,255,255,0.16)
|
|
* blackAlpha.400 = rgba(16,17,18,0.24) whiteAlpha.400 = rgba(255,255,255,0.24)
|
|
* blackAlpha.500 = rgba(16,17,18,0.36) whiteAlpha.500 = rgba(255,255,255,0.36)
|
|
* blackAlpha.600 = rgba(16,17,18,0.48) whiteAlpha.600 = rgba(255,255,255,0.48)
|
|
* blackAlpha.700 = rgba(16,17,18,0.64) whiteAlpha.700 = rgba(255,255,255,0.64)
|
|
* blackAlpha.800 = rgba(16,17,18,0.80) whiteAlpha.800 = rgba(255,255,255,0.80)
|
|
* blackAlpha.900 = rgba(16,17,18,0.92) whiteAlpha.900 = rgba(255,255,255,0.92)
|
|
*/
|
|
|
|
/* ================================================================
|
|
LIGHT MODE (default)
|
|
================================================================ */
|
|
:root {
|
|
/* --- Backgrounds --- */
|
|
--color-bg-primary: #FFFFFF;
|
|
--color-bg-info: #FAFAFA;
|
|
--color-bg-body: #FFFFFF;
|
|
|
|
/* --- Foregrounds --- */
|
|
--color-fg-info: #525252;
|
|
|
|
/* --- Text --- */
|
|
--color-text-primary: rgba(16, 17, 18, 0.80);
|
|
--color-text-secondary: #737373;
|
|
--color-text-error: #E53E3E;
|
|
--color-text-success: #38A169;
|
|
|
|
/* --- Status foreground (AA >=4.5:1 on the #FAFAFA card bg) --- */
|
|
--color-status-good: #1A7A47;
|
|
--color-status-warn: #B45309;
|
|
--color-status-bad: #B91C1C;
|
|
|
|
/* --- Headings --- */
|
|
--color-heading: rgba(16, 17, 18, 0.80);
|
|
|
|
/* --- Icons --- */
|
|
--color-icon-primary: #737373;
|
|
--color-icon-secondary: #A3A3A3;
|
|
|
|
/* --- Borders --- */
|
|
--color-border-divider: rgba(16, 17, 18, 0.06);
|
|
--color-border-error: #E53E3E;
|
|
--color-border-info: #A3A3A3;
|
|
|
|
/* --- Links --- */
|
|
--color-link-primary: #404040;
|
|
--color-link-primary-hover: #525252;
|
|
--color-link-secondary: #737373;
|
|
--color-link-subtle: rgba(16, 17, 18, 0.80);
|
|
--color-link-subtle-hover: rgba(16, 17, 18, 0.80);
|
|
--color-link-menu: rgba(16, 17, 18, 0.80);
|
|
--color-link-underlaid-bg: #F5F5F5;
|
|
--color-link-nav-fg: rgba(16, 17, 18, 0.80);
|
|
--color-link-nav-fg-hover: #525252;
|
|
--color-link-nav-fg-selected: #171717;
|
|
--color-link-nav-fg-active: #525252;
|
|
--color-link-nav-bg-selected: #F5F5F5;
|
|
|
|
/* --- Buttons --- */
|
|
--color-button-solid-bg: #171717;
|
|
--color-button-solid-text: #FFFFFF;
|
|
--color-button-outline-fg: #171717;
|
|
--color-button-subtle-fg: rgba(16, 17, 18, 0.80);
|
|
--color-button-subtle-bg: rgba(16, 17, 18, 0.08);
|
|
--color-button-dropdown-fg: rgba(16, 17, 18, 0.80);
|
|
--color-button-dropdown-border: #F5F5F5;
|
|
--color-button-header-fg: rgba(16, 17, 18, 0.80);
|
|
--color-button-header-fg-selected: rgba(16, 17, 18, 0.80);
|
|
--color-button-header-fg-highlighted: rgba(16, 17, 18, 0.80);
|
|
--color-button-header-border: #F5F5F5;
|
|
--color-button-header-bg-selected: rgba(16, 17, 18, 0.04);
|
|
--color-button-header-bg-highlighted: #FEEBCB;
|
|
--color-button-pagination-fg: rgba(16, 17, 18, 0.80);
|
|
--color-button-pagination-border: #F5F5F5;
|
|
--color-button-icon-background-bg: #FAFAFA;
|
|
--color-button-hero-bg: #171717;
|
|
--color-button-hero-fg: #FFFFFF;
|
|
--color-button-hero-bg-hover: #525252;
|
|
--color-button-hero-fg-hover: #FFFFFF;
|
|
--color-button-hero-bg-selected: rgba(255, 255, 255, 0.06);
|
|
--color-button-hero-fg-selected: rgba(16, 17, 18, 0.80);
|
|
--color-button-segmented-fg: rgba(16, 17, 18, 0.80);
|
|
--color-button-icon-bg: rgba(16, 17, 18, 0.04);
|
|
|
|
/* --- Hover / Selected --- */
|
|
--color-hover: #525252;
|
|
--color-selected-control-bg: #F5F5F5;
|
|
--color-selected-control-text: #171717;
|
|
--color-selected-option-bg: #404040;
|
|
|
|
/* --- Navigation --- */
|
|
--color-nav-bg-selected: #F5F5F5;
|
|
--color-nav-text-selected: #171717;
|
|
|
|
/* --- Inputs --- */
|
|
--color-input-fg: #262626;
|
|
--color-input-bg: #FFFFFF;
|
|
--color-input-bg-readonly: #E5E5E5;
|
|
--color-input-border: #F5F5F5;
|
|
--color-input-border-hover: #E5E5E5;
|
|
--color-input-border-focus: #525252;
|
|
--color-input-placeholder: #A3A3A3;
|
|
|
|
/* --- Tags --- */
|
|
--color-tag-subtle-bg: rgba(16, 17, 18, 0.04);
|
|
--color-tag-subtle-fg: rgba(16, 17, 18, 0.80);
|
|
--color-tag-clickable-bg: #F5F5F5;
|
|
--color-tag-clickable-fg: rgba(16, 17, 18, 0.80);
|
|
--color-tag-filter-bg: #F5F5F5;
|
|
--color-tag-select-bg: #F5F5F5;
|
|
--color-tag-select-fg: #737373;
|
|
--color-tag-select-selected-bg: #404040;
|
|
--color-tag-select-selected-fg: rgba(255, 255, 255, 0.80);
|
|
|
|
/* --- Badges --- */
|
|
--color-badge-gray-bg: rgba(16, 17, 18, 0.04);
|
|
--color-badge-gray-fg: rgba(16, 17, 18, 0.80);
|
|
--color-badge-green-bg: #F0FFF4;
|
|
--color-badge-green-fg: #38A169;
|
|
--color-badge-red-bg: #FFF5F5;
|
|
--color-badge-red-fg: #E53E3E;
|
|
--color-badge-purple-bg: #F5F5F5;
|
|
--color-badge-purple-fg: #525252;
|
|
--color-badge-orange-bg: #FFFAF0;
|
|
--color-badge-orange-fg: #DD6B20;
|
|
--color-badge-blue-bg: #F5F5F5;
|
|
--color-badge-blue-fg: #525252;
|
|
--color-badge-yellow-bg: #FFFFF0;
|
|
--color-badge-yellow-fg: #D69E2E;
|
|
--color-badge-teal-bg: #F5F5F5;
|
|
--color-badge-teal-fg: #525252;
|
|
--color-badge-cyan-bg: #F5F5F5;
|
|
--color-badge-cyan-fg: #525252;
|
|
--color-badge-pink-bg: #FFF5F7;
|
|
--color-badge-pink-fg: #D53F8C;
|
|
--color-badge-purple-alt-bg: #F5F5F5;
|
|
--color-badge-purple-alt-fg: rgba(16, 17, 18, 0.80);
|
|
--color-badge-blue-alt-bg: #F5F5F5;
|
|
--color-badge-blue-alt-fg: rgba(16, 17, 18, 0.80);
|
|
--color-badge-bright-gray-bg: #F5F5F5;
|
|
--color-badge-bright-gray-fg: #525252;
|
|
--color-badge-bright-green-bg: #C6F6D5;
|
|
--color-badge-bright-green-fg: #25855A;
|
|
--color-badge-bright-red-bg: #FED7D7;
|
|
--color-badge-bright-red-fg: #C53030;
|
|
--color-badge-bright-blue-bg: #E5E5E5;
|
|
--color-badge-bright-blue-fg: #404040;
|
|
--color-badge-bright-yellow-bg: #FEFCBF;
|
|
--color-badge-bright-yellow-fg: #B7791F;
|
|
--color-badge-bright-teal-bg: #E5E5E5;
|
|
--color-badge-bright-teal-fg: #404040;
|
|
--color-badge-bright-cyan-bg: #E5E5E5;
|
|
--color-badge-bright-cyan-fg: #404040;
|
|
--color-badge-bright-orange-bg: #FEEBCB;
|
|
--color-badge-bright-orange-fg: #C05621;
|
|
--color-badge-bright-purple-bg: #E5E5E5;
|
|
--color-badge-bright-purple-fg: #404040;
|
|
--color-badge-bright-pink-bg: #FFF5F7;
|
|
--color-badge-bright-pink-fg: #B83280;
|
|
|
|
/* --- Alerts --- */
|
|
--color-alert-fg: rgba(16, 17, 18, 0.80);
|
|
--color-alert-bg-info: rgba(16, 17, 18, 0.04);
|
|
--color-alert-bg-warning: #FEEBCB;
|
|
--color-alert-bg-warning-table: #FFFAF0;
|
|
--color-alert-bg-success: #C6F6D5;
|
|
--color-alert-bg-error: #FED7D7;
|
|
|
|
/* --- Dialogs / Popovers / Drawers --- */
|
|
--color-dialog-bg: #FFFFFF;
|
|
--color-dialog-fg: rgba(16, 17, 18, 0.80);
|
|
--color-popover-bg: #FFFFFF;
|
|
--color-popover-border: rgba(16, 17, 18, 0.10);
|
|
--color-popover-shadow: rgba(16, 17, 18, 0.08);
|
|
--color-drawer-bg: #FFFFFF;
|
|
|
|
/* --- Tooltip --- */
|
|
--color-tooltip-bg: #171717;
|
|
--color-tooltip-fg: #FFFFFF;
|
|
|
|
/* --- Table --- */
|
|
--color-table-header-bg: rgba(16, 17, 18, 0.06);
|
|
--color-table-header-fg: rgba(16, 17, 18, 0.64);
|
|
|
|
/* --- Tabs --- */
|
|
--color-tabs-solid-fg: #171717;
|
|
--color-tabs-secondary-fg: rgba(16, 17, 18, 0.80);
|
|
--color-tabs-secondary-border: #D4D4D4;
|
|
|
|
/* --- Switch --- */
|
|
--color-switch-bg: #D4D4D4;
|
|
|
|
/* --- Skeleton --- */
|
|
--color-skeleton-start: rgba(16, 17, 18, 0.04);
|
|
--color-skeleton-end: rgba(16, 17, 18, 0.06);
|
|
|
|
/* --- Progress --- */
|
|
--color-progress-track: #F5F5F5;
|
|
|
|
/* --- Stats / Topbar --- */
|
|
--color-stats-bg: #FAFAFA;
|
|
--color-topbar-bg: #FAFAFA;
|
|
|
|
/* --- Graph --- */
|
|
--color-graph-line: #737373;
|
|
--color-graph-gradient-start: rgba(163, 163, 163, 0.3);
|
|
--color-graph-gradient-stop: rgba(163, 163, 163, 0);
|
|
|
|
/* --- Scrollbar --- */
|
|
--color-scrollbar-thumb: rgba(16, 17, 18, 0.16);
|
|
|
|
/* --- Selection --- */
|
|
--color-selection-bg: #E3CFE7;
|
|
|
|
/* --- Raw palette (gray, blackAlpha, whiteAlpha) --- */
|
|
--color-gray-50: #FAFAFA;
|
|
--color-gray-100: #F5F5F5;
|
|
--color-gray-200: #E5E5E5;
|
|
--color-gray-300: #D4D4D4;
|
|
--color-gray-400: #A3A3A3;
|
|
--color-gray-500: #737373;
|
|
--color-gray-600: #525252;
|
|
--color-gray-700: #404040;
|
|
--color-gray-800: #262626;
|
|
--color-gray-900: #171717;
|
|
--color-blackAlpha-50: rgba(16, 17, 18, 0.04);
|
|
--color-blackAlpha-100: rgba(16, 17, 18, 0.06);
|
|
--color-blackAlpha-200: rgba(16, 17, 18, 0.08);
|
|
--color-blackAlpha-300: rgba(16, 17, 18, 0.16);
|
|
--color-blackAlpha-400: rgba(16, 17, 18, 0.24);
|
|
--color-blackAlpha-500: rgba(16, 17, 18, 0.36);
|
|
--color-blackAlpha-600: rgba(16, 17, 18, 0.48);
|
|
--color-blackAlpha-700: rgba(16, 17, 18, 0.64);
|
|
--color-blackAlpha-800: rgba(16, 17, 18, 0.80);
|
|
--color-blackAlpha-900: rgba(16, 17, 18, 0.92);
|
|
--color-whiteAlpha-50: rgba(255, 255, 255, 0.04);
|
|
--color-whiteAlpha-100: rgba(255, 255, 255, 0.06);
|
|
--color-whiteAlpha-200: rgba(255, 255, 255, 0.08);
|
|
--color-whiteAlpha-300: rgba(255, 255, 255, 0.16);
|
|
--color-whiteAlpha-400: rgba(255, 255, 255, 0.24);
|
|
--color-whiteAlpha-500: rgba(255, 255, 255, 0.36);
|
|
--color-whiteAlpha-600: rgba(255, 255, 255, 0.48);
|
|
--color-whiteAlpha-700: rgba(255, 255, 255, 0.64);
|
|
--color-whiteAlpha-800: rgba(255, 255, 255, 0.80);
|
|
--color-whiteAlpha-900: rgba(255, 255, 255, 0.92);
|
|
/* --- Chakra legacy aliases (used by migrated components) --- */
|
|
--chakra-colors-bg-primary: var(--color-bg-primary);
|
|
--chakra-colors-text-primary: var(--color-text-primary);
|
|
--chakra-colors-text-secondary: var(--color-text-secondary);
|
|
--chakra-colors-icon-secondary: var(--color-icon-secondary);
|
|
--chakra-colors-border-divider: var(--color-border-divider);
|
|
--chakra-colors-link-primary: var(--color-link-primary);
|
|
--chakra-colors-link-primary-hover: var(--color-link-primary-hover);
|
|
--chakra-colors-hover: var(--color-hover);
|
|
--chakra-colors-gray-100: var(--color-gray-100);
|
|
--chakra-colors-whiteAlpha-50: var(--color-whiteAlpha-50);
|
|
--chakra-colors-whiteAlpha-100: var(--color-whiteAlpha-100);
|
|
|
|
/* --- Shadows --- */
|
|
--shadow-action-bar: 0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%);
|
|
--shadow-popover: 0px 15px 50px -12px rgba(0, 0, 0, 0.25);
|
|
--shadow-drawer: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* ================================================================
|
|
DARK MODE
|
|
================================================================ */
|
|
.dark {
|
|
/* --- Backgrounds --- */
|
|
--color-bg-primary: #000000;
|
|
--color-bg-info: #171717;
|
|
--color-bg-body: #000000;
|
|
|
|
/* --- Foregrounds --- */
|
|
--color-fg-info: #D4D4D4;
|
|
|
|
/* --- Text --- */
|
|
--color-text-primary: rgba(255, 255, 255, 0.80);
|
|
--color-text-secondary: #A3A3A3;
|
|
--color-text-error: #E53E3E;
|
|
--color-text-success: #9AE6B4;
|
|
|
|
/* --- Status foreground (light shades for the dark bg) --- */
|
|
--color-status-good: #6EE7A8;
|
|
--color-status-warn: #FBBF7A;
|
|
--color-status-bad: #FCA5A5;
|
|
|
|
/* --- Headings --- */
|
|
--color-heading: rgba(255, 255, 255, 0.80);
|
|
|
|
/* --- Icons --- */
|
|
--color-icon-primary: #A3A3A3;
|
|
--color-icon-secondary: #737373;
|
|
|
|
/* --- Borders --- */
|
|
--color-border-divider: rgba(255, 255, 255, 0.06);
|
|
--color-border-error: #E53E3E;
|
|
--color-border-info: #737373;
|
|
|
|
/* --- Links --- */
|
|
--color-link-primary: rgba(255, 255, 255, 0.64);
|
|
--color-link-primary-hover: rgba(255, 255, 255, 0.64);
|
|
--color-link-secondary: #A3A3A3;
|
|
--color-link-subtle: #A3A3A3;
|
|
--color-link-subtle-hover: #A3A3A3;
|
|
--color-link-menu: rgba(255, 255, 255, 0.80);
|
|
--color-link-underlaid-bg: #262626;
|
|
--color-link-nav-fg: rgba(255, 255, 255, 0.80);
|
|
--color-link-nav-fg-hover: rgba(255, 255, 255, 0.64);
|
|
--color-link-nav-fg-selected: #FAFAFA;
|
|
--color-link-nav-fg-active: rgba(255, 255, 255, 0.64);
|
|
--color-link-nav-bg-selected: rgba(255, 255, 255, 0.06);
|
|
|
|
/* --- Buttons --- */
|
|
--color-button-solid-bg: rgba(255, 255, 255, 0.92);
|
|
--color-button-solid-text: #000000;
|
|
--color-button-outline-fg: rgba(255, 255, 255, 0.92);
|
|
--color-button-subtle-fg: rgba(255, 255, 255, 0.80);
|
|
--color-button-subtle-bg: rgba(255, 255, 255, 0.08);
|
|
--color-button-dropdown-fg: rgba(255, 255, 255, 0.80);
|
|
--color-button-dropdown-border: #525252;
|
|
--color-button-header-fg: #A3A3A3;
|
|
--color-button-header-fg-selected: rgba(255, 255, 255, 0.80);
|
|
--color-button-header-fg-highlighted: rgba(255, 255, 255, 0.80);
|
|
--color-button-header-border: #525252;
|
|
--color-button-header-bg-selected: rgba(255, 255, 255, 0.06);
|
|
--color-button-header-bg-highlighted: #7B341E;
|
|
--color-button-pagination-fg: #FAFAFA;
|
|
--color-button-pagination-border: rgba(255, 255, 255, 0.06);
|
|
--color-button-icon-background-bg: rgba(255, 255, 255, 0.04);
|
|
--color-button-hero-bg: rgba(255, 255, 255, 0.92);
|
|
--color-button-hero-fg: #FFFFFF;
|
|
--color-button-hero-bg-hover: rgba(255, 255, 255, 0.64);
|
|
--color-button-hero-fg-hover: #FFFFFF;
|
|
--color-button-hero-bg-selected: rgba(255, 255, 255, 0.06);
|
|
--color-button-hero-fg-selected: rgba(16, 17, 18, 0.80);
|
|
--color-button-segmented-fg: rgba(255, 255, 255, 0.80);
|
|
--color-button-icon-bg: rgba(255, 255, 255, 0.04);
|
|
|
|
/* --- Hover / Selected --- */
|
|
--color-hover: rgba(255, 255, 255, 0.64);
|
|
--color-selected-control-bg: rgba(255, 255, 255, 0.06);
|
|
--color-selected-control-text: #FAFAFA;
|
|
--color-selected-option-bg: rgba(255, 255, 255, 0.16);
|
|
|
|
/* --- Navigation --- */
|
|
--color-nav-bg-selected: rgba(255, 255, 255, 0.06);
|
|
--color-nav-text-selected: #FAFAFA;
|
|
|
|
/* --- Inputs --- */
|
|
--color-input-fg: #FAFAFA;
|
|
--color-input-bg: #000000;
|
|
--color-input-bg-readonly: #262626;
|
|
--color-input-border: #525252;
|
|
--color-input-border-hover: #737373;
|
|
--color-input-border-focus: rgba(255, 255, 255, 0.64);
|
|
--color-input-placeholder: #737373;
|
|
|
|
/* --- Tags --- */
|
|
--color-tag-subtle-bg: rgba(255, 255, 255, 0.06);
|
|
--color-tag-subtle-fg: rgba(255, 255, 255, 0.80);
|
|
--color-tag-clickable-bg: #262626;
|
|
--color-tag-clickable-fg: rgba(255, 255, 255, 0.80);
|
|
--color-tag-filter-bg: rgba(255, 255, 255, 0.08);
|
|
--color-tag-select-bg: #262626;
|
|
--color-tag-select-fg: rgba(255, 255, 255, 0.80);
|
|
--color-tag-select-selected-bg: rgba(255, 255, 255, 0.16);
|
|
--color-tag-select-selected-fg: rgba(255, 255, 255, 0.80);
|
|
|
|
/* --- Badges --- */
|
|
--color-badge-gray-bg: rgba(255, 255, 255, 0.06);
|
|
--color-badge-gray-fg: rgba(255, 255, 255, 0.80);
|
|
--color-badge-green-bg: #22543D;
|
|
--color-badge-green-fg: #9AE6B4;
|
|
--color-badge-red-bg: #822727;
|
|
--color-badge-red-fg: #FEB2B2;
|
|
--color-badge-purple-bg: #262626;
|
|
--color-badge-purple-fg: #D4D4D4;
|
|
--color-badge-orange-bg: #7B341E;
|
|
--color-badge-orange-fg: #FEEBCB;
|
|
--color-badge-blue-bg: #262626;
|
|
--color-badge-blue-fg: #D4D4D4;
|
|
--color-badge-yellow-bg: #744210;
|
|
--color-badge-yellow-fg: #FEFCBF;
|
|
--color-badge-teal-bg: #262626;
|
|
--color-badge-teal-fg: #D4D4D4;
|
|
--color-badge-cyan-bg: #262626;
|
|
--color-badge-cyan-fg: #D4D4D4;
|
|
--color-badge-pink-bg: #702459;
|
|
--color-badge-pink-fg: #FED7E2;
|
|
--color-badge-purple-alt-bg: #262626;
|
|
--color-badge-purple-alt-fg: rgba(255, 255, 255, 0.80);
|
|
--color-badge-blue-alt-bg: #262626;
|
|
--color-badge-blue-alt-fg: rgba(255, 255, 255, 0.80);
|
|
--color-badge-bright-gray-bg: #262626;
|
|
--color-badge-bright-gray-fg: #E5E5E5;
|
|
--color-badge-bright-green-bg: #22543D;
|
|
--color-badge-bright-green-fg: #9AE6B4;
|
|
--color-badge-bright-red-bg: #822727;
|
|
--color-badge-bright-red-fg: #FEB2B2;
|
|
--color-badge-bright-blue-bg: #404040;
|
|
--color-badge-bright-blue-fg: #E5E5E5;
|
|
--color-badge-bright-yellow-bg: #744210;
|
|
--color-badge-bright-yellow-fg: #FAF089;
|
|
--color-badge-bright-teal-bg: #404040;
|
|
--color-badge-bright-teal-fg: #E5E5E5;
|
|
--color-badge-bright-cyan-bg: #404040;
|
|
--color-badge-bright-cyan-fg: #E5E5E5;
|
|
--color-badge-bright-orange-bg: #C05621;
|
|
--color-badge-bright-orange-fg: #FEEBCB;
|
|
--color-badge-bright-purple-bg: #404040;
|
|
--color-badge-bright-purple-fg: #E5E5E5;
|
|
--color-badge-bright-pink-bg: #B83280;
|
|
--color-badge-bright-pink-fg: #FFF5F7;
|
|
|
|
/* --- Alerts --- */
|
|
--color-alert-fg: rgba(255, 255, 255, 0.80);
|
|
--color-alert-bg-info: rgba(255, 255, 255, 0.06);
|
|
--color-alert-bg-warning: rgba(124, 67, 16, 0.44);
|
|
--color-alert-bg-warning-table: rgba(123, 52, 30, 0.44);
|
|
--color-alert-bg-success: #1C4532;
|
|
--color-alert-bg-error: #63171B;
|
|
|
|
/* --- Dialogs / Popovers / Drawers --- */
|
|
--color-dialog-bg: #171717;
|
|
--color-dialog-fg: rgba(255, 255, 255, 0.80);
|
|
--color-popover-bg: #171717;
|
|
--color-popover-border: rgba(255, 255, 255, 0.12);
|
|
--color-popover-shadow: rgba(255, 255, 255, 0.16);
|
|
--color-drawer-bg: #171717;
|
|
|
|
/* --- Tooltip --- */
|
|
--color-tooltip-bg: #171717;
|
|
--color-tooltip-fg: #FFFFFF;
|
|
|
|
/* --- Table --- */
|
|
--color-table-header-bg: rgba(255, 255, 255, 0.08);
|
|
--color-table-header-fg: rgba(255, 255, 255, 0.64);
|
|
|
|
/* --- Tabs --- */
|
|
--color-tabs-solid-fg: rgba(255, 255, 255, 0.80);
|
|
--color-tabs-secondary-fg: rgba(255, 255, 255, 0.80);
|
|
--color-tabs-secondary-border: #525252;
|
|
|
|
/* --- Switch --- */
|
|
--color-switch-bg: rgba(255, 255, 255, 0.24);
|
|
|
|
/* --- Skeleton --- */
|
|
--color-skeleton-start: rgba(255, 255, 255, 0.04);
|
|
--color-skeleton-end: rgba(255, 255, 255, 0.06);
|
|
|
|
/* --- Progress --- */
|
|
--color-progress-track: rgba(255, 255, 255, 0.06);
|
|
|
|
/* --- Stats / Topbar --- */
|
|
--color-stats-bg: rgba(255, 255, 255, 0.04);
|
|
--color-topbar-bg: rgba(255, 255, 255, 0.04);
|
|
|
|
/* --- Graph --- */
|
|
--color-graph-line: rgba(255, 255, 255, 0.48);
|
|
--color-graph-gradient-start: rgba(255, 255, 255, 0.15);
|
|
--color-graph-gradient-stop: rgba(255, 255, 255, 0);
|
|
|
|
/* --- Scrollbar --- */
|
|
--color-scrollbar-thumb: rgba(255, 255, 255, 0.16);
|
|
|
|
/* --- Selection --- */
|
|
--color-selection-bg: #754B7D;
|
|
|
|
/* --- Shadows --- */
|
|
--shadow-action-bar: 0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%);
|
|
--shadow-popover: 0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
|
|
--shadow-drawer: 0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
|
|
}
|