| Name | Hex |
|---|---|
| white | #ffffff |
| light-grey | #f4f6f7 |
| grey | #d6dde2 |
| dark-grey | #5c6c7c |
| black | #000000 |
| blue | #006be6 |
| red | #eb1313 |
| light-red | #f7c3c3 |
| green | #188701 |
| light-green | #bdf1b7 |
| Color name | Usage in theme |
|---|---|
| black | Layout widget titles, tab hover text, form labels, form input text |
| dark-grey | Radio & checkbox labels, form placeholders, menu/tab/accordion text, close icons, calendar icon |
| grey | (prev Disabled text, form icons) Nothing? |
| white | Button text, combobox tag text, slider tooltip |
| blue | focused radio and checkboxes, focused button, focused calendar date, month, and year |
| green | Success message and icon |
| red | Error message and icon |
| Color name | Usage in theme |
|---|---|
| dark-grey | Combobox tags, slider tooltip |
| light-grey | Input addons, select and menu/tabs/accordion hover, disabled inputs, calendar header and current day, switch bg |
| white | default |
| blue | Button, switch "on" position, calendar selected day |
| Color name | Usage in theme |
|---|---|
| dark-grey | Form input bottom borders, slider track and thumb, checkbox and radio |
| grey | Form inputs, disabled button, menu/tabs/accordions, dialog, slidepane |
| blue | Button hover and focus states, focused inputs, focused calendar day, focused menu/tab/accordion, active menu/tab |
| green | Input success state bottom border |
| light-green | Input success state border |
| red | Input error state bottom border |
| light-red | Input error state border |
| light-blue | Internal border on icon buttons |
| Color name | Usage in theme |
|---|---|
| black | default |
| blue | Focused inputs |
| green | Focused success state input |
| red | Focused error state input |
- color-text-primary (black)
- color-text-alt (dark-grey)
- color-text-faded (grey) <- may not be needed
- color-text-inverted (white)
- color-highlight (blue)
- color-success (green)
- color-error (red)
- color-background (white)
- color-background-inverted (dark-grey)
- color-background-faded (light-grey)
- color-border (grey)
- color-border-strong (dark-grey)
(using color functions for light green, red, and blue)
- font-size-base (16px)
- font-size-small (14px)
- font-size-title (20px)
- font-size-icon (24px)
- light-height-base (24px)
- grid-base (8px)
- spacing-regular (grid-base)
- spacing-large (grid-base * 2)
e.g. padding: var(--spacing-regular) var(--spacing-large);
All other uses can use calc() with grid-base
(could use a better category name)
-
box-shadow-dimensions-small (0 2px 2px 0)
-
box-shadow-dimensions-large (0 9px 16px 0)
-
border-width (1px)
-
border-width-emphasized (2px)
Both of these I just made up, so they could be anything reasonable:
- transition-duration (0.25s)
- transition-easing (ease)
Looks good to me