* update red color variables to hds
* change background red to be one step lighter
* map oranges
* map greens
* map blues
* map greys
* delete themes, colours: lemon, magenta, strawberry, and vault color aliases
* add unmapped rainbow colours
* replace white and transparent vars, remove unused semantic vars and frame placeholders
* small tweaks to improve contrast, change node health status x/check colours for non-voters to match design doc, replace semantic colour action w hds colour
* add unmapped grays, remove dark theme, manually set nav bar to use dark colours
* map consul pink colour
* map yellows
* add unmapped oranges, delete light theme
* remove readme, base variables, clean up dangling colours
* Start working on the nav disclosure menus
* Update main-nav-horizontal dropdowns
* Format template
* Update box-shadow tokens
* Replace --tone- usage with tokens
* Update nav disabled state and panel border colour
* Replace rgb usage on tile
* Fix permissions modal overlay
* More fixes
* Replace orange-500 with amber-200
* Update badge colors
* Update vertical sidebar colors
* Remove top border on consul peer list ul
---------
Co-authored-by: wenincode <tyler.wendlandt@hashicorp.com>
* ui: Use new icon-size and icon-color for popover-menus
* Remove the default currentColor plus add some more defaults
* Undo transparency overwrites now we don't need them
* Fixup discochain icons
* Undo a default icon rule for vert align
* Fixup expanded icon for meatball popovers
* Fixup intention permission labels/badges/icons
* Remove different res icon
* Remove icon resolutions
From an engineers perspective, whenever specifying colors from now on we should use the form:
```
color: rgb(var(--tone-red-500));
```
Please note:
- Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens.
- Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500.
Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black)
There are a 2 or 3 left for the code editor, plus our custom-query values
* Create BindingRule adapter and tests
* Create BindingRule serializer and test
* Create BindingRule model and repository
* Add binding-rules mock data
* Create binding-rules router and call endpoint
* Create Binding rules tab
* Create and use BindingView component
* Create empty state for BindingView
* Remove binding rule requestForQueryRecord endpoint and tests
* Update binding rules selector to be monospaced
* Add bind type tooltip
* Create and Tabular-dl styling component
* Update hr tag global styling
* Rename BindingView to BindingList and refactor
* Add translations for bind types tooltip info
* Remove unused endpoint
* Refactor based on review notes
Valeriia Ruban