fix: align compact dashboard gradient and public CSS imports
This commit is contained in:
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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user