feat(ui): sharpen dashboard console visual system
This commit is contained in:
vince
parent
739d627ae3
commit
0c75220adc
15 changed files with 417 additions and 135 deletions
|
|
@ -1,32 +1,46 @@
|
|||
:root,
|
||||
[data-ui-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--ui-color-canvas: #020302;
|
||||
--ui-color-surface: #060706;
|
||||
--ui-color-surface-raised: #0b0d0c;
|
||||
--ui-color-surface-panel: rgba(3, 4, 3, 0.86);
|
||||
--ui-color-surface-module: rgba(6, 8, 7, 0.82);
|
||||
--ui-color-surface-footer: rgba(2, 3, 2, 0.92);
|
||||
--ui-color-surface-inset: #030403;
|
||||
--ui-color-surface-icon: #050605;
|
||||
--ui-color-line: rgba(244, 244, 244, 0.16);
|
||||
--ui-color-line-strong: rgba(244, 244, 244, 0.32);
|
||||
--ui-color-grid-line: rgba(255, 255, 255, 0.035);
|
||||
--ui-color-frame-spine: rgba(255, 255, 255, 0.08);
|
||||
--ui-color-frame-wash: rgba(0, 0, 0, 0.18);
|
||||
--ui-color-card-gradient-start: rgba(13, 15, 14, 0.82);
|
||||
--ui-color-card-gradient-end: rgba(2, 3, 2, 0.92);
|
||||
--ui-color-hover: rgba(244, 244, 244, 0.035);
|
||||
--ui-color-text: #f3f4ed;
|
||||
--ui-color-muted: #8d948c;
|
||||
--ui-color-dim: #555b55;
|
||||
--ui-color-accent: #d7ff00;
|
||||
--ui-color-accent-contrast: #050605;
|
||||
--ui-color-ok: #bfff00;
|
||||
--ui-color-warning: #ffb020;
|
||||
--ui-color-danger: #ff1744;
|
||||
--ui-color-stale: #82909a;
|
||||
--ui-color-unavailable: #65707a;
|
||||
--ui-color-background: #0b0f0d;
|
||||
--ui-color-backdrop-edge: #020403;
|
||||
--ui-color-canvas: #0b0f0d;
|
||||
--ui-color-surface: #111713;
|
||||
--ui-color-surface-raised: #151d18;
|
||||
--ui-color-surface-elevated: #19231d;
|
||||
--ui-color-surface-panel: rgba(15, 21, 17, 0.94);
|
||||
--ui-color-surface-module: rgba(18, 25, 21, 0.96);
|
||||
--ui-color-surface-footer: rgba(11, 15, 13, 0.98);
|
||||
--ui-color-surface-inset: #070b09;
|
||||
--ui-color-surface-icon: #101711;
|
||||
--ui-color-border-subtle: rgba(209, 222, 198, 0.13);
|
||||
--ui-color-border: rgba(211, 225, 199, 0.2);
|
||||
--ui-color-border-strong: rgba(219, 234, 207, 0.34);
|
||||
--ui-color-line: var(--ui-color-border);
|
||||
--ui-color-line-strong: var(--ui-color-border-strong);
|
||||
--ui-color-grid-line: rgba(222, 238, 211, 0.045);
|
||||
--ui-color-backdrop-vignette: rgba(0, 0, 0, 0.24);
|
||||
--ui-color-frame-spine: rgba(198, 230, 160, 0.1);
|
||||
--ui-color-frame-wash: rgba(10, 15, 12, 0.52);
|
||||
--ui-color-card-gradient-start: rgba(24, 33, 27, 0.94);
|
||||
--ui-color-card-gradient-end: rgba(10, 15, 12, 0.98);
|
||||
--ui-color-hover: rgba(190, 225, 146, 0.075);
|
||||
--ui-color-text-primary: #edf1e6;
|
||||
--ui-color-text-secondary: #b4bda9;
|
||||
--ui-color-text-muted: #7f8a7a;
|
||||
--ui-color-text: var(--ui-color-text-primary);
|
||||
--ui-color-muted: var(--ui-color-text-muted);
|
||||
--ui-color-dim: #4e594d;
|
||||
--ui-color-accent: #c7ef5f;
|
||||
--ui-color-accent-soft: rgba(199, 239, 95, 0.12);
|
||||
--ui-color-accent-contrast: #0a100b;
|
||||
--ui-color-success: #9fd85a;
|
||||
--ui-color-ok: var(--ui-color-success);
|
||||
--ui-color-warning: #d99a3a;
|
||||
--ui-color-critical: #f04463;
|
||||
--ui-color-danger: var(--ui-color-critical);
|
||||
--ui-color-info: #86a8bd;
|
||||
--ui-color-stale: #8a9a93;
|
||||
--ui-color-unavailable: #6f7a76;
|
||||
--ui-font-mono: "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
|
||||
--ui-font-display: "Teko", "IBM Plex Mono", "Roboto Mono", monospace;
|
||||
--ui-space-1: 0.25rem;
|
||||
|
|
@ -36,9 +50,12 @@
|
|||
--ui-space-5: 1.25rem;
|
||||
--ui-space-6: 1.5rem;
|
||||
--ui-radius-none: 0;
|
||||
--ui-border: 1px solid var(--ui-color-line);
|
||||
--ui-border-strong: 1px solid var(--ui-color-line-strong);
|
||||
--ui-shadow-hard: 0 0 0 1px rgba(215, 255, 0, 0.12) inset;
|
||||
--ui-border: 1px solid var(--ui-color-border);
|
||||
--ui-border-strong: 1px solid var(--ui-color-border-strong);
|
||||
--ui-shadow-hard: 0 0 0 1px rgba(199, 239, 95, 0.1) inset;
|
||||
--ui-shadow-inset-panel:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.32);
|
||||
--ui-z-base: 0;
|
||||
--ui-z-panel: 1;
|
||||
--ui-z-overlay: 10;
|
||||
|
|
@ -48,33 +65,50 @@
|
|||
|
||||
[data-ui-theme="light"] {
|
||||
color-scheme: light;
|
||||
--ui-color-canvas: #f3f5ed;
|
||||
--ui-color-surface: #ffffff;
|
||||
--ui-color-surface-raised: #eef1e7;
|
||||
--ui-color-surface-panel: rgba(255, 255, 255, 0.9);
|
||||
--ui-color-surface-module: rgba(255, 255, 255, 0.84);
|
||||
--ui-color-surface-footer: rgba(248, 250, 241, 0.94);
|
||||
--ui-color-surface-inset: #e4e8db;
|
||||
--ui-color-surface-icon: #f8faf1;
|
||||
--ui-color-line: rgba(19, 25, 19, 0.18);
|
||||
--ui-color-line-strong: rgba(19, 25, 19, 0.34);
|
||||
--ui-color-grid-line: rgba(19, 25, 19, 0.055);
|
||||
--ui-color-frame-spine: rgba(19, 25, 19, 0.1);
|
||||
--ui-color-frame-wash: rgba(255, 255, 255, 0.48);
|
||||
--ui-color-card-gradient-start: rgba(255, 255, 255, 0.92);
|
||||
--ui-color-card-gradient-end: rgba(230, 235, 221, 0.88);
|
||||
--ui-color-hover: rgba(19, 25, 19, 0.055);
|
||||
--ui-color-text: #11170f;
|
||||
--ui-color-muted: #5d665a;
|
||||
--ui-color-dim: #7d8779;
|
||||
--ui-color-accent: #516f00;
|
||||
--ui-color-background: #eef2e7;
|
||||
--ui-color-backdrop-edge: #d7decf;
|
||||
--ui-color-canvas: #eef2e7;
|
||||
--ui-color-surface: #f9fbf3;
|
||||
--ui-color-surface-raised: #f1f5ea;
|
||||
--ui-color-surface-elevated: #ffffff;
|
||||
--ui-color-surface-panel: rgba(250, 252, 245, 0.94);
|
||||
--ui-color-surface-module: rgba(252, 254, 247, 0.96);
|
||||
--ui-color-surface-footer: rgba(239, 243, 233, 0.98);
|
||||
--ui-color-surface-inset: #e1e8d9;
|
||||
--ui-color-surface-icon: #edf3e6;
|
||||
--ui-color-border-subtle: rgba(32, 43, 29, 0.12);
|
||||
--ui-color-border: rgba(32, 43, 29, 0.22);
|
||||
--ui-color-border-strong: rgba(32, 43, 29, 0.38);
|
||||
--ui-color-line: var(--ui-color-border);
|
||||
--ui-color-line-strong: var(--ui-color-border-strong);
|
||||
--ui-color-grid-line: rgba(32, 43, 29, 0.055);
|
||||
--ui-color-backdrop-vignette: rgba(31, 44, 29, 0.08);
|
||||
--ui-color-frame-spine: rgba(32, 43, 29, 0.09);
|
||||
--ui-color-frame-wash: rgba(255, 255, 255, 0.54);
|
||||
--ui-color-card-gradient-start: rgba(255, 255, 255, 0.96);
|
||||
--ui-color-card-gradient-end: rgba(229, 235, 221, 0.92);
|
||||
--ui-color-hover: rgba(54, 81, 25, 0.065);
|
||||
--ui-color-text-primary: #11180f;
|
||||
--ui-color-text-secondary: #3f4b3b;
|
||||
--ui-color-text-muted: #667260;
|
||||
--ui-color-text: var(--ui-color-text-primary);
|
||||
--ui-color-muted: var(--ui-color-text-muted);
|
||||
--ui-color-dim: #7e8878;
|
||||
--ui-color-accent: #4f7200;
|
||||
--ui-color-accent-soft: rgba(79, 114, 0, 0.11);
|
||||
--ui-color-accent-contrast: #ffffff;
|
||||
--ui-color-ok: #4c7400;
|
||||
--ui-color-warning: #a45b00;
|
||||
--ui-color-danger: #bd173f;
|
||||
--ui-color-stale: #596975;
|
||||
--ui-color-unavailable: #6c7479;
|
||||
--ui-shadow-hard: 0 0 0 1px rgba(81, 111, 0, 0.18) inset;
|
||||
--ui-color-success: #436f00;
|
||||
--ui-color-ok: var(--ui-color-success);
|
||||
--ui-color-warning: #915c00;
|
||||
--ui-color-critical: #b7173c;
|
||||
--ui-color-danger: var(--ui-color-critical);
|
||||
--ui-color-info: #476a7c;
|
||||
--ui-color-stale: #596b64;
|
||||
--ui-color-unavailable: #68726c;
|
||||
--ui-shadow-hard: 0 0 0 1px rgba(79, 114, 0, 0.14) inset;
|
||||
--ui-shadow-inset-panel:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.72),
|
||||
inset 0 -1px 0 rgba(31, 44, 29, 0.08);
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -86,10 +120,11 @@ body {
|
|||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background:
|
||||
radial-gradient(circle at 50% 12%, transparent 0 42%, var(--ui-color-backdrop-vignette) 100%),
|
||||
linear-gradient(var(--ui-color-grid-line) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--ui-color-grid-line) 1px, transparent 1px),
|
||||
var(--ui-color-canvas);
|
||||
background-size: 48px 48px, 48px 48px, auto;
|
||||
background-size: auto, 40px 40px, 40px 40px, auto;
|
||||
color: var(--ui-color-text);
|
||||
font-family: var(--ui-font-mono);
|
||||
text-rendering: geometricPrecision;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue