diff options
Diffstat (limited to 'doc/development/ux_guide/components.md')
| -rw-r--r-- | doc/development/ux_guide/components.md | 21 |
1 files changed, 20 insertions, 1 deletions
diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index 8e51edd23ef..28383ad7dfc 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -75,10 +75,29 @@ Text should be in sentence case, where only the first word is capitalized. "Crea > TODO: Rationalize this. Ensure that we still believe this. ### Colors -Follow the color guidance on the [basics](basics.md#color) page. The default color treatment is the white/grey button. +The default color treatment is the white/grey button. Follow the guidance on the [basics](basics.md#color) page to add meaningful color to a button. + +### Secondary states + +Primary buttons darken the color of their background and border for hover, focus and active states. An inner shadow is added to the active state to denote the button being pressed. + +| Values | Info | Success | Warning | Danger | +| :------ | :------: | :------: | :------: | :------: | +| Background: `$color-light` <br> Border: `$border-color-light` |  |  |  |  | +| Background: `$color-normal` <br> Border: `$border-color-normal` |  |  |  |  | +| Background: `$color-dark` <br> Border: `$border-color-dark` |  |  |  |  | + +Since secondary buttons only have a border on their resting state, their hover and focus states add a background color, which gets darkened on active. + +| Values | Success Secondary | Close | Spam | +| :------ | :------: | :------: | :------: | +| Font: `$border-color-light` <br> Border: `$border-color-light` |  |  |  | +| Background: `$color-light` <br> Border: `$border-color-light` |  |  |  | +| Background: `$color-normal` <br> Border: `$border-color-normal` |  |  |  | --- + ## Dropdowns Dropdowns are used to allow users to choose one (or many) options from a list of options. If this list of options is more 20, there should generally be a way to search through and filter the options (see the complex filter dropdowns below.) |