feat(sw): add independent popup and more design tokens
This commit is contained in:
shkim4 committed
1 parent
39a089ad0e
commit
4c6fff5dea
6 files changed
+61
-35
No files matched your search
@@ -221,7 +221,7 @@ button.hm-sw-viewer-header__brand { text-align: left; }
|
||||
padding: 0 12px;
|
||||
color: inherit;
|
||||
}
|
||||
.hm-sw-viewer-header__logo-menu .hm-sw-header__more-item:is(:hover, :focus):not(:disabled) { background: var(--hm-sw-header-hover); outline: none; }
|
||||
.hm-sw-viewer-header__logo-menu .hm-sw-header__more-item:is(:hover, :focus):not(:disabled) { background: var(--hm-sw-header-more-item-hover-background); outline: none; }
|
||||
.hm-sw-viewer-header__logo-menu .hm-sw-header__more-item:disabled { opacity: 0.5; }
|
||||
/* Title = SWViewerMenu label, directly above its items (one group, no divider); icons = SWViewerMenu icon slot. */
|
||||
.hm-sw-viewer-header__logo-menu .hm-sw-header__more-title { min-height: 0; padding: 6px 12px; font-size: 12px; font-weight: 500; line-height: 18px; }
|
||||
@@ -297,18 +297,18 @@ button.hm-sw-viewer-header__brand { text-align: left; }
|
||||
a segment (none around the license button), no gap, top and bottom on the object surface border. The strip ends at the object surface edge, as in SWHeader. Status stays display only. */
|
||||
.hm-sw-viewer-header__object:has(> .hm-sw-viewer-header__actions > :is(.hm-sw-viewer-status, .hm-sw-viewer-header__button, .hm-sw-header__window-buttons):last-child) { padding-right: 0; }
|
||||
/* Viewer header dropdown colors (2026-10-21): the menus of the header — menu buttons, More and their submenus — use the
|
||||
colors of the SWHeader `...` menu (sw.css .hm-sw-header__more-menu): its face and shadow (fixed values there), the
|
||||
object border token, the header text, secondary text at 80% (as its values) and the white 8% row hover with the text
|
||||
unchanged. Size, spacing and type stay SWViewerMenu. A standalone SWViewerMenu (context menu) and the document list
|
||||
keep their own colors. */
|
||||
colors of the SWHeader `...` menu (sw.css .hm-sw-header__more-menu): its More tokens for face, shadow, border and
|
||||
row hover (2026-11-10, same values as before), the header text and secondary text at 80% (as its values), the text
|
||||
unchanged on hover. Size, spacing and type stay SWViewerMenu. A standalone SWViewerMenu (context menu) and the
|
||||
document list keep their own colors. */
|
||||
.hm-sw-viewer-header .hm-sw-viewer-menu[data-surface] {
|
||||
border-color: var(--hm-sw-header-object-border-color);
|
||||
background: #0e3d2f;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
border-color: var(--hm-sw-header-more-menu-border-color);
|
||||
background: var(--hm-sw-header-more-menu-background);
|
||||
box-shadow: var(--hm-sw-header-more-menu-shadow);
|
||||
color: var(--hm-sw-header-text-color);
|
||||
}
|
||||
.hm-sw-viewer-header .hm-sw-viewer-menu .hm-sw-viewer-menu__item:is(:focus, :hover, [data-state="open"]):not([aria-disabled]) {
|
||||
background: var(--hm-sw-header-hover);
|
||||
background: var(--hm-sw-header-more-item-hover-background);
|
||||
color: inherit;
|
||||
}
|
||||
.hm-sw-viewer-header .hm-sw-viewer-menu :is(.hm-sw-viewer-menu__label, .hm-sw-viewer-menu__shortcut, .hm-sw-viewer-menu__chevron) { color: inherit; opacity: 0.8; }
|
||||
|
||||
@@ -96,6 +96,28 @@
|
||||
--hm-sw-switch-on-border: #d2570b;
|
||||
--hm-sw-switch-thumb-off: linear-gradient(180deg, #fbedd4 0%, #eee3da 100%);
|
||||
--hm-sw-switch-thumb-on: linear-gradient(180deg, #e8741e 0%, #c0520d 100%);
|
||||
/* Switch depth (2026-11-10 individual tokens, values as before): inner shadows + ring + 1px highlight, thumb drop. */
|
||||
--hm-sw-switch-off-shadow: inset 1px 0 2px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--hm-sw-switch-off-border), 1px 1px 1px #fcf0d8;
|
||||
--hm-sw-switch-on-shadow: inset 1px 0 1px 1px rgba(0, 0, 0, .2), inset 0 1px 1px 1px rgba(0, 0, 0, .2), inset 0 0 0 .8px var(--hm-sw-switch-on-border), 1px 1px 1px #fcf0d8;
|
||||
--hm-sw-switch-thumb-shadow: 0 .5px 1px rgba(0, 0, 0, .6);
|
||||
/* Popup frame (SWPopupFrame: SWPopup, property window, SWViewerPanel; 2026-11-10 individual tokens). The title bar
|
||||
defaults follow the header tokens it used so far, so a theme that sets those header tokens is unchanged; set the
|
||||
popup token to change the popup alone. */
|
||||
--hm-sw-popup-titlebar-background: var(--hm-sw-header-document-background);
|
||||
--hm-sw-popup-title-color: var(--hm-sw-header-selected-color);
|
||||
--hm-sw-popup-title-outline: var(--hm-sw-header-label-outline);
|
||||
--hm-sw-popup-frame-shadow: inset 0 0 0 1px #000;
|
||||
--hm-sw-popup-group-heading-color: rgba(0, 0, 0, .7);
|
||||
--hm-sw-popup-group-border-color: #585349;
|
||||
--hm-sw-popup-group-shadow: 0 2px 2px rgba(255, 255, 255, .6), inset 0 2px 4px #e1cfab, inset 0 -2px 2px rgba(104, 95, 76, .8);
|
||||
--hm-sw-popup-divider-color: rgba(0, 0, 0, .5);
|
||||
--hm-sw-popup-table-line-color: rgba(0, 0, 0, .4);
|
||||
/* SWHeader `...` More menu (2026-11-10 individual tokens, values as before). The viewer header dropdowns and the
|
||||
viewer logo menu take the same face and shadow. Border and row hover default to the header tokens they used. */
|
||||
--hm-sw-header-more-menu-background: #0e3d2f;
|
||||
--hm-sw-header-more-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
--hm-sw-header-more-menu-border-color: var(--hm-sw-header-object-border-color);
|
||||
--hm-sw-header-more-item-hover-background: var(--hm-sw-header-hover);
|
||||
/* Popup scrollbar (every SW popup body: SWPopup, SWViewerPanel, property window). Same as the DWG/DXF viewer
|
||||
panels (thin, HM warm-neutral-mid thumb on warm-neutral-light track). */
|
||||
--hm-sw-popup-scrollbar-thumb: #9a9284;
|
||||
@@ -1353,10 +1375,10 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
min-width: 200px;
|
||||
max-width: calc(100vw - 16px);
|
||||
padding: 4px;
|
||||
border: 1px solid var(--hm-sw-header-object-border-color);
|
||||
border: 1px solid var(--hm-sw-header-more-menu-border-color);
|
||||
border-radius: var(--hm-sw-header-property-radius);
|
||||
background: #0e3d2f;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
background: var(--hm-sw-header-more-menu-background);
|
||||
box-shadow: var(--hm-sw-header-more-menu-shadow);
|
||||
}
|
||||
.hm-sw-header__more-item {
|
||||
display: none;
|
||||
@@ -1368,7 +1390,7 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hm-sw-header__more-item:hover:not(:disabled) { background: var(--hm-sw-header-hover); }
|
||||
.hm-sw-header__more-item:hover:not(:disabled) { background: var(--hm-sw-header-more-item-hover-background); }
|
||||
.hm-sw-header__more-item[role="menuitemcheckbox"]::after { content: ""; width: 14px; text-align: center; }
|
||||
.hm-sw-header__more-item[aria-checked="true"]::after { content: "✓"; }
|
||||
.hm-sw-header__more-value { font-size: var(--hm-sw-header-label-size); opacity: 0.8; }
|
||||
@@ -1619,13 +1641,13 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
overflow: hidden; border: 1px solid var(--hm-sw-property-border); border-radius: 4px;
|
||||
background: var(--hm-sw-property-surface); color: var(--hm-sw-property-label);
|
||||
font-size: 14px; font-weight: 400; line-height: 16px; letter-spacing: .02em;
|
||||
box-shadow: inset 0 0 0 1px #000;
|
||||
box-shadow: var(--hm-sw-popup-frame-shadow);
|
||||
}
|
||||
.hm-sw-property__titlebar { position: relative; display: flex; align-items: center; flex: 0 0 30px; height: 30px; background: var(--hm-sw-header-document-background); }
|
||||
.hm-sw-property__titlebar { position: relative; display: flex; align-items: center; flex: 0 0 30px; height: 30px; background: var(--hm-sw-popup-titlebar-background); }
|
||||
/* Figma paints btn_close first, then Union over its left side. Keep Union's diagonal and shadow
|
||||
above the close background; the title and tool remain interactive on top of it. */
|
||||
.hm-sw-property__title-art { position: absolute; z-index: 1; width: 308px; height: 38px; left: 0; top: -2px; transform: scaleY(-1); pointer-events: none; }
|
||||
.hm-sw-property__title { position: relative; z-index: 2; flex: 1; min-width: 0; margin-left: 7px; padding-right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; letter-spacing: .04em; color: var(--hm-sw-header-selected-color); text-shadow: var(--hm-sw-header-label-outline); }
|
||||
.hm-sw-property__title { position: relative; z-index: 2; flex: 1; min-width: 0; margin-left: 7px; padding-right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; letter-spacing: .04em; color: var(--hm-sw-popup-title-color); text-shadow: var(--hm-sw-popup-title-outline); }
|
||||
.hm-sw-property__tool { position: absolute; z-index: 2; right: 43px; top: 1px; width: 29px; height: 27.13px; }
|
||||
.hm-sw-property:not([data-selection-kind="single"]) .hm-sw-property__title { margin-right: 29px; }
|
||||
.hm-sw-property__tool > img { position: absolute; top: 0; left: 0; display: block; width: 29px; height: 27.13px; }
|
||||
@@ -1649,17 +1671,17 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
box-sizing: border-box; display: inline-flex; align-items: center; flex-shrink: 0;
|
||||
width: 37px; height: 16px; padding: 0; border: 0; border-radius: 100px;
|
||||
background: var(--hm-sw-switch-off-background);
|
||||
box-shadow: inset 1px 0 2px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--hm-sw-switch-off-border), 1px 1px 1px #fcf0d8;
|
||||
box-shadow: var(--hm-sw-switch-off-shadow);
|
||||
}
|
||||
.hm-sw-property [role="switch"]:is([data-slot="switch"], .hm-sw-viewer-switch)[data-state="checked"] {
|
||||
background: var(--hm-sw-switch-on-background);
|
||||
box-shadow: inset 1px 0 1px 1px rgba(0, 0, 0, .2), inset 0 1px 1px 1px rgba(0, 0, 0, .2), inset 0 0 0 .8px var(--hm-sw-switch-on-border), 1px 1px 1px #fcf0d8;
|
||||
box-shadow: var(--hm-sw-switch-on-shadow);
|
||||
}
|
||||
.hm-sw-property [role="switch"]:is([data-slot="switch"], .hm-sw-viewer-switch):hover:not(:disabled) { background-image: none; }
|
||||
.hm-sw-property [role="switch"]:is([data-slot="switch"], .hm-sw-viewer-switch):focus-visible { outline: 2px solid var(--hm-sw-switch-on-border); outline-offset: 1px; }
|
||||
.hm-sw-property [role="switch"] > :is([data-slot="switch-thumb"], .hm-sw-viewer-switch__thumb) {
|
||||
width: 12px; height: 12px; border-radius: 6.5px;
|
||||
background: var(--hm-sw-switch-thumb-off); box-shadow: 0 .5px 1px rgba(0, 0, 0, .6);
|
||||
background: var(--hm-sw-switch-thumb-off); box-shadow: var(--hm-sw-switch-thumb-shadow);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
.hm-sw-property [role="switch"][data-state="checked"] > :is([data-slot="switch-thumb"], .hm-sw-viewer-switch__thumb) {
|
||||
@@ -1668,8 +1690,8 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.hm-sw-property[data-selection-kind="all"] .hm-sw-property__body { padding-bottom: 0; }
|
||||
.hm-sw-property[data-selection-kind="all"] .hm-sw-property__counts { margin-top: -8px; }
|
||||
.hm-sw-property__group { flex: 0 0 auto; }
|
||||
.hm-sw-property__group > h3 { margin: 0 0 4px; font: inherit; font-weight: 700; color: rgba(0,0,0,.7); }
|
||||
.hm-sw-property__group--rows > .hm-sw-property__group-content { border: 1px solid #585349; border-radius: 4px; padding: 2px; background: var(--hm-sw-property-content); box-shadow: 0 2px 2px rgba(255,255,255,.6), inset 0 2px 4px #e1cfab, inset 0 -2px 2px rgba(104,95,76,.8); }
|
||||
.hm-sw-property__group > h3 { margin: 0 0 4px; font: inherit; font-weight: 700; color: var(--hm-sw-popup-group-heading-color); }
|
||||
.hm-sw-property__group--rows > .hm-sw-property__group-content { border: 1px solid var(--hm-sw-popup-group-border-color); border-radius: 4px; padding: 2px; background: var(--hm-sw-property-content); box-shadow: var(--hm-sw-popup-group-shadow); }
|
||||
.hm-sw-property__row { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 6px; }
|
||||
.hm-sw-property__row > label { flex: 0 0 72px; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.hm-sw-property__value { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
|
||||
@@ -1738,7 +1760,7 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.hm-sw-property__expand > img { display: block; width: 296px; height: 12px; margin-left: calc((100% - 296px) / 2); }
|
||||
.hm-sw-property__expand[aria-expanded="true"] > img { transform: rotate(180deg); }
|
||||
.hm-sw-property__counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.hm-sw-property__counts > span { min-height: 28px; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.5); font-weight: 700; }
|
||||
.hm-sw-property__counts > span { min-height: 28px; padding: 5px 0; border-bottom: 1px solid var(--hm-sw-popup-divider-color); font-weight: 700; }
|
||||
/* 2026-10-21 design review: each object type entry (원 1, 폴리선 10 …) changes its own text color on Hover, with the
|
||||
SW row accent #FF5C00 (the header list row hover color). Display only: no click, selection or filter. */
|
||||
/* Only the object list (columns 3-4); the summary entries of columns 1-2 (data-count-summary) stay plain text. */
|
||||
@@ -1768,17 +1790,17 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.hm-sw-property__group--position { margin-top: 8px; }
|
||||
.hm-sw-property__group--position .hm-sw-property__group-content { margin: 0 4px; }
|
||||
.hm-sw-property__position-head, .hm-sw-property__group--position .hm-sw-property__editors { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
|
||||
.hm-sw-property__position-head { background: var(--hm-sw-property-table); border-top: 1px solid rgba(0,0,0,.4); }
|
||||
.hm-sw-property__position-head > span, .hm-sw-property__position-label { min-height: 24px; padding: 3px 0; text-align: center; font-weight: 700; border-bottom: 1px solid rgba(0,0,0,.4); }
|
||||
.hm-sw-property__position-head > span + span, .hm-sw-property__group--position .hm-sw-property__editor { border-left: 1px solid rgba(0,0,0,.4); }
|
||||
.hm-sw-property__position-head { background: var(--hm-sw-property-table); border-top: 1px solid var(--hm-sw-popup-table-line-color); }
|
||||
.hm-sw-property__position-head > span, .hm-sw-property__position-label { min-height: 24px; padding: 3px 0; text-align: center; font-weight: 700; border-bottom: 1px solid var(--hm-sw-popup-table-line-color); }
|
||||
.hm-sw-property__position-head > span + span, .hm-sw-property__group--position .hm-sw-property__editor { border-left: 1px solid var(--hm-sw-popup-table-line-color); }
|
||||
.hm-sw-property__position-label { background: var(--hm-sw-property-table); }
|
||||
.hm-sw-property__group--position .hm-sw-property__row { padding: 0; gap: 0; min-height: 24px; }
|
||||
.hm-sw-property__group--position label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
||||
.hm-sw-property__group--position .hm-sw-header__input { padding: 0; width: 100%; height: 24px; text-align: center; }
|
||||
.hm-sw-property__group--position .hm-sw-property__editor { border-bottom: 1px solid rgba(0,0,0,.4); }
|
||||
.hm-sw-property__group--position .hm-sw-property__editor { border-bottom: 1px solid var(--hm-sw-popup-table-line-color); }
|
||||
.hm-sw-property__overview { position: relative; flex: 0 0 28px; height: 28px; text-align: left; overflow: hidden; }
|
||||
.hm-sw-property__overview > img { position: absolute; left: -3px; top: -2px; width: 317px; height: 36.0847px; transform: scaleY(-1); }
|
||||
.hm-sw-property__overview > span { position: relative; display: block; padding: 6px 7px; color: var(--hm-sw-header-selected-color); text-shadow: var(--hm-sw-header-label-outline); font-weight: 700; }
|
||||
.hm-sw-property__overview > span { position: relative; display: block; padding: 6px 7px; color: var(--hm-sw-popup-title-color); text-shadow: var(--hm-sw-popup-title-outline); font-weight: 700; }
|
||||
.hm-sw-property__overview:disabled { opacity: 1; }
|
||||
.hm-sw-property__row[data-disabled="true"] { opacity: .4; }
|
||||
.hm-sw-property button:focus-visible, .hm-sw-property input:focus-visible, .hm-sw-property select:focus-visible { outline: 2px solid var(--hm-sw-property-border); outline-offset: -2px; }
|
||||
|
||||
Reference in new issue
Block a user