42 lines
1.5 KiB
CSS
42 lines
1.5 KiB
CSS
/* Avatar mapping. ui-viz lists Avatar only as a component name (no spec), so these are current HM values. Sizes follow the shadcn
|
|
API (sm | default | lg). The fallback uses the green tint face (the shared accent). */
|
|
:root, [data-hm-theme] {
|
|
--hm-avatar-size-sm: 24px;
|
|
--hm-avatar-size-md: 32px;
|
|
--hm-avatar-size-lg: 40px;
|
|
--hm-avatar-radius: 9999px;
|
|
|
|
--hm-avatar-fallback-background: var(--accent);
|
|
--hm-avatar-fallback-text: var(--accent-foreground);
|
|
--hm-avatar-fallback-font-weight: 500;
|
|
--hm-avatar-fallback-font-size-sm: 10px;
|
|
--hm-avatar-fallback-font-size-md: 12px;
|
|
--hm-avatar-fallback-font-size-lg: 14px;
|
|
}
|
|
|
|
[data-slot="avatar"] {
|
|
--hm-avatar-size: var(--hm-avatar-size-md);
|
|
--hm-avatar-fallback-font-size: var(--hm-avatar-fallback-font-size-md);
|
|
width: var(--hm-avatar-size);
|
|
height: var(--hm-avatar-size);
|
|
border-radius: var(--hm-avatar-radius);
|
|
}
|
|
[data-slot="avatar"][data-size="sm"] {
|
|
--hm-avatar-size: var(--hm-avatar-size-sm);
|
|
--hm-avatar-fallback-font-size: var(--hm-avatar-fallback-font-size-sm);
|
|
}
|
|
[data-slot="avatar"][data-size="lg"] {
|
|
--hm-avatar-size: var(--hm-avatar-size-lg);
|
|
--hm-avatar-fallback-font-size: var(--hm-avatar-fallback-font-size-lg);
|
|
}
|
|
[data-slot="avatar-fallback"] {
|
|
border-radius: var(--hm-avatar-radius);
|
|
background: var(--hm-avatar-fallback-background);
|
|
color: var(--hm-avatar-fallback-text);
|
|
font-size: var(--hm-avatar-fallback-font-size);
|
|
font-weight: var(--hm-avatar-fallback-font-weight);
|
|
line-height: 1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|