feat(sw): add remaining component theme tokens
Add nine component tokens declared on the outermost SW scope. Each defaults to the token or literal it replaces, so the default look and header theme inheritance are unchanged; setting one changes its component alone. - Viewer Header menus (logo menu, header dropdowns, More): --hm-sw-viewer-header-menu-background / -border-color / -shadow / -item-hover-background (default: --hm-sw-header-more-*) - SWHeader K guide: --hm-sw-header-k-guide-border-color (default var(--hm-sw-property-border)) / -background (#0e3c2e) - Popup value color: --hm-sw-popup-value-color (default var(--hm-sw-header-input-color)); the property bar keeps the header token - Footer command history scrollbar: --hm-sw-footer-command-scrollbar-thumb (#574b30) / -track (transparent) Footer focus ring, side shadow, shared text color and dividers stay shared. Docs (DESIGN_RULES, AI_USAGE, VIEWER, header design spec) and theme-inheritance section 1d updated.
This commit is contained in:
shkim4 committed
1 parent
28e00f2870
commit
228d8872fc
8 files changed
+174
-23
No files matched your search
@@ -94,6 +94,9 @@
|
||||
--hm-sw-footer-command-input-shadow: 0 -1px 2px rgba(255, 255, 255, 0.25), inset 0 1px 4px #000;
|
||||
--hm-sw-footer-command-font-size: 12px;
|
||||
--hm-sw-footer-command-line-height: 14px;
|
||||
/* History scrollbar (thin; 2026-11-10 individual tokens, values as before: the former scrollbar-color literals). */
|
||||
--hm-sw-footer-command-scrollbar-thumb: #574b30;
|
||||
--hm-sw-footer-command-scrollbar-track: transparent;
|
||||
/* Not in Figma (reference screens 2026-10-20): the command line inside the bar keeps at least this width. */
|
||||
--hm-sw-footer-command-min-width: 280px;
|
||||
/* Not in Figma: with the command line inside the bar, the slot area takes this share of the free width (bar minus
|
||||
@@ -613,7 +616,7 @@
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #574b30 transparent;
|
||||
scrollbar-color: var(--hm-sw-footer-command-scrollbar-thumb) var(--hm-sw-footer-command-scrollbar-track);
|
||||
text-shadow: var(--hm-sw-header-label-outline);
|
||||
}
|
||||
.hm-sw-footer-command__history > li { white-space: pre; }
|
||||
|
||||
@@ -127,6 +127,17 @@
|
||||
--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);
|
||||
|
||||
/* Viewer Header menus (2026-11-10): the logo menu and the header dropdowns (menu buttons, More, their submenus) read
|
||||
these copies of the SWHeader `...` More tokens. Each defaults to the More token, so the shared look stays; set
|
||||
--hm-sw-viewer-header-menu-* on the outermost SW scope to change the Viewer Header menus alone (SWHeader More
|
||||
unchanged). Resolved on the outermost scope like the face aliases above. Text color and the divider stay shared
|
||||
(--hm-sw-header-text-color, --hm-sw-header-document-menu-divider-color); a standalone SWViewerMenu keeps
|
||||
--hm-sw-viewer-menu-* / -more-*. */
|
||||
--hm-sw-viewer-header-menu-background: var(--hm-sw-header-more-menu-background);
|
||||
--hm-sw-viewer-header-menu-border-color: var(--hm-sw-header-more-menu-border-color);
|
||||
--hm-sw-viewer-header-menu-shadow: var(--hm-sw-header-more-menu-shadow);
|
||||
--hm-sw-viewer-header-menu-item-hover-background: var(--hm-sw-header-more-item-hover-background);
|
||||
}
|
||||
|
||||
.hm-sw-viewer-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
||||
@@ -225,7 +236,10 @@ button.hm-sw-viewer-header__brand { text-align: left; }
|
||||
min-width: 160px;
|
||||
padding: 4px;
|
||||
border-width: 1px;
|
||||
border-color: var(--hm-sw-viewer-header-menu-border-color);
|
||||
border-radius: var(--hm-sw-viewer-radius);
|
||||
background: var(--hm-sw-viewer-header-menu-background);
|
||||
box-shadow: var(--hm-sw-viewer-header-menu-shadow);
|
||||
color: var(--hm-sw-header-text-color);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
@@ -237,7 +251,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-more-item-hover-background); outline: none; }
|
||||
.hm-sw-viewer-header__logo-menu .hm-sw-header__more-item:is(:hover, :focus):not(:disabled) { background: var(--hm-sw-viewer-header-menu-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; }
|
||||
@@ -318,13 +332,13 @@ button.hm-sw-viewer-header__brand { text-align: left; }
|
||||
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-more-menu-border-color);
|
||||
background: var(--hm-sw-header-more-menu-background);
|
||||
box-shadow: var(--hm-sw-header-more-menu-shadow);
|
||||
border-color: var(--hm-sw-viewer-header-menu-border-color);
|
||||
background: var(--hm-sw-viewer-header-menu-background);
|
||||
box-shadow: var(--hm-sw-viewer-header-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-more-item-hover-background);
|
||||
background: var(--hm-sw-viewer-header-menu-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; }
|
||||
@@ -880,8 +894,8 @@ button.hm-sw-viewer-header__brand { text-align: left; }
|
||||
border-color: transparent;
|
||||
border-radius: 2px;
|
||||
background: transparent;
|
||||
color: var(--hm-sw-header-input-color);
|
||||
caret-color: var(--hm-sw-header-input-color);
|
||||
color: var(--hm-sw-popup-value-color);
|
||||
caret-color: var(--hm-sw-popup-value-color);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
|
||||
@@ -112,12 +112,21 @@
|
||||
--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);
|
||||
/* Popup value (2026-11-10): the red editable value of the property window / SWPopupRow (input, select, SWSelect,
|
||||
dropdown trigger) and of SWViewerPanel inputs. Defaults to the header input color it used, so a header theme still
|
||||
reaches it; set it to change popup values alone (the SWHeader 속성Bar keeps --hm-sw-header-input-color). */
|
||||
--hm-sw-popup-value-color: var(--hm-sw-header-input-color);
|
||||
/* 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. */
|
||||
viewer logo menu default to the same face and shadow (--hm-sw-viewer-header-menu-*, sw-viewer.css). 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);
|
||||
/* SWHeader K guide preview panel (2026-11-10 individual tokens, values as before): its border defaulted to the
|
||||
property window border, its face was a literal. Text and outline stay the header tokens. */
|
||||
--hm-sw-header-k-guide-border-color: var(--hm-sw-property-border);
|
||||
--hm-sw-header-k-guide-background: #0e3c2e;
|
||||
/* 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;
|
||||
@@ -1696,16 +1705,19 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.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; }
|
||||
.hm-sw-property__value > .hm-sw-header__input { width: auto; max-width: 100%; min-width: 0; flex: 1; text-shadow: none; letter-spacing: .02em; font-weight: 500; }
|
||||
.hm-sw-property__value > .hm-sw-header__input:focus { color: var(--hm-sw-header-input-color); }
|
||||
.hm-sw-property__value > select:not(.hm-sw-select) { flex: 1; min-width: 0; width: 0; height: 28px; padding: 0; appearance: none; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--hm-sw-header-input-color); font: inherit; }
|
||||
.hm-sw-property__value > select:not(.hm-sw-select):disabled { opacity: 1; appearance: none; color: var(--hm-sw-header-input-color); }
|
||||
/* Popup value color (2026-11-10, --hm-sw-popup-value-color): the inputs of the value, gauge value and color value cells
|
||||
(before: the shared .hm-sw-header__input color); read-only values keep the label color (rule below, higher specificity). */
|
||||
:is(.hm-sw-property__value, .hm-sw-property__slider-value, .hm-sw-property__color-value) > .hm-sw-header__input,
|
||||
.hm-sw-property__value > .hm-sw-header__input:focus { color: var(--hm-sw-popup-value-color); caret-color: var(--hm-sw-popup-value-color); }
|
||||
.hm-sw-property__value > select:not(.hm-sw-select) { flex: 1; min-width: 0; width: 0; height: 28px; padding: 0; appearance: none; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--hm-sw-popup-value-color); font: inherit; }
|
||||
.hm-sw-property__value > select:not(.hm-sw-select):disabled { opacity: 1; appearance: none; color: var(--hm-sw-popup-value-color); }
|
||||
.hm-sw-property__value > select:not(.hm-sw-select):focus { background: var(--hm-sw-property-content); border-color: var(--hm-sw-property-inner-border); }
|
||||
/* SWSelect: native select, panel field look; focus = the SW popup focus ring. */
|
||||
.hm-sw-select { flex: 0 0 auto; height: 28px; padding: 0 8px; border: 1px solid var(--hm-sw-select-border-color); border-radius: 4px; background: var(--hm-sw-select-background); color: var(--hm-sw-select-text); font: inherit; font-size: 12px; }
|
||||
.hm-sw-select:disabled { opacity: 0.4; cursor: default; }
|
||||
/* 2026-10-21: in an SW popup the chosen value of an enabled select is editable, so it is red like every editable value;
|
||||
a disabled select and the option list keep --hm-sw-select-text. The viewer panels keep their own text color (sw-viewer.css). */
|
||||
.hm-sw-property .hm-sw-select:not(:disabled) { color: var(--hm-sw-header-input-color); }
|
||||
.hm-sw-property .hm-sw-select:not(:disabled) { color: var(--hm-sw-popup-value-color); }
|
||||
.hm-sw-property .hm-sw-select option { color: var(--hm-sw-select-text); }
|
||||
.hm-sw-property__unit { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
|
||||
/* Color preview (26:12175): 70 x 16 black tile (1px padding, radius 2), 68 x 14 swatch with a white 1px border. */
|
||||
@@ -1915,7 +1927,7 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
align-self: stretch;
|
||||
min-width: 0;
|
||||
padding: 0 7px;
|
||||
color: var(--hm-sw-header-input-color);
|
||||
color: var(--hm-sw-popup-value-color);
|
||||
text-align: left;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
@@ -1948,7 +1960,7 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
|
||||
/* K guide 26:11698 / 26:11669: original image, fixed mask viewport and continuous pan/zoom. */
|
||||
.hm-sw-k-guide { position: relative; flex: 0 0 40px; height: 38px; }
|
||||
.hm-sw-k-guide__panel { z-index: 45; height: 149px; min-height: 149px; overflow: hidden; border: 1px solid var(--hm-sw-property-border); border-radius: 2px; background: #0e3c2e; animation: hm-sw-k-guide-enter 511ms ease-out; }
|
||||
.hm-sw-k-guide__panel { z-index: 45; height: 149px; min-height: 149px; overflow: hidden; border: 1px solid var(--hm-sw-header-k-guide-border-color); border-radius: 2px; background: var(--hm-sw-header-k-guide-background); animation: hm-sw-k-guide-enter 511ms ease-out; }
|
||||
.hm-sw-k-guide__viewport { position: absolute; top: 6px; left: 6px; width: 192px; height: 109px; mask-size: 192px 109px; mask-repeat: no-repeat; outline: 1px solid #000; }
|
||||
.hm-sw-k-guide__viewport > img { display: block; max-width: none; width: 456px; height: 256.5px; transform-origin: 0 0; transform: translate(0, 0) scale(1); transition-property: transform; transition-timing-function: ease-in-out; }
|
||||
.hm-sw-k-guide__panel[data-frame="2"] .hm-sw-k-guide__viewport > img { transform: translate(0, -40.738px) scale(1); }
|
||||
|
||||
Reference in new issue
Block a user