Global tokens
Colors
Background | Platform tokens | |
---|---|---|
Default | #f8f8f8, #353535 | var(--calcite-color-background) |
None | rgba(255, 255, 255, 0) | var(--calcite-color-background-none) |
Foreground | Platform tokens | |
1 | #ffffff, #2b2b2b | var(--calcite-color-foreground-1) |
2 | #f3f3f3, #202020 | var(--calcite-color-foreground-2) |
3 | #eaeaea, #151515 | var(--calcite-color-foreground-3) |
Current | #c7eaff, #214155 | var(--calcite-color-foreground-current) |
Transparent | Platform tokens | |
Default | rgba(0, 0, 0, 0), rgba(255, 255, 255, 0) | var(--calcite-color-transparent) |
Hover | rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04) | var(--calcite-color-transparent-hover) |
Press | rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08) | var(--calcite-color-transparent-press) |
Scrim | rgba(255, 255, 255, 0.85), rgba(0, 0, 0, 0.85) | var(--calcite-color-transparent-scrim) |
Tint | rgba(255, 255, 255, 0.8), rgba(43, 43, 43, 0.8) | var(--calcite-color-transparent-tint) |
Brand | Platform tokens | |
Default | #007ac2, #009af2 | var(--calcite-color-brand) |
Hover | #00619b, #007ac2 | var(--calcite-color-brand-hover) |
Press | #004874, #00619b | var(--calcite-color-brand-press) |
Underline | rgba(0, 97, 155, 0.4), rgba(0, 160, 255, 0.4) | var(--calcite-color-brand-underline) |
Status | Platform tokens | |
Default | #00619b, #00a0ff | var(--calcite-color-status-info) |
Hover | #004874, #3db8ff | var(--calcite-color-status-info-hover) |
Press | #00304d, #009af2 | var(--calcite-color-status-info-press) |
Default | #35ac46, #36da43 | var(--calcite-color-status-success) |
Hover | #288835, #3bed52 | var(--calcite-color-status-success-hover) |
Press | #1a6324, #00b81b | var(--calcite-color-status-success-press) |
Default | #edd317, #ffc900 | var(--calcite-color-status-warning) |
Hover | #d9bc00, #ffee33 | var(--calcite-color-status-warning-hover) |
Press | #bfa200, #f5d000 | var(--calcite-color-status-warning-press) |
Default | #d83020, #fe583e | var(--calcite-color-status-danger) |
Hover | #a82b1e, #ff0015 | var(--calcite-color-status-danger-hover) |
Press | #7c1d13, #d90012 | var(--calcite-color-status-danger-press) |
Inverse | Platform tokens | |
Default | #353535, #f8f8f8 | var(--calcite-color-inverse) |
Hover | #2b2b2b, #ffffff | var(--calcite-color-inverse-hover) |
Press | #202020, #f3f3f3 | var(--calcite-color-inverse-press) |
Text | Platform tokens | |
1 | #151515, #ffffff | var(--calcite-color-text-1) |
2 | #4a4a4a, #bfbfbf | var(--calcite-color-text-2) |
3 | #6a6a6a, #9f9f9f | var(--calcite-color-text-3) |
Default | Platform tokens | |
Inverse | #ffffff, #151515 | var(--calcite-color-text-inverse) |
Link | #00619b, #00a0ff | var(--calcite-color-text-link) |
Border | Platform tokens | |
1 | #cacaca, #555555 | var(--calcite-color-border-1) |
2 | #d4d4d4, #4a4a4a | var(--calcite-color-border-2) |
3 | #dfdfdf, #404040 | var(--calcite-color-border-3) |
Input | #949494, #757575 | var(--calcite-color-border-input) |
Ghost | rgba(0, 0, 0, 0.3), rgba(117, 117, 117, 0.3) | var(--calcite-color-border-ghost) |
White | #ffffff, #f8f8f8 | var(--calcite-color-border-white) |
Border
Width | Platform tokens | |
---|---|---|
None | 0 | var(--calcite-border-width-none) |
Sm | 1px | var(--calcite-border-width-sm) |
Md | 2px | var(--calcite-border-width-md) |
Lg | 4px | var(--calcite-border-width-lg) |
Corner
Radius | Platform tokens | |
---|---|---|
Default | 0 | var(--calcite-corner-radius) |
Sharp | 0 | var(--calcite-corner-radius-sharp) |
Round | 4px | var(--calcite-corner-radius-round) |
Pill | 100% | var(--calcite-corner-radius-pill) |
Shadow
Default | Platform tokens | |
---|---|---|
None | 0px 0px 0px 0px rgba(0, 0, 0, 0) | var(--calcite-shadow-none) |
Sm | 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 4px 16px 0px rgba(0, 0, 0, 0.08) | var(--calcite-shadow-sm) |
Md | 0px 4px 20px 0px rgba(0, 0, 0, 0.08), 0px 12px 32px -2px rgba(0, 0, 0, 0.1) | var(--calcite-shadow-md) |
Opacity
Default | Platform tokens | |
---|---|---|
Light | 0.4 | var(--calcite-opacity-light) |
Half | 0.5 | var(--calcite-opacity-half) |
Dark | 0.85 | var(--calcite-opacity-dark) |
Full | 1 | var(--calcite-opacity-full) |
Disabled | 0.5 | var(--calcite-opacity-disabled) |
Stacking
Default | Platform tokens | |
---|---|---|
Deep | -999999 | var(--calcite-z-index-deep) |
Default | 1 | var(--calcite-z-index) |
Sticky | 300 | var(--calcite-z-index-sticky) |
Header | 400 | var(--calcite-z-index-header) |
Toast | 500 | var(--calcite-z-index-toast) |
Dropdown | 600 | var(--calcite-z-index-dropdown) |
Overlay | 700 | var(--calcite-z-index-overlay) |
Modal | 800 | var(--calcite-z-index-modal) |
Popup | 900 | var(--calcite-z-index-popup) |
Tooltip | 901 | var(--calcite-z-index-tooltip) |
Font
Family | Platform tokens | |
---|---|---|
Default AaBbCc 123456 | ["Avenir Next","Avenir","Helvetica Neue","sans-serif"] | var(--calcite-font-family) |
Code AaBbCc 123456 | ["Monaco","Consolas","Andale Mono","Lucida Console","monospace"] | var(--calcite-font-family-code) |
Weight | Platform tokens | |
Light AaBbCc 123456 | 300 | var(--calcite-font-weight-light) |
Normal AaBbCc 123456 | 400 | var(--calcite-font-weight-normal) |
Regular AaBbCc 123456 | 400 | var(--calcite-font-weight-regular) |
Medium AaBbCc 123456 | 500 | var(--calcite-font-weight-medium) |
Semibold AaBbCc 123456 | 600 | var(--calcite-font-weight-semibold) |
Bold AaBbCc 123456 | 700 | var(--calcite-font-weight-bold) |
Size | Platform tokens | |
Xs AaBbCc 123456 | 10px | var(--calcite-font-size-xs) |
Sm AaBbCc 123456 | 12px | var(--calcite-font-size-sm) |
Default AaBbCc 123456 | 14px | var(--calcite-font-size) |
Md AaBbCc 123456 | 16px | var(--calcite-font-size-md) |
Lg AaBbCc 123456 | 18px | var(--calcite-font-size-lg) |
Xl AaBbCc 123456 | 20px | var(--calcite-font-size-xl) |
Xxl AaBbCc 123456 | 24px | var(--calcite-font-size-xxl) |
Style | Platform tokens | |
Emphasis AaBbCc 123456 | italic | var(--calcite-font-style-emphasis) |
Line height | Platform tokens | |
Sm AaBbCc 123456 | 12px | var(--calcite-font-line-height-fixed-sm) |
Base AaBbCc 123456 | 16px | var(--calcite-font-line-height-fixed-base) |
Lg AaBbCc 123456 | 20px | var(--calcite-font-line-height-fixed-lg) |
Xl AaBbCc 123456 | 24px | var(--calcite-font-line-height-fixed-xl) |
Default AaBbCc 123456 | auto | var(--calcite-font-line-height-relative) |
Tight AaBbCc 123456 | 125% | var(--calcite-font-line-height-relative-tight) |
Snug AaBbCc 123456 | 137.5% | var(--calcite-font-line-height-relative-snug) |
Normal AaBbCc 123456 | 150% | var(--calcite-font-line-height-relative-normal) |
Relaxed AaBbCc 123456 | 162.5% | var(--calcite-font-line-height-relative-relaxed) |
Loose AaBbCc 123456 | 200% | var(--calcite-font-line-height-relative-loose) |
Letter spacing | Platform tokens | |
Tight AaBbCc 123456 | -0.4 | var(--calcite-font-letter-spacing-tight) |
Normal AaBbCc 123456 | 0 | var(--calcite-font-letter-spacing-normal) |
Wide AaBbCc 123456 | 0.4 | var(--calcite-font-letter-spacing-wide) |
Paragraph spacing | Platform tokens | |
Normal AaBbCc 123456 | 4px | var(--calcite-font-paragraph-spacing-normal) |
Text decoration | Platform tokens | |
None AaBbCc 123456 | none | var(--calcite-font-text-decoration-none) |
Underline AaBbCc 123456 | underline | var(--calcite-font-text-decoration-underline) |
Text case | Platform tokens | |
None AaBbCc 123456 | none | var(--calcite-font-text-case-none) |
Uppercase AaBbCc 123456 | uppercase | var(--calcite-font-text-case-uppercase) |
Lowercase AaBbCc 123456 | lowercase | var(--calcite-font-text-case-lowercase) |
Capitalize AaBbCc 123456 | capitalize | var(--calcite-font-text-case-capitalize) |
Spacing
Default | Platform tokens | |
---|---|---|
Px | 1px | var(--calcite-spacing-px) |
Base | 2px | var(--calcite-spacing-base) |
Xxs | 4px | var(--calcite-spacing-xxs) |
Xs | 6px | var(--calcite-spacing-xs) |
Sm | 8px | var(--calcite-spacing-sm) |
Md | 12px | var(--calcite-spacing-md) |
Lg | 14px | var(--calcite-spacing-lg) |
Xl | 16px | var(--calcite-spacing-xl) |
Xxl | 20px | var(--calcite-spacing-xxl) |
Xxxl | 32px | var(--calcite-spacing-xxxl) |
Core tokens
Colors
Neutral | Platform tokens | |
---|---|---|
Blk-000 | #ffffff | var(--calcite-color-neutral-blk-000) |
Blk-005 | #f8f8f8 | var(--calcite-color-neutral-blk-005) |
Blk-010 | #f3f3f3 | var(--calcite-color-neutral-blk-010) |
Blk-020 | #eaeaea | var(--calcite-color-neutral-blk-020) |
Blk-030 | #dfdfdf | var(--calcite-color-neutral-blk-030) |
Blk-040 | #d4d4d4 | var(--calcite-color-neutral-blk-040) |
Blk-050 | #cacaca | var(--calcite-color-neutral-blk-050) |
Blk-060 | #bfbfbf | var(--calcite-color-neutral-blk-060) |
Blk-070 | #b5b5b5 | var(--calcite-color-neutral-blk-070) |
Blk-080 | #aaaaaa | var(--calcite-color-neutral-blk-080) |
Blk-090 | #9f9f9f | var(--calcite-color-neutral-blk-090) |
Blk-100 | #949494 | var(--calcite-color-neutral-blk-100) |
Blk-110 | #8a8a8a | var(--calcite-color-neutral-blk-110) |
Blk-120 | #808080 | var(--calcite-color-neutral-blk-120) |
Blk-130 | #757575 | var(--calcite-color-neutral-blk-130) |
Blk-140 | #6a6a6a | var(--calcite-color-neutral-blk-140) |
Blk-150 | #606060 | var(--calcite-color-neutral-blk-150) |
Blk-160 | #555555 | var(--calcite-color-neutral-blk-160) |
Blk-170 | #4a4a4a | var(--calcite-color-neutral-blk-170) |
Blk-180 | #404040 | var(--calcite-color-neutral-blk-180) |
Blk-190 | #353535 | var(--calcite-color-neutral-blk-190) |
Blk-200 | #2b2b2b | var(--calcite-color-neutral-blk-200) |
Blk-210 | #202020 | var(--calcite-color-neutral-blk-210) |
Blk-220 | #151515 | var(--calcite-color-neutral-blk-220) |
Blk-230 | #0b0b0b | var(--calcite-color-neutral-blk-230) |
Blk-235 | #060606 | var(--calcite-color-neutral-blk-235) |
Blk-240 | #000000 | var(--calcite-color-neutral-blk-240) |
High saturation | Platform tokens | |
H-bb-010 | #c7eaff | var(--calcite-color-high-saturation-blue-h-bb-010) |
H-bb-020 | #9fd4f3 | var(--calcite-color-high-saturation-blue-h-bb-020) |
H-bb-030 | #77bde7 | var(--calcite-color-high-saturation-blue-h-bb-030) |
H-bb-040 | #50a7da | var(--calcite-color-high-saturation-blue-h-bb-040) |
H-bb-050 | #2890ce | var(--calcite-color-high-saturation-blue-h-bb-050) |
H-bb-060 | #007ac2 | var(--calcite-color-high-saturation-blue-h-bb-060) |
H-bb-070 | #00619b | var(--calcite-color-high-saturation-blue-h-bb-070) |
H-bb-080 | #004874 | var(--calcite-color-high-saturation-blue-h-bb-080) |
H-bb-090 | #00304d | var(--calcite-color-high-saturation-blue-h-bb-090) |
H-bb-100 | #001726 | var(--calcite-color-high-saturation-blue-h-bb-100) |
H-gb-010 | #cef5f4 | var(--calcite-color-high-saturation-green-blue-h-gb-010) |
H-gb-020 | #afedec | var(--calcite-color-high-saturation-green-blue-h-gb-020) |
H-gb-030 | #8fe6e5 | var(--calcite-color-high-saturation-green-blue-h-gb-030) |
H-gb-040 | #5ae0de | var(--calcite-color-high-saturation-green-blue-h-gb-040) |
H-gb-050 | #28cecb | var(--calcite-color-high-saturation-green-blue-h-gb-050) |
H-gb-060 | #00bab5 | var(--calcite-color-high-saturation-green-blue-h-gb-060) |
H-gb-070 | #009b98 | var(--calcite-color-high-saturation-green-blue-h-gb-070) |
H-gb-080 | #007472 | var(--calcite-color-high-saturation-green-blue-h-gb-080) |
H-gb-090 | #004d4c | var(--calcite-color-high-saturation-green-blue-h-gb-090) |
H-gb-100 | #002625 | var(--calcite-color-high-saturation-green-blue-h-gb-100) |
H-gg-010 | #bdf2c4 | var(--calcite-color-high-saturation-green-h-gg-010) |
H-gg-020 | #a2e4ab | var(--calcite-color-high-saturation-green-h-gg-020) |
H-gg-030 | #87d692 | var(--calcite-color-high-saturation-green-h-gg-030) |
H-gg-040 | #6bc878 | var(--calcite-color-high-saturation-green-h-gg-040) |
H-gg-050 | #50ba5f | var(--calcite-color-high-saturation-green-h-gg-050) |
H-gg-060 | #35ac46 | var(--calcite-color-high-saturation-green-h-gg-060) |
H-gg-070 | #288835 | var(--calcite-color-high-saturation-green-h-gg-070) |
H-gg-080 | #1a6324 | var(--calcite-color-high-saturation-green-h-gg-080) |
H-gg-090 | #0d3f14 | var(--calcite-color-high-saturation-green-h-gg-090) |
H-gg-100 | #001a03 | var(--calcite-color-high-saturation-green-h-gg-100) |
H-yg-010 | #e5f7b4 | var(--calcite-color-high-saturation-yellow-green-h-yg-010) |
H-yg-020 | #d9ef9f | var(--calcite-color-high-saturation-yellow-green-h-yg-020) |
H-yg-030 | #cde78a | var(--calcite-color-high-saturation-yellow-green-h-yg-030) |
H-yg-040 | #c2e075 | var(--calcite-color-high-saturation-yellow-green-h-yg-040) |
H-yg-050 | #b6d860 | var(--calcite-color-high-saturation-yellow-green-h-yg-050) |
H-yg-060 | #aad04b | var(--calcite-color-high-saturation-yellow-green-h-yg-060) |
H-yg-070 | #84a338 | var(--calcite-color-high-saturation-yellow-green-h-yg-070) |
H-yg-080 | #5e7526 | var(--calcite-color-high-saturation-yellow-green-h-yg-080) |
H-yg-090 | #384813 | var(--calcite-color-high-saturation-yellow-green-h-yg-090) |
H-yg-100 | #121a00 | var(--calcite-color-high-saturation-yellow-green-h-yg-100) |
H-yy-010 | #fff7cc | var(--calcite-color-high-saturation-yellow-h-yy-010) |
H-yy-020 | #fef3ad | var(--calcite-color-high-saturation-yellow-h-yy-020) |
H-yy-030 | #fcee8d | var(--calcite-color-high-saturation-yellow-h-yy-030) |
H-yy-040 | #fbea6e | var(--calcite-color-high-saturation-yellow-h-yy-040) |
H-yy-050 | #f9e54e | var(--calcite-color-high-saturation-yellow-h-yy-050) |
H-yy-060 | #edd317 | var(--calcite-color-high-saturation-yellow-h-yy-060) |
H-yy-070 | #d9bc00 | var(--calcite-color-high-saturation-yellow-h-yy-070) |
H-yy-080 | #bfa200 | var(--calcite-color-high-saturation-yellow-h-yy-080) |
H-yy-090 | #8c7500 | var(--calcite-color-high-saturation-yellow-h-yy-090) |
H-yy-100 | #5c4e00 | var(--calcite-color-high-saturation-yellow-h-yy-100) |
H-oy-010 | #ffe2bf | var(--calcite-color-high-saturation-orange-yellow-h-oy-010) |
H-oy-020 | #fed3a1 | var(--calcite-color-high-saturation-orange-yellow-h-oy-020) |
H-oy-030 | #fcc582 | var(--calcite-color-high-saturation-orange-yellow-h-oy-030) |
H-oy-040 | #fbb664 | var(--calcite-color-high-saturation-orange-yellow-h-oy-040) |
H-oy-050 | #f9a845 | var(--calcite-color-high-saturation-orange-yellow-h-oy-050) |
H-oy-060 | #f89927 | var(--calcite-color-high-saturation-orange-yellow-h-oy-060) |
H-oy-070 | #c67718 | var(--calcite-color-high-saturation-orange-yellow-h-oy-070) |
H-oy-080 | #9a5b10 | var(--calcite-color-high-saturation-orange-yellow-h-oy-080) |
H-oy-090 | #6d3f08 | var(--calcite-color-high-saturation-orange-yellow-h-oy-090) |
H-oy-100 | #402300 | var(--calcite-color-high-saturation-orange-yellow-h-oy-100) |
H-oo-010 | #ffd8bf | var(--calcite-color-high-saturation-orange-h-oo-010) |
H-oo-020 | #fdc39f | var(--calcite-color-high-saturation-orange-h-oo-020) |
H-oo-030 | #faae7f | var(--calcite-color-high-saturation-orange-h-oo-030) |
H-oo-040 | #f89960 | var(--calcite-color-high-saturation-orange-h-oo-040) |
H-oo-050 | #f58440 | var(--calcite-color-high-saturation-orange-h-oo-050) |
H-oo-060 | #f36f20 | var(--calcite-color-high-saturation-orange-h-oo-060) |
H-oo-070 | #c65a18 | var(--calcite-color-high-saturation-orange-h-oo-070) |
H-oo-080 | #9a4410 | var(--calcite-color-high-saturation-orange-h-oo-080) |
H-oo-090 | #6d2f08 | var(--calcite-color-high-saturation-orange-h-oo-090) |
H-oo-100 | #401900 | var(--calcite-color-high-saturation-orange-h-oo-100) |
H-ro-010 | #ffc7b3 | var(--calcite-color-high-saturation-red-orange-h-ro-010) |
H-ro-020 | #f8af95 | var(--calcite-color-high-saturation-red-orange-h-ro-020) |
H-ro-030 | #f09677 | var(--calcite-color-high-saturation-red-orange-h-ro-030) |
H-ro-040 | #e97e5a | var(--calcite-color-high-saturation-red-orange-h-ro-040) |
H-ro-050 | #e1653c | var(--calcite-color-high-saturation-red-orange-h-ro-050) |
H-ro-060 | #da4d1e | var(--calcite-color-high-saturation-red-orange-h-ro-060) |
H-ro-070 | #ad3c16 | var(--calcite-color-high-saturation-red-orange-h-ro-070) |
H-ro-080 | #802c0f | var(--calcite-color-high-saturation-red-orange-h-ro-080) |
H-ro-090 | #531b07 | var(--calcite-color-high-saturation-red-orange-h-ro-090) |
H-ro-100 | #260a00 | var(--calcite-color-high-saturation-red-orange-h-ro-100) |
H-rr-010 | #ffc6bf | var(--calcite-color-high-saturation-red-h-rr-010) |
H-rr-020 | #ffaaa1 | var(--calcite-color-high-saturation-red-h-rr-020) |
H-rr-030 | #f2877b | var(--calcite-color-high-saturation-red-h-rr-030) |
H-rr-040 | #f07062 | var(--calcite-color-high-saturation-red-h-rr-040) |
H-rr-050 | #e65240 | var(--calcite-color-high-saturation-red-h-rr-050) |
H-rr-060 | #d83020 | var(--calcite-color-high-saturation-red-h-rr-060) |
H-rr-070 | #a82b1e | var(--calcite-color-high-saturation-red-h-rr-070) |
H-rr-080 | #7c1d13 | var(--calcite-color-high-saturation-red-h-rr-080) |
H-rr-090 | #4f0e08 | var(--calcite-color-high-saturation-red-h-rr-090) |
H-rr-100 | #210300 | var(--calcite-color-high-saturation-red-h-rr-100) |
H-pk-010 | #ffd1ef | var(--calcite-color-high-saturation-pink-h-pk-010) |
H-pk-020 | #fabee4 | var(--calcite-color-high-saturation-pink-h-pk-020) |
H-pk-030 | #f2a5d6 | var(--calcite-color-high-saturation-pink-h-pk-030) |
H-pk-040 | #eb8dc9 | var(--calcite-color-high-saturation-pink-h-pk-040) |
H-pk-050 | #e673bb | var(--calcite-color-high-saturation-pink-h-pk-050) |
H-pk-060 | #e04ea6 | var(--calcite-color-high-saturation-pink-h-pk-060) |
H-pk-070 | #ba2f7e | var(--calcite-color-high-saturation-pink-h-pk-070) |
H-pk-080 | #851b52 | var(--calcite-color-high-saturation-pink-h-pk-080) |
H-pk-090 | #590b32 | var(--calcite-color-high-saturation-pink-h-pk-090) |
H-pk-100 | #260404 | var(--calcite-color-high-saturation-pink-h-pk-100) |
H-vr-010 | #fadbff | var(--calcite-color-high-saturation-violet-red-h-vr-010) |
H-vr-020 | #e4beeb | var(--calcite-color-high-saturation-violet-red-h-vr-020) |
H-vr-030 | #cfa1d7 | var(--calcite-color-high-saturation-violet-red-h-vr-030) |
H-vr-040 | #b983c3 | var(--calcite-color-high-saturation-violet-red-h-vr-040) |
H-vr-050 | #a466af | var(--calcite-color-high-saturation-violet-red-h-vr-050) |
H-vr-060 | #8e499b | var(--calcite-color-high-saturation-violet-red-h-vr-060) |
H-vr-070 | #73377e | var(--calcite-color-high-saturation-violet-red-h-vr-070) |
H-vr-080 | #572561 | var(--calcite-color-high-saturation-violet-red-h-vr-080) |
H-vr-090 | #3c1243 | var(--calcite-color-high-saturation-violet-red-h-vr-090) |
H-vr-100 | #200026 | var(--calcite-color-high-saturation-violet-red-h-vr-100) |
H-vv-010 | #e8d9ff | var(--calcite-color-high-saturation-violet-h-vv-010) |
H-vv-020 | #cdb9eb | var(--calcite-color-high-saturation-violet-h-vv-020) |
H-vv-030 | #b39ad7 | var(--calcite-color-high-saturation-violet-h-vv-030) |
H-vv-040 | #987ac3 | var(--calcite-color-high-saturation-violet-h-vv-040) |
H-vv-050 | #7e5baf | var(--calcite-color-high-saturation-violet-h-vv-050) |
H-vv-060 | #633b9b | var(--calcite-color-high-saturation-violet-h-vv-060) |
H-vv-070 | #4e2c7e | var(--calcite-color-high-saturation-violet-h-vv-070) |
H-vv-080 | #3a1e61 | var(--calcite-color-high-saturation-violet-h-vv-080) |
H-vv-090 | #250f43 | var(--calcite-color-high-saturation-violet-h-vv-090) |
H-vv-100 | #100026 | var(--calcite-color-high-saturation-violet-h-vv-100) |
Vibrant | Platform tokens | |
V-bb-120 | #59d6ff | var(--calcite-color-vibrant-blue-v-bb-120) |
V-bb-140 | #3db8ff | var(--calcite-color-vibrant-blue-v-bb-140) |
V-bb-160 | #009af2 | var(--calcite-color-vibrant-blue-v-bb-160) |
V-bb-180 | #009af2 | var(--calcite-color-vibrant-blue-v-bb-180) |
V-gb-120 | #59fffc | var(--calcite-color-vibrant-green-blue-v-gb-120) |
V-gb-140 | #00f7f3 | var(--calcite-color-vibrant-green-blue-v-gb-140) |
V-gb-160 | #00e6e2 | var(--calcite-color-vibrant-green-blue-v-gb-160) |
V-gb-180 | #00cfca | var(--calcite-color-vibrant-green-blue-v-gb-180) |
V-gg-120 | #73ff84 | var(--calcite-color-vibrant-green-v-gg-120) |
V-gg-140 | #3bed52 | var(--calcite-color-vibrant-green-v-gg-140) |
V-gg-160 | #00b81b | var(--calcite-color-vibrant-green-v-gg-160) |
V-gg-180 | #00a118 | var(--calcite-color-vibrant-green-v-gg-180) |
V-yg-120 | #d7ff73 | var(--calcite-color-vibrant-yellow-green-v-yg-120) |
V-yg-140 | #bbed3b | var(--calcite-color-vibrant-yellow-green-v-yg-140) |
V-yg-160 | #96cc00 | var(--calcite-color-vibrant-yellow-green-v-yg-160) |
V-yg-180 | #7fab00 | var(--calcite-color-vibrant-yellow-green-v-yg-180) |
V-yy-120 | #fff766 | var(--calcite-color-vibrant-yellow-v-yy-120) |
V-yy-140 | #ffee33 | var(--calcite-color-vibrant-yellow-v-yy-140) |
V-yy-160 | #f5d000 | var(--calcite-color-vibrant-yellow-v-yy-160) |
V-yy-180 | #ebba17 | var(--calcite-color-vibrant-yellow-v-yy-180) |
V-oy-120 | #ffb54d | var(--calcite-color-vibrant-orange-yellow-v-oy-120) |
V-oy-140 | #ff9500 | var(--calcite-color-vibrant-orange-yellow-v-oy-140) |
V-oy-160 | #e68600 | var(--calcite-color-vibrant-orange-yellow-v-oy-160) |
V-oy-180 | #d17300 | var(--calcite-color-vibrant-orange-yellow-v-oy-180) |
V-ro-120 | #ff824d | var(--calcite-color-vibrant-red-orange-v-ro-120) |
V-ro-140 | #ff4d00 | var(--calcite-color-vibrant-red-orange-v-ro-140) |
V-ro-160 | #de4300 | var(--calcite-color-vibrant-red-orange-v-ro-160) |
V-ro-180 | #c93b00 | var(--calcite-color-vibrant-red-orange-v-ro-180) |
V-rr-120 | #ff624d | var(--calcite-color-vibrant-red-v-rr-120) |
V-rr-140 | #ff0015 | var(--calcite-color-vibrant-red-v-rr-140) |
V-rr-160 | #d90012 | var(--calcite-color-vibrant-red-v-rr-160) |
V-rr-180 | #b3000f | var(--calcite-color-vibrant-red-v-rr-180) |
V-pk-120 | #ff66c2 | var(--calcite-color-vibrant-pink-v-pk-120) |
V-pk-140 | #ff19a4 | var(--calcite-color-vibrant-pink-v-pk-140) |
V-pk-160 | #d11486 | var(--calcite-color-vibrant-pink-v-pk-160) |
V-pk-180 | #c00073 | var(--calcite-color-vibrant-pink-v-pk-180) |
V-vr-120 | #ea80ff | var(--calcite-color-vibrant-violet-red-v-vr-120) |
V-vr-140 | #dd33ff | var(--calcite-color-vibrant-violet-red-v-vr-140) |
V-vr-160 | #ac08cc | var(--calcite-color-vibrant-violet-red-v-vr-160) |
V-vr-180 | #83009e | var(--calcite-color-vibrant-violet-red-v-vr-180) |
V-vv-120 | #b580ff | var(--calcite-color-vibrant-violet-v-vv-120) |
V-vv-140 | #974dff | var(--calcite-color-vibrant-violet-v-vv-140) |
V-vv-160 | #8129ff | var(--calcite-color-vibrant-violet-v-vv-160) |
V-vv-180 | #6a0be6 | var(--calcite-color-vibrant-violet-v-vv-180) |
Dark | Platform tokens | |
D-gg-410 | #44ed51 | var(--calcite-color-dark-green-d-gg-410) |
D-gg-420 | #36da43 | var(--calcite-color-dark-green-d-gg-420) |
D-gg-430 | #36da43 | var(--calcite-color-dark-green-d-gg-430) |
D-yy-410 | #ffe24d | var(--calcite-color-dark-yellow-d-yy-410) |
D-yy-420 | #ffc900 | var(--calcite-color-dark-yellow-d-yy-420) |
D-yy-430 | #f4b000 | var(--calcite-color-dark-yellow-d-yy-430) |
D-rr-410 | #ff7465 | var(--calcite-color-dark-red-d-rr-410) |
D-rr-420 | #fe583e | var(--calcite-color-dark-red-d-rr-420) |
D-rr-430 | #f3381b | var(--calcite-color-dark-red-d-rr-430) |
D-bb-410 | #47bbff | var(--calcite-color-dark-blue-d-bb-410) |
D-bb-420 | #00a0ff | var(--calcite-color-dark-blue-d-bb-420) |
D-bb-430 | #0087d7 | var(--calcite-color-dark-blue-d-bb-430) |
Shadow
Default | Platform tokens | |
---|---|---|
0 | 0px 0px 0px 0px rgba(0, 0, 0, 0) | var(--calcite-shadow-0) |
1 | 0px 2px 8px 0px rgba(0, 0, 0, 0.04) | var(--calcite-shadow-1) |
2 | 0px 4px 16px 0px rgba(0, 0, 0, 0.08) | var(--calcite-shadow-2) |
3 | 0px 4px 20px 0px rgba(0, 0, 0, 0.08) | var(--calcite-shadow-3) |
4 | 0px 12px 32px -2px rgba(0, 0, 0, 0.1) | var(--calcite-shadow-4) |
Opacity
Default | Platform tokens | |
---|---|---|
0 | 0 | var(--calcite-opacity-0) |
4 | 0.04 | var(--calcite-opacity-4) |
8 | 0.08 | var(--calcite-opacity-8) |
10 | 0.1 | var(--calcite-opacity-10) |
20 | 0.2 | var(--calcite-opacity-20) |
30 | 0.3 | var(--calcite-opacity-30) |
40 | 0.4 | var(--calcite-opacity-40) |
50 | 0.5 | var(--calcite-opacity-50) |
60 | 0.6 | var(--calcite-opacity-60) |
70 | 0.7 | var(--calcite-opacity-70) |
80 | 0.8 | var(--calcite-opacity-80) |
85 | 0.85 | var(--calcite-opacity-85) |
90 | 0.9 | var(--calcite-opacity-90) |
92 | 0.92 | var(--calcite-opacity-92) |
96 | 0.96 | var(--calcite-opacity-96) |
100 | 1 | var(--calcite-opacity-100) |
Stacking
Default | Platform tokens | |
---|---|---|
0 | -999999 | var(--calcite-z-index-0) |
1 | 1 | var(--calcite-z-index-1) |
3 | 300 | var(--calcite-z-index-3) |
4 | 400 | var(--calcite-z-index-4) |
5 | 500 | var(--calcite-z-index-5) |
6 | 600 | var(--calcite-z-index-6) |
7 | 700 | var(--calcite-z-index-7) |
8 | 800 | var(--calcite-z-index-8) |
9 | 900 | var(--calcite-z-index-9) |