183 lines
7.4 KiB
CSS
183 lines
7.4 KiB
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 {
|
|
--dashboard-work-progress: var(--hm-dashboard-status-active);
|
|
--dashboard-work-hold: var(--hm-dashboard-status-hold);
|
|
--dashboard-work-issue: var(--hm-dashboard-status-issue);
|
|
--dashboard-work-badge-background: color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 90%, transparent);
|
|
}
|
|
|
|
/* Existing Badge outline variant, overridden through its component mappings only within Dashboard.
|
|
Variant C has plain table text, so use its dark selected surface to keep the white done ink legible on HM's light table. */
|
|
.dashboard-story [data-slot="badge"][data-status] {
|
|
--hm-badge-outline-text: var(--dashboard-status-color);
|
|
--hm-badge-outline-background: var(--dashboard-work-badge-background);
|
|
--hm-badge-outline-border-color: color-mix(in srgb, var(--hm-sem-palette-black) 50%, transparent);
|
|
}
|
|
|
|
.dashboard-story [data-status="active"] { --dashboard-status-color: var(--dashboard-work-progress); }
|
|
.dashboard-story [data-status="hold"] { --dashboard-status-color: var(--dashboard-work-hold); }
|
|
.dashboard-story [data-status="done"] { --dashboard-status-color: var(--hm-dashboard-status-done); }
|
|
.dashboard-story [data-status="issue"][data-issue="true"] { --dashboard-status-color: var(--dashboard-work-issue); }
|
|
|
|
.dashboard-story [data-story-slot="work-badges"] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 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;
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
height: 48px;
|
|
padding: 0 20px;
|
|
background: var(--hm-dashboard-compact-background);
|
|
color: var(--hm-dashboard-nav-text);
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-brand"] {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
height: 48px;
|
|
padding-right: 18px;
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-brand"] strong,
|
|
.dashboard-story-compact [data-story-slot="compact-context"] {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
-webkit-text-stroke: var(--hm-dashboard-nav-text-stroke-width) var(--hm-dashboard-nav-text-stroke-color);
|
|
paint-order: stroke fill;
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-context"] {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-status"] {
|
|
--compact-wing: var(--hm-sem-palette-green-default);
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(50% + 18px);
|
|
transform: translateX(-50%);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
height: 40px;
|
|
padding: 0 36px;
|
|
border-radius: 0 0 16px 16px;
|
|
background: linear-gradient(90deg, var(--hm-sem-palette-green-default) 20%, var(--hm-sem-palette-green-light-1) 50%, var(--hm-sem-palette-green-default) 80%);
|
|
filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--hm-sem-palette-black) 25%, transparent));
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-status"]::before,
|
|
.dashboard-story-compact [data-story-slot="compact-status"]::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
width: 36px;
|
|
height: 30px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-status"]::before {
|
|
left: -35px;
|
|
border-radius: 0 20px 0 0;
|
|
box-shadow: 18px 0 0 var(--compact-wing);
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-status"]::after {
|
|
right: -35px;
|
|
border-radius: 20px 0 0 0;
|
|
box-shadow: -18px 0 0 var(--compact-wing);
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-divider"] {
|
|
flex: none;
|
|
width: 1px;
|
|
height: 16px;
|
|
margin: 0 4px;
|
|
background: color-mix(in srgb, var(--hm-dashboard-nav-text-secondary) 30%, transparent);
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-status-group"] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Filter states follow the reference values (black 35/55%, selected Green Dark 2 90% with a Green Light 4 ring). No HM Semantic matches
|
|
them (state.active / accent differ), so the exact HM palette primitives are used. Selected wins over hover, as in the reference. */
|
|
.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"] {
|
|
gap: 6px;
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-color: color-mix(in srgb, var(--hm-sem-palette-black) 50%, transparent);
|
|
background: color-mix(in srgb, var(--hm-sem-palette-black) 35%, transparent);
|
|
color: color-mix(in srgb, var(--hm-sem-palette-white) 95%, transparent);
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"]:hover {
|
|
border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 40%, transparent);
|
|
background: color-mix(in srgb, var(--hm-sem-palette-black) 55%, transparent);
|
|
color: var(--hm-sem-palette-white);
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"][aria-pressed="true"] {
|
|
border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 65%, transparent);
|
|
background: color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 90%, transparent);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--hm-sem-palette-green-light-4) 35%, transparent);
|
|
color: var(--hm-sem-palette-white);
|
|
}
|
|
|
|
/* Count ink shares dashboardWorkStatus with the table Badge; labels retain Reference white ink. */
|
|
.dashboard-story-compact [data-story-slot="compact-status"] [data-status] strong {
|
|
color: var(--dashboard-status-color);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
-webkit-text-stroke: 1px color-mix(in srgb, var(--hm-sem-palette-black) 22%, transparent);
|
|
paint-order: stroke fill;
|
|
}
|
|
|
|
/* Issue is separately divided and has its own Default/Hover/Selected surface in Variant C. */
|
|
.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"] {
|
|
background: color-mix(in srgb, var(--hm-sem-palette-green-light-3) 28%, transparent);
|
|
border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 45%, transparent);
|
|
color: var(--hm-sem-palette-white);
|
|
}
|
|
.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"]:hover {
|
|
background: color-mix(in srgb, var(--hm-sem-palette-green-light-3) 45%, transparent);
|
|
border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 65%, transparent);
|
|
}
|
|
.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"][aria-pressed="true"] {
|
|
background: color-mix(in srgb, var(--hm-sem-action-destructive) 25%, transparent);
|
|
border-color: color-mix(in srgb, var(--hm-sem-action-destructive) 70%, transparent);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--hm-sem-action-destructive) 40%, transparent);
|
|
}
|
|
|
|
.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"]:focus-visible {
|
|
outline: var(--hm-dashboard-nav-focus-outline);
|
|
}
|
|
|
|
/* Compact geometry is shared by all viewports. Dashboard's native scroll frame preserves its minimum width. */
|