(
+
+);
+
+overview.controls = {
+ name: { type: 'text', value: 'Negative red' },
+ color: {
+ type: 'object',
+ value: {
+ value: { type: 'color', value: '#cc0000' },
+ name: 'Error state',
+ description: 'Data trending down',
+ sass: '$negative',
+ },
+ },
+};
+
+export const palette = () => (
+
+);
diff --git a/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx b/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx
new file mode 100644
index 000000000..ef14926b6
--- /dev/null
+++ b/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx
@@ -0,0 +1,160 @@
+/** @jsx jsx */
+import { FC, useState, Fragment } from 'react';
+import { jsx } from 'theme-ui';
+import tinycolor from 'tinycolor2';
+import { CircleSlashIcon } from '@primer/octicons-react';
+import copy from 'copy-to-clipboard';
+import { colorToStr, mostReadable } from '../utils';
+import { ColorBlockProps, ColorValue, colorContrast } from '../types';
+import { GridContainerProps, GridContainer } from '../GridContainer';
+
+const CopyItem: FC<{ name: string; value?: string }> = ({ name, value }) => {
+ const [hover, setHover] = useState(false);
+ const [copied, setCopied] = useState(false);
+ return value ? (
+
setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ onClick={() => {
+ copy(value);
+ setCopied(true);
+ }}
+ sx={{
+ cursor: 'pointer',
+ flex: '1 1 0px',
+ p: 2,
+ borderRight: 'solid 2px rgba(255,255,255,0.5)',
+ bg: hover ? 'rgba(255,255,255,0.2)' : 'transparent',
+ }}
+ >
+ {copied ? (
+
Copied
+ ) : (
+
+ Copy
+ {name}
+
+ )}
+
+ ) : null;
+};
+/**
+ * Color item displaying the color as a block with values for hex, class and sass can be copied to clipboard on hover.
+ * Design inspired from [E-Trade Design System](https://docs.etrade.design/colors).
+ */
+export const ETradeColor: FC
= ({ name, color }) => {
+ const [hover, setHover] = useState(false);
+ const colorObj: ColorValue =
+ typeof color === 'string' ? { value: color } : color;
+ const {
+ value: colorValue,
+ name: colorName,
+ sass,
+ css,
+ description,
+ } = colorObj;
+
+ const { hex } = colorToStr(colorValue);
+ const textColor = mostReadable(hex);
+ const contrast = tinycolor.readability(hex, '#ffffff');
+ return (
+
+
setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ sx={{
+ bg: colorValue,
+ color: textColor,
+ height: 85,
+ position: 'relative',
+ }}
+ >
+
+
{name}
+
{hex}
+
{css}
+
+
{sass}
+
+ {hover && (
+
+
+
+
+
+ )}
+
+
+
+
{colorName}
+
{description}
+ {contrast < colorContrast.small.ratio && (
+
+
+ Not for text
+
+ )}
+
+
+
+
+
+
+ accent
+
+
+ HEX: #8c7873
+
+
+ RGB: 140, 120, 115
+
+
+
+
+
+
+ accent
+
+
+ HEX: #8c7873
+
+
+ RGB: 140, 120, 115
+
+
+
+
+
+
+ brand
+
+
+ HEX: #e95b54
+
+
+ RGB: 233, 91, 84
+
+
+
+
+
+
+ #fbce4a
+
+
+ HEX: #fbce4a
+
+
+ RGB: 251, 206, 74
+
+
+
+
+
+
+
+ color-1
+
+
+ HEX: #fbce4a
+
+
+ RGB: 251, 206, 74
+
+
+
+
+
+
+
+ color-2
+
+
+ HEX: #fcfbe8
+
+
+ RGB: 252, 251, 232
+
+
+
+
+
+
+
+ color-3
+
+
+ HEX: #fff4d5
+
+
+ RGB: 255, 244, 213
+
+
+
+
+
+
+
+ color-4
+
+
+ HEX: #f6cab7
+
+
+ RGB: 246, 202, 183
+
+
+
+
+
+
+
+ color-5
+
+
+ HEX: #ec96ad
+
+
+ RGB: 236, 150, 173
+
+
+
+
+
+
+
+ color-6
+
+
+ HEX: #ca589d
+
+
+ RGB: 202, 88, 157
+
+
+
+
+
+
+
+ text
+
+
+ HEX: #000000
+
+
+ RGB: 0, 0, 0
+
+
+
+
+
+
+ shadow
+
+
+ HEX: #000000
+
+
+ RGB: 0, 0, 0, 0.1
+
+
+
+
+
+
+ accent
+
+
+ #8c7873
+
+
+
+
+
+
+
+ accent
+
+
+ #8c7873
+
+
+
+
+
+
+
+ brand
+
+
+ #e95b54
+
+
+
+
+
+
+
+ #cf1322
+
+
+ 207, 19, 34
+
+
+
+
+
+
+
+
+ red-1
+
+
+ #fff1f0
+
+
+
+
+
+
+
+
+ red-2
+
+
+ #ffccc7
+
+
+
+
+
+
+
+
+ red-3
+
+
+ #ffa39e
+
+
+
+
+
+
+
+
+ red-4
+
+
+ #ff7875
+
+
+
+
+
+
+
+
+ red-5
+
+
+ #ff4d4f
+
+
+
+
+
+
+
+
+ red-6
+
+
+ #f5222d
+
+
+
+
+
+
+
+
+ red-7
+
+
+ #cf1322
+
+
+
+
+
+
+
+
+ red-8
+
+
+ #a8071a
+
+
+
+
+
+
+
+
+ text
+
+
+ #000000
+
+
+
+
+
+
+
+ shadow
+
+
+ #000000
+
+
+
+
+
+
+
+ accent
+
+
+ #8c7873
+
+
+
+
+
+
+
+ accent
+
+
+ #8c7873
+
+
+
+
+
+
+
+ brand
+
+
+ #e95b54
+
+
+
+
+
+
+
+ #cf1322
+
+
+ 207, 19, 34
+
+
+
+
+
+
+
+
+ green-1
+
+
+ #f6ffed
+
+
+
+
+
+
+
+
+ green-2
+
+
+ #d9f7be
+
+
+
+
+
+
+
+
+ green-3
+
+
+ #b7eb8f
+
+
+
+
+
+
+
+
+ green-4
+
+
+ #95de64
+
+
+
+
+
+
+
+
+ green-5
+
+
+ #73d13d
+
+
+
+
+
+
+
+
+ green-6
+
+
+ #52c41a
+
+
+
+
+
+
+
+
+ green-7
+
+
+ #389e0d
+
+
+
+
+
+
+
+
+ green-8
+
+
+ #237804
+
+
+
+
+
+
+
+
+ green-9
+
+
+ #135200
+
+
+
+
+
+
+
+
+ green-10
+
+
+ #092b00
+
+
+
+
+
+
+
+
+ text
+
+
+ #000000
+
+
+
+
+
+
+
+ shadow
+
+
+ #000000
+
+
+
+
+
+
+
+ accent
+
+
+ HEX: #8c7873
+
+
+
+
+
+
+ accent
+
+
+ HEX: #8c7873
+
+
+
+
+
+
+ Critical
+
+
+ brand #f94d32
+
+
+
+
+
+
+ Brand
+
+
+ Blue400 #2270ee
+
+
+
+
+
+
+
+ Critical
+
+
+ Red400 #f94d32
+
+
+
+
+
+
+
+ Warning
+
+
+ Yellow400 #ffc902
+
+
+
+
+
+
+
+ Success
+
+
+ Green500 #18a761
+
+
+
+
+
+
+
+ Info
+
+
+ Blue400 #2270ee
+
+
+
+
+
+
+
+ Border
+
+
+ Neutral60 #dfe0e1
+
+
+
+
+
+
+
+ Accent
+
+
+ Neutral40 #f5f5f5
+
+
+
+
+
+
+
+ text
+
+
+ HEX: #000000
+
+
+
+
+
+
+ shadow
+
+
+ HEX: #000000
+
+
+
+
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+
+
+
+
+ NAME
+
+
+ accent
+
+
+
+
+
+ HEX
+
+
+ #8c7873
+
+
+
+
+ RGB
+
+
+ 140, 120, 115
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+
+
+
+
+ NAME
+
+
+ accent
+
+
+
+
+
+ HEX
+
+
+ #8c7873
+
+
+
+
+ RGB
+
+
+ 140, 120, 115
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+
+
+
+
+ NAME
+
+
+ brand - Critical
+
+
+
+
+
+ HEX
+
+
+ #f94d32
+
+
+
+
+ RGB
+
+
+ 249, 77, 50
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+
+
+
+
+ NAME
+
+
+ Blue400 - Brand
+
+
+
+
+
+ HEX
+
+
+ #2270ee
+
+
+
+
+ RGB
+
+
+ 34, 112, 238
+
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+
+
+
+
+ NAME
+
+
+ R300 - Poppy surprise
+
+
+
+
+
+ HEX
+
+
+ #ff5630
+
+
+
+
+ RGB
+
+
+ 255, 86, 48
+
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+
+
+
+
+ NAME
+
+
+ Y300 - Golden state
+
+
+
+
+
+ HEX
+
+
+ #ffab00
+
+
+
+
+ RGB
+
+
+ 255, 171, 0
+
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+
+
+
+
+ NAME
+
+
+ G300 - Fine pine
+
+
+
+
+
+ HEX
+
+
+ #36b37e
+
+
+
+
+ RGB
+
+
+ 54, 179, 126
+
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+
+
+
+
+ NAME
+
+
+ T300 - Tamarama
+
+
+
+
+
+ HEX
+
+
+ #00b8d9
+
+
+
+
+ RGB
+
+
+ 0, 184, 217
+
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+
+
+
+
+ NAME
+
+
+ P300 - Da' juice
+
+
+
+
+
+ HEX
+
+
+ #6554c0
+
+
+
+
+ RGB
+
+
+ 101, 84, 192
+
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+
+
+
+
+ NAME
+
+
+ Red400 - Critical
+
+
+
+
+
+ HEX
+
+
+ #f94d32
+
+
+
+
+ RGB
+
+
+ 249, 77, 50
+
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+
+
+
+
+
+
+ HEX
+
+
+ #000000
+
+
+
+
+ RGB
+
+
+ 0, 0, 0
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+ A
+
+
+ FAIL
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+ A
+
+
+ PASS
+
+
+
+
+
+
+
+
+ NAME
+
+
+ shadow
+
+
+
+
+
+ HEX
+
+
+ #000000
+
+
+
+
+ RGB
+
+
+ 0, 0, 0, 0.1
+
+
+
+
+
+
+
+
+
+
+ RGB: 140/120/115
+
+
+ HEX: #8c7873
+
+
+ CMYK: 0/14/18/45
+
+
+ Pantone 409C
+
+
+ RAL: 7048
+
+
+
+
+
+
+
+
+
+ RGB: 140/120/115
+
+
+ HEX: #8c7873
+
+
+ CMYK: 0/14/18/45
+
+
+ Pantone 409C
+
+
+ RAL: 7048
+
+
+
+
+
+
+
+
+
+ RGB: 249/77/50
+
+
+ HEX: #f94d32
+
+
+ CMYK: 0/69/80/2
+
+
+ Pantone 171C
+
+
+ RAL: 3028
+
+
+
+
+
+
+
+
+
+ RGB: 34/112/238
+
+
+ HEX: #2270ee
+
+
+ CMYK: 86/53/0/7
+
+
+ Pantone 2726C
+
+
+ RAL: 5002
+
+
+
+
+
+
+
+
+
+
+ RGB: 255/86/48
+
+
+ HEX: #ff5630
+
+
+ CMYK: 0/66/81/0
+
+
+ Pantone 171C
+
+
+ RAL: 2004
+
+
+
+
+
+
+
+
+
+
+ RGB: 255/171/0
+
+
+ HEX: #ffab00
+
+
+ CMYK: 0/33/100/0
+
+
+ Pantone 137C
+
+
+ RAL: 1003
+
+
+
+
+
+
+
+
+
+
+ RGB: 54/179/126
+
+
+ HEX: #36b37e
+
+
+ CMYK: 70/0/30/30
+
+
+ Pantone 339C
+
+
+ RAL: 6024
+
+
+
+
+
+
+
+
+
+
+ RGB: 0/184/217
+
+
+ HEX: #00b8d9
+
+
+ CMYK: 100/15/0/15
+
+
+ Pantone 3125C
+
+
+ RAL: 5012
+
+
+
+
+
+
+
+
+
+
+ RGB: 101/84/192
+
+
+ HEX: #6554c0
+
+
+ CMYK: 47/56/0/25
+
+
+ Pantone 2725C
+
+
+ RAL: 5002
+
+
+
+
+
+
+
+
+
+
+ RGB: 249/77/50
+
+
+ HEX: #f94d32
+
+
+ CMYK: 0/69/80/2
+
+
+ Pantone 171C
+
+
+ RAL: 3028
+
+
+
+
+
+
+
+
+
+
+ RGB: 0/0/0
+
+
+ HEX: #000000
+
+
+ CMYK: 0/0/0/100
+
+
+ Pantone 419C
+
+
+ RAL: 9005
+
+
+
+
+
+
+
+
+
+ RGB: 0/0/0/0.1
+
+
+ HEX: #000000
+
+
+ CMYK: 0/0/0/100
+
+
+ Pantone 419C
+
+
+ RAL: 9005
+
+
+
+
+
+
+
+
+ accent
+
+
+
+
+ RGB 140, 120, 115
+
+
+ HEX #8c7873
+
+
+ CMYK: 0, 14, 18, 45
+
+
+ PMS 409C
+
+
+
+
+
+
+
+
+
+
+
+ accent
+
+
+
+
+ RGB 140, 120, 115
+
+
+ HEX #8c7873
+
+
+ CMYK: 0, 14, 18, 45
+
+
+ PMS 409C
+
+
+
+
+
+
+
+
+
+
+
+ Critical brand
+
+
+
+
+ RGB 249, 77, 50
+
+
+ HEX #f94d32
+
+
+ CMYK: 0, 69, 80, 2
+
+
+ PMS 171C
+
+
+
+
+
+
+
+
+
+
+
+
+ Brand
+
+
+
+
+ light: Blue400
+
+
+ dark: Blue800
+
+
+
+
+
+
+
+
+
+
+
+
+ Poppy surprise R300
+
+
+
+
+ RGB 255, 86, 48
+
+
+ HEX #ff5630
+
+
+ CMYK: 0, 66, 81, 0
+
+
+ PMS 171C
+
+
+
+
+
+
+
+
+
+
+
+
+ Golden state Y300
+
+
+
+
+ RGB 255, 171, 0
+
+
+ HEX #ffab00
+
+
+ CMYK: 0, 33, 100, 0
+
+
+ PMS 137C
+
+
+
+
+
+
+
+
+
+
+
+
+ Fine pine G300
+
+
+
+
+ RGB 54, 179, 126
+
+
+ HEX #36b37e
+
+
+ CMYK: 70, 0, 30, 30
+
+
+ PMS 339C
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tamarama
+
+
+
+
+ light: T300
+
+
+ dark: #084eb2
+
+
+
+
+
+
+
+
+
+
+
+
+ Da' juice P300
+
+
+
+
+ RGB 101, 84, 192
+
+
+ HEX #6554c0
+
+
+ CMYK: 47, 56, 0, 25
+
+
+ PMS 2725C
+
+
+
+
+
+
+
+
+
+
+
+
+ Critical Red400
+
+
+
+
+ RGB 249, 77, 50
+
+
+ HEX #f94d32
+
+
+ CMYK: 0, 69, 80, 2
+
+
+ PMS 171C
+
+
+
+
+
+
+
+
+
+
+
+
+ text
+
+
+
+
+ RGB 0, 0, 0
+
+
+ HEX #000000
+
+
+ CMYK: 0, 0, 0, 100
+
+
+ PMS 419C
+
+
+
+
+
+
+
+
+
+
+
+ shadow
+
+
+
+
+ RGB 0, 0, 0, 0.1
+
+
+ HEX #000000
+
+
+ CMYK: 0, 0, 0, 100
+
+
+ PMS 419C
+
+
+
+
+
+
+
+
+
+
+ cobalt400
+
+
+ #0E1FC1
+
+
+
+
+
+
+
+ yellow50
+
+
+ #FFFAF0
+
+
+
+
+
+
+
+ yellow100
+
+
+ #FFF2D9
+
+
+
+
+
+
+
+ yellow200
+
+
+ #FFE3AC
+
+
+
+
+
+
+
+ yellow300
+
+
+ #FFCF70
+
+
+
+
+
+
+
+ yellow400
+
+
+ #FFC043
+
+
+
+
+
+
+
+ yellow500
+
+
+ #BC8B2C
+
+
+
+
+
+
+
+ yellow600
+
+
+ #997328
+
+
+
+
+
+
+
+ yellow700
+
+
+ #674D1B
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #8c7873:
+
+
+
+
+ RGB:
+
+
+ rgb(140,120,115):
+
+
+
+
+ Pantone:
+
+
+ 409C:
+
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #8c7873:
+
+
+
+
+ RGB:
+
+
+ rgb(140,120,115):
+
+
+
+
+ Pantone:
+
+
+ 409C:
+
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #f94d32:
+
+
+
+
+ RGB:
+
+
+ rgb(249,77,50):
+
+
+
+
+ Pantone:
+
+
+ 171C:
+
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #2270ee:
+
+
+
+
+ RGB:
+
+
+ rgb(34,112,238):
+
+
+
+
+ Pantone:
+
+
+ 2726C:
+
+
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #001b38:
+
+
+
+
+ RGB:
+
+
+ rgb(0,27,56):
+
+
+
+
+ Pantone:
+
+
+ 289C:
+
+
+
+
+
+
+
+
+
+
+ Blue Accessibility
+
+
+
+
+
+ HEX:
+
+
+ #0352a0:
+
+
+
+
+ RGB:
+
+
+ rgb(3,82,160):
+
+
+
+
+ Pantone:
+
+
+ 2945C:
+
+
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #0575e6:
+
+
+
+
+ RGB:
+
+
+ rgb(5,117,230):
+
+
+
+
+ Pantone:
+
+
+ 2727C:
+
+
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #4fa7ff:
+
+
+
+
+ RGB:
+
+
+ rgb(79,167,255):
+
+
+
+
+ Pantone:
+
+
+ 279C:
+
+
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #85dfff:
+
+
+
+
+ RGB:
+
+
+ rgb(133,223,255):
+
+
+
+
+ Pantone:
+
+
+ 636C:
+
+
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #ecf5ff:
+
+
+
+
+ RGB:
+
+
+ rgb(236,245,255):
+
+
+
+
+ Pantone:
+
+
+ 656C:
+
+
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #fbfdff:
+
+
+
+
+ RGB:
+
+
+ rgb(251,253,255):
+
+
+
+
+ Pantone:
+
+
+ 656C:
+
+
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #000000:
+
+
+
+
+ RGB:
+
+
+ rgb(0,0,0):
+
+
+
+
+ Pantone:
+
+
+ 419C:
+
+
+
+
+
+
+
+
+
+
+
+ HEX:
+
+
+ #000000:
+
+
+
+
+ RGB:
+
+
+ rgb(0,0,0,0.1):
+
+
+
+
+ Pantone:
+
+
+ 419C:
+
+
+
+
+
+
+
+
+
+ Brand
+
+
+ #2270ee
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-navy)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (4.55)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (4.62)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ Navy
+
+
+ #001f5f
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-navy)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (15.43)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (1.36)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ Teal
+
+
+ #10a5ac
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-teal)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (3.00)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (7.00)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ Orange
+
+
+ #f76923
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-orange)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (3.00)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (7.00)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ Yellow
+
+
+ #ffc836
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-yellow)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (1.55)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (13.57)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ Wine
+
+
+ #661d34
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-wine)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (11.73)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (1.79)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ Pink
+
+
+ #e63690
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-pink)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (3.97)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (5.29)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ Berry
+
+
+ #ac1361
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-berry)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (6.95)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (3.02)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ Violet
+
+
+ #5f67b9
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-violet)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (5.09)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (4.13)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ Gray
+
+
+ #8d8e99
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-gray)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (3.25)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (6.46)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ Black
+
+
+ #151619
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-black)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (18.09)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (1.16)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ White
+
+
+ #ffffff
+
+
+
+
+
+
+
+
+
+
+
+ |
+ var(--bolt-color-white)
+ |
+
+
+ |
+ Text size
+ |
+
+ Aa
+ |
+
+ Aa
+ |
+
+
+ |
+ #fff (1.00)
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+ #000 (21.00)
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ SORBET_DARK
+
+ #e68250
+
+
+
+ $color-sorbet-dark
+
+
+
+
+
+
+
+
+
+
+
+ SORBET_MEDIUM
+
+ #ffc7ac
+
+
+
+ $color-sorbet-medium
+
+
+
+
+
+
+
+
+
+
+
+ SORBET_LIGHT
+
+ #fff3ee
+
+
+
+ $color-sorbet-light
+
+
+
+
+
+
+
+
+
+
+
+ cdr-color-text-button-primary-hover
+
+
+ Text color for the hover state of primary buttons
+
+
+
+
+ #225c4e
+
+
+
+
+
+
+
+
+
+ cdr-color-text-primary
+
+
+ The default, primary text color
+
+
+
+
+ #0c0b08
+
+
+
+
+
+
+
+
+
+ cdr-color-text-secondary
+
+
+ The secondary text color
+
+
+
+
+ #423b2f
+
+
+
+
+
+
+
+
+
+ cdr-color-text-brand
+
+
+ Text set in our primary brand color
+
+
+
+
+ #113731
+
+
+
+
+
+
+
+
+
+ cdr-color-text-sale
+
+
+ The color of sale text
+
+
+
+
+ #cc0000
+
+
+
+
+
+
+
+
+
+ cdr-color-text-inverse
+
+
+ Text color on dark background
+
+
+
+
+ #f9f8f6
+
+
+
+
+
+
+
+
+
+ cdr-color-text-disabled
+
+
+ The color of text when it is disabled
+
+
+
+
+ #d1cbbd
+
+
+
+
+
+
+
+
+
+ cdr-color-text-success
+
+
+ Color of success messages
+
+
+
+
+ #2e6b34
+
+
+
+
+
+
+
+
+
+ cdr-color-text-warning
+
+
+ Color of warning messages
+
+
+
+
+ #854714
+
+
+
+
+
+
+
+ 40
+
+
+ $comet-color-emerald-40
+
+
+
+
+
+
+
+
+
+ 05
+
+
+ $comet-color-midnight-05
+
+
+
+ #020D17
+
+
+ AAA
+
+
+
+
+
+
+
+
+
+ 10
+
+
+ $comet-color-midnight-10
+
+
+
+ #041B2F
+
+
+ AAA
+
+
+
+
+
+
+
+
+
+ 20
+
+
+ $comet-color-midnight-20
+
+
+
+ #08365E
+
+
+ AAA
+
+
+
+
+
+
+
+
+
+ 30
+
+
+ $comet-color-midnight-30
+
+
+
+ #0C518D
+
+
+ AAA
+
+
+
+
+
+
+
+
+
+ 40
+
+
+ $comet-color-midnight-40
+
+
+
+
+
+
+
+
+
+ 50
+
+
+ $comet-color-midnight-50
+
+
+
+
+
+
+
+
+
+ 60
+
+
+ $comet-color-midnight-60
+
+
+
+ #439FEF
+
+
+ AAA
+
+
+
+
+
+
+
+
+
+ 70
+
+
+ $comet-color-midnight-70
+
+
+
+ #72B7F3
+
+
+ AAA
+
+
+
+
+
+
+
+
+
+ 80
+
+
+ $comet-color-midnight-80
+
+
+
+ #A1CFF7
+
+
+ AAA
+
+
+
+
+
+
+
+
+
+ 90
+
+
+ $comet-color-midnight-90
+
+
+
+ #D0E7FB
+
+
+ AAA
+
+
+
+
+
+
+
+
+
+
+ #004d80
+
+
+ rgb(0, 77, 128)
+
+
+
+
+ Primary Blue Dark
+
+
+ Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.
+
+
+
+
+ $color-primary-dark
+
+
+ var(--color-primary-dark)
+
+
+
+
+
+
+
+ Example
+
+
+ Description
+
+
+ Token
+
+
+ Contrast
+
+
+ Status
+
+
+
+
+
+
+
+ #de2362
+
+
+ rgb(222, 35, 98)
+
+
+
+
+ Status Danger
+
+
+ Danger red that is accessible with white. Only used in special cases like form validation and messaging.
+
+
+
+
+ $color-danger
+
+
+ var(--color-danger)
+
+
+
+
+
+
+
+
+
+
+
+ #f7b228
+
+
+ rgb(247, 178, 40)
+
+
+
+
+ Status Warning
+
+
+ Warning orange (non-accessible) is only used in special cases like form validation and messaging.
+
+
+
+
+ $color-warning
+
+
+ var(--color-warning)
+
+
+
+
+
+
+
+
+
+
+
+ #00875a
+
+
+ rgb(0, 135, 90)
+
+
+
+
+ Status Success
+
+
+ Success green that is accessible with white. Only used in special cases like form validation and messaging.
+
+
+
+
+ $color-success
+
+
+ var(--color-success)
+
+
+
+
+
+
+
+
+
+
+
+ #657787
+
+
+ rgb(101, 119, 135)
+
+
+
+
+ Gray Darker
+
+
+ Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts.
+
+
+
+
+ $color-gray-darker
+
+
+ var(--color-gray-darker)
+
+
+
+
+
+
+
+
+
+
+
+ #909599
+
+
+ rgb(144, 149, 153)
+
+
+
+
+ Gray Dark
+
+
+ Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text.
+
+
+
+
+ $color-gray-dark
+
+
+ var(--color-gray-dark)
+
+
+
+
+
+
+
+
+
+
+
+ #7a01c4
+
+
+ rgb(122, 1, 196)
+
+
+
+
+ Data 01
+
+
+ Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.
+
+
+
+
+ $color-data-01
+
+
+ var(--color-data-01)
+
+
+
+
+
+
+
+
+
+
+
+ #c21565
+
+
+ rgb(194, 21, 101)
+
+
+
+
+ Data 06
+
+
+ Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.
+
+
+
+
+ $color-data-06
+
+
+ var(--color-data-06)
+
+
+
+
+
+
+
+
+
+
+
+ Negative red
+
+
+ #cc0000
+
+
+
+ $negative
+
+
+
+
+
+
+
+
+
+
+
+ Blue 5
+
+
+ #001b38
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Blue Accessibility
+
+
+ #0352a0
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Blue Primary
+
+
+ #0575e6
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Blue 1
+
+
+ #4fa7ff
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Blue 2
+
+
+ #85dfff
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Blue 3
+
+
+ #ecf5ff
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Blue 4
+
+
+ #fbfdff
+
+
+
+
+
+
+
+
+