shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

feat(sw): add step header process tokens and align docs

Browse Source
This commit is contained in:
shkim4 committed 2026-11-10 17:25:00 +09:00
1 parent 2690a160e9
commit 8a09386b11
8 files changed
+112 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/sw/src/theme/sw-process-header.css
+53 -29
View File
@@ -7,7 +7,7 @@
:is(.hm-sw-header, .hm-sw-theme):not(:where(.hm-sw-header, .hm-sw-theme) *) {
/* Process area base (Header.Border.ProcessBase): ProcessBase gradient, DocBorder 1px, top corners 6. */
--hm-sw-process-base-background: linear-gradient(180deg, #0c5941 0%, #19bf8d 10.1%, #109069 18.27%, #0c5941 100%);
--hm-sw-process-base-border-gradient: var(--hm-sw-header-document-border-gradient);
--hm-sw-process-base-border-gradient: var(--hm-sw-process-document-border-gradient);
/* Cover over an unlit group, its arrow side and its outer rest (ProcessDim #E6004430). */
--hm-sw-process-dim: rgba(0, 68, 48, 0.902);
@@ -93,6 +93,30 @@
--hm-sw-process-multi-tab-disabled-border: #021912;
--hm-sw-process-multi-tab-disabled-shadow: 1px 1px 1px 0 rgba(31, 148, 113, 0.7), inset 3px 2px 3px 0 rgba(9, 39, 30, 0.42), inset 3px 2px 3px 0 rgba(9, 39, 30, 0.42);
--hm-sw-process-multi-tab-disabled-text: #7d9f91;
/* Step Header's own copies of the SWHeader tokens it paints with (2026-11-10). Each defaults to the SWHeader token, so a
theme that sets --hm-sw-header-* on the outermost SW scope still reaches the Step Header; set --hm-sw-process-* there to
change the Step Header alone. Resolved on the outermost scope like every alias here: a --hm-sw-header-* value set on an
inner element no longer reaches these. The reused SW parts (home / logo, file-name button, window move) keep reading
--hm-sw-header-* in sw.css. */
--hm-sw-process-background: var(--hm-sw-header-background);
--hm-sw-process-height: var(--hm-sw-header-height);
--hm-sw-process-text-color: var(--hm-sw-header-text-color);
--hm-sw-process-selected-color: var(--hm-sw-header-selected-color);
--hm-sw-process-hover-border-gradient: var(--hm-sw-header-hover-border-gradient);
--hm-sw-process-hover-border-width: var(--hm-sw-header-hover-border-width);
--hm-sw-process-document-background: var(--hm-sw-header-document-background);
--hm-sw-process-document-border-gradient: var(--hm-sw-header-document-border-gradient);
--hm-sw-process-document-border-color: var(--hm-sw-header-document-border-color);
--hm-sw-process-object-background: var(--hm-sw-header-object-background);
--hm-sw-process-object-border-gradient: var(--hm-sw-header-object-border-gradient);
--hm-sw-process-object-radius: var(--hm-sw-header-object-radius);
--hm-sw-process-property-background: var(--hm-sw-header-property-background);
--hm-sw-process-property-radius: var(--hm-sw-header-property-radius);
--hm-sw-process-property-shadow: var(--hm-sw-header-property-shadow);
--hm-sw-process-window-icon-color: var(--hm-sw-header-window-icon-color);
--hm-sw-process-window-icon-hover-color: var(--hm-sw-header-window-icon-hover-color);
--hm-sw-process-window-button-hover-background: var(--hm-sw-header-window-button-hover-background);
}
/* ---------- Header frame ---------- */
@@ -102,8 +126,8 @@
display: block;
width: 100%;
min-width: 0;
height: var(--hm-sw-header-height);
background: var(--hm-sw-header-background);
height: var(--hm-sw-process-height);
background: var(--hm-sw-process-background);
overflow: clip;
}
.hm-sw-process-header__bar { display: flex; align-items: stretch; height: var(--hm-sw-header-bar-height); min-width: 0; }
@@ -120,7 +144,7 @@
justify-content: center;
width: max-content;
min-width: 58px;
color: var(--hm-sw-header-text-color);
color: var(--hm-sw-process-text-color);
font-size: 18px;
font-weight: 700;
line-height: var(--hm-sw-header-logo-height);
@@ -157,8 +181,8 @@
position: absolute;
inset: 0 1px;
border: 1px solid transparent;
border-radius: var(--hm-sw-header-object-radius);
background: var(--hm-sw-header-object-background) padding-box, var(--hm-sw-header-object-border-gradient) border-box;
border-radius: var(--hm-sw-process-object-radius);
background: var(--hm-sw-process-object-background) padding-box, var(--hm-sw-process-object-border-gradient) border-box;
}
/* Layer field (Header.ToggleButton.LayerField): 38px, at most 234, property surface + layer border gradient.
The bulb and the field are sibling buttons; the field button covers the whole field under the bulb. */
@@ -174,18 +198,18 @@
margin: 0 9px;
padding: 0 10px 0 12px;
border: 1px solid transparent;
border-radius: var(--hm-sw-header-property-radius);
background: var(--hm-sw-header-property-background) padding-box, var(--hm-sw-process-layer-border-gradient) border-box;
box-shadow: var(--hm-sw-header-property-shadow);
color: var(--hm-sw-header-text-color);
border-radius: var(--hm-sw-process-property-radius);
background: var(--hm-sw-process-property-background) padding-box, var(--hm-sw-process-layer-border-gradient) border-box;
box-shadow: var(--hm-sw-process-property-shadow);
color: var(--hm-sw-process-text-color);
}
.hm-sw-process-header__layer-field::after {
content: "";
position: absolute;
inset: -1px;
padding: var(--hm-sw-header-hover-border-width);
padding: var(--hm-sw-process-hover-border-width);
border-radius: inherit;
background: var(--hm-sw-header-hover-border-gradient);
background: var(--hm-sw-process-hover-border-gradient);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
@@ -195,7 +219,7 @@
.hm-sw-process-header__layer-field:not([data-disabled]):hover::after,
.hm-sw-process-header__layer-field[data-open]::after { opacity: 1; }
.hm-sw-process-header__layer-field:not([data-disabled]):hover,
.hm-sw-process-header__layer-field[data-open] { color: var(--hm-sw-header-selected-color); }
.hm-sw-process-header__layer-field[data-open] { color: var(--hm-sw-process-selected-color); }
.hm-sw-process-header__layer-field[data-disabled] { opacity: 0.4; }
.hm-sw-process-header .hm-sw-process-header__layer-field button:disabled { opacity: 1; }
.hm-sw-process-header__layer-button { position: absolute; inset: -1px; z-index: 0; border-radius: inherit; }
@@ -221,7 +245,7 @@
position: absolute;
inset: 0;
border: 1px solid transparent;
background: var(--hm-sw-header-document-background) padding-box, var(--hm-sw-header-document-border-gradient) border-box;
background: var(--hm-sw-process-document-background) padding-box, var(--hm-sw-process-document-border-gradient) border-box;
pointer-events: none;
}
.hm-sw-process-header__window > * { position: relative; }
@@ -238,11 +262,11 @@
}
.hm-sw-process-header:not([data-appearance="multi"]) .hm-sw-process-header__tools .hm-sw-tool__pill-button {
border-color: transparent;
background: var(--hm-sw-header-document-background) padding-box, var(--hm-sw-process-tool-border-gradient) border-box;
background: var(--hm-sw-process-document-background) padding-box, var(--hm-sw-process-tool-border-gradient) border-box;
}
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button { color: var(--hm-sw-process-tool-icon-color); }
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button:hover:not(:disabled),
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button[aria-pressed="true"] { color: var(--hm-sw-header-selected-color); }
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button[aria-pressed="true"] { color: var(--hm-sw-process-selected-color); }
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button[aria-pressed="true"]::after { opacity: 1; }
/* Pressed (not disabled) shows the hover picture too, like a hover that stays (SW pill hover icon = `hoverIcon`). */
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__pill-button[aria-pressed="true"]:not(:disabled) > .hm-sw-header__icon { visibility: hidden; }
@@ -251,9 +275,9 @@
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-tool__icon > :is(svg, img) { width: 24px; height: 24px; max-width: none; max-height: none; }
/* Caption buttons (Header.WindowCaption, 32 x 48): glyph #ADB0AF; hover dark + white; close hover red + white. */
.hm-sw-process-header__caption { display: block; flex: 0 0 32px; width: 32px; height: var(--hm-sw-header-bar-height); color: var(--hm-sw-header-window-icon-color); }
.hm-sw-process-header__caption { display: block; flex: 0 0 32px; width: 32px; height: var(--hm-sw-header-bar-height); color: var(--hm-sw-process-window-icon-color); }
.hm-sw-process-header__caption > svg { display: block; }
.hm-sw-process-header__caption:hover:not(:disabled) { background: var(--hm-sw-header-window-button-hover-background); color: var(--hm-sw-header-window-icon-hover-color); }
.hm-sw-process-header__caption:hover:not(:disabled) { background: var(--hm-sw-process-window-button-hover-background); color: var(--hm-sw-process-window-icon-hover-color); }
.hm-sw-process-header__caption[data-kind="close"]:hover:not(:disabled) { background: var(--hm-sw-process-close-hover-background); color: var(--hm-sw-process-close-icon-hover); }
/* ---------- Process area (SWProcessBar) ---------- */
@@ -374,8 +398,8 @@
.hm-sw-process-bar__step-box > [data-layer="inset-left"] { background: linear-gradient(90deg, var(--hm-sw-process-tab-inset) 0, transparent 6px); }
.hm-sw-process-bar__step-box > [data-layer="ring"] { border: 2px solid var(--hm-sw-process-tab-ring); }
.hm-sw-process-bar__step:hover:not(:disabled) { color: var(--hm-sw-header-selected-color); }
.hm-sw-process-bar__step[aria-checked="true"] { color: var(--hm-sw-header-selected-color); }
.hm-sw-process-bar__step:hover:not(:disabled) { color: var(--hm-sw-process-selected-color); }
.hm-sw-process-bar__step[aria-checked="true"] { color: var(--hm-sw-process-selected-color); }
.hm-sw-process-bar__step[aria-checked="true"] > .hm-sw-process-bar__step-box { opacity: 1; }
.hm-sw-process-bar__step[aria-checked="true"] [data-layer="depth"] { background: var(--hm-sw-process-tab-active-base); }
.hm-sw-process-bar__step[aria-checked="true"] [data-layer="shade"] { background: var(--hm-sw-process-tab-active-shade); }
@@ -490,11 +514,11 @@
/* File name: 189 at most (Figma 873:16254), solid #0E4C3A border. */
.hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__bar > .hm-sw-header__document { flex: 189 1 0; max-width: 189px; }
.hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__bar > .hm-sw-header__document .hm-sw-header__document-button {
background: var(--hm-sw-header-document-background) padding-box, linear-gradient(var(--hm-sw-header-document-border-color) 0 0) border-box;
background: var(--hm-sw-process-document-background) padding-box, linear-gradient(var(--hm-sw-process-document-border-color) 0 0) border-box;
}
.hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__center { flex: 1278 1 0; }
.hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__window::before {
background: var(--hm-sw-header-document-background) padding-box, linear-gradient(var(--hm-sw-header-document-border-color) 0 0) border-box;
background: var(--hm-sw-process-document-background) padding-box, linear-gradient(var(--hm-sw-process-document-border-color) 0 0) border-box;
}
/* SW pill at the Figma place: 41 high, 4 from the top, 5 from the window start, 2 before the window move. */
.hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__window .hm-sw-process-header__tools { height: 41px; margin: 4px 2px 0 5px; }
@@ -609,7 +633,7 @@
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__step:disabled { color: var(--hm-sw-process-multi-tab-disabled-text); }
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group .hm-sw-process-bar__step:disabled > .hm-sw-process-bar__step-box {
border-color: var(--hm-sw-process-multi-tab-disabled-border);
background: var(--hm-sw-header-property-background);
background: var(--hm-sw-process-property-background);
box-shadow: var(--hm-sw-process-multi-tab-disabled-shadow);
opacity: 0.5;
}
@@ -627,8 +651,8 @@
border-color: transparent;
border-bottom-width: 0;
border-radius: 2px 2px 0 0;
background: var(--hm-sw-process-tool-open-background) padding-box, var(--hm-sw-header-hover-border-gradient) border-box;
color: var(--hm-sw-header-selected-color);
background: var(--hm-sw-process-tool-open-background) padding-box, var(--hm-sw-process-hover-border-gradient) border-box;
color: var(--hm-sw-process-selected-color);
}
.hm-sw-process-header .hm-sw-process-header__tools .hm-sw-process-split[data-open] > .hm-sw-tool__pill-button::after { opacity: 0; }
@@ -644,7 +668,7 @@
height: var(--hm-sw-process-split-tail, 3px);
border: solid transparent;
border-width: 0 1px;
background: linear-gradient(var(--hm-sw-process-tool-open-edge), var(--hm-sw-process-tool-open-edge)) padding-box, var(--hm-sw-header-hover-border-gradient) border-box;
background: linear-gradient(var(--hm-sw-process-tool-open-edge), var(--hm-sw-process-tool-open-edge)) padding-box, var(--hm-sw-process-hover-border-gradient) border-box;
}
.hm-sw-process-split__panel {
position: absolute;
@@ -658,7 +682,7 @@
border: 1px solid transparent;
border-top-width: 0;
border-radius: 0 2px 2px 2px;
background: linear-gradient(var(--hm-sw-process-split-panel-background), var(--hm-sw-process-split-panel-background)) padding-box, var(--hm-sw-header-hover-border-gradient) border-box;
background: linear-gradient(var(--hm-sw-process-split-panel-background), var(--hm-sw-process-split-panel-background)) padding-box, var(--hm-sw-process-hover-border-gradient) border-box;
box-shadow: var(--hm-sw-process-split-panel-shadow);
}
/* Gold line on the panel top, from the button right edge to the panel end (Header.Border.ToolMenuStep). */
@@ -669,7 +693,7 @@
right: 0;
height: 1px;
border-top-right-radius: 2px;
background: var(--hm-sw-header-hover-border-gradient) 0 0 / 100% 36px no-repeat;
background: var(--hm-sw-process-hover-border-gradient) 0 0 / 100% 36px no-repeat;
pointer-events: none;
}
.hm-sw-process-split__cell { display: grid; place-items: center; height: 34px; }
@@ -685,4 +709,4 @@
}
.hm-sw-process-split__frame > svg { display: block; overflow: visible; }
.hm-sw-process-split__pane { fill: var(--hm-sw-process-split-cell-pane); stroke: rgba(0, 0, 0, 0.3); stroke-width: 1; }
.hm-sw-process-split__cell:is(:hover, [aria-checked="true"]) .hm-sw-process-split__pane { fill: var(--hm-sw-header-selected-color); }
.hm-sw-process-split__cell:is(:hover, [aria-checked="true"]) .hm-sw-process-split__pane { fill: var(--hm-sw-process-selected-color); }