@czi-sds/mcp 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/component-props/Accordion.json +14 -15
- package/data/component-props/Alert.json +2 -44
- package/data/component-props/Autocomplete.json +14 -32
- package/data/component-props/Banner.json +11 -12
- package/data/component-props/Button.json +17 -82
- package/data/component-props/ButtonDropdown.json +26 -0
- package/data/component-props/ButtonIcon.json +4 -60
- package/data/component-props/ButtonToggle.json +2 -66
- package/data/component-props/Callout.json +11 -65
- package/data/component-props/CellBasic.json +28 -56
- package/data/component-props/CellComponent.json +4 -32
- package/data/component-props/CellHeader.json +13 -49
- package/data/component-props/ComplexFilter.json +24 -4
- package/data/component-props/ContentCard.json +66 -2
- package/data/component-props/Dialog.json +26 -0
- package/data/component-props/Dropdown.json +29 -67
- package/data/component-props/DropdownMenu.json +16 -56
- package/data/component-props/HeatmapChart.json +6 -87
- package/data/component-props/Icon.json +3 -8
- package/data/component-props/InputCheckbox.json +5 -53
- package/data/component-props/InputDropdown.json +11 -33
- package/data/component-props/InputRadio.json +5 -53
- package/data/component-props/InputSearch.json +6 -70
- package/data/component-props/InputSlider.json +21 -35
- package/data/component-props/InputText.json +7 -63
- package/data/component-props/InputToggle.json +5 -54
- package/data/component-props/Link.json +18 -0
- package/data/component-props/LoadingIndicator.json +1 -2
- package/data/component-props/MenuItem.json +11 -41
- package/data/component-props/MenuSelect.json +4 -67
- package/data/component-props/NavigationFooter.json +0 -8
- package/data/component-props/NavigationHeader.json +14 -65
- package/data/component-props/NavigationJumpTo.json +0 -40
- package/data/component-props/Notification.json +14 -58
- package/data/component-props/Pagination.json +8 -33
- package/data/component-props/Panel.json +4 -54
- package/data/component-props/SegmentedControl.json +0 -55
- package/data/component-props/TableRow.json +10 -38
- package/data/component-props/Tabs.json +18 -0
- package/data/component-props/Tag.json +10 -56
- package/data/component-props/TagFilter.json +0 -47
- package/data/component-props/Tooltip.json +12 -61
- package/data/component-props/TooltipCondensed.json +18 -0
- package/data/component-props/TooltipTable.json +0 -4
- package/data/zeroheight-exports/Accordion.md +167 -125
- package/data/zeroheight-exports/Banner.md +71 -48
- package/data/zeroheight-exports/Borders.md +72 -73
- package/data/zeroheight-exports/Buttons.md +375 -330
- package/data/zeroheight-exports/Callout.md +138 -116
- package/data/zeroheight-exports/Colors.md +254 -255
- package/data/zeroheight-exports/Content-Card.md +36 -37
- package/data/zeroheight-exports/Contributing-to-SDS.md +34 -35
- package/data/zeroheight-exports/Control-Inputs.md +289 -234
- package/data/zeroheight-exports/Corners.md +63 -64
- package/data/zeroheight-exports/Cover-page.md +0 -1
- package/data/zeroheight-exports/Dialog.md +237 -179
- package/data/zeroheight-exports/Downloads.md +10 -11
- package/data/zeroheight-exports/Drop-Shadows.md +40 -41
- package/data/zeroheight-exports/Dropdown-Input.md +158 -127
- package/data/zeroheight-exports/Dropdown-Menu.md +814 -718
- package/data/zeroheight-exports/Element-Status-Tracker.md +191 -192
- package/data/zeroheight-exports/Field-Inputs.md +149 -130
- package/data/zeroheight-exports/Filters.md +114 -94
- package/data/zeroheight-exports/Getting-Started.md +112 -249
- package/data/zeroheight-exports/Hero.md +43 -37
- package/data/zeroheight-exports/Icons.md +205 -206
- package/data/zeroheight-exports/Intent.md +6 -7
- package/data/zeroheight-exports/Introduction-to-Bases.md +8 -9
- package/data/zeroheight-exports/Introduction-to-Cells.md +11 -12
- package/data/zeroheight-exports/Introduction-to-DNA.md +8 -9
- package/data/zeroheight-exports/Introduction-to-Genes.md +8 -9
- package/data/zeroheight-exports/Introduction.md +52 -53
- package/data/zeroheight-exports/Link.md +50 -37
- package/data/zeroheight-exports/Lists.md +78 -63
- package/data/zeroheight-exports/Loading-Indicator.md +7 -8
- package/data/zeroheight-exports/Navigation.md +163 -142
- package/data/zeroheight-exports/Notification.md +132 -102
- package/data/zeroheight-exports/Panel.md +231 -115
- package/data/zeroheight-exports/Responsive-Design.md +35 -32
- package/data/zeroheight-exports/Search-Input.md +9 -10
- package/data/zeroheight-exports/Search.md +87 -104
- package/data/zeroheight-exports/Segmented-Control.md +68 -45
- package/data/zeroheight-exports/Spacing.md +210 -211
- package/data/zeroheight-exports/Table.md +414 -302
- package/data/zeroheight-exports/Tabs.md +126 -98
- package/data/zeroheight-exports/Tags.md +148 -118
- package/data/zeroheight-exports/Text-Link.md +32 -33
- package/data/zeroheight-exports/Theming.md +48 -29
- package/data/zeroheight-exports/Tooltips.md +253 -237
- package/data/zeroheight-exports/Typography.md +463 -464
- package/dist/stdio.js +44 -132
- package/package.json +3 -4
- package/data/component-props/Chip.json +0 -73
- package/data/component-props/List.json +0 -43
- package/data/component-props/Menu.json +0 -48
- package/data/component-props/Table.json +0 -26
- package/data/component-props-storybook/Accordion-storybook.json +0 -45
- package/data/component-props-storybook/Alert-storybook.json +0 -30
- package/data/component-props-storybook/Autocomplete-storybook.json +0 -67
- package/data/component-props-storybook/Banner-storybook.json +0 -78
- package/data/component-props-storybook/Button-storybook.json +0 -115
- package/data/component-props-storybook/ButtonDropdown-storybook.json +0 -73
- package/data/component-props-storybook/ButtonIcon-storybook.json +0 -60
- package/data/component-props-storybook/ButtonToggle-storybook.json +0 -68
- package/data/component-props-storybook/Callout-storybook.json +0 -90
- package/data/component-props-storybook/CellBasic-storybook.json +0 -138
- package/data/component-props-storybook/CellComponent-storybook.json +0 -48
- package/data/component-props-storybook/CellHeader-storybook.json +0 -71
- package/data/component-props-storybook/Chip-storybook.json +0 -26
- package/data/component-props-storybook/ComplexFilter-storybook.json +0 -60
- package/data/component-props-storybook/ContentCard-storybook.json +0 -175
- package/data/component-props-storybook/Dialog-storybook.json +0 -56
- package/data/component-props-storybook/Dropdown-storybook.json +0 -93
- package/data/component-props-storybook/DropdownMenu-storybook.json +0 -73
- package/data/component-props-storybook/HeatmapChart-storybook.json +0 -55
- package/data/component-props-storybook/Icon-storybook.json +0 -75
- package/data/component-props-storybook/InputCheckbox-storybook.json +0 -57
- package/data/component-props-storybook/InputDropdown-storybook.json +0 -80
- package/data/component-props-storybook/InputRadio-storybook.json +0 -56
- package/data/component-props-storybook/InputSearch-storybook.json +0 -55
- package/data/component-props-storybook/InputSlider-storybook.json +0 -55
- package/data/component-props-storybook/InputText-storybook.json +0 -59
- package/data/component-props-storybook/InputToggle-storybook.json +0 -42
- package/data/component-props-storybook/Link-storybook.json +0 -50
- package/data/component-props-storybook/List-storybook.json +0 -26
- package/data/component-props-storybook/LoadingIndicator-storybook.json +0 -34
- package/data/component-props-storybook/Menu-storybook.json +0 -26
- package/data/component-props-storybook/MenuItem-storybook.json +0 -74
- package/data/component-props-storybook/MenuSelect-storybook.json +0 -38
- package/data/component-props-storybook/NavigationFooter-storybook.json +0 -67
- package/data/component-props-storybook/NavigationHeader-storybook.json +0 -115
- package/data/component-props-storybook/NavigationJumpTo-storybook.json +0 -41
- package/data/component-props-storybook/Notification-storybook.json +0 -89
- package/data/component-props-storybook/Pagination-storybook.json +0 -50
- package/data/component-props-storybook/Panel-storybook.json +0 -52
- package/data/component-props-storybook/SegmentedControl-storybook.json +0 -30
- package/data/component-props-storybook/Table-storybook.json +0 -26
- package/data/component-props-storybook/TableHeader-storybook.json +0 -26
- package/data/component-props-storybook/TableRow-storybook.json +0 -62
- package/data/component-props-storybook/Tabs-storybook.json +0 -45
- package/data/component-props-storybook/Tag-storybook.json +0 -78
- package/data/component-props-storybook/TagFilter-storybook.json +0 -30
- package/data/component-props-storybook/Tooltip-storybook.json +0 -85
- package/data/component-props-storybook/TooltipCondensed-storybook.json +0 -38
- package/data/component-props-storybook/TooltipTable-storybook.json +0 -47
|
@@ -16,10 +16,10 @@ While Primitive Color variables define the individual colors within the design s
|
|
|
16
16
|
|
|
17
17
|
Semantic Color variables are named in such a way as to create predictable usage across SDS. They start with the variable group, followed by the element it is applied to, and then add any number of modifiers to communicate the color's specific application within the UI, such as prominence or state.
|
|
18
18
|
|
|
19
|
-
Because Semantic Color variables are scoped to individual UI elements, a single Primitive Color variable, such as
|
|
19
|
+
Because Semantic Color variables are scoped to individual UI elements, a single Primitive Color variable, such as _blue500_ (Light Mode) or _blue600_ (Dark Mode), can be mapped to a range of Semantic Color variables like _Accent.border_, _Accent.ornament_, _Accent.text-action_, etc. since all of these elements are the same color.
|
|
20
20
|
|
|
21
21
|
| Light Mode | Dark Mode |
|
|
22
|
-
|
|
|
22
|
+
| :--------: | :-------: |
|
|
23
23
|
|
|
24
24
|
### Semantic Color Variable Groups
|
|
25
25
|
|
|
@@ -31,91 +31,91 @@ Because Semantic Color variables are scoped to individual UI elements, a single
|
|
|
31
31
|
|
|
32
32
|
Base Surface and Background colors create dimension, hierarchy, and separation between content.
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
_Background-primary_ is used for the empty space that a page's content is placed upon (i.e., the page's main or base-level background). _Background-secondary_ and _background-tertiary_ are used when additional hierarchy is needed within one layer.
|
|
35
35
|
|
|
36
|
-
Always implement the Background Colors in order, such that
|
|
36
|
+
Always implement the Background Colors in order, such that _background-secondary_ is layered on top of _background-primary_ and _background-tertiary_ is layered on top of _background-secondary_; never layer _background-tertiary_ directly on top of _background-primary_.
|
|
37
37
|
|
|
38
|
-
Use
|
|
38
|
+
Use _surface_ for elements that are placed at a higher elevation than the page's main content such as the case with Dropdown Menu or Dialog.
|
|
39
39
|
|
|
40
|
-
When greater visual contrast is needed use
|
|
40
|
+
When greater visual contrast is needed use _background-primary-inverse, background-secondary-inverse,_ and _surface-inverse_.
|
|
41
41
|
|
|
42
42
|
| Light Mode | Dark Mode |
|
|
43
|
-
|
|
|
44
|
-
|
|
45
|
-
| Name
|
|
46
|
-
|
|
|
47
|
-
| background-primary
|
|
48
|
-
| background-secondary
|
|
49
|
-
| background-tertiary
|
|
50
|
-
| background-primary-inverse
|
|
51
|
-
| background-secondary-inverse |
|
|
52
|
-
| surface
|
|
53
|
-
| surface-inverse
|
|
43
|
+
| :--------: | :-------: |
|
|
44
|
+
|
|
45
|
+
| Name | | Figma Variable | | CSS / SCSS Variables |
|
|
46
|
+
| ---------------------------- | --- | ---------------------------------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
47
|
+
| background-primary | | Light: Base.background-primary (#ffffff) Dark: Base.background-primary (#101010) | | CSS light / dark: `--sds-color-semantic-component-base-background-primary` SCSS light: `$sds-color-semantic-component-base-background-primary` SCSS dark: `$sds-color-semantic-component-base-background-primary-dark` |
|
|
48
|
+
| background-secondary | | Light: Base.background-secondary (#f8f8f8) Dark: Base.background-secondary (#333333) | | CSS light / dark: `--sds-color-semantic-component-base-background-secondary` SCSS light: `$sds-color-semantic-component-base-background-secondary` SCSS dark: `$sds-color-semantic-component-base-background-secondary-dark` |
|
|
49
|
+
| background-tertiary | | Light: Base.background-tertiary (#ededed) Dark: Base.background-tertiary (#494949) | | CSS light / dark: `--sds-color-semantic-component-base-background-tertiary` SCSS light: `$sds-color-semantic-component-base-background-tertiary` SCSS dark: `$sds-color-semantic-component-base-background-tertiary-dark` |
|
|
50
|
+
| background-primary-inverse | | Light: Base.background-primary-inverse (#000000) Dark: Base.background-primary-inverse (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-background-primary-inverse` SCSS light: `$sds-color-semantic-component-base-background-primary-inverse` SCSS dark: `$sds-color-semantic-component-base-background-primary-inverse-dark` |
|
|
51
|
+
| background-secondary-inverse | | Light: Base.background-secondary-inverse (#3b3b3b) Dark: Base.background-secondary-inverse (#ededed) | | CSS light / dark: `--sds-color-semantic-component-base-background-secondary-inverse` SCSS light: `$sds-color-semantic-component-base-background-secondary-inverse` SCSS dark: `$sds-color-semantic-component-base-background-secondary-inverse-dark` |
|
|
52
|
+
| surface | | Light: Base.surface (#ffffff) Dark: Base.surface (#333333) | | CSS light / dark: `--sds-color-semantic-component-base-surface` SCSS light: `$sds-color-semantic-component-base-surface` SCSS dark: `$sds-color-semantic-component-base-surface-dark` |
|
|
53
|
+
| surface-inverse | | Light: Base.surface-inverse (#000000) Dark: Base.surface-inverse (#ededed) | | CSS light / dark: `--sds-color-semantic-component-base-surface-inverse` SCSS light: `$sds-color-semantic-component-base-surface-inverse` SCSS dark: `$sds-color-semantic-component-base-surface-inverse-dark` |
|
|
54
54
|
|
|
55
55
|
#### Fill
|
|
56
56
|
|
|
57
57
|
Base Fill colors are used for element backgrounds that are interactive and change in response to users hovering, pressing, etc.
|
|
58
58
|
|
|
59
59
|
| Light Mode | Dark Mode |
|
|
60
|
-
|
|
|
60
|
+
| :--------: | :-------: |
|
|
61
61
|
|
|
62
|
-
| Name
|
|
63
|
-
|
|
|
64
|
-
| fill-primary
|
|
65
|
-
| fill-hover
|
|
66
|
-
| fill-pressed
|
|
67
|
-
| fill-open
|
|
68
|
-
| fill-selected |
|
|
69
|
-
| fill-disabled |
|
|
62
|
+
| Name | | Figma Variable | | CSS / SCSS Variable |
|
|
63
|
+
| ------------- | --- | ------------------------------------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
64
|
+
| fill-primary | | Light: Base.fill-primary (#ffffff) Dark: Base.fill-primary (#333333) | | CSS light / dark: `--sds-color-semantic-component-base-fill-primary` SCSS light: `$sds-color-semantic-component-base-fill-primary` SCSS dark: `$sds-color-semantic-component-base-fill-primary-dark` |
|
|
65
|
+
| fill-hover | | Light: Base.fill-hover (rgba(195, 195, 195, 0.2800)) Dark: Base.fill-hover (rgba(105, 105, 105, 0.2800)) | | CSS light / dark: `--sds-color-semantic-component-base-fill-hover` SCSS light: `$sds-color-semantic-component-base-fill-hover` SCSS dark: `$sds-color-semantic-component-base-fill-hover-dark` |
|
|
66
|
+
| fill-pressed | | Light: Base.fill-pressed (rgba(195, 195, 195, 0.2800)) Dark: Base.fill-pressed (rgba(105, 105, 105, 0.2800)) | | CSS light / dark: `--sds-color-semantic-component-base-fill-pressed` SCSS light: `$sds-color-semantic-component-base-fill-pressed` SCSS dark: `$sds-color-semantic-component-base-fill-pressed-dark` |
|
|
67
|
+
| fill-open | | Light: Base.fill-open (rgba(195, 195, 195, 0.2800)) Dark: Base.fill-open (rgba(105, 105, 105, 0.2800)) | | CSS light / dark: `--sds-color-semantic-component-base-fill-open` SCSS light: `$sds-color-semantic-component-base-fill-open` SCSS dark: `$sds-color-semantic-component-base-fill-open-dark` |
|
|
68
|
+
| fill-selected | | Light: Base.fill-selected (#000000) Dark: Base.fill-selected (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-fill-selected` SCSS light: `$sds-color-semantic-component-base-fill-selected` SCSS dark: `$sds-color-semantic-component-base-fill-selected-dark` |
|
|
69
|
+
| fill-disabled | | Light: Base.fill-disabled (#dfdfdf) Dark: Base.fill-disabled (#494949) | | CSS light / dark: `--sds-color-semantic-component-base-fill-disabled` SCSS light: `$sds-color-semantic-component-base-fill-disabled` SCSS dark: `$sds-color-semantic-component-base-fill-disabled-dark` |
|
|
70
70
|
|
|
71
71
|
#### Border and Divider
|
|
72
72
|
|
|
73
73
|
Base Border colors are used for element borders.
|
|
74
74
|
|
|
75
|
-
Base
|
|
75
|
+
Base _border-table_ is intended to be used only on the borders that separate rows and columns in Tables.
|
|
76
76
|
|
|
77
|
-
Base
|
|
77
|
+
Base _divider_ is intended to be used only on horizontal dividers that separate blocks of content.
|
|
78
78
|
|
|
79
79
|
| Light Mode | Dark Mode |
|
|
80
|
-
|
|
|
81
|
-
|
|
82
|
-
| **Name**
|
|
83
|
-
|
|
|
84
|
-
| border-primary
|
|
85
|
-
| border-primary-hover
|
|
86
|
-
| border-primary-pressed
|
|
87
|
-
| border-primary-disabled
|
|
88
|
-
| border-secondary
|
|
89
|
-
| border-primary-inverse
|
|
90
|
-
| border-primary-hover-inverse
|
|
91
|
-
| border-primary-pressed-inverse
|
|
92
|
-
| border-primary-disabled-inverse |
|
|
93
|
-
| border-on-fill
|
|
94
|
-
| divider
|
|
95
|
-
| divider-inverse
|
|
80
|
+
| :--------: | :-------: |
|
|
81
|
+
|
|
82
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
83
|
+
| ------------------------------- | --- | ---------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
84
|
+
| border-primary | | Light: Base.border-primary (#7a7a7a) Dark: Base.border-primary (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary` SCSS light: `$sds-color-semantic-component-base-border-primary` SCSS dark: `$sds-color-semantic-component-base-border-primary-dark` |
|
|
85
|
+
| border-primary-hover | | Light: Base.border-primary-hover (#000000) Dark: Base.border-primary-hover (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-border-hover` SCSS light: `$sds-color-semantic-component-base-border-primary-hover` SCSS dark: `$sds-color-semantic-component-base-border-primary-hover-dark` |
|
|
86
|
+
| border-primary-pressed | | Light: Base.border-primary-pressed (#000000) Dark: Base.border-primary-pressed (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-pressed` SCSS light: `$sds-color-semantic-component-base-border-primary-pressed` SCSS dark: `$sds-color-semantic-component-base-border-primary-pressed-dark` |
|
|
87
|
+
| border-primary-disabled | | Light: Base.border-primary-disabled (#c3c3c3) Dark: Base.border-primary-disabled (#696969) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-disabled` SCSS light: `$sds-color-semantic-component-base-border-primary-disabled` SCSS dark: `$sds-color-semantic-component-base-border-primary-disabled-dark` |
|
|
88
|
+
| border-secondary | | Light: Base.border-secondary (#c3c3c3) Dark: Base.border-secondary (#696969) | | CSS light / dark: `--sds-color-semantic-component-base-border-secondary` SCSS light: `$sds-color-semantic-component-base-border-secondary` SCSS dark: `$sds-color-semantic-component-base-border-secondary-dark` |
|
|
89
|
+
| border-primary-inverse | | Light: Base.border-primary-inverse (#c3c3c3) Dark: Base.border-primary-inverse (#696969) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-inverse` SCSS light: `$sds-color-semantic-component-base-border-primary-inverse` SCSS dark: `$sds-color-semantic-component-base-border-primary-inverse-dark` |
|
|
90
|
+
| border-primary-hover-inverse | | Light: Base.border-primary-hover-inverse (#ffffff) Dark: Base.border-primary-hover-inverse (#000000) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-hover-inverse` SCSS light: `$sds-color-semantic-component-base-border-primary-hover-inverse` SCSS dark: `$sds-color-semantic-component-base-border-primary-hover-inverse-dark` |
|
|
91
|
+
| border-primary-pressed-inverse | | Light: Base.border-primary-pressed-inverse (#ffffff) Dark: Base.border-primary-pressed-inverse (#000000) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-pressed-inverse` SCSS light: `$sds-color-semantic-component-base-border-primary-pressed-inverse` SCSS dark: `$sds-color-semantic-component-base-border-primary-pressed-inverse-dark` |
|
|
92
|
+
| border-primary-disabled-inverse | | Light: Base.border-primary-disabled-inverse (#7a7a7a) Dark: Base.border-primary-disabled-inverse (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-disabled-inverse` SCSS light: `$sds-color-semantic-component-base-border-primary-disabled-inverse` SCSS dark: `$sds-color-semantic-component-base-border-primary-disabled-inverse-dark` |
|
|
93
|
+
| border-on-fill | | Light: Base.border-on-fill (#ffffff) Dark: Base.border-on-fill (#000000) | | CSS light / dark: `--sds-color-semantic-component-base-border-on-fill` SCSS light: `$sds-color-semantic-component-base-border-on-fill` SCSS dark: `$sds-color-semantic-component-base-border-on-fill-dark` |
|
|
94
|
+
| divider | | Light: Base.divider (#dfdfdf) Dark: Base.divider (#494949) | | CSS light / dark: `--sds-color-semantic-component-base-divider` SCSS light: `$sds-color-semantic-component-base-divider` SCSS dark: `$sds-color-semantic-component-base-divider-dark` |
|
|
95
|
+
| divider-inverse | | Light: Base.divider-inverse (#7a7a7a) Dark: Base.divider-inverse (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-base-divider-inverse` SCSS light: `$sds-color-semantic-component-base-divider-inverse` SCSS dark: `$sds-color-semantic-component-base-divider-inverse-dark` |
|
|
96
96
|
|
|
97
97
|
#### Ornament
|
|
98
98
|
|
|
99
99
|
Base Ornament colors are used primarily in components that contain icons that are integral to their functionality, such as Accordions, Dropdown Inputs, etc.
|
|
100
100
|
|
|
101
|
-
When the fill of the element that the ornament is placed on top of is too dark in both Light Mode and Dark Mode, and using the same color in both modes is needed to pass visual accessibility, such as the icon inside primary Buttons, use
|
|
101
|
+
When the fill of the element that the ornament is placed on top of is too dark in both Light Mode and Dark Mode, and using the same color in both modes is needed to pass visual accessibility, such as the icon inside primary Buttons, use _ornament-on-fill_.
|
|
102
102
|
|
|
103
|
-
When visual contrast is needed use
|
|
103
|
+
When visual contrast is needed use _ornament-primary-inverse_.
|
|
104
104
|
|
|
105
105
|
| Light Mode | Dark Mode |
|
|
106
|
-
|
|
|
107
|
-
|
|
108
|
-
| **Name**
|
|
109
|
-
|
|
|
110
|
-
| ornament-primary
|
|
111
|
-
| ornament-secondary
|
|
112
|
-
| ornament-secondary-hover
|
|
113
|
-
| ornament-secondary-pressed |
|
|
114
|
-
| ornament-primary-inverse
|
|
115
|
-
| ornament-secondary-inverse |
|
|
116
|
-
| ornament-on-fill
|
|
117
|
-
| ornament-disabled
|
|
118
|
-
| ornament-disabled-inverse
|
|
106
|
+
| :--------: | :-------: |
|
|
107
|
+
|
|
108
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
109
|
+
| -------------------------- | --- | ------------------------------------------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
110
|
+
| ornament-primary | | Light: Base.ornament-primary (#000000) Dark: Base.ornament-primary (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-primary` SCSS light: `$sds-color-semantic-component-base-ornament-primary` SCSS dark: `$sds-color-semantic-component-base-ornament-primary-dark` |
|
|
111
|
+
| ornament-secondary | | Light: Base.ornament-secondary (#7a7a7a) Dark: Base.ornament-secondary (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-secondary` SCSS light: `$sds-color-semantic-component-base-ornament-secondary` SCSS dark: `$sds-color-semantic-component-base-ornament-secondary-dark` |
|
|
112
|
+
| ornament-secondary-hover | | Light: Base.ornament-secondary-hover (#000000) Dark: Base.ornament-secondary-hover (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-secondary-hover` SCSS light: `$sds-color-semantic-component-base-ornament-secondary-hover` SCSS dark: `$sds-color-semantic-component-base-ornament-secondary-hover-dark` |
|
|
113
|
+
| ornament-secondary-pressed | | Light: Base.ornament-secondary-pressed (#000000) Dark: Base.ornament-secondary-pressed (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-secondary-pressed` SCSS light: `$sds-color-semantic-component-base-ornament-secondary-pressed` SCSS dark: `$sds-color-semantic-component-base-ornament-secondary-pressed-dark` |
|
|
114
|
+
| ornament-primary-inverse | | Light: Base.ornament-primary-inverse (#ffffff) Dark: Base.ornament-primary-inverse (#000000) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-primary-inverse` SCSS light: `$sds-color-semantic-component-base-ornament-primary-inverse` SCSS dark: `$sds-color-semantic-component-base-ornament-primary-inverse-dark` |
|
|
115
|
+
| ornament-secondary-inverse | | Light: Base.ornament-secondary-inverse (#c3c3c3) Dark: Base.ornament-secondary-inverse (#696969) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-secondary-inverse` SCSS light: `$sds-color-semantic-component-base-ornament-secondary-inverse` SCSS dark: `$sds-color-semantic-component-base-ornament-secondary-inverse-dark` |
|
|
116
|
+
| ornament-on-fill | | Light: Base.ornament-on-fill (#ffffff) Dark: Base.ornament-on-fill (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-on-fill` SCSS light: `$sds-color-semantic-component-base-ornament-on-fill` SCSS dark: `$sds-color-semantic-component-base-ornament-on-fill-dark` |
|
|
117
|
+
| ornament-disabled | | Light: Base.ornament-disabled (#c3c3c3) Dark: Base.ornament-disabled (#696969) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-disabled` SCSS light: `$sds-color-semantic-component-base-ornament-disabled` SCSS dark: `$sds-color-semantic-component-base-ornament-disabled-dark` |
|
|
118
|
+
| ornament-disabled-inverse | | Light: Base.ornament-disabled-inverse (#7a7a7a) Dark: Base.ornament-disabled-inverse (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-disabled-inverse` SCSS light: `$sds-color-semantic-component-base-ornament-disabled-inverse` SCSS dark: `$sds-color-semantic-component-base-ornament-disabled-inverse-dark` |
|
|
119
119
|
|
|
120
120
|
#### Text
|
|
121
121
|
|
|
@@ -123,24 +123,24 @@ Base Text colors are to be used for text throughout applications built using SDS
|
|
|
123
123
|
|
|
124
124
|
If there is a need to communicate that a text element is interactive, such as a Link, or indicate a specific intent, such as beta, info, negative, neutral, notice, or positive, use the Text Color variable that aligns to those needs as shown in the corresponding sections below.
|
|
125
125
|
|
|
126
|
-
Base
|
|
126
|
+
Base _text-primary-inverse_ and _text-secondary-inverse_ are used only when the fill of the element that the text is placed on top of is too dark or light to be legible and an alternate color is needed to pass visual accessibility, such as the text inside inverted Tooltips.
|
|
127
127
|
|
|
128
|
-
When the fill of the element that the text is placed on top of is too dark in both Light Mode and Dark Mode, and using the same color in both modes is needed to pass visual accessibility, such as the text inside primary Buttons, use
|
|
128
|
+
When the fill of the element that the text is placed on top of is too dark in both Light Mode and Dark Mode, and using the same color in both modes is needed to pass visual accessibility, such as the text inside primary Buttons, use _text-on-fill_.
|
|
129
129
|
|
|
130
130
|
| Light Mode | Dark Mode |
|
|
131
|
-
|
|
|
132
|
-
|
|
133
|
-
| **Name**
|
|
134
|
-
|
|
|
135
|
-
| primary
|
|
136
|
-
| secondary
|
|
137
|
-
| tertiary
|
|
138
|
-
| primary-inverse
|
|
139
|
-
| secondary-inverse |
|
|
140
|
-
| tertiary-inverse
|
|
141
|
-
| on-fill
|
|
142
|
-
| disabled
|
|
143
|
-
| disabled-inverse
|
|
131
|
+
| :--------: | :-------: |
|
|
132
|
+
|
|
133
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
134
|
+
| ----------------- | --- | ------------------------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
135
|
+
| primary | | Light: Text.primary (#000000) Dark: Text.primary (#ffffff) | | CSS light / dark: `--sds-color-semantic-base-text-primary` SCSS light: `$sds-color-semantic-base-text-primary` SCSS dark: `$sds-color-semantic-base-text-primary-dark` |
|
|
136
|
+
| secondary | | Light: Text.secondary (#7a7a7a) Dark: Text.secondary (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-base-text-secondary` SCSS light: `$sds-color-semantic-base-text-secondary` SCSS dark: `$sds-color-semantic-base-text-secondary-dark` |
|
|
137
|
+
| tertiary | | Light: Text.tertiary (#a5a5a5) Dark: Text.tertiary (#9b9b9b) | | CSS light / dark: `--sds-color-semantic-base-text-tertiary` SCSS light: `$sds-color-semantic-base-text-tertiary` SCSS dark: `$sds-color-semantic-base-text-tertiary-dark` |
|
|
138
|
+
| primary-inverse | | Light: Text.primary-inverse (#ffffff) Dark: Text.primary-inverse (#000000) | | CSS light / dark: `--sds-color-semantic-base-text-primary-inverse` SCSS light: `$sds-color-semantic-base-text-primary-inverse` SCSS dark: `$sds-color-semantic-base-text-primary-inverse-dark` |
|
|
139
|
+
| secondary-inverse | | Light: Text.secondary-inverse (#c3c3c3) Dark: Text.secondary-inverse (#696969) | | CSS light / dark: `--sds-color-semantic-base-text-secondary-inverse` SCSS light: `$sds-color-semantic-text-base-secondary-inverse` SCSS dark: `$sds-color-semantic-text-base-secondary-inverse-dark` |
|
|
140
|
+
| tertiary-inverse | | Light: Text.tertiary-inverse (#969696) Dark: Text.tertiary-inverse (#aaaaaa) | | CSS light / dark: `--sds-color-semantic-base-text-tertiary-inverse` SCSS light: `$sds-color-semantic-base-text-tertiary-inverse` SCSS dark: `$sds-color-semantic-base-text-tertiary-inverse-dark` |
|
|
141
|
+
| on-fill | | Light: Text.on-fill (#ffffff) Dark: Text.on-fill (#ffffff) | | CSS light / dark: `--sds-color-semantic-base-text-on-fill` SCSS light: `$sds-color-semantic-base-text-on-fill` SCSS dark: `$sds-color-semantic-base-text-on-fill-dark` |
|
|
142
|
+
| disabled | | Light: Text.disabled (#c3c3c3) Dark: Text.disabled (#696969) | | CSS light / dark: `--sds-color-semantic-base-text-disabled` SCSS light: `$sds-color-semantic-base-text-disabled` SCSS dark: `$sds-color-semantic-base-text-disabled-dark` |
|
|
143
|
+
| disabled-inverse | | Light: Text.disabled-inverse (#7a7a7a) Dark: Text.disabled-inverse (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-base-text-disabled-inverse` SCSS light: `$sds-color-semantic-base-text-disabled-inverse` SCSS dark: `$sds-color-semantic-base-text-disabled-inverse-dark` |
|
|
144
144
|
|
|
145
145
|
---
|
|
146
146
|
|
|
@@ -150,11 +150,11 @@ When the fill of the element that the text is placed on top of is too dark in bo
|
|
|
150
150
|
|
|
151
151
|
Action Text colors are used to communicate that a block of text is interactive, such as a Link.
|
|
152
152
|
|
|
153
|
-
| **Name**
|
|
154
|
-
|
|
|
155
|
-
| action
|
|
156
|
-
| action-hover
|
|
157
|
-
| action-pressed |
|
|
153
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
154
|
+
| -------------- | --- | ------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
155
|
+
| action | | Light: Text.action (#1a6cef) Dark: Text.action (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-accent-text-action` SCSS light: `$sds-color-semantic-accent-text-action` SCSS dark: `$sds-color-semantic-accent-text-action-dark` |
|
|
156
|
+
| action-hover | | Light: Text.action-hover (#0041b9) Dark: Text.action-hover (#cde3ff) | | CSS light / dark: `--sds-color-semantic-accent-text-action-hover` SCSS light: `$sds-color-semantic-accent-text-action-hover` SCSS dark: `$sds-color-semantic-accent-text-action-hover-dark` |
|
|
157
|
+
| action-pressed | | Light: Text.action-pressed (#002d90) Dark: Text.action-pressed (#e2eeff) | | CSS light / dark: `--sds-color-semantic-accent-text-action-pressed` SCSS light: `$sds-color-semantic-accent-text-action-pressed` SCSS dark: `$sds-color-semantic-accent-text-action-pressed-dark` |
|
|
158
158
|
|
|
159
159
|
---
|
|
160
160
|
|
|
@@ -164,46 +164,46 @@ Action Text colors are used to communicate that a block of text is interactive,
|
|
|
164
164
|
|
|
165
165
|
Accent Surface colors are used for the background and fills of non-interactive elements or sections that use an application's primary color.
|
|
166
166
|
|
|
167
|
-
| **Name**
|
|
168
|
-
|
|
|
169
|
-
| surface-primary
|
|
170
|
-
| surface-secondary |
|
|
167
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
168
|
+
| ----------------- | --- | ---------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
169
|
+
| surface-primary | | Light: Accent.surface-primary (#1a6cef) Dark: Accent.surface-primary (#2573f4) | | CSS light / dark: `--sds-color-semantic-component-accent-surface-primary` SCSS light: `$sds-color-semantic-component-accent-surface-primary` SCSS dark: `$sds-color-semantic-component-accent-surface-primary-dark` |
|
|
170
|
+
| surface-secondary | | Light: Accent.surface-secondary (#edf3fd) Dark: Accent.surface-secondary (#0f1d4a) | | CSS light / dark: `--sds-color-semantic-component-accent-surface-secondary` SCSS light: `$sds-color-semantic-component-accent-surface-secondary` SCSS dark: `$sds-color-semantic-component-accent-surface-secondary-dark` |
|
|
171
171
|
|
|
172
172
|
#### Fill
|
|
173
173
|
|
|
174
|
-
Accent Fill Colors are used on elements where the primary color is needed that are interactive and change in response to users hovering, pressing, etc.
|
|
174
|
+
Accent Fill Colors are used on elements where the primary color is needed that are interactive and change in response to users hovering, pressing, etc.
|
|
175
175
|
|
|
176
|
-
| **Name**
|
|
177
|
-
|
|
|
178
|
-
| fill-primary |
|
|
179
|
-
| fill-hover
|
|
180
|
-
| fill-pressed |
|
|
176
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
177
|
+
| ------------ | --- | ------------------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
178
|
+
| fill-primary | | Light: Accent.fill-primary (#1a6cef) Dark: Accent.fill-primary (#2573f4) | | CSS light / dark: `--sds-color-semantic-component-accent-fill-primary` SCSS light: `$sds-color-semantic-component-accent-fill-primary` SCSS dark: `$sds-color-semantic-component-accent-fill-primary-dark` |
|
|
179
|
+
| fill-hover | | Light: Accent.fill-hover (#0041b9) Dark: Accent.fill-hover (#cde3ff) | | CSS light / dark: `--sds-color-semantic-component-accent-fill-hover` SCSS light: `$sds-color-semantic-component-accent-fill-hover` SCSS dark: `$sds-color-semantic-component-accent-fill-hover-dark` |
|
|
180
|
+
| fill-pressed | | Light: Accent.fill-pressed (#002d90) Dark: Accent.fill-pressed (#e2eeff) | | CSS light / dark: `--sds-color-semantic-component-accent-fill-pressed` SCSS light: `$sds-color-semantic-component-accent-fill-pressed` SCSS dark: `$sds-color-semantic-component-accent-fill-pressed-dark` |
|
|
181
181
|
|
|
182
182
|
#### Border
|
|
183
183
|
|
|
184
184
|
Accent Border Colors are used on interactive elements with borders.
|
|
185
185
|
|
|
186
|
-
| **Name**
|
|
187
|
-
|
|
|
188
|
-
| border
|
|
189
|
-
| border-hover
|
|
190
|
-
| border-pressed
|
|
191
|
-
| border-open
|
|
192
|
-
| border-focus
|
|
193
|
-
| border-selected |
|
|
186
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
187
|
+
| --------------- | --- | ------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
188
|
+
| border | | Light: Accent.border (#1a6cef) Dark: Accent.border (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-component-accent-border` SCSS light: `$sds-color-semantic-component-accent-border` SCSS dark: `$sds-color-semantic-component-accent-border-dark` |
|
|
189
|
+
| border-hover | | Light: Accent.border-hover (#0041b9) Dark: Accent.border-hover (#cde3ff) | | CSS light / dark: `--sds-color-semantic-component-accent-border-hover` SCSS light: `$sds-color-semantic-component-accent-border-hover` SCSS dark: `$sds-color-semantic-component-accent-border-hover-dark` |
|
|
190
|
+
| border-pressed | | Light: Accent.border-pressed (#002d90) Dark: Accent.border-pressed (#e2eeff) | | CSS light / dark: `--sds-color-semantic-component-accent-border-pressed` SCSS light: `$sds-color-semantic-component-accent-border-pressed` SCSS dark: `$sds-color-semantic-component-accent-border-pressed-dark` |
|
|
191
|
+
| border-open | | Light: Accent.border-open (#1a6cef) Dark: Accent.border-open (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-component-accent-border-open` SCSS light: `$sds-color-semantic-component-accent-border-open` SCSS dark: `$sds-color-semantic-component-accent-border-open-dark` |
|
|
192
|
+
| border-focus | | Light: Accent.border-focus (#1a6cef) Dark: Accent.border-focus (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-component-accent-border-focus` SCSS light: `$sds-color-semantic-component-accent-border-focus` SCSS dark: `$sds-color-semantic-component-accent-border-focus-dark` |
|
|
193
|
+
| border-selected | | Light: Accent.border-selected (#1a6cef) Dark: Accent.border-selected (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-component-accent-border-selected` SCSS light: `$sds-color-semantic-component-accent-border-selected` SCSS dark: `$sds-color-semantic-component-accent-border-selected-dark` |
|
|
194
194
|
|
|
195
195
|
#### Ornament
|
|
196
196
|
|
|
197
|
-
Accent
|
|
197
|
+
Accent _ornament_ is used whenever an interactive element contains an icon or other small area of color that needs to be displayed in the accent color.
|
|
198
198
|
|
|
199
|
-
| **Name**
|
|
200
|
-
|
|
|
201
|
-
| ornament
|
|
202
|
-
| ornament-hover
|
|
203
|
-
| ornament-pressed
|
|
204
|
-
| ornament-open
|
|
205
|
-
| ornament-focus
|
|
206
|
-
| ornament-selected |
|
|
199
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
200
|
+
| ----------------- | --- | ---------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
201
|
+
| ornament | | Light: Accent.ornament (#1a6cef) Dark: Accent.ornament (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-component-accent-ornament` SCSS light: `$sds-color-semantic-component-accent-ornament` SCSS dark: `$sds-color-semantic-component-accent-ornament-dark` |
|
|
202
|
+
| ornament-hover | | Light: Accent.ornament-hover (#0041b9) Dark: Accent.ornament-hover (#cde3ff) | | CSS light / dark: `--sds-color-semantic-component-accent-ornament-hover` SCSS light: `$sds-color-semantic-component-accent-ornament-hover` SCSS dark: `$sds-color-semantic-component-accent-ornament-hover-dark` |
|
|
203
|
+
| ornament-pressed | | Light: Accent.ornament-pressed (#002d90) Dark: Accent.ornament-pressed (#e2eeff) | | CSS light / dark: `--sds-color-semantic-component-accent-ornament-pressed` SCSS light: `$sds-color-semantic-component-accent-ornament-pressed` SCSS dark: `$sds-color-semantic-component-accent-ornament-pressed-dark` |
|
|
204
|
+
| ornament-open | | Light: Accent.ornament-open (#1a6cef) Dark: Accent.ornament-open (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-component-accent-ornament-open` SCSS light: `$sds-color-semantic-component-accent-ornament-open` SCSS dark: `$sds-color-semantic-component-accent-ornament-open-dark` |
|
|
205
|
+
| ornament-focus | | Light: Accent.ornament-focus (#1a6cef) Dark: Accent.ornament-focus (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-component-accent-ornament-focus` SCSS light: `$sds-color-semantic-component-accent-ornament-focus` SCSS dark: `$sds-color-semantic-component-accent-ornament-focus-dark` |
|
|
206
|
+
| ornament-selected | | Light: Accent.ornament-selected (#1a6cef) Dark: Accent.ornament-selected (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-component-accent-ornament-selected` SCSS light: `$sds-color-semantic-component-accent-ornament-selected` SCSS dark: `$sds-color-semantic-component-accent-ornament-selected-dark` |
|
|
207
207
|
|
|
208
208
|
---
|
|
209
209
|
|
|
@@ -213,45 +213,45 @@ Accent *ornament* is used whenever an interactive element contains an icon or ot
|
|
|
213
213
|
|
|
214
214
|
Beta Surface colors are used for the backgrounds and fills of non-interactive elements or sections that communicate a Beta intent.
|
|
215
215
|
|
|
216
|
-
| **Name**
|
|
217
|
-
|
|
|
218
|
-
| surface-primary
|
|
219
|
-
| surface-secondary |
|
|
216
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
217
|
+
| ----------------- | --- | ------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
218
|
+
| surface-primary | | Light: Beta.surface-primary (#8b54e2) Dark: Beta.surface-primary (#905de6) | | CSS light / dark: `--sds-color-semantic-component-beta-surface-primary` SCSS light: `$sds-color-semantic-component-beta-surface-primary` SCSS dark: `$sds-color-semantic-component-beta-surface-primary-dark` |
|
|
219
|
+
| surface-secondary | | Light: Beta.surface-secondary (#efeafe) Dark: Beta.surface-secondary (#331252) | | CSS light / dark: `--sds-color-semantic-component-beta-surface-secondary` SCSS light: `$sds-color-semantic-component-beta-surface-secondary` SCSS dark: `$sds-color-semantic-component-beta-surface-secondary-dark` |
|
|
220
220
|
|
|
221
221
|
#### Fill
|
|
222
222
|
|
|
223
223
|
Beta Fill Colors are used on elements that are interactive and change in response to users hovering, pressing, etc. where a Beta intent needs to be communicated.
|
|
224
224
|
|
|
225
|
-
| **Name**
|
|
226
|
-
|
|
|
227
|
-
| fill-primary
|
|
228
|
-
| fill-hover
|
|
229
|
-
| fill-pressed
|
|
230
|
-
| fill-secondary |
|
|
225
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
226
|
+
| -------------- | --- | ------------------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
227
|
+
| fill-primary | | Light: Beta.fill-primary (#8b54e2) Dark: Beta.fill-primary (#905de6) | | CSS light / dark: `--sds-color-semantic-component-beta-fill-primary` SCSS light: `$sds-color-semantic-component-beta-fill-primary` SCSS dark: `$sds-color-semantic-component-beta-fill-primary-dark` |
|
|
228
|
+
| fill-hover | | Light: Beta.fill-hover (#6526b5) Dark: Beta.fill-hover (#e4dcfc) | | CSS light / dark: `--sds-color-semantic-component-beta-fill-hover` SCSS light: `$sds-color-semantic-component-beta-fill-hover` SCSS dark: `$sds-color-semantic-component-beta-fill-hover-dark` |
|
|
229
|
+
| fill-pressed | | Light: Beta.fill-pressed (#490092) Dark: Beta.fill-pressed (#f0ebfe) | | CSS light / dark: `--sds-color-semantic-component-beta-fill-pressed` SCSS light: `$sds-color-semantic-component-beta-fill-pressed` SCSS dark: `$sds-color-semantic-component-beta-fill-pressed-dark` |
|
|
230
|
+
| fill-secondary | | Light: Beta.fill-secondary (#efeafe) Dark: Beta.fill-secondary (#331252) | | CSS light / dark: `--sds-color-semantic-component-beta-fill-secondary` SCSS light: `$sds-color-semantic-component-beta-fill-secondary` SCSS dark: `$sds-color-semantic-component-beta-fill-secondary-dark` |
|
|
231
231
|
|
|
232
232
|
#### Border
|
|
233
233
|
|
|
234
|
-
Beta
|
|
234
|
+
Beta _border_ is used on element borders that need to communicate a Beta intent.
|
|
235
235
|
|
|
236
|
-
| **Name** |
|
|
237
|
-
|
|
|
238
|
-
| border
|
|
236
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
237
|
+
| -------- | --- | -------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
238
|
+
| border | | Light: Beta.border (#6526b5) Dark: Beta.border (#cebef8) | | CSS light / dark: `--sds-color-semantic-component-beta-border` SCSS light: `$sds-color-semantic-component-beta-border` SCSS dark: `$sds-color-semantic-component-beta-border-dark` |
|
|
239
239
|
|
|
240
240
|
#### Ornament
|
|
241
241
|
|
|
242
|
-
Beta
|
|
242
|
+
Beta _ornament_ is used whenever a Beta intent needs to be communicated visually on an icon or other small colored element.
|
|
243
243
|
|
|
244
|
-
| **Name** |
|
|
245
|
-
|
|
|
246
|
-
| ornament |
|
|
244
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
245
|
+
| -------- | --- | ------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
246
|
+
| ornament | | Light: Beta.ornament (#6526b5) Dark: Beta.ornament (#cebef8) | | CSS light / dark: `--sds-color-semantic-component-beta-ornament` SCSS light: `$sds-color-semantic-component-beta-ornament` SCSS dark: `$sds-color-semantic-component-beta-ornament-dark` |
|
|
247
247
|
|
|
248
248
|
#### Text
|
|
249
249
|
|
|
250
|
-
The Beta
|
|
250
|
+
The Beta _text_ variable is used whenever text needs to communicate a Beta intent.
|
|
251
251
|
|
|
252
|
-
| **Name**
|
|
253
|
-
|
|
|
254
|
-
| text-beta |
|
|
252
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
253
|
+
| --------- | --- | ---------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
254
|
+
| text-beta | | Light: Text.beta (#6526b5) Dark: Text.beta (#cebef8) | | CSS light / dark: `--sds-color-semantic-component-beta-text` SCSS light: `$sds-color-semantic-component-beta-text` SCSS dark: `$sds-color-semantic-component-beta-text-dark` |
|
|
255
255
|
|
|
256
256
|
---
|
|
257
257
|
|
|
@@ -261,45 +261,45 @@ The Beta *text* variable is used whenever text needs to communicate a Beta inten
|
|
|
261
261
|
|
|
262
262
|
Info Surface colors are used for the backgrounds and fills of non-interactive elements or sections that communicate an Info intent.
|
|
263
263
|
|
|
264
|
-
| **Name**
|
|
265
|
-
|
|
|
266
|
-
| surface-primary
|
|
267
|
-
| surface-secondary |
|
|
264
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
265
|
+
| ----------------- | --- | ------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
266
|
+
| surface-primary | | Light: Info.surface-primary (#1a6cef) Dark: Info.surface-primary (#2573f4) | | CSS light / dark: `--sds-color-semantic-component-info-surface-primary` SCSS light: `$sds-color-semantic-component-info-surface-primary` SCSS dark: `$sds-color-semantic-component-info-surface-primary-dark` |
|
|
267
|
+
| surface-secondary | | Light: Info.surface-secondary (#edf3fd) Dark: Info.surface-secondary (#0f1d4a) | | CSS light / dark: `--sds-color-semantic-component-info-surface-secondary` SCSS light: `$sds-color-semantic-component-info-surface-secondary` SCSS dark: `$sds-color-semantic-component-info-surface-secondary-dark` |
|
|
268
268
|
|
|
269
269
|
#### Fill
|
|
270
270
|
|
|
271
271
|
Info Fill Colors are used on elements that are interactive and change in response to users hovering, pressing, etc. where an Info intent needs to be communicated.
|
|
272
272
|
|
|
273
|
-
| **Name**
|
|
274
|
-
|
|
|
275
|
-
| fill-primary
|
|
276
|
-
| fill-hover
|
|
277
|
-
| fill-pressed
|
|
278
|
-
| fill-secondary |
|
|
273
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
274
|
+
| -------------- | --- | ------------------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
275
|
+
| fill-primary | | Light: Info.fill-primary (#1a6cef) Dark: Info.fill-primary (#2573f4) | | CSS light / dark: `--sds-color-semantic-component-info-fill-primary` SCSS light: `$sds-color-semantic-component-info-fill-primary` SCSS dark: `$sds-color-semantic-component-info-fill-primary-dark` |
|
|
276
|
+
| fill-hover | | Light: Info.fill-hover (#0041b9) Dark: Info.fill-hover (#cde3ff) | | CSS light / dark: `--sds-color-semantic-component-info-fill-hover` SCSS light: `$sds-color-semantic-component-info-fill-hover` SCSS dark: `$sds-color-semantic-component-info-fill-hover-dark` |
|
|
277
|
+
| fill-pressed | | Light: Info.fill-pressed (#002d90) Dark: Info.fill-pressed (#e2eeff) | | CSS light / dark: `--sds-color-semantic-component-info-fill-pressed` SCSS light: `$sds-color-semantic-component-info-fill-pressed` SCSS dark: `$sds-color-semantic-component-info-fill-pressed-dark` |
|
|
278
|
+
| fill-secondary | | Light: Info.fill-secondary (#edf3fd) Dark: Info.fill-secondary (#0f1d4a) | | CSS light / dark: `--sds-color-semantic-component-info-fill-secondary` SCSS light: `$sds-color-semantic-component-info-fill-secondary` SCSS dark: `$sds-color-semantic-component-info-fill-secondary-dark` |
|
|
279
279
|
|
|
280
280
|
#### Border
|
|
281
281
|
|
|
282
|
-
Info
|
|
282
|
+
Info _border_ is used on element borders that need to communicate an Info intent.
|
|
283
283
|
|
|
284
|
-
| **Name** |
|
|
285
|
-
|
|
|
286
|
-
| border
|
|
284
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
285
|
+
| -------- | --- | -------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
286
|
+
| border | | Light: Info.border (#0041b9) Dark: Info.border (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-component-info-border` SCSS light: `$sds-color-semantic-component-info-border` SCSS dark: `$sds-color-semantic-component-info-border-dark` |
|
|
287
287
|
|
|
288
288
|
#### Ornament
|
|
289
289
|
|
|
290
|
-
Info
|
|
290
|
+
Info _ornament_ is used whenever an Info intent needs to be communicated visually on an icon or other small colored element.
|
|
291
291
|
|
|
292
|
-
| **Name** |
|
|
293
|
-
|
|
|
294
|
-
| ornament |
|
|
292
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
293
|
+
| -------- | --- | ------------------------------------------------------------ | --- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
294
|
+
| ornament | | Light: Info.ornament (#0041b9) Dark: Info.ornament (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-component-info-ornament` SCSS light:`$sds-color-semantic-component-info-ornament` SCSS dark: `$sds-color-semantic-component-info-ornament-dark` |
|
|
295
295
|
|
|
296
296
|
#### Text
|
|
297
297
|
|
|
298
|
-
The info
|
|
298
|
+
The info _text_ variable is used whenever text needs to communicate an Info intent.
|
|
299
299
|
|
|
300
|
-
| **Name**
|
|
301
|
-
|
|
|
302
|
-
| text-info |
|
|
300
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
301
|
+
| --------- | --- | ---------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
302
|
+
| text-info | | Light: Text.info (#0041b9) Dark: Text.info (#a2c9ff) | | CSS light / dark: `--sds-color-semantic-component-info-text` SCSS light: `$sds-color-semantic-component-info-text` SCSS dark: `$sds-color-semantic-component-info-text-dark` |
|
|
303
303
|
|
|
304
304
|
---
|
|
305
305
|
|
|
@@ -309,95 +309,95 @@ The info *text* variable is used whenever text needs to communicate an Info inte
|
|
|
309
309
|
|
|
310
310
|
Negative Surface colors are used for the backgrounds and fills of non-interactive elements or sections that communicate a Negative intent.
|
|
311
311
|
|
|
312
|
-
| **Name**
|
|
313
|
-
|
|
|
314
|
-
| surface-primary
|
|
315
|
-
| surface-secondary |
|
|
312
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
313
|
+
| ----------------- | --- | -------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
314
|
+
| surface-primary | | Light: Negative.surface-primary (#db2131) Dark: Negative.surface-primary (#c73028) | | CSS light / dark: `--sds-color-semantic-component-negative-surface-primary` SCSS light: `$sds-color-semantic-component-negative-surface-primary` SCSS dark: `$sds-color-semantic-component-negative-surface-primary-dark` |
|
|
315
|
+
| surface-secondary | | Light: Negative.surface-secondary (#ffe8e6) Dark: Negative.surface-secondary (#330603) | | CSS light / dark: `--sds-color-semantic-component-negative-surface-secondary` SCSS light: `$sds-color-semantic-component-negative-surface-secondary` SCSS dark: `$sds-color-semantic-component-negative-surface-secondary-dark` |
|
|
316
316
|
|
|
317
317
|
#### Fill
|
|
318
318
|
|
|
319
319
|
Negative Fill Colors are used on elements that are interactive and change in response to users hovering, pressing, etc. where a Negative intent needs to be communicated.
|
|
320
320
|
|
|
321
|
-
| **Name**
|
|
322
|
-
|
|
|
323
|
-
| fill-primary
|
|
324
|
-
| fill-hover
|
|
325
|
-
| fill-pressed
|
|
326
|
-
| fill-secondary |
|
|
321
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
322
|
+
| -------------- | --- | -------------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
323
|
+
| fill-primary | | Light: Negative.fill-primary (#db2131) Dark: Negative.fill-primary (#c73028) | | CSS light / dark: `--sds-color-semantic-component-negative-fill-primary` SCSS light: `$sds-color-semantic-component-negative-fill-primary` SCSS dark: `$sds-color-semantic-component-negative-fill-primary-dark` |
|
|
324
|
+
| fill-hover | | Light: Negative.fill-hover (#b80017) Dark: Negative.fill-hover (#ffbdb3) | | CSS light / dark: `--sds-color-semantic-component-negative-fill-hover` SCSS light: `$sds-color-semantic-component-negative-fill-hover` SCSS dark: `$sds-color-semantic-component-negative-fill-hover-dark` |
|
|
325
|
+
| fill-pressed | | Light: Negative.fill-pressed (#6f0008) Dark: Negative.fill-pressed (#ffd8d1) | | CSS light / dark: `--sds-color-semantic-component-negative-fill-pressed` SCSS light: `$sds-color-semantic-component-negative-fill-pressed` SCSS dark: `$sds-color-semantic-component-negative-fill-pressed-dark` |
|
|
326
|
+
| fill-secondary | | Light: Negative.fill-secondary (#ffe8e6) Dark: Negative.fill-secondary (#330603) | | CSS light / dark: `--sds-color-semantic-component-negative-fill-secondary` SCSS light: `$sds-color-semantic-component-negative-fill-secondary` SCSS dark: `$sds-color-semantic-component-negative-fill-secondary-dark` |
|
|
327
327
|
|
|
328
328
|
#### Border
|
|
329
329
|
|
|
330
|
-
Negative
|
|
330
|
+
Negative _border_ is used on element borders that need to communicate a Negative intent.
|
|
331
331
|
|
|
332
|
-
| **Name** |
|
|
333
|
-
|
|
|
334
|
-
| border
|
|
332
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
333
|
+
| -------- | --- | ---------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
334
|
+
| border | | Light: Negative.border (#b80017) Dark: Negative.border (#ff988a) | | CSS light / dark: `--sds-color-semantic-component-negative-border` SCSS light: `$sds-color-semantic-component-negative-border` SCSS dark: `$sds-color-semantic-component-negative-border-dark` |
|
|
335
335
|
|
|
336
336
|
#### Ornament
|
|
337
337
|
|
|
338
|
-
Negative
|
|
338
|
+
Negative _ornament_ is used whenever a Negative intent needs to be communicated visually on an icon or other small colored element.
|
|
339
339
|
|
|
340
|
-
| **Name** |
|
|
341
|
-
|
|
|
342
|
-
| ornament |
|
|
340
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
341
|
+
| -------- | --- | -------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
342
|
+
| ornament | | Light: Negative.ornament (#b80017) Dark: Negative.ornament (#ff988a) | | CSS light / dark: `--sds-color-semantic-component-negative-ornament` SCSS light: `$sds-color-semantic-component-negative-ornament` SCSS dark: `$sds-color-semantic-component-negative-ornament-dark` |
|
|
343
343
|
|
|
344
344
|
#### Text
|
|
345
345
|
|
|
346
|
-
The negative
|
|
346
|
+
The negative _text_ variable is used whenever text needs to communicate a Negative intent.
|
|
347
347
|
|
|
348
|
-
| **Name**
|
|
349
|
-
|
|
|
350
|
-
| text-negative |
|
|
348
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
349
|
+
| ------------- | --- | ------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
350
|
+
| text-negative | | Light: Text.negative (#b80017) Dark: Text.negative (#ff988a) | | CSS light / dark: `--sds-color-semantic-component-negative-text` SCSS light: `$sds-color-semantic-component-negative-text` SCSS dark: `$sds-color-semantic-component-negative-text-dark` |
|
|
351
351
|
|
|
352
352
|
---
|
|
353
353
|
|
|
354
354
|
### Neutral Colors
|
|
355
355
|
|
|
356
|
-
|
|
356
|
+
> **Note:** Neutral Colors are only used in components that display an intent, such as Tags. For these elements, Neutral Colors communicate that there is no intent indicated.
|
|
357
357
|
|
|
358
358
|
#### Surface
|
|
359
359
|
|
|
360
360
|
Neutral Surface colors are used for the backgrounds and fills of non-interactive elements or sections that communicate have no intent.
|
|
361
361
|
|
|
362
|
-
| **Name**
|
|
363
|
-
|
|
|
364
|
-
| surface-primary
|
|
365
|
-
| surface-secondary |
|
|
362
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
363
|
+
| ----------------- | --- | ------------------------------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
364
|
+
| surface-primary | | Light: Neutral.surface-primary (#969696) Dark: Neutral.surface-primary (#aaaaaa) | | CSS light / dark: `--sds-color-semantic-component-neutral-surface-primary` SCSS light: `$sds-color-semantic-component-neutral-surface-primary` SCSS dark: `$sds-color-semantic-component-neutral-surface-primary-dark` |
|
|
365
|
+
| surface-secondary | | Light: Neutral.surface-secondary (#dfdfdf) Dark: Neutral.surface-secondary (#494949) | | CSS light / dark: `--sds-color-semantic-component-neutral-surface-secondary` SCSS light: `$sds-color-semantic-component-neutral-surface-secondary` SCSS dark: `$sds-color-semantic-component-neutral-surface-secondary-dark` |
|
|
366
366
|
|
|
367
367
|
#### Fill
|
|
368
368
|
|
|
369
369
|
Neutral Fill Colors are used on elements that are interactive and change in response to users hovering, pressing, etc. where there is no intent to be communicated.
|
|
370
370
|
|
|
371
|
-
| **Name**
|
|
372
|
-
|
|
|
373
|
-
| fill-primary
|
|
374
|
-
| fill-hover
|
|
375
|
-
| fill-pressed
|
|
376
|
-
| fill-secondary |
|
|
371
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
372
|
+
| -------------- | --- | ------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
373
|
+
| fill-primary | | Light: Neutral.fill-primary (#969696) Dark: Neutral.fill-primary (#aaaaaa) | | CSS light / dark: `--sds-color-semantic-component-neutral-fill-primary` SCSS light: `$sds-color-semantic-component-neutral-fill-primary` SCSS dark: `$sds-color-semantic-component-neutral-fill-primary-dark` |
|
|
374
|
+
| fill-hover | | Light: Neutral.fill-hover (#7a7a7a) Dark: Neutral.fill-hover (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-neutral-fill-hover` SCSS light: `$sds-color-semantic-component-neutral-fill-hover` SCSS dark: `$sds-color-semantic-component-neutral-fill-hover-dark` |
|
|
375
|
+
| fill-pressed | | Light: Neutral.fill-pressed (#3b3b3b) Dark: Neutral.fill-pressed (#ededed) | | CSS light / dark: `--sds-color-semantic-component-neutral-fill-pressed` SCSS light: `$sds-color-semantic-component-neutral-fill-pressed` SCSS dark: `$sds-color-semantic-component-neutral-fill-pressed-dark` |
|
|
376
|
+
| fill-secondary | | Light: Neutral.fill-secondary (#dfdfdf) Dark: Neutral.fill-secondary (#494949) | | CSS light / dark: `--sds-color-semantic-component-neutral-fill-secondary` SCSS light: `$sds-color-semantic-component-neutral-fill-secondary` SCSS dark: `$sds-color-semantic-component-neutral-fill-secondary-dark` |
|
|
377
377
|
|
|
378
378
|
#### Border
|
|
379
379
|
|
|
380
|
-
Neutral
|
|
380
|
+
Neutral _border_ is used on element borders that need to communicate there is no intent.
|
|
381
381
|
|
|
382
|
-
| **Name** |
|
|
383
|
-
|
|
|
384
|
-
| border
|
|
382
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
383
|
+
| -------- | --- | -------------------------------------------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
384
|
+
| border | | Light: Neutral.border (#969696) Dark: Neutral.border (#aaaaaa) | | CSS light / dark: `--sds-color-semantic-component-neutral-border` SCSS light: `$sds-color-semantic-component-neutral-border` SCSS dark: `$sds-color-semantic-component-neutral-border-dark` |
|
|
385
385
|
|
|
386
386
|
#### Ornament
|
|
387
387
|
|
|
388
|
-
Neutral
|
|
388
|
+
Neutral _ornament_ is used whenever there is no intent to be communicated visually on an icon or other small colored element.
|
|
389
389
|
|
|
390
|
-
| **Name** |
|
|
391
|
-
|
|
|
392
|
-
| ornament |
|
|
390
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
391
|
+
| -------- | --- | ------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
392
|
+
| ornament | | Light: Neutral.ornament (#3b3b3b) Dark: Neutral.ornament (#ededed) | | CSS light / dark: `--sds-color-semantic-component-neutral-ornament` SCSS light: `$sds-color-semantic-component-neutral-ornament` SCSS dark: `$sds-color-semantic-component-neutral-ornament-dark` |
|
|
393
393
|
|
|
394
394
|
#### Text
|
|
395
395
|
|
|
396
|
-
The neutral
|
|
396
|
+
The neutral _text_ variable is used whenever text needs to communicate there is no intent.
|
|
397
397
|
|
|
398
|
-
| **Name**
|
|
399
|
-
|
|
|
400
|
-
| text-neutral |
|
|
398
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
399
|
+
| ------------ | --- | ---------------------------------------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
400
|
+
| text-neutral | | Light: Text.neutral (#3b3b3b) Dark: Text.neutral (#ededed) | | CSS light / dark: `--sds-color-semantic-component-neutral-text` SCSS light: `$sds-color-semantic-component-neutral-text` SCSS dark: `$sds-color-semantic-component-neutral-text-dark` |
|
|
401
401
|
|
|
402
402
|
---
|
|
403
403
|
|
|
@@ -407,45 +407,45 @@ The neutral *text* variable is used whenever text needs to communicate there is
|
|
|
407
407
|
|
|
408
408
|
Notice Surface colors are used for the backgrounds and fills of non-interactive elements or sections that communicate a Notice intent.
|
|
409
409
|
|
|
410
|
-
| **Name**
|
|
411
|
-
|
|
|
412
|
-
| surface-primary
|
|
413
|
-
| surface-secondary |
|
|
410
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
411
|
+
| ----------------- | --- | ---------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
412
|
+
| surface-primary | | Light: Notice.surface-primary (#da9900) Dark: Notice.surface-primary (#bd8804) | | CSS light / dark: `--sds-color-semantic-component-notice-surface-primary` SCSS light: `$sds-color-semantic-component-notice-surface-primary` SCSS dark: `$sds-color-semantic-component-notice-surface-primary-dark` |
|
|
413
|
+
| surface-secondary | | Light: Notice.surface-secondary (#fff3db) Dark: Notice.surface-secondary (#361b07) | | CSS light / dark: `--sds-color-semantic-component-notice-surface-secondary` SCSS light: `$sds-color-semantic-component-notice-surface-secondary` SCSS dark: `$sds-color-semantic-component-notice-surface-secondary-dark` |
|
|
414
414
|
|
|
415
415
|
#### Fill
|
|
416
416
|
|
|
417
417
|
Notice Fill Colors are used on elements that are interactive and change in response to users hovering, pressing, etc. where a Notice intent needs to be communicated.
|
|
418
418
|
|
|
419
|
-
| **Name**
|
|
420
|
-
|
|
|
421
|
-
| fill-primary
|
|
422
|
-
| fill-hover
|
|
423
|
-
| fill-pressed
|
|
424
|
-
| fill-secondary |
|
|
419
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
420
|
+
| -------------- | --- | ---------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
421
|
+
| fill-primary | | Light: Notice.fill-primary (#da9900) Dark: Notice.fill-primary (#bd8804) | | CSS light / dark: `--sds-color-semantic-component-notice-fill-primary` SCSS light: `$sds-color-semantic-component-notice-fill-primary` SCSS dark: `$sds-color-semantic-component-notice-fill-primary-dark` |
|
|
422
|
+
| fill-hover | | Light: Notice.fill-hover (#b07300) Dark: Notice.fill-hover (#f5d789) | | CSS light / dark: `--sds-color-semantic-component-notice-fill-hover` SCSS light: `$sds-color-semantic-component-notice-fill-hover` SCSS dark: `$sds-color-semantic-component-notice-fill-hover-dark` |
|
|
423
|
+
| fill-pressed | | Light: Notice.fill-pressed (#7c3e00) Dark: Notice.fill-pressed (#ffe6a8) | | CSS light / dark: `--sds-color-semantic-component-notice-fill-pressed` SCSS light: `$sds-color-semantic-component-notice-fill-pressed` SCSS dark: `$sds-color-semantic-component-notice-fill-pressed-dark` |
|
|
424
|
+
| fill-secondary | | Light: Notice.fill-secondary (#fff3db) Dark: Notice.fill-secondary (#361b07) | | CSS light / dark: `--sds-color-semantic-component-notice-fill-secondary` SCSS light: `$sds-color-semantic-component-notice-fill-secondary` SCSS dark: `$sds-color-semantic-component-notice-fill-secondary-dark` |
|
|
425
425
|
|
|
426
426
|
#### Border
|
|
427
427
|
|
|
428
|
-
Notice
|
|
428
|
+
Notice _border_ is used on element borders that need to communicate a Notice intent.
|
|
429
429
|
|
|
430
|
-
| **Name** |
|
|
431
|
-
|
|
|
432
|
-
| border
|
|
430
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
431
|
+
| -------- | --- | ------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
432
|
+
| border | | Light: Notice.border (#b07300) Dark: Notice.border (#e5bc63) | | CSS light / dark: `--sds-color-semantic-component-notice-border` SCSS light: `$sds-color-semantic-component-notice-border` SCSS dark: `$sds-color-semantic-component-notice-border-dark` |
|
|
433
433
|
|
|
434
434
|
#### Ornament
|
|
435
435
|
|
|
436
|
-
Notice
|
|
436
|
+
Notice _ornament_ is used whenever a Notice intent needs to be communicated visually on an icon or other small colored element.
|
|
437
437
|
|
|
438
|
-
| **Name** |
|
|
439
|
-
|
|
|
440
|
-
| ornament |
|
|
438
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
439
|
+
| -------- | --- | ---------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
440
|
+
| ornament | | Light: Notice.ornament (#b07300) Dark: Notice.ornament (#e5bc63) | | CSS light / dark: `--sds-color-semantic-component-notice-ornament` SCSS light: `$sds-color-semantic-component-notice-ornament` SCSS dark: `$sds-color-semantic-component-notice-ornament-dark` |
|
|
441
441
|
|
|
442
442
|
#### Text
|
|
443
443
|
|
|
444
|
-
The notice
|
|
444
|
+
The notice _text_ variable is used whenever text needs to communicate a Notice intent.
|
|
445
445
|
|
|
446
|
-
| **Name**
|
|
447
|
-
|
|
|
448
|
-
| text-notice |
|
|
446
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
447
|
+
| ----------- | --- | -------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
448
|
+
| text-notice | | Light: Text.notice (#b07300) Dark: Text.notice (#e5bc63) | | CSS light / dark: `--sds-color-semantic-component-notice-text` SCSS light: `$sds-color-semantic-component-notice-text` SCSS dark: `$sds-color-semantic-component-notice-text-dark` |
|
|
449
449
|
|
|
450
450
|
---
|
|
451
451
|
|
|
@@ -455,45 +455,45 @@ The notice *text* variable is used whenever text needs to communicate a Notice i
|
|
|
455
455
|
|
|
456
456
|
Positive Surface colors are used for the backgrounds and fills of non-interactive elements or sections that communicate a Positive intent.
|
|
457
457
|
|
|
458
|
-
| **Name**
|
|
459
|
-
|
|
|
460
|
-
| surface-primary
|
|
461
|
-
| surface-secondary |
|
|
458
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
459
|
+
| ----------------- | --- | -------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
460
|
+
| surface-primary | | Light: Positive.surface-primary (#238444) Dark: Positive.surface-primary (#278b48) | | CSS light / dark: `--sds-color-semantic-component-positive-surface-primary` SCSS light: `$sds-color-semantic-component-positive-surface-primary` `$sds-color-semantic-component-positive-surface-primary-dark` |
|
|
461
|
+
| surface-secondary | | Light: Positive.surface-secondary (#ebf9ed) Dark: Positive.surface-secondary (#082608) | | CSS light / dark: `--sds-color-semantic-component-positive-surface-secondary` SCSS light: `$sds-color-semantic-component-positive-surface-secondary` SCSS dark: `$sds-color-semantic-component-positive-surface-secondary-dark` |
|
|
462
462
|
|
|
463
463
|
#### Fill
|
|
464
464
|
|
|
465
465
|
Positive Fill Colors are used on elements that are interactive and change in response to users hovering, pressing, etc. where a Positive intent needs to be communicated.
|
|
466
466
|
|
|
467
|
-
| **Name**
|
|
468
|
-
|
|
|
469
|
-
| fill-primary
|
|
470
|
-
| fill-hover
|
|
471
|
-
| fill-pressed
|
|
472
|
-
| fill-secondary |
|
|
467
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
468
|
+
| -------------- | --- | -------------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
469
|
+
| fill-primary | | Light: Positive.fill-primary (#238444) Dark: Positive.fill-primary (#278b48) | | CSS light / dark: `--sds-color-semantic-component-positive-fill-primary` SCSS light: `$sds-color-semantic-component-positive-fill-primary` SCSS dark: `$sds-color-semantic-component-positive-fill-primary-dark` |
|
|
470
|
+
| fill-hover | | Light: Positive.fill-hover (#105b2b) Dark: Positive.fill-hover (#bcecc5) | | CSS light / dark: `--sds-color-semantic-component-positive-fill-hover` SCSS light: `$sds-color-semantic-component-positive-fill-hover` SCSS dark: `$sds-color-semantic-component-positive-fill-hover-dark` |
|
|
471
|
+
| fill-pressed | | Light: Positive.fill-pressed (#07431d) Dark: Positive.fill-pressed (#daf4de) | | CSS light / dark: `--sds-color-semantic-component-positive-fill-pressed` SCSS light: `$sds-color-semantic-component-positive-fill-pressed` SCSS dark: `$sds-color-semantic-component-positive-fill-pressed-dark` |
|
|
472
|
+
| fill-secondary | | Light: Positive.fill-secondary (#ebf9ed) Dark: Positive.fill-secondary (#082608) | | CSS light / dark: `--sds-color-semantic-component-positive-fill-secondary` SCSS light: `$sds-color-semantic-component-positive-fill-secondary` SCSS dark: `$sds-color-semantic-component-positive-fill-secondary-dark` |
|
|
473
473
|
|
|
474
474
|
#### Border
|
|
475
475
|
|
|
476
|
-
Positive
|
|
476
|
+
Positive _border_ is used on element borders that need to communicate a Positive intent.
|
|
477
477
|
|
|
478
|
-
| **Name** |
|
|
479
|
-
|
|
|
480
|
-
| border
|
|
478
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
479
|
+
| -------- | --- | ---------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
480
|
+
| border | | Light: Positive.border (#105b2b) Dark: Positive.border (#85d898) | | CSS light / dark: `--sds-color-semantic-component-positive-border` SCSS light: `$sds-color-semantic-component-positive-border` SCSS dark: `$sds-color-semantic-component-positive-border-dark` |
|
|
481
481
|
|
|
482
482
|
#### Ornament
|
|
483
483
|
|
|
484
|
-
Positive
|
|
484
|
+
Positive _ornament_ is used whenever a Positive intent needs to be communicated visually on an icon or other small colored element.
|
|
485
485
|
|
|
486
|
-
| **Name** |
|
|
487
|
-
|
|
|
488
|
-
| ornament |
|
|
486
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
487
|
+
| -------- | --- | -------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
488
|
+
| ornament | | Light: Positive.ornament (#105b2b) Dark: Positive.ornament (#85d898) | | CSS light / dark: `--sds-color-semantic-component-positive-ornament` SCSS light: `$sds-color-semantic-component-positive-ornament` SCSS dark: `$sds-color-semantic-component-positive-ornament-dark` |
|
|
489
489
|
|
|
490
490
|
#### Text
|
|
491
491
|
|
|
492
|
-
The positive
|
|
492
|
+
The positive _text_ variable is used whenever text needs to communicate a Positive intent.
|
|
493
493
|
|
|
494
|
-
| **Name**
|
|
495
|
-
|
|
|
496
|
-
| text-positive |
|
|
494
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
495
|
+
| ------------- | --- | ------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
496
|
+
| text-positive | | Light: Text.positive (#105b2b) Dark: Text.positive (#85d898) | | CSS light / dark: `--sds-color-semantic-component-positive-text` SCSS light: `$sds-color-semantic-component-positive-text` SCSS dark: `$sds-color-semantic-component-positive-text-dark` |
|
|
497
497
|
|
|
498
498
|
## Primitive Colors
|
|
499
499
|
|
|
@@ -505,7 +505,7 @@ Primitive Colors are base variables that tie directly to hex codes whereas Seman
|
|
|
505
505
|
|
|
506
506
|
## Primitive Colors
|
|
507
507
|
|
|
508
|
-
The most basic color elements in the design system are Primitive Colors. They are organized by hue into different ramps and saved as variables within the codebase; each ramp is composed of a range of color variables from light to dark within that color hue (e.g.,
|
|
508
|
+
The most basic color elements in the design system are Primitive Colors. They are organized by hue into different ramps and saved as variables within the codebase; each ramp is composed of a range of color variables from light to dark within that color hue (e.g., _blue800_, _blue700_, _blue600_, etc.).
|
|
509
509
|
|
|
510
510
|
Primitive Color variables are **not** intended to be used on their own and are instead mapped to Semantic Color variables that communicate how a Primitive Color is applied to different elements in the design system. This helps ensure the colors are applied consistently and removes the guess work for designers and engineers as to which colors should be used where when designing and building features.
|
|
511
511
|
|
|
@@ -527,7 +527,7 @@ SDS uses a pragmatic naming system for its color variables that ensures consiste
|
|
|
527
527
|
|
|
528
528
|
Colormaps are an array of colors, generally displayed as a gradient or spectrum, and are used to map datapoints to individual color values. Selecting effective colors to represent datapoints within a data visualization plays a major role in how well users are able to interpret that visualization. There are many factors to consider including the type of data is being represented in the dataset, whether the colors are interpretable for folks with visual deficiencies, and if the colors effectively help communicate the intended data story.
|
|
529
529
|
|
|
530
|
-
|
|
530
|
+
> **Note:** Visualization Colors are currently only available for Light Mode. If Visualization Colors need to be used in an application in Dark Mode, we recommend placing a light background behind the visualization element.
|
|
531
531
|
|
|
532
532
|
### Magma
|
|
533
533
|
|
|
@@ -535,19 +535,19 @@ Magma is a well-vetted, industry-standard colormap from Matplotlib and is the fi
|
|
|
535
535
|
|
|
536
536
|
Magma is perceptually uniform, meaning it has consistent and even changes in brightness and hue across the entire colormap. This ensures the colors that get mapped to each datapoint in a visualization are not only an equivalent distance away from each other technically, but visually appear as such, even for folks with visual accessibility concerns who might have trouble perceiving differences between colors.
|
|
537
537
|
|
|
538
|
-
|
|
538
|
+
> **Note:** any color from the Magma colormap can be used in implementation, however the following nine colors have been created as variables for easy use in Figma.
|
|
539
539
|
|
|
540
|
-
| **Name** |
|
|
541
|
-
|
|
|
542
|
-
| magma900 |
|
|
543
|
-
| magma800 |
|
|
544
|
-
| magma700 |
|
|
545
|
-
| magma600 |
|
|
546
|
-
| magma500 |
|
|
547
|
-
| magma400 |
|
|
548
|
-
| magma300 |
|
|
549
|
-
| magma200 |
|
|
550
|
-
| magma100 |
|
|
540
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variables** |
|
|
541
|
+
| -------- | --- | ------------------ | --- | ------------------------ |
|
|
542
|
+
| magma900 | | | | [variable to come] |
|
|
543
|
+
| magma800 | | | | [variable to come] |
|
|
544
|
+
| magma700 | | | | [variable to come] |
|
|
545
|
+
| magma600 | | | | [variable to come] |
|
|
546
|
+
| magma500 | | | | [variable to come] |
|
|
547
|
+
| magma400 | | | | [variable to come] |
|
|
548
|
+
| magma300 | | | | [variable to come] |
|
|
549
|
+
| magma200 | | | | [variable to come] |
|
|
550
|
+
| magma100 | | | | [variable to come] |
|
|
551
551
|
|
|
552
552
|
---
|
|
553
553
|
|
|
@@ -557,7 +557,7 @@ Color helps communicate usage and intent while providing brand distinction. Our
|
|
|
557
557
|
|
|
558
558
|
These are the most frequently used colors in the UI's design. Primary400 is the main brand color and is the default color choice for most interactive elements across the product. Black is featured prominently through headlines and body text with the other shades of Gray and Primary Blue used to help distinguish and differentiate elements throughout the UI.
|
|
559
559
|
|
|
560
|
-
For the sake of specificity, only those colors used in each scale are documented in our design system.
|
|
560
|
+
For the sake of specificity, only those colors used in each scale are documented in our design system.
|
|
561
561
|
|
|
562
562
|
### Primary Blue
|
|
563
563
|
|
|
@@ -630,4 +630,3 @@ These colors are used for product feedback only, i.e., showing info, success, wa
|
|
|
630
630
|
### Warning
|
|
631
631
|
|
|
632
632
|
### Beta
|
|
633
|
-
|