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

feat(sw): add independent viewer header face tokens

Browse Source
This commit is contained in:
shkim4 committed 2026-11-10 17:51:47 +09:00
1 parent 65fa928694
commit f61d181bb1
5 files changed
+79 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/sw/src/theme/sw-viewer.css
+32 -16
View File
@@ -111,6 +111,22 @@
/* Title-bar icon buttons of viewer panels (collapse, `ghost` header actions; 2026-10-23). Popup-only: the header
status text and switch captions keep --hm-sw-viewer-muted. SWPopup's own title icons are images. */
--hm-sw-viewer-panel-icon-color: #c7bda9;
/* Viewer Header faces (2026-11-10): the file name, object and property surfaces, the trailing status / button strip and
its start piece read these copies of the SWHeader tokens. Each defaults to the SWHeader token, so the shared look
stays (a --hm-sw-header-* theme on the outermost SW scope still reaches the viewer); set --hm-sw-viewer-* there to
change the Viewer 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. Reused SWHeader parts keep reading --hm-sw-header-* in sw.css. */
--hm-sw-viewer-document-background: var(--hm-sw-header-document-background);
--hm-sw-viewer-document-border-gradient: var(--hm-sw-header-document-border-gradient);
--hm-sw-viewer-document-border-color: var(--hm-sw-header-document-border-color);
--hm-sw-viewer-object-background: var(--hm-sw-header-object-background);
--hm-sw-viewer-object-border-gradient: var(--hm-sw-header-object-border-gradient);
--hm-sw-viewer-object-radius: var(--hm-sw-header-object-radius);
--hm-sw-viewer-property-background: var(--hm-sw-header-property-background);
--hm-sw-viewer-property-border-color: var(--hm-sw-header-property-border-color);
--hm-sw-viewer-property-radius: var(--hm-sw-header-property-radius);
--hm-sw-viewer-property-shadow: var(--hm-sw-header-property-shadow);
}
.hm-sw-viewer-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@@ -179,7 +195,7 @@ button.hm-sw-viewer-header__brand { text-align: left; }
/* SWHeader file-name surface: the Figma gradient stroke through the transparent top / right / bottom 1px. */
border: 1px solid transparent;
border-left: 0;
background: var(--hm-sw-header-document-background) padding-box, var(--hm-sw-header-document-border-gradient) border-box;
background: var(--hm-sw-viewer-document-background) padding-box, var(--hm-sw-viewer-document-border-gradient) border-box;
}
.hm-sw-viewer-header__document-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@@ -339,8 +355,8 @@ button.hm-sw-viewer-header__brand { text-align: left; }
padding-inline: var(--hm-sw-viewer-gap);
/* SWHeader object surface: the Figma gradient stroke through the transparent 1px border. */
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-viewer-object-radius);
background: var(--hm-sw-viewer-object-background) padding-box, var(--hm-sw-viewer-object-border-gradient) border-box;
}
.hm-sw-viewer-header__group {
@@ -351,10 +367,10 @@ button.hm-sw-viewer-header__brand { text-align: left; }
padding-inline: var(--hm-sw-viewer-gap);
}
.hm-sw-viewer-header__group[data-surface="field"] {
border: 1px solid var(--hm-sw-header-property-border-color);
border-radius: var(--hm-sw-header-property-radius);
background: var(--hm-sw-header-property-background);
box-shadow: var(--hm-sw-header-property-shadow);
border: 1px solid var(--hm-sw-viewer-property-border-color);
border-radius: var(--hm-sw-viewer-property-radius);
background: var(--hm-sw-viewer-property-background);
box-shadow: var(--hm-sw-viewer-property-shadow);
}
.hm-sw-viewer-header__actions {
display: flex;
@@ -589,10 +605,10 @@ button.hm-sw-viewer-header__brand { text-align: left; }
align-self: stretch;
height: auto;
border-radius: 0;
background: var(--hm-sw-header-document-background);
background: var(--hm-sw-viewer-document-background);
/* Only the 1px line before a segment: top, bottom and right are the object surface border itself, so every segment
(and the license button between them) has the same top and bottom edge (2026-10-21; no doubled lines). */
box-shadow: inset 1px 0 0 var(--hm-sw-header-document-border-color);
box-shadow: inset 1px 0 0 var(--hm-sw-viewer-document-border-color);
position: relative;
}
/* Strip outline (2026-10-23): the file-name gradient stroke (--hm-sw-header-document-border-gradient) over the object
@@ -606,7 +622,7 @@ button.hm-sw-viewer-header__brand { text-align: left; }
inset: 0;
border: 0 solid transparent;
border-block-width: 1px;
border-image: var(--hm-sw-header-document-border-gradient) 1 / 1 / 1 0;
border-image: var(--hm-sw-viewer-document-border-gradient) 1 / 1 / 1 0;
pointer-events: none;
}
.hm-sw-viewer-header .hm-sw-viewer-header__actions > :is(.hm-sw-viewer-status, .hm-sw-viewer-header__button, .hm-sw-header__window-buttons):last-child::after {
@@ -632,7 +648,7 @@ button.hm-sw-viewer-header__brand { text-align: left; }
/* 2026-10-23: the first segment's left side is the strip's outer gradient line, painted inside it (a 1px layer in place
of the flat divider, so its width is unchanged). */
.hm-sw-viewer-header .hm-sw-viewer-header__actions > :is(.hm-sw-viewer-status, .hm-sw-viewer-header__button, .hm-sw-header__window-buttons):not(:is(.hm-sw-viewer-status, .hm-sw-viewer-header__button, .hm-sw-header__window-buttons) + *) {
background: var(--hm-sw-header-document-border-gradient) left top / 1px 100% no-repeat border-box, var(--hm-sw-header-document-background);
background: var(--hm-sw-viewer-document-border-gradient) left top / 1px 100% no-repeat border-box, var(--hm-sw-viewer-document-background);
box-shadow: none;
}
/* The empty strip-start mark (SWViewerHeader, right before `trailing`) carries the surface end, so the first segment
@@ -646,21 +662,21 @@ button.hm-sw-viewer-header__brand { text-align: left; }
position: absolute;
top: calc(-1 * var(--hm-sw-header-object-border-width, 1px));
bottom: calc(-1 * var(--hm-sw-header-object-border-width, 1px));
left: calc(-1 * (var(--hm-sw-header-object-radius) + 2px));
left: calc(-1 * (var(--hm-sw-viewer-object-radius) + 2px));
pointer-events: none;
}
.hm-sw-viewer-header__strip-start:has(+ :is(.hm-sw-viewer-status, .hm-sw-viewer-header__button, .hm-sw-header__window-buttons))::before {
width: calc(var(--hm-sw-header-object-radius) + 2px);
width: calc(var(--hm-sw-viewer-object-radius) + 2px);
background: var(--hm-sw-viewer-background);
}
.hm-sw-viewer-header__strip-start:has(+ :is(.hm-sw-viewer-status, .hm-sw-viewer-header__button, .hm-sw-header__window-buttons))::after {
box-sizing: border-box;
width: var(--hm-sw-header-object-radius);
width: var(--hm-sw-viewer-object-radius);
/* The object surface end: its face and gradient stroke, spanning the same 1px-outset height so both line up. */
border: 1px solid transparent;
border-left: 0;
border-radius: 0 var(--hm-sw-header-object-radius) var(--hm-sw-header-object-radius) 0;
background: var(--hm-sw-header-object-background) padding-box, var(--hm-sw-header-object-border-gradient) border-box;
border-radius: 0 var(--hm-sw-viewer-object-radius) var(--hm-sw-viewer-object-radius) 0;
background: var(--hm-sw-viewer-object-background) padding-box, var(--hm-sw-viewer-object-border-gradient) border-box;
}
/* No line around the license / info button: the window buttons right after it drop their line before it. */
.hm-sw-viewer-header .hm-sw-viewer-header__actions > .hm-sw-viewer-header__button + .hm-sw-header__window-buttons { box-shadow: none; }