fix: align compact dashboard gradient and public CSS imports

This commit is contained in:
shkim4 committed 2026-10-08 21:38:08 +09:00
1 parent 4daca6d357
commit 99faec189e
3 files changed
+16 -4

No files matched your search

@@ -8,6 +8,10 @@
--hm-dashboard-sidebar-width: 272px;
--hm-dashboard-min-width: 960px;
--hm-dashboard-header-background: linear-gradient(180deg, var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%, var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%);
/* Compact 48px source surface; independent of shared action/GNB/LNB gradients. */
--hm-dashboard-compact-background:
linear-gradient(270deg, rgba(18, 66, 51, 0.4) 0%, rgba(20, 112, 95, 0.4) 100%),
linear-gradient(178deg, #103D2E 1.07%, #2A6652 11.07%, #12352A 87.72%);
--hm-dashboard-nav-text: var(--hm-sem-on-action-primary);
--hm-dashboard-nav-text-secondary: var(--hm-sem-palette-green-tint);
--hm-dashboard-nav-text-stroke-width: 1px;
+6 -2
View File
@@ -1,4 +1,4 @@
@import "./dashboard-status-contract.css";
@import "@hm-design/ui/dashboard-status.css";
/* Runtime-neutral status contract → Story mapping. HM has no exact public status semantics for these three inks. */
.dashboard-production {
@@ -31,6 +31,10 @@
/* Story-only Variant C Compact Header (ui_viz patterns-variant-c--all). Geometry follows the reference: header 48 / padding-x 20,
title + 18 after it, status bar 40 high floating from the header top and centred at 50% + 18px, padding-x 36, gap 8, 28px controls,
1x16 dividers, bottom radius 16 with concave wings. Colours and type are HM tokens. Content join / padding stay Dashboard Layout's. */
.dashboard-story-compact [data-slot="dashboard-layout"] {
background: var(--hm-dashboard-compact-background);
}
.dashboard-story-compact [data-story-slot="compact-header"] {
position: relative;
z-index: 1;
@@ -39,7 +43,7 @@
align-items: center;
height: 48px;
padding: 0 20px;
background: var(--hm-dashboard-header-background);
background: var(--hm-dashboard-compact-background);
color: var(--hm-dashboard-nav-text);
}
+6 -2
View File
@@ -1,4 +1,4 @@
@import "./dashboard-status-contract.css";
@import "@hm-design/ui/dashboard-status.css";
/* Runtime-neutral status contract → Story mapping. HM has no exact public status semantics for these three inks. */
.dashboard-story {
@@ -31,6 +31,10 @@
/* Story-only Variant C Compact Header (ui_viz patterns-variant-c--all). Geometry follows the reference: header 48 / padding-x 20,
title + 18 after it, status bar 40 high floating from the header top and centred at 50% + 18px, padding-x 36, gap 8, 28px controls,
1x16 dividers, bottom radius 16 with concave wings. Colours and type are HM tokens. Content join / padding stay Dashboard Layout's. */
.dashboard-story-compact [data-slot="dashboard-layout"] {
background: var(--hm-dashboard-compact-background);
}
.dashboard-story-compact [data-story-slot="compact-header"] {
position: relative;
z-index: 1;
@@ -39,7 +43,7 @@
align-items: center;
height: 48px;
padding: 0 20px;
background: var(--hm-dashboard-header-background);
background: var(--hm-dashboard-compact-background);
color: var(--hm-dashboard-nav-text);
}