feat(hololake): implement GHS-014 stage-one home
This commit is contained in:
parent
f4c896d15c
commit
4d2415a35b
15 changed files with 891 additions and 49 deletions
167
product-source/hololake-native-desktop/src/design-tokens.css
Normal file
167
product-source/hololake-native-desktop/src/design-tokens.css
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
:root,
|
||||
[data-theme='night'] {
|
||||
/* Primitive tokens — GHS-014 five-lakes v1.3, night lake. */
|
||||
--primitive-bg-a: #0a1020;
|
||||
--primitive-bg-b: #0b1220;
|
||||
--primitive-bg-c: #070c16;
|
||||
--primitive-bg-d: #04070d;
|
||||
--primitive-star-core: #f7ebc8;
|
||||
--primitive-star-bright: #ffefc2;
|
||||
--primitive-text-primary: rgba(234, 238, 248, 0.96);
|
||||
--primitive-text-body: rgba(222, 228, 242, 0.88);
|
||||
--primitive-text-aux: rgba(196, 206, 228, 0.62);
|
||||
--primitive-text-faint: rgba(180, 192, 220, 0.4);
|
||||
--primitive-nebula-a: rgba(91, 111, 196, 0.13);
|
||||
--primitive-nebula-b: rgba(138, 111, 201, 0.05);
|
||||
--primitive-glass: rgba(178, 198, 255, 0.045);
|
||||
--primitive-glass-hover: rgba(178, 198, 255, 0.075);
|
||||
--primitive-glass-edge: rgba(202, 216, 255, 0.13);
|
||||
--primitive-glass-top: rgba(255, 255, 255, 0.06);
|
||||
--primitive-mist-a: rgba(157, 180, 255, 0.1);
|
||||
--primitive-mist-b: rgba(247, 235, 200, 0.04);
|
||||
--primitive-cool-glow: rgba(157, 180, 255, 0.42);
|
||||
--primitive-warm-glow: rgba(247, 235, 200, 0.5);
|
||||
--primitive-shadow: rgba(0, 0, 0, 0.34);
|
||||
--primitive-scene-opacity: 0.76;
|
||||
|
||||
/* Semantic tokens. */
|
||||
--surface-sky: var(--primitive-bg-a);
|
||||
--surface-horizon: var(--primitive-bg-b);
|
||||
--surface-lake: var(--primitive-bg-c);
|
||||
--surface-depth: var(--primitive-bg-d);
|
||||
--content-primary: var(--primitive-text-primary);
|
||||
--content-secondary: var(--primitive-text-body);
|
||||
--content-muted: var(--primitive-text-aux);
|
||||
--content-faint: var(--primitive-text-faint);
|
||||
--accent-light: var(--primitive-star-core);
|
||||
--accent-light-strong: var(--primitive-star-bright);
|
||||
--state-ready: #b8d7c4;
|
||||
--state-waiting: #cfbddf;
|
||||
--state-quiet: var(--primitive-text-aux);
|
||||
--focus-ring: rgba(247, 235, 200, 0.7);
|
||||
|
||||
/* Component tokens. */
|
||||
--button-primary-bg: rgba(247, 235, 200, 0.92);
|
||||
--button-primary-text: #15181f;
|
||||
--button-primary-shadow: 0 12px 42px rgba(247, 235, 200, 0.14);
|
||||
--button-secondary-bg: var(--primitive-glass);
|
||||
--button-secondary-text: var(--content-secondary);
|
||||
--button-secondary-edge: var(--primitive-glass-edge);
|
||||
--panel-bg: rgba(8, 13, 25, 0.72);
|
||||
--panel-edge: var(--primitive-glass-edge);
|
||||
--status-dot: var(--accent-light);
|
||||
}
|
||||
|
||||
[data-theme='dawn'] {
|
||||
--primitive-bg-a: #f5f7fc;
|
||||
--primitive-bg-b: #eaeff8;
|
||||
--primitive-bg-c: #dfe8f4;
|
||||
--primitive-bg-d: #d3e0ef;
|
||||
--primitive-star-core: #c9a24b;
|
||||
--primitive-star-bright: #a96f2c;
|
||||
--primitive-text-primary: rgba(22, 33, 58, 0.94);
|
||||
--primitive-text-body: rgba(36, 49, 76, 0.86);
|
||||
--primitive-text-aux: rgba(72, 88, 120, 0.62);
|
||||
--primitive-text-faint: rgba(98, 112, 142, 0.48);
|
||||
--primitive-nebula-a: rgba(122, 144, 220, 0.12);
|
||||
--primitive-nebula-b: rgba(240, 196, 150, 0.12);
|
||||
--primitive-glass: rgba(255, 255, 255, 0.34);
|
||||
--primitive-glass-hover: rgba(255, 255, 255, 0.52);
|
||||
--primitive-glass-edge: rgba(30, 50, 90, 0.12);
|
||||
--primitive-glass-top: rgba(255, 255, 255, 0.65);
|
||||
--primitive-mist-a: rgba(255, 255, 255, 0.55);
|
||||
--primitive-mist-b: rgba(250, 214, 150, 0.3);
|
||||
--primitive-cool-glow: rgba(96, 124, 205, 0.35);
|
||||
--primitive-warm-glow: rgba(201, 162, 75, 0.5);
|
||||
--primitive-shadow: rgba(42, 66, 105, 0.16);
|
||||
--primitive-scene-opacity: 0.11;
|
||||
--state-ready: #3f7058;
|
||||
--state-waiting: #725b82;
|
||||
--panel-bg: rgba(247, 250, 255, 0.76);
|
||||
--button-primary-bg: rgba(45, 59, 84, 0.92);
|
||||
--button-primary-text: #f8f4e9;
|
||||
--button-primary-shadow: 0 12px 36px rgba(45, 59, 84, 0.16);
|
||||
}
|
||||
|
||||
[data-theme='nebula'] {
|
||||
--primitive-bg-a: #150e26;
|
||||
--primitive-bg-b: #160f28;
|
||||
--primitive-bg-c: #0e0919;
|
||||
--primitive-bg-d: #080510;
|
||||
--primitive-star-core: #ede4f6;
|
||||
--primitive-star-bright: #f8f1ff;
|
||||
--primitive-text-primary: rgba(238, 234, 248, 0.96);
|
||||
--primitive-text-body: rgba(226, 220, 240, 0.88);
|
||||
--primitive-text-aux: rgba(202, 194, 226, 0.62);
|
||||
--primitive-text-faint: rgba(186, 178, 214, 0.42);
|
||||
--primitive-nebula-a: rgba(138, 111, 201, 0.24);
|
||||
--primitive-nebula-b: rgba(91, 111, 196, 0.11);
|
||||
--primitive-glass: rgba(196, 178, 255, 0.05);
|
||||
--primitive-glass-hover: rgba(196, 178, 255, 0.09);
|
||||
--primitive-glass-edge: rgba(210, 198, 255, 0.14);
|
||||
--primitive-glass-top: rgba(255, 255, 255, 0.07);
|
||||
--primitive-mist-a: rgba(170, 150, 255, 0.12);
|
||||
--primitive-mist-b: rgba(239, 217, 168, 0.05);
|
||||
--primitive-cool-glow: rgba(170, 150, 255, 0.45);
|
||||
--primitive-warm-glow: rgba(239, 217, 168, 0.5);
|
||||
--primitive-shadow: rgba(0, 0, 0, 0.38);
|
||||
--primitive-scene-opacity: 0.44;
|
||||
--panel-bg: rgba(18, 12, 34, 0.76);
|
||||
}
|
||||
|
||||
[data-theme='candle'] {
|
||||
--primitive-bg-a: #1b130b;
|
||||
--primitive-bg-b: #181108;
|
||||
--primitive-bg-c: #100b05;
|
||||
--primitive-bg-d: #0a0703;
|
||||
--primitive-star-core: #ffd9a0;
|
||||
--primitive-star-bright: #ffe7be;
|
||||
--primitive-text-primary: rgba(246, 238, 226, 0.96);
|
||||
--primitive-text-body: rgba(236, 226, 210, 0.88);
|
||||
--primitive-text-aux: rgba(214, 198, 176, 0.62);
|
||||
--primitive-text-faint: rgba(196, 180, 158, 0.42);
|
||||
--primitive-nebula-a: rgba(214, 150, 80, 0.13);
|
||||
--primitive-nebula-b: rgba(160, 110, 70, 0.07);
|
||||
--primitive-glass: rgba(255, 214, 160, 0.045);
|
||||
--primitive-glass-hover: rgba(255, 214, 160, 0.08);
|
||||
--primitive-glass-edge: rgba(255, 220, 170, 0.13);
|
||||
--primitive-glass-top: rgba(255, 255, 255, 0.06);
|
||||
--primitive-mist-a: rgba(255, 196, 110, 0.09);
|
||||
--primitive-mist-b: rgba(255, 214, 140, 0.04);
|
||||
--primitive-cool-glow: rgba(214, 178, 140, 0.4);
|
||||
--primitive-warm-glow: rgba(255, 196, 110, 0.55);
|
||||
--primitive-shadow: rgba(0, 0, 0, 0.38);
|
||||
--primitive-scene-opacity: 0.4;
|
||||
--panel-bg: rgba(24, 17, 9, 0.78);
|
||||
}
|
||||
|
||||
[data-theme='clear'] {
|
||||
--primitive-bg-a: #f1f5f8;
|
||||
--primitive-bg-b: #e8eef3;
|
||||
--primitive-bg-c: #dee7ed;
|
||||
--primitive-bg-d: #d2dee7;
|
||||
--primitive-star-core: #5f7e9f;
|
||||
--primitive-star-bright: #41628a;
|
||||
--primitive-text-primary: rgba(20, 36, 52, 0.94);
|
||||
--primitive-text-body: rgba(34, 50, 68, 0.86);
|
||||
--primitive-text-aux: rgba(66, 86, 106, 0.62);
|
||||
--primitive-text-faint: rgba(92, 110, 128, 0.48);
|
||||
--primitive-nebula-a: rgba(100, 140, 180, 0.1);
|
||||
--primitive-nebula-b: rgba(140, 170, 200, 0.08);
|
||||
--primitive-glass: rgba(255, 255, 255, 0.32);
|
||||
--primitive-glass-hover: rgba(255, 255, 255, 0.5);
|
||||
--primitive-glass-edge: rgba(20, 50, 80, 0.12);
|
||||
--primitive-glass-top: rgba(255, 255, 255, 0.65);
|
||||
--primitive-mist-a: rgba(255, 255, 255, 0.55);
|
||||
--primitive-mist-b: rgba(190, 214, 234, 0.35);
|
||||
--primitive-cool-glow: rgba(78, 112, 150, 0.35);
|
||||
--primitive-warm-glow: rgba(170, 138, 70, 0.5);
|
||||
--primitive-shadow: rgba(37, 66, 90, 0.14);
|
||||
--primitive-scene-opacity: 0.08;
|
||||
--state-ready: #3f7058;
|
||||
--state-waiting: #6a5b7a;
|
||||
--panel-bg: rgba(246, 250, 253, 0.76);
|
||||
--button-primary-bg: rgba(45, 66, 85, 0.92);
|
||||
--button-primary-text: #f6f2e9;
|
||||
--button-primary-shadow: 0 12px 36px rgba(45, 66, 85, 0.15);
|
||||
}
|
||||
Loading…
Reference in a new issue