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

Initial commit: HMDesignSystem baseline

Browse Source
This commit is contained in:
shkim4 committed 2026-10-08 16:58:09 +09:00
commit b6a0a61103
486 files changed
+68432
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/src/theme/resizable.css
+74
View File
@@ -0,0 +1,74 @@
/* Resizable mapping. ui-viz has no Resizable spec, so these are current HM values built from the HM Semantic / Primitive tokens.
react-resizable-panels v4 owns the drag, constraints, keyboard and the pointer target (it expands the target around the thin
separator); here only the divider and the optional grip are styled. The separator state is the library's `data-separator`
("inactive" | "hover" | "active") and `:focus-visible`. Panels and Group keep the library's inline sizing.
The divider look is in `@layer components` so a consumer's utility classes still win. Nothing here references Separator tokens. */
:root, [data-hm-theme] {
--hm-resizable-divider-width: 1px;
--hm-resizable-divider-color: var(--hm-sem-stroke-input-default);
/* Hover: a stronger neutral; dragging and keyboard focus: the primary color. The divider widens by a halo, not by layout. */
--hm-resizable-hover-color: var(--hm-sem-stroke-default);
--hm-resizable-active-color: var(--hm-sem-action-primary);
--hm-resizable-focus-color: var(--hm-sem-stroke-input-focus);
--hm-resizable-halo-width: 1px;
--hm-resizable-grip-width: 12px;
--hm-resizable-grip-height: 16px;
--hm-resizable-grip-radius: 2px;
--hm-resizable-grip-background: var(--hm-sem-bg-surface);
--hm-resizable-grip-border-color: var(--hm-sem-stroke-input-default);
--hm-resizable-grip-icon-size: 10px;
--hm-resizable-grip-icon-color: var(--hm-sem-fg-secondary);
/* Current HM value for this component only; not a global Disabled rule. */
--hm-resizable-disabled-opacity: 0.6;
}
@layer components {
[data-slot="resizable-handle"] {
flex-shrink: 0;
background: var(--hm-resizable-divider-color);
}
/* A separator between side-by-side panels is vertical; between stacked panels it is horizontal. */
[data-slot="resizable-handle"][aria-orientation="vertical"] {
width: var(--hm-resizable-divider-width);
}
[data-slot="resizable-handle"][aria-orientation="horizontal"] {
height: var(--hm-resizable-divider-width);
}
[data-slot="resizable-handle"][data-separator="hover"] {
background: var(--hm-resizable-hover-color);
box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-hover-color);
}
[data-slot="resizable-handle"][data-separator="active"] {
background: var(--hm-resizable-active-color);
box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-active-color);
}
[data-slot="resizable-handle"]:focus-visible {
background: var(--hm-resizable-focus-color);
box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-focus-color);
}
[data-slot="resizable-handle"][data-disabled],
[data-slot="resizable-handle"][aria-disabled="true"] {
opacity: var(--hm-resizable-disabled-opacity);
}
[data-slot="resizable-handle-grip"] {
box-sizing: border-box;
width: var(--hm-resizable-grip-width);
height: var(--hm-resizable-grip-height);
border: 1px solid var(--hm-resizable-grip-border-color);
border-radius: var(--hm-resizable-grip-radius);
background: var(--hm-resizable-grip-background);
color: var(--hm-resizable-grip-icon-color);
}
[data-slot="resizable-handle-grip"] > svg {
width: var(--hm-resizable-grip-icon-size);
height: var(--hm-resizable-grip-icon-size);
}
/* Between stacked panels the grip lies down. */
[data-slot="resizable-handle"][aria-orientation="horizontal"] [data-slot="resizable-handle-grip"] {
transform: rotate(90deg);
}
}