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 (245)
| 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-dataviz-categorical-1 | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-dataviz-categorical-10 | light-dark(rgb(152 27 152), rgb(247 186 247)) |
| --ui-dataviz-categorical-11 | light-dark(rgb(10 92 85), rgb(178 230 225)) |
| --ui-dataviz-categorical-12 | light-dark(rgb(173 31 31), rgb(248 195 195)) |
| --ui-dataviz-categorical-13 | light-dark(rgb(11 66 142), rgb(117 174 240)) |
| --ui-dataviz-categorical-14 | light-dark(rgb(102 73 0), rgb(255 244 204)) |
| --ui-dataviz-categorical-15 | light-dark(rgb(15 87 33), rgb(209 240 214)) |
| --ui-dataviz-categorical-16 | light-dark(rgb(214 228 245), rgb(38 70 115)) |
| --ui-dataviz-categorical-2 | light-dark(rgb(214 96 0), rgb(255 178 102)) |
| --ui-dataviz-categorical-3 | light-dark(rgb(51 153 145), rgb(51 153 145)) |
| --ui-dataviz-categorical-4 | light-dark(rgb(221 60 221), rgb(221 60 221)) |
| --ui-dataviz-categorical-5 | light-dark(rgb(178 128 0), rgb(255 227 128)) |
| --ui-dataviz-categorical-6 | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-dataviz-categorical-7 | light-dark(rgb(36 143 54), rgb(107 199 122)) |
| --ui-dataviz-categorical-8 | light-dark(rgb(117 174 240), rgb(48 89 145)) |
| --ui-dataviz-categorical-9 | light-dark(rgb(245 184 0), rgb(245 184 0)) |
| --ui-dataviz-diverging-blue-orange-a1 | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-dataviz-diverging-blue-orange-a2 | light-dark(rgb(117 174 240), rgb(48 89 145)) |
| --ui-dataviz-diverging-blue-orange-a3 | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-dataviz-diverging-blue-orange-b1 | light-dark(rgb(255 204 153), rgb(153 69 0)) |
| --ui-dataviz-diverging-blue-orange-b2 | light-dark(rgb(255 128 0), rgb(255 128 0)) |
| --ui-dataviz-diverging-blue-orange-b3 | light-dark(rgb(214 96 0), rgb(255 178 102)) |
| --ui-dataviz-diverging-teal-violet-a1 | light-dark(rgb(178 230 225), rgb(10 92 85)) |
| --ui-dataviz-diverging-teal-violet-a2 | light-dark(rgb(121 210 203), rgb(26 102 94)) |
| --ui-dataviz-diverging-teal-violet-a3 | light-dark(rgb(51 153 145), rgb(51 153 145)) |
| --ui-dataviz-diverging-teal-violet-b1 | light-dark(rgb(228 204 237), rgb(130 23 130)) |
| --ui-dataviz-diverging-teal-violet-b2 | light-dark(rgb(221 60 221), rgb(221 60 221)) |
| --ui-dataviz-diverging-teal-violet-b3 | light-dark(rgb(173 31 173), rgb(242 140 242)) |
| --ui-dataviz-meaningful-status-critical | light-dark(rgb(255 128 0), rgb(255 128 0)) |
| --ui-dataviz-meaningful-status-danger | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-dataviz-meaningful-status-info | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-dataviz-meaningful-status-neutral | light-dark(rgb(109 114 120), rgb(109 114 120)) |
| --ui-dataviz-meaningful-status-success | light-dark(rgb(41 163 61), rgb(72 209 94)) |
| --ui-dataviz-meaningful-status-warning | light-dark(rgb(245 184 0), rgb(245 184 0)) |
| --ui-dataviz-sequential-blue-1 | light-dark(rgb(226 235 245), rgb(32 58 95)) |
| --ui-dataviz-sequential-blue-2 | light-dark(rgb(214 228 245), rgb(38 70 115)) |
| --ui-dataviz-sequential-blue-3 | light-dark(rgb(117 174 240), rgb(48 89 145)) |
| --ui-dataviz-sequential-blue-4 | light-dark(rgb(48 125 232), rgb(83 131 197)) |
| --ui-dataviz-sequential-blue-5 | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-dataviz-sequential-blue-6 | light-dark(rgb(13 77 165), rgb(140 176 217)) |
| --ui-dataviz-sequential-blue-7 | light-dark(rgb(6 54 121), rgb(214 228 245)) |
| --ui-dataviz-sequential-blue-8 | light-dark(rgb(3 43 99), rgb(226 235 245)) |
| --ui-dataviz-sequential-orange-1 | light-dark(rgb(255 231 214), rgb(102 45 0)) |
| --ui-dataviz-sequential-orange-2 | light-dark(rgb(255 204 153), rgb(153 69 0)) |
| --ui-dataviz-sequential-orange-3 | light-dark(rgb(255 178 102), rgb(214 96 0)) |
| --ui-dataviz-sequential-orange-4 | light-dark(rgb(255 153 51), rgb(240 112 0)) |
| --ui-dataviz-sequential-orange-5 | light-dark(rgb(255 128 0), rgb(255 128 0)) |
| --ui-dataviz-sequential-orange-6 | light-dark(rgb(214 96 0), rgb(255 178 102)) |
| --ui-dataviz-sequential-orange-7 | light-dark(rgb(153 69 0), rgb(255 222 194)) |
| --ui-dataviz-sequential-orange-8 | light-dark(rgb(128 57 0), rgb(255 231 214)) |
| --ui-dataviz-sequential-teal-1 | light-dark(rgb(226 245 244), rgb(3 58 54)) |
| --ui-dataviz-sequential-teal-2 | light-dark(rgb(178 230 225), rgb(10 92 85)) |
| --ui-dataviz-sequential-teal-3 | light-dark(rgb(121 210 203), rgb(26 102 94)) |
| --ui-dataviz-sequential-teal-4 | light-dark(rgb(70 185 175), rgb(31 122 115)) |
| --ui-dataviz-sequential-teal-5 | light-dark(rgb(51 153 145), rgb(51 153 145)) |
| --ui-dataviz-sequential-teal-6 | light-dark(rgb(26 102 94), rgb(121 210 203)) |
| --ui-dataviz-sequential-teal-7 | light-dark(rgb(4 73 67), rgb(209 240 237)) |
| --ui-dataviz-sequential-teal-8 | light-dark(rgb(3 58 54), rgb(226 245 244)) |
| --ui-dataviz-sequential-violet-1 | light-dark(rgb(245 238 248), rgb(87 15 87)) |
| --ui-dataviz-sequential-violet-2 | light-dark(rgb(228 204 237), rgb(130 23 130)) |
| --ui-dataviz-sequential-violet-3 | light-dark(rgb(222 186 235), rgb(173 31 173)) |
| --ui-dataviz-sequential-violet-4 | light-dark(rgb(214 164 231), rgb(195 34 195)) |
| --ui-dataviz-sequential-violet-5 | light-dark(rgb(221 60 221), rgb(221 60 221)) |
| --ui-dataviz-sequential-violet-6 | light-dark(rgb(173 31 173), rgb(242 140 242)) |
| --ui-dataviz-sequential-violet-7 | light-dark(rgb(130 23 130), rgb(250 209 250)) |
| --ui-dataviz-sequential-violet-8 | light-dark(rgb(108 19 108), rgb(252 227 252)) |
| --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-gap-0 | 0px |
| --ui-gap-12 | 12px |
| --ui-gap-16 | 16px |
| --ui-gap-2 | 2px |
| --ui-gap-20 | 20px |
| --ui-gap-24 | 24px |
| --ui-gap-32 | 32px |
| --ui-gap-4 | 4px |
| --ui-gap-40 | 40px |
| --ui-gap-48 | 48px |
| --ui-gap-56 | 56px |
| --ui-gap-6 | 6px |
| --ui-gap-64 | 64px |
| --ui-gap-72 | 72px |
| --ui-gap-8 | 8px |
| --ui-gap-88 | 88px |
| --ui-gap-96 | 96px |
| --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-strong-primary | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --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-neutral-dark | light-dark(rgb(73 76 80), rgb(201 204 207)) |
| --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-shadow-lg | 0px 24px 48px 0px light-dark(rgb(0 0 0 / 0.502), rgb(0 0 0 / 0.302)) |
| --ui-shadow-md | 0px 16px 32px 0px light-dark(rgb(0 0 0 / 0.102), rgb(0 0 0 / 0.4)) |
| --ui-shadow-sm | 0px 8px 16px 0px light-dark(rgb(0 0 0 / 0.302), rgb(0 0 0 / 0.698)) |
| --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-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-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --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(24 25 27)) |
| --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-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-idle | light-dark(rgb(6 54 121), rgb(214 228 245)) |
| --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-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-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --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(97 101 107), rgb(135 139 146)) |
Alert (33)
| Token | Value |
|---|---|
| --ui-alert-critical-border-color | light-dark(rgb(240 112 0), rgb(255 153 51)) |
| --ui-alert-critical-left-line | light-dark(rgb(255 128 0), rgb(255 128 0)) |
| --ui-alert-danger-border-color | light-dark(rgb(217 38 38), rgb(237 94 94)) |
| --ui-alert-danger-left-line | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-alert-global-container-background | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-alert-global-container-border-radius | 8px |
| --ui-alert-global-container-border-width | 1px |
| --ui-alert-global-container-gap | 8px |
| --ui-alert-global-container-padding-x | 16px |
| --ui-alert-global-container-padding-y | 8px |
| --ui-alert-global-container-status-width | 6px |
| --ui-alert-global-container-width-min | 384px |
| --ui-alert-global-content-actions-container-gap-x | 16px |
| --ui-alert-global-content-actions-container-gap-y | 8px |
| --ui-alert-global-content-actions-container-padding-x | 0px |
| --ui-alert-global-content-actions-container-padding-y | 8px |
| --ui-alert-global-content-gap | 0px |
| --ui-alert-global-content-padding-x | 0px |
| --ui-alert-global-content-padding-y | 0px |
| --ui-alert-global-content-text-container-description-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-alert-global-content-text-container-gap | 0px |
| --ui-alert-global-content-text-container-padding-x | 0px |
| --ui-alert-global-content-text-container-padding-y | 4px |
| --ui-alert-global-content-text-container-title-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-alert-global-icon-padding-x | 4px |
| --ui-alert-global-icon-padding-y | 8px |
| --ui-alert-global-icon-size | 16px |
| --ui-alert-info-border-color | light-dark(rgb(19 84 174), rgb(121 158 210)) |
| --ui-alert-info-left-line | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-alert-success-border-color | light-dark(rgb(36 143 54), rgb(107 199 122)) |
| --ui-alert-success-left-line | light-dark(rgb(41 163 61), rgb(72 209 94)) |
| --ui-alert-warning-border-color | light-dark(rgb(229 164 0), rgb(255 196 0)) |
| --ui-alert-warning-left-line | light-dark(rgb(245 184 0), rgb(245 184 0)) |
AlertRibbon (26)
| Token | Value |
|---|---|
| --ui-alert-ribbon-critical-background | light-dark(rgb(255 240 230), rgb(77 35 0)) |
| --ui-alert-ribbon-critical-carousel | light-dark(rgb(255 240 230), rgb(77 35 0)) |
| --ui-alert-ribbon-critical-divider | light-dark(rgb(255 204 153), rgb(153 69 0)) |
| --ui-alert-ribbon-danger-background | light-dark(rgb(253 237 237), rgb(87 15 15)) |
| --ui-alert-ribbon-danger-carousel | light-dark(rgb(253 237 237), rgb(87 15 15)) |
| --ui-alert-ribbon-danger-divider | light-dark(rgb(248 195 195), rgb(151 27 27)) |
| --ui-alert-ribbon-global-carousel-counter-text-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-alert-ribbon-global-carousel-gap | 8px |
| --ui-alert-ribbon-global-container-gap | 32px |
| --ui-alert-ribbon-global-container-height | 48px |
| --ui-alert-ribbon-global-container-padding-xleft | 16px |
| --ui-alert-ribbon-global-container-padding-xright | 0px |
| --ui-alert-ribbon-global-container-padding-y | 0px |
| --ui-alert-ribbon-global-container-width-min | 512px |
| --ui-alert-ribbon-global-content-description-color-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-alert-ribbon-global-content-gap | 8px |
| --ui-alert-ribbon-global-icon-size | 16px |
| --ui-alert-ribbon-info-background | light-dark(rgb(238 242 247), rgb(26 47 77)) |
| --ui-alert-ribbon-info-carousel | light-dark(rgb(238 242 247), rgb(26 47 77)) |
| --ui-alert-ribbon-info-divider | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-alert-ribbon-success-background | light-dark(rgb(238 247 239), rgb(3 58 17)) |
| --ui-alert-ribbon-success-carousel | light-dark(rgb(238 247 239), rgb(3 58 17)) |
| --ui-alert-ribbon-success-divider | light-dark(rgb(178 229 187), rgb(26 102 38)) |
| --ui-alert-ribbon-warning-background | light-dark(rgb(255 249 229), rgb(102 73 0)) |
| --ui-alert-ribbon-warning-carousel | light-dark(rgb(255 249 229), rgb(102 73 0)) |
| --ui-alert-ribbon-warning-divider | light-dark(rgb(255 227 128), rgb(178 128 0)) |
Avatar (24)
| Token | Value |
|---|---|
| --ui-avatar-color-blue | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-avatar-color-gray | light-dark(rgb(215 217 219), rgb(61 63 67)) |
| --ui-avatar-color-green | light-dark(rgb(209 240 214), rgb(15 87 33)) |
| --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-blue | light-dark(rgb(6 54 121), rgb(190 215 244)) |
| --ui-avatar-label-color-gray | light-dark(rgb(61 63 67), rgb(215 217 219)) |
| --ui-avatar-label-color-green | light-dark(rgb(15 87 33), rgb(209 240 214)) |
| --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(97 101 107), rgb(135 139 146)) |
| --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), rgb(255 255 255)) |
| --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), rgb(255 255 255)) |
| --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), rgb(255 255 255)) |
| --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), rgb(255 255 255)) |
| --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), rgb(255 255 255)) |
| --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(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-secondary-container-border-color-disabled | light-dark(rgb(214 228 245), rgb(38 70 115)) |
| --ui-button-secondary-container-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-secondary-container-border-color-idle | light-dark(rgb(214 228 245), rgb(38 70 115)) |
| --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)) |
ButtonGroup (11)
| Token | Value |
|---|---|
| --ui-button-group-global-box-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-button-group-global-box-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-button-group-global-box-color-idle | light-dark(transparent, transparent) |
| --ui-button-group-global-box-height | 32px |
| --ui-button-group-global-box-padding-x | 12px |
| --ui-button-group-global-box-padding-y | 8px |
| --ui-button-group-global-container-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-group-global-container-border-radius | 4px |
| --ui-button-group-global-container-border-width | 1px |
| --ui-button-group-global-separator-border-width | 1px |
| --ui-button-group-global-separator-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
ButtonIcon (20)
| 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-container-padding-y | 4px |
| --ui-button-icon-global-container-width | 32px |
| --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 | 16px |
| --ui-button-icon-secondary-container-border-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-icon-secondary-container-border-color-disabled | light-dark(rgb(214 228 245), rgb(38 70 115)) |
| --ui-button-icon-secondary-container-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-icon-secondary-container-border-color-idle | light-dark(rgb(214 228 245), rgb(38 70 115)) |
| --ui-button-icon-secondary-container-border-style | solid |
| --ui-button-icon-secondary-container-border-width | 1px |
ButtonIconInput (22)
| Token | Value |
|---|---|
| --ui-button-icon-input-error-container-color-active | light-dark(rgb(251 218 218), rgb(130 23 23)) |
| --ui-button-icon-input-error-container-color-disabled | light-dark(transparent, transparent) |
| --ui-button-icon-input-error-container-color-hover | light-dark(rgb(253 237 237), rgb(87 15 15)) |
| --ui-button-icon-input-error-container-color-idle | light-dark(transparent, transparent) |
| --ui-button-icon-input-error-icon-color-active | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-button-icon-input-error-icon-color-hover | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-button-icon-input-error-icon-color-idle | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-button-icon-input-error-icon-size | 16px |
| --ui-button-icon-input-global-container-border-radius | 4px |
| --ui-button-icon-input-global-container-height | 20px |
| --ui-button-icon-input-global-container-padding-x | 2px |
| --ui-button-icon-input-global-container-padding-y | 2px |
| --ui-button-icon-input-global-container-width | 20px |
| --ui-button-icon-input-normal-container-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-button-icon-input-normal-container-color-disabled | light-dark(transparent, transparent) |
| --ui-button-icon-input-normal-container-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-button-icon-input-normal-container-color-idle | light-dark(transparent, transparent) |
| --ui-button-icon-input-normal-icon-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-icon-input-normal-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-button-icon-input-normal-icon-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-icon-input-normal-icon-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-icon-input-normal-icon-size | 16px |
ButtonMenu (55)
| 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-container-width-min | 128px |
| --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(97 101 107), rgb(135 139 146)) |
| --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 | 8px |
| --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(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-secondary-container-border-color-disabled | light-dark(rgb(214 228 245), rgb(38 70 115)) |
| --ui-button-menu-secondary-container-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-button-menu-secondary-container-border-color-idle | light-dark(rgb(214 228 245), rgb(38 70 115)) |
| --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)) |
Calendar (29)
| Token | Value |
|---|---|
| --ui-calendar-body-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-calendar-body-border-style | solid |
| --ui-calendar-body-border-width | 1px |
| --ui-calendar-body-padding-x | 12px |
| --ui-calendar-body-padding-y | 12px |
| --ui-calendar-container-border-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-calendar-container-border-radius | 4px |
| --ui-calendar-container-border-style | solid |
| --ui-calendar-container-border-width | 1px |
| --ui-calendar-container-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-calendar-header-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-calendar-header-border-style | solid |
| --ui-calendar-header-border-width | 1px |
| --ui-calendar-header-gap | 16px |
| --ui-calendar-header-padding-x | 12px |
| --ui-calendar-header-padding-y | 12px |
| --ui-calendar-item-border-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-calendar-item-border-hover | light-dark(transparent, transparent) |
| --ui-calendar-item-border-idle | light-dark(transparent, transparent) |
| --ui-calendar-item-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-calendar-item-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-calendar-item-color-idle | light-dark(transparent, transparent) |
| --ui-calendar-item-height-min | 32px |
| --ui-calendar-item-width-min | 32px |
| --ui-calendar-value-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-calendar-value-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-calendar-value-color-idle-primary | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-calendar-value-color-idle-secondary | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --ui-calendar-value-font-variant-numeric | tabular-nums |
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(23 99 207), rgb(81 157 246)) |
| --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(23 99 207), rgb(81 157 246)) |
| --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(97 101 107), rgb(135 139 146)) |
| --ui-card-filter-static-value-color-disabled | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --ui-card-filter-static-value-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
Carousel (1)
| Token | Value |
|---|---|
| --ui-carousel-dialog-list-indicator-gap | 6px |
Chat (23)
| Token | Value |
|---|---|
| --ui-chat-container-collapsed-width | 48px |
| --ui-chat-container-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-chat-container-expanded-max-width | 512px |
| --ui-chat-container-expanded-min-width | 384px |
| --ui-chat-global-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-chat-global-border-style | solid |
| --ui-chat-global-border-width | 1px |
| --ui-chat-header-height | 64px |
| --ui-chat-header-padding-x | 16px |
| --ui-chat-menu-item-collapsed-max-width | 48px |
| --ui-chat-menu-item-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-chat-menu-item-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-chat-menu-item-color-idle | light-dark(transparent, transparent) |
| --ui-chat-menu-item-expanded-gap | 8px |
| --ui-chat-menu-item-expanded-min-width | 224px |
| --ui-chat-menu-item-height | 40px |
| --ui-chat-menu-item-hint-color | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --ui-chat-menu-item-icon-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-chat-menu-item-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-chat-menu-item-padding-x | 16px |
| --ui-chat-sidebar-container-width | 256px |
| --ui-chat-sidebar-header-height | 64px |
| --ui-chat-sidebar-header-padding-x | 16px |
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(97 101 107), rgb(135 139 146)) |
| --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)) |
Dialog (17)
| Token | Value |
|---|---|
| --ui-dialog-body-gap | 12px |
| --ui-dialog-body-height-min | 72px |
| --ui-dialog-body-padding-y | 16px |
| --ui-dialog-container-border-radius | 8px |
| --ui-dialog-container-color | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-dialog-container-height-min | 224px |
| --ui-dialog-container-size-md | 632px |
| --ui-dialog-container-size-sm | 512px |
| --ui-dialog-container-width-min | 256px |
| --ui-dialog-header-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-dialog-header-border-style | solid |
| --ui-dialog-header-border-width | 1px |
| --ui-dialog-header-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-dialog-header-gap | 16px |
| --ui-dialog-header-height | 64px |
| --ui-dialog-header-padding-x | 16px |
| --ui-dialog-header-title-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
Footer (8)
| Token | Value |
|---|---|
| --ui-footer-carousel-color | light-dark(transparent, transparent) |
| --ui-footer-default-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-footer-default-border-style | solid |
| --ui-footer-default-border-width | 1px |
| --ui-footer-default-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-footer-global-gap | 16px |
| --ui-footer-global-height | 64px |
| --ui-footer-global-padding-x | 16px |
InputDatePicker (43)
| 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-icon-box-size | 20px |
| --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(97 101 107), rgb(135 139 146)) |
| --ui-input-date-picker-global-placeholder-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --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(97 101 107), rgb(135 139 146)) |
| --ui-input-date-picker-normal-description-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --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)) |
InputNumPicker (22)
| Token | Value |
|---|---|
| --ui-input-num-picker-global-box-border-radius | 4px |
| --ui-input-num-picker-global-box-border-width | 1px |
| --ui-input-num-picker-global-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-input-num-picker-global-box-color-hover | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-num-picker-global-box-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-num-picker-global-box-gap | 12px |
| --ui-input-num-picker-global-box-height | 32px |
| --ui-input-num-picker-global-box-padding-x | 12px |
| --ui-input-num-picker-global-box-padding-y | 4px |
| --ui-input-num-picker-global-container-gap | 4px |
| --ui-input-num-picker-global-container-label-gap | 4px |
| --ui-input-num-picker-global-container-width-min | 128px |
| --ui-input-num-picker-global-label-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-num-picker-global-label-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-num-picker-global-label-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-num-picker-global-required-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-num-picker-global-value-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-num-picker-global-value-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-num-picker-global-value-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-num-picker-normal-box-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-num-picker-normal-box-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-num-picker-normal-box-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
InputOTP (16)
| Token | Value |
|---|---|
| --ui-input-otp-box-border-color-active | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-otp-box-border-color-error | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-otp-box-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-otp-box-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-otp-box-border-radius | 4px |
| --ui-input-otp-box-border-width | 1px |
| --ui-input-otp-box-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-otp-box-height | 76px |
| --ui-input-otp-box-padding-x | 12px |
| --ui-input-otp-box-padding-y | 12px |
| --ui-input-otp-box-width | 48px |
| --ui-input-otp-container-justify-content | space-between |
| --ui-input-otp-placeholder-color | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-otp-placeholder-font-variant-numeric | tabular-nums |
| --ui-input-otp-value-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-otp-value-font-variant-numeric | tabular-nums |
InputPassword (31)
| Token | Value |
|---|---|
| --ui-input-password-error-msg-box-border-color-hover | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-password-error-msg-box-border-color-idle | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-password-error-msg-error-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-password-global-box-border-radius | 4px |
| --ui-input-password-global-box-border-width | 1px |
| --ui-input-password-global-box-color-disabled | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-input-password-global-box-color-hover | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-password-global-box-color-idle | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-input-password-global-box-gap | 12px |
| --ui-input-password-global-box-height | 32px |
| --ui-input-password-global-box-padding-x | 12px |
| --ui-input-password-global-box-padding-y | 4px |
| --ui-input-password-global-container-gap | 4px |
| --ui-input-password-global-container-label-gap | 4px |
| --ui-input-password-global-container-width-min | 128px |
| --ui-input-password-global-label-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-password-global-label-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-password-global-label-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-password-global-placeholder-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-password-global-placeholder-color-hover | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --ui-input-password-global-placeholder-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --ui-input-password-global-required-color | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-input-password-global-value-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-password-global-value-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-password-global-value-color-idle | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-input-password-normal-box-border-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-password-normal-box-border-color-hover | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-input-password-normal-box-border-color-idle | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-input-password-normal-description-color-disabled | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-input-password-normal-description-color-hover | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --ui-input-password-normal-description-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
InputSearch (28)
| 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-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(97 101 107), rgb(135 139 146)) |
| --ui-input-search-placeholder-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --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 (80)
| 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(97 101 107), rgb(135 139 146)) |
| --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 | 8px |
| --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-icon-box-size | 20px |
| --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(97 101 107), rgb(135 139 146)) |
| --ui-input-select-global-placeholder-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --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(97 101 107), rgb(135 139 146)) |
| --ui-input-select-normal-description-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --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 (31)
| 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-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(97 101 107), rgb(135 139 146)) |
| --ui-input-text-global-placeholder-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --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(97 101 107), rgb(135 139 146)) |
| --ui-input-text-normal-description-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
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(97 101 107), rgb(135 139 146)) |
| --ui-input-text-area-description-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --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(97 101 107), rgb(135 139 146)) |
| --ui-input-text-area-placeholder-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --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 (20)
| Token | Value |
|---|---|
| --ui-link-global-container-gap | 4px |
| --ui-link-global-container-height | 32px |
| --ui-link-global-text-decoration-active | none |
| --ui-link-global-text-decoration-disabled | none |
| --ui-link-global-text-decoration-hover | underline |
| --ui-link-global-text-decoration-idle | none |
| --ui-link-inverse-external-icon-color-active | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-link-inverse-external-icon-color-hover | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-link-inverse-external-icon-color-idle | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-link-inverse-text-color-active | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-link-inverse-text-color-hover | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-link-inverse-text-color-idle | light-dark(rgb(190 215 244), rgb(41 81 122)) |
| --ui-link-normal-external-icon-color-active | light-dark(rgb(6 54 121), rgb(190 215 244)) |
| --ui-link-normal-external-icon-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-link-normal-external-icon-color-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-link-normal-external-icon-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-link-normal-text-color-active | light-dark(rgb(6 54 121), rgb(190 215 244)) |
| --ui-link-normal-text-color-disabled | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-link-normal-text-color-hover | light-dark(rgb(19 84 174), rgb(23 99 207)) |
| --ui-link-normal-text-color-idle | light-dark(rgb(23 99 207), rgb(81 157 246)) |
Loading (20)
| Token | Value |
|---|---|
| --ui-loading-element-container-color-primary | light-dark(rgb(255 255 255 / 0.949), rgb(48 50 54 / 0.949)) |
| --ui-loading-element-container-color-secondary | light-dark(rgb(248 250 252 / 0.949), rgb(24 25 27 / 0.949)) |
| --ui-loading-element-container-gap | 8px |
| --ui-loading-element-container-padding-x | 16px |
| --ui-loading-element-container-padding-y | 16px |
| --ui-loading-element-icon-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-loading-element-icon-size | 32px |
| --ui-loading-element-label-color | light-dark(rgb(25 27 35), rgb(255 255 255)) |
| --ui-loading-inline-container-gap | 8px |
| --ui-loading-inline-container-height | 24px |
| --ui-loading-inline-icon-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-loading-inline-icon-size | 16px |
| --ui-loading-inline-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-loading-screen-container-color | light-dark(rgb(25 27 35 / 0.898), rgb(25 27 35 / 0.898)) |
| --ui-loading-screen-container-gap | 8px |
| --ui-loading-screen-container-padding-x | 16px |
| --ui-loading-screen-container-padding-y | 16px |
| --ui-loading-screen-icon-color | light-dark(rgb(255 255 255), rgb(255 255 255)) |
| --ui-loading-screen-icon-size | 48px |
| --ui-loading-screen-label-color | light-dark(rgb(255 255 255), rgb(255 255 255)) |
Popover (9)
| Token | Value |
|---|---|
| --ui-popover-body-gap | 12px |
| --ui-popover-body-padding-y | 16px |
| --ui-popover-container-border-color | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-popover-container-border-radius | 4px |
| --ui-popover-container-border-style | solid |
| --ui-popover-container-border-width | 1px |
| --ui-popover-container-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-popover-container-max-width | 512px |
| --ui-popover-container-min-width | 320px |
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(97 101 107), rgb(135 139 146)) |
| --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 (5)
| Token | Value |
|---|---|
| --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 |
SegmentControl (33)
| Token | Value |
|---|---|
| --ui-segment-control-box-icon-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-segment-control-box-icon-border-style | solid |
| --ui-segment-control-box-icon-border-width | 1px |
| --ui-segment-control-box-icon-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-segment-control-box-icon-color-hover | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-segment-control-box-icon-color-idle | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-segment-control-box-icon-height | 40px |
| --ui-segment-control-box-icon-width | 32px |
| --ui-segment-control-container-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-segment-control-container-border-radius | 8px |
| --ui-segment-control-container-border-style | solid |
| --ui-segment-control-container-border-width | 1px |
| --ui-segment-control-container-color | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-segment-control-container-gap | 8px |
| --ui-segment-control-container-height | 40px |
| --ui-segment-control-container-padding-x | 4px |
| --ui-segment-control-container-padding-y | 4px |
| --ui-segment-control-item-border-color-active | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-segment-control-item-border-color-hover | light-dark(transparent, transparent) |
| --ui-segment-control-item-border-color-idle | light-dark(transparent, transparent) |
| --ui-segment-control-item-border-radius | 4px |
| --ui-segment-control-item-border-style | solid |
| --ui-segment-control-item-border-width | 1px |
| --ui-segment-control-item-color-active | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-segment-control-item-color-hover | light-dark(transparent, transparent) |
| --ui-segment-control-item-color-idle | light-dark(transparent, transparent) |
| --ui-segment-control-item-gap | 8px |
| --ui-segment-control-item-height | 32px |
| --ui-segment-control-item-padding-x | 12px |
| --ui-segment-control-item-padding-y | 4px |
| --ui-segment-control-value-color-active | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-segment-control-value-color-hover | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-segment-control-value-color-idle | light-dark(rgb(97 101 107), rgb(135 139 146)) |
SideSheet (9)
| Token | Value |
|---|---|
| --ui-side-sheet-container-color | light-dark(rgb(248 250 252), rgb(24 25 27)) |
| --ui-side-sheet-header-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-side-sheet-header-border-style | solid |
| --ui-side-sheet-header-border-width | 1px |
| --ui-side-sheet-header-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-side-sheet-header-gap | 16px |
| --ui-side-sheet-header-padding-x | 16px |
| --ui-side-sheet-header-padding-y | 16px |
| --ui-side-sheet-header-title-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
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(97 101 107), rgb(135 139 146)) |
| --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 | 16px |
| --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(97 101 107), rgb(135 139 146)) |
| --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 | 40px |
| --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 |
Stepper (21)
| Token | Value |
|---|---|
| --ui-stepper-breakpoint-default-label-color | light-dark(rgb(97 101 107), rgb(135 139 146)) |
| --ui-stepper-breakpoint-default-line-gap | 4px |
| --ui-stepper-breakpoint-default-value-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-stepper-breakpoint-lg-container-gap | 8px |
| --ui-stepper-item-completed-container-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-stepper-item-completed-container-color-focus-ring | light-dark(rgb(190 215 244), rgb(81 157 246)) |
| --ui-stepper-item-completed-container-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-stepper-item-completed-container-color-idle | light-dark(transparent, transparent) |
| --ui-stepper-item-completed-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-stepper-item-current-container-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-stepper-item-current-container-border-width | 1px |
| --ui-stepper-item-current-container-color | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-stepper-item-current-label-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-stepper-item-future-container-color | light-dark(transparent, transparent) |
| --ui-stepper-item-future-label-color | light-dark(rgb(175 178 182), rgb(85 89 94)) |
| --ui-stepper-item-global-container-border-radius | 8px |
| --ui-stepper-item-global-container-gap | 8px |
| --ui-stepper-item-global-container-padding-l | 8px |
| --ui-stepper-item-global-container-padding-r | 16px |
| --ui-stepper-item-global-container-padding-x | 8px |
| --ui-stepper-item-global-container-padding-y | 8px |
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 (25)
| Token | Value |
|---|---|
| --ui-table-data-cell-color-active | light-dark(rgb(226 235 245), rgb(48 50 54)) |
| --ui-table-data-cell-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-table-data-cell-color-idle | light-dark(transparent, transparent) |
| --ui-table-data-gap | 8px |
| --ui-table-data-row-color-active | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-table-data-row-color-hover | light-dark(rgb(238 242 247), rgb(46 47 50)) |
| --ui-table-data-row-color-idle | light-dark(transparent, transparent) |
| --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-icon-margin-y | 4px |
| --ui-table-global-cell-min-height | 40px |
| --ui-table-global-cell-padding-x | 16px |
| --ui-table-global-cell-padding-y | 8px |
| --ui-table-global-cell-tag-margin-y | 2px |
| --ui-table-global-row-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-table-global-row-border-style | solid |
| --ui-table-global-row-border-width | 1px |
| --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-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)) |
Timeline (2)
| Token | Value |
|---|---|
| --ui-timeline-connector-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-timeline-gap | 16px |
Timer (12)
| Token | Value |
|---|---|
| --ui-timer-container-border-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-timer-container-border-style | solid |
| --ui-timer-container-border-width | 1px |
| --ui-timer-container-color | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-timer-container-height | 32px |
| --ui-timer-container-radius | 4px |
| --ui-timer-content-box-divider-color | light-dark(rgb(214 228 245), rgb(48 50 54)) |
| --ui-timer-content-box-divider-style | solid |
| --ui-timer-content-box-divider-width | 1px |
| --ui-timer-content-box-padding-x | 12px |
| --ui-timer-value-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-timer-value-font-variant-numeric | tabular-nums |
Toast (34)
| Token | Value |
|---|---|
| --ui-toast-critical-border-color | light-dark(rgb(240 112 0), rgb(255 153 51)) |
| --ui-toast-critical-left-line | light-dark(rgb(255 128 0), rgb(255 128 0)) |
| --ui-toast-danger-border-color | light-dark(rgb(217 38 38), rgb(237 94 94)) |
| --ui-toast-danger-left-line | light-dark(rgb(226 54 54), rgb(229 77 77)) |
| --ui-toast-global-container-background | light-dark(rgb(255 255 255), rgb(31 32 34)) |
| --ui-toast-global-container-border-radius | 8px |
| --ui-toast-global-container-border-width | 1px |
| --ui-toast-global-container-gap | 8px |
| --ui-toast-global-container-padding-x | 16px |
| --ui-toast-global-container-padding-y | 8px |
| --ui-toast-global-container-shadow | 0px 16px 32px 0px light-dark(rgb(0 0 0 / 0.102), rgb(0 0 0 / 0.4)) |
| --ui-toast-global-container-status-width | 6px |
| --ui-toast-global-container-width-min | 384px |
| --ui-toast-global-content-actions-container-gap-x | 16px |
| --ui-toast-global-content-actions-container-gap-y | 8px |
| --ui-toast-global-content-actions-container-padding-x | 0px |
| --ui-toast-global-content-actions-container-padding-y | 8px |
| --ui-toast-global-content-gap | 0px |
| --ui-toast-global-content-padding-x | 0px |
| --ui-toast-global-content-padding-y | 0px |
| --ui-toast-global-content-text-container-description-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-toast-global-content-text-container-gap | 0px |
| --ui-toast-global-content-text-container-padding-x | 0px |
| --ui-toast-global-content-text-container-padding-y | 4px |
| --ui-toast-global-content-text-container-title-color | light-dark(rgb(24 25 27), rgb(244 245 245)) |
| --ui-toast-global-icon-padding-x | 4px |
| --ui-toast-global-icon-padding-y | 8px |
| --ui-toast-global-icon-size | 16px |
| --ui-toast-info-border-color | light-dark(rgb(19 84 174), rgb(121 158 210)) |
| --ui-toast-info-left-line | light-dark(rgb(23 99 207), rgb(81 157 246)) |
| --ui-toast-success-border-color | light-dark(rgb(36 143 54), rgb(107 199 122)) |
| --ui-toast-success-left-line | light-dark(rgb(41 163 61), rgb(72 209 94)) |
| --ui-toast-warning-border-color | light-dark(rgb(229 164 0), rgb(255 196 0)) |
| --ui-toast-warning-left-line | light-dark(rgb(245 184 0), rgb(245 184 0)) |
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(24 25 27)) |