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/breadcrumb.css
+63
View File
@@ -0,0 +1,63 @@
/* Breadcrumb mapping. ui-viz lists Breadcrumb only as a component name (no spec), so these are current HM values built from the HM
Semantic tokens. Parent links are secondary text that turns primary on hover; the current page is a primary-colored label. */
:root, [data-hm-theme] {
--hm-breadcrumb-font-size: 14px;
--hm-breadcrumb-line-height: 20px;
--hm-breadcrumb-font-weight: 400;
--hm-breadcrumb-gap: 8px;
--hm-breadcrumb-link-color: var(--hm-sem-fg-secondary);
--hm-breadcrumb-link-hover-color: var(--hm-sem-fg-primary);
--hm-breadcrumb-page-color: var(--hm-sem-fg-primary);
--hm-breadcrumb-page-font-weight: 700;
--hm-breadcrumb-separator-color: var(--hm-sem-fg-secondary);
--hm-breadcrumb-separator-size: 16px;
--hm-breadcrumb-ellipsis-size: 20px;
--hm-breadcrumb-focus-radius: 2px;
}
[data-slot="breadcrumb-list"] {
gap: var(--hm-breadcrumb-gap);
color: var(--hm-breadcrumb-link-color);
font-size: var(--hm-breadcrumb-font-size);
line-height: var(--hm-breadcrumb-line-height);
font-weight: var(--hm-breadcrumb-font-weight);
}
[data-slot="breadcrumb-item"] {
gap: var(--hm-breadcrumb-gap);
}
[data-slot="breadcrumb-link"] {
color: var(--hm-breadcrumb-link-color);
border-radius: var(--hm-breadcrumb-focus-radius);
text-decoration: none;
outline: none;
}
[data-slot="breadcrumb-link"]:hover {
color: var(--hm-breadcrumb-link-hover-color);
text-decoration: underline;
text-underline-offset: 4px;
}
[data-slot="breadcrumb-link"]:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
[data-slot="breadcrumb-page"] {
color: var(--hm-breadcrumb-page-color);
font-weight: var(--hm-breadcrumb-page-font-weight);
cursor: default;
}
[data-slot="breadcrumb-separator"] {
color: var(--hm-breadcrumb-separator-color);
}
[data-slot="breadcrumb-separator"] > svg {
width: var(--hm-breadcrumb-separator-size);
height: var(--hm-breadcrumb-separator-size);
}
[data-slot="breadcrumb-ellipsis"] {
width: var(--hm-breadcrumb-ellipsis-size);
height: var(--hm-breadcrumb-ellipsis-size);
color: var(--hm-breadcrumb-separator-color);
}
[data-slot="breadcrumb-ellipsis"] > svg {
width: var(--hm-breadcrumb-separator-size);
height: var(--hm-breadcrumb-separator-size);
}