Token reference
Every --ui-* design token shipped by @acronis-platform/tokens-pd, grouped by tier.
@acronis-platform/tokens-pd ships design tokens as
CSS custom properties (--ui-*). The Semantic tier (css/default.css) is
bundled by @acronis-platform/ui-react/styles; each component tier
(css/<Component>/default.css) is opt-in.
Values are shown for the default brand exactly as authored — many resolve via
light-dark(), so the active color scheme picks the light or
dark value at runtime. For more on how brands and color schemes are delivered,
see Theming.
Semantic (157)
| Token | Value |
|---|---|
| --ui-background-backdrop-element-primary | light-dark(rgb(255 255 255 / 0.949), rgb(48 50 54 / 0.949)) |
| --ui-background-backdrop-element-secondary | light-dark(rgb(248 250 252 / 0.949), rgb(24 25 27 / 0.949)) |
| --ui-background-backdrop-screen | light-dark(rgb(25 27 35 / 0.898), rgb(25 27 35 / 0.898)) |
| --ui-background-brand-primary | light-dark(rgb(0 32 77), rgb(12 12 14)) |
| --ui-background-brand-primary-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-background-brand-primary-disabled | light-dark(rgb(117 174 240), rgb(85 89 94)) |
| --ui-background-brand-primary-hover | light-dark(rgb(3 43 99), rgb(61 63 67)) |
| --ui-background-brand-secondary | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-background-brand-secondary-active | light-dark(rgb(13 77 165), rgb(18 77 161)) |
| --ui-background-brand-secondary-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-background-brand-secondary-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-background-inverse-primary | light-dark(rgb(25 27 35), rgb(255 255 255)) |
| --ui-background-status-ai | light-dark(rgb(249 245 251), rgb(62 15 62)) |
| --ui-background-status-ai-hover | light-dark(rgb(245 238 248), rgb(87 15 87)) |
| --ui-background-status-ai-pressed | light-dark(rgb(236 222 242), rgb(108 19 108)) |
| --ui-background-status-critical | light-dark(rgb(255 240 230), rgb(77 35 0)) |
| --ui-background-status-critical-hover | light-dark(rgb(255 231 214), rgb(102 45 0)) |
| --ui-background-status-critical-pressed | light-dark(rgb(255 222 194), rgb(128 58 0)) |
| --ui-background-status-danger | light-dark(rgb(253 237 237), rgb(87 15 15)) |
| --ui-background-status-danger-hover | light-dark(rgb(252 227 227), rgb(108 19 19)) |
| --ui-background-status-danger-pressed | light-dark(rgb(251 218 218), rgb(130 23 23)) |
| --ui-background-status-info | light-dark(rgb(238 242 247), rgb(26 47 77)) |
| --ui-background-status-info-hover | light-dark(rgb(226 235 245), rgb(32 58 95)) |
| --ui-background-status-info-pressed | light-dark(rgb(214 228 245), rgb(38 70 115)) |
| --ui-background-status-neutral | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-background-status-neutral-hover | light-dark(rgb(236 237 238), rgb(37 38 40)) |
| --ui-background-status-neutral-pressed | light-dark(rgb(228 229 231), rgb(48 50 54)) |
| --ui-background-status-off | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-background-status-on | light-dark(rgb(70 185 89), rgb(70 185 89)) |
| --ui-background-status-strong-critical | light-dark(rgb(255 128 0), rgb(255 128 0)) |
| --ui-background-status-strong-critical-hover | light-dark(rgb(240 112 0), rgb(255 153 51)) |
| --ui-background-status-strong-critical-pressed | light-dark(rgb(214 96 0), rgb(255 178 102)) |
| --ui-background-status-strong-danger | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-background-status-strong-danger-hover | light-dark(rgb(195 34 34), rgb(244 154 154)) |
| --ui-background-status-strong-danger-pressed | light-dark(rgb(173 31 31), rgb(248 195 195)) |
| --ui-background-status-strong-info | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-background-status-strong-info-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-background-status-strong-info-pressed | light-dark(rgb(13 77 165), rgb(18 77 161)) |
| --ui-background-status-strong-neutral | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-background-status-strong-neutral-hover | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --ui-background-status-strong-neutral-pressed | light-dark(rgb(85 89 94), rgb(175 178 182)) |
| --ui-background-status-strong-success | light-dark(rgb(41 163 61), rgb(72 209 94)) |
| --ui-background-status-strong-success-hover | light-dark(rgb(36 143 54), rgb(107 199 122)) |
| --ui-background-status-strong-success-pressed | light-dark(rgb(31 122 46), rgb(126 206 139)) |
| --ui-background-status-strong-warning | light-dark(rgb(245 184 0), rgb(245 184 0)) |
| --ui-background-status-strong-warning-hover | light-dark(rgb(229 164 0), rgb(255 196 0)) |
| --ui-background-status-strong-warning-pressed | light-dark(rgb(204 146 0), rgb(255 210 61)) |
| --ui-background-status-success | light-dark(rgb(238 247 239), rgb(3 58 17)) |
| --ui-background-status-success-hover | light-dark(rgb(226 245 229), rgb(8 69 23)) |
| --ui-background-status-success-pressed | light-dark(rgb(209 240 214), rgb(15 87 33)) |
| --ui-background-status-warning | light-dark(rgb(255 249 229), rgb(102 73 0)) |
| --ui-background-status-warning-hover | light-dark(rgb(255 244 204), rgb(102 73 0)) |
| --ui-background-status-warning-pressed | light-dark(rgb(255 238 178), rgb(138 99 0)) |
| --ui-background-surface-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-background-surface-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-background-surface-primary | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-background-surface-secondary | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-background-transparent | light-dark(transparent, transparent) |
| --ui-border-on-brand-border | light-dark(rgb(255 255 255 / 0.102), rgb(255 255 255 / 0.102)) |
| --ui-border-on-brand-border-active | light-dark(rgb(244 245 245), rgb(24 25 27)) |
| --ui-border-on-brand-divider | light-dark(rgb(255 255 255 / 0.102), rgb(255 255 255 / 0.102)) |
| --ui-border-on-status-ai | light-dark(rgb(228 204 237), rgb(130 23 130)) |
| --ui-border-on-status-ai-strong | linear-gradient(90deg, rgb(56 73 224) 20%, rgb(252 45 241) 100%) |
| --ui-border-on-status-critical | light-dark(rgb(255 204 153), rgb(153 69 0)) |
| --ui-border-on-status-critical-strong | light-dark(rgb(240 112 0), rgb(255 153 51)) |
| --ui-border-on-status-danger | light-dark(rgb(248 195 195), rgb(151 27 27)) |
| --ui-border-on-status-danger-strong | light-dark(rgb(217 38 38), rgb(237 94 94)) |
| --ui-border-on-status-info | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-border-on-status-info-strong | light-dark(rgb(19 84 174), rgb(121 158 210)) |
| --ui-border-on-status-neutral | light-dark(rgb(201 204 207), rgb(73 76 80)) |
| --ui-border-on-status-neutral-strong | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --ui-border-on-status-success | light-dark(rgb(178 229 187), rgb(26 102 38)) |
| --ui-border-on-status-success-strong | light-dark(rgb(36 143 54), rgb(107 199 122)) |
| --ui-border-on-status-warning | light-dark(rgb(255 227 128), rgb(178 128 0)) |
| --ui-border-on-status-warning-strong | light-dark(rgb(229 164 0), rgb(255 196 0)) |
| --ui-border-on-surface-border | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-border-on-surface-border-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-border-on-surface-border-error | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-border-on-surface-divider | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-border-transparent | light-dark(transparent, transparent) |
| --ui-focus-brand | light-dark(rgb(190 215 244), rgb(81 157 246)) |
| --ui-focus-error | light-dark(rgb(248 195 195), rgb(151 27 27)) |
| --ui-focus-primary | light-dark(rgb(190 215 244), rgb(81 157 246)) |
| --ui-focus-secondary | light-dark(rgb(190 215 244), rgb(81 157 246)) |
| --ui-glyph-on-backdrop-element-primary | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-glyph-on-backdrop-screen-primary | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-glyph-on-brand-disabled | light-dark(rgb(255 255 255 / 0.102), rgb(255 255 255 / 0.102)) |
| --ui-glyph-on-brand-primary | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-glyph-on-brand-secondary | light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.6)) |
| --ui-glyph-on-inverse-primary | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-glyph-on-status-ai | light-dark(rgb(130 23 130), rgb(250 209 250)) |
| --ui-glyph-on-status-critical | light-dark(rgb(153 69 0), rgb(255 222 194)) |
| --ui-glyph-on-status-danger | light-dark(rgb(152 27 27), rgb(251 218 218)) |
| --ui-glyph-on-status-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-glyph-on-status-info | light-dark(rgb(6 54 121), rgb(214 228 245)) |
| --ui-glyph-on-status-neutral | light-dark(rgb(61 63 67), rgb(215 217 219)) |
| --ui-glyph-on-status-primary | light-dark(rgb(6 54 121), rgb(214 228 245)) |
| --ui-glyph-on-status-success | light-dark(rgb(15 87 33), rgb(209 240 214)) |
| --ui-glyph-on-status-warning | light-dark(rgb(138 99 0), rgb(255 238 178)) |
| --ui-glyph-on-surface-brand | light-dark(rgb(0 32 77), rgb(12 12 14)) |
| --ui-glyph-on-surface-destructive | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-glyph-on-surface-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-glyph-on-surface-neutral | light-dark(rgb(201 204 207), rgb(73 76 80)) |
| --ui-glyph-on-surface-primary | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-gradients-ai-active | linear-gradient(90deg, rgb(43 54 155) 20%, rgb(118 21 113) 100%) |
| --ui-gradients-ai-disabled | linear-gradient(90deg, rgb(223 226 255) 20%, rgb(255 218 253) 100%) |
| --ui-gradients-ai-hover | linear-gradient(90deg, rgb(51 66 195) 20%, rgb(182 33 174) 100%) |
| --ui-gradients-ai-idle | linear-gradient(90deg, rgb(56 73 224) 20%, rgb(252 45 241) 100%) |
| --ui-text-on-backdrop-element-link-active | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-text-on-backdrop-element-link-hover | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-text-on-backdrop-element-link-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-text-on-backdrop-element-primary | light-dark(rgb(25 27 35), rgb(255 255 255)) |
| --ui-text-on-backdrop-screen-link-active | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-text-on-backdrop-screen-link-hover | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-text-on-backdrop-screen-link-idle | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-text-on-backdrop-screen-primary | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-text-on-backdrop-screen-secondary | light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.6)) |
| --ui-text-on-brand-disabled | light-dark(rgb(255 255 255 / 0.302), rgb(255 255 255 / 0.302)) |
| --ui-text-on-brand-link | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-text-on-brand-link-disabled | light-dark(rgb(255 255 255 / 0.302), rgb(255 255 255 / 0.302)) |
| --ui-text-on-brand-link-hover | light-dark(rgb(117 174 240), rgb(85 89 94)) |
| --ui-text-on-brand-link-pressed | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-text-on-brand-primary | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-text-on-brand-secondary | light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.6)) |
| --ui-text-on-inverse-primary | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-text-on-inverse-secondary | light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.6)) |
| --ui-text-on-status-ai | light-dark(rgb(130 23 130), rgb(250 209 250)) |
| --ui-text-on-status-critical | light-dark(rgb(153 69 0), rgb(255 222 194)) |
| --ui-text-on-status-danger | light-dark(rgb(152 27 27), rgb(251 218 218)) |
| --ui-text-on-status-info | light-dark(rgb(6 54 121), rgb(214 228 245)) |
| --ui-text-on-status-link | light-dark(rgb(6 54 121), rgb(214 228 245)) |
| --ui-text-on-status-link-disabled | light-dark(rgb(117 174 240), rgb(48 89 145)) |
| --ui-text-on-status-link-hover | light-dark(rgb(0 32 77), rgb(238 242 247)) |
| --ui-text-on-status-link-pressed | light-dark(rgb(0 21 51), rgb(248 250 252)) |
| --ui-text-on-status-neutral | light-dark(rgb(61 63 67), rgb(215 217 219)) |
| --ui-text-on-status-primary | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-text-on-status-secondary | light-dark(rgb(61 63 67), rgb(215 217 219)) |
| --ui-text-on-status-strong-ai | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-text-on-status-strong-critical | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-text-on-status-strong-danger | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-text-on-status-strong-info | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-text-on-status-strong-link | light-dark(rgb(6 54 121), rgb(214 228 245)) |
| --ui-text-on-status-strong-neutral | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-text-on-status-strong-primary | light-dark(rgb(244 245 245), rgb(24 25 27)) |
| --ui-text-on-status-strong-secondary | light-dark(rgb(228 229 231), rgb(48 50 54)) |
| --ui-text-on-status-strong-success | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-text-on-status-strong-warning | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-text-on-status-success | light-dark(rgb(15 87 33), rgb(209 240 214)) |
| --ui-text-on-status-warning | light-dark(rgb(138 99 0), rgb(255 238 178)) |
| --ui-text-on-surface-destructive | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-text-on-surface-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-text-on-surface-link | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-text-on-surface-link-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-text-on-surface-link-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-text-on-surface-link-pressed | light-dark(rgb(6 54 121), rgb(190 215 244)) |
| --ui-text-on-surface-primary | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-text-on-surface-secondary | light-dark(rgb(109 114 120), rgb(109 114 120)) |
Avatar (18)
| Token | Value |
|---|---|
| --ui-avatar-color-orange | light-dark(rgb(255 222 194), rgb(128 58 0)) |
| --ui-avatar-color-red | light-dark(rgb(251 218 218), rgb(130 23 23)) |
| --ui-avatar-color-teal | light-dark(rgb(209 240 237), rgb(4 73 67)) |
| --ui-avatar-color-violet | light-dark(rgb(236 222 242), rgb(108 19 108)) |
| --ui-avatar-color-yellow | light-dark(rgb(255 238 178), rgb(138 99 0)) |
| --ui-avatar-global-avatar-border-border-radius | 999px |
| --ui-avatar-global-avatar-border-border-style | solid |
| --ui-avatar-global-avatar-border-border-width | 2px |
| --ui-avatar-global-avatar-border-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-avatar-global-avatar-group-gap | -6px |
| --ui-avatar-global-avatar-size | 32px |
| --ui-avatar-global-container-gap | 8px |
| --ui-avatar-global-text-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-avatar-label-color-orange | light-dark(rgb(153 69 0), rgb(255 222 194)) |
| --ui-avatar-label-color-red | light-dark(rgb(152 27 27), rgb(251 218 218)) |
| --ui-avatar-label-color-teal | light-dark(rgb(4 73 67), rgb(209 240 237)) |
| --ui-avatar-label-color-violet | light-dark(rgb(130 23 130), rgb(250 209 250)) |
| --ui-avatar-label-color-yellow | light-dark(rgb(138 99 0), rgb(255 238 178)) |
Breadcrumb (7)
| Token | Value |
|---|---|
| --ui-breadcrumb-link-label-color-active | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-breadcrumb-link-label-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-breadcrumb-link-label-color-idle | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-breadcrumb-list-gap | 4px |
| --ui-breadcrumb-page-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-breadcrumb-separator-icon-color | light-dark(rgb(201 204 207), rgb(73 76 80)) |
| --ui-breadcrumb-separator-icon-size | 16px |
Button (80)
| Token | Value |
|---|---|
| --ui-button-ai-container-color-active | linear-gradient(90deg, rgb(43 54 155) 20%, rgb(118 21 113) 100%) |
| --ui-button-ai-container-color-disabled | linear-gradient(90deg, rgb(223 226 255) 20%, rgb(255 218 253) 100%) |
| --ui-button-ai-container-color-hover | linear-gradient(90deg, rgb(51 66 195) 20%, rgb(182 33 174) 100%) |
| --ui-button-ai-container-color-idle | linear-gradient(90deg, rgb(56 73 224) 20%, rgb(252 45 241) 100%) |
| --ui-button-ai-container-padding-x | 12px |
| --ui-button-ai-container-width-min | 64px |
| --ui-button-ai-icon-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-ai-icon-color-disabled | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-ai-icon-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-ai-icon-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-ai-label-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-ai-label-color-disabled | light-dark(rgb(255 255 255 / 0.302), rgb(255 255 255 / 0.302)) |
| --ui-button-ai-label-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-ai-label-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-destructive-container-color-active | light-dark(rgb(173 31 31), rgb(248 195 195)) |
| --ui-button-destructive-container-color-disabled | light-dark(rgb(253 237 237), rgb(87 15 15)) |
| --ui-button-destructive-container-color-hover | light-dark(rgb(195 34 34), rgb(244 154 154)) |
| --ui-button-destructive-container-color-idle | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-button-destructive-container-padding-x | 12px |
| --ui-button-destructive-container-width-min | 64px |
| --ui-button-destructive-icon-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-destructive-icon-color-disabled | light-dark(rgb(255 255 255 / 0.102), rgb(255 255 255 / 0.102)) |
| --ui-button-destructive-icon-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-destructive-icon-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-destructive-label-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-destructive-label-color-disabled | light-dark(rgb(255 255 255 / 0.302), rgb(255 255 255 / 0.302)) |
| --ui-button-destructive-label-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-destructive-label-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-ghost-container-padding-x | 0px |
| --ui-button-ghost-icon-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-ghost-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-ghost-icon-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-ghost-icon-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-ghost-label-color-active | light-dark(rgb(6 54 121), rgb(190 215 244)) |
| --ui-button-ghost-label-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-ghost-label-color-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-button-ghost-label-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-ghost-label-text-decoration-active | none |
| --ui-button-ghost-label-text-decoration-disabled | none |
| --ui-button-ghost-label-text-decoration-hover | underline |
| --ui-button-ghost-label-text-decoration-idle | none |
| --ui-button-global-container-border-radius | 4px |
| --ui-button-global-container-gap | 8px |
| --ui-button-global-container-height | 32px |
| --ui-button-global-container-padding-y | 8px |
| --ui-button-global-icon-size | 16px |
| --ui-button-primary-container-color-active | light-dark(rgb(13 77 165), rgb(18 77 161)) |
| --ui-button-primary-container-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-primary-container-color-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-button-primary-container-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-primary-container-padding-x | 12px |
| --ui-button-primary-container-width-min | 64px |
| --ui-button-primary-icon-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-primary-icon-color-disabled | light-dark(rgb(255 255 255 / 0.102), rgb(255 255 255 / 0.102)) |
| --ui-button-primary-icon-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-primary-icon-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-primary-label-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-primary-label-color-disabled | light-dark(rgb(255 255 255 / 0.302), rgb(255 255 255 / 0.302)) |
| --ui-button-primary-label-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-primary-label-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-secondary-container-border-color-active | light-dark(transparent, transparent) |
| --ui-button-secondary-container-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-secondary-container-border-color-hover | light-dark(transparent, transparent) |
| --ui-button-secondary-container-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-secondary-container-border-style | solid |
| --ui-button-secondary-container-border-width | 1px |
| --ui-button-secondary-container-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-button-secondary-container-color-disabled | light-dark(transparent, transparent) |
| --ui-button-secondary-container-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-button-secondary-container-color-idle | light-dark(transparent, transparent) |
| --ui-button-secondary-container-padding-x | 12px |
| --ui-button-secondary-container-width-min | 64px |
| --ui-button-secondary-icon-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-secondary-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-secondary-icon-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-secondary-icon-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-secondary-label-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-secondary-label-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-secondary-label-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-secondary-label-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
ButtonIcon (18)
| Token | Value |
|---|---|
| --ui-button-icon-global-container-border-radius | 4px |
| --ui-button-icon-global-container-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-button-icon-global-container-color-disabled | light-dark(transparent, transparent) |
| --ui-button-icon-global-container-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-button-icon-global-container-color-idle | light-dark(transparent, transparent) |
| --ui-button-icon-global-container-height | 32px |
| --ui-button-icon-global-container-padding-x | 4px |
| --ui-button-icon-global-icon-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-icon-global-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-icon-global-icon-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-icon-global-icon-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-icon-global-icon-size | 24px |
| --ui-button-icon-secondary-container-border-color-active | light-dark(transparent, transparent) |
| --ui-button-icon-secondary-container-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-icon-secondary-container-border-color-hover | light-dark(transparent, transparent) |
| --ui-button-icon-secondary-container-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-icon-secondary-container-border-style | solid |
| --ui-button-icon-secondary-container-border-width | 1px |
ButtonMenu (54)
| Token | Value |
|---|---|
| --ui-button-menu-dropdown-container-border-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-dropdown-container-border-radius | 4px |
| --ui-button-menu-dropdown-container-border-width | 1px |
| --ui-button-menu-dropdown-container-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-button-menu-dropdown-container-gap | 0px |
| --ui-button-menu-dropdown-container-padding-x | 0px |
| --ui-button-menu-dropdown-container-padding-y | 0px |
| --ui-button-menu-dropdown-extras-cascade-icon-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-dropdown-extras-shortcut-label-color | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-button-menu-dropdown-item-container-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-button-menu-dropdown-item-container-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-button-menu-dropdown-item-container-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-button-menu-dropdown-item-container-gap | 8px |
| --ui-button-menu-dropdown-item-container-height | 40px |
| --ui-button-menu-dropdown-item-container-padding-x | 12px |
| --ui-button-menu-dropdown-item-container-padding-y | 8px |
| --ui-button-menu-dropdown-item-icon-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-dropdown-item-label-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-dropdown-section-container-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-menu-dropdown-section-container-border-width | 1px |
| --ui-button-menu-dropdown-section-container-padding-x | 0px |
| --ui-button-menu-dropdown-section-container-padding-y | 0px |
| --ui-button-menu-dropdown-section-list-gap | 0px |
| --ui-button-menu-global-container-border-radius | 4px |
| --ui-button-menu-global-container-gap | 8px |
| --ui-button-menu-global-container-height | 32px |
| --ui-button-menu-global-container-padding-x | 12px |
| --ui-button-menu-global-container-padding-y | 8px |
| --ui-button-menu-global-container-width-min | 64px |
| --ui-button-menu-global-icon-size | 16px |
| --ui-button-menu-primary-container-color-active | light-dark(rgb(13 77 165), rgb(18 77 161)) |
| --ui-button-menu-primary-container-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-menu-primary-container-color-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-button-menu-primary-container-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-primary-icon-color | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-menu-primary-label-color | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-button-menu-secondary-container-border-color-active | light-dark(transparent, transparent) |
| --ui-button-menu-secondary-container-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-menu-secondary-container-border-color-hover | light-dark(transparent, transparent) |
| --ui-button-menu-secondary-container-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-menu-secondary-container-border-style | solid |
| --ui-button-menu-secondary-container-border-width | 1px |
| --ui-button-menu-secondary-container-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-button-menu-secondary-container-color-disabled | light-dark(transparent, transparent) |
| --ui-button-menu-secondary-container-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-button-menu-secondary-container-color-idle | light-dark(transparent, transparent) |
| --ui-button-menu-secondary-icon-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-secondary-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-menu-secondary-icon-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-secondary-icon-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-secondary-label-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-secondary-label-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-menu-secondary-label-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-secondary-label-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
CardFilter (18)
| Token | Value |
|---|---|
| --ui-card-filter-clickable-value-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-card-filter-global-border-color-active | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-card-filter-global-border-color-focused | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-card-filter-global-border-color-hover | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-card-filter-global-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-card-filter-global-container-border-radius | 8px |
| --ui-card-filter-global-container-border-style | solid |
| --ui-card-filter-global-container-border-width | 1px |
| --ui-card-filter-global-container-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-card-filter-global-container-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-card-filter-global-container-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-card-filter-global-container-height | 64px |
| --ui-card-filter-global-container-padding-x | 16px |
| --ui-card-filter-global-container-padding-y | 8px |
| --ui-card-filter-global-content-gap | 8px |
| --ui-card-filter-global-label-color | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-card-filter-static-value-color-disabled | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-card-filter-static-value-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
Checkbox (43)
| Token | Value |
|---|---|
| --ui-checkbox-checked-box-border-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-checkbox-checked-box-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-checkbox-checked-box-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-checkbox-checked-box-border-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-checkbox-checked-box-color-active | light-dark(rgb(13 77 165), rgb(18 77 161)) |
| --ui-checkbox-checked-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-checkbox-checked-box-color-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-checkbox-checked-box-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-checkbox-checked-icon-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-checkbox-checked-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-checkbox-checked-icon-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-checkbox-checked-icon-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-checkbox-global-box-border-radius | 2px |
| --ui-checkbox-global-box-border-width | 1px |
| --ui-checkbox-global-box-margin-y | 4px |
| --ui-checkbox-global-box-size | 16px |
| --ui-checkbox-global-container-content-gap | 0px |
| --ui-checkbox-global-container-content-width-max | 632px |
| --ui-checkbox-global-container-gap | 8px |
| --ui-checkbox-global-container-width-max | 632px |
| --ui-checkbox-global-container-width-min | 16px |
| --ui-checkbox-global-description-color | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-checkbox-global-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-checkbox-indeterminate-box-border-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-checkbox-indeterminate-box-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-checkbox-indeterminate-box-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-checkbox-indeterminate-box-border-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-checkbox-indeterminate-box-color-active | light-dark(rgb(13 77 165), rgb(18 77 161)) |
| --ui-checkbox-indeterminate-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-checkbox-indeterminate-box-color-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-checkbox-indeterminate-box-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-checkbox-indeterminate-icon-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-checkbox-indeterminate-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-checkbox-indeterminate-icon-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-checkbox-indeterminate-icon-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-checkbox-unchecked-box-border-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-checkbox-unchecked-box-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-checkbox-unchecked-box-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-checkbox-unchecked-box-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-checkbox-unchecked-box-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-checkbox-unchecked-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-checkbox-unchecked-box-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-checkbox-unchecked-box-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
Chip (19)
| Token | Value |
|---|---|
| --ui-chip-global-border-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-chip-global-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-chip-global-border-color-idle | light-dark(rgb(214 228 245), rgb(38 70 115)) |
| --ui-chip-global-border-radius | 12px |
| --ui-chip-global-border-style | solid |
| --ui-chip-global-border-width | 1px |
| --ui-chip-global-box-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-chip-global-box-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-chip-global-box-color-idle | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-chip-global-box-gap | 4px |
| --ui-chip-global-box-height | 24px |
| --ui-chip-global-box-margin-y | 4px |
| --ui-chip-global-box-padding-x | 8px |
| --ui-chip-global-box-width-min | 48px |
| --ui-chip-global-icon-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-chip-global-icon-size | 16px |
| --ui-chip-operational-label-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-chip-removable-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-chip-selectable-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
InputDatePicker (42)
| Token | Value |
|---|---|
| --ui-input-date-picker-error-box-border-color-active | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-date-picker-error-box-border-color-hover | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-date-picker-error-box-border-color-idle | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-date-picker-error-error-msg-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-date-picker-error-icon-color-hover | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-date-picker-error-icon-color-idle | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-date-picker-global-box-border-radius | 4px |
| --ui-input-date-picker-global-box-border-width | 1px |
| --ui-input-date-picker-global-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-input-date-picker-global-box-color-hover | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-date-picker-global-box-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-date-picker-global-box-gap | 12px |
| --ui-input-date-picker-global-box-gap-range | 8px |
| --ui-input-date-picker-global-box-height | 32px |
| --ui-input-date-picker-global-box-padding-x | 12px |
| --ui-input-date-picker-global-box-padding-y | 4px |
| --ui-input-date-picker-global-container-gap | 4px |
| --ui-input-date-picker-global-container-label-gap | 4px |
| --ui-input-date-picker-global-container-width-min | 128px |
| --ui-input-date-picker-global-label-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-date-picker-global-label-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-date-picker-global-label-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-date-picker-global-placeholder-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-date-picker-global-placeholder-color-hover | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-date-picker-global-placeholder-color-idle | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-date-picker-global-required-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-date-picker-global-separator-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-date-picker-global-separator-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-date-picker-global-separator-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-date-picker-global-value-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-date-picker-global-value-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-date-picker-global-value-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-date-picker-normal-box-border-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-date-picker-normal-box-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-date-picker-normal-box-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-date-picker-normal-box-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-date-picker-normal-description-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-date-picker-normal-description-color-hover | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-date-picker-normal-description-color-idle | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-date-picker-normal-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-date-picker-normal-icon-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-date-picker-normal-icon-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
InputSearch (29)
| Token | Value |
|---|---|
| --ui-input-search-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-search-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-search-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-search-box-border-radius | 4px |
| --ui-input-search-box-border-width | 1px |
| --ui-input-search-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-input-search-box-color-hover | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-search-box-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-search-box-gap | 8px |
| --ui-input-search-box-height | 32px |
| --ui-input-search-box-padding-x | 12px |
| --ui-input-search-box-padding-y | 4px |
| --ui-input-search-clear-icon-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-search-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-search-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-search-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-search-container-gap | 4px |
| --ui-input-search-container-label-gap | 4px |
| --ui-input-search-container-width-min | 128px |
| --ui-input-search-icon-search-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-search-icon-search-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-search-icon-search-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-search-placeholder-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-search-placeholder-color-hover | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-search-placeholder-color-idle | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-search-required-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-search-value-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-search-value-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-search-value-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
InputSelect (79)
| Token | Value |
|---|---|
| --ui-input-select-dropdown-container-border-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-select-dropdown-container-border-radius | 4px |
| --ui-input-select-dropdown-container-border-width | 1px |
| --ui-input-select-dropdown-container-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-select-dropdown-container-gap | 0px |
| --ui-input-select-dropdown-container-padding-x | 0px |
| --ui-input-select-dropdown-container-padding-y | 0px |
| --ui-input-select-dropdown-container-status-gap | 8px |
| --ui-input-select-dropdown-container-status-padding-x | 16px |
| --ui-input-select-dropdown-container-status-padding-y | 16px |
| --ui-input-select-dropdown-container-status-width-min | 128px |
| --ui-input-select-dropdown-dropdown-search-gap | 8px |
| --ui-input-select-dropdown-dropdown-search-label-color-placeholder | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-select-dropdown-dropdown-search-label-color-value | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-select-dropdown-dropdown-search-padding-x | 12px |
| --ui-input-select-dropdown-dropdown-search-padding-y | 12px |
| --ui-input-select-dropdown-item-global-container-gap | 8px |
| --ui-input-select-dropdown-item-global-container-height | 40px |
| --ui-input-select-dropdown-item-global-container-padding-x | 12px |
| --ui-input-select-dropdown-item-global-container-padding-y | 8px |
| --ui-input-select-dropdown-item-global-icon-checked | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-select-dropdown-item-global-icon-collapse | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-select-dropdown-item-global-icon-tenant | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-select-dropdown-item-global-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-select-dropdown-item-selected-container-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-input-select-dropdown-item-selected-container-color-hover | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-input-select-dropdown-item-selected-container-color-idle | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-input-select-dropdown-item-unselected-container-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-input-select-dropdown-item-unselected-container-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-input-select-dropdown-item-unselected-container-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-select-dropdown-section-container-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-select-dropdown-section-container-border-width | 1px |
| --ui-input-select-dropdown-section-container-header-padding-x | 12px |
| --ui-input-select-dropdown-section-container-header-padding-y | 8px |
| --ui-input-select-dropdown-section-container-padding-y | 0px |
| --ui-input-select-dropdown-section-label-group-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-select-dropdown-section-list-gap | 0px |
| --ui-input-select-error-box-border-color-hover | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-select-error-box-border-color-idle | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-select-error-error-msg-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-select-error-icon-color-hover | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-select-error-icon-color-idle | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-select-error-icon-expand-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-select-error-icon-expand-color-hover | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-select-error-icon-expand-color-idle | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-select-global-box-border-radius | 4px |
| --ui-input-select-global-box-border-width | 1px |
| --ui-input-select-global-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-input-select-global-box-color-hover | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-select-global-box-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-select-global-box-gap | 8px |
| --ui-input-select-global-box-height | 32px |
| --ui-input-select-global-box-padding-x | 12px |
| --ui-input-select-global-box-padding-y | 4px |
| --ui-input-select-global-container-gap | 4px |
| --ui-input-select-global-container-label-gap | 4px |
| --ui-input-select-global-container-width-min | 128px |
| --ui-input-select-global-label-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-select-global-label-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-select-global-label-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-select-global-placeholder-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-select-global-placeholder-color-hover | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-select-global-placeholder-color-idle | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-select-global-required-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-select-global-value-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-select-global-value-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-select-global-value-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-select-normal-box-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-select-normal-box-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-select-normal-box-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-select-normal-description-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-select-normal-description-color-hover | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-select-normal-description-color-idle | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-select-normal-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-select-normal-icon-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-select-normal-icon-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-select-normal-icon-expand-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-select-normal-icon-expand-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-select-normal-icon-expand-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
InputText (32)
| Token | Value |
|---|---|
| --ui-input-text-error-msg-box-border-color-hover | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-text-error-msg-box-border-color-idle | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-text-error-msg-error-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-text-global-box-border-radius | 4px |
| --ui-input-text-global-box-border-width | 1px |
| --ui-input-text-global-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-input-text-global-box-color-hover | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-text-global-box-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-text-global-box-gap | 12px |
| --ui-input-text-global-box-height | 32px |
| --ui-input-text-global-box-padding-x | 12px |
| --ui-input-text-global-box-padding-y | 4px |
| --ui-input-text-global-clear-icon-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-text-global-container-gap | 4px |
| --ui-input-text-global-container-label-gap | 4px |
| --ui-input-text-global-container-width-min | 128px |
| --ui-input-text-global-label-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-text-global-label-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-text-global-label-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-text-global-placeholder-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-text-global-placeholder-color-hover | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-text-global-placeholder-color-idle | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-text-global-required-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-text-global-value-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-text-global-value-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-text-global-value-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-text-normal-box-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-text-normal-box-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-text-normal-box-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-text-normal-description-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-text-normal-description-color-hover | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-text-normal-description-color-idle | light-dark(rgb(109 114 120), rgb(109 114 120)) |
InputTextArea (32)
| Token | Value |
|---|---|
| --ui-input-text-area-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-text-area-border-color-focus | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-text-area-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-text-area-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-text-area-box-border-radius | 4px |
| --ui-input-text-area-box-border-width | 1px |
| --ui-input-text-area-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-input-text-area-box-color-hover | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-text-area-box-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-text-area-box-gap | 12px |
| --ui-input-text-area-box-height-min | 96px |
| --ui-input-text-area-box-padding-x | 12px |
| --ui-input-text-area-box-padding-y | 8px |
| --ui-input-text-area-container-gap | 4px |
| --ui-input-text-area-container-label-gap | 4px |
| --ui-input-text-area-container-width-min | 256px |
| --ui-input-text-area-description-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-text-area-description-color-hover | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-text-area-description-color-idle | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-text-area-error-msg-box-border-color-hover | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-text-area-error-msg-box-border-color-idle | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-text-area-error-msg-error-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-text-area-label-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-text-area-label-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-text-area-label-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-text-area-placeholder-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-text-area-placeholder-color-hover | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-text-area-placeholder-color-idle | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-input-text-area-required-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-text-area-value-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-text-area-value-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-text-area-value-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
Link (14)
| Token | Value |
|---|---|
| --ui-link-color-active | light-dark(rgb(6 54 121), rgb(190 215 244)) |
| --ui-link-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-link-color-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-link-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-link-container-gap | 4px |
| --ui-link-container-height | 32px |
| --ui-link-external-icon-color-active | light-dark(rgb(6 54 121), rgb(190 215 244)) |
| --ui-link-external-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-link-external-icon-color-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-link-external-icon-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-link-text-decoration-active | none |
| --ui-link-text-decoration-disabled | none |
| --ui-link-text-decoration-hover | underline |
| --ui-link-text-decoration-idle | none |
Radio (31)
| Token | Value |
|---|---|
| --ui-radio-checked-box-border-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-radio-checked-box-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-radio-checked-box-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-radio-checked-box-border-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-radio-checked-box-color-active | light-dark(rgb(13 77 165), rgb(18 77 161)) |
| --ui-radio-checked-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-radio-checked-box-color-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-radio-checked-box-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-radio-checked-icon-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-radio-checked-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-radio-checked-icon-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-radio-checked-icon-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-radio-global-box-border-radius | 999px |
| --ui-radio-global-box-border-width | 1px |
| --ui-radio-global-box-margin-y | 4px |
| --ui-radio-global-box-size | 16px |
| --ui-radio-global-container-content-gap | 0px |
| --ui-radio-global-container-content-width-max | 632px |
| --ui-radio-global-container-gap | 8px |
| --ui-radio-global-container-width-max | 632px |
| --ui-radio-global-container-width-min | 16px |
| --ui-radio-global-description-color | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-radio-global-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-radio-unchecked-box-border-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-radio-unchecked-box-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-radio-unchecked-box-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-radio-unchecked-box-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-radio-unchecked-box-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-radio-unchecked-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-radio-unchecked-box-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-radio-unchecked-box-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
Resizable (9)
| Token | Value |
|---|---|
| --ui-resizable-bar-border-radius | 4px |
| --ui-resizable-bar-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-resizable-bar-height | 32px |
| --ui-resizable-bar-width | 7px |
| --ui-resizable-border-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-resizable-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-resizable-border-style | solid |
| --ui-resizable-border-width | 1px |
| --ui-resizable-cursor | ew-resize |
SearchGlobal (17)
| Token | Value |
|---|---|
| --ui-search-global-border-color-active | linear-gradient(90deg, rgb(43 54 155) 20%, rgb(118 21 113) 100%) |
| --ui-search-global-border-color-hover | linear-gradient(90deg, rgb(51 66 195) 20%, rgb(182 33 174) 100%) |
| --ui-search-global-border-color-idle | linear-gradient(90deg, rgb(56 73 224) 20%, rgb(252 45 241) 100%) |
| --ui-search-global-box-border-radius | 24px |
| --ui-search-global-box-border-style | solid |
| --ui-search-global-box-border-width | 2px |
| --ui-search-global-box-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-search-global-box-gap | 8px |
| --ui-search-global-box-height | 48px |
| --ui-search-global-box-padding-x | 16px |
| --ui-search-global-box-width | 512px |
| --ui-search-global-box-width-max | 512px |
| --ui-search-global-box-width-min | 256px |
| --ui-search-global-icon-color | light-dark(rgb(130 23 130), rgb(250 209 250)) |
| --ui-search-global-icon-size | 16px |
| --ui-search-global-placeholoder-color | light-dark(rgb(130 23 130), rgb(250 209 250)) |
| --ui-search-global-shortcut-color | light-dark(rgb(109 114 120), rgb(109 114 120)) |
SidebarPrimary (46)
| Token | Value |
|---|---|
| --ui-sidebar-primary-collapsed-container-header-padding-x | 8px |
| --ui-sidebar-primary-collapsed-container-header-padding-y | 16px |
| --ui-sidebar-primary-collapsed-container-width | 48px |
| --ui-sidebar-primary-collapsed-logo-height | 32px |
| --ui-sidebar-primary-expanded-container-header-padding-x | 16px |
| --ui-sidebar-primary-expanded-container-header-padding-y | 8px |
| --ui-sidebar-primary-expanded-container-width | 256px |
| --ui-sidebar-primary-expanded-logo-height | 48px |
| --ui-sidebar-primary-global-container-color | light-dark(rgb(0 32 77), rgb(12 12 14)) |
| --ui-sidebar-primary-global-container-footer-border-color | light-dark(rgb(255 255 255 / 0.102), rgb(255 255 255 / 0.102)) |
| --ui-sidebar-primary-global-container-footer-border-width | 1px |
| --ui-sidebar-primary-global-footer-list-gap | 0px |
| --ui-sidebar-primary-global-logo-color | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-sidebar-primary-global-section-list-gap | 0px |
| --ui-sidebar-primary-menu-item-extras-global-container-gap | 8px |
| --ui-sidebar-primary-menu-item-extras-global-external-icon-color | light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.6)) |
| --ui-sidebar-primary-menu-item-extras-global-external-icon-size | 16px |
| --ui-sidebar-primary-menu-item-extras-global-shortcut-color | light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.6)) |
| --ui-sidebar-primary-menu-item-global-container-gap | 8px |
| --ui-sidebar-primary-menu-item-global-container-height | 40px |
| --ui-sidebar-primary-menu-item-global-container-padding-x | 16px |
| --ui-sidebar-primary-menu-item-global-container-padding-y | 8px |
| --ui-sidebar-primary-menu-item-global-icon-margin-t | 4px |
| --ui-sidebar-primary-menu-item-global-icon-size | 16px |
| --ui-sidebar-primary-menu-item-selected-container-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-sidebar-primary-menu-item-selected-container-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-sidebar-primary-menu-item-selected-container-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-sidebar-primary-menu-item-selected-icon-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-sidebar-primary-menu-item-selected-icon-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-sidebar-primary-menu-item-selected-icon-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-sidebar-primary-menu-item-selected-label-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-sidebar-primary-menu-item-selected-label-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-sidebar-primary-menu-item-selected-label-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-sidebar-primary-menu-item-unselected-container-color-active | light-dark(rgb(3 43 99), rgb(61 63 67)) |
| --ui-sidebar-primary-menu-item-unselected-container-color-hover | light-dark(rgb(3 43 99), rgb(61 63 67)) |
| --ui-sidebar-primary-menu-item-unselected-container-color-idle | light-dark(rgb(0 32 77), rgb(12 12 14)) |
| --ui-sidebar-primary-menu-item-unselected-icon-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-sidebar-primary-menu-item-unselected-icon-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-sidebar-primary-menu-item-unselected-icon-color-idle | light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.6)) |
| --ui-sidebar-primary-menu-item-unselected-label-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-sidebar-primary-menu-item-unselected-label-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-sidebar-primary-menu-item-unselected-label-color-idle | light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.6)) |
| --ui-sidebar-primary-section-container-border-color | light-dark(rgb(255 255 255 / 0.102), rgb(255 255 255 / 0.102)) |
| --ui-sidebar-primary-section-container-border-width | 1px |
| --ui-sidebar-primary-section-container-padding-y | 8px |
| --ui-sidebar-primary-section-menu-item-list-gap | 0px |
SidebarSecondary (47)
| Token | Value |
|---|---|
| --ui-sidebar-secondary-collapsed-breadcrumb-label-color | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-sidebar-secondary-collapsed-container-content-gap | 4px |
| --ui-sidebar-secondary-collapsed-container-content-padding-y | 16px |
| --ui-sidebar-secondary-collapsed-container-header-padding-x | 8px |
| --ui-sidebar-secondary-collapsed-container-header-padding-y | 16px |
| --ui-sidebar-secondary-collapsed-container-width | 48px |
| --ui-sidebar-secondary-collapsed-icon-separator-color | light-dark(rgb(201 204 207), rgb(73 76 80)) |
| --ui-sidebar-secondary-collapsed-icon-separator-size | 16px |
| --ui-sidebar-secondary-collapsed-label-current-page-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-sidebar-secondary-expanded-container-header-padding-x | 16px |
| --ui-sidebar-secondary-expanded-container-header-padding-y | 8px |
| --ui-sidebar-secondary-expanded-container-width | 256px |
| --ui-sidebar-secondary-global-container-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-sidebar-secondary-global-container-border-width | 1px |
| --ui-sidebar-secondary-global-container-color | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-sidebar-secondary-global-container-footer-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-sidebar-secondary-global-container-footer-border-width | 1px |
| --ui-sidebar-secondary-global-container-header-padding-x | 16px |
| --ui-sidebar-secondary-global-container-header-padding-y | 12px |
| --ui-sidebar-secondary-global-header-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-sidebar-secondary-global-section-list-gap | 0px |
| --ui-sidebar-secondary-menu-item-extras-global-container-gap | 8px |
| --ui-sidebar-secondary-menu-item-extras-global-external-icon-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-sidebar-secondary-menu-item-extras-global-external-icon-size | 16px |
| --ui-sidebar-secondary-menu-item-extras-global-shortcut-color | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-sidebar-secondary-menu-item-global-container-gap | 8px |
| --ui-sidebar-secondary-menu-item-global-container-height-min | 40px |
| --ui-sidebar-secondary-menu-item-global-container-padding-x | 16px |
| --ui-sidebar-secondary-menu-item-global-container-padding-y | 8px |
| --ui-sidebar-secondary-menu-item-global-icon-color-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-sidebar-secondary-menu-item-global-icon-margin-t | 4px |
| --ui-sidebar-secondary-menu-item-global-icon-size | 16px |
| --ui-sidebar-secondary-menu-item-global-label-color-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-sidebar-secondary-menu-item-selected-container-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-sidebar-secondary-menu-item-selected-container-color-hover | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-sidebar-secondary-menu-item-selected-container-color-idle | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-sidebar-secondary-menu-item-unselected-container-color-active | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-sidebar-secondary-menu-item-unselected-container-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-sidebar-secondary-menu-item-unselected-container-color-idle | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-sidebar-secondary-section-container-header-gap | 8px |
| --ui-sidebar-secondary-section-container-header-min-width | undefinedundefined |
| --ui-sidebar-secondary-section-container-header-padding-x | 16px |
| --ui-sidebar-secondary-section-container-header-padding-y | 2px |
| --ui-sidebar-secondary-section-container-padding-y | 0px |
| --ui-sidebar-secondary-section-icon-arrow-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-sidebar-secondary-section-label-section-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-sidebar-secondary-section-menu-item-list-gap | 0px |
Switch (27)
| Token | Value |
|---|---|
| --ui-switch-global-box-border-color-active | light-dark(transparent, transparent) |
| --ui-switch-global-box-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-switch-global-box-border-color-hover | light-dark(transparent, transparent) |
| --ui-switch-global-box-border-color-idle | light-dark(transparent, transparent) |
| --ui-switch-global-box-border-radius | 999px |
| --ui-switch-global-box-border-style | solid |
| --ui-switch-global-box-border-width | 1px |
| --ui-switch-global-box-height | 16px |
| --ui-switch-global-box-padding-x | 2px |
| --ui-switch-global-box-padding-y | 2px |
| --ui-switch-global-box-width | 32px |
| --ui-switch-global-container-gap | 8px |
| --ui-switch-global-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-switch-global-tick-border-radius | 999px |
| --ui-switch-global-tick-color-active | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-switch-global-tick-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-switch-global-tick-color-hover | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-switch-global-tick-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-switch-global-tick-size | 12px |
| --ui-switch-off-box-color-active | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-switch-off-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-switch-off-box-color-hover | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-switch-off-box-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-switch-on-box-color-active | light-dark(rgb(70 185 89), rgb(70 185 89)) |
| --ui-switch-on-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-switch-on-box-color-hover | light-dark(rgb(70 185 89), rgb(70 185 89)) |
| --ui-switch-on-box-color-idle | light-dark(rgb(70 185 89), rgb(70 185 89)) |
Table (21)
| Token | Value |
|---|---|
| --ui-table-data-gap | 8px |
| --ui-table-data-value-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-table-data-value-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-table-global-cell-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-table-global-cell-border-style | solid |
| --ui-table-global-cell-border-width | 1px |
| --ui-table-global-cell-min-height | 40px |
| --ui-table-global-cell-padding-x | 16px |
| --ui-table-global-cell-padding-y | 8px |
| --ui-table-global-row-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-table-global-row-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-table-global-row-color-idle | light-dark(transparent, transparent) |
| --ui-table-header-cell-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-table-header-cell-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-table-header-cell-color-idle | light-dark(transparent, transparent) |
| --ui-table-header-cell-padding-x | 16px |
| --ui-table-header-gap | 8px |
| --ui-table-header-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-table-header-sort-icon-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-table-header-sort-icon-color-inactive | light-dark(rgb(201 204 207), rgb(73 76 80)) |
| --ui-table-header-sort-icon-size | 16px |
Tag (39)
| Token | Value |
|---|---|
| --ui-tag-ai-container-border-color | linear-gradient(90deg, rgb(56 73 224) 20%, rgb(252 45 241) 100%) |
| --ui-tag-ai-container-color | light-dark(rgb(249 245 251), rgb(62 15 62)) |
| --ui-tag-ai-icon-color | light-dark(rgb(130 23 130), rgb(250 209 250)) |
| --ui-tag-ai-label-color | light-dark(rgb(130 23 130), rgb(250 209 250)) |
| --ui-tag-critical-container-border-color | light-dark(rgb(255 204 153), rgb(153 69 0)) |
| --ui-tag-critical-container-color | light-dark(rgb(255 240 230), rgb(77 35 0)) |
| --ui-tag-critical-icon-color | light-dark(rgb(153 69 0), rgb(255 222 194)) |
| --ui-tag-critical-label-color | light-dark(rgb(153 69 0), rgb(255 222 194)) |
| --ui-tag-danger-container-border-color | light-dark(rgb(248 195 195), rgb(151 27 27)) |
| --ui-tag-danger-container-color | light-dark(rgb(253 237 237), rgb(87 15 15)) |
| --ui-tag-danger-icon-color | light-dark(rgb(152 27 27), rgb(251 218 218)) |
| --ui-tag-danger-label-color | light-dark(rgb(152 27 27), rgb(251 218 218)) |
| --ui-tag-global-container-border-radius | 999px |
| --ui-tag-global-container-border-width | 1px |
| --ui-tag-global-container-gap | 4px |
| --ui-tag-global-container-padding-x | 8px |
| --ui-tag-global-container-padding-y | 0px |
| --ui-tag-global-container-width-max | 256px |
| --ui-tag-global-container-width-min | 32px |
| --ui-tag-global-md-container-height | 24px |
| --ui-tag-global-md-icon-border-width | 1.6px |
| --ui-tag-global-md-icon-size | 16px |
| --ui-tag-global-sm-container-height | 20px |
| --ui-tag-info-container-border-color | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-tag-info-container-color | light-dark(rgb(238 242 247), rgb(26 47 77)) |
| --ui-tag-info-icon-color | light-dark(rgb(6 54 121), rgb(214 228 245)) |
| --ui-tag-info-label-color | light-dark(rgb(6 54 121), rgb(214 228 245)) |
| --ui-tag-neutral-container-border-color | light-dark(rgb(201 204 207), rgb(73 76 80)) |
| --ui-tag-neutral-container-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-tag-neutral-icon-color | light-dark(rgb(61 63 67), rgb(215 217 219)) |
| --ui-tag-neutral-label-color | light-dark(rgb(61 63 67), rgb(215 217 219)) |
| --ui-tag-success-container-border-color | light-dark(rgb(178 229 187), rgb(26 102 38)) |
| --ui-tag-success-container-color | light-dark(rgb(238 247 239), rgb(3 58 17)) |
| --ui-tag-success-icon-color | light-dark(rgb(15 87 33), rgb(209 240 214)) |
| --ui-tag-success-label-color | light-dark(rgb(15 87 33), rgb(209 240 214)) |
| --ui-tag-warning-container-border-color | light-dark(rgb(255 227 128), rgb(178 128 0)) |
| --ui-tag-warning-container-color | light-dark(rgb(255 249 229), rgb(102 73 0)) |
| --ui-tag-warning-icon-color | light-dark(rgb(138 99 0), rgb(255 238 178)) |
| --ui-tag-warning-label-color | light-dark(rgb(138 99 0), rgb(255 238 178)) |
Tooltip (7)
| Token | Value |
|---|---|
| --ui-tooltip-container-border-radius | 4px |
| --ui-tooltip-container-color | light-dark(rgb(25 27 35), rgb(255 255 255)) |
| --ui-tooltip-container-padding-x | 12px |
| --ui-tooltip-container-padding-y | 8px |
| --ui-tooltip-container-width-max | 256px |
| --ui-tooltip-container-width-min | 48px |
| --ui-tooltip-label-color | light-dark(rgb(255 255 255), rgb(255 255 255)) |