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

fix(sw): align header gradient borders with Figma
Deploy Storybook / deploy (push) Successful in 1m14s

Browse Source 
The file-name and object-editing surfaces of SWHeader and SWViewerHeader
now draw the Figma gradient strokes (26:10374, 26:10375, read with the
Plugin API) through a transparent 1px border, so size, radius and text
position are unchanged. New tokens --hm-sw-header-document-border-gradient
and --hm-sw-header-object-border-gradient; the solid border colors stay
for compatibility and for the home, window area, print button and menus.

Update the SW Header design spec, the SW AI design rules and the example
layout CSS to the gradient borders.
This commit is contained in:
shkim4 committed 2026-10-23 00:28:12 +09:00
1 parent 4c29894e56
commit 1d206c86cf
5 files changed
+53 -31
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/sw/src/theme/sw-viewer.css
+9 -6
View File
@@ -115,9 +115,10 @@ button.hm-sw-viewer-header__brand { text-align: left; }
min-width: 56px;
height: calc(var(--hm-sw-viewer-height) - 2px);
padding: 0 16px 0 24px;
border: 1px solid var(--hm-sw-header-document-border-color);
/* 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);
background: var(--hm-sw-header-document-background) padding-box, var(--hm-sw-header-document-border-gradient) border-box;
}
.hm-sw-viewer-header__document-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@@ -266,9 +267,10 @@ button.hm-sw-viewer-header__brand { text-align: left; }
height: calc(var(--hm-sw-viewer-height) - 2px);
gap: var(--hm-sw-viewer-gap);
padding-inline: var(--hm-sw-viewer-gap);
border: 1px solid var(--hm-sw-header-object-border-color);
/* 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);
background: var(--hm-sw-header-object-background) padding-box, var(--hm-sw-header-object-border-gradient) border-box;
}
.hm-sw-viewer-header__group {
@@ -449,10 +451,11 @@ button.hm-sw-viewer-header__brand { text-align: left; }
.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) + *)::after {
box-sizing: border-box;
width: var(--hm-sw-header-object-radius);
border: 1px solid var(--hm-sw-header-object-border-color);
/* 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);
background: var(--hm-sw-header-object-background) padding-box, var(--hm-sw-header-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; }