DuetColor
Color item displaying as a row, with color, name, description, var, and sass variables as well as the contrast ratio ad status. Design inspired by Duet.
#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-darkvar(--color-primary-dark) | 8.85:1 |
Name | Description | Default | Controls |
|---|---|---|---|
| name | name of the color, If none, or same as the color value, some color blocks will not display it string | - | |
| color | color value as a string. accepted hex, rgb, hsl color strings ColorValue | - | |
| hover | hover prop boolean | - | |
| blackTextColor | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 string | #ffffff | |
| whiteTextColor | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff string | - |
package | imports | peer |
|---|---|---|
CopyContainer | ||
@primer/octicons-react ^10.0.0 | XIconXCircleFillIconCheckIconCheckCircleFillIconAlertIcon | |
react ^17.0.1 | ReactNodeFC | * |
theme-ui ^0.8.4 | jsx | |
tinycolor2 ^1.4.1 | tinycolor |
file | imports |
|---|---|
| "../utils" | colorToStr |
| "../../types" | ColorBlockPropsColorValuecolorContrastTokenStatusdefaultWhiteTextColorThemeColorProps |
| "../../containers" | TableContainerPropsTableContainerTableRowContainer |
| 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-dangervar(--color-danger) | 4.64:1 | |
#f7b228 rgb(247, 178, 40) | Status Warning Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $color-warningvar(--color-warning) | 1.85:1 | |
#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-successvar(--color-success) | 4.55:1 | |
#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-darkervar(--color-gray-darker) | 4.62:1 | |
#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-darkvar(--color-gray-dark) | 3.02:1 | |
#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-01var(--color-data-01) | 7.99:1 | |
#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-06var(--color-data-06) | 5.85:1 |