Initial commit: HMDesignSystem baseline
This commit is contained in:
shkim4 committed
commit
b6a0a61103
486 files changed
+68432
No files matched your search
@@ -0,0 +1,111 @@
|
||||
/* Toggle Group mapping. ui-viz has no Toggle Group spec, so these are current HM values built from the HM Semantic / Primitive
|
||||
tokens. The items share the same selection language as Toggle (full Accent face when on) but use their own --hm-toggle-group-* tokens
|
||||
and do not depend on Toggle's CSS. spacing={0} (default) connects the items into a segmented bar; spacing > 0 separates them
|
||||
with a gap. Radix sets data-orientation only when `orientation` is given, so "horizontal" is selected as :not([data-orientation="vertical"]).
|
||||
States use Radix attributes ([data-state="on"|"off"], :disabled) and :hover.
|
||||
The look is in `@layer components` so a consumer's utility classes still win. */
|
||||
:root, [data-hm-theme] {
|
||||
--hm-toggle-group-height-sm: 28px;
|
||||
--hm-toggle-group-height-md: 34px;
|
||||
--hm-toggle-group-height-lg: 42px;
|
||||
--hm-toggle-group-padding-x-sm: 8px;
|
||||
--hm-toggle-group-padding-x-md: 12px;
|
||||
--hm-toggle-group-padding-x-lg: 16px;
|
||||
--hm-toggle-group-radius: var(--hm-radius-control-md);
|
||||
--hm-toggle-group-gap: 8px;
|
||||
--hm-toggle-group-font-size: 14px;
|
||||
--hm-toggle-group-line-height: 20px;
|
||||
--hm-toggle-group-font-weight: 500;
|
||||
|
||||
--hm-toggle-group-off-background: transparent;
|
||||
--hm-toggle-group-off-text: var(--hm-sem-fg-primary);
|
||||
--hm-toggle-group-hover-background: var(--hm-sem-surface-highlight);
|
||||
--hm-toggle-group-on-background: var(--accent);
|
||||
--hm-toggle-group-on-text: var(--accent-foreground);
|
||||
|
||||
--hm-toggle-group-border-width: 1px;
|
||||
--hm-toggle-group-border-color: var(--hm-sem-stroke-input-default);
|
||||
|
||||
/* Current HM value for this component only; not a global Disabled rule. */
|
||||
--hm-toggle-group-disabled-opacity: 0.6;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
[data-slot="toggle-group-item"] {
|
||||
--hm-toggle-group-item-height: var(--hm-toggle-group-height-md);
|
||||
--hm-toggle-group-item-padding-x: var(--hm-toggle-group-padding-x-md);
|
||||
box-sizing: border-box;
|
||||
gap: 8px;
|
||||
height: var(--hm-toggle-group-item-height);
|
||||
min-width: var(--hm-toggle-group-item-height);
|
||||
padding: 0 var(--hm-toggle-group-item-padding-x);
|
||||
border: var(--hm-toggle-group-border-width) solid transparent;
|
||||
border-radius: var(--hm-toggle-group-radius);
|
||||
background: var(--hm-toggle-group-off-background);
|
||||
color: var(--hm-toggle-group-off-text);
|
||||
font-size: var(--hm-toggle-group-font-size);
|
||||
line-height: var(--hm-toggle-group-line-height);
|
||||
font-weight: var(--hm-toggle-group-font-weight);
|
||||
cursor: pointer;
|
||||
}
|
||||
[data-slot="toggle-group-item"][data-size="sm"] {
|
||||
--hm-toggle-group-item-height: var(--hm-toggle-group-height-sm);
|
||||
--hm-toggle-group-item-padding-x: var(--hm-toggle-group-padding-x-sm);
|
||||
}
|
||||
[data-slot="toggle-group-item"][data-size="lg"] {
|
||||
--hm-toggle-group-item-height: var(--hm-toggle-group-height-lg);
|
||||
--hm-toggle-group-item-padding-x: var(--hm-toggle-group-padding-x-lg);
|
||||
}
|
||||
[data-slot="toggle-group-item"][data-icon-only]:has(> svg:only-child) {
|
||||
padding: 0;
|
||||
}
|
||||
[data-slot="toggle-group-item"][data-variant="outline"] {
|
||||
border-color: var(--hm-toggle-group-border-color);
|
||||
}
|
||||
[data-slot="toggle-group-item"]:hover:not(:disabled) {
|
||||
background: var(--hm-toggle-group-hover-background);
|
||||
}
|
||||
[data-slot="toggle-group-item"][data-state="on"],
|
||||
[data-slot="toggle-group-item"][data-state="on"]:hover:not(:disabled) {
|
||||
background: var(--hm-toggle-group-on-background);
|
||||
color: var(--hm-toggle-group-on-text);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
[data-slot="toggle-group-item"]:disabled {
|
||||
opacity: var(--hm-toggle-group-disabled-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Gap between separated items (spacing > 0). */
|
||||
[data-slot="toggle-group"] {
|
||||
gap: var(--hm-toggle-group-gap);
|
||||
}
|
||||
|
||||
/* Connected (spacing 0): square inner corners, round outer corners, outline borders overlap by one border width. */
|
||||
[data-slot="toggle-group"][data-spacing="0"] [data-slot="toggle-group-item"] {
|
||||
border-radius: 0;
|
||||
}
|
||||
[data-slot="toggle-group"][data-spacing="0"]:not([data-orientation="vertical"]) [data-slot="toggle-group-item"]:first-child {
|
||||
border-top-left-radius: var(--hm-toggle-group-radius);
|
||||
border-bottom-left-radius: var(--hm-toggle-group-radius);
|
||||
}
|
||||
[data-slot="toggle-group"][data-spacing="0"]:not([data-orientation="vertical"]) [data-slot="toggle-group-item"]:last-child {
|
||||
border-top-right-radius: var(--hm-toggle-group-radius);
|
||||
border-bottom-right-radius: var(--hm-toggle-group-radius);
|
||||
}
|
||||
[data-slot="toggle-group"][data-spacing="0"][data-orientation="vertical"] [data-slot="toggle-group-item"]:first-child {
|
||||
border-top-left-radius: var(--hm-toggle-group-radius);
|
||||
border-top-right-radius: var(--hm-toggle-group-radius);
|
||||
}
|
||||
[data-slot="toggle-group"][data-spacing="0"][data-orientation="vertical"] [data-slot="toggle-group-item"]:last-child {
|
||||
border-bottom-left-radius: var(--hm-toggle-group-radius);
|
||||
border-bottom-right-radius: var(--hm-toggle-group-radius);
|
||||
}
|
||||
[data-slot="toggle-group"][data-spacing="0"]:not([data-orientation="vertical"]) [data-slot="toggle-group-item"][data-variant="outline"]:not(:first-child) {
|
||||
margin-left: calc(-1 * var(--hm-toggle-group-border-width));
|
||||
}
|
||||
[data-slot="toggle-group"][data-spacing="0"][data-orientation="vertical"] [data-slot="toggle-group-item"][data-variant="outline"]:not(:first-child) {
|
||||
margin-top: calc(-1 * var(--hm-toggle-group-border-width));
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user