Tokens
Design tokens
Colors
Semantic text
| Class | Value | Preview |
|---|---|---|
| text-neutral-strong | var(--sb-color-grey-950) oklch(0.2055 0.0039 286.05) | |
| text-neutral-medium | var(--sb-color-grey-700) oklch(0.5103 0 0) | |
| text-neutral-placeholder | var(--sb-color-grey-400) oklch(0.696 0 0) | |
| text-neutral-inverse | var(--sb-color-white) oklch(1 0 0) | |
| text-critical-strong | var(--sb-color-red-900) oklch(0.326 0.132 24.66) | |
| text-critical-vivid | var(--sb-color-red-700) oklch(0.5357 0.21808 26.6206) | |
| text-critical-weak | var(--sb-color-red-200) oklch(0.8646 0.0741 11.43) | |
| text-critical-inverse | var(--sb-color-white) oklch(1 0 0) | |
| text-success-strong | var(--sb-color-green-900) oklch(0.3008 0.0854 148.73) | |
| text-success-vivid | var(--sb-color-green-700) oklch(0.4928 0.1473 146.79) | |
| text-success-weak | var(--sb-color-green-200) oklch(0.836 0.1622 152.29) | |
| text-success-inverse | var(--sb-color-white) oklch(1 0 0) | |
| text-warning-strong | var(--sb-color-orange-900) oklch(0.3142 0.068165 69.7611) | |
| text-warning-vivid | var(--sb-color-orange-700) oklch(0.52 0.1309 53.13) | |
| text-warning-weak | var(--sb-color-orange-200) oklch(0.8605 0.0953 63.44) | |
| text-warning-inverse | var(--sb-color-white) oklch(1 0 0) | |
| text-purple-strong | var(--sb-color-purple-900) oklch(0.3379 0.2039 280.34) | |
| text-purple-vivid | var(--sb-color-purple-700) oklch(0.5421 0.2711 287.73) | |
| text-purple-weak | var(--sb-color-purple-200) oklch(0.8621 0.0786 298.64) | |
| text-purple-inverse | var(--sb-color-white) oklch(1 0 0) | |
| text-pink-strong | var(--sb-color-pink-900) oklch(0.3327 0.1647 312.87) | |
| text-pink-vivid | var(--sb-color-pink-700) oklch(0.5468 0.272 312.33) | |
| text-pink-weak | var(--sb-color-pink-200) oklch(0.8653 0.0983 316.8) | |
| text-pink-inverse | var(--sb-color-white) oklch(1 0 0) | |
| text-cyan-strong | var(--sb-color-cyan-900) oklch(0.3045 0.05218 192.7854) | |
| text-cyan-vivid | var(--sb-color-cyan-700) oklch(0.4991 0.085555 192.6306) | |
| text-cyan-weak | var(--sb-color-cyan-200) oklch(0.8385 0.143968 191.9788) | |
| text-cyan-inverse | var(--sb-color-white) oklch(1 0 0) | |
| text-teal-strong | var(--sb-color-teal-900) oklch(0.3028 0.0607 168.79) | |
| text-teal-vivid | var(--sb-color-teal-700) oklch(0.4958 0.1022 166.5) | |
| text-teal-weak | var(--sb-color-teal-200) oklch(0.833 0.174691 165.1921) | |
| text-teal-inverse | var(--sb-color-white) oklch(1 0 0) | |
| text-yellow-strong | var(--sb-color-yellow-900) oklch(0.3109 0.063551 87.7101) | |
| text-yellow-vivid | var(--sb-color-yellow-700) oklch(0.5113 0.104661 85.9672) | |
| text-yellow-weak | var(--sb-color-yellow-200) oklch(0.8581 0.1692 87.59) | |
| text-yellow-inverse | var(--sb-color-white) oklch(1 0 0) | |
| text-primary-strong | var(--sb-color-primary-900) var(--sb-color-blue-900) oklch(0.3294 0.1877 267.67) | |
| text-primary-vivid | var(--sb-color-primary-700) var(--sb-color-blue-700) oklch(0.5228 0.2335 263.4) | |
| text-primary-weak | var(--sb-color-primary-200) var(--sb-color-blue-200) oklch(0.8551 0.0723 256.23) | |
| text-primary-inverse | var(--sb-color-white) oklch(1 0 0) |
Semantic icon
| Class | Value | Preview |
|---|---|---|
| text-icon-neutral-weak | var(--sb-color-grey-300) oklch(0.7444 0 0) | |
| text-icon-neutral-medium | var(--sb-color-grey-600) oklch(0.5658 0 0) | |
| text-icon-neutral-strong | var(--sb-color-grey-900) oklch(0.3092 0 0) | |
| text-icon-inverse | var(--sb-color-white) oklch(1 0 0) | |
| text-icon-primary | var(--sb-color-primary-700) var(--sb-color-blue-700) oklch(0.5228 0.2335 263.4) | |
| text-icon-critical | var(--sb-color-red-700) oklch(0.5357 0.21808 26.6206) | |
| text-icon-success | var(--sb-color-green-700) oklch(0.4928 0.1473 146.79) | |
| text-icon-warning | var(--sb-color-orange-700) oklch(0.52 0.1309 53.13) | |
| text-icon-purple | var(--sb-color-purple-700) oklch(0.5421 0.2711 287.73) | |
| text-icon-pink | var(--sb-color-pink-700) oklch(0.5468 0.272 312.33) | |
| text-icon-cyan | var(--sb-color-cyan-700) oklch(0.4991 0.085555 192.6306) | |
| text-icon-teal | var(--sb-color-teal-700) oklch(0.4958 0.1022 166.5) | |
| text-icon-yellow | var(--sb-color-yellow-700) oklch(0.5113 0.104661 85.9672) |
Semantic border
| Class | Value | Preview |
|---|---|---|
| border-neutral-strong | var(--sb-color-grey-900) oklch(0.3092 0 0) | |
| border-neutral-medium | var(--sb-color-grey-600) oklch(0.5658 0 0) | |
| border-neutral-weak | var(--sb-color-grey-100) oklch(0.9097 0 0) | |
| border-primary | var(--sb-color-primary-700) var(--sb-color-blue-700) oklch(0.5228 0.2335 263.4) | |
| border-critical | var(--sb-color-red-700) oklch(0.5357 0.21808 26.6206) | |
| border-success | var(--sb-color-green-700) oklch(0.4928 0.1473 146.79) | |
| border-warning | var(--sb-color-orange-700) oklch(0.52 0.1309 53.13) | |
| border-purple | var(--sb-color-purple-700) oklch(0.5421 0.2711 287.73) | |
| border-pink | var(--sb-color-pink-700) oklch(0.5468 0.272 312.33) | |
| border-yellow | var(--sb-color-yellow-700) oklch(0.5113 0.104661 85.9672) | |
| border-cyan | var(--sb-color-cyan-700) oklch(0.4991 0.085555 192.6306) | |
| border-teal | var(--sb-color-teal-700) oklch(0.4958 0.1022 166.5) | |
| border-inverse | var(--sb-color-white) oklch(1 0 0) |
Semantic background
| Class | Value | Preview |
|---|---|---|
| bg-neutral-dark | var(--sb-color-grey-1000) oklch(0.2134 0 0) | |
| bg-neutral-dark-hover | var(--sb-color-grey-900) oklch(0.3092 0 0) | |
| bg-neutral-dark-pressed | var(--sb-color-grey-800) oklch(0.4128 0 0) | |
| bg-neutral-strong | var(--sb-color-grey-800) oklch(0.4128 0 0) | |
| bg-neutral-strong-hover | var(--sb-color-grey-900) oklch(0.3092 0 0) | |
| bg-neutral-strong-pressed | var(--sb-color-grey-1000) oklch(0.2134 0 0) | |
| bg-neutral-medium | var(--sb-color-grey-100) oklch(0.9097 0 0) | |
| bg-neutral-medium-hover | var(--sb-color-grey-200) oklch(0.8545 0 0) | |
| bg-neutral-medium-pressed | var(--sb-color-grey-300) oklch(0.7444 0 0) | |
| bg-neutral-weak | var(--sb-color-grey-50) oklch(0.9461 0 0) | |
| bg-neutral-weak-hover | var(--sb-color-grey-100) oklch(0.9097 0 0) | |
| bg-neutral-weak-pressed | var(--sb-color-grey-200) oklch(0.8545 0 0) | |
| bg-neutral-base | var(--sb-color-grey-25) oklch(0.9821 0 0) | |
| bg-neutral-base-hover | var(--sb-color-grey-50) oklch(0.9461 0 0) | |
| bg-neutral-base-pressed | var(--sb-color-grey-100) oklch(0.9097 0 0) | |
| bg-neutral-surface | var(--sb-color-white) oklch(1 0 0) | |
| bg-neutral-surface-hover | var(--sb-color-grey-50) oklch(0.9461 0 0) | |
| bg-neutral-surface-pressed | var(--sb-color-grey-100) oklch(0.9097 0 0) | |
| bg-primary-dark | var(--sb-color-primary-950) var(--sb-color-blue-950) oklch(0.2106 0.1065 270.12) | |
| bg-primary-dark-hover | var(--sb-color-primary-900) var(--sb-color-blue-900) oklch(0.3294 0.1877 267.67) | |
| bg-primary-dark-pressed | var(--sb-color-primary-800) var(--sb-color-blue-800) oklch(0.4373 0.2596 266.91) | |
| bg-primary-strong | var(--sb-color-primary-900) var(--sb-color-blue-900) oklch(0.3294 0.1877 267.67) | |
| bg-primary-strong-hover | var(--sb-color-primary-800) var(--sb-color-blue-800) oklch(0.4373 0.2596 266.91) | |
| bg-primary-strong-pressed | var(--sb-color-primary-700) var(--sb-color-blue-700) oklch(0.5228 0.2335 263.4) | |
| bg-primary-vivid | var(--sb-color-primary-700) var(--sb-color-blue-700) oklch(0.5228 0.2335 263.4) | |
| bg-primary-vivid-hover | var(--sb-color-primary-800) var(--sb-color-blue-800) oklch(0.4373 0.2596 266.91) | |
| bg-primary-vivid-pressed | var(--sb-color-primary-900) var(--sb-color-blue-900) oklch(0.3294 0.1877 267.67) | |
| bg-primary-medium | var(--sb-color-primary-200) var(--sb-color-blue-200) oklch(0.8551 0.0723 256.23) | |
| bg-primary-medium-hover | var(--sb-color-primary-300) var(--sb-color-blue-300) oklch(0.7469 0.1317 256.33) | |
| bg-primary-medium-pressed | var(--sb-color-primary-400) var(--sb-color-blue-400) oklch(0.6974 0.1605 256.52) | |
| bg-primary-weak | var(--sb-color-primary-50) var(--sb-color-blue-50) oklch(0.9479 0.0251 255.56) | |
| bg-primary-weak-hover | var(--sb-color-primary-100) var(--sb-color-blue-100) oklch(0.9098 0.044 256.79) | |
| bg-primary-weak-pressed | var(--sb-color-primary-200) var(--sb-color-blue-200) oklch(0.8551 0.0723 256.23) | |
| bg-primary-inverse | var(--sb-color-primary-25) var(--sb-color-blue-25) oklch(0.9835 0.0079 253.85) | |
| bg-primary-inverse-hover | var(--sb-color-primary-50) var(--sb-color-blue-50) oklch(0.9479 0.0251 255.56) | |
| bg-primary-inverse-pressed | var(--sb-color-primary-100) var(--sb-color-blue-100) oklch(0.9098 0.044 256.79) | |
| bg-critical-dark | var(--sb-color-red-950) oklch(0.2274 0.0916 21.7) | |
| bg-critical-dark-hover | var(--sb-color-red-900) oklch(0.326 0.132 24.66) | |
| bg-critical-dark-pressed | var(--sb-color-red-800) oklch(0.434 0.1764 26) | |
| bg-critical-strong | var(--sb-color-red-900) oklch(0.326 0.132 24.66) | |
| bg-critical-strong-hover | var(--sb-color-red-800) oklch(0.434 0.1764 26) | |
| bg-critical-strong-pressed | var(--sb-color-red-700) oklch(0.5357 0.21808 26.6206) | |
| bg-critical-vivid | var(--sb-color-red-700) oklch(0.5357 0.21808 26.6206) | |
| bg-critical-vivid-hover | var(--sb-color-red-800) oklch(0.434 0.1764 26) | |
| bg-critical-vivid-pressed | var(--sb-color-red-900) oklch(0.326 0.132 24.66) | |
| bg-critical-medium | var(--sb-color-red-200) oklch(0.8646 0.0741 11.43) | |
| bg-critical-medium-hover | var(--sb-color-red-300) oklch(0.763 0.1432 13.55) | |
| bg-critical-medium-pressed | var(--sb-color-red-400) oklch(0.7165 0.1792 15.81) | |
| bg-critical-weak | var(--sb-color-red-50) oklch(0.9503 0.0254 8.6) | |
| bg-critical-weak-hover | var(--sb-color-red-100) oklch(0.9161 0.0438 10.99) | |
| bg-critical-weak-pressed | var(--sb-color-red-200) oklch(0.8646 0.0741 11.43) | |
| bg-critical-inverse | var(--sb-color-red-25) oklch(0.9848 0.0076 7.28) | |
| bg-critical-inverse-hover | var(--sb-color-red-50) oklch(0.9503 0.0254 8.6) | |
| bg-critical-inverse-pressed | var(--sb-color-red-100) oklch(0.9161 0.0438 10.99) | |
| bg-success-dark | var(--sb-color-green-950) oklch(0.2095 0.0558 151.44) | |
| bg-success-dark-hover | var(--sb-color-green-900) oklch(0.3008 0.0854 148.73) | |
| bg-success-dark-pressed | var(--sb-color-green-800) oklch(0.4012 0.1181 147.35) | |
| bg-success-strong | var(--sb-color-green-900) oklch(0.3008 0.0854 148.73) | |
| bg-success-strong-hover | var(--sb-color-green-800) oklch(0.4012 0.1181 147.35) | |
| bg-success-strong-pressed | var(--sb-color-green-700) oklch(0.4928 0.1473 146.79) | |
| bg-success-vivid | var(--sb-color-green-700) oklch(0.4928 0.1473 146.79) | |
| bg-success-vivid-hover | var(--sb-color-green-800) oklch(0.4012 0.1181 147.35) | |
| bg-success-vivid-pressed | var(--sb-color-green-900) oklch(0.3008 0.0854 148.73) | |
| bg-success-medium | var(--sb-color-green-200) oklch(0.836 0.1622 152.29) | |
| bg-success-medium-hover | var(--sb-color-green-300) oklch(0.7248 0.220256 146.1938) | |
| bg-success-medium-pressed | var(--sb-color-green-400) oklch(0.6729 0.2043 146.22) | |
| bg-success-weak | var(--sb-color-green-50) oklch(0.942 0.0573 155.96) | |
| bg-success-weak-hover | var(--sb-color-green-100) oklch(0.9007 0.1089 154.47) | |
| bg-success-weak-pressed | var(--sb-color-green-200) oklch(0.836 0.1622 152.29) | |
| bg-success-inverse | var(--sb-color-green-25) oklch(0.9792 0.0311 157.21) | |
| bg-success-inverse-hover | var(--sb-color-green-50) oklch(0.942 0.0573 155.96) | |
| bg-success-inverse-pressed | var(--sb-color-green-100) oklch(0.9007 0.1089 154.47) | |
| bg-warning-dark | var(--sb-color-orange-950) oklch(0.2164 0.0458 74.45) | |
| bg-warning-dark-hover | var(--sb-color-orange-900) oklch(0.3142 0.068165 69.7611) | |
| bg-warning-dark-pressed | var(--sb-color-orange-800) oklch(0.4198 0.1042 54.28) | |
| bg-warning-strong | var(--sb-color-orange-900) oklch(0.3142 0.068165 69.7611) | |
| bg-warning-strong-hover | var(--sb-color-orange-800) oklch(0.4198 0.1042 54.28) | |
| bg-warning-strong-pressed | var(--sb-color-orange-700) oklch(0.52 0.1309 53.13) | |
| bg-warning-vivid | var(--sb-color-orange-700) oklch(0.52 0.1309 53.13) | |
| bg-warning-vivid-hover | var(--sb-color-orange-800) oklch(0.4198 0.1042 54.28) | |
| bg-warning-vivid-pressed | var(--sb-color-orange-900) oklch(0.3142 0.068165 69.7611) | |
| bg-warning-medium | var(--sb-color-orange-200) oklch(0.8605 0.0953 63.44) | |
| bg-warning-medium-hover | var(--sb-color-orange-300) oklch(0.7593 0.1656 57.76) | |
| bg-warning-medium-pressed | var(--sb-color-orange-400) oklch(0.7117 0.1837 51.43) | |
| bg-warning-weak | var(--sb-color-orange-50) oklch(0.9489 0.0341 64.57) | |
| bg-warning-weak-hover | var(--sb-color-orange-100) oklch(0.9127 0.0575 64.45) | |
| bg-warning-weak-pressed | var(--sb-color-orange-200) oklch(0.8605 0.0953 63.44) | |
| bg-warning-inverse | var(--sb-color-orange-25) oklch(0.9829 0.010953 63.3642) | |
| bg-warning-inverse-hover | var(--sb-color-orange-50) oklch(0.9489 0.0341 64.57) | |
| bg-warning-inverse-pressed | var(--sb-color-orange-100) oklch(0.9127 0.0575 64.45) | |
| bg-purple-dark | var(--sb-color-purple-950) oklch(0.2338 0.1388 282.66) | |
| bg-purple-dark-hover | var(--sb-color-purple-900) oklch(0.3379 0.2039 280.34) | |
| bg-purple-dark-pressed | var(--sb-color-purple-800) oklch(0.4457 0.2594 281.92) | |
| bg-purple-strong | var(--sb-color-purple-900) oklch(0.3379 0.2039 280.34) | |
| bg-purple-strong-hover | var(--sb-color-purple-800) oklch(0.4457 0.2594 281.92) | |
| bg-purple-strong-pressed | var(--sb-color-purple-700) oklch(0.5421 0.2711 287.73) | |
| bg-purple-vivid | var(--sb-color-purple-700) oklch(0.5421 0.2711 287.73) | |
| bg-purple-vivid-hover | var(--sb-color-purple-800) oklch(0.4457 0.2594 281.92) | |
| bg-purple-vivid-pressed | var(--sb-color-purple-900) oklch(0.3379 0.2039 280.34) | |
| bg-purple-medium | var(--sb-color-purple-200) oklch(0.8621 0.0786 298.64) | |
| bg-purple-medium-hover | var(--sb-color-purple-300) oklch(0.7588 0.1417 297.33) | |
| bg-purple-medium-pressed | var(--sb-color-purple-400) oklch(0.694 0.182 295.83) | |
| bg-purple-weak | var(--sb-color-purple-50) oklch(0.9487 0.0289 301) | |
| bg-purple-weak-hover | var(--sb-color-purple-100) oklch(0.914 0.048556 299.7826) | |
| bg-purple-weak-pressed | var(--sb-color-purple-200) oklch(0.8621 0.0786 298.64) | |
| bg-purple-inverse | var(--sb-color-purple-25) oklch(0.9826 0.0095 299.24) | |
| bg-purple-inverse-hover | var(--sb-color-purple-50) oklch(0.9487 0.0289 301) | |
| bg-purple-inverse-pressed | var(--sb-color-purple-100) oklch(0.914 0.048556 299.7826) | |
| bg-pink-dark | var(--sb-color-pink-950) oklch(0.2304 0.1117 314.21) | |
| bg-pink-dark-hover | var(--sb-color-pink-900) oklch(0.3327 0.1647 312.87) | |
| bg-pink-dark-pressed | var(--sb-color-pink-800) oklch(0.4423 0.2191 312.82) | |
| bg-pink-strong | var(--sb-color-pink-900) oklch(0.3327 0.1647 312.87) | |
| bg-pink-strong-hover | var(--sb-color-pink-800) oklch(0.4423 0.2191 312.82) | |
| bg-pink-strong-pressed | var(--sb-color-pink-700) oklch(0.5468 0.272 312.33) | |
| bg-pink-vivid | var(--sb-color-pink-700) oklch(0.5468 0.272 312.33) | |
| bg-pink-vivid-hover | var(--sb-color-pink-800) oklch(0.4423 0.2191 312.82) | |
| bg-pink-vivid-pressed | var(--sb-color-pink-900) oklch(0.3327 0.1647 312.87) | |
| bg-pink-medium | var(--sb-color-pink-200) oklch(0.8653 0.0983 316.8) | |
| bg-pink-medium-hover | var(--sb-color-pink-300) oklch(0.7671 0.1775 316.31) | |
| bg-pink-medium-pressed | var(--sb-color-pink-400) oklch(0.7206 0.2154 316.31) | |
| bg-pink-weak | var(--sb-color-pink-50) oklch(0.9512 0.0354 317.31) | |
| bg-pink-weak-hover | var(--sb-color-pink-100) oklch(0.9171 0.0601 316.47) | |
| bg-pink-weak-pressed | var(--sb-color-pink-200) oklch(0.8653 0.0983 316.8) | |
| bg-pink-inverse | var(--sb-color-pink-25) oklch(0.9849 0.0106 316.49) | |
| bg-pink-inverse-hover | var(--sb-color-pink-50) oklch(0.9512 0.0354 317.31) | |
| bg-pink-inverse-pressed | var(--sb-color-pink-100) oklch(0.9171 0.0601 316.47) | |
| bg-yellow-dark | var(--sb-color-yellow-950) oklch(0.2169 0.0444 92.78) | |
| bg-yellow-dark-hover | var(--sb-color-yellow-900) oklch(0.3109 0.063551 87.7101) | |
| bg-yellow-dark-pressed | var(--sb-color-yellow-800) oklch(0.4124 0.084377 86.4434) | |
| bg-yellow-strong | var(--sb-color-yellow-900) oklch(0.3109 0.063551 87.7101) | |
| bg-yellow-strong-hover | var(--sb-color-yellow-800) oklch(0.4124 0.084377 86.4434) | |
| bg-yellow-strong-pressed | var(--sb-color-yellow-700) oklch(0.5113 0.104661 85.9672) | |
| bg-yellow-vivid | var(--sb-color-yellow-700) oklch(0.5113 0.104661 85.9672) | |
| bg-yellow-vivid-hover | var(--sb-color-yellow-800) oklch(0.4124 0.084377 86.4434) | |
| bg-yellow-vivid-pressed | var(--sb-color-yellow-900) oklch(0.3109 0.063551 87.7101) | |
| bg-yellow-medium | var(--sb-color-yellow-200) oklch(0.8581 0.1692 87.59) | |
| bg-yellow-medium-hover | var(--sb-color-yellow-300) oklch(0.7499 0.1538 84.33) | |
| bg-yellow-medium-pressed | var(--sb-color-yellow-400) oklch(0.6985 0.143259 84.5035) | |
| bg-yellow-weak | var(--sb-color-yellow-50) oklch(0.9474 0.073 92.1) | |
| bg-yellow-weak-hover | var(--sb-color-yellow-100) oklch(0.9107 0.121 91.45) | |
| bg-yellow-weak-pressed | var(--sb-color-yellow-200) oklch(0.8581 0.1692 87.59) | |
| bg-yellow-inverse | var(--sb-color-yellow-25) oklch(0.9822 0.0232 90.75) | |
| bg-yellow-inverse-hover | var(--sb-color-yellow-50) oklch(0.9474 0.073 92.1) | |
| bg-yellow-inverse-pressed | var(--sb-color-yellow-100) oklch(0.9107 0.121 91.45) | |
| bg-cyan-dark | var(--sb-color-cyan-950) oklch(0.2123 0.0365 191.66) | |
| bg-cyan-dark-hover | var(--sb-color-cyan-900) oklch(0.3045 0.05218 192.7854) | |
| bg-cyan-dark-pressed | var(--sb-color-cyan-800) oklch(0.4033 0.069 193.37) | |
| bg-cyan-strong | var(--sb-color-cyan-900) oklch(0.3045 0.05218 192.7854) | |
| bg-cyan-strong-hover | var(--sb-color-cyan-800) oklch(0.4033 0.069 193.37) | |
| bg-cyan-strong-pressed | var(--sb-color-cyan-700) oklch(0.4991 0.085555 192.6306) | |
| bg-cyan-vivid | var(--sb-color-cyan-700) oklch(0.4991 0.085555 192.6306) | |
| bg-cyan-vivid-hover | var(--sb-color-cyan-800) oklch(0.4033 0.069 193.37) | |
| bg-cyan-vivid-pressed | var(--sb-color-cyan-900) oklch(0.3045 0.05218 192.7854) | |
| bg-cyan-medium | var(--sb-color-cyan-200) oklch(0.8385 0.143968 191.9788) | |
| bg-cyan-medium-hover | var(--sb-color-cyan-300) oklch(0.7303 0.125154 192.7753) | |
| bg-cyan-medium-pressed | var(--sb-color-cyan-400) oklch(0.6813 0.117 191.88) | |
| bg-cyan-weak | var(--sb-color-cyan-50) oklch(0.9356 0.0988 194.02) | |
| bg-cyan-weak-hover | var(--sb-color-cyan-100) oklch(0.893 0.153236 192.1884) | |
| bg-cyan-weak-pressed | var(--sb-color-cyan-200) oklch(0.8385 0.143968 191.9788) | |
| bg-cyan-inverse | var(--sb-color-cyan-25) oklch(0.9796 0.029 194.07) | |
| bg-cyan-inverse-hover | var(--sb-color-cyan-50) oklch(0.9356 0.0988 194.02) | |
| bg-cyan-inverse-pressed | var(--sb-color-cyan-100) oklch(0.893 0.153236 192.1884) | |
| bg-teal-dark | var(--sb-color-teal-950) oklch(0.2094 0.0406 172.09) | |
| bg-teal-dark-hover | var(--sb-color-teal-900) oklch(0.3028 0.0607 168.79) | |
| bg-teal-dark-pressed | var(--sb-color-teal-800) oklch(0.4022 0.0821 167.28) | |
| bg-teal-strong | var(--sb-color-teal-900) oklch(0.3028 0.0607 168.79) | |
| bg-teal-strong-hover | var(--sb-color-teal-800) oklch(0.4022 0.0821 167.28) | |
| bg-teal-strong-pressed | var(--sb-color-teal-700) oklch(0.4958 0.1022 166.5) | |
| bg-teal-vivid | var(--sb-color-teal-700) oklch(0.4958 0.1022 166.5) | |
| bg-teal-vivid-hover | var(--sb-color-teal-800) oklch(0.4022 0.0821 167.28) | |
| bg-teal-vivid-pressed | var(--sb-color-teal-900) oklch(0.3028 0.0607 168.79) | |
| bg-teal-medium | var(--sb-color-teal-200) oklch(0.833 0.174691 165.1921) | |
| bg-teal-medium-hover | var(--sb-color-teal-300) oklch(0.7269 0.1523 165.25) | |
| bg-teal-medium-pressed | var(--sb-color-teal-400) oklch(0.6768 0.1414 165.46) | |
| bg-teal-weak | var(--sb-color-teal-50) oklch(0.9353 0.0949 175.03) | |
| bg-teal-weak-hover | var(--sb-color-teal-100) oklch(0.8882 0.1806 166.67) | |
| bg-teal-weak-pressed | var(--sb-color-teal-200) oklch(0.833 0.174691 165.1921) | |
| bg-teal-inverse | var(--sb-color-teal-25) oklch(0.9793 0.0285 177.76) | |
| bg-teal-inverse-hover | var(--sb-color-teal-50) oklch(0.9353 0.0949 175.03) | |
| bg-teal-inverse-pressed | var(--sb-color-teal-100) oklch(0.8882 0.1806 166.67) |
Semantic chart
| Class | Value | Preview |
|---|---|---|
| bg-chart-neutral-50 | var(--sb-color-grey-50) oklch(0.9461 0 0) | |
| bg-chart-neutral-100 | var(--sb-color-grey-100) oklch(0.9097 0 0) | |
| bg-chart-neutral-200 | var(--sb-color-grey-200) oklch(0.8545 0 0) | |
| bg-chart-neutral-300 | var(--sb-color-grey-300) oklch(0.7444 0 0) | |
| bg-chart-neutral-400 | var(--sb-color-grey-400) oklch(0.696 0 0) | |
| bg-chart-neutral-500 | var(--sb-color-grey-500) oklch(0.6334 0 0) | |
| bg-chart-neutral-600 | var(--sb-color-grey-600) oklch(0.5658 0 0) | |
| bg-chart-neutral-700 | var(--sb-color-grey-700) oklch(0.5103 0 0) | |
| bg-chart-neutral-800 | var(--sb-color-grey-800) oklch(0.4128 0 0) | |
| bg-chart-neutral-900 | var(--sb-color-grey-900) oklch(0.3092 0 0) | |
| bg-chart-negative-100 | var(--sb-color-red-100) oklch(0.9161 0.0438 10.99) | |
| bg-chart-negative-200 | var(--sb-color-red-200) oklch(0.8646 0.0741 11.43) | |
| bg-chart-negative-300 | var(--sb-color-red-300) oklch(0.763 0.1432 13.55) | |
| bg-chart-negative-400 | var(--sb-color-red-400) oklch(0.7165 0.1792 15.81) | |
| bg-chart-negative-500 | var(--sb-color-red-500) oklch(0.6699 0.2186 19.03) | |
| bg-chart-negative-600 | var(--sb-color-red-600) oklch(0.5933 0.2416 26.78) | |
| bg-chart-negative-700 | var(--sb-color-red-700) oklch(0.5357 0.21808 26.6206) | |
| bg-chart-negative-800 | var(--sb-color-red-800) oklch(0.434 0.1764 26) | |
| bg-chart-positive-100 | var(--sb-color-green-100) oklch(0.9007 0.1089 154.47) | |
| bg-chart-positive-200 | var(--sb-color-green-200) oklch(0.836 0.1622 152.29) | |
| bg-chart-positive-300 | var(--sb-color-green-300) oklch(0.7248 0.220256 146.1938) | |
| bg-chart-positive-400 | var(--sb-color-green-400) oklch(0.6729 0.2043 146.22) | |
| bg-chart-positive-500 | var(--sb-color-green-500) oklch(0.6144 0.1858 146.36) | |
| bg-chart-positive-600 | var(--sb-color-green-600) oklch(0.5487 0.1645 146.68) | |
| bg-chart-positive-700 | var(--sb-color-green-700) oklch(0.4928 0.1473 146.79) | |
| bg-chart-positive-800 | var(--sb-color-green-800) oklch(0.4012 0.1181 147.35) |
Primitive colors
Black
| Class | Value | Preview |
|---|---|---|
| --sb-color-black | oklch(0 0 0) |
White
| Class | Value | Preview |
|---|---|---|
| --sb-color-white | oklch(1 0 0) |
Blue
| Class | Value | Preview |
|---|---|---|
| --sb-color-blue-25 | oklch(0.9835 0.0079 253.85) | |
| --sb-color-blue-50 | oklch(0.9479 0.0251 255.56) | |
| --sb-color-blue-100 | oklch(0.9098 0.044 256.79) | |
| --sb-color-blue-200 | oklch(0.8551 0.0723 256.23) | |
| --sb-color-blue-300 | oklch(0.7469 0.1317 256.33) | |
| --sb-color-blue-400 | oklch(0.6974 0.1605 256.52) | |
| --sb-color-blue-500 | oklch(0.6388 0.1952 257.61) | |
| --sb-color-blue-600 | oklch(0.5749 0.233917 259.9541) | |
| --sb-color-blue-700 | oklch(0.5228 0.2335 263.4) | |
| --sb-color-blue-800 | oklch(0.4373 0.2596 266.91) | |
| --sb-color-blue-900 | oklch(0.3294 0.1877 267.67) | |
| --sb-color-blue-950 | oklch(0.2106 0.1065 270.12) |
Cyan
| Class | Value | Preview |
|---|---|---|
| --sb-color-cyan-25 | oklch(0.9796 0.029 194.07) | |
| --sb-color-cyan-50 | oklch(0.9356 0.0988 194.02) | |
| --sb-color-cyan-100 | oklch(0.893 0.153236 192.1884) | |
| --sb-color-cyan-200 | oklch(0.8385 0.143968 191.9788) | |
| --sb-color-cyan-300 | oklch(0.7303 0.125154 192.7753) | |
| --sb-color-cyan-400 | oklch(0.6813 0.117 191.88) | |
| --sb-color-cyan-500 | oklch(0.6202 0.106397 192.3262) | |
| --sb-color-cyan-600 | oklch(0.5542 0.09516 191.9599) | |
| --sb-color-cyan-700 | oklch(0.4991 0.085555 192.6306) | |
| --sb-color-cyan-800 | oklch(0.4033 0.069 193.37) | |
| --sb-color-cyan-900 | oklch(0.3045 0.05218 192.7854) | |
| --sb-color-cyan-950 | oklch(0.2123 0.0365 191.66) |
Green
| Class | Value | Preview |
|---|---|---|
| --sb-color-green-25 | oklch(0.9792 0.0311 157.21) | |
| --sb-color-green-50 | oklch(0.942 0.0573 155.96) | |
| --sb-color-green-100 | oklch(0.9007 0.1089 154.47) | |
| --sb-color-green-200 | oklch(0.836 0.1622 152.29) | |
| --sb-color-green-300 | oklch(0.7248 0.220256 146.1938) | |
| --sb-color-green-400 | oklch(0.6729 0.2043 146.22) | |
| --sb-color-green-500 | oklch(0.6144 0.1858 146.36) | |
| --sb-color-green-600 | oklch(0.5487 0.1645 146.68) | |
| --sb-color-green-700 | oklch(0.4928 0.1473 146.79) | |
| --sb-color-green-800 | oklch(0.4012 0.1181 147.35) | |
| --sb-color-green-900 | oklch(0.3008 0.0854 148.73) | |
| --sb-color-green-950 | oklch(0.2095 0.0558 151.44) |
Grey
| Class | Value | Preview |
|---|---|---|
| --sb-color-grey-25 | oklch(0.9821 0 0) | |
| --sb-color-grey-50 | oklch(0.9461 0 0) | |
| --sb-color-grey-100 | oklch(0.9097 0 0) | |
| --sb-color-grey-200 | oklch(0.8545 0 0) | |
| --sb-color-grey-300 | oklch(0.7444 0 0) | |
| --sb-color-grey-400 | oklch(0.696 0 0) | |
| --sb-color-grey-500 | oklch(0.6334 0 0) | |
| --sb-color-grey-600 | oklch(0.5658 0 0) | |
| --sb-color-grey-700 | oklch(0.5103 0 0) | |
| --sb-color-grey-800 | oklch(0.4128 0 0) | |
| --sb-color-grey-900 | oklch(0.3092 0 0) | |
| --sb-color-grey-950 | oklch(0.2055 0.0039 286.05) | |
| --sb-color-grey-1000 | oklch(0.2134 0 0) |
Orange
| Class | Value | Preview |
|---|---|---|
| --sb-color-orange-25 | oklch(0.9829 0.010953 63.3642) | |
| --sb-color-orange-50 | oklch(0.9489 0.0341 64.57) | |
| --sb-color-orange-100 | oklch(0.9127 0.0575 64.45) | |
| --sb-color-orange-200 | oklch(0.8605 0.0953 63.44) | |
| --sb-color-orange-300 | oklch(0.7593 0.1656 57.76) | |
| --sb-color-orange-400 | oklch(0.7117 0.1837 51.43) | |
| --sb-color-orange-500 | oklch(0.6494 0.1666 51.83) | |
| --sb-color-orange-600 | oklch(0.578 0.1476 52.18) | |
| --sb-color-orange-700 | oklch(0.52 0.1309 53.13) | |
| --sb-color-orange-800 | oklch(0.4198 0.1042 54.28) | |
| --sb-color-orange-900 | oklch(0.3142 0.068165 69.7611) | |
| --sb-color-orange-950 | oklch(0.2164 0.0458 74.45) |
Pink
| Class | Value | Preview |
|---|---|---|
| --sb-color-pink-25 | oklch(0.9849 0.0106 316.49) | |
| --sb-color-pink-50 | oklch(0.9512 0.0354 317.31) | |
| --sb-color-pink-100 | oklch(0.9171 0.0601 316.47) | |
| --sb-color-pink-200 | oklch(0.8653 0.0983 316.8) | |
| --sb-color-pink-300 | oklch(0.7671 0.1775 316.31) | |
| --sb-color-pink-400 | oklch(0.7206 0.2154 316.31) | |
| --sb-color-pink-500 | oklch(0.6614 0.264 315.38) | |
| --sb-color-pink-600 | oklch(0.6049 0.2981 312.63) | |
| --sb-color-pink-700 | oklch(0.5468 0.272 312.33) | |
| --sb-color-pink-800 | oklch(0.4423 0.2191 312.82) | |
| --sb-color-pink-900 | oklch(0.3327 0.1647 312.87) | |
| --sb-color-pink-950 | oklch(0.2304 0.1117 314.21) |
Purple
| Class | Value | Preview |
|---|---|---|
| --sb-color-purple-25 | oklch(0.9826 0.0095 299.24) | |
| --sb-color-purple-50 | oklch(0.9487 0.0289 301) | |
| --sb-color-purple-100 | oklch(0.914 0.048556 299.7826) | |
| --sb-color-purple-200 | oklch(0.8621 0.0786 298.64) | |
| --sb-color-purple-300 | oklch(0.7588 0.1417 297.33) | |
| --sb-color-purple-400 | oklch(0.694 0.182 295.83) | |
| --sb-color-purple-500 | oklch(0.6544 0.2067 294.64) | |
| --sb-color-purple-600 | oklch(0.5925 0.2434 291.61) | |
| --sb-color-purple-700 | oklch(0.5421 0.2711 287.73) | |
| --sb-color-purple-800 | oklch(0.4457 0.2594 281.92) | |
| --sb-color-purple-900 | oklch(0.3379 0.2039 280.34) | |
| --sb-color-purple-950 | oklch(0.2338 0.1388 282.66) |
Red
| Class | Value | Preview |
|---|---|---|
| --sb-color-red-25 | oklch(0.9848 0.0076 7.28) | |
| --sb-color-red-50 | oklch(0.9503 0.0254 8.6) | |
| --sb-color-red-100 | oklch(0.9161 0.0438 10.99) | |
| --sb-color-red-200 | oklch(0.8646 0.0741 11.43) | |
| --sb-color-red-300 | oklch(0.763 0.1432 13.55) | |
| --sb-color-red-400 | oklch(0.7165 0.1792 15.81) | |
| --sb-color-red-500 | oklch(0.6699 0.2186 19.03) | |
| --sb-color-red-600 | oklch(0.5933 0.2416 26.78) | |
| --sb-color-red-700 | oklch(0.5357 0.21808 26.6206) | |
| --sb-color-red-800 | oklch(0.434 0.1764 26) | |
| --sb-color-red-900 | oklch(0.326 0.132 24.66) | |
| --sb-color-red-950 | oklch(0.2274 0.0916 21.7) |
Teal
| Class | Value | Preview |
|---|---|---|
| --sb-color-teal-25 | oklch(0.9793 0.0285 177.76) | |
| --sb-color-teal-50 | oklch(0.9353 0.0949 175.03) | |
| --sb-color-teal-100 | oklch(0.8882 0.1806 166.67) | |
| --sb-color-teal-200 | oklch(0.833 0.174691 165.1921) | |
| --sb-color-teal-300 | oklch(0.7269 0.1523 165.25) | |
| --sb-color-teal-400 | oklch(0.6768 0.1414 165.46) | |
| --sb-color-teal-500 | oklch(0.6171 0.1283 165.85) | |
| --sb-color-teal-600 | oklch(0.5498 0.114 166.06) | |
| --sb-color-teal-700 | oklch(0.4958 0.1022 166.5) | |
| --sb-color-teal-800 | oklch(0.4022 0.0821 167.28) | |
| --sb-color-teal-900 | oklch(0.3028 0.0607 168.79) | |
| --sb-color-teal-950 | oklch(0.2094 0.0406 172.09) |
Yellow
| Class | Value | Preview |
|---|---|---|
| --sb-color-yellow-25 | oklch(0.9822 0.0232 90.75) | |
| --sb-color-yellow-50 | oklch(0.9474 0.073 92.1) | |
| --sb-color-yellow-100 | oklch(0.9107 0.121 91.45) | |
| --sb-color-yellow-200 | oklch(0.8581 0.1692 87.59) | |
| --sb-color-yellow-300 | oklch(0.7499 0.1538 84.33) | |
| --sb-color-yellow-400 | oklch(0.6985 0.143259 84.5035) | |
| --sb-color-yellow-500 | oklch(0.6356 0.1303 84.76) | |
| --sb-color-yellow-600 | oklch(0.5666 0.116 85.54) | |
| --sb-color-yellow-700 | oklch(0.5113 0.104661 85.9672) | |
| --sb-color-yellow-800 | oklch(0.4124 0.084377 86.4434) | |
| --sb-color-yellow-900 | oklch(0.3109 0.063551 87.7101) | |
| --sb-color-yellow-950 | oklch(0.2169 0.0444 92.78) |
Primary
| Class | Value | Preview |
|---|---|---|
| --sb-color-primary-25 | var(--sb-color-blue-25) oklch(0.9835 0.0079 253.85) | |
| --sb-color-primary-50 | var(--sb-color-blue-50) oklch(0.9479 0.0251 255.56) | |
| --sb-color-primary-100 | var(--sb-color-blue-100) oklch(0.9098 0.044 256.79) | |
| --sb-color-primary-200 | var(--sb-color-blue-200) oklch(0.8551 0.0723 256.23) | |
| --sb-color-primary-300 | var(--sb-color-blue-300) oklch(0.7469 0.1317 256.33) | |
| --sb-color-primary-400 | var(--sb-color-blue-400) oklch(0.6974 0.1605 256.52) | |
| --sb-color-primary-500 | var(--sb-color-blue-500) oklch(0.6388 0.1952 257.61) | |
| --sb-color-primary-600 | var(--sb-color-blue-600) oklch(0.5749 0.233917 259.9541) | |
| --sb-color-primary-700 | var(--sb-color-blue-700) oklch(0.5228 0.2335 263.4) | |
| --sb-color-primary-800 | var(--sb-color-blue-800) oklch(0.4373 0.2596 266.91) | |
| --sb-color-primary-900 | var(--sb-color-blue-900) oklch(0.3294 0.1877 267.67) | |
| --sb-color-primary-950 | var(--sb-color-blue-950) oklch(0.2106 0.1065 270.12) |
Typography
Typography presets
| Class | Value | Preview |
|---|---|---|
| text-body-lg | font-size: 1.125rem/* 18px */line-height: 1.5rem/* 24px */font-weight: 400 | The quick brown fox |
| text-body-md | font-size: 1rem/* 16px */line-height: 1.375rem/* 22px */font-weight: 400 | The quick brown fox |
| text-body-sm | font-size: 0.875rem/* 14px */line-height: 1.125rem/* 18px */font-weight: 400 | The quick brown fox |
| text-body-xs | font-size: 0.75rem/* 12px */line-height: 1rem/* 16px */font-weight: 400 | The quick brown fox |
| text-display | font-size: 1.5rem/* 24px */line-height: 2rem/* 32px */font-weight: 700 | The quick brown fox |
| text-label-lg | font-size: 1.125rem/* 18px */line-height: 1.5rem/* 24px */font-weight: 500 | The quick brown fox |
| text-label-md | font-size: 1rem/* 16px */line-height: 1.375rem/* 22px */font-weight: 500 | The quick brown fox |
| text-label-sm | font-size: 0.875rem/* 14px */line-height: 1.125rem/* 18px */font-weight: 500 | The quick brown fox |
| text-label-xs | font-size: 0.75rem/* 12px */line-height: 1rem/* 16px */font-weight: 500 | The quick brown fox |
| text-title-lg | font-size: 1.125rem/* 18px */line-height: 1.5rem/* 24px */font-weight: 600 | The quick brown fox |
| text-title-md | font-size: 1rem/* 16px */line-height: 1.375rem/* 22px */font-weight: 600 | The quick brown fox |
| text-title-sm | font-size: 0.875rem/* 14px */line-height: 1.125rem/* 18px */font-weight: 600 | The quick brown fox |
Font family
| Class | Value | Preview |
|---|---|---|
| font-sans | 'Inter', 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif | The quick brown fox |
| font-display | 'Epilogue', 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif | The quick brown fox |
Font size
| Class | Value | Preview |
|---|---|---|
| text-xs | 0.75rem/* 12px */ | The quick brown fox |
| text-sm | 0.875rem/* 14px */ | The quick brown fox |
| text-md | 1rem/* 16px */ | The quick brown fox |
| text-lg | 1.125rem/* 18px */ | The quick brown fox |
| text-xl | 1.25rem/* 20px */ | The quick brown fox |
| text-2xl | 1.5rem/* 24px */ | The quick brown fox |
| text-3xl | 1.75rem/* 28px */ | The quick brown fox |
| text-4xl | 2rem/* 32px */ | The quick brown fox |
| text-5xl | 2.25rem/* 36px */ | The quick brown fox |
Font weight
| Class | Value | Preview |
|---|---|---|
| font-normal | 400 | The quick brown fox |
| font-medium | 500 | The quick brown fox |
| font-semibold | 600 | The quick brown fox |
| font-bold | 700 | The quick brown fox |
Line height
| Class | Value | Preview |
|---|---|---|
| leading-12 | 0.75rem/* 12px */ | The quick brown fox |
| leading-14 | 0.875rem/* 14px */ | The quick brown fox |
| leading-16 | 1rem/* 16px */ | The quick brown fox |
| leading-18 | 1.125rem/* 18px */ | The quick brown fox |
| leading-20 | 1.25rem/* 20px */ | The quick brown fox |
| leading-22 | 1.375rem/* 22px */ | The quick brown fox |
| leading-24 | 1.5rem/* 24px */ | The quick brown fox |
| leading-26 | 1.625rem/* 26px */ | The quick brown fox |
| leading-28 | 1.75rem/* 28px */ | The quick brown fox |
| leading-32 | 2rem/* 32px */ | The quick brown fox |
| leading-40 | 2.5rem/* 40px */ | The quick brown fox |
| leading-42 | 2.625rem/* 42px */ | The quick brown fox |
Letter spacing
| Class | Value | Preview |
|---|---|---|
| tracking-normal | 0em/* 0px */ | The quick brown fox |
| tracking-display | -0.04em/* -0.64px */ | The quick brown fox |
| tracking-headline | -0.02em/* -0.32px */ | The quick brown fox |
Radius
| Class | Value | Preview |
|---|---|---|
| rounded-sm | 0.25rem/* 4px */ | |
| rounded-md | 0.375rem/* 6px */ | |
| rounded-lg | 0.5rem/* 8px */ | |
| rounded-xl | 1rem/* 16px */ |
Shadow
| Class | Value | Preview |
|---|---|---|
| shadow-sm | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) | |
| shadow-md | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | |
| shadow-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | |
| shadow-focus | 0px 0px 0px 2px var(--sb-color-white), 0px 0px 0px 4px var(--sb-color-primary-600) |
Component
Badge
| Class | Value | Preview |
|---|---|---|
| text-badge-critical | var(--sb-text-color-critical-inverse) var(--sb-color-white) | |
| text-badge-primary | var(--sb-text-color-primary-inverse) var(--sb-color-white) | |
| bg-badge-critical | var(--sb-background-color-critical-vivid) var(--sb-color-red-700) | |
| bg-badge-primary | var(--sb-background-color-primary-vivid) var(--sb-color-blue-700) |
Button
| Class | Value | Preview |
|---|---|---|
| text-button-solid-primary | var(--sb-text-color-primary-inverse) var(--sb-color-white) | |
| text-button-solid-neutral | var(--sb-text-color-neutral-strong) var(--sb-color-grey-950) | |
| text-button-solid-critical | var(--sb-text-color-critical-inverse) var(--sb-color-white) | |
| text-button-outline-primary | var(--sb-text-color-primary-vivid) var(--sb-color-blue-700) | |
| text-button-outline-neutral | var(--sb-text-color-neutral-strong) var(--sb-color-grey-950) | |
| text-button-outline-critical | var(--sb-text-color-critical-vivid) var(--sb-color-red-700) | |
| text-button-ghost-primary | var(--sb-text-color-primary-vivid) var(--sb-color-blue-700) | |
| text-button-ghost-neutral | var(--sb-text-color-neutral-strong) var(--sb-color-grey-950) | |
| text-button-ghost-critical | var(--sb-text-color-critical-vivid) var(--sb-color-red-700) | |
| bg-button-solid-primary | var(--sb-background-color-primary-vivid) var(--sb-color-blue-700) | |
| bg-button-solid-primary-hover | var(--sb-background-color-primary-vivid-hover) var(--sb-color-blue-800) | |
| bg-button-solid-primary-pressed | var(--sb-background-color-primary-vivid-pressed) var(--sb-color-blue-900) | |
| bg-button-solid-neutral | var(--sb-background-color-neutral-medium) var(--sb-color-grey-100) | |
| bg-button-solid-neutral-hover | var(--sb-background-color-neutral-medium-hover) var(--sb-color-grey-200) | |
| bg-button-solid-neutral-pressed | var(--sb-background-color-neutral-medium-pressed) var(--sb-color-grey-300) | |
| bg-button-solid-critical | var(--sb-background-color-critical-vivid) var(--sb-color-red-700) | |
| bg-button-solid-critical-hover | var(--sb-background-color-critical-vivid-hover) var(--sb-color-red-800) | |
| bg-button-solid-critical-pressed | var(--sb-background-color-critical-vivid-pressed) var(--sb-color-red-900) | |
| bg-button-outline-primary-hover | var(--sb-background-color-primary-inverse-hover) var(--sb-color-blue-50) | |
| bg-button-outline-primary-pressed | var(--sb-background-color-primary-inverse-pressed) var(--sb-color-blue-100) | |
| bg-button-outline-neutral-hover | var(--sb-background-color-neutral-surface-hover) var(--sb-color-grey-50) | |
| bg-button-outline-neutral-pressed | var(--sb-background-color-neutral-surface-pressed) var(--sb-color-grey-100) | |
| bg-button-outline-critical-hover | var(--sb-background-color-critical-inverse-hover) var(--sb-color-red-50) | |
| bg-button-outline-critical-pressed | var(--sb-background-color-critical-inverse-pressed) var(--sb-color-red-100) | |
| bg-button-ghost-primary-hover | var(--sb-background-color-primary-inverse-hover) var(--sb-color-blue-50) | |
| bg-button-ghost-primary-pressed | var(--sb-background-color-primary-inverse-pressed) var(--sb-color-blue-100) | |
| bg-button-ghost-neutral-hover | var(--sb-background-color-neutral-surface-hover) var(--sb-color-grey-50) | |
| bg-button-ghost-neutral-pressed | var(--sb-background-color-neutral-surface-pressed) var(--sb-color-grey-100) | |
| bg-button-ghost-critical-hover | var(--sb-background-color-critical-inverse-hover) var(--sb-color-red-50) | |
| bg-button-ghost-critical-pressed | var(--sb-background-color-critical-inverse-pressed) var(--sb-color-red-100) | |
| inset-ring-button-outline-primary | var(--sb-border-color-primary) var(--sb-color-blue-700) | |
| inset-ring-button-outline-neutral | var(--sb-border-color-neutral-medium) var(--sb-color-grey-600) | |
| inset-ring-button-outline-critical | var(--sb-border-color-critical) var(--sb-color-red-700) | |
| rounded-button-primary | var(--sb-radius-md) | |
| rounded-button-neutral | var(--sb-radius-md) | |
| rounded-button-critical | var(--sb-radius-md) |
Link
| Class | Value | Preview |
|---|---|---|
| text-link-primary | var(--sb-text-color-primary-vivid) var(--sb-color-blue-700) |