LightningColor
Color item displaying as a table row, with color, name, description, and allows for custom columns. Design inspired by Oracle's Lightning Design System.
$brand-accessible Dark variant of BRAND that is accessible with white | rgb(0, 77, 128) #004d80 BRAND_ACCESSIBLE | 2.6.0 | Yes | GA |
Name | Description | Default | Controls |
|---|---|---|---|
| columns | TableColumn[] | [] | |
| 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 | - | |
| whiteTextColor | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff string | - |
file | imports |
|---|---|
| "../utils" | colorToStr |
| "../../types" | ColorBlockPropsColorValue |
| "../../containers" | TableContainerPropsTableContainerTableRowContainerTableColumn |
| Token | Example | Released | Themeable | Support |
|---|---|---|---|---|
$brand-disabled Disabled state of BRAND_A11Y | rgb(201, 199, 197) #c9c7c5 BRAND_DISABLED | 2.6.0 | Yes | GA |
$brand-header Background color a branded app header | rgb(255, 255, 255) #ffffff PALETTE_GRAY_1 | 2.6.0 | Yes | I |
$brand-header-contrast Variant of BRAND_HEADER that is accessible with BRAND_HEADER | rgb(94, 94, 94) #5e5e5e BRAND_HEADER_CONTRAST | 2.6.0 | Yes | I |
$brand-header-contrast-warm Variant of BRAND_HEADER_CONTRAST that provides a warm color | rgb(191, 2, 1) #bf0201 BRAND_HEADER_CONTRAST_WARM | 2.6.0 | Yes | I |
$brand-primary Primary brand color | rgb(21, 137, 238) #1589ee BRAND_PRIMARY | 2.6.0 | Yes | GA |