토큰
DTCG 파이프라인에서 생성한 카탈로그입니다. 컴포넌트는 contract 변수만 사용합니다.
코드에서 프로바이더 값을 읽으려면, useAppearance()는 가장 가까운 ThemeProvider의 확정된 appearance(light 또는 dark)를, useDensity()는 가장 가까운 DensityProvider의 density를 반환합니다. 위에 프로바이더가 없으면 light와 comfortable을 반환합니다.
언제 쓰나요
ThemeProvider
언제: data-appearance로 하위 트리의 appearance(system / light / dark)를 설정합니다. 중첩된 프로바이더가 덮어씁니다. overrides는 허용 목록에 있는 토큰 경로에만 씁니다.
쓰지 않을 때: 간격 밀도 → DensityProvider. 원시 CSS나 알 수 없는 토큰 키(거부됩니다).
DensityProvider
언제: data-density로 하위 트리의 간격 밀도(compact / comfortable / spacious)를 설정합니다. 간격에만 씁니다.
쓰지 않을 때: 색상이나 라이트 / 다크 → ThemeProvider. 글자 크기 → Text size.
대비
토큰 빌드는 텍스트 쌍을 WCAG 2 비율이 아니라 APCA로 측정합니다. 각 쌍은 텍스트 색상, 불투명한 배경, 허용하는 최저 Lc를 지정합니다. 예를 들어 color.bg.elevated 위의 color.fg.muted는 Lc 60입니다. 어느 appearance에서든 쌍이 기준에 못 미치면 빌드가 실패합니다.
쌍은 tokens/resolver.json의 appearance 모디파이어에 있는 $extensions["dev.todae"].contrast에 있습니다. 회사 토큰 패키지는 이를 상속하므로, 리브랜딩한 액센트도 검사됩니다. 회사는 같은 fg와 bg로 쌍을 나열해 최솟값을 바꾸거나, 자체 토큰에 대한 쌍을 더할 수 있습니다.
브랜드 액센트는 appearance마다 네 개의 토큰입니다. color.accent.default, color.accent.hover, color.accent.active, color.on-accent입니다. Todae의 다크 on-accent는 거의 흰색인 잉크 위에 놓이도록 거의 검은색이므로, 넷을 함께 설정하세요. 빌드가 검사하도록 브랜드 액센트는 회사 토큰 패키지에 넣으세요. ThemeProvider 오버라이드는 런타임에 적용되며 검사되지 않습니다.
상태 톤
네 가지 톤이 상태를 나타냅니다. info, success, warning, critical입니다. 각 톤은 appearance마다 세 개의 토큰입니다. 텍스트와 아이콘에 쓰는 color.status.<tone>.fg, 채우기에 쓰는 .bg, 그리고 .border입니다. 빌드는 bg 위의 fg를 Lc 75로, color.bg.surface 위의 fg를 Lc 60으로 검사합니다. Alert는 alert.<tone> contract 토큰을 거쳐 이 토큰을 읽습니다. info는 액센트와 같은 중립적인 잉크이며, 회사는 토큰 패키지에서 여기에 색조를 줄 수 있습니다.
카탈로그
| 경로 | 컨텍스트 | CSS 변수 | 값 | 참조 |
|---|---|---|---|---|
border.width | — | --todae-border-width | 1px | — |
color.amber.100 | — | --todae-color-amber-100 | oklch(0.95 0.05 70) | — |
color.amber.200 | — | --todae-color-amber-200 | oklch(0.88 0.09 70) | — |
color.amber.300 | — | --todae-color-amber-300 | oklch(0.82 0.12 70) | — |
color.amber.700 | — | --todae-color-amber-700 | oklch(0.42 0.1 70) | — |
color.amber.900 | — | --todae-color-amber-900 | oklch(0.25 0.05 70) | — |
color.gray.50 | — | --todae-color-gray-50 | oklch(0.98 0.005 260) | — |
color.gray.100 | — | --todae-color-gray-100 | oklch(0.93 0.007 260) | — |
color.gray.200 | — | --todae-color-gray-200 | oklch(0.87 0.009 260) | — |
color.gray.300 | — | --todae-color-gray-300 | oklch(0.78 0.012 260) | — |
color.gray.400 | — | --todae-color-gray-400 | oklch(0.68 0.014 260) | — |
color.gray.500 | — | --todae-color-gray-500 | oklch(0.55 0.016 260) | — |
color.gray.600 | — | --todae-color-gray-600 | oklch(0.45 0.018 260) | — |
color.gray.700 | — | --todae-color-gray-700 | oklch(0.36 0.019 260) | — |
color.gray.800 | — | --todae-color-gray-800 | oklch(0.28 0.02 260) | — |
color.gray.900 | — | --todae-color-gray-900 | oklch(0.22 0.02 260) | — |
color.gray.950 | — | --todae-color-gray-950 | oklch(0.16 0.02 260) | — |
color.green.100 | — | --todae-color-green-100 | oklch(0.95 0.04 150) | — |
color.green.200 | — | --todae-color-green-200 | oklch(0.88 0.08 150) | — |
color.green.300 | — | --todae-color-green-300 | oklch(0.82 0.11 150) | — |
color.green.700 | — | --todae-color-green-700 | oklch(0.42 0.11 150) | — |
color.green.900 | — | --todae-color-green-900 | oklch(0.25 0.05 150) | — |
color.red.100 | — | --todae-color-red-100 | oklch(0.95 0.03 25) | — |
color.red.200 | — | --todae-color-red-200 | oklch(0.88 0.07 25) | — |
color.red.300 | — | --todae-color-red-300 | oklch(0.8 0.1 25) | — |
color.red.400 | — | --todae-color-red-400 | oklch(0.68 0.16 25) | — |
color.red.500 | — | --todae-color-red-500 | oklch(0.55 0.18 25) | — |
color.red.600 | — | --todae-color-red-600 | oklch(0.45 0.19 25) | — |
color.red.700 | — | --todae-color-red-700 | oklch(0.4 0.15 25) | — |
color.red.900 | — | --todae-color-red-900 | oklch(0.25 0.07 25) | — |
font.family.mono | — | --todae-font-family-mono | ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace | — |
font.family.sans | — | --todae-font-family-sans | ui-sans-serif, system-ui, "Segoe UI", "Roboto", sans-serif | — |
font.leading.default | — | --todae-font-leading-default | 1.5 | — |
font.leading.tight | — | --todae-font-leading-tight | 1.25 | — |
font.size.1 | — | --todae-font-size-1 | 0.75rem | — |
font.size.2 | — | --todae-font-size-2 | 0.875rem | — |
font.size.3 | — | --todae-font-size-3 | 1rem | — |
font.size.4 | — | --todae-font-size-4 | 1.25rem | — |
font.size.5 | — | --todae-font-size-5 | 1.5rem | — |
font.size.6 | — | --todae-font-size-6 | 1.875rem | — |
font.weight.bold | — | --todae-font-weight-bold | 700 | — |
font.weight.medium | — | --todae-font-weight-medium | 500 | — |
font.weight.regular | — | --todae-font-weight-regular | 400 | — |
motion.duration.fast | — | --todae-motion-duration-fast | 160ms | — |
motion.duration.moderate | — | --todae-motion-duration-moderate | 240ms | — |
motion.duration.normal | — | --todae-motion-duration-normal | 200ms | — |
motion.duration.slow | — | --todae-motion-duration-slow | 280ms | — |
motion.duration.slower | — | --todae-motion-duration-slower | 300ms | — |
motion.easing.standard | — | --todae-motion-easing-standard | cubic-bezier(0.2, 0.8, 0.2, 1) | — |
radius.full | — | --todae-radius-full | 9999px | — |
radius.lg | — | --todae-radius-lg | 0.75rem | — |
radius.md | — | --todae-radius-md | 0.5rem | — |
radius.sm | — | --todae-radius-sm | 0.25rem | — |
space.1 | — | --todae-space-1 | 0.25rem | — |
space.2 | — | --todae-space-2 | 0.5rem | — |
space.3 | — | --todae-space-3 | 0.75rem | — |
space.4 | — | --todae-space-4 | 1rem | — |
space.5 | — | --todae-space-5 | 1.25rem | — |
space.6 | — | --todae-space-6 | 1.5rem | — |
space.7 | — | --todae-space-7 | 1.75rem | — |
space.8 | — | --todae-space-8 | 2rem | — |
space.9 | — | --todae-space-9 | 2.25rem | — |
space.10 | — | --todae-space-10 | 2.5rem | — |
space.11 | — | --todae-space-11 | 2.75rem | — |
space.12 | — | --todae-space-12 | 3rem | — |
| 경로 | 컨텍스트 | CSS 변수 | 값 | 참조 |
|---|---|---|---|---|
color.accent.active | light | --todae-color-accent-active | var(--todae-color-gray-950) | color.gray.950 |
color.accent.default | light | --todae-color-accent-default | var(--todae-color-gray-900) | color.gray.900 |
color.accent.hover | light | --todae-color-accent-hover | var(--todae-color-gray-800) | color.gray.800 |
color.accent.soft | light | --todae-color-accent-soft | oklch(from var(--todae-color-accent-default) l c h / 0.12) | color.accent.default |
color.accent.soft-strong | light | --todae-color-accent-soft-strong | oklch(from var(--todae-color-accent-default) l c h / 0.28) | color.accent.default |
color.bg.canvas | light | --todae-color-bg-canvas | var(--todae-color-gray-50) | color.gray.50 |
color.bg.elevated | light | --todae-color-bg-elevated | var(--todae-color-gray-50) | color.gray.50 |
color.bg.highlight | light | --todae-color-bg-highlight | oklch(from var(--todae-color-fg-default) l c h / 0.08) | color.fg.default |
color.bg.pressed | light | --todae-color-bg-pressed | oklch(from var(--todae-color-fg-default) l c h / 0.14) | color.fg.default |
color.bg.scrim | light | --todae-color-bg-scrim | oklch(from var(--todae-color-gray-950) l c h / 0.45) | color.gray.950 |
color.bg.selected | light | --todae-color-bg-selected | oklch(from var(--todae-color-accent-default) l c h / 0.2) | color.accent.default |
color.bg.subtle | light | --todae-color-bg-subtle | var(--todae-color-gray-100) | color.gray.100 |
color.bg.surface | light | --todae-color-bg-surface | var(--todae-color-gray-50) | color.gray.50 |
color.bg.transparent | light | --todae-color-bg-transparent | oklch(from var(--todae-color-gray-50) l c h / 0) | color.gray.50 |
color.border.default | light | --todae-color-border-default | var(--todae-color-gray-900) | color.gray.900 |
color.border.subtle | light | --todae-color-border-subtle | var(--todae-color-gray-300) | color.gray.300 |
color.danger.default | light | --todae-color-danger-default | var(--todae-color-red-600) | color.red.600 |
color.fg.default | light | --todae-color-fg-default | var(--todae-color-gray-900) | color.gray.900 |
color.fg.muted | light | --todae-color-fg-muted | var(--todae-color-gray-600) | color.gray.600 |
color.fg.placeholder | light | --todae-color-fg-placeholder | var(--todae-color-gray-500) | color.gray.500 |
color.on-accent | light | --todae-color-on-accent | var(--todae-color-gray-50) | color.gray.50 |
color.status.critical.bg | light | --todae-color-status-critical-bg | var(--todae-color-red-100) | color.red.100 |
color.status.critical.border | light | --todae-color-status-critical-border | var(--todae-color-red-300) | color.red.300 |
color.status.critical.fg | light | --todae-color-status-critical-fg | var(--todae-color-red-700) | color.red.700 |
color.status.info.bg | light | --todae-color-status-info-bg | var(--todae-color-gray-100) | color.gray.100 |
color.status.info.border | light | --todae-color-status-info-border | var(--todae-color-gray-300) | color.gray.300 |
color.status.info.fg | light | --todae-color-status-info-fg | var(--todae-color-gray-700) | color.gray.700 |
color.status.success.bg | light | --todae-color-status-success-bg | var(--todae-color-green-100) | color.green.100 |
color.status.success.border | light | --todae-color-status-success-border | var(--todae-color-green-300) | color.green.300 |
color.status.success.fg | light | --todae-color-status-success-fg | var(--todae-color-green-700) | color.green.700 |
color.status.warning.bg | light | --todae-color-status-warning-bg | var(--todae-color-amber-100) | color.amber.100 |
color.status.warning.border | light | --todae-color-status-warning-border | var(--todae-color-amber-300) | color.amber.300 |
color.status.warning.fg | light | --todae-color-status-warning-fg | var(--todae-color-amber-700) | color.amber.700 |
color.accent.active | dark | --todae-color-accent-active | var(--todae-color-gray-200) | color.gray.200 |
color.accent.default | dark | --todae-color-accent-default | var(--todae-color-gray-50) | color.gray.50 |
color.accent.hover | dark | --todae-color-accent-hover | var(--todae-color-gray-100) | color.gray.100 |
color.accent.soft | dark | --todae-color-accent-soft | oklch(from var(--todae-color-accent-default) l c h / 0.12) | color.accent.default |
color.accent.soft-strong | dark | --todae-color-accent-soft-strong | oklch(from var(--todae-color-accent-default) l c h / 0.28) | color.accent.default |
color.bg.canvas | dark | --todae-color-bg-canvas | var(--todae-color-gray-900) | color.gray.900 |
color.bg.elevated | dark | --todae-color-bg-elevated | var(--todae-color-gray-800) | color.gray.800 |
color.bg.highlight | dark | --todae-color-bg-highlight | oklch(from var(--todae-color-fg-default) l c h / 0.1) | color.fg.default |
color.bg.pressed | dark | --todae-color-bg-pressed | oklch(from var(--todae-color-fg-default) l c h / 0.16) | color.fg.default |
color.bg.scrim | dark | --todae-color-bg-scrim | oklch(from var(--todae-color-gray-950) l c h / 0.7) | color.gray.950 |
color.bg.selected | dark | --todae-color-bg-selected | oklch(from var(--todae-color-accent-default) l c h / 0.2) | color.accent.default |
color.bg.subtle | dark | --todae-color-bg-subtle | var(--todae-color-gray-800) | color.gray.800 |
color.bg.surface | dark | --todae-color-bg-surface | var(--todae-color-gray-900) | color.gray.900 |
color.bg.transparent | dark | --todae-color-bg-transparent | oklch(from var(--todae-color-gray-900) l c h / 0) | color.gray.900 |
color.border.default | dark | --todae-color-border-default | var(--todae-color-gray-50) | color.gray.50 |
color.border.subtle | dark | --todae-color-border-subtle | var(--todae-color-gray-700) | color.gray.700 |
color.danger.default | dark | --todae-color-danger-default | var(--todae-color-red-300) | color.red.300 |
color.fg.default | dark | --todae-color-fg-default | var(--todae-color-gray-50) | color.gray.50 |
color.fg.muted | dark | --todae-color-fg-muted | var(--todae-color-gray-200) | color.gray.200 |
color.fg.placeholder | dark | --todae-color-fg-placeholder | var(--todae-color-gray-300) | color.gray.300 |
color.on-accent | dark | --todae-color-on-accent | var(--todae-color-gray-950) | color.gray.950 |
color.status.critical.bg | dark | --todae-color-status-critical-bg | var(--todae-color-red-900) | color.red.900 |
color.status.critical.border | dark | --todae-color-status-critical-border | var(--todae-color-red-700) | color.red.700 |
color.status.critical.fg | dark | --todae-color-status-critical-fg | var(--todae-color-red-200) | color.red.200 |
color.status.info.bg | dark | --todae-color-status-info-bg | var(--todae-color-gray-800) | color.gray.800 |
color.status.info.border | dark | --todae-color-status-info-border | var(--todae-color-gray-600) | color.gray.600 |
color.status.info.fg | dark | --todae-color-status-info-fg | var(--todae-color-gray-100) | color.gray.100 |
color.status.success.bg | dark | --todae-color-status-success-bg | var(--todae-color-green-900) | color.green.900 |
color.status.success.border | dark | --todae-color-status-success-border | var(--todae-color-green-700) | color.green.700 |
color.status.success.fg | dark | --todae-color-status-success-fg | var(--todae-color-green-200) | color.green.200 |
color.status.warning.bg | dark | --todae-color-status-warning-bg | var(--todae-color-amber-900) | color.amber.900 |
color.status.warning.border | dark | --todae-color-status-warning-border | var(--todae-color-amber-700) | color.amber.700 |
color.status.warning.fg | dark | --todae-color-status-warning-fg | var(--todae-color-amber-200) | color.amber.200 |
| 경로 | 컨텍스트 | CSS 변수 | 값 | 참조 |
|---|---|---|---|---|
space.chip.x | compact | --todae-space-chip-x | var(--todae-space-1) | space.1 |
space.chip.y | compact | --todae-space-chip-y | 0.125rem | — |
space.control.x | compact | --todae-space-control-x | var(--todae-space-2) | space.2 |
space.control.y | compact | --todae-space-control-y | var(--todae-space-1) | space.1 |
space.field.gap | compact | --todae-space-field-gap | var(--todae-space-1) | space.1 |
space.inline.gap | compact | --todae-space-inline-gap | var(--todae-space-1) | space.1 |
space.overlay.gap | compact | --todae-space-overlay-gap | var(--todae-space-2) | space.2 |
space.overlay.padding | compact | --todae-space-overlay-padding | var(--todae-space-4) | space.4 |
space.selection.gap | compact | --todae-space-selection-gap | var(--todae-space-2) | space.2 |
space.selection.size | compact | --todae-space-selection-size | var(--todae-space-4) | space.4 |
space.stack.gap | compact | --todae-space-stack-gap | var(--todae-space-2) | space.2 |
space.chip.x | comfortable | --todae-space-chip-x | var(--todae-space-2) | space.2 |
space.chip.y | comfortable | --todae-space-chip-y | var(--todae-space-1) | space.1 |
space.control.x | comfortable | --todae-space-control-x | var(--todae-space-3) | space.3 |
space.control.y | comfortable | --todae-space-control-y | var(--todae-space-2) | space.2 |
space.field.gap | comfortable | --todae-space-field-gap | var(--todae-space-2) | space.2 |
space.inline.gap | comfortable | --todae-space-inline-gap | var(--todae-space-2) | space.2 |
space.overlay.gap | comfortable | --todae-space-overlay-gap | var(--todae-space-3) | space.3 |
space.overlay.padding | comfortable | --todae-space-overlay-padding | var(--todae-space-5) | space.5 |
space.selection.gap | comfortable | --todae-space-selection-gap | var(--todae-space-2) | space.2 |
space.selection.size | comfortable | --todae-space-selection-size | var(--todae-space-5) | space.5 |
space.stack.gap | comfortable | --todae-space-stack-gap | var(--todae-space-3) | space.3 |
space.chip.x | spacious | --todae-space-chip-x | var(--todae-space-3) | space.3 |
space.chip.y | spacious | --todae-space-chip-y | var(--todae-space-1) | space.1 |
space.control.x | spacious | --todae-space-control-x | var(--todae-space-4) | space.4 |
space.control.y | spacious | --todae-space-control-y | var(--todae-space-3) | space.3 |
space.field.gap | spacious | --todae-space-field-gap | var(--todae-space-2) | space.2 |
space.inline.gap | spacious | --todae-space-inline-gap | var(--todae-space-3) | space.3 |
space.overlay.gap | spacious | --todae-space-overlay-gap | var(--todae-space-4) | space.4 |
space.overlay.padding | spacious | --todae-space-overlay-padding | var(--todae-space-6) | space.6 |
space.selection.gap | spacious | --todae-space-selection-gap | var(--todae-space-3) | space.3 |
space.selection.size | spacious | --todae-space-selection-size | var(--todae-space-6) | space.6 |
space.stack.gap | spacious | --todae-space-stack-gap | var(--todae-space-5) | space.5 |
| 경로 | 컨텍스트 | CSS 변수 | 값 | 참조 |
|---|---|---|---|---|
button.base.font.size | — | --todae-button-base-font-size | var(--todae-font-size-3) | font.size.3 |
button.base.font.weight | — | --todae-button-base-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
button.base.gap | — | --todae-button-base-gap | var(--todae-space-inline-gap) | space.inline.gap |
button.base.padding.x | — | --todae-button-base-padding-x | var(--todae-space-control-x) | space.control.x |
button.base.padding.y | — | --todae-button-base-padding-y | var(--todae-space-control-y) | space.control.y |
button.base.radius | — | --todae-button-base-radius | var(--todae-radius-md) | radius.md |
button.primary.bg.active | primary | --todae-button-primary-bg-active | var(--todae-color-accent-active) | color.accent.active |
button.primary.bg.default | primary | --todae-button-primary-bg-default | var(--todae-color-accent-default) | color.accent.default |
button.primary.bg.disabled | primary | --todae-button-primary-bg-disabled | var(--todae-color-bg-surface) | color.bg.surface |
button.primary.bg.focus | primary | --todae-button-primary-bg-focus | var(--todae-color-accent-default) | color.accent.default |
button.primary.bg.hover | primary | --todae-button-primary-bg-hover | var(--todae-color-accent-hover) | color.accent.hover |
button.primary.border.active | primary | --todae-button-primary-border-active | var(--todae-color-accent-active) | color.accent.active |
button.primary.border.default | primary | --todae-button-primary-border-default | var(--todae-color-accent-default) | color.accent.default |
button.primary.border.disabled | primary | --todae-button-primary-border-disabled | var(--todae-color-border-default) | color.border.default |
button.primary.border.focus | primary | --todae-button-primary-border-focus | var(--todae-color-accent-default) | color.accent.default |
button.primary.border.hover | primary | --todae-button-primary-border-hover | var(--todae-color-accent-hover) | color.accent.hover |
button.primary.fg.active | primary | --todae-button-primary-fg-active | var(--todae-color-on-accent) | color.on-accent |
button.primary.fg.default | primary | --todae-button-primary-fg-default | var(--todae-color-on-accent) | color.on-accent |
button.primary.fg.disabled | primary | --todae-button-primary-fg-disabled | var(--todae-color-fg-placeholder) | color.fg.placeholder |
button.primary.fg.focus | primary | --todae-button-primary-fg-focus | var(--todae-color-on-accent) | color.on-accent |
button.primary.fg.hover | primary | --todae-button-primary-fg-hover | var(--todae-color-on-accent) | color.on-accent |
button.primary.ring.focus | primary | --todae-button-primary-ring-focus | var(--todae-color-accent-default) | color.accent.default |
button.secondary.bg.active | secondary | --todae-button-secondary-bg-active | var(--todae-color-bg-pressed) | color.bg.pressed |
button.secondary.bg.default | secondary | --todae-button-secondary-bg-default | var(--todae-color-bg-transparent) | color.bg.transparent |
button.secondary.bg.disabled | secondary | --todae-button-secondary-bg-disabled | var(--todae-color-bg-transparent) | color.bg.transparent |
button.secondary.bg.focus | secondary | --todae-button-secondary-bg-focus | var(--todae-color-bg-transparent) | color.bg.transparent |
button.secondary.bg.hover | secondary | --todae-button-secondary-bg-hover | var(--todae-color-bg-highlight) | color.bg.highlight |
button.secondary.border.active | secondary | --todae-button-secondary-border-active | var(--todae-color-border-default) | color.border.default |
button.secondary.border.default | secondary | --todae-button-secondary-border-default | var(--todae-color-border-default) | color.border.default |
button.secondary.border.disabled | secondary | --todae-button-secondary-border-disabled | var(--todae-color-border-default) | color.border.default |
button.secondary.border.focus | secondary | --todae-button-secondary-border-focus | var(--todae-color-accent-default) | color.accent.default |
button.secondary.border.hover | secondary | --todae-button-secondary-border-hover | var(--todae-color-border-default) | color.border.default |
button.secondary.fg.active | secondary | --todae-button-secondary-fg-active | var(--todae-color-fg-default) | color.fg.default |
button.secondary.fg.default | secondary | --todae-button-secondary-fg-default | var(--todae-color-fg-default) | color.fg.default |
button.secondary.fg.disabled | secondary | --todae-button-secondary-fg-disabled | var(--todae-color-fg-placeholder) | color.fg.placeholder |
button.secondary.fg.focus | secondary | --todae-button-secondary-fg-focus | var(--todae-color-fg-default) | color.fg.default |
button.secondary.fg.hover | secondary | --todae-button-secondary-fg-hover | var(--todae-color-fg-default) | color.fg.default |
button.secondary.ring.focus | secondary | --todae-button-secondary-ring-focus | var(--todae-color-accent-default) | color.accent.default |
button.ghost.bg.active | ghost | --todae-button-ghost-bg-active | var(--todae-color-bg-pressed) | color.bg.pressed |
button.ghost.bg.default | ghost | --todae-button-ghost-bg-default | var(--todae-color-bg-transparent) | color.bg.transparent |
button.ghost.bg.disabled | ghost | --todae-button-ghost-bg-disabled | var(--todae-color-bg-transparent) | color.bg.transparent |
button.ghost.bg.focus | ghost | --todae-button-ghost-bg-focus | var(--todae-color-bg-transparent) | color.bg.transparent |
button.ghost.bg.hover | ghost | --todae-button-ghost-bg-hover | var(--todae-color-bg-highlight) | color.bg.highlight |
button.ghost.border.active | ghost | --todae-button-ghost-border-active | var(--todae-color-bg-transparent) | color.bg.transparent |
button.ghost.border.default | ghost | --todae-button-ghost-border-default | var(--todae-color-bg-transparent) | color.bg.transparent |
button.ghost.border.disabled | ghost | --todae-button-ghost-border-disabled | var(--todae-color-bg-transparent) | color.bg.transparent |
button.ghost.border.focus | ghost | --todae-button-ghost-border-focus | var(--todae-color-accent-default) | color.accent.default |
button.ghost.border.hover | ghost | --todae-button-ghost-border-hover | var(--todae-color-bg-transparent) | color.bg.transparent |
button.ghost.fg.active | ghost | --todae-button-ghost-fg-active | var(--todae-color-fg-default) | color.fg.default |
button.ghost.fg.default | ghost | --todae-button-ghost-fg-default | var(--todae-color-fg-default) | color.fg.default |
button.ghost.fg.disabled | ghost | --todae-button-ghost-fg-disabled | var(--todae-color-fg-placeholder) | color.fg.placeholder |
button.ghost.fg.focus | ghost | --todae-button-ghost-fg-focus | var(--todae-color-fg-default) | color.fg.default |
button.ghost.fg.hover | ghost | --todae-button-ghost-fg-hover | var(--todae-color-fg-default) | color.fg.default |
button.ghost.ring.focus | ghost | --todae-button-ghost-ring-focus | var(--todae-color-accent-default) | color.accent.default |
stack.gap | — | --todae-stack-gap | var(--todae-space-stack-gap) | space.stack.gap |
text.fg.accent | — | --todae-text-fg-accent | var(--todae-color-accent-default) | color.accent.default |
text.fg.default | — | --todae-text-fg-default | var(--todae-color-fg-default) | color.fg.default |
text.fg.muted | — | --todae-text-fg-muted | var(--todae-color-fg-muted) | color.fg.muted |
text.font.family | — | --todae-text-font-family | var(--todae-font-family-sans) | font.family.sans |
text.leading.default | — | --todae-text-leading-default | var(--todae-font-leading-default) | font.leading.default |
text.leading.tight | — | --todae-text-leading-tight | var(--todae-font-leading-tight) | font.leading.tight |
text.size.1 | — | --todae-text-size-1 | var(--todae-font-size-1) | font.size.1 |
text.size.2 | — | --todae-text-size-2 | var(--todae-font-size-2) | font.size.2 |
text.size.3 | — | --todae-text-size-3 | var(--todae-font-size-3) | font.size.3 |
text.size.4 | — | --todae-text-size-4 | var(--todae-font-size-4) | font.size.4 |
text.size.5 | — | --todae-text-size-5 | var(--todae-font-size-5) | font.size.5 |
text.size.6 | — | --todae-text-size-6 | var(--todae-font-size-6) | font.size.6 |
text.weight.bold | — | --todae-text-weight-bold | var(--todae-font-weight-bold) | font.weight.bold |
text.weight.medium | — | --todae-text-weight-medium | var(--todae-font-weight-medium) | font.weight.medium |
text.weight.regular | — | --todae-text-weight-regular | var(--todae-font-weight-regular) | font.weight.regular |
focus.ring.offset | — | --todae-focus-ring-offset | 2px | — |
focus.ring.width | — | --todae-focus-ring-width | 2px | — |
field.bg.default | — | --todae-field-bg-default | var(--todae-color-bg-surface) | color.bg.surface |
field.bg.disabled | — | --todae-field-bg-disabled | var(--todae-color-bg-subtle) | color.bg.subtle |
field.border.default | — | --todae-field-border-default | var(--todae-color-border-default) | color.border.default |
field.border.disabled | — | --todae-field-border-disabled | var(--todae-color-border-subtle) | color.border.subtle |
field.border.focus | — | --todae-field-border-focus | var(--todae-color-accent-default) | color.accent.default |
field.border.hover | — | --todae-field-border-hover | var(--todae-color-border-default) | color.border.default |
field.border.invalid | — | --todae-field-border-invalid | var(--todae-color-danger-default) | color.danger.default |
field.border-width | — | --todae-field-border-width | var(--todae-border-width) | border.width |
field.counter.emphasis.weight | — | --todae-field-counter-emphasis-weight | 600 | — |
field.description.fg | — | --todae-field-description-fg | var(--todae-color-fg-muted) | color.fg.muted |
field.description.font.size | — | --todae-field-description-font-size | var(--todae-font-size-2) | font.size.2 |
field.description.font.weight | — | --todae-field-description-font-weight | var(--todae-font-weight-regular) | font.weight.regular |
field.error.fg | — | --todae-field-error-fg | var(--todae-color-danger-default) | color.danger.default |
field.error.font.size | — | --todae-field-error-font-size | var(--todae-font-size-2) | font.size.2 |
field.error.font.weight | — | --todae-field-error-font-weight | var(--todae-font-weight-regular) | font.weight.regular |
field.fg.adornment | — | --todae-field-fg-adornment | var(--todae-color-fg-placeholder) | color.fg.placeholder |
field.fg.default | — | --todae-field-fg-default | var(--todae-color-fg-default) | color.fg.default |
field.fg.disabled | — | --todae-field-fg-disabled | var(--todae-color-fg-placeholder) | color.fg.placeholder |
field.fg.placeholder | — | --todae-field-fg-placeholder | var(--todae-color-fg-placeholder) | color.fg.placeholder |
field.font.size | — | --todae-field-font-size | var(--todae-font-size-3) | font.size.3 |
field.gap | — | --todae-field-gap | var(--todae-space-field-gap) | space.field.gap |
field.label.fg | — | --todae-field-label-fg | var(--todae-color-fg-default) | color.fg.default |
field.label.font.size | — | --todae-field-label-font-size | var(--todae-font-size-2) | font.size.2 |
field.label.font.weight | — | --todae-field-label-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
field.label.gap | — | --todae-field-label-gap | 0.4rem | — |
field.leading | — | --todae-field-leading | var(--todae-font-leading-default) | font.leading.default |
field.messages.gap | — | --todae-field-messages-gap | 0.2rem | — |
field.min-width | — | --todae-field-min-width | var(--todae-space-12) | space.12 |
field.padding.x | — | --todae-field-padding-x | var(--todae-space-control-x) | space.control.x |
field.padding.y | — | --todae-field-padding-y | var(--todae-space-control-y) | space.control.y |
field.picker.bg | — | --todae-field-picker-bg | var(--todae-popover-bg) | popover.bg |
field.picker.border | — | --todae-field-picker-border | var(--todae-popover-border) | popover.border |
field.picker.fg | — | --todae-field-picker-fg | var(--todae-popover-fg) | popover.fg |
field.picker.max-height | — | --todae-field-picker-max-height | var(--todae-popover-max-height) | popover.max-height |
field.picker.padding.x | — | --todae-field-picker-padding-x | var(--todae-popover-padding-x) | popover.padding.x |
field.picker.padding.y | — | --todae-field-picker-padding-y | var(--todae-popover-padding-y) | popover.padding.y |
field.picker.radius | — | --todae-field-picker-radius | var(--todae-popover-radius) | popover.radius |
field.radius | — | --todae-field-radius | var(--todae-radius-md) | radius.md |
field.ring.focus | — | --todae-field-ring-focus | var(--todae-color-accent-default) | color.accent.default |
field.ring.invalid | — | --todae-field-ring-invalid | var(--todae-color-danger-default) | color.danger.default |
field.row.control.size | — | --todae-field-row-control-size | 1.625rem | — |
chip.bg.default | — | --todae-chip-bg-default | var(--todae-color-bg-subtle) | color.bg.subtle |
chip.bg.disabled | — | --todae-chip-bg-disabled | var(--todae-color-bg-subtle) | color.bg.subtle |
chip.bg.focus | — | --todae-chip-bg-focus | var(--todae-color-bg-subtle) | color.bg.subtle |
chip.bg.hover | — | --todae-chip-bg-hover | var(--todae-color-bg-subtle) | color.bg.subtle |
chip.border.default | — | --todae-chip-border-default | var(--todae-color-border-subtle) | color.border.subtle |
chip.border.disabled | — | --todae-chip-border-disabled | var(--todae-color-border-subtle) | color.border.subtle |
chip.border.focus | — | --todae-chip-border-focus | var(--todae-color-accent-default) | color.accent.default |
chip.border.hover | — | --todae-chip-border-hover | var(--todae-color-border-default) | color.border.default |
chip.border-width | — | --todae-chip-border-width | var(--todae-border-width) | border.width |
chip.dismiss.fg.default | — | --todae-chip-dismiss-fg-default | var(--todae-color-fg-placeholder) | color.fg.placeholder |
chip.dismiss.fg.hover | — | --todae-chip-dismiss-fg-hover | var(--todae-color-fg-default) | color.fg.default |
chip.fg.default | — | --todae-chip-fg-default | var(--todae-color-fg-default) | color.fg.default |
chip.fg.disabled | — | --todae-chip-fg-disabled | var(--todae-color-fg-placeholder) | color.fg.placeholder |
chip.fg.focus | — | --todae-chip-fg-focus | var(--todae-color-fg-default) | color.fg.default |
chip.fg.hover | — | --todae-chip-fg-hover | var(--todae-color-fg-default) | color.fg.default |
chip.font.size | — | --todae-chip-font-size | var(--todae-font-size-2) | font.size.2 |
chip.gap | — | --todae-chip-gap | var(--todae-space-inline-gap) | space.inline.gap |
chip.leading | — | --todae-chip-leading | var(--todae-font-leading-tight) | font.leading.tight |
chip.padding.x | — | --todae-chip-padding-x | var(--todae-space-chip-x) | space.chip.x |
chip.padding.y | — | --todae-chip-padding-y | var(--todae-space-chip-y) | space.chip.y |
chip.radius | — | --todae-chip-radius | var(--todae-radius-sm) | radius.sm |
chip.ring.focus | — | --todae-chip-ring-focus | var(--todae-color-accent-default) | color.accent.default |
chip.ring-offset | — | --todae-chip-ring-offset | var(--todae-focus-ring-offset) | focus.ring.offset |
chip.ring-width | — | --todae-chip-ring-width | var(--todae-focus-ring-width) | focus.ring.width |
overlay.motion.easing | — | --todae-overlay-motion-easing | var(--todae-motion-easing-standard) | motion.easing.standard |
overlay.scrim.bg | — | --todae-overlay-scrim-bg | var(--todae-color-bg-scrim) | color.bg.scrim |
dialog.bg | — | --todae-dialog-bg | var(--todae-color-bg-elevated) | color.bg.elevated |
dialog.border | — | --todae-dialog-border | var(--todae-color-border-default) | color.border.default |
dialog.border-width | — | --todae-dialog-border-width | var(--todae-border-width) | border.width |
dialog.fg | — | --todae-dialog-fg | var(--todae-color-fg-default) | color.fg.default |
dialog.gap | — | --todae-dialog-gap | var(--todae-space-overlay-gap) | space.overlay.gap |
dialog.max-width | — | --todae-dialog-max-width | 32rem | — |
dialog.motion.enter | — | --todae-dialog-motion-enter | var(--todae-motion-duration-normal) | motion.duration.normal |
dialog.motion.exit | — | --todae-dialog-motion-exit | var(--todae-motion-duration-fast) | motion.duration.fast |
dialog.padding.x | — | --todae-dialog-padding-x | var(--todae-space-overlay-padding) | space.overlay.padding |
dialog.padding.y | — | --todae-dialog-padding-y | var(--todae-space-overlay-padding) | space.overlay.padding |
dialog.radius | — | --todae-dialog-radius | var(--todae-radius-lg) | radius.lg |
dialog.title.font.size | — | --todae-dialog-title-font-size | var(--todae-font-size-4) | font.size.4 |
dialog.title.font.weight | — | --todae-dialog-title-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
sheet.bg | — | --todae-sheet-bg | var(--todae-color-bg-elevated) | color.bg.elevated |
sheet.border | — | --todae-sheet-border | var(--todae-color-border-default) | color.border.default |
sheet.border-width | — | --todae-sheet-border-width | var(--todae-border-width) | border.width |
sheet.fg | — | --todae-sheet-fg | var(--todae-color-fg-default) | color.fg.default |
sheet.gap | — | --todae-sheet-gap | var(--todae-space-overlay-gap) | space.overlay.gap |
sheet.grabber.bg | — | --todae-sheet-grabber-bg | var(--todae-color-border-subtle) | color.border.subtle |
sheet.grabber.height | — | --todae-sheet-grabber-height | var(--todae-space-1) | space.1 |
sheet.grabber.radius | — | --todae-sheet-grabber-radius | var(--todae-radius-full) | radius.full |
sheet.grabber.width | — | --todae-sheet-grabber-width | var(--todae-space-9) | space.9 |
sheet.handle.hit | — | --todae-sheet-handle-hit | var(--todae-space-11) | space.11 |
sheet.motion.enter | — | --todae-sheet-motion-enter | var(--todae-motion-duration-slow) | motion.duration.slow |
sheet.motion.exit | — | --todae-sheet-motion-exit | var(--todae-motion-duration-moderate) | motion.duration.moderate |
sheet.motion.resize | — | --todae-sheet-motion-resize | var(--todae-motion-duration-slower) | motion.duration.slower |
sheet.padding.x | — | --todae-sheet-padding-x | var(--todae-space-overlay-padding) | space.overlay.padding |
sheet.padding.y | — | --todae-sheet-padding-y | var(--todae-space-overlay-padding) | space.overlay.padding |
sheet.radius | — | --todae-sheet-radius | var(--todae-radius-lg) | radius.lg |
sheet.ring.focus | — | --todae-sheet-ring-focus | var(--todae-color-accent-default) | color.accent.default |
sheet.snap.full-inset | — | --todae-sheet-snap-full-inset | var(--todae-space-6) | space.6 |
sheet.snap.mid | — | --todae-sheet-snap-mid | 0.5 | — |
sheet.title.font.size | — | --todae-sheet-title-font-size | var(--todae-dialog-title-font-size) | dialog.title.font.size |
sheet.title.font.weight | — | --todae-sheet-title-font-weight | var(--todae-dialog-title-font-weight) | dialog.title.font.weight |
popover.bg | — | --todae-popover-bg | var(--todae-color-bg-elevated) | color.bg.elevated |
popover.border | — | --todae-popover-border | var(--todae-color-border-default) | color.border.default |
popover.border-width | — | --todae-popover-border-width | var(--todae-border-width) | border.width |
popover.fg | — | --todae-popover-fg | var(--todae-color-fg-default) | color.fg.default |
popover.gap | — | --todae-popover-gap | var(--todae-space-overlay-gap) | space.overlay.gap |
popover.max-height | — | --todae-popover-max-height | 20rem | — |
popover.padding.x | — | --todae-popover-padding-x | var(--todae-space-overlay-padding) | space.overlay.padding |
popover.padding.y | — | --todae-popover-padding-y | var(--todae-space-overlay-padding) | space.overlay.padding |
popover.radius | — | --todae-popover-radius | var(--todae-radius-md) | radius.md |
tooltip.bg | — | --todae-tooltip-bg | var(--todae-color-bg-elevated) | color.bg.elevated |
tooltip.border | — | --todae-tooltip-border | var(--todae-color-border-default) | color.border.default |
tooltip.border-width | — | --todae-tooltip-border-width | var(--todae-border-width) | border.width |
tooltip.fg | — | --todae-tooltip-fg | var(--todae-color-fg-default) | color.fg.default |
tooltip.max-width | — | --todae-tooltip-max-width | 16rem | — |
tooltip.padding.x | — | --todae-tooltip-padding-x | var(--todae-space-2) | space.2 |
tooltip.padding.y | — | --todae-tooltip-padding-y | var(--todae-space-1) | space.1 |
tooltip.radius | — | --todae-tooltip-radius | var(--todae-radius-sm) | radius.sm |
option.bg.default | — | --todae-option-bg-default | var(--todae-color-bg-transparent) | color.bg.transparent |
option.bg.hover | — | --todae-option-bg-hover | var(--todae-color-bg-highlight) | color.bg.highlight |
option.bg.selected | — | --todae-option-bg-selected | var(--todae-color-bg-selected) | color.bg.selected |
option.bg.selected-highlighted | — | --todae-option-bg-selected-highlighted | var(--todae-color-accent-soft-strong) | color.accent.soft-strong |
option.check.border | — | --todae-option-check-border | var(--todae-color-border-default) | color.border.default |
option.check.border-width | — | --todae-option-check-border-width | var(--todae-border-width) | border.width |
option.check.fg | — | --todae-option-check-fg | var(--todae-color-fg-default) | color.fg.default |
option.fg.default | — | --todae-option-fg-default | var(--todae-color-fg-default) | color.fg.default |
option.fg.disabled | — | --todae-option-fg-disabled | var(--todae-color-fg-placeholder) | color.fg.placeholder |
option.fg.selected | — | --todae-option-fg-selected | var(--todae-color-fg-default) | color.fg.default |
option.font.size | — | --todae-option-font-size | var(--todae-font-size-2) | font.size.2 |
option.font.weight | — | --todae-option-font-weight | var(--todae-font-weight-regular) | font.weight.regular |
option.leading | — | --todae-option-leading | var(--todae-font-leading-tight) | font.leading.tight |
option.padding.x | — | --todae-option-padding-x | var(--todae-space-control-x) | space.control.x |
option.padding.y | — | --todae-option-padding-y | var(--todae-space-control-y) | space.control.y |
option.radius | — | --todae-option-radius | var(--todae-radius-sm) | radius.sm |
option.ring.focus | — | --todae-option-ring-focus | var(--todae-color-accent-default) | color.accent.default |
menu.gap | — | --todae-menu-gap | 2px | — |
menu.item.bg.default | — | --todae-menu-item-bg-default | var(--todae-color-bg-transparent) | color.bg.transparent |
menu.item.bg.highlight | — | --todae-menu-item-bg-highlight | var(--todae-color-bg-highlight) | color.bg.highlight |
menu.item.check.fg | — | --todae-menu-item-check-fg | var(--todae-color-fg-default) | color.fg.default |
menu.item.fg.default | — | --todae-menu-item-fg-default | var(--todae-color-fg-default) | color.fg.default |
menu.item.fg.disabled | — | --todae-menu-item-fg-disabled | var(--todae-color-fg-placeholder) | color.fg.placeholder |
menu.item.font.size | — | --todae-menu-item-font-size | var(--todae-font-size-2) | font.size.2 |
menu.item.font.weight | — | --todae-menu-item-font-weight | var(--todae-font-weight-regular) | font.weight.regular |
menu.item.leading | — | --todae-menu-item-leading | var(--todae-font-leading-tight) | font.leading.tight |
menu.item.padding.x | — | --todae-menu-item-padding-x | var(--todae-space-control-x) | space.control.x |
menu.item.padding.y | — | --todae-menu-item-padding-y | var(--todae-space-control-y) | space.control.y |
menu.item.radius | — | --todae-menu-item-radius | var(--todae-radius-sm) | radius.sm |
menu.item.ring.focus | — | --todae-menu-item-ring-focus | var(--todae-color-accent-default) | color.accent.default |
menu.separator | — | --todae-menu-separator | var(--todae-color-border-subtle) | color.border.subtle |
tabs.bg.default | — | --todae-tabs-bg-default | var(--todae-color-bg-transparent) | color.bg.transparent |
tabs.bg.hover | — | --todae-tabs-bg-hover | var(--todae-color-bg-highlight) | color.bg.highlight |
tabs.border | — | --todae-tabs-border | var(--todae-color-border-subtle) | color.border.subtle |
tabs.border-width | — | --todae-tabs-border-width | var(--todae-border-width) | border.width |
tabs.fg.default | — | --todae-tabs-fg-default | var(--todae-color-fg-muted) | color.fg.muted |
tabs.fg.disabled | — | --todae-tabs-fg-disabled | var(--todae-color-fg-placeholder) | color.fg.placeholder |
tabs.fg.hover | — | --todae-tabs-fg-hover | var(--todae-color-fg-default) | color.fg.default |
tabs.fg.selected | — | --todae-tabs-fg-selected | var(--todae-color-fg-default) | color.fg.default |
tabs.font.size | — | --todae-tabs-font-size | var(--todae-font-size-2) | font.size.2 |
tabs.font.weight | — | --todae-tabs-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
tabs.gap | — | --todae-tabs-gap | var(--todae-space-inline-gap) | space.inline.gap |
tabs.indicator.color | — | --todae-tabs-indicator-color | var(--todae-color-accent-default) | color.accent.default |
tabs.indicator.size | — | --todae-tabs-indicator-size | 2px | — |
tabs.leading | — | --todae-tabs-leading | var(--todae-font-leading-tight) | font.leading.tight |
tabs.padding.x | — | --todae-tabs-padding-x | var(--todae-space-control-x) | space.control.x |
tabs.padding.y | — | --todae-tabs-padding-y | var(--todae-space-control-y) | space.control.y |
tabs.radius | — | --todae-tabs-radius | var(--todae-radius-sm) | radius.sm |
tabs.ring.focus | — | --todae-tabs-ring-focus | var(--todae-color-accent-default) | color.accent.default |
selection.bg.checked | — | --todae-selection-bg-checked | var(--todae-color-accent-default) | color.accent.default |
selection.bg.default | — | --todae-selection-bg-default | var(--todae-color-bg-surface) | color.bg.surface |
selection.bg.disabled | — | --todae-selection-bg-disabled | var(--todae-color-bg-subtle) | color.bg.subtle |
selection.border.checked | — | --todae-selection-border-checked | var(--todae-color-accent-default) | color.accent.default |
selection.border.default | — | --todae-selection-border-default | var(--todae-color-border-default) | color.border.default |
selection.border.disabled | — | --todae-selection-border-disabled | var(--todae-color-border-subtle) | color.border.subtle |
selection.border.invalid | — | --todae-selection-border-invalid | var(--todae-color-danger-default) | color.danger.default |
selection.border-width | — | --todae-selection-border-width | var(--todae-border-width) | border.width |
selection.fg.default | — | --todae-selection-fg-default | var(--todae-color-fg-default) | color.fg.default |
selection.fg.disabled | — | --todae-selection-fg-disabled | var(--todae-color-fg-placeholder) | color.fg.placeholder |
selection.font.size | — | --todae-selection-font-size | var(--todae-font-size-2) | font.size.2 |
selection.font.weight | — | --todae-selection-font-weight | var(--todae-font-weight-regular) | font.weight.regular |
selection.gap | — | --todae-selection-gap | var(--todae-space-selection-gap) | space.selection.gap |
selection.indicator.fg | — | --todae-selection-indicator-fg | var(--todae-color-on-accent) | color.on-accent |
selection.radius | — | --todae-selection-radius | var(--todae-radius-sm) | radius.sm |
selection.ring.focus | — | --todae-selection-ring-focus | var(--todae-color-accent-default) | color.accent.default |
selection.ring.invalid | — | --todae-selection-ring-invalid | var(--todae-color-danger-default) | color.danger.default |
selection.size | — | --todae-selection-size | var(--todae-space-selection-size) | space.selection.size |
selection.thumb.bg | — | --todae-selection-thumb-bg | var(--todae-color-bg-surface) | color.bg.surface |
selection.track.bg | — | --todae-selection-track-bg | var(--todae-color-bg-subtle) | color.bg.subtle |
alert.border-width | — | --todae-alert-border-width | var(--todae-border-width) | border.width |
alert.critical.bg | — | --todae-alert-critical-bg | var(--todae-color-status-critical-bg) | color.status.critical.bg |
alert.critical.border | — | --todae-alert-critical-border | var(--todae-color-status-critical-border) | color.status.critical.border |
alert.critical.fg | — | --todae-alert-critical-fg | var(--todae-color-status-critical-fg) | color.status.critical.fg |
alert.font.size | — | --todae-alert-font-size | var(--todae-font-size-2) | font.size.2 |
alert.gap | — | --todae-alert-gap | var(--todae-space-inline-gap) | space.inline.gap |
alert.info.bg | — | --todae-alert-info-bg | var(--todae-color-status-info-bg) | color.status.info.bg |
alert.info.border | — | --todae-alert-info-border | var(--todae-color-status-info-border) | color.status.info.border |
alert.info.fg | — | --todae-alert-info-fg | var(--todae-color-status-info-fg) | color.status.info.fg |
alert.leading | — | --todae-alert-leading | var(--todae-font-leading-default) | font.leading.default |
alert.padding.x | — | --todae-alert-padding-x | var(--todae-space-control-x) | space.control.x |
alert.padding.y | — | --todae-alert-padding-y | var(--todae-space-control-x) | space.control.x |
alert.radius | — | --todae-alert-radius | var(--todae-radius-md) | radius.md |
alert.success.bg | — | --todae-alert-success-bg | var(--todae-color-status-success-bg) | color.status.success.bg |
alert.success.border | — | --todae-alert-success-border | var(--todae-color-status-success-border) | color.status.success.border |
alert.success.fg | — | --todae-alert-success-fg | var(--todae-color-status-success-fg) | color.status.success.fg |
alert.title.font.weight | — | --todae-alert-title-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
alert.warning.bg | — | --todae-alert-warning-bg | var(--todae-color-status-warning-bg) | color.status.warning.bg |
alert.warning.border | — | --todae-alert-warning-border | var(--todae-color-status-warning-border) | color.status.warning.border |
alert.warning.fg | — | --todae-alert-warning-fg | var(--todae-color-status-warning-fg) | color.status.warning.fg |
toast.border-width | — | --todae-toast-border-width | var(--todae-border-width) | border.width |
toast.critical.bg | — | --todae-toast-critical-bg | var(--todae-color-status-critical-bg) | color.status.critical.bg |
toast.critical.border | — | --todae-toast-critical-border | var(--todae-color-status-critical-border) | color.status.critical.border |
toast.critical.fg | — | --todae-toast-critical-fg | var(--todae-color-status-critical-fg) | color.status.critical.fg |
toast.font.size | — | --todae-toast-font-size | var(--todae-font-size-2) | font.size.2 |
toast.gap | — | --todae-toast-gap | var(--todae-space-inline-gap) | space.inline.gap |
toast.info.bg | — | --todae-toast-info-bg | var(--todae-color-status-info-bg) | color.status.info.bg |
toast.info.border | — | --todae-toast-info-border | var(--todae-color-status-info-border) | color.status.info.border |
toast.info.fg | — | --todae-toast-info-fg | var(--todae-color-status-info-fg) | color.status.info.fg |
toast.inset | — | --todae-toast-inset | var(--todae-space-overlay-padding) | space.overlay.padding |
toast.leading | — | --todae-toast-leading | var(--todae-font-leading-default) | font.leading.default |
toast.motion.enter | — | --todae-toast-motion-enter | var(--todae-motion-duration-normal) | motion.duration.normal |
toast.motion.exit | — | --todae-toast-motion-exit | var(--todae-motion-duration-fast) | motion.duration.fast |
toast.padding.x | — | --todae-toast-padding-x | var(--todae-space-control-x) | space.control.x |
toast.padding.y | — | --todae-toast-padding-y | var(--todae-space-control-x) | space.control.x |
toast.peek | — | --todae-toast-peek | var(--todae-space-2) | space.2 |
toast.radius | — | --todae-toast-radius | var(--todae-radius-md) | radius.md |
toast.ring.focus | — | --todae-toast-ring-focus | var(--todae-color-accent-default) | color.accent.default |
toast.stack-gap | — | --todae-toast-stack-gap | var(--todae-space-2) | space.2 |
toast.success.bg | — | --todae-toast-success-bg | var(--todae-color-status-success-bg) | color.status.success.bg |
toast.success.border | — | --todae-toast-success-border | var(--todae-color-status-success-border) | color.status.success.border |
toast.success.fg | — | --todae-toast-success-fg | var(--todae-color-status-success-fg) | color.status.success.fg |
toast.title.font.weight | — | --todae-toast-title-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
toast.warning.bg | — | --todae-toast-warning-bg | var(--todae-color-status-warning-bg) | color.status.warning.bg |
toast.warning.border | — | --todae-toast-warning-border | var(--todae-color-status-warning-border) | color.status.warning.border |
toast.warning.fg | — | --todae-toast-warning-fg | var(--todae-color-status-warning-fg) | color.status.warning.fg |
toast.width | — | --todae-toast-width | 22rem | — |
fieldset.gap | — | --todae-fieldset-gap | var(--todae-space-field-gap) | space.field.gap |
fieldset.legend.fg | — | --todae-fieldset-legend-fg | var(--todae-color-fg-default) | color.fg.default |
fieldset.legend.font.size | — | --todae-fieldset-legend-font-size | var(--todae-font-size-2) | font.size.2 |
fieldset.legend.font.weight | — | --todae-fieldset-legend-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
fieldset.legend.gap | — | --todae-fieldset-legend-gap | var(--todae-space-field-gap) | space.field.gap |
link.decoration.current | — | --todae-link-decoration-current | var(--todae-color-fg-default) | color.fg.default |
link.decoration.current-thickness | — | --todae-link-decoration-current-thickness | 2px | — |
link.decoration.default | — | --todae-link-decoration-default | var(--todae-color-fg-muted) | color.fg.muted |
link.decoration.hover | — | --todae-link-decoration-hover | var(--todae-color-fg-default) | color.fg.default |
link.decoration.offset | — | --todae-link-decoration-offset | 3px | — |
link.decoration.thickness | — | --todae-link-decoration-thickness | 1px | — |
link.fg.current | — | --todae-link-fg-current | var(--todae-color-fg-default) | color.fg.default |
link.fg.default | — | --todae-link-fg-default | var(--todae-color-fg-default) | color.fg.default |
link.fg.hover | — | --todae-link-fg-hover | var(--todae-color-fg-default) | color.fg.default |
link.ring.focus | — | --todae-link-ring-focus | var(--todae-color-accent-default) | color.accent.default |
disclosure.border | — | --todae-disclosure-border | var(--todae-color-border-subtle) | color.border.subtle |
disclosure.border-width | — | --todae-disclosure-border-width | var(--todae-border-width) | border.width |
disclosure.gap | — | --todae-disclosure-gap | var(--todae-space-inline-gap) | space.inline.gap |
disclosure.marker.fg | — | --todae-disclosure-marker-fg | var(--todae-color-fg-muted) | color.fg.muted |
disclosure.motion.duration | — | --todae-disclosure-motion-duration | var(--todae-motion-duration-normal) | motion.duration.normal |
disclosure.motion.easing | — | --todae-disclosure-motion-easing | var(--todae-motion-easing-standard) | motion.easing.standard |
disclosure.padding.y | — | --todae-disclosure-padding-y | var(--todae-space-control-y) | space.control.y |
disclosure.ring.focus | — | --todae-disclosure-ring-focus | var(--todae-color-accent-default) | color.accent.default |
disclosure.summary.fg | — | --todae-disclosure-summary-fg | var(--todae-color-fg-default) | color.fg.default |
disclosure.summary.font.weight | — | --todae-disclosure-summary-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
separator.color | — | --todae-separator-color | var(--todae-color-border-subtle) | color.border.subtle |
separator.space | — | --todae-separator-space | var(--todae-space-stack-gap) | space.stack.gap |
separator.thickness | — | --todae-separator-thickness | 1px | — |
table.border | — | --todae-table-border | var(--todae-color-border-subtle) | color.border.subtle |
table.caption.fg | — | --todae-table-caption-fg | var(--todae-color-fg-muted) | color.fg.muted |
table.cell.padding.x | — | --todae-table-cell-padding-x | var(--todae-space-control-x) | space.control.x |
table.cell.padding.y | — | --todae-table-cell-padding-y | var(--todae-space-control-y) | space.control.y |
table.fg | — | --todae-table-fg | var(--todae-color-fg-default) | color.fg.default |
table.header.border | — | --todae-table-header-border | var(--todae-color-border-default) | color.border.default |
table.header.fg | — | --todae-table-header-fg | var(--todae-color-fg-default) | color.fg.default |
table.header.font.weight | — | --todae-table-header-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
table.rule.thickness | — | --todae-table-rule-thickness | 1px | — |
meter.fill.critical | — | --todae-meter-fill-critical | var(--todae-color-status-critical-fg) | color.status.critical.fg |
meter.fill.optimum | — | --todae-meter-fill-optimum | var(--todae-color-status-success-fg) | color.status.success.fg |
meter.fill.suboptimum | — | --todae-meter-fill-suboptimum | var(--todae-color-status-warning-fg) | color.status.warning.fg |
progress.fill | — | --todae-progress-fill | var(--todae-color-accent-default) | color.accent.default |
progress.height | — | --todae-progress-height | 0.5rem | — |
progress.motion.duration | — | --todae-progress-motion-duration | 1200ms | — |
progress.radius | — | --todae-progress-radius | var(--todae-radius-sm) | radius.sm |
progress.track | — | --todae-progress-track | var(--todae-color-border-subtle) | color.border.subtle |
slider.fill | — | --todae-slider-fill | var(--todae-color-accent-default) | color.accent.default |
slider.ring.focus | — | --todae-slider-ring-focus | var(--todae-color-accent-default) | color.accent.default |
badge.border-width | — | --todae-badge-border-width | var(--todae-border-width) | border.width |
badge.critical.bg | — | --todae-badge-critical-bg | var(--todae-color-status-critical-bg) | color.status.critical.bg |
badge.critical.border | — | --todae-badge-critical-border | var(--todae-color-status-critical-border) | color.status.critical.border |
badge.critical.fg | — | --todae-badge-critical-fg | var(--todae-color-status-critical-fg) | color.status.critical.fg |
badge.font.size | — | --todae-badge-font-size | var(--todae-font-size-1) | font.size.1 |
badge.font.weight | — | --todae-badge-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
badge.info.bg | — | --todae-badge-info-bg | var(--todae-color-status-info-bg) | color.status.info.bg |
badge.info.border | — | --todae-badge-info-border | var(--todae-color-status-info-border) | color.status.info.border |
badge.info.fg | — | --todae-badge-info-fg | var(--todae-color-status-info-fg) | color.status.info.fg |
badge.leading | — | --todae-badge-leading | var(--todae-font-leading-tight) | font.leading.tight |
badge.neutral.bg | — | --todae-badge-neutral-bg | var(--todae-color-bg-subtle) | color.bg.subtle |
badge.neutral.border | — | --todae-badge-neutral-border | var(--todae-color-border-subtle) | color.border.subtle |
badge.neutral.fg | — | --todae-badge-neutral-fg | var(--todae-color-fg-default) | color.fg.default |
badge.padding.x | — | --todae-badge-padding-x | var(--todae-space-chip-x) | space.chip.x |
badge.padding.y | — | --todae-badge-padding-y | var(--todae-space-chip-y) | space.chip.y |
badge.radius | — | --todae-badge-radius | var(--todae-radius-sm) | radius.sm |
badge.success.bg | — | --todae-badge-success-bg | var(--todae-color-status-success-bg) | color.status.success.bg |
badge.success.border | — | --todae-badge-success-border | var(--todae-color-status-success-border) | color.status.success.border |
badge.success.fg | — | --todae-badge-success-fg | var(--todae-color-status-success-fg) | color.status.success.fg |
badge.warning.bg | — | --todae-badge-warning-bg | var(--todae-color-status-warning-bg) | color.status.warning.bg |
badge.warning.border | — | --todae-badge-warning-border | var(--todae-color-status-warning-border) | color.status.warning.border |
badge.warning.fg | — | --todae-badge-warning-fg | var(--todae-color-status-warning-fg) | color.status.warning.fg |
card.bg | — | --todae-card-bg | var(--todae-color-bg-surface) | color.bg.surface |
card.border | — | --todae-card-border | var(--todae-color-border-subtle) | color.border.subtle |
card.border-width | — | --todae-card-border-width | var(--todae-border-width) | border.width |
card.fg | — | --todae-card-fg | var(--todae-color-fg-default) | color.fg.default |
card.gap | — | --todae-card-gap | var(--todae-space-overlay-gap) | space.overlay.gap |
card.padding | — | --todae-card-padding | var(--todae-space-overlay-padding) | space.overlay.padding |
card.radius | — | --todae-card-radius | var(--todae-radius-lg) | radius.lg |
breadcrumbs.current.fg | — | --todae-breadcrumbs-current-fg | var(--todae-color-fg-default) | color.fg.default |
breadcrumbs.current.font.weight | — | --todae-breadcrumbs-current-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
breadcrumbs.font.size | — | --todae-breadcrumbs-font-size | var(--todae-font-size-2) | font.size.2 |
breadcrumbs.gap | — | --todae-breadcrumbs-gap | var(--todae-space-inline-gap) | space.inline.gap |
breadcrumbs.separator.fg | — | --todae-breadcrumbs-separator-fg | var(--todae-color-fg-muted) | color.fg.muted |
toolbar.gap | — | --todae-toolbar-gap | var(--todae-space-inline-gap) | space.inline.gap |
toolbar.separator.color | — | --todae-toolbar-separator-color | var(--todae-color-border-subtle) | color.border.subtle |
toolbar.separator.thickness | — | --todae-toolbar-separator-thickness | 1px | — |
drawer.bg | — | --todae-drawer-bg | var(--todae-color-bg-elevated) | color.bg.elevated |
drawer.border | — | --todae-drawer-border | var(--todae-color-border-default) | color.border.default |
drawer.border-width | — | --todae-drawer-border-width | var(--todae-border-width) | border.width |
drawer.fg | — | --todae-drawer-fg | var(--todae-color-fg-default) | color.fg.default |
drawer.gap | — | --todae-drawer-gap | var(--todae-dialog-gap) | dialog.gap |
drawer.motion.enter | — | --todae-drawer-motion-enter | var(--todae-motion-duration-slow) | motion.duration.slow |
drawer.motion.exit | — | --todae-drawer-motion-exit | var(--todae-motion-duration-moderate) | motion.duration.moderate |
drawer.padding.x | — | --todae-drawer-padding-x | var(--todae-space-overlay-padding) | space.overlay.padding |
drawer.padding.y | — | --todae-drawer-padding-y | var(--todae-space-overlay-padding) | space.overlay.padding |
drawer.size | — | --todae-drawer-size | 24rem | — |
spinner.motion.duration | — | --todae-spinner-motion-duration | 800ms | — |
spinner.size | — | --todae-spinner-size | 1.25rem | — |
spinner.thickness | — | --todae-spinner-thickness | 2px | — |
spinner.track-tint | — | --todae-spinner-track-tint | 0.2 | — |
skeleton.bg | — | --todae-skeleton-bg | var(--todae-color-bg-subtle) | color.bg.subtle |
skeleton.motion.duration | — | --todae-skeleton-motion-duration | 1600ms | — |
skeleton.radius | — | --todae-skeleton-radius | var(--todae-radius-sm) | radius.sm |
code.block.bg | — | --todae-code-block-bg | var(--todae-color-bg-subtle) | color.bg.subtle |
code.block.fg | — | --todae-code-block-fg | var(--todae-color-fg-default) | color.fg.default |
code.block.leading | — | --todae-code-block-leading | var(--todae-font-leading-default) | font.leading.default |
code.block.padding | — | --todae-code-block-padding | var(--todae-space-overlay-padding) | space.overlay.padding |
code.block.radius | — | --todae-code-block-radius | var(--todae-radius-md) | radius.md |
code.font.family | — | --todae-code-font-family | var(--todae-font-family-mono) | font.family.mono |
code.font.scale | — | --todae-code-font-scale | 0.875 | — |
code.padding.x | — | --todae-code-padding-x | 0.25rem | — |
code.padding.y | — | --todae-code-padding-y | 0.0625rem | — |
code.radius | — | --todae-code-radius | var(--todae-radius-sm) | radius.sm |
code.tint | — | --todae-code-tint | 0.1 | — |
kbd.bg | — | --todae-kbd-bg | var(--todae-color-bg-surface) | color.bg.surface |
kbd.border | — | --todae-kbd-border | var(--todae-color-border-default) | color.border.default |
kbd.border-width | — | --todae-kbd-border-width | var(--todae-border-width) | border.width |
kbd.fg | — | --todae-kbd-fg | var(--todae-color-fg-default) | color.fg.default |
kbd.font.family | — | --todae-kbd-font-family | var(--todae-font-family-mono) | font.family.mono |
kbd.font.scale | — | --todae-kbd-font-scale | 0.8125 | — |
kbd.padding.x | — | --todae-kbd-padding-x | 0.375rem | — |
kbd.padding.y | — | --todae-kbd-padding-y | 0.0625rem | — |
kbd.radius | — | --todae-kbd-radius | var(--todae-radius-sm) | radius.sm |
avatar.bg | — | --todae-avatar-bg | var(--todae-color-bg-subtle) | color.bg.subtle |
avatar.fg | — | --todae-avatar-fg | var(--todae-color-fg-default) | color.fg.default |
avatar.font.scale | — | --todae-avatar-font-scale | 0.4 | — |
avatar.font.weight | — | --todae-avatar-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
avatar.radius | — | --todae-avatar-radius | var(--todae-radius-full) | radius.full |
avatar.size.lg | — | --todae-avatar-size-lg | 2.5rem | — |
avatar.size.md | — | --todae-avatar-size-md | 2rem | — |
avatar.size.sm | — | --todae-avatar-size-sm | 1.5rem | — |
grid.gap | — | --todae-grid-gap | var(--todae-space-stack-gap) | space.stack.gap |
pagination.bg.hover | — | --todae-pagination-bg-hover | var(--todae-color-bg-highlight) | color.bg.highlight |
pagination.border-width | — | --todae-pagination-border-width | var(--todae-border-width) | border.width |
pagination.current.bg | — | --todae-pagination-current-bg | var(--todae-color-accent-default) | color.accent.default |
pagination.current.fg | — | --todae-pagination-current-fg | var(--todae-color-on-accent) | color.on-accent |
pagination.current.font.weight | — | --todae-pagination-current-font-weight | var(--todae-font-weight-medium) | font.weight.medium |
pagination.fg.default | — | --todae-pagination-fg-default | var(--todae-color-fg-default) | color.fg.default |
pagination.fg.disabled | — | --todae-pagination-fg-disabled | var(--todae-color-fg-placeholder) | color.fg.placeholder |
pagination.font.size | — | --todae-pagination-font-size | var(--todae-font-size-2) | font.size.2 |
pagination.gap | — | --todae-pagination-gap | 0.25rem | — |
pagination.padding-x | — | --todae-pagination-padding-x | var(--todae-space-chip-x) | space.chip.x |
pagination.radius | — | --todae-pagination-radius | var(--todae-radius-md) | radius.md |
pagination.ring.focus | — | --todae-pagination-ring-focus | var(--todae-color-accent-default) | color.accent.default |
pagination.size | — | --todae-pagination-size | 2rem | — |