lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: declare CSS side-effect imports for TypeScript 7 (TS2882)

Browse Source 
TypeScript 7 reports TS2882 for a stylesheet side-effect import with no type
declaration; TS 5.x accepted them silently. Bundlers resolve stylesheets through
their own loaders, so the import never reaches the TypeScript module resolver —
this declares them legitimate rather than giving them a shape.

MEASURED, not assumed: this repo reports TS2882 under tsc 7 without the file and
zero with it. Repos where a framework already ships ambient CSS declarations
(Next's next-env.d.ts) were left alone — the declaration is inert there and was
not added.

Co-Authored-By: Hanzo Dev <[email protected]>
This commit is contained in:
zeekay
2026-07-27 18:24:48 -07:00
co-authored by Hanzo Dev
parent 345efd519e
commit 86cfb45d2c
10 changed files with 66 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css-modules.d.ts
Vendored
+8
View File
@@ -0,0 +1,8 @@
// TypeScript 7 reports TS2882 for a side-effect import with no type
// declaration ("Cannot find module or type declarations for side-effect import
// of './globals.css'"). TS 5.x accepted these silently.
//
// Stylesheets are resolved by the bundler (Next/Vite/webpack), never by the
// TypeScript module resolver, so this declares them legitimate rather than
// giving them a shape.
declare module '*.css';
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@luxfi/explore",
"version": "1.1.14",
"version": "1.1.15",
"private": false,
"homepage": "https://github.com/luxfi/explore#readme",
"engines": {
@@ -53,7 +53,7 @@
"@luxfi/points-types": "1.4.2",
"@luxfi/stats-types": "2.11.1",
"@luxfi/tac-operation-lifecycle-types": "1.1.0",
"@luxfi/ui": "7.3.2",
"@luxfi/ui": "7.4.6",
"@luxfi/visualizer-types": "0.2.0",
"@luxfi/zetachain-cctx-types": "1.0.1",
"@metamask/post-message-stream": "^7.0.0",
styles/tokens.css
+9 -490
View File
@@ -1,494 +1,13 @@
/*
* Design tokens — CSS custom properties
* Explore rides the canonical Lux token set.
*
* These mirror the Chakra semantic tokens defined in
* toolkit/theme/foundations/semanticTokens.ts and
* toolkit/theme/foundations/colors.ts (DEFAULT_THEME_COLORS).
* Every colour the explorer paints resolves through @luxfi/ui/tokens.css — one
* achromatic ladder, two state hues, and the --lux-accent hook the Host header
* retints. This file used to be a 500-line fork of that sheet, which is how it
* drifted its own browns: --color-status-warn #B45309 / #FBBF7A, and the whole
* Chakra orange + yellow badge ramp (#FEEBCB #FFFAF0 #DD6B20 #FFFFF0 #D69E2E
* #FEFCBF #B7791F #C05621 #7B341E #744210 #FAF089).
*
* 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)
* Add a token to the design system, never here.
*/
/* ================================================================
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);
}
@import '@luxfi/ui/tokens.css';
toolkit/hooks/useToken.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ const COLOR_MAP: Record<string, string> = {
'white': '#ffffff',
'gray.400': 'var(--color-gray-400, #a0aec0)',
'gray.600': 'var(--color-gray-600, #4a5568)',
'yellow.300': 'var(--color-yellow-300, #f6e05e)',
'yellow.300': 'var(--color-status-warn, #737373)',
'red.500': 'var(--color-red-500, #e53e3e)',
'green.500': 'var(--color-green-500, #38a169)',
'blackAlpha.300': 'rgba(0, 0, 0, 0.16)',
toolkit/theme/foundations/colors.ts
+26 -20
View File
@@ -159,29 +159,35 @@ const colors = {
'800': { value: '#822727' },
'900': { value: '#63171B' },
},
// The warm ramps are kept as KEYS so a NEXT_PUBLIC_COLOR_THEME_OVERRIDES that
// still spells `{colors.orange.500}` resolves instead of crashing — but every
// rung is the neutral ladder now. Lux is monochrome; there is no orange.
// What these held: orange 50..900 #FFFAF0 #FEEBCB #FBD38D #F6AD55 #ED8936
// #DD6B20 #C05621 #9C4221 #7B341E #652B19; yellow 50..900 #FFFFF0 #FEFCBF
// #FAF089 #F6E05E #ECC94B #D69E2E #B7791F #975A16 #744210 #5F370E.
orange: {
'50': { value: '#FFFAF0' },
'100': { value: '#FEEBCB' },
'200': { value: '#FBD38D' },
'300': { value: '#F6AD55' },
'400': { value: '#ED8936' },
'500': { value: '#DD6B20' },
'600': { value: '#C05621' },
'700': { value: '#9C4221' },
'800': { value: '#7B341E' },
'900': { value: '#652B19' },
'50': { value: '#FAFAFA' },
'100': { value: '#F5F5F5' },
'200': { value: '#E5E5E5' },
'300': { value: '#D4D4D4' },
'400': { value: '#A3A3A3' },
'500': { value: '#737373' },
'600': { value: '#525252' },
'700': { value: '#404040' },
'800': { value: '#262626' },
'900': { value: '#171717' },
},
yellow: {
'50': { value: '#FFFFF0' },
'100': { value: '#FEFCBF' },
'200': { value: '#FAF089' },
'300': { value: '#F6E05E' },
'400': { value: '#ECC94B' },
'500': { value: '#D69E2E' },
'600': { value: '#B7791F' },
'700': { value: '#975A16' },
'800': { value: '#744210' },
'900': { value: '#5F370E' },
'50': { value: '#FAFAFA' },
'100': { value: '#F5F5F5' },
'200': { value: '#E5E5E5' },
'300': { value: '#D4D4D4' },
'400': { value: '#A3A3A3' },
'500': { value: '#737373' },
'600': { value: '#525252' },
'700': { value: '#404040' },
'800': { value: '#262626' },
'900': { value: '#171717' },
},
// True neutral grays (no blue tint)
gray: {
ui/rewards/dashboard/RewardsActivityPassCard.tsx
+6 -3
View File
@@ -33,7 +33,10 @@ export default function RewardsActivityPassCard() {
</div>
<div
className="flex flex-col md:flex-row justify-between items-center h-[160px] md:h-[120px] pr-0 md:pr-8 pl-0 md:pl-[86px] pt-4 md:pt-0 pb-3 md:pb-0 rounded-base overflow-hidden relative"
style={{ flex: 'none', backgroundColor: 'var(--color-light, #FFEFCE)' }}
// `--color-light` is defined nowhere in this repo, so the fallback was
// unconditional: the Merits card painted a literal tan #FFEFCE panel with
// an amber #FFD57C button and #2B1A3F ink. Named tokens now, no fallback.
style={{ flex: 'none', backgroundColor: 'var(--color-bg-info)' }}
>
<Image
src={ backgroundImage }
@@ -55,9 +58,9 @@ export default function RewardsActivityPassCard() {
external
href={ activityPassUrl }
variant="underlaid"
iconColor="rgba(43, 26, 63, 0.3)"
iconColor="var(--color-button-solid-text)"
className="font-medium shrink-0 z-[1]"
style={{ backgroundColor: 'var(--color-bg-light, #FFD57C)', color: '#2B1A3F' }}
style={{ backgroundColor: 'var(--color-button-solid-bg)', color: 'var(--color-button-solid-text)' }}
>
Grab Activity pass
</Link>
ui/shared/entities/token/TokenEntity.tsx
+1 -1
View File
@@ -163,7 +163,7 @@ const TestTokenBadge = ({ addressHash, className }: TestTokenBadgeProps) => {
return (
<Tooltip content="This is a known test/fake token. It has no real value — do not trade or transfer real assets for it.">
<IconSvg name="status/warning" className={ cn('w-5 h-5 ml-2 text-[var(--color-orange-400)]', className) }/>
<IconSvg name="status/warning" className={ cn('w-5 h-5 ml-2 text-[var(--color-status-warn)]', className) }/>
</Tooltip>
);
};
ui/shared/fallbacks/FallbackRpcIcon.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ interface Props extends Omit<IconSvgProps, 'name'> {
const FallbackRpcIcon = (props: Props) => {
return (
<Tooltip content="Our indexer is experiencing problems, you see the data directly from RPC">
<IconSvg name="RPC" className="size-5 text-[var(--color-orange-400)]" { ...props }/>
<IconSvg name="RPC" className="size-5 text-[var(--color-status-warn)]" { ...props }/>
</Tooltip>
);
};
ui/shared/solidityscanReport/SolidityscanReportDetails.tsx
+11 -6
View File
@@ -8,13 +8,18 @@ type DistributionItem = {
color: string;
};
// Severity is ORDERED data, so it reads as one sequential ramp: darkest is
// worst. Only `critical` keeps a hue, because red is the one state colour Lux
// spends on danger. The warm middle of this scale is gone — it used to be
// high #EC672C, medium #FBE74D, low #68C88E, informational #A3AEBE, gas
// #A47585, six unrelated hues pretending to be a scale.
const DISTRIBUTION_ITEMS: Array<DistributionItem> = [
{ id: 'critical', name: 'Critical', color: '#891F11' },
{ id: 'high', name: 'High', color: '#EC672C' },
{ id: 'medium', name: 'Medium', color: '#FBE74D' },
{ id: 'low', name: 'Low', color: '#68C88E' },
{ id: 'informational', name: 'Informational', color: '#A3AEBE' },
{ id: 'gas', name: 'Gas', color: '#A47585' },
{ id: 'critical', name: 'Critical', color: 'var(--color-status-bad)' },
{ id: 'high', name: 'High', color: 'var(--color-gray-800)' },
{ id: 'medium', name: 'Medium', color: 'var(--color-gray-600)' },
{ id: 'low', name: 'Low', color: 'var(--color-gray-500)' },
{ id: 'informational', name: 'Informational', color: 'var(--color-gray-400)' },
{ id: 'gas', name: 'Gas', color: 'var(--color-gray-300)' },
];
interface Props {
ui/stats/lux/FeeSplitPanel.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ const STATUS_LABEL: Record<FeeSplitStatus, string> = {
const STATUS_DOT: Record<FeeSplitStatus, string> = {
active: 'bg-[var(--color-green-500)]',
scheduled: 'bg-[var(--color-orange-500)]',
scheduled: 'bg-[var(--color-status-warn)]',
inactive: 'bg-[var(--color-gray-400)]',
unknown: 'bg-[var(--color-gray-400)]',
};