146 lines
6.3 KiB
CSS
146 lines
6.3 KiB
CSS
/* Combobox mapping. ui-viz has no Combobox spec (it has a Select and a Search Field, both different components), so these are current
|
|
HM values built from the HM Semantic / Primitive tokens. Combobox is a composition (Popover + Command): the popup surface comes
|
|
from Popover, the search input and list from Command. Scoped popup overrides align the selection language with Select without
|
|
changing either shared component. The popup is as wide as the trigger (an inline style sets its width / padding).
|
|
The trigger look is in `@layer components` so a consumer's utility classes (width, height) still win. Nothing here references
|
|
Button / Input / Select / Popover / Command tokens. */
|
|
:root, [data-hm-theme] {
|
|
/* Inner heights; the 1px border is added around them (outer 34 / 44), like the Select trigger. */
|
|
--hm-combobox-height-md: 32px;
|
|
--hm-combobox-height-lg: 42px;
|
|
--hm-combobox-border-width: 1px;
|
|
--hm-combobox-padding-x: 12px;
|
|
--hm-combobox-gap: 12px;
|
|
--hm-combobox-radius: var(--hm-radius-control-md);
|
|
--hm-combobox-font-size-md: 14px;
|
|
--hm-combobox-line-height-md: 20px;
|
|
--hm-combobox-font-size-lg: 16px;
|
|
--hm-combobox-line-height-lg: 24px;
|
|
|
|
--hm-combobox-background: var(--hm-sem-bg-surface);
|
|
--hm-combobox-text: var(--hm-sem-fg-primary);
|
|
/* Readable empty-value guidance on the white trigger; preserve shared tokens. */
|
|
--hm-combobox-placeholder: var(--hm-sem-fg-secondary);
|
|
--hm-combobox-border-color: var(--hm-sem-stroke-input-default);
|
|
--hm-combobox-focus-border-color: var(--hm-sem-stroke-input-focus);
|
|
--hm-combobox-seam-color: var(--hm-sem-stroke-input-default);
|
|
--hm-combobox-icon-size: 18px;
|
|
--hm-combobox-icon-color: var(--hm-sem-fg-secondary);
|
|
--hm-combobox-check-size: 16px;
|
|
|
|
--hm-combobox-popup-radius: var(--hm-radius-input);
|
|
--hm-combobox-popup-shadow: 0 2px 24px color-mix(in srgb, var(--hm-sem-palette-black) 12%, transparent);
|
|
--hm-combobox-option-state-background: var(--hm-sem-surface-highlight);
|
|
--hm-combobox-option-state-text: var(--accent-foreground);
|
|
|
|
/* Current HM value for this component only; not a global Disabled rule. */
|
|
--hm-combobox-disabled-opacity: 0.6;
|
|
}
|
|
|
|
/* Share the connecting border via sideOffset=-1; only the seam uses the neutral stroke. */
|
|
[data-slot="popover-content"][data-combobox-popup] {
|
|
border-color: var(--hm-combobox-focus-border-color);
|
|
border-radius: var(--hm-combobox-popup-radius);
|
|
box-shadow: var(--hm-combobox-popup-shadow);
|
|
--hm-combobox-option-font-size: var(--hm-combobox-font-size-lg);
|
|
--hm-combobox-option-line-height: var(--hm-combobox-line-height-lg);
|
|
}
|
|
[data-slot="popover-content"][data-combobox-popup][data-side="bottom"] {
|
|
border-radius: 0 0 var(--hm-combobox-popup-radius) var(--hm-combobox-popup-radius);
|
|
border-top-color: var(--hm-combobox-seam-color);
|
|
}
|
|
[data-slot="popover-content"][data-combobox-popup][data-side="top"] {
|
|
border-radius: var(--hm-combobox-popup-radius) var(--hm-combobox-popup-radius) 0 0;
|
|
border-bottom-color: var(--hm-combobox-seam-color);
|
|
}
|
|
[data-combobox-popup][data-size="medium"] {
|
|
--hm-combobox-option-font-size: var(--hm-combobox-font-size-md);
|
|
--hm-combobox-option-line-height: var(--hm-combobox-line-height-md);
|
|
}
|
|
[data-combobox-popup] [data-slot="command"] {
|
|
border-radius: inherit;
|
|
}
|
|
[data-combobox-popup] [data-slot="command-item"] {
|
|
/* Retain Command's 36px height, 12px horizontal padding and search layout. */
|
|
border-radius: 0;
|
|
font-size: var(--hm-combobox-option-font-size);
|
|
line-height: var(--hm-combobox-option-line-height);
|
|
font-weight: 400;
|
|
}
|
|
[data-combobox-popup] [data-slot="command-item"][data-selected="true"],
|
|
[data-combobox-popup] [data-slot="command-item"][data-checked] {
|
|
background: var(--hm-combobox-option-state-background);
|
|
color: var(--hm-combobox-option-state-text);
|
|
}
|
|
|
|
@layer components {
|
|
[data-slot="combobox-trigger"] {
|
|
--hm-combobox-height: var(--hm-combobox-height-lg);
|
|
--hm-combobox-font-size: var(--hm-combobox-font-size-lg);
|
|
--hm-combobox-line-height: var(--hm-combobox-line-height-lg);
|
|
box-sizing: border-box;
|
|
min-width: 0; /* lets a long value truncate instead of widening a grid / flex parent */
|
|
max-width: 100%;
|
|
min-height: calc(var(--hm-combobox-height) + 2 * var(--hm-combobox-border-width));
|
|
gap: var(--hm-combobox-gap);
|
|
padding: 0 var(--hm-combobox-padding-x);
|
|
border: var(--hm-combobox-border-width) solid var(--hm-combobox-border-color);
|
|
border-radius: var(--hm-combobox-radius);
|
|
background: var(--hm-combobox-background);
|
|
color: var(--hm-combobox-text);
|
|
font-size: var(--hm-combobox-font-size);
|
|
line-height: var(--hm-combobox-line-height);
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
}
|
|
[data-slot="combobox-trigger"][data-size="medium"] {
|
|
--hm-combobox-height: var(--hm-combobox-height-md);
|
|
--hm-combobox-font-size: var(--hm-combobox-font-size-md);
|
|
--hm-combobox-line-height: var(--hm-combobox-line-height-md);
|
|
}
|
|
[data-slot="combobox-trigger"][data-empty] [data-slot="combobox-value"] {
|
|
color: var(--hm-combobox-placeholder);
|
|
}
|
|
[data-slot="combobox-value"] {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
[data-slot="combobox-icon"] {
|
|
flex-shrink: 0;
|
|
width: var(--hm-combobox-icon-size);
|
|
height: var(--hm-combobox-icon-size);
|
|
color: var(--hm-combobox-icon-color);
|
|
}
|
|
[data-slot="combobox-trigger"]:focus-visible,
|
|
[data-slot="combobox-trigger"][data-state="open"] {
|
|
border-color: var(--hm-combobox-focus-border-color);
|
|
}
|
|
[data-slot="combobox-trigger"][data-state="open"][data-side="bottom"] {
|
|
border-radius: var(--hm-combobox-radius) var(--hm-combobox-radius) 0 0;
|
|
border-bottom-color: var(--hm-combobox-seam-color);
|
|
}
|
|
[data-slot="combobox-trigger"][data-state="open"][data-side="top"] {
|
|
border-radius: 0 0 var(--hm-combobox-radius) var(--hm-combobox-radius);
|
|
border-top-color: var(--hm-combobox-seam-color);
|
|
}
|
|
[data-slot="combobox-trigger"]:disabled {
|
|
opacity: var(--hm-combobox-disabled-opacity);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Items inside the popup: a long label is truncated and the check stays at the end. */
|
|
[data-slot="combobox-item-label"] {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
[data-slot="combobox-item-check"] {
|
|
margin-left: auto;
|
|
width: var(--hm-combobox-check-size);
|
|
height: var(--hm-combobox-check-size);
|
|
}
|
|
}
|