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-sidebar-width: 272px;
|
||||||
--hm-dashboard-min-width: 960px;
|
--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%);
|
--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: var(--hm-sem-on-action-primary);
|
||||||
--hm-dashboard-nav-text-secondary: var(--hm-sem-palette-green-tint);
|
--hm-dashboard-nav-text-secondary: var(--hm-sem-palette-green-tint);
|
||||||
--hm-dashboard-nav-text-stroke-width: 1px;
|
--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. */
|
/* Runtime-neutral status contract → Story mapping. HM has no exact public status semantics for these three inks. */
|
||||||
.dashboard-production {
|
.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,
|
/* 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,
|
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. */
|
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"] {
|
.dashboard-story-compact [data-story-slot="compact-header"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
@@ -39,7 +43,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
background: var(--hm-dashboard-header-background);
|
background: var(--hm-dashboard-compact-background);
|
||||||
color: var(--hm-dashboard-nav-text);
|
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. */
|
/* Runtime-neutral status contract → Story mapping. HM has no exact public status semantics for these three inks. */
|
||||||
.dashboard-story {
|
.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,
|
/* 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,
|
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. */
|
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"] {
|
.dashboard-story-compact [data-story-slot="compact-header"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
@@ -39,7 +43,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
background: var(--hm-dashboard-header-background);
|
background: var(--hm-dashboard-compact-background);
|
||||||
color: var(--hm-dashboard-nav-text);
|
color: var(--hm-dashboard-nav-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user