From 2200cde988e8778c8458fb297ff32ba05014bef3 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 7 Oct 2021 19:21:11 +0100 Subject: [PATCH] ui: Replaces almost all remaining instances of SASS variables with CSS (#11200) 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 --- .changelog/11200.txt | 5 + .../app/components/anchors/index.scss | 4 +- .../app/components/anchors/skin.scss | 4 +- .../app/components/app-view/index.scss | 2 +- .../app/components/app-view/skin.scss | 12 +- .../app/components/auth-form/skin.scss | 4 +- .../app/components/auth-modal/layout.scss | 2 +- .../consul-ui/app/components/badge/index.scss | 4 +- .../app/components/breadcrumbs/skin.scss | 8 +- .../app/components/buttons/skin.scss | 20 +- .../consul-ui/app/components/card/skin.scss | 12 +- .../app/components/certificate/index.scss | 6 +- .../app/components/code-editor/layout.scss | 6 +- .../app/components/code-editor/skin.scss | 84 ++--- .../components/collapsible-notices/index.scss | 2 +- .../app/components/composite-row/index.scss | 4 +- .../components/confirmation-dialog/skin.scss | 4 +- .../components/consul/auth-method/index.scss | 22 +- .../consul/discovery-chain/index.hbs | 2 +- .../consul/discovery-chain/skin.scss | 26 +- .../consul/exposed-path/list/index.scss | 2 +- .../consul/health-check/list/skin.scss | 26 +- .../consul/intention/components.scss | 12 +- .../consul/intention/form/fieldsets/skin.scss | 2 +- .../consul/intention/form/index.scss | 2 +- .../consul/intention/list/skin.scss | 2 +- .../intention/permission/form/skin.scss | 2 +- .../app/components/consul/loader/skin.scss | 2 +- .../consul/lock-session/form/index.scss | 4 +- .../consul/tomography/graph/index.scss | 20 +- .../consul/upstream-instance/list/index.scss | 2 +- .../app/components/copy-button/skin.scss | 14 +- .../app/components/empty-state/skin.scss | 4 +- .../expanded-single-select/skin.scss | 10 +- .../app/components/filter-bar/skin.scss | 10 +- .../app/components/flash-message/index.scss | 2 +- .../app/components/flash-message/skin.scss | 8 +- .../app/components/form-elements/skin.scss | 18 +- .../app/components/freetext-filter/skin.scss | 18 +- .../components/hashicorp-consul/index.scss | 4 +- .../components/horizontal-kv-list/README.mdx | 4 +- .../components/horizontal-kv-list/debug.scss | 4 +- .../app/components/icon-definition/index.scss | 10 +- .../app/components/informed-action/skin.scss | 36 +- .../app/components/inline-alert/skin.scss | 10 +- .../app/components/inline-code/skin.scss | 6 +- .../app/components/list-collection/skin.scss | 6 +- .../app/components/list-row/skin.scss | 20 +- .../main-header-horizontal/skin.scss | 2 +- .../components/main-nav-horizontal/skin.scss | 6 +- .../components/main-nav-vertical/README.mdx | 2 +- .../components/main-nav-vertical/debug.scss | 2 +- .../components/main-nav-vertical/index.scss | 8 +- .../components/main-nav-vertical/skin.scss | 32 +- .../app/components/menu-panel/skin.scss | 26 +- .../app/components/modal-dialog/skin.scss | 28 +- .../components/more-popover-menu/index.scss | 10 +- .../consul-ui/app/components/notice/skin.scss | 44 +-- .../app/components/overlay/none.scss | 6 +- .../app/components/overlay/square-tail.scss | 14 +- .../consul-ui/app/components/pill/skin.scss | 2 +- .../app/components/popover-select/index.scss | 8 +- .../app/components/radio-card/skin.scss | 18 +- .../app/components/search-bar/index.scss | 12 +- .../app/components/secret-button/index.scss | 2 +- .../app/components/skip-links/skin.scss | 6 +- .../app/components/sliding-toggle/skin.scss | 10 +- .../app/components/tab-nav/skin.scss | 12 +- .../consul-ui/app/components/table/index.scss | 6 +- .../app/components/table/layout.scss | 2 +- .../consul-ui/app/components/table/skin.scss | 12 +- .../app/components/tabular-details/skin.scss | 10 +- .../app/components/tabular-dl/skin.scss | 12 +- .../app/components/tag-list/index.scss | 2 +- .../app/components/toggle-button/skin.scss | 6 +- .../app/components/tooltip-panel/skin.scss | 4 +- .../app/components/tooltip/index.scss | 8 +- .../topology-metrics/card/index.scss | 24 +- .../topology-metrics/popover/index.scss | 8 +- .../topology-metrics/series/skin.scss | 16 +- .../app/components/topology-metrics/skin.scss | 36 +- .../topology-metrics/stats/index.scss | 4 +- .../topology-metrics/status/index.scss | 4 +- .../app/styles/base/color/base-variables.scss | 316 ++++++++++-------- .../styles/base/color/frame-placeholders.scss | 259 -------------- .../app/styles/base/color/hex-variables.scss | 178 ++++++++++ .../app/styles/base/color/index.scss | 7 +- .../color/magenta/frame-placeholders.scss | 13 + .../app/styles/base/color/magenta/index.scss | 6 + .../magenta/themes/dark-high-contrast.scss | 18 + .../base/color/magenta/themes/dark.scss | 18 + .../magenta/themes/light-high-contrast.scss | 18 + .../base/color/magenta/themes/light.scss | 18 + .../styles/base/color/semantic-variables.scss | 39 ++- .../color/strawberry/frame-placeholders.scss | 13 + .../styles/base/color/strawberry/index.scss | 6 + .../strawberry/themes/dark-high-contrast.scss | 18 + .../base/color/strawberry/themes/dark.scss | 18 + .../themes/light-high-contrast.scss | 18 + .../base/color/strawberry/themes/light.scss | 18 + .../styles/base/color/theme-placeholders.scss | 139 ++++---- .../base/color/ui/frame-placeholders.scss | 187 +++++++++++ .../app/styles/base/color/ui/index.scss | 6 + .../color/ui/themes/dark-high-contrast.scss | 116 +++++++ .../app/styles/base/color/ui/themes/dark.scss | 116 +++++++ .../color/ui/themes/light-high-contrast.scss | 115 +++++++ .../styles/base/color/ui/themes/light.scss | 115 +++++++ .../base/decoration/base-variables.scss | 38 ++- .../styles/base/icons/base-placeholders.scss | 4 +- .../app/styles/base/icons/overrides.scss | 2 +- .../app/styles/base/reset/index.scss | 3 - .../app/styles/base/reset/minireset.scss | 3 +- .../app/styles/base/reset/system.scss | 35 +- .../base/typography/base-placeholders.scss | 32 +- .../base/typography/base-variables.scss | 73 ++-- ui/packages/consul-ui/app/styles/debug.scss | 8 +- .../consul-ui/app/styles/layouts/index.scss | 2 +- .../app/styles/routes/dc/services/index.scss | 8 +- ui/packages/consul-ui/app/styles/themes.scss | 5 +- .../consul-ui/app/styles/typography.scss | 14 +- .../consul-ui/app/styles/variables/skin.scss | 32 +- 121 files changed, 1883 insertions(+), 1048 deletions(-) create mode 100644 .changelog/11200.txt delete mode 100644 ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/hex-variables.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/magenta/frame-placeholders.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/magenta/index.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark-high-contrast.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/magenta/themes/light-high-contrast.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/magenta/themes/light.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/strawberry/frame-placeholders.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/strawberry/index.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark-high-contrast.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light-high-contrast.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/ui/index.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss diff --git a/.changelog/11200.txt b/.changelog/11200.txt new file mode 100644 index 000000000..ca4310042 --- /dev/null +++ b/.changelog/11200.txt @@ -0,0 +1,5 @@ +```release-note:improvement +ui: Move the majority of our SASS variables to use native CSS custom +properties +``` + diff --git a/ui/packages/consul-ui/app/components/anchors/index.scss b/ui/packages/consul-ui/app/components/anchors/index.scss index 253a1b89a..08d06e65a 100644 --- a/ui/packages/consul-ui/app/components/anchors/index.scss +++ b/ui/packages/consul-ui/app/components/anchors/index.scss @@ -4,14 +4,14 @@ a[rel*='external']::after { margin-left: 8px; } %main-content label a[rel*='help'] { - color: $gray-400; + color: rgb(var(--tone-gray-400)); } %main-content a[rel*='help']::after { @extend %with-info-circle-outline-icon, %as-pseudo; opacity: 0.4; } %main-content h2 a { - color: $gray-900; + color: rgb(var(--tone-gray-900)); } %main-content h2 a[rel*='help']::after { font-size: 0.65em; diff --git a/ui/packages/consul-ui/app/components/anchors/skin.scss b/ui/packages/consul-ui/app/components/anchors/skin.scss index 262abb966..118133533 100644 --- a/ui/packages/consul-ui/app/components/anchors/skin.scss +++ b/ui/packages/consul-ui/app/components/anchors/skin.scss @@ -8,7 +8,7 @@ %anchor, %anchor-intent, %anchor-active { - color: $color-action; + color: rgb(var(--color-action)); } %anchor-decoration:hover, %anchor-decoration:focus { @@ -20,7 +20,7 @@ %anchor { @extend %anchor-decoration; cursor: pointer; - background-color: $transparent; + background-color: var(--transparent); } %anchor:hover, %anchor:focus { diff --git a/ui/packages/consul-ui/app/components/app-view/index.scss b/ui/packages/consul-ui/app/components/app-view/index.scss index eb4044e35..6d1d3059c 100644 --- a/ui/packages/consul-ui/app/components/app-view/index.scss +++ b/ui/packages/consul-ui/app/components/app-view/index.scss @@ -30,7 +30,7 @@ width: 26px; height: 26px; cursor: pointer; - color: $blue-500; + color: rgb(var(--tone-blue-500)); } #toolbar-toggle { display: none; diff --git a/ui/packages/consul-ui/app/components/app-view/skin.scss b/ui/packages/consul-ui/app/components/app-view/skin.scss index 7ee63b053..d9e85982e 100644 --- a/ui/packages/consul-ui/app/components/app-view/skin.scss +++ b/ui/packages/consul-ui/app/components/app-view/skin.scss @@ -2,21 +2,21 @@ @extend %h100; } %app-view-title { - border-bottom: $decor-border-100; + border-bottom: var(--decor-border-100); } %app-view-content form:not(.filter-bar) fieldset { - border-bottom: $decor-border-200; + border-bottom: var(--decor-border-200); } %app-view-header h1 > em { - color: var(--gray-600); + color: rgb(var(--tone-gray-600)); } %app-view-header dd > a { - color: var(--gray-999); + color: rgb(var(--tone-gray-999)); } %app-view-content div > dl > dd { - color: var(--gray-400); + color: rgb(var(--tone-gray-400)); } %app-view-title, %app-view-content form:not(.filter-bar) fieldset { - border-color: var(--gray-200); + border-color: rgb(var(--tone-gray-200)); } diff --git a/ui/packages/consul-ui/app/components/auth-form/skin.scss b/ui/packages/consul-ui/app/components/auth-form/skin.scss index dd2f24df5..58053db1b 100644 --- a/ui/packages/consul-ui/app/components/auth-form/skin.scss +++ b/ui/packages/consul-ui/app/components/auth-form/skin.scss @@ -2,11 +2,11 @@ text-transform: uppercase; } %auth-form-hr::before { - border-top: 1px solid $gray-200; + border-top: 1px solid rgb(var(--tone-gray-200)); } /* This is to mask off the hr so it has a space */ /* in the center so if the background color of what the */ /* line is on is different, then this should be different */ %auth-form-hr span { - background-color: $white; + background-color: rgb(var(--white)); } diff --git a/ui/packages/consul-ui/app/components/auth-modal/layout.scss b/ui/packages/consul-ui/app/components/auth-modal/layout.scss index b41e574d0..6c0d0c137 100644 --- a/ui/packages/consul-ui/app/components/auth-modal/layout.scss +++ b/ui/packages/consul-ui/app/components/auth-modal/layout.scss @@ -6,7 +6,7 @@ padding-right: 42px; } %auth-modal footer { - background-color: $transparent; + background-color: var(--transparent); } %auth-modal > div > div > div { padding-bottom: 0; diff --git a/ui/packages/consul-ui/app/components/badge/index.scss b/ui/packages/consul-ui/app/components/badge/index.scss index 87b71f2f8..22c42b3b9 100644 --- a/ui/packages/consul-ui/app/components/badge/index.scss +++ b/ui/packages/consul-ui/app/components/badge/index.scss @@ -8,8 +8,8 @@ %badge, %badge + dd { @extend %pill; - background-color: var(--gray-100); - color: var(--gray-500); + background-color: rgb(var(--tone-gray-100)); + color: rgb(var(--tone-gray-500)); } %badge::after, %badge-reversed::after, diff --git a/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss b/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss index f7764062e..966cf886e 100644 --- a/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss +++ b/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss @@ -1,9 +1,9 @@ %crumbs { - color: $gray-500; + color: rgb(var(--tone-gray-500)); text-decoration: none; } %crumbs:hover { - color: $blue-500; + color: rgb(var(--tone-blue-500)); text-decoration: underline; } %crumbs::before { @@ -11,9 +11,9 @@ } %breadcrumb-milestone::before { @extend %with-chevron-left-mask, %as-pseudo; - background-color: $gray-500; + background-color: rgb(var(--tone-gray-500)); } %breadcrumb::before { content: '/'; - color: $gray-500; + color: rgb(var(--tone-gray-500)); } diff --git a/ui/packages/consul-ui/app/components/buttons/skin.scss b/ui/packages/consul-ui/app/components/buttons/skin.scss index ad14c1fe2..d6d36d829 100644 --- a/ui/packages/consul-ui/app/components/buttons/skin.scss +++ b/ui/packages/consul-ui/app/components/buttons/skin.scss @@ -16,8 +16,8 @@ %dangerous-button { @extend %button; border-width: 1px; - border-radius: $decor-radius-100; - box-shadow: $decor-elevation-300; + border-radius: var(--decor-radius-100); + box-shadow: var(--decor-elevation-300); } /* color */ %primary-button { @@ -42,14 +42,14 @@ @extend %frame-gray-400; } %secondary-button:disabled { - color: $gray-600; + color: rgb(var(--tone-gray-600)); } %secondary-button:active { /* %frame-gray-something */ @extend %frame-gray-700; - background-color: $gray-200; - color: $gray-800; - border-color: $gray-700; + background-color: rgb(var(--tone-gray-200)); + color: rgb(var(--tone-gray-800)); + border-color: rgb(var(--tone-gray-700)); } /**/ %dangerous-button { @@ -67,8 +67,8 @@ } %internal-button { - color: var(--gray-900); - background-color: var(--gray-000); + color: rgb(var(--tone-gray-900)); + background-color: rgb(var(--tone-gray-000)); } %internal-button-dangerous { @extend %frame-red-300; @@ -77,7 +77,7 @@ @extend %frame-red-700; } %internal-button-intent { - background-color: var(--gray-050); + background-color: rgb(var(--tone-gray-050)); } %internal-button:focus, %internal-button:hover { @@ -95,7 +95,7 @@ top: 0; height: 100%; margin-left: 8px; - background-color: $gray-300; + background-color: rgb(var(--tone-gray-300)); } %sort-button::before { @extend %with-sort-mask, %as-pseudo; diff --git a/ui/packages/consul-ui/app/components/card/skin.scss b/ui/packages/consul-ui/app/components/card/skin.scss index 7ccf5f1f9..da07fa3f1 100644 --- a/ui/packages/consul-ui/app/components/card/skin.scss +++ b/ui/packages/consul-ui/app/components/card/skin.scss @@ -3,23 +3,23 @@ @extend %card-intent; } %card { - border: $decor-border-100; - border-radius: $decor-radius-100; - background-color: rgba($white, 0.9); + border: var(--decor-border-100); + border-radius: var(--decor-radius-100); + background-color: rgb(var(--white) / 90%); } %card > section, %card > ul > li { - border-top: $decor-border-100; + border-top: var(--decor-border-100); } %card, %card > section, %card > ul > li { - border-color: $gray-200; + border-color: rgb(var(--tone-gray-200)); } %card ul { /*TODO: %list-style-none?*/ list-style-type: none; } %card-intent { - box-shadow: $decor-elevation-400; + box-shadow: var(--decor-elevation-400); } diff --git a/ui/packages/consul-ui/app/components/certificate/index.scss b/ui/packages/consul-ui/app/components/certificate/index.scss index 3d21a9fa0..ff343a3a5 100644 --- a/ui/packages/consul-ui/app/components/certificate/index.scss +++ b/ui/packages/consul-ui/app/components/certificate/index.scss @@ -13,14 +13,14 @@ @extend %with-visibility-show-icon, %as-pseudo; } code { - background-color: var(--gray-050); + background-color: rgb(var(--tone-gray-050)); overflow-wrap: break-word; max-width: min-content; padding: 0 12px; } hr { - border: 3px dashed var(--gray-300); - background-color: $white; + border: 3px dashed rgb(var(--tone-gray-300)); + background-color: rgb(var(--white)); width: 150px; margin: auto; margin-top: 9px; diff --git a/ui/packages/consul-ui/app/components/code-editor/layout.scss b/ui/packages/consul-ui/app/components/code-editor/layout.scss index a4f1865e5..8375d23a5 100644 --- a/ui/packages/consul-ui/app/components/code-editor/layout.scss +++ b/ui/packages/consul-ui/app/components/code-editor/layout.scss @@ -15,8 +15,8 @@ %code-editor-syntax-select { margin-top: 1px; border: 0; - background-color: $black; - color: $white; + background-color: rgb(var(--black)); + color: rgb(var(--white)); border-left: 1px solid; border-radius: 0; } @@ -25,7 +25,7 @@ bottom: 0px; width: 100%; height: 25px; - background-color: $black; + background-color: var(--black); content: ''; display: block; } diff --git a/ui/packages/consul-ui/app/components/code-editor/skin.scss b/ui/packages/consul-ui/app/components/code-editor/skin.scss index 5053054fa..e52b2bbaf 100644 --- a/ui/packages/consul-ui/app/components/code-editor/skin.scss +++ b/ui/packages/consul-ui/app/components/code-editor/skin.scss @@ -1,24 +1,28 @@ -$syntax-light-grey: #dde3e7; -$syntax-light-gray: #a4a4a4; -$syntax-light-grey-blue: #6c7b81; -$syntax-dark-grey: #788290; -$syntax-faded-gray: #eaeaea; -// Product colors -$syntax-atlas: #127eff; -$syntax-vagrant: #2f88f7; $syntax-consul: #69499a; -$syntax-terraform: #822ff7; -$syntax-serf: #dd4e58; -$syntax-packer: #1ddba3; - -// Our colors -$syntax-gray: lighten($black, 89%); -$syntax-red: #ff3d3d; -$syntax-green: #39b54a; $syntax-dark-gray: #535f73; +:root { + --syntax-light-grey: #dde3e7; + --syntax-light-gray: #a4a4a4; + --syntax-light-grey-blue: #6c7b81; + --syntax-dark-grey: #788290; + --syntax-faded-gray: #eaeaea; + // Product colors + --syntax-atlas: #127eff; + --syntax-vagrant: #2f88f7; + --syntax-consul: #{$syntax-consul}; + --syntax-terraform: #822ff7; + --syntax-serf: #dd4e58; + --syntax-packer: #1ddba3; -$syntax-gutter-grey: #2a2f36; -$syntax-yellow: $yellow-500; + // Our colors + --syntax-gray: lighten(#000, 89%); + --syntax-red: #ff3d3d; + --syntax-green: #39b54a; + --syntax-dark-gray: #{$syntax-dark-gray}; + + --syntax-gutter-grey: #2a2f36; + --syntax-yellow: rgb(var(--tone-yellow-500)); +} .CodeMirror { max-width: 1150px; min-height: 300px; @@ -31,10 +35,10 @@ $syntax-yellow: $yellow-500; } .CodeMirror-lint-tooltip { background-color: #f9f9fa; - border: 1px solid $syntax-light-gray; + border: 1px solid var(--syntax-light-gray); border-radius: 0; - color: lighten($black, 13%); - font-family: $typo-family-mono; + color: lighten(#000, 13%); + font-family: var(--typo-family-mono); font-size: 13px; padding: 7px 8px 9px; } @@ -42,17 +46,17 @@ $syntax-yellow: $yellow-500; .cm-s-hashi { &.CodeMirror { width: 100%; - background-color: $black !important; + background-color: rgb(var(--black)) !important; color: #cfd2d1 !important; border: none; - font-family: $typo-family-mono; + font-family: var(--typo-family-mono); -webkit-font-smoothing: auto; line-height: 1.4; } .CodeMirror-gutters { - color: $syntax-dark-grey; - background-color: $syntax-gutter-grey; + color: var(--syntax-dark-grey); + background-color: var(--syntax-gutter-grey); border: none; } @@ -77,20 +81,20 @@ $syntax-yellow: $yellow-500; .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { - background: rgba(255, 255, 255, 0.1); + background: rgb(var(--white) / 10%); } span.cm-comment { - color: $syntax-light-grey; + color: var(--syntax-light-grey); } span.cm-string, span.cm-string-2 { - color: $syntax-packer; + color: var(--syntax-packer); } span.cm-number { - color: $syntax-serf; + color: var(--syntax-serf); } span.cm-variable { @@ -102,26 +106,26 @@ $syntax-yellow: $yellow-500; } span.cm-def { - color: $syntax-packer; + color: var(--syntax-packer); } span.cm-operator { - color: $syntax-gray; + color: var(--syntax-gray); } span.cm-keyword { - color: $syntax-yellow; + color: var(--syntax-yellow); } span.cm-atom { - color: $syntax-serf; + color: var(--syntax-serf); } span.cm-meta { - color: $syntax-packer; + color: var(--syntax-packer); } span.cm-tag { - color: $syntax-packer; + color: var(--syntax-packer); } span.cm-attribute { @@ -150,7 +154,7 @@ $syntax-yellow: $yellow-500; .CodeMirror-matchingbracket { text-decoration: underline; - color: $white !important; + color: rgb(var(--white)) !important; } } @@ -161,12 +165,12 @@ $syntax-yellow: $yellow-500; .cm-s-hashi { span { - color: $syntax-light-grey; + color: var(--syntax-light-grey); } span.cm-string, span.cm-string-2 { - color: $syntax-faded-gray; + color: var(--syntax-faded-gray); } span.cm-number { @@ -174,11 +178,11 @@ $syntax-yellow: $yellow-500; } span.cm-property { - color: $white; + color: rgb(var(--white)); } span.cm-variable-2 { - color: $syntax-light-grey-blue; + color: var(--syntax-light-grey-blue); } } } diff --git a/ui/packages/consul-ui/app/components/collapsible-notices/index.scss b/ui/packages/consul-ui/app/components/collapsible-notices/index.scss index 639d3cbb6..672904fce 100644 --- a/ui/packages/consul-ui/app/components/collapsible-notices/index.scss +++ b/ui/packages/consul-ui/app/components/collapsible-notices/index.scss @@ -16,7 +16,7 @@ } button { @extend %button; - color: $color-action; + color: rgb(var(--color-action)); float: right; grid-area: toggle-button; margin-top: 1em; diff --git a/ui/packages/consul-ui/app/components/composite-row/index.scss b/ui/packages/consul-ui/app/components/composite-row/index.scss index 4ab199e41..7b42462c6 100644 --- a/ui/packages/consul-ui/app/components/composite-row/index.scss +++ b/ui/packages/consul-ui/app/components/composite-row/index.scss @@ -61,7 +61,7 @@ overflow-x: visible !important; } .consul-intention-permission-list > ul { - border-top: 1px solid $gray-200; + border-top: 1px solid rgb(var(--tone-gray-200)); } .consul-service-instance-list .port dt, .consul-service-instance-list .port dt::before { @@ -113,5 +113,5 @@ %composite-row-header .policy-management dd::before, %composite-row-detail .policy-management::before { @extend %with-star-fill-mask, %as-pseudo; - background-color: var(--brand-600); + background-color: rgb(var(--brand-600)); } diff --git a/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss b/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss index aa50e08d3..3c4047582 100644 --- a/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss +++ b/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss @@ -1,6 +1,6 @@ table div.with-confirmation.confirming { - background-color: $white; + background-color: rgb(var(--white)); } %confirmation-dialog-inline p { - color: $gray-400; + color: rgb(var(--tone-gray-400)); } diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss index dd7f74d8d..1b171b1ca 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss +++ b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss @@ -20,14 +20,14 @@ } table { thead td { - color: var(--gray-500); - font-weight: $typo-weight-semibold; - font-size: $typo-size-700; + color: rgb(var(--tone-gray-500)); + font-weight: var(--typo-weight-semibold); + font-size: var(--typo-size-700); } tbody { td { - font-size: $typo-size-600; - color: $black; + font-size: var(--typo-size-600); + color: var(--black); } tr { cursor: default; @@ -57,7 +57,7 @@ @extend %tabular-dl; } code { - background-color: var(--gray-050); + background-color: rgb(var(--tone-gray-050)); padding: 0 12px; } } @@ -66,15 +66,15 @@ .consul-auth-method-nspace-list { thead { td { - color: var(--gray-500) !important; - font-weight: $typo-weight-semibold !important; - font-size: $typo-size-700 !important; + color: rgb(var(--tone-gray-500)) !important; + font-weight: var(--typo-weight-semibold) !important; + font-size: var(--typo-size-700) !important; } } tbody { td { - font-size: $typo-size-600; - color: $black; + font-size: var(--typo-size-600); + color: var(--black); } tr { cursor: default; diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs index 56bc9e63e..52e3ab1a0 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs @@ -6,7 +6,7 @@ background-color: var(--white); border: var(--decor-border-100); border-radius: var(--decor-radius-200); - border-color: var(--gray-500); + border-color: rgb(var(--tone-gray-500)); box-shadow: var(--decor-elevation-600); } {{/if}} diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss index e38efdb6a..6c34f57b9 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss @@ -19,7 +19,7 @@ transition-property: stroke; fill: none; - stroke: $gray-400; + stroke: rgb(var(--tone-gray-400)); stroke-width: 2; vector-effect: non-scaling-stroke; } @@ -30,15 +30,15 @@ } %chain-node, %chain-node a { - color: $gray-900 !important; + color: rgb(var(--tone-gray-900)) !important; } %discovery-chain-edge-active { - stroke: $gray-900; + stroke: rgb(var(--tone-gray-900)); } %chain-group { - border-radius: $decor-radius-100; - border: 1px solid $gray-200; - background-color: $gray-100; + border-radius: var(--decor-radius-100); + border: 1px solid rgb(var(--tone-gray-200)); + background-color: rgb(var(--tone-gray-100)); pointer-events: none; } @@ -63,8 +63,8 @@ } %chain-node-active { opacity: 1; - background-color: $white; - border-color: $gray-500; + background-color: rgb(var(--white)); + border-color: rgb(var(--tone-gray-500)); } /* TODO: More text truncation, centralize */ %route-card header:not(.short) dd { @@ -99,13 +99,13 @@ /**/ %with-chain-outlet::before { @extend %as-pseudo; - background-color: $white; + background-color: rgb(var(--white)); - border-radius: $decor-radius-full; - border: 2px solid $gray-400; + border-radius: var(--decor-radius-full); + border: 2px solid rgb(var(--tone-gray-400)); } %discovery-chain circle { stroke-width: 2; - stroke: $gray-400; - fill: $white; + stroke: rgb(var(--tone-gray-400)); + fill: rgb(var(--white)); } diff --git a/ui/packages/consul-ui/app/components/consul/exposed-path/list/index.scss b/ui/packages/consul-ui/app/components/consul/exposed-path/list/index.scss index 23cae5bca..15a5f170f 100644 --- a/ui/packages/consul-ui/app/components/consul/exposed-path/list/index.scss +++ b/ui/packages/consul-ui/app/components/consul/exposed-path/list/index.scss @@ -1,6 +1,6 @@ .consul-exposed-path-list { > ul { - border-top: 1px solid $gray-200; + border-top: 1px solid rgb(var(--tone-gray-200)); } > ul > li { @extend %composite-row; diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss index ed7276f83..17b3ad7b0 100644 --- a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss @@ -19,7 +19,7 @@ } %healthcheck-output dd em { @extend %pill; - background-color: $gray-100; + background-color: rgb(var(--tone-gray-100)); /*TODO: Should this be merged into %pill? */ cursor: default; font-style: normal; @@ -28,41 +28,41 @@ } %healthcheck-output.passing::before { @extend %with-check-circle-fill-mask; - color: $green-500; + color: rgb(var(--tone-green-500)); } %healthcheck-output.warning::before { @extend %with-alert-triangle-mask; - color: $orange-500; + color: rgb(var(--tone-orange-500)); } %healthcheck-output.critical::before { @extend %with-cancel-square-fill-mask; - color: $red-500; + color: rgb(var(--tone-red-500)); } %healthcheck-output, %healthcheck-output pre { - border-radius: $decor-radius-100; + border-radius: var(--decor-radius-100); } %healthcheck-output dd:first-of-type { - color: $gray-400; + color: rgb(var(--tone-gray-400)); } %healthcheck-output pre { - background-color: $gray-050; - color: $gray-600; + background-color: rgb(var(--tone-gray-050)); + color: rgb(var(--tone-gray-600)); } %healthcheck-output { /* TODO: this should be a frame-gray */ - color: $gray-900; - border-color: $gray-200; + color: rgb(var(--tone-gray-900)); + border-color: rgb(var(--tone-gray-200)); border-style: solid; border-left-width: 4px; } %healthcheck-output.passing { - border-left-color: $green-500; + border-left-color: rgb(var(--tone-green-500)); } %healthcheck-output.warning { - border-left-color: $yellow-500; + border-left-color: rgb(var(--tone-yellow-500)); } %healthcheck-output.critical { - border-left-color: $red-500; + border-left-color: rgb(var(--tone-red-500)); } diff --git a/ui/packages/consul-ui/app/components/consul/intention/components.scss b/ui/packages/consul-ui/app/components/consul/intention/components.scss index b4e785606..59dfcd2fe 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/components.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/components.scss @@ -9,16 +9,16 @@ %pill-deny, %pill-l7 { display: inline-block; - font-weight: $typo-weight-normal; - font-size: $typo-size-600; + font-weight: var(--typo-weight-normal); + font-size: var(--typo-size-600); } %pill-allow { - color: $green-800; - background-color: $green-100; + color: rgb(var(--tone-green-800)); + background-color: rgb(var(--tone-green-100)); } %pill-deny { - color: $red-800; - background-color: $red-100; + color: rgb(var(--tone-red-800)); + background-color: rgb(var(--tone-red-100)); } %pill-l7 { @extend %frame-gray-900; diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss index bbf8ef09c..5057fc042 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss @@ -1,7 +1,7 @@ .consul-intention-fieldsets { .value-allow > :last-child::before { @extend %with-arrow-right-mask, %as-pseudo; - color: $green-500; + color: rgb(var(--tone-green-500)); } .value-deny > :last-child::before { @extend %with-deny-color-icon, %as-pseudo; diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss index e0fcfa4e2..6f39b1c6c 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss @@ -3,7 +3,7 @@ max-width: 450px; } .modal-dialog-body p { - font-size: $typo-size-600; + font-size: var(--typo-size-600); } button.dangerous { @extend %dangerous-button; diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss index 40f4f5ecc..8a66540e8 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss @@ -1,5 +1,5 @@ %consul-intention-list td.permissions { - color: $blue-500; + color: rgb(var(--tone-blue-500)); } %consul-intention-list em { --word-spacing: 0.25rem; diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss index 74352a027..337e2406d 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss @@ -1,6 +1,6 @@ .consul-intention-permission-form { h2 { - border-top: 1px solid $blue-500; + border-top: 1px solid rgb(var(--tone-blue-500)); @extend %h200; } button.type-submit { diff --git a/ui/packages/consul-ui/app/components/consul/loader/skin.scss b/ui/packages/consul-ui/app/components/consul/loader/skin.scss index 20ab7c0a7..a5f3a103f 100644 --- a/ui/packages/consul-ui/app/components/consul/loader/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/loader/skin.scss @@ -1,5 +1,5 @@ %loader circle { - fill: var(--brand-100); + fill: rgb(var(--brand-100)); } %loader circle { animation: loader-animation 1.5s infinite ease-in-out; diff --git a/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss b/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss index 1accb6eba..3dab35b60 100644 --- a/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss +++ b/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss @@ -1,8 +1,8 @@ .consul-lock-session-form { h2 { @extend %h200; - border-bottom: $decor-border-200; - border-color: $gray-200; + border-bottom: var(--decor-border-200); + border-color: rgb(var(--tone-gray-200)); padding-bottom: 0.2em; margin-bottom: 0.5em; } diff --git a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss index db4fc74e3..2cb374519 100644 --- a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss +++ b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss @@ -1,36 +1,36 @@ .tomography-graph { .background { - fill: $gray-050; + fill: rgb(var(--tone-gray-050)); } .axis { fill: none; - stroke: $gray-300; + stroke: rgb(var(--tone-gray-300)); stroke-dasharray: 4 4; } .border { fill: none; - stroke: $gray-300; + stroke: rgb(var(--tone-gray-300)); } .point { - stroke: $gray-400; - fill: $magenta-600; + stroke: rgb(var(--tone-gray-400)); + fill: rgb(var(--tone-magenta-600)); } .lines rect { - fill: $magenta-600; + fill: rgb(var(--tone-magenta-600)); stroke: transparent; stroke-width: 5px; } .lines rect:hover { - fill: $gray-300; + fill: rgb(var(--tone-gray-300)); height: 3px; y: -1px; } .tick line { - stroke: $gray-300; + stroke: rgb(var(--tone-gray-300)); } .tick text { - font-size: $typo-size-600; + font-size: var(--typo-size-600); text-anchor: start; - color: $gray-900; + color: rgb(var(--tone-gray-900)); } } diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss index 63f2ecf79..9a46faaad 100644 --- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss +++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss @@ -12,6 +12,6 @@ @extend %with-folder-outline-mask, %as-pseudo; } dl.local-bind-mode dt { - font-weight: $typo-weight-semibold; + font-weight: var(--typo-weight-semibold); } } diff --git a/ui/packages/consul-ui/app/components/copy-button/skin.scss b/ui/packages/consul-ui/app/components/copy-button/skin.scss index 836cb2bd8..214b197ab 100644 --- a/ui/packages/consul-ui/app/components/copy-button/skin.scss +++ b/ui/packages/consul-ui/app/components/copy-button/skin.scss @@ -1,22 +1,22 @@ %copy-button { - color: var(--blue-500); + color: rgb(var(--tone-blue-500)); background-color: var(--transparent); } %copy-button::before { @extend %with-copy-action-mask, %as-pseudo; - background-color: var(--gray-500); + background-color: rgb(var(--tone-gray-500)); } %copy-button::after { - background-color: var(--gray-050); + background-color: rgb(var(--tone-gray-050)); } %copy-button:hover:not(:disabled):not(:active), %copy-button:focus { - color: var(--blue-500); - background-color: var(--gray-050); + color: rgb(var(--tone-blue-500)); + background-color: rgb(var(--tone-gray-050)); } %copy-button:hover::before { - background-color: var(--blue-500); + background-color: rgb(var(--tone-blue-500)); } %copy-button:active { - background-color: var(--gray-200); + background-color: rgb(var(--tone-gray-200)); } diff --git a/ui/packages/consul-ui/app/components/empty-state/skin.scss b/ui/packages/consul-ui/app/components/empty-state/skin.scss index 70177f20a..9e09d9368 100644 --- a/ui/packages/consul-ui/app/components/empty-state/skin.scss +++ b/ui/packages/consul-ui/app/components/empty-state/skin.scss @@ -1,6 +1,6 @@ %empty-state { - color: $gray-500; - background-color: $gray-010; + color: rgb(var(--tone-gray-500)); + background-color: rgb(var(--tone-gray-010)); } %empty-state-header { border-bottom: none; diff --git a/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss b/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss index e17189cb6..297a60de3 100644 --- a/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss +++ b/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss @@ -1,7 +1,7 @@ %expanded-single-select { - border: $decor-border-100; - border-color: $gray-300; - border-radius: $decor-radius-100; + border: var(--decor-border-100); + border-color: rgb(var(--tone-gray-300)); + border-radius: var(--decor-radius-100); } %expanded-single-select label { cursor: pointer; @@ -9,10 +9,10 @@ %expanded-single-select input[type='radio']:checked + *, %expanded-single-select input[type='radio']:hover + *, %expanded-single-select input[type='radio']:focus + * { - box-shadow: $decor-elevation-300; + box-shadow: var(--decor-elevation-300); } %expanded-single-select input[type='radio']:checked + *, %expanded-single-select input[type='radio']:hover + *, %expanded-single-select input[type='radio']:focus + * { - background-color: $white; + background-color: rgb(var(--white)); } diff --git a/ui/packages/consul-ui/app/components/filter-bar/skin.scss b/ui/packages/consul-ui/app/components/filter-bar/skin.scss index af5fa5003..ba9429903 100644 --- a/ui/packages/consul-ui/app/components/filter-bar/skin.scss +++ b/ui/packages/consul-ui/app/components/filter-bar/skin.scss @@ -1,14 +1,14 @@ .filter-bar { & { - background-color: $gray-010; - border-bottom: $decor-border-100; - border-color: $gray-200; + background-color: rgb(var(--tone-gray-010)); + border-bottom: var(--decor-border-100); + border-color: rgb(var(--tone-gray-200)); } .filters, .sort { .popover-menu > [type='checkbox']:checked + label button { - color: $blue-500; - background-color: $gray-100; + color: rgb(var(--tone-blue-500)); + background-color: rgb(var(--tone-gray-100)); } } } diff --git a/ui/packages/consul-ui/app/components/flash-message/index.scss b/ui/packages/consul-ui/app/components/flash-message/index.scss index 19b827cb7..1928cdd16 100644 --- a/ui/packages/consul-ui/app/components/flash-message/index.scss +++ b/ui/packages/consul-ui/app/components/flash-message/index.scss @@ -12,7 +12,7 @@ /* flash message usage we should be able to remove this */ %flash-message p.exists strong::before { @extend %with-cancel-square-fill-mask; - color: $red-500; + color: rgb(var(--tone-red-500)); } %flash-message p.exists { @extend %frame-red-500; diff --git a/ui/packages/consul-ui/app/components/flash-message/skin.scss b/ui/packages/consul-ui/app/components/flash-message/skin.scss index 9503f62d5..4d5274de9 100644 --- a/ui/packages/consul-ui/app/components/flash-message/skin.scss +++ b/ui/packages/consul-ui/app/components/flash-message/skin.scss @@ -1,21 +1,21 @@ %flash-message p { border-width: 1px; - border-radius: $decor-radius-100; + border-radius: var(--decor-radius-100); } %flash-message p strong::before { @extend %as-pseudo; } %flash-message p.success strong::before { @extend %with-check-circle-fill-mask; - color: $green-500; + color: rgb(var(--tone-green-500)); } %flash-message p.warning strong::before { @extend %with-alert-triangle-mask; - color: $orange-500; + color: rgb(var(--tone-orange-500)); } %flash-message p.error strong::before { @extend %with-cancel-square-fill-mask; - color: $red-500; + color: rgb(var(--tone-red-500)); } %flash-message p.success { @extend %frame-green-500; diff --git a/ui/packages/consul-ui/app/components/form-elements/skin.scss b/ui/packages/consul-ui/app/components/form-elements/skin.scss index 32cf2916b..8528e121d 100644 --- a/ui/packages/consul-ui/app/components/form-elements/skin.scss +++ b/ui/packages/consul-ui/app/components/form-elements/skin.scss @@ -1,9 +1,9 @@ %form-element-text-input { -moz-appearance: none; -webkit-appearance: none; - box-shadow: inset $decor-elevation-100; - border-radius: $decor-radius-100; - border: $decor-border-100; + box-shadow: inset var(--decor-elevation-100); + border-radius: var(--decor-radius-100); + border: var(--decor-border-100); outline: none; } textarea:disabled + .CodeMirror, @@ -14,21 +14,21 @@ textarea:disabled + .CodeMirror, %form fieldset > p, %form-element-note, %form-element-text-input::placeholder { - color: $gray-400; + color: rgb(var(--tone-gray-400)); } %form-element-error > input, %form-element-error > textarea { - border-color: var(--decor-error-500, $red-500) !important; + border-color: var(--decor-error-500, rgb(var(--tone-red-500))) !important; } %form-element-text-input { - color: $gray-500; - border-color: $gray-300; + color: rgb(var(--tone-gray-500)); + border-color: rgb(var(--tone-gray-300)); } %form-element-text-input-hover { - border-color: $gray-500; + border-color: rgb(var(--tone-gray-500)); } %form-element-text-input-focus { - border-color: var(--typo-action-500, $blue-500); + border-color: var(--typo-action-500, rgb(var(--tone-blue-500))); } %form-element-label { color: var(--typo-contrast-999, inherit); diff --git a/ui/packages/consul-ui/app/components/freetext-filter/skin.scss b/ui/packages/consul-ui/app/components/freetext-filter/skin.scss index 26d51da71..ec2336774 100644 --- a/ui/packages/consul-ui/app/components/freetext-filter/skin.scss +++ b/ui/packages/consul-ui/app/components/freetext-filter/skin.scss @@ -1,15 +1,15 @@ .freetext-filter { & { - border: $decor-border-100; - border-radius: $decor-radius-100; + border: var(--decor-border-100); + border-radius: var(--decor-radius-100); - background-color: $white; - border-color: $gray-200; - color: $gray-400; + background-color: rgb(var(--white)); + border-color: rgb(var(--tone-gray-200)); + color: rgb(var(--tone-gray-400)); } &:hover, &:hover * { - border-color: $gray-400; + border-color: rgb(var(--tone-gray-400)); } & *, &_input::placeholder { @@ -36,14 +36,14 @@ @extend %with-search-mask; } .popover-menu { - background-color: $gray-050; - color: $gray-800; + background-color: rgb(var(--tone-gray-050)); + color: rgb(var(--tone-gray-800)); } .popover-menu { border-left: 1px solid; border-color: inherit; } .popover-menu > [type='checkbox']:checked + label button { - background-color: $gray-200; + background-color: rgb(var(--tone-gray-200)); } } diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss index baa367f34..5142d8780 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss @@ -7,7 +7,7 @@ display: none; } [role='banner'] a svg { - fill: var(--brand-600); + fill: rgb(var(--brand-600)); } .docs-link a::after { @extend %with-docs-mask, %as-pseudo; @@ -20,7 +20,7 @@ } .acls-separator span { @extend %led-icon; - color: $red-500; + color: rgb(var(--tone-red-500)); display: inline-block; position: relative; top: 2px; diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx b/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx index f39a689d9..2cf875988 100644 --- a/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx @@ -202,11 +202,11 @@ dl { } .lock-delay::before { @extend %with-delay-mask, %as-pseudo; - color: var(--gray-700); + color: rgb(var(--tone-gray-700)); } .ttl::before { @extend %with-history-mask, %as-pseudo; - color: var(--blue-500); + color: rgb(var(--tone-blue-500)); } .service-identity { @extend %badge; diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss b/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss index f8c365dce..22efa4535 100644 --- a/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss @@ -4,11 +4,11 @@ } .lock-delay::before { @extend %with-delay-mask, %as-pseudo; - color: var(--gray-700); + color: rgb(var(--tone-gray-700)); } .ttl::before { @extend %with-history-mask, %as-pseudo; - color: var(--blue-500); + color: rgb(var(--tone-blue-500)); } .service-identity { @extend %badge; diff --git a/ui/packages/consul-ui/app/components/icon-definition/index.scss b/ui/packages/consul-ui/app/components/icon-definition/index.scss index 088b4df18..9595850e5 100644 --- a/ui/packages/consul-ui/app/components/icon-definition/index.scss +++ b/ui/packages/consul-ui/app/components/icon-definition/index.scss @@ -8,27 +8,27 @@ %icon-definition.passing dt::before, %composite-row-header .passing dd::before { @extend %with-check-circle-fill-mask, %as-pseudo; - color: $green-500; + color: rgb(var(--tone-green-500)); } %icon-definition.warning dt::before, %composite-row-header .warning dd::before { @extend %with-alert-triangle-mask, %as-pseudo; - color: $orange-500; + color: rgb(var(--tone-orange-500)); } %icon-definition.critical dt::before, %composite-row-header .critical dd::before { @extend %with-cancel-square-fill-mask, %as-pseudo; - color: $red-500; + color: rgb(var(--tone-red-500)); } %icon-definition.empty dt::before, %composite-row-header .empty dd::before { @extend %with-minus-square-fill-mask, %as-pseudo; - color: $gray-500; + color: rgb(var(--tone-gray-500)); } %composite-row-header [rel='me'] dd::before { @extend %with-check-circle-fill-mask, %as-pseudo; - color: $blue-500; + color: rgb(var(--tone-blue-500)); } %icon-definition.node dt::before { diff --git a/ui/packages/consul-ui/app/components/informed-action/skin.scss b/ui/packages/consul-ui/app/components/informed-action/skin.scss index 266eb5340..de092e973 100644 --- a/ui/packages/consul-ui/app/components/informed-action/skin.scss +++ b/ui/packages/consul-ui/app/components/informed-action/skin.scss @@ -1,13 +1,13 @@ %informed-action { & { - border-radius: $decor-radius-200; - border: $decor-border-100; - border-color: $gray-300; - background-color: $white; + border-radius: var(--decor-radius-200); + border: var(--decor-border-100); + border-color: rgb(var(--tone-gray-300)); + background-color: rgb(var(--white)); } > div { - border-top-left-radius: $decor-radius-200; - border-top-right-radius: $decor-radius-200; + border-top-left-radius: var(--decor-radius-200); + border-top-right-radius: var(--decor-radius-200); cursor: default; } header { @@ -18,52 +18,52 @@ } p { @extend %p2; - color: $black; + color: var(--black); } > ul { list-style: none; } > ul > li > *:hover, > ul > li > *:focus { - background-color: $gray-100; + background-color: rgb(var(--tone-gray-100)); } /* variants */ &.info { header { - color: $blue-700; + color: rgb(var(--tone-blue-700)); } header::before { @extend %with-info-circle-fill-mask, %as-pseudo; - background-color: $blue-500; + background-color: rgb(var(--tone-blue-500)); margin-right: 5px; } > div { - background-color: $blue-010; + background-color: rgb(var(--tone-blue-010)); } } &.dangerous { header { - color: $red-700; + color: rgb(var(--tone-red-700)); } header::before { @extend %with-alert-triangle-mask, %as-pseudo; - background-color: $red-500; + background-color: rgb(var(--tone-red-500)); } > div { - background-color: $red-010; + background-color: rgb(var(--tone-red-010)); } } &.warning { header { - color: $orange-700; + color: rgb(var(--tone-orange-700)); } header::before { @extend %with-alert-triangle-mask, %as-pseudo; - background-color: $yellow-500; + background-color: rgb(var(--tone-yellow-500)); margin-right: 5px; } > div { - background-color: $yellow-050; + background-color: rgb(var(--tone-yellow-050)); } } /* brands */ @@ -74,7 +74,7 @@ } /**/ > ul > .action > * { - color: $blue-500; + color: rgb(var(--tone-blue-500)); } > ul > .dangerous > * { @extend %frame-red-300; diff --git a/ui/packages/consul-ui/app/components/inline-alert/skin.scss b/ui/packages/consul-ui/app/components/inline-alert/skin.scss index dee30ebc7..a2bf0d982 100644 --- a/ui/packages/consul-ui/app/components/inline-alert/skin.scss +++ b/ui/packages/consul-ui/app/components/inline-alert/skin.scss @@ -12,7 +12,7 @@ color: inherit; } %inline-alert-error { - color: $color-failure; + color: rgb(var(--color-failure)); } %inline-alert::before { font-size: 14px; @@ -22,15 +22,15 @@ } %inline-alert-success::before { @extend %with-check-circle-fill-mask; - color: $green-500; + color: rgb(var(--tone-green-500)); } %inline-alert-error::before { @extend %with-cancel-square-fill-mask; - color: $red-500; + color: rgb(var(--tone-red-500)); } %inline-alert-warning::before { @extend %with-alert-triangle-mask; - color: $orange-500; + color: rgb(var(--tone-orange-500)); /* the warning triangle always looks */ /* too low just because its a triangle */ /* this tweak make it look better */ @@ -38,5 +38,5 @@ } %inline-alert-info::before { @extend %with-info-circle-fill-mask; - color: $blue-500; + color: rgb(var(--tone-blue-500)); } diff --git a/ui/packages/consul-ui/app/components/inline-code/skin.scss b/ui/packages/consul-ui/app/components/inline-code/skin.scss index c1a0cfd40..3a013be65 100644 --- a/ui/packages/consul-ui/app/components/inline-code/skin.scss +++ b/ui/packages/consul-ui/app/components/inline-code/skin.scss @@ -1,6 +1,6 @@ %inline-code { border: 1px solid; - color: var(--brand-600, inherit); - background-color: var(--gray-050); - border-color: var(--gray-200); + color: var(rgb(var(--brand-600)), inherit); + background-color: rgb(var(--tone-gray-050)); + border-color: rgb(var(--tone-gray-200)); } diff --git a/ui/packages/consul-ui/app/components/list-collection/skin.scss b/ui/packages/consul-ui/app/components/list-collection/skin.scss index f94cba340..e6e1632c4 100644 --- a/ui/packages/consul-ui/app/components/list-collection/skin.scss +++ b/ui/packages/consul-ui/app/components/list-collection/skin.scss @@ -1,11 +1,11 @@ %list-collection > ul { border-top: 1px solid; - border-color: var(--gray-200); + border-color: rgb(var(--tone-gray-200)); } %list-collection-partial-button { cursor: pointer; - background-color: var(--gray-050); - color: var(--blue-500); + background-color: rgb(var(--tone-gray-050)); + color: rgb(var(--tone-blue-500)); } %list-collection-partial-button::after { @extend %with-chevron-up-mask, %as-pseudo; diff --git a/ui/packages/consul-ui/app/components/list-row/skin.scss b/ui/packages/consul-ui/app/components/list-row/skin.scss index 9c79bafdc..12d6ed6fd 100644 --- a/ui/packages/consul-ui/app/components/list-row/skin.scss +++ b/ui/packages/consul-ui/app/components/list-row/skin.scss @@ -1,30 +1,30 @@ %list-row { list-style-type: none; - border: $decor-border-100; - border-top-color: $transparent; - border-bottom-color: $gray-200; - border-right-color: $transparent; - border-left-color: $transparent; + border: var(--decor-border-100); + border-top-color: var(--transparent); + border-bottom-color: rgb(var(--tone-gray-200)); + border-right-color: var(--transparent); + border-left-color: var(--transparent); } %list-row-intent { - border-color: $gray-200; + border-color: rgb(var(--tone-gray-200)); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - border-top-color: $transparent; + border-top-color: var(--transparent); cursor: pointer; } %list-row-header { - color: $black; + color: var(--black); } %list-row-header * { color: inherit; } %list-row-detail { - color: $gray-500; + color: rgb(var(--tone-gray-500)); } %list-row-detail a { color: inherit; } %list-row-detail a:hover { - color: $color-action; + color: rgb(var(--color-action)); text-decoration: underline; } diff --git a/ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss b/ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss index 96e21cf93..2b789d42e 100644 --- a/ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss +++ b/ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss @@ -1,3 +1,3 @@ %main-header-horizontal::before { - background-color: var(--gray-000); + background-color: rgb(var(--tone-gray-000)); } diff --git a/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss b/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss index 10506efc9..4f3bc061c 100644 --- a/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss +++ b/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss @@ -1,5 +1,5 @@ %main-nav-horizontal-action { - border-radius: $decor-radius-200; + border-radius: var(--decor-radius-200); cursor: pointer; } %main-nav-horizontal-action > a { @@ -16,11 +16,11 @@ cursor: pointer; } %main-nav-horizontal-toggle-button::before { - background-color: var(--gray-800); + background-color: rgb(var(--tone-gray-800)); } %main-nav-horizontal-action, %main-nav-horizontal-action-intent, %main-nav-horizontal-action-active { - color: var(--gray-600); + color: rgb(var(--tone-gray-600)); } /**/ diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx b/ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx index 9359a4831..12039d3bb 100644 --- a/ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx +++ b/ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx @@ -65,7 +65,7 @@ you need to define a different ancestor for a containing block you can use /* a transform is required to mark this element as the containing block */ /* for hoisting, otherwise the viewport is the containing block */ transform: translate(0, 0); - background-color: var(--gray-600); + background-color: rgb(var(--tone-gray-600)); padding-top: 64px; } ``` diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss index 21b350712..8d8a8e3a3 100644 --- a/ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss +++ b/ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss @@ -15,7 +15,7 @@ /* a transform is required to mark this element as the containing block */ /* for hoisting, otherwise the viewport is the containing block */ transform: translate(0, 0); - background-color: var(--gray-600); + background-color: rgb(var(--tone-gray-600)); padding-top: 64px; } // TODO: Reduce the need for these debug overrides diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss index ab2ab88f8..9a55c3b40 100644 --- a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss +++ b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss @@ -30,14 +30,14 @@ border-top-right-radius: 0; } %main-nav-vertical .popover-menu > label > button { - border: $decor-border-100; - border-color: var(--gray-500); - color: var(--gray-999); + border: var(--decor-border-100); + border-color: rgb(var(--tone-gray-500)); + color: rgb(var(--tone-gray-999)); width: calc(100% - 20px); z-index: 100; text-align: left; padding: 10px; - border-radius: $decor-radius-100; + border-radius: var(--decor-radius-100); } %main-nav-vertical .popover-menu > label > button::after { float: right; diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss index 96842a662..fccb9cb9b 100644 --- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss +++ b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss @@ -1,7 +1,7 @@ %main-nav-vertical-action { cursor: pointer; - border-right: $decor-border-400; - border-color: $transparent; + border-right: var(--decor-border-400); + border-color: var(--transparent); @extend %p1; } %main-nav-vertical-action > a { @@ -11,7 +11,7 @@ %main-nav-vertical [role='separator'] { @extend %p3; text-transform: uppercase; - font-weight: $typo-weight-medium; + font-weight: var(--typo-weight-medium); } %main-nav-vertical-action-intent { text-decoration: underline; @@ -20,25 +20,25 @@ text-decoration: none; } %main-nav-vertical { - background-color: var(--gray-050); - color: var(--gray-700); + background-color: rgb(var(--tone-gray-050)); + color: rgb(var(--tone-gray-700)); } %main-nav-vertical li:not([role='separator']) > span { - color: var(--gray-300); + color: rgb(var(--tone-gray-300)); } %main-nav-vertical [role='separator'] { - color: var(--gray-600); + color: rgb(var(--tone-gray-600)); } %main-nav-vertical-action { - color: var(--gray-800); + color: rgb(var(--tone-gray-800)); } %main-nav-vertical-action-intent, %main-nav-vertical-action-active { - color: var(--gray-999); + color: rgb(var(--tone-gray-999)); } %main-nav-vertical-action-active { - background-color: var(--gray-150); - border-color: var(--gray-999); + background-color: rgb(var(--tone-gray-150)); + border-color: rgb(var(--tone-gray-999)); } %main-nav-vertical .popover-menu[aria-label]::before { content: attr(aria-label); @@ -48,17 +48,17 @@ } %main-nav-vertical .is-local span:last-of-type { @extend %pill-200; - color: var(--gray-000); - background-color: var(--gray-500); + color: rgb(var(--tone-gray-000)); + background-color: rgb(var(--tone-gray-500)); } %main-nav-vertical .nspaces .menu-panel > div { - background-color: var(--gray-050); - color: var(--gray-999); + background-color: rgb(var(--tone-gray-050)); + color: rgb(var(--tone-gray-999)); padding-left: 36px; } %main-nav-vertical .nspaces .menu-panel > div::before { @extend %with-info-circle-fill-mask, %as-pseudo; - color: $blue-500; + color: rgb(var(--tone-blue-500)); /* sizes the icon not the text */ font-size: 1.1em; } diff --git a/ui/packages/consul-ui/app/components/menu-panel/skin.scss b/ui/packages/consul-ui/app/components/menu-panel/skin.scss index 998a39a8f..aff64474c 100644 --- a/ui/packages/consul-ui/app/components/menu-panel/skin.scss +++ b/ui/packages/consul-ui/app/components/menu-panel/skin.scss @@ -1,13 +1,13 @@ %menu-panel { - border: $decor-border-100; - border-radius: $decor-radius-200; - box-shadow: $decor-elevation-600; + border: var(--decor-border-100); + border-radius: var(--decor-radius-200); + box-shadow: var(--decor-elevation-600); } %menu-panel > ul > li { list-style-type: none; } %menu-panel dt { - font-weight: $typo-weight-bold; + font-weight: var(--typo-weight-bold); } %menu-panel dl, %menu-panel-header { @@ -16,33 +16,33 @@ %menu-panel-separator { @extend %p3; text-transform: uppercase; - font-weight: $typo-weight-medium; + font-weight: var(--typo-weight-medium); } %menu-panel dt span { - font-weight: $typo-weight-normal; + font-weight: var(--typo-weight-normal); } %menu-panel-header + ul, %menu-panel-separator:not(:first-child) { - border-top: $decor-border-100; + border-top: var(--decor-border-100); } %menu-panel .is-active > *::after { @extend %with-check-plain-mask, %as-pseudo; } %menu-panel { - border-color: var(--gray-300); - background-color: var(--gray-000); + border-color: rgb(var(--tone-gray-300)); + background-color: rgb(var(--tone-gray-000)); } %menu-panel dt, %menu-panel dd { - color: var(--gray-800); + color: rgb(var(--tone-gray-800)); } %menu-panel dt span { - color: var(--gray-600); + color: rgb(var(--tone-gray-600)); } %menu-panel-separator { - color: var(--gray-600); + color: rgb(var(--tone-gray-600)); } %menu-panel-header + ul, %menu-panel-separator:not(:first-child) { - border-color: var(--gray-300); + border-color: rgb(var(--tone-gray-300)); } diff --git a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss index 867ea46d6..171752150 100644 --- a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss +++ b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss @@ -1,28 +1,28 @@ %modal-dialog.warning header { - background-color: $yellow-050; - border-color: $yellow-500; - color: $yellow-800; + background-color: rgb(var(--tone-yellow-050)); + border-color: rgb(var(--tone-yellow-500)); + color: rgb(var(--tone-yellow-800)); } %modal-dialog.warning header > *:not(label) { - font-size: $typo-size-500; - font-weight: $typo-weight-semibold; + font-size: var(--typo-size-500); + font-weight: var(--typo-weight-semibold); } %modal-dialog.warning header::before { @extend %with-alert-triangle-mask, %as-pseudo; - color: $yellow-500; + color: rgb(var(--tone-yellow-500)); float: left; margin-top: 2px; margin-right: 3px; } %modal-dialog-overlay { - background-color: rgba($white, 0.9); + background-color: rgb(var(--white) / 90%); } %modal-window { - box-shadow: $decor-elevation-800; + box-shadow: var(--decor-elevation-800); } %modal-window { /*%frame-gray-000*/ - background-color: var(--gray-000); + background-color: rgb(var(--tone-gray-000)); } %modal-window > footer, %modal-window > header { @@ -35,7 +35,7 @@ .modal-dialog-body, %modal-window > footer, %modal-window > header { - border-color: var(--gray-300); + border-color: rgb(var(--tone-gray-300)); } .modal-dialog-body { border-style: solid; @@ -50,9 +50,9 @@ %modal-window > header [data-a11y-dialog-hide] { @extend %with-cancel-plain-icon; cursor: pointer; - border: $decor-border-100; + border: var(--decor-border-100); /*%frame-gray-050??*/ - background-color: var(--gray-050); - border-color: var(--gray-300); - border-radius: $decor-radius-100; + background-color: rgb(var(--tone-gray-050)); + border-color: rgb(var(--tone-gray-300)); + border-radius: var(--decor-radius-100); } diff --git a/ui/packages/consul-ui/app/components/more-popover-menu/index.scss b/ui/packages/consul-ui/app/components/more-popover-menu/index.scss index 06cb20f75..4e6b0ba59 100644 --- a/ui/packages/consul-ui/app/components/more-popover-menu/index.scss +++ b/ui/packages/consul-ui/app/components/more-popover-menu/index.scss @@ -14,15 +14,15 @@ padding: 7px; } %more-popover-menu-trigger > * { - background-color: $transparent; - border-radius: $decor-radius-100; + background-color: var(--transparent); + border-radius: var(--decor-radius-100); width: 30px; height: 30px; font-size: 0; } %more-popover-menu-trigger > *::after { @extend %with-more-horizontal-mask, %as-pseudo; - background-color: $gray-900; + background-color: rgb(var(--tone-gray-900)); width: 16px; height: 16px; position: absolute; @@ -32,9 +32,9 @@ margin-left: -8px; } %more-popover-menu-trigger > *:active { - background-color: $gray-100; + background-color: rgb(var(--tone-gray-100)); } %more-popover-menu-trigger > *:hover, %more-popover-menu-trigger > *:focus { - background-color: $gray-050; + background-color: rgb(var(--tone-gray-050)); } diff --git a/ui/packages/consul-ui/app/components/notice/skin.scss b/ui/packages/consul-ui/app/components/notice/skin.scss index d1f2c6229..5d9927247 100644 --- a/ui/packages/consul-ui/app/components/notice/skin.scss +++ b/ui/packages/consul-ui/app/components/notice/skin.scss @@ -1,7 +1,7 @@ %notice { - border-radius: $decor-radius-100; - border: $decor-border-100; - color: $black; + border-radius: var(--decor-radius-100); + border: var(--decor-border-100); + color: var(--black); } %notice::before { @extend %as-pseudo; @@ -11,7 +11,7 @@ } %notice footer * { @extend %p3; - font-weight: $typo-weight-bold; + font-weight: var(--typo-weight-bold); } %notice-success, %notice-info, @@ -21,51 +21,51 @@ @extend %notice; } %notice-success { - background-color: $green-050; - border-color: $green-500; + background-color: rgb(var(--tone-green-050)); + border-color: rgb(var(--tone-green-500)); } %notice-info { - border-color: $blue-100; - background-color: $gray-010; + border-color: rgb(var(--tone-blue-100)); + background-color: rgb(var(--tone-gray-010)); } %notice-info header * { - color: $blue-700; + color: rgb(var(--tone-blue-700)); } %notice-highlight { - background-color: $gray-050; - border-color: $gray-300; + background-color: rgb(var(--tone-gray-050)); + border-color: rgb(var(--tone-gray-300)); } %notice-info header * { - color: $gray-700; + color: rgb(var(--tone-gray-700)); } %notice-warning { - border-color: $yellow-100; - background-color: $yellow-050; + border-color: rgb(var(--tone-yellow-100)); + background-color: rgb(var(--tone-yellow-050)); } %notice-warning header * { - color: $yellow-800; + color: rgb(var(--tone-yellow-800)); } %notice-error { - background-color: $red-050; - border-color: $red-500; + background-color: rgb(var(--tone-red-050)); + border-color: rgb(var(--tone-red-500)); } %notice-success::before { @extend %with-check-circle-fill-mask; - color: $green-500; + color: rgb(var(--tone-green-500)); } %notice-info::before { @extend %with-info-circle-fill-mask; - color: $blue-500; + color: rgb(var(--tone-blue-500)); } %notice-highlight::before { @extend %with-star-fill-mask; - color: $yellow-500; + color: rgb(var(--tone-yellow-500)); } %notice-warning::before { @extend %with-alert-triangle-mask; - color: $orange-500; + color: rgb(var(--tone-orange-500)); } %notice-error::before { @extend %with-cancel-square-fill-mask; - color: $red-500; + color: rgb(var(--tone-red-500)); } diff --git a/ui/packages/consul-ui/app/components/overlay/none.scss b/ui/packages/consul-ui/app/components/overlay/none.scss index 039f0ffcc..e4084cc8b 100644 --- a/ui/packages/consul-ui/app/components/overlay/none.scss +++ b/ui/packages/consul-ui/app/components/overlay/none.scss @@ -26,9 +26,9 @@ transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); } & { - background-color: $white; - border-radius: $decor-radius-100; - box-shadow: $decor-elevation-400; + background-color: rgb(var(--white)); + border-radius: var(--decor-radius-100); + box-shadow: var(--decor-elevation-400); } .tippy-arrow { @extend %overlay-tail; diff --git a/ui/packages/consul-ui/app/components/overlay/square-tail.scss b/ui/packages/consul-ui/app/components/overlay/square-tail.scss index 2cd5136b6..264734528 100644 --- a/ui/packages/consul-ui/app/components/overlay/square-tail.scss +++ b/ui/packages/consul-ui/app/components/overlay/square-tail.scss @@ -4,11 +4,11 @@ left: calc(0px - (var(--size) / 2)) !important; } .tippy-arrow::before { - background-color: $white; + background-color: rgb(var(--white)); width: calc(1px + var(--size)); height: calc(1px + var(--size)); - border: $decor-border-100; - border-color: $gray-300; + border: var(--decor-border-100); + border-color: rgb(var(--tone-gray-300)); } // potential icon .tippy-arrow::after { @@ -23,8 +23,8 @@ border-bottom-left-radius: 0 !important; } .tippy-arrow::before { - border-bottom-left-radius: $decor-radius-200; - border-bottom-right-radius: $decor-radius-200; + border-bottom-left-radius: var(--decor-radius-200); + border-bottom-right-radius: var(--decor-radius-200); border-top: 0 !important; } .tippy-arrow::after { @@ -39,8 +39,8 @@ border-top-left-radius: 0 !important; } .tippy-arrow::before { - border-top-left-radius: $decor-radius-200; - border-top-right-radius: $decor-radius-200; + border-top-left-radius: var(--decor-radius-200); + border-top-right-radius: var(--decor-radius-200); border-bottom: 0 !important; } .tippy-arrow::after { diff --git a/ui/packages/consul-ui/app/components/pill/skin.scss b/ui/packages/consul-ui/app/components/pill/skin.scss index 5b53403b4..f58e59970 100644 --- a/ui/packages/consul-ui/app/components/pill/skin.scss +++ b/ui/packages/consul-ui/app/components/pill/skin.scss @@ -1,3 +1,3 @@ %pill { - border-radius: $decor-radius-100; + border-radius: var(--decor-radius-100); } diff --git a/ui/packages/consul-ui/app/components/popover-select/index.scss b/ui/packages/consul-ui/app/components/popover-select/index.scss index a7212c2ae..045978937 100644 --- a/ui/packages/consul-ui/app/components/popover-select/index.scss +++ b/ui/packages/consul-ui/app/components/popover-select/index.scss @@ -23,19 +23,19 @@ %popover-select .value-passing button::before { @extend %with-check-circle-fill-mask, %as-pseudo; - color: $green-500; + color: rgb(var(--tone-green-500)); } %popover-select .value-warning button::before { @extend %with-alert-triangle-mask, %as-pseudo; - color: $orange-500; + color: rgb(var(--tone-orange-500)); } %popover-select .value-critical button::before { @extend %with-cancel-square-fill-mask, %as-pseudo; - color: $red-500; + color: rgb(var(--tone-red-500)); } %popover-select .value-empty button::before { @extend %with-minus-square-fill-mask, %as-pseudo; - color: $gray-400; + color: rgb(var(--tone-gray-400)); } %popover-select.type-source li button { text-transform: capitalize; diff --git a/ui/packages/consul-ui/app/components/radio-card/skin.scss b/ui/packages/consul-ui/app/components/radio-card/skin.scss index 21417a492..c52a02605 100644 --- a/ui/packages/consul-ui/app/components/radio-card/skin.scss +++ b/ui/packages/consul-ui/app/components/radio-card/skin.scss @@ -1,25 +1,25 @@ %radio-card { - border: $decor-border-100; - border-radius: $decor-radius-100; - border-color: $gray-200; - box-shadow: $decor-elevation-400; - color: $gray-500; + border: var(--decor-border-100); + border-radius: var(--decor-radius-100); + border-color: rgb(var(--tone-gray-200)); + box-shadow: var(--decor-elevation-400); + color: rgb(var(--tone-gray-500)); cursor: pointer; } %radio-card.checked { - border-color: $blue-500; + border-color: rgb(var(--tone-blue-500)); } %radio-card > :first-child { - background-color: $gray-050; + background-color: rgb(var(--tone-gray-050)); } %radio-card.checked > :first-child { - background-color: $blue-050; + background-color: rgb(var(--tone-blue-050)); } %radio-card header { margin-bottom: 0.5em; } %radio-card header { - color: $black; + color: var(--black); } %radio-card-with-icon > :last-child { padding-left: 47px; diff --git a/ui/packages/consul-ui/app/components/search-bar/index.scss b/ui/packages/consul-ui/app/components/search-bar/index.scss index 588f5121d..99ec3cff0 100644 --- a/ui/packages/consul-ui/app/components/search-bar/index.scss +++ b/ui/packages/consul-ui/app/components/search-bar/index.scss @@ -1,8 +1,8 @@ .search-bar { &-status { & { - border-bottom: $decor-border-100; - border-bottom-color: $gray-200; + border-bottom: var(--decor-border-100); + border-bottom-color: rgb(var(--tone-gray-200)); } .remove-all button { @extend %anchor; @@ -10,16 +10,16 @@ li:not(.remove-all) { & { @extend %pill-200; - border: $decor-border-100; - border-color: $gray-200; - color: $gray-600; + border: var(--decor-border-100); + border-color: rgb(var(--tone-gray-200)); + color: rgb(var(--tone-gray-600)); } button { cursor: pointer; } button::before { @extend %with-cancel-plain-mask, %as-pseudo; - color: $gray-600; + color: rgb(var(--tone-gray-600)); margin-top: 1px; margin-right: 0.2rem; } diff --git a/ui/packages/consul-ui/app/components/secret-button/index.scss b/ui/packages/consul-ui/app/components/secret-button/index.scss index 7030f1f74..11e153b83 100644 --- a/ui/packages/consul-ui/app/components/secret-button/index.scss +++ b/ui/packages/consul-ui/app/components/secret-button/index.scss @@ -15,7 +15,7 @@ } %secret-button span::before { @extend %with-visibility-show-mask, %as-pseudo; - background-color: $gray-500; + background-color: rgb(var(--tone-gray-500)); } %secret-button input:checked + span::before { @extend %with-visibility-hide-mask; diff --git a/ui/packages/consul-ui/app/components/skip-links/skin.scss b/ui/packages/consul-ui/app/components/skip-links/skin.scss index 504a6cb9d..17c3dc400 100644 --- a/ui/packages/consul-ui/app/components/skip-links/skin.scss +++ b/ui/packages/consul-ui/app/components/skip-links/skin.scss @@ -1,7 +1,7 @@ %skip-links { - outline: 1px solid $white; - color: $white; - background-color: $blue-500; + outline: 1px solid rgb(var(--white)); + color: rgb(var(--white)); + background-color: rgb(var(--tone-blue-500)); } %skip-links button, %skip-links a { diff --git a/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss b/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss index dca7f138e..9ab9704cc 100644 --- a/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss +++ b/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss @@ -3,7 +3,7 @@ cursor: pointer; } %sliding-toggle label span::after { - border-radius: $decor-radius-full; + border-radius: var(--decor-radius-full); } %sliding-toggle label span::before { border-radius: 7px; @@ -15,16 +15,16 @@ @extend %sliding-toggle-negative; } %sliding-toggle label span { - color: $gray-900; + color: rgb(var(--tone-gray-900)); } %sliding-toggle label span::after { - background-color: $white; + background-color: rgb(var(--white)); } %sliding-toggle label input:checked + span::before, %sliding-toggle-negative label input + span::before { - background-color: $blue-500; + background-color: rgb(var(--tone-blue-500)); } %sliding-toggle label span::before, %sliding-toggle-negative label input:checked + span::before { - background-color: $gray-300; + background-color: rgb(var(--tone-gray-300)); } diff --git a/ui/packages/consul-ui/app/components/tab-nav/skin.scss b/ui/packages/consul-ui/app/components/tab-nav/skin.scss index fc1b8c92e..76f480d80 100644 --- a/ui/packages/consul-ui/app/components/tab-nav/skin.scss +++ b/ui/packages/consul-ui/app/components/tab-nav/skin.scss @@ -10,29 +10,29 @@ } %tab-nav { /* %frame-transparent-something */ - border-bottom: $decor-border-100; + border-bottom: var(--decor-border-100); } %with-animated-tab-selection ul::after, %tab-button { - border-bottom: $decor-border-300; + border-bottom: var(--decor-border-300); } %tab-nav { /* %frame-transparent-something */ - border-color: var(--gray-200); + border-color: rgb(var(--tone-gray-200)); } %tab-button { @extend %with-transition-500; transition-property: background-color, border-color; border-color: var(--transparent); - color: var(--gray-500); + color: rgb(var(--tone-gray-500)); } %tab-button-intent, %tab-button-active { /* %frame-gray-something */ - background-color: var(--gray-100); + background-color: rgb(var(--tone-gray-100)); } %tab-button-intent { - border-color: var(--gray-300); + border-color: rgb(var(--tone-gray-300)); } %tab-nav.animatable .selected a { border-color: var(--transparent) !important; diff --git a/ui/packages/consul-ui/app/components/table/index.scss b/ui/packages/consul-ui/app/components/table/index.scss index 027e47005..23a57f0a1 100644 --- a/ui/packages/consul-ui/app/components/table/index.scss +++ b/ui/packages/consul-ui/app/components/table/index.scss @@ -21,7 +21,7 @@ table.consul-metadata-list tbody tr:hover { %table th span::after { @extend %with-info-circle-outline-mask, %as-pseudo; - color: $gray-500; + color: rgb(var(--tone-gray-500)); margin-left: 4px; } %table tbody tr { @@ -31,12 +31,12 @@ table.consul-metadata-list tbody tr:hover { padding: 0; } %table tbody tr:hover { - box-shadow: $decor-elevation-300; + box-shadow: var(--decor-elevation-300); } %table td.folder::before { @extend %with-folder-outline-mask, %as-pseudo; - background-color: $gray-300; + background-color: rgb(var(--tone-gray-300)); margin-top: 1px; margin-right: 5px; } diff --git a/ui/packages/consul-ui/app/components/table/layout.scss b/ui/packages/consul-ui/app/components/table/layout.scss index 8b022e823..4858bce80 100644 --- a/ui/packages/consul-ui/app/components/table/layout.scss +++ b/ui/packages/consul-ui/app/components/table/layout.scss @@ -59,5 +59,5 @@ font-weight: normal; } %table tbody td em { - color: $gray-500; + color: rgb(var(--tone-gray-500)); } diff --git a/ui/packages/consul-ui/app/components/table/skin.scss b/ui/packages/consul-ui/app/components/table/skin.scss index 2d038d52e..6e8ff93d7 100644 --- a/ui/packages/consul-ui/app/components/table/skin.scss +++ b/ui/packages/consul-ui/app/components/table/skin.scss @@ -1,17 +1,17 @@ %table th, %table td { - border-bottom: $decor-border-100; + border-bottom: var(--decor-border-100); } %table th { - border-color: $gray-300; + border-color: rgb(var(--tone-gray-300)); } %table td { - border-color: $gray-200; - color: $gray-500; + border-color: rgb(var(--tone-gray-200)); + color: rgb(var(--tone-gray-500)); } %table th, %table td strong { - color: $gray-600; + color: rgb(var(--tone-gray-600)); } /* TODO: Add to native selector `tbody th` - will involve moving all * current th's to `thead th` and changing the templates @@ -19,7 +19,7 @@ */ %table a, %tbody-th { - color: $gray-900; + color: rgb(var(--tone-gray-900)); } %table td:first-child { @extend %tbody-th; diff --git a/ui/packages/consul-ui/app/components/tabular-details/skin.scss b/ui/packages/consul-ui/app/components/tabular-details/skin.scss index 87fa1a415..53def1879 100644 --- a/ui/packages/consul-ui/app/components/tabular-details/skin.scss +++ b/ui/packages/consul-ui/app/components/tabular-details/skin.scss @@ -6,22 +6,22 @@ border: 0; } %tabular-detail { - border: 1px solid $gray-300; - border-radius: $decor-radius-100; - box-shadow: $decor-elevation-600; + border: 1px solid rgb(var(--tone-gray-300)); + border-radius: var(--decor-radius-100); + box-shadow: var(--decor-elevation-600); margin-bottom: 20px; } %tabular-detail::before, %tabular-detail > div, %tabular-detail > label { - background-color: $white; + background-color: rgb(var(--white)); } %tabular-detail > label::before { transform: rotate(180deg); } // this is here as its a fake border %tabular-detail::before { - background: $gray-200; + background: rgb(var(--tone-gray-200)); content: ''; display: block; height: 1px; diff --git a/ui/packages/consul-ui/app/components/tabular-dl/skin.scss b/ui/packages/consul-ui/app/components/tabular-dl/skin.scss index 71de9caf5..5113a1be3 100644 --- a/ui/packages/consul-ui/app/components/tabular-dl/skin.scss +++ b/ui/packages/consul-ui/app/components/tabular-dl/skin.scss @@ -1,21 +1,21 @@ %tabular-dl { > dt:last-of-type, > dd:last-of-type { - border-color: var(--gray-300) !important; + border-color: rgb(var(--tone-gray-300)) !important; } dt, dd { - border-color: var(--gray-300) !important; - color: $black !important; + border-color: rgb(var(--tone-gray-300)) !important; + color: var(--black) !important; } dt { - font-weight: $typo-weight-bold; + font-weight: var(--typo-weight-bold); } dd .copy-button button::before { - background-color: $black; + background-color: var(--black); } dt.type + dd span::before { @extend %with-info-circle-outline-mask, %as-pseudo; - background-color: var(--gray-500); + background-color: rgb(var(--tone-gray-500)); } } diff --git a/ui/packages/consul-ui/app/components/tag-list/index.scss b/ui/packages/consul-ui/app/components/tag-list/index.scss index dfa435112..6ded1d9a3 100644 --- a/ui/packages/consul-ui/app/components/tag-list/index.scss +++ b/ui/packages/consul-ui/app/components/tag-list/index.scss @@ -8,7 +8,7 @@ td.tags { %tag-list dt::before { @extend %with-tag-mask, %as-pseudo; color: inherit; - color: var(--gray-500); + color: rgb(var(--tone-gray-500)); } %tag-list dd { @extend %csv-list; diff --git a/ui/packages/consul-ui/app/components/toggle-button/skin.scss b/ui/packages/consul-ui/app/components/toggle-button/skin.scss index d85580d36..7a05618ed 100644 --- a/ui/packages/consul-ui/app/components/toggle-button/skin.scss +++ b/ui/packages/consul-ui/app/components/toggle-button/skin.scss @@ -1,12 +1,12 @@ %toggle-button { - border-radius: $decor-radius-100; + border-radius: var(--decor-radius-100); cursor: pointer; } %toggle-button-intent { - background-color: $gray-050; + background-color: rgb(var(--tone-gray-050)); } %toggle-button-active { - background-color: $gray-100; + background-color: rgb(var(--tone-gray-100)); } %toggle-button:hover, %toggle-button:focus { diff --git a/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss b/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss index 3d112e4e5..619da5172 100644 --- a/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss +++ b/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss @@ -7,8 +7,8 @@ width: 12px; height: 12px; background: white; - border-top: 1px solid $gray-300; - border-right: 1px solid $gray-300; + border-top: 1px solid rgb(var(--tone-gray-300)); + border-right: 1px solid rgb(var(--tone-gray-300)); transform: rotate(-45deg); position: absolute; left: 16px; diff --git a/ui/packages/consul-ui/app/components/tooltip/index.scss b/ui/packages/consul-ui/app/components/tooltip/index.scss index 20e64e2aa..a7e308ad2 100644 --- a/ui/packages/consul-ui/app/components/tooltip/index.scss +++ b/ui/packages/consul-ui/app/components/tooltip/index.scss @@ -31,19 +31,19 @@ %tooltip-bubble { & { - background-color: $gray-700; - color: $white; + background-color: rgb(var(--tone-gray-700)); + color: rgb(var(--white)); } } %tooltip-tail { --size: 5px; & { - color: $gray-700; + color: rgb(var(--tone-gray-700)); width: calc(var(--size) * 2); height: calc(var(--size) * 2); } &::before { - border-color: $transparent; + border-color: var(--transparent); border-style: solid; } } diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss index be0df77f7..0212f144a 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss @@ -5,15 +5,15 @@ #upstream-container .topology-metrics-card, #downstream-container .topology-metrics-card { display: block; - color: $gray-700; + color: rgb(var(--tone-gray-700)); overflow: hidden; - background-color: $white; - border-radius: $decor-radius-100; - border: 1px solid $gray-200; + background-color: rgb(var(--white)); + border-radius: var(--decor-radius-100); + border: 1px solid rgb(var(--tone-gray-200)); p { padding: 12px 12px 0 12px; - font-size: $typo-size-500; - font-weight: $typo-weight-semibold; + font-size: var(--typo-size-500); + font-weight: var(--typo-weight-semibold); margin-bottom: 0 !important; } p.empty { @@ -26,7 +26,7 @@ margin-right: 8px; } dd { - color: $gray-700; + color: rgb(var(--tone-gray-700)); } span { margin-right: 8px; @@ -53,23 +53,23 @@ } .nspace dt::before, .health dt::before { - background-color: $gray-500; + background-color: rgb(var(--tone-gray-500)); } .passing::before { @extend %with-check-circle-fill-mask, %as-pseudo; - background-color: $green-500; + background-color: rgb(var(--tone-green-500)); } .warning::before { @extend %with-alert-triangle-mask, %as-pseudo; - background-color: $orange-500; + background-color: rgb(var(--tone-orange-500)); } .critical::before { @extend %with-cancel-square-fill-mask, %as-pseudo; - background-color: $red-500; + background-color: rgb(var(--tone-red-500)); } .empty::before { @extend %with-minus-square-fill-mask, %as-pseudo; - color: $gray-500; + color: rgb(var(--tone-gray-500)); } } .details { diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss index 07813c19d..b4102e081 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss @@ -2,7 +2,7 @@ > button { position: absolute; transform: translate(-50%, -50%); - background-color: $white; + background-color: rgb(var(--white)); padding: 1px 1px; &:hover { cursor: pointer; @@ -21,16 +21,16 @@ &.deny > button::before, &.deny .tippy-arrow::after { @extend %with-cancel-square-fill-mask, %as-pseudo; - background-color: $red-500; + background-color: rgb(var(--tone-red-500)); } &.l7 > button::before, &.l7 .tippy-arrow::after { @extend %with-layers-mask, %as-pseudo; - background-color: $gray-300; + background-color: rgb(var(--tone-gray-300)); } &.not-defined > button::before, &.not-defined .tippy-arrow::after { @extend %with-alert-triangle-mask, %as-pseudo; - color: $yellow-500; + color: rgb(var(--tone-yellow-500)); } } diff --git a/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss index 98ec4cced..abd3ed5f2 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss @@ -8,7 +8,7 @@ font-size: 0.875em; line-height: 1.5em; font-weight: normal; - border: 1px solid $gray-300; + border: 1px solid rgb(var(--tone-gray-300)); background: #fff; border-radius: 2px; box-sizing: border-box; @@ -19,7 +19,7 @@ font-weight: bold; font-size: 14px; color: #000; - border-bottom: 1px solid $gray-200; + border-bottom: 1px solid rgb(var(--tone-gray-200)); margin-bottom: 4px; text-align: center; } @@ -31,7 +31,7 @@ } .sparkline-tt-sum { - border-top: 1px solid $gray-200; + border-top: 1px solid rgb(var(--tone-gray-200)); margin-top: 4px; padding: 8px 10px 0 10px; } @@ -58,7 +58,7 @@ height: 12px; left: 15px; bottom: -7px; - border: 1px solid $gray-300; + border: 1px solid rgb(var(--tone-gray-300)); border-top: 0; border-left: 0; background: #fff; @@ -75,7 +75,7 @@ } h3 { - color: $gray-900; + color: rgb(var(--tone-gray-900)); font-size: 16px; } @@ -84,16 +84,16 @@ font-weight: 600; } dd { - color: $gray-500; + color: rgb(var(--tone-gray-500)); } } } .sparkline-key-link { - color: $gray-500; + color: rgb(var(--tone-gray-500)); } .sparkline-key-link:hover { - color: $blue-500; + color: rgb(var(--tone-blue-500)); } #metrics-container:hover .sparkline-key-link::before { @extend %with-info-circle-fill-mask, %as-pseudo; diff --git a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss index 32b82ac73..92d907c89 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss @@ -1,41 +1,41 @@ .topology-container { - color: $gray-700; + color: rgb(var(--tone-gray-700)); } // Columns/Containers & Lines #downstream-container, #metrics-container, #upstream-container { - border: 1px solid $gray-200; - border-radius: $decor-radius-100; + border: 1px solid rgb(var(--tone-gray-200)); + border-radius: var(--decor-radius-100); } #downstream-container, #upstream-container { - background-color: $gray-100; + background-color: rgb(var(--tone-gray-100)); } #downstream-container div:first-child { display: inline-flex; span::before { @extend %with-info-circle-outline-mask, %as-pseudo; - background-color: $gray-500; + background-color: rgb(var(--tone-gray-500)); } } // Metrics Container #metrics-container { div:first-child { - background-color: $white; + background-color: rgb(var(--white)); } .link { - background-color: $gray-100; + background-color: rgb(var(--tone-gray-100)); a { - color: $gray-700; + color: rgb(var(--tone-gray-700)); } a::before { - background-color: $gray-500; + background-color: rgb(var(--tone-gray-500)); } a:hover { - color: $color-action; + color: rgb(var(--color-action)); } .metrics-link::before { @extend %with-exit-mask, %as-pseudo; @@ -50,34 +50,34 @@ #downstream-lines svg, #upstream-lines svg { path { - fill: $transparent; + fill: var(--transparent); } circle { - fill: $white; + fill: rgb(var(--white)); } .allow-arrow { - fill: $gray-300; + fill: rgb(var(--tone-gray-300)); stroke-linejoin: round; } path, .allow-dot, .allow-arrow { - stroke: $gray-300; + stroke: rgb(var(--tone-gray-300)); stroke-width: 2; } path[data-permission='not-defined'] { stroke-dasharray: 4; } path[data-permission='deny'] { - stroke: $red-500; + stroke: rgb(var(--tone-red-500)); } .deny-dot { - stroke: $red-500; + stroke: rgb(var(--tone-red-500)); stroke-width: 2; } .deny-arrow { - fill: $red-500; - stroke: $red-500; + fill: rgb(var(--tone-red-500)); + stroke: rgb(var(--tone-red-500)); stroke-linejoin: round; } } diff --git a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss index 41436eff1..58943e192 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss @@ -5,7 +5,7 @@ justify-content: space-between; align-items: stretch; width: 100%; - border-top: 1px solid var(--gray-200); + border-top: 1px solid rgb(var(--tone-gray-200)); dl { display: flex; padding-bottom: 12px; @@ -15,7 +15,7 @@ line-height: 1.5em !important; } dd { - color: $gray-400 !important; + color: rgb(var(--tone-gray-400)) !important; } span { padding-bottom: 12px; diff --git a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss index 44968d8d8..287925d5e 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss @@ -2,14 +2,14 @@ .topology-metrics-status-loader { font-weight: normal; font-size: 0.875rem; - color: $gray-500; + color: rgb(var(--tone-gray-500)); text-align: center; margin: 0 auto !important; display: block; span::before { @extend %with-info-circle-outline-mask, %as-pseudo; - background-color: $gray-500; + background-color: rgb(var(--tone-gray-500)); } } diff --git a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss index 685b839bb..1de2f5c5c 100644 --- a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss @@ -1,142 +1,178 @@ -$steel-050: #f5f6f7; -$steel-100: #e1e4e7; -$steel-200: #cdd3d7; -$steel-300: #b9c1c7; -$steel-400: #a5b0b7; -$steel-500: #919fa8; -$steel-600: #77838a; -$steel-700: #5d666b; -$steel-800: #42494d; -$steel-900: #282c2e; -$magenta-050: #f9ebf2; -$magenta-100: #efc4d8; -$magenta-200: #e59ebe; -$magenta-300: #da77a4; -$magenta-400: #d0508a; -$magenta-500: #c62a71; -$magenta-600: #9e2159; -$magenta-700: #7d1a47; -$magenta-800: #5a1434; -$magenta-900: #360c1f; +:root { + /* vault */ + --steel-050: 245 246 247; + --steel-100: 225 228 231; + --steel-200: 205 211 215; + --steel-300: 185 193 199; + --steel-400: 165 176 183; + --steel-500: 145 159 168; + --steel-600: 119 131 138; + --steel-700: 93 102 107; + --steel-800: 66 73 77; + --steel-900: 40 44 46; -$rose-010: #fff2f8; -$rose-050: #fff2f8; -$rose-100: #f8d9e7; -$rose-200: #f8d9e7; -$rose-300: #e07eac; -$rose-400: #e07eac; -$rose-500: #ca2171; -$rose-600: #8e134a; -$rose-700: #8e134a; -$rose-800: #650d34; -$rose-900: #650d34; + /* consul */ + --magenta-050: 249 235 242; + --magenta-100: 239 196 216; + --magenta-200: 229 158 190; + --magenta-300: 218 119 164; + --magenta-400: 208 80 138; + --magenta-500: 198 42 113; + --magenta-600: 158 33 89; + --magenta-700: 125 26 71; + --magenta-800: 90 20 52; + --magenta-900: 54 12 31; -$cobalt-050: #f0f5ff; -$cobalt-100: #bfd4ff; -$cobalt-200: #8ab1ff; -$cobalt-300: #5b92ff; -$cobalt-400: #387aff; -$cobalt-500: #1563ff; -$cobalt-600: #0f4fd1; -$cobalt-700: #0e40a3; -$cobalt-800: #0a2d74; -$cobalt-900: #061b46; -$indigo-050: #eeedfc; -$indigo-100: #d5d2f7; -$indigo-200: #aea7f2; -$indigo-300: #8d83ed; -$indigo-400: #7568e8; -$indigo-500: #5c4ee5; -$indigo-600: #4c40bc; -$indigo-700: #3b3292; -$indigo-800: #2a2469; -$indigo-900: #1a163f; -$teal-050: #ebf8f3; -$teal-100: #c3ecdc; -$teal-200: #9bdfc5; -$teal-300: #74d3ae; -$teal-400: #4cc697; -$teal-500: #25ba81; -$teal-600: #1f996a; -$teal-700: #187753; -$teal-800: #11553b; -$teal-900: #0b3324; -$cyan-050: #e7f8ff; -$cyan-100: #b9ecff; -$cyan-200: #8be0ff; -$cyan-300: #5cd3ff; -$cyan-400: #2ec7ff; -$cyan-500: #00bbff; -$cyan-600: #009fd9; -$cyan-700: #0077a3; -$cyan-800: #005574; -$cyan-900: #003346; -$gray-010: #fbfbfc; -$gray-050: #f7f8fa; -$gray-100: #ebeef2; -$gray-150: #ebeef2; -$gray-200: #dce0e6; -$gray-300: #bac1cc; -$gray-400: #8e96a3; -$gray-500: #6f7682; -$gray-600: #626873; -$gray-700: #525761; -$gray-800: #373a42; -$gray-850: #2c2e33; -$gray-900: #1f2124; -$gray-950: #15171c; -$green-050: #ecf7ed; -$green-100: #c6e9c9; -$green-200: #a0dba5; -$green-300: #7acc81; -$green-400: #54be5d; -$green-500: #2eb039; -$green-600: #26912f; -$green-700: #1e7125; -$green-800: #15501a; -$green-900: #0d3010; -$blue-010: #fbfcff; -$blue-050: #f0f5ff; -$blue-100: #bfd4ff; -$blue-200: #8ab1ff; -$blue-300: #5b92ff; -$blue-400: #387aff; -$blue-500: #1563ff; -$blue-600: #0f4fd1; -$blue-700: #0e40a3; -$blue-800: #0a2d74; -$blue-900: #061b46; -$red-010: #fdfafb; -$red-050: #f9ecee; -$red-100: #efc7cc; -$red-200: #e5a2aa; -$red-300: #db7d88; -$red-400: #d15866; -$red-500: #c73445; -$red-600: #a32b39; -$red-700: #7f222c; -$red-800: #5b1820; -$red-900: #370f13; -$orange-050: #fef4ec; -$orange-100: #fde0c8; -$orange-200: #fccca4; -$orange-300: #fbb77f; -$orange-400: #faa35b; -$orange-500: #fa8f37; -$orange-600: #cd762e; -$orange-700: #a05c23; -$orange-800: #724119; -$orange-900: #45270f; -$yellow-050: #fffbed; -$yellow-100: #fdeeba; -$yellow-200: #fce48c; -$yellow-300: #fbd95e; -$yellow-400: #face30; -$yellow-500: #fac402; -$yellow-600: #cda102; -$yellow-700: #a07d02; -$yellow-800: #725a01; -$yellow-900: #453601; -$transparent: transparent; -$white: #fff; -$black: #000; + /* consul refresh */ + --strawberry-010: 255 242 248; + --strawberry-050: 255 242 248; + --strawberry-100: 248 217 231; + --strawberry-200: 248 217 231; + --strawberry-300: 224 126 172; + --strawberry-400: 224 126 172; + --strawberry-500: 202 33 113; + --strawberry-600: 142 19 74; + --strawberry-700: 142 19 74; + --strawberry-800: 101 13 52; + --strawberry-900: 101 13 52; + + /* vagrant */ + --cobalt-050: 240 245 255; + --cobalt-100: 191 212 255; + --cobalt-200: 138 177 255; + --cobalt-300: 91 146 255; + --cobalt-400: 56 122 255; + --cobalt-500: 21 99 255; + --cobalt-600: 15 79 209; + --cobalt-700: 14 64 163; + --cobalt-800: 10 45 116; + --cobalt-900: 6 27 70; + + /* terraform */ + --indigo-050: 238 237 252; + --indigo-100: 213 210 247; + --indigo-200: 174 167 242; + --indigo-300: 141 131 237; + --indigo-400: 117 104 232; + --indigo-500: 92 78 229; + --indigo-600: 76 64 188; + --indigo-700: 59 50 146; + --indigo-800: 42 36 105; + --indigo-900: 26 22 63; + + /* nomad */ + --teal-050: 235 248 243;/*#c3ecdc*/; + --teal-100: 195 236 220;/*#e1e4e7*/; + --teal-200: 155 223 197; + --teal-300: 116 211 174; + --teal-400: 76 198 151; + --teal-500: 37 186 129; + --teal-600: 31 153 106; + --teal-700: 24 119 83; + --teal-800: 17 85 59; + --teal-900: 11 51 36; + + /* packer */ + --cyan-050: 231 248 255; + --cyan-100: 185 236 255; + --cyan-200: 139 224 255; + --cyan-300: 92 211 255; + --cyan-400: 46 199 255; + --cyan-500: 0 187 255; + --cyan-600: 0 159 217; + --cyan-700: 0 119 163; + --cyan-800: 0 85 116; + --cyan-900: 0 51 70; + +/* ui */ + +/* removed to prevent confusion + --gray-1: #191a1c; + --gray-2: #323538; + --gray-3: #4c4f54; + --gray-4: #656a70; + --gray-5: #7f858d; + --gray-6: #9a9ea5; + --gray-7: #b4b8bc; + --gray-8: #d0d2d5; + --gray-9: #ebecee; + --gray-10: #f3f4f6; +*/ + + --gray-010: 251 251 252; + --gray-050: 247 248 250; + --gray-100: 235 238 242; + --gray-150: 235 238 242; + --gray-200: 220 224 230; + --gray-300: 186 193 204; + --gray-400: 142 150 163; + --gray-500: 111 118 130; + --gray-600: 98 104 115; + --gray-700: 82 87 97; + --gray-800: 55 58 66; + --gray-850: 44 46 51; + --gray-900: 31 33 36; + --gray-950: 21 23 28; + +/* status */ + --green-050: 236 247 237; + --green-100: 198 233 201; + --green-200: 160 219 165; + --green-300: 122 204 129; + --green-400: 84 190 93; + --green-500: 46 176 57; + --green-600: 38 145 47; + --green-700: 30 113 37; + --green-800: 21 80 26; + --green-900: 13 48 16; + + --blue-010: 251 252 255; + --blue-050: 240 245 255; + --blue-100: 191 212 255; + --blue-200: 138 177 255; + --blue-300: 91 146 255; + --blue-400: 56 122 255; + --blue-500: 21 99 255; + --blue-600: 15 79 209; + --blue-700: 14 64 163; + --blue-800: 10 45 116; + --blue-900: 6 27 70; + + --red-010: 253 250 251; + --red-050: 249 236 238; + --red-100: 239 199 204; + --red-200: 229 162 170; + --red-300: 219 125 136; + --red-400: 209 88 102; + --red-500: 199 52 69; + --red-600: 163 43 57; + --red-700: 127 34 44; + --red-800: 91 24 32; + --red-900: 55 15 19; + + --orange-050: 254 244 236;/*#fa8f37*/; + --orange-100: 253 224 200; + --orange-200: 252 204 164; + --orange-300: 251 183 127; + --orange-400: 250 163 91; + --orange-500: 250 143 55; + --orange-600: 205 118 46; + --orange-700: 160 92 35; + --orange-800: 114 65 25; + --orange-900: 69 39 15; + + --yellow-050: 255 251 237;/*#fa8f37;*/ + --yellow-100: 253 238 186; + --yellow-200: 252 228 140; + --yellow-300: 251 217 94; + --yellow-400: 250 206 48; + --yellow-500: 250 196 2; + --yellow-600: 205 161 2; + --yellow-700: 160 125 2; + --yellow-800: 114 90 1; + --yellow-900: 69 54 1; + + --transparent: transparent; + --white: 255 255 255; + --black: 0 0 0; +} diff --git a/ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss deleted file mode 100644 index 8ad6757ad..000000000 --- a/ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss +++ /dev/null @@ -1,259 +0,0 @@ -/*TODO: Move this to the reset */ -* { - border-width: 0; -} -%frame-border-000 { - /* same as decor-border-000 - but need to think about being able to import color on its own*/ - border-style: solid; -} -%frame-brand-300 { - @extend %frame-border-000; - background-color: $transparent; - border-color: var(--decor-brand-600, inherit); - color: var(--typo-brand-600, inherit); -} - -/* possibly filter bar */ -/* modal close button */ -%frame-gray-050 { - @extend %frame-border-000; - background-color: $gray-050; - border-color: $gray-300; - color: $gray-400; -} -/* modal main content */ -%frame-gray-100 { - @extend %frame-border-000; - background-color: $white; - border-color: $gray-300; - color: $gray-600; /* wasn't set */ -} -/* hover */ -%frame-gray-200 { - @extend %frame-border-000; - background-color: $transparent; - border-color: $gray-700; - color: $gray-800; -} -%frame-gray-300 { - @extend %frame-border-000; - background-color: $white; - border-color: $gray-700; - color: $gray-800; -} -/* button */ -/**/ -%frame-gray-400 { - @extend %frame-border-000; - background-color: $gray-050; - border-color: $gray-300; - color: $gray-800; -} -%frame-gray-500 { - @extend %frame-border-000; - background-color: $gray-050; - border-color: $gray-300; - color: $gray-400; -} - -/* tabs */ -%frame-gray-600 { - @extend %frame-border-000; - background-color: $gray-100; - border-color: $gray-500; - color: $gray-500; -} -/* active */ -%frame-gray-700 { - @extend %frame-border-000; - background-color: $gray-200; - border-color: $gray-700; - color: $gray-800; -} -/* modal bars */ -%frame-gray-800 { - @extend %frame-border-000; - background-color: $gray-050; - border-color: $gray-300; - color: $gray-900; -} -%frame-gray-900 { - @extend %frame-border-000; - background-color: $gray-100; - border-color: $gray-300; - color: $gray-900; -} - -%frame-yellow-500 { - @extend %frame-border-000; - background-color: $yellow-050; - border-color: $color-warning; -} -%frame-yellow-800 { - @extend %frame-border-000; - background-color: $yellow-500; - border-color: $yellow-800; - color: $white; -} -%frame-green-500 { - @extend %frame-border-000; - background-color: $green-050; - border-color: $green-500; - color: $green-500; -} -%frame-green-800 { - @extend %frame-border-000; - background-color: $green-500; - border-color: $green-800; - color: $white; -} -%frame-blue-200 { - @extend %frame-border-000; - background-color: $white; - border-color: $blue-300; - color: $blue-300; -} -%frame-blue-300 { - @extend %frame-border-000; - background-color: $white; - border-color: $blue-500; - color: $blue-500; -} -%frame-blue-500 { - @extend %frame-border-000; - background-color: $blue-050; - border-color: $blue-500; - color: $blue-800; -} -%frame-blue-600 { - @extend %frame-border-000; - background-color: $blue-200; - border-color: $gray-400; - color: $blue-050; -} -%frame-blue-700 { - @extend %frame-border-000; - background-color: $blue-400; - border-color: $blue-800; - color: $white; -} -%frame-blue-800 { - @extend %frame-border-000; - background-color: $blue-500; - border-color: $blue-800; - color: $white; -} -%frame-blue-900 { - @extend %frame-border-000; - background-color: $blue-700; - border-color: $blue-800; - color: $white; -} -%frame-red-300 { - @extend %frame-border-000; - background-color: $transparent; - border-color: $red-500; - color: $red-500; -} -%frame-red-500 { - @extend %frame-border-000; - background-color: $red-050; - border-color: $red-500; - color: $red-800; -} -%frame-red-600 { - @extend %frame-border-000; - background-color: $red-200; - border-color: $gray-400; - color: $white; -} -%frame-red-700 { - @extend %frame-border-000; - background-color: $red-500; - border-color: $red-800; - color: $white; -} -%frame-red-800 { - @extend %frame-border-000; - background-color: $red-500; - border-color: $red-800; - color: $white; -} -%frame-red-900 { - @extend %frame-border-000; - background-color: $red-700; - border-color: $red-800; - color: $white; -} -%frame-magenta-300 { - @extend %frame-border-000; - background-color: $white; - border-color: $magenta-600; - color: $magenta-600; -} -%frame-magenta-800 { - @extend %frame-border-000; - background-color: $magenta-500; - border-color: $magenta-800; - color: $white; -} -%frame-steel-300 { - @extend %frame-border-000; - background-color: $white; - border-color: $steel-600; - color: $steel-600; -} -%frame-steel-800 { - @extend %frame-border-000; - background-color: $steel-500; - border-color: $steel-800; - color: $white; -} -%frame-cobalt-300 { - @extend %frame-border-000; - background-color: $white; - border-color: $cobalt-600; - color: $cobalt-600; -} -%frame-cobalt-800 { - @extend %frame-border-000; - background-color: $cobalt-500; - border-color: $cobalt-800; - color: $white; -} -%frame-indigo-300 { - @extend %frame-border-000; - background-color: $white; - border-color: $indigo-600; - color: $indigo-600; -} -%frame-indigo-800 { - @extend %frame-border-000; - background-color: $indigo-500; - border-color: $indigo-800; - color: $white; -} -%frame-teal-300 { - @extend %frame-border-000; - background-color: $white; - border-color: $teal-600; - color: $teal-600; -} -%frame-teal-800 { - @extend %frame-border-000; - background-color: $teal-500; - border-color: $teal-800; - color: $white; -} -%frame-cyan-300 { - @extend %frame-border-000; - background-color: $white; - border-color: $cyan-600; - color: $cyan-600; -} -%frame-cyan-800 { - @extend %frame-border-000; - background-color: $cyan-500; - border-color: $cyan-800; - color: $white; -} diff --git a/ui/packages/consul-ui/app/styles/base/color/hex-variables.scss b/ui/packages/consul-ui/app/styles/base/color/hex-variables.scss new file mode 100644 index 000000000..d2f7659e1 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/hex-variables.scss @@ -0,0 +1,178 @@ +:root { + /* vault */ + --steel-050: #f5f6f7; + --steel-100: #e1e4e7; + --steel-200: #cdd3d7; + --steel-300: #b9c1c7; + --steel-400: #a5b0b7; + --steel-500: #919fa8; + --steel-600: #77838a; + --steel-700: #5d666b; + --steel-800: #42494d; + --steel-900: #282c2e; + + /* consul */ + --magenta-050: #f9ebf2; + --magenta-100: #efc4d8; + --magenta-200: #e59ebe; + --magenta-300: #da77a4; + --magenta-400: #d0508a; + --magenta-500: #c62a71; + --magenta-600: #9e2159; + --magenta-700: #7d1a47; + --magenta-800: #5a1434; + --magenta-900: #360c1f; + + /* consul refresh */ + --strawberry-010: #fff2f8; + --strawberry-050: #fff2f8; + --strawberry-100: #f8d9e7; + --strawberry-200: #f8d9e7; + --strawberry-300: #e07eac; + --strawberry-400: #e07eac; + --strawberry-500: #ca2171; + --strawberry-600: #8e134a; + --strawberry-700: #8e134a; + --strawberry-800: #650d34; + --strawberry-900: #650d34; + + /* vagrant */ + --cobalt-050: #f0f5ff; + --cobalt-100: #bfd4ff; + --cobalt-200: #8ab1ff; + --cobalt-300: #5b92ff; + --cobalt-400: #387aff; + --cobalt-500: #1563ff; + --cobalt-600: #0f4fd1; + --cobalt-700: #0e40a3; + --cobalt-800: #0a2d74; + --cobalt-900: #061b46; + + /* terraform */ + --indigo-050: #eeedfc; + --indigo-100: #d5d2f7; + --indigo-200: #aea7f2; + --indigo-300: #8d83ed; + --indigo-400: #7568e8; + --indigo-500: #5c4ee5; + --indigo-600: #4c40bc; + --indigo-700: #3b3292; + --indigo-800: #2a2469; + --indigo-900: #1a163f; + + /* nomad */ + --teal-050: #ebf8f3;/*#c3ecdc*/; + --teal-100: #c3ecdc;/*#e1e4e7*/; + --teal-200: #9bdfc5; + --teal-300: #74d3ae; + --teal-400: #4cc697; + --teal-500: #25ba81; + --teal-600: #1f996a; + --teal-700: #187753; + --teal-800: #11553b; + --teal-900: #0b3324; + + /* packer */ + --cyan-050: #e7f8ff; + --cyan-100: #b9ecff; + --cyan-200: #8be0ff; + --cyan-300: #5cd3ff; + --cyan-400: #2ec7ff; + --cyan-500: #00bbff; + --cyan-600: #009fd9; + --cyan-700: #0077a3; + --cyan-800: #005574; + --cyan-900: #003346; + +/* ui */ + +/* removed to prevent confusion + --gray-1: #191a1c; + --gray-2: #323538; + --gray-3: #4c4f54; + --gray-4: #656a70; + --gray-5: #7f858d; + --gray-6: #9a9ea5; + --gray-7: #b4b8bc; + --gray-8: #d0d2d5; + --gray-9: #ebecee; + --gray-10: #f3f4f6; +*/ + + --gray-010: #fbfbfc; + --gray-050: #f7f8fa; + --gray-100: #ebeef2; + --gray-150: #ebeef2; + --gray-200: #dce0e6; + --gray-300: #bac1cc; + --gray-400: #8e96a3; + --gray-500: #6f7682; + --gray-600: #626873; + --gray-700: #525761; + --gray-800: #373a42; + --gray-850: #2c2e33; + --gray-900: #1f2124; + --gray-950: #15171c; + +/* status */ + --green-050: #ecf7ed; + --green-100: #c6e9c9; + --green-200: #a0dba5; + --green-300: #7acc81; + --green-400: #54be5d; + --green-500: #2eb039; + --green-600: #26912f; + --green-700: #1e7125; + --green-800: #15501a; + --green-900: #0d3010; + + --blue-010: #fbfcff; + --blue-050: #f0f5ff; + --blue-100: #bfd4ff; + --blue-200: #8ab1ff; + --blue-300: #5b92ff; + --blue-400: #387aff; + --blue-500: #1563ff; + --blue-600: #0f4fd1; + --blue-700: #0e40a3; + --blue-800: #0a2d74; + --blue-900: #061b46; + + --red-010: #fdfafb; + --red-050: #f9ecee; + --red-100: #efc7cc; + --red-200: #e5a2aa; + --red-300: #db7d88; + --red-400: #d15866; + --red-500: #c73445; + --red-600: #a32b39; + --red-700: #7f222c; + --red-800: #5b1820; + --red-900: #370f13; + + --orange-050: #fef4ec;/*#fa8f37*/; + --orange-100: #fde0c8; + --orange-200: #fccca4; + --orange-300: #fbb77f; + --orange-400: #faa35b; + --orange-500: #fa8f37; + --orange-600: #cd762e; + --orange-700: #a05c23; + --orange-800: #724119; + --orange-900: #45270f; + + --yellow-050: #fffbed;/*#fa8f37;*/ + --yellow-100: #fdeeba; + --yellow-200: #fce48c; + --yellow-300: #fbd95e; + --yellow-400: #face30; + --yellow-500: #fac402; + --yellow-600: #cda102; + --yellow-700: #a07d02; + --yellow-800: #725a01; + --yellow-900: #453601; + + --transparent: transparent; + --white: #fff; + --black: #000; +} diff --git a/ui/packages/consul-ui/app/styles/base/color/index.scss b/ui/packages/consul-ui/app/styles/base/color/index.scss index 8de1216ee..decc200b4 100644 --- a/ui/packages/consul-ui/app/styles/base/color/index.scss +++ b/ui/packages/consul-ui/app/styles/base/color/index.scss @@ -1,4 +1,7 @@ +/*@import './hex-variables';*/ @import './base-variables'; +/* load in the ui theme */ +@import './ui/index'; +/* other themes should be added at a project level */ @import './semantic-variables'; -@import './frame-placeholders'; -@import './theme-placeholders'; +/*@import './theme-placeholders';*/ diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/frame-placeholders.scss new file mode 100644 index 000000000..9e380b4b3 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/magenta/frame-placeholders.scss @@ -0,0 +1,13 @@ +%frame-magenta-300 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-000)); + border-color: rgb(var(--tone-magenta-600)); + color: rgb(var(--tone-magenta-600)); +} +%frame-magenta-800 { + @extend %frame-border-000; + background-color: rgb(var(--tone-magenta-500)); + border-color: rgb(var(--tone-magenta-800)); + color: rgb(var(--tone-gray-000)); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/index.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/index.scss new file mode 100644 index 000000000..3948997e7 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/magenta/index.scss @@ -0,0 +1,6 @@ +@import './themes/light'; +@import './themes/dark'; +@import './themes/light-high-contrast'; +@import './themes/dark-high-contrast'; +@import './frame-placeholders'; + diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark-high-contrast.scss new file mode 100644 index 000000000..53a1d2077 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark-high-contrast.scss @@ -0,0 +1,18 @@ +%theme-dark-low-contrast { + --tone-magenta-000: var(--white); + --tone-magenta-050: var(--magenta-050); + --tone-magenta-100: var(--magenta-100); + --tone-magenta-150: var(--magenta-150); + --tone-magenta-200: var(--magenta-200); + --tone-magenta-300: var(--magenta-300); + --tone-magenta-400: var(--magenta-400); + --tone-magenta-500: var(--magenta-500); + --tone-magenta-600: var(--magenta-600); + --tone-magenta-700: var(--magenta-700); + --tone-magenta-800: var(--magenta-800); + --tone-magenta-850: var(--magenta-850); + --tone-magenta-900: var(--magenta-900); + --tone-magenta-950: var(--magenta-950); + --tone-magenta-999: var(--black); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark.scss new file mode 100644 index 000000000..85a300e4a --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark.scss @@ -0,0 +1,18 @@ +%theme-dark { + --tone-magenta-000: var(--white); + --tone-magenta-050: var(--magenta-050); + --tone-magenta-100: var(--magenta-100); + --tone-magenta-150: var(--magenta-150); + --tone-magenta-200: var(--magenta-200); + --tone-magenta-300: var(--magenta-300); + --tone-magenta-400: var(--magenta-400); + --tone-magenta-500: var(--magenta-500); + --tone-magenta-600: var(--magenta-600); + --tone-magenta-700: var(--magenta-700); + --tone-magenta-800: var(--magenta-800); + --tone-magenta-850: var(--magenta-850); + --tone-magenta-900: var(--magenta-900); + --tone-magenta-950: var(--magenta-950); + --tone-magenta-999: var(--black); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light-high-contrast.scss new file mode 100644 index 000000000..bc0d03a80 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light-high-contrast.scss @@ -0,0 +1,18 @@ +%theme-light { + --tone-magenta-000: var(--white); + --tone-magenta-050: var(--magenta-050); + --tone-magenta-100: var(--magenta-100); + --tone-magenta-150: var(--magenta-150); + --tone-magenta-200: var(--magenta-200); + --tone-magenta-300: var(--magenta-300); + --tone-magenta-400: var(--magenta-400); + --tone-magenta-500: var(--magenta-500); + --tone-magenta-600: var(--magenta-600); + --tone-magenta-700: var(--magenta-700); + --tone-magenta-800: var(--magenta-800); + --tone-magenta-850: var(--magenta-850); + --tone-magenta-900: var(--magenta-900); + --tone-magenta-950: var(--magenta-950); + --tone-magenta-999: var(--black); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light.scss new file mode 100644 index 000000000..9c589e09e --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light.scss @@ -0,0 +1,18 @@ +%theme-light-high-contrast { + --tone-magenta-000: var(--white); + --tone-magenta-050: var(--magenta-050); + --tone-magenta-100: var(--magenta-100); + --tone-magenta-150: var(--magenta-150); + --tone-magenta-200: var(--magenta-200); + --tone-magenta-300: var(--magenta-300); + --tone-magenta-400: var(--magenta-400); + --tone-magenta-500: var(--magenta-500); + --tone-magenta-600: var(--magenta-600); + --tone-magenta-700: var(--magenta-700); + --tone-magenta-800: var(--magenta-800); + --tone-magenta-850: var(--magenta-850); + --tone-magenta-900: var(--magenta-900); + --tone-magenta-950: var(--magenta-950); + --tone-magenta-999: var(--black); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/semantic-variables.scss b/ui/packages/consul-ui/app/styles/base/color/semantic-variables.scss index 14d545e43..0681962e4 100644 --- a/ui/packages/consul-ui/app/styles/base/color/semantic-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/color/semantic-variables.scss @@ -1,12 +1,27 @@ -$color-primary: $blue-500; -$color-dangerous: $red-500; -$color-primary-disabled: $blue-500; -$color-transparent: transparent; -$color-neutral: $gray-500; -$color-action: $blue-500; -$color-info: $blue-500; -$color-success: $green-500; -$color-failure: $red-500; -$color-danger: $red-500; -$color-warning: $yellow-500; -$color-alert: $orange-500; +:root { + --color-primary: var(--tone-blue-500); + --color-dangerous: var(--tone-red-500); + --color-primary-disabled: var(--tone-blue-500); + + --color-neutral: var(--tone-gray-500); + --color-action: var(--tone-blue-500); + --color-info: var(--tone-blue-500); + /*--color-active: var(--tone-blue-500); ?? form pre-focus*/ + --color-success: var(--tone-green-500); + --color-failure: var(--tone-red-500); + --color-danger: var(--tone-red-500); + --color-warning: var(--tone-yellow-500); + --color-alert: var(--tone-orange-500); + + /* --color-keyline-000: var(--white); */ + /* --color-keyline-050: var(); */ + /* --color-keyline-100: var(--gray-100); */ + /* --color-keyline-200: var(--gray-200); */ + /* --color-keyline-300: var(--gray-300); */ + /* --color-keyline-400: var(--gray-400); */ + /* --color-keyline-500: var(--gray-500); */ + /* --color-keyline-600: var(--gray-600); */ + /* --color-keyline-700: var(); */ + /* --color-keyline-800: var(); */ + /* --color-keyline-900: var(--black); */ +} diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/frame-placeholders.scss new file mode 100644 index 000000000..589850244 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/frame-placeholders.scss @@ -0,0 +1,13 @@ +%frame-strawberry-300 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-000)); + border-color: rgb(var(--tone-strawberry-600)); + color: rgb(var(--tone-strawberry-600)); +} +%frame-strawberry-800 { + @extend %frame-border-000; + background-color: rgb(var(--tone-strawberry-500)); + border-color: rgb(var(--tone-strawberry-800)); + color: rgb(var(--tone-gray-000)); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/index.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/index.scss new file mode 100644 index 000000000..3948997e7 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/index.scss @@ -0,0 +1,6 @@ +@import './themes/light'; +@import './themes/dark'; +@import './themes/light-high-contrast'; +@import './themes/dark-high-contrast'; +@import './frame-placeholders'; + diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark-high-contrast.scss new file mode 100644 index 000000000..8a86b9d9c --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark-high-contrast.scss @@ -0,0 +1,18 @@ +%theme-dark-high-contrast { + --tone-strawberry-000: var(--white); + --tone-strawberry-050: var(--strawberry-050); + --tone-strawberry-100: var(--strawberry-100); + --tone-strawberry-150: var(--strawberry-150); + --tone-strawberry-200: var(--strawberry-200); + --tone-strawberry-300: var(--strawberry-300); + --tone-strawberry-400: var(--strawberry-400); + --tone-strawberry-500: var(--strawberry-500); + --tone-strawberry-600: var(--strawberry-600); + --tone-strawberry-700: var(--strawberry-700); + --tone-strawberry-800: var(--strawberry-800); + --tone-strawberry-850: var(--strawberry-850); + --tone-strawberry-900: var(--strawberry-900); + --tone-strawberry-950: var(--strawberry-950); + --tone-strawberry-999: var(--black); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark.scss new file mode 100644 index 000000000..ff204b2ad --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark.scss @@ -0,0 +1,18 @@ +%theme-dark { + --tone-strawberry-000: var(--white); + --tone-strawberry-050: var(--strawberry-050); + --tone-strawberry-100: var(--strawberry-100); + --tone-strawberry-150: var(--strawberry-150); + --tone-strawberry-200: var(--strawberry-200); + --tone-strawberry-300: var(--strawberry-300); + --tone-strawberry-400: var(--strawberry-400); + --tone-strawberry-500: var(--strawberry-500); + --tone-strawberry-600: var(--strawberry-600); + --tone-strawberry-700: var(--strawberry-700); + --tone-strawberry-800: var(--strawberry-800); + --tone-strawberry-850: var(--strawberry-850); + --tone-strawberry-900: var(--strawberry-900); + --tone-strawberry-950: var(--strawberry-950); + --tone-strawberry-999: var(--black); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light-high-contrast.scss new file mode 100644 index 000000000..ccd2b783b --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light-high-contrast.scss @@ -0,0 +1,18 @@ +%theme-light-high-contrast { + --tone-strawberry-000: var(--white); + --tone-strawberry-050: var(--strawberry-050); + --tone-strawberry-100: var(--strawberry-100); + --tone-strawberry-150: var(--strawberry-150); + --tone-strawberry-200: var(--strawberry-200); + --tone-strawberry-300: var(--strawberry-300); + --tone-strawberry-400: var(--strawberry-400); + --tone-strawberry-500: var(--strawberry-500); + --tone-strawberry-600: var(--strawberry-600); + --tone-strawberry-700: var(--strawberry-700); + --tone-strawberry-800: var(--strawberry-800); + --tone-strawberry-850: var(--strawberry-850); + --tone-strawberry-900: var(--strawberry-900); + --tone-strawberry-950: var(--strawberry-950); + --tone-strawberry-999: var(--black); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light.scss new file mode 100644 index 000000000..4efb00acd --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light.scss @@ -0,0 +1,18 @@ +%theme-light { + --tone-strawberry-000: var(--white); + --tone-strawberry-050: var(--strawberry-050); + --tone-strawberry-100: var(--strawberry-100); + --tone-strawberry-150: var(--strawberry-150); + --tone-strawberry-200: var(--strawberry-200); + --tone-strawberry-300: var(--strawberry-300); + --tone-strawberry-400: var(--strawberry-400); + --tone-strawberry-500: var(--strawberry-500); + --tone-strawberry-600: var(--strawberry-600); + --tone-strawberry-700: var(--strawberry-700); + --tone-strawberry-800: var(--strawberry-800); + --tone-strawberry-850: var(--strawberry-850); + --tone-strawberry-900: var(--strawberry-900); + --tone-strawberry-950: var(--strawberry-950); + --tone-strawberry-999: var(--black); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/theme-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/theme-placeholders.scss index 0983f227d..6dfb551af 100644 --- a/ui/packages/consul-ui/app/styles/base/color/theme-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/color/theme-placeholders.scss @@ -1,90 +1,91 @@ %theme-light { - --gray-000: #{$white}; - --gray-050: #{$gray-050}; - --gray-100: #{$gray-100}; - --gray-150: #{$gray-150}; - --gray-200: #{$gray-200}; - --gray-300: #{$gray-300}; - --gray-400: #{$gray-400}; - --gray-500: #{$gray-500}; - --gray-600: #{$gray-600}; - --gray-700: #{$gray-700}; - --gray-800: #{$gray-800}; - --gray-850: #{$gray-850}; - --gray-900: #{$gray-900}; - --gray-950: #{$gray-950}; - --gray-999: #{$black}; + --tone-gray-000: var(--white); + --tone-gray-050: var(--gray-050); + --tone-gray-100: var(--gray-100); + --tone-gray-150: var(--gray-150); + --tone-gray-200: var(--gray-200); + --tone-gray-300: var(--gray-300); + --tone-gray-400: var(--gray-400); + --tone-gray-500: var(--gray-500); + --tone-gray-600: var(--gray-600); + --tone-gray-700: var(--gray-700); + --tone-gray-800: var(--gray-800); + --tone-gray-850: var(--gray-850); + --tone-gray-900: var(--gray-900); + --tone-gray-950: var(--gray-950); + --tone-gray-999: var(--black); - --blue-500: #{$blue-500}; + --tone-blue-500: var(--blue-500); - --transparent: #{$transparent}; + --tone-transparent: var(--transparent); } + %theme-high-contrast { - --transparent: #{$transparent}; + --tone-transparent: var(--transparent); } %theme-low-contrast { - --transparent: #{$transparent}; + --tone-transparent: var(--transparent); } %theme-light-low-contrast { - --transparent: #{$transparent}; + --tone-transparent: var(--transparent); } %theme-dark-low-contrast { - --transparent: #{$transparent}; + --tone-transparent: var(--transparent); } %theme-light-high-contrast { - --gray-000: #{$white}; - --gray-050: #{$white}; - --gray-100: #{$white}; - --gray-150: #{$white}; - --gray-200: #{$white}; - --gray-300: #{$white}; - --gray-400: #{$white}; - --gray-500: #{$gray-500}; - --gray-600: #{$black}; - --gray-700: #{$black}; - --gray-800: #{$black}; - --gray-850: #{$black}; - --gray-900: #{$black}; - --gray-950: #{$black}; - --gray-999: #{$black}; + --tone-gray-000: var(--white); + --tone-gray-050: var(--white); + --tone-gray-100: var(--white); + --tone-gray-150: var(--white); + --tone-gray-200: var(--white); + --tone-gray-300: var(--white); + --tone-gray-400: var(--white); + --tone-gray-500: var(--gray-500); + --tone-gray-600: var(--black); + --tone-gray-700: var(--black); + --tone-gray-800: var(--black); + --tone-gray-850: var(--black); + --tone-gray-900: var(--black); + --tone-gray-950: var(--black); + --tone-gray-999: var(--black); - --transparent: #{$transparent}; + --tone-transparent: var(--transparent); } %theme-dark-high-contrast { - --gray-000: #{$black}; - --gray-050: #{$black}; - --gray-100: #{$black}; - --gray-150: #{$black}; - --gray-200: #{$black}; - --gray-300: #{$black}; - --gray-400: #{$black}; - --gray-500: #{$gray-500}; - --gray-600: #{$white}; - --gray-700: #{$white}; - --gray-800: #{$white}; - --gray-850: #{$white}; - --gray-900: #{$white}; - --gray-950: #{$white}; - --gray-999: #{$white}; + --tone-gray-000: var(--black); + --tone-gray-050: var(--black); + --tone-gray-100: var(--black); + --tone-gray-150: var(--black); + --tone-gray-200: var(--black); + --tone-gray-300: var(--black); + --tone-gray-400: var(--black); + --tone-gray-500: var(--gray-500); + --tone-gray-600: var(--white); + --tone-gray-700: var(--white); + --tone-gray-800: var(--white); + --tone-gray-850: var(--white); + --tone-gray-900: var(--white); + --tone-gray-950: var(--white); + --tone-gray-999: var(--white); - --transparent: #{$transparent}; + --tone-transparent: var(--transparent); } %theme-dark { - --gray-000: #{$black}; - --gray-050: #{$gray-950}; - --gray-100: #{$gray-900}; - --gray-150: #{$gray-850}; - --gray-200: #{$gray-800}; - --gray-300: #{$gray-700}; - --gray-400: #{$gray-600}; - --gray-500: #{$gray-500}; - --gray-600: #{$gray-400}; - --gray-700: #{$gray-300}; - --gray-800: #{$gray-200}; - --gray-850: #{$gray-150}; - --gray-900: #{$gray-100}; - --gray-950: #{$gray-050}; - --gray-999: #{$white}; + --tone-gray-000: var(--$black); + --tone-gray-050: var(--$gray-950); + --tone-gray-100: var(--$gray-900); + --tone-gray-150: var(--$gray-850); + --tone-gray-200: var(--$gray-800); + --tone-gray-300: var(--$gray-700); + --tone-gray-400: var(--$gray-600); + --tone-gray-500: var(--$gray-500); + --tone-gray-600: var(--$gray-400); + --tone-gray-700: var(--$gray-300); + --tone-gray-800: var(--$gray-200); + --tone-gray-850: var(--$gray-150); + --tone-gray-900: var(--$gray-100); + --tone-gray-950: var(--$gray-050); + --tone-gray-999: var(--$white); - --transparent: #{$transparent}; + --tone-transparent: var(--transparent); } diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss new file mode 100644 index 000000000..52d04b097 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss @@ -0,0 +1,187 @@ +/*TODO: Move this to the reset */ +* { + border-width: 0; +} +%frame-border-000 { + /* same as decor-border-000 - but need to think about being able to import color on its own*/ + border-style: solid; +} +%frame-brand-300 { + @extend %frame-border-000; + background-color: var(--transparent); + border-color: rgb(var(--decor-brand-600, inherit)); + color: rgb(var(--typo-brand-600, inherit)); +} + +/* possibly filter bar */ +/* modal close button */ +%frame-gray-050 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-050)); + border-color: rgb(var(--tone-gray-300)); + color: rgb(var(--tone-gray-400)); +} +/* modal main content */ +%frame-gray-100 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-000)); + border-color: rgb(var(--tone-gray-300)); + color: rgb(var(--tone-gray-600)); /* wasn't set */ +} +/* hover */ +%frame-gray-200 { + @extend %frame-border-000; + background-color: var(--transparent); + border-color: rgb(var(--tone-gray-700)); + color: rgb(var(--tone-gray-800)); +} +%frame-gray-300 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-000)); + border-color: rgb(var(--tone-gray-700)); + color: rgb(var(--tone-gray-800)); +} +/* button */ +/**/ +%frame-gray-400 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-050)); + border-color: rgb(var(--tone-gray-300)); + color: rgb(var(--tone-gray-800)); +} +%frame-gray-500 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-050)); + border-color: rgb(var(--tone-gray-300)); + color: rgb(var(--tone-gray-400)); +} + +/* tabs */ +%frame-gray-600 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-100)); + border-color: rgb(var(--tone-gray-500)); + color: rgb(var(--tone-gray-500)); +} +/* active */ +%frame-gray-700 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-200)); + border-color: rgb(var(--tone-gray-700)); + color: rgb(var(--tone-gray-800)); +} +/* modal bars */ +%frame-gray-800 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-050)); + border-color: rgb(var(--tone-gray-300)); + color: rgb(var(--tone-gray-900)); +} +%frame-gray-900 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-100)); + border-color: rgb(var(--tone-gray-300)); + color: rgb(var(--tone-gray-900)); +} + +%frame-yellow-500 { + @extend %frame-border-000; + background-color: rgb(var(--tone-yellow-050)); + border-color: rgb(var(--tone-yellow-500)); +} +%frame-yellow-800 { + @extend %frame-border-000; + background-color: rgb(var(--tone-yellow-500)); + border-color: rgb(var(--tone-yellow-800)); + color: rgb(var(--tone-gray-000)); +} +%frame-green-500 { + @extend %frame-border-000; + background-color: rgb(var(--tone-green-050)); + border-color: rgb(var(--tone-green-500)); + color: rgb(var(--tone-green-500)); +} +%frame-green-800 { + @extend %frame-border-000; + background-color: rgb(var(--tone-green-500)); + border-color: rgb(var(--tone-green-800)); + color: rgb(var(--tone-gray-000)); +} +%frame-blue-200 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-000)); + border-color: rgb(var(--tone-blue-300)); + color: rgb(var(--tone-blue-300)); +} +%frame-blue-300 { + @extend %frame-border-000; + background-color: rgb(var(--tone-gray-000)); + border-color: rgb(var(--tone-blue-500)); + color: rgb(var(--tone-blue-500)); +} +%frame-blue-500 { + @extend %frame-border-000; + background-color: rgb(var(--tone-blue-050)); + border-color: rgb(var(--tone-blue-500)); + color: rgb(var(--tone-blue-800)); +} +%frame-blue-600 { + @extend %frame-border-000; + background-color: rgb(var(--tone-blue-200)); + border-color: rgb(var(--tone-gray-400)); + color: rgb(var(--tone-blue-050)); +} +%frame-blue-700 { + @extend %frame-border-000; + background-color: rgb(var(--tone-blue-400)); + border-color: rgb(var(--tone-blue-800)); + color: rgb(var(--tone-gray-000)); +} +%frame-blue-800 { + @extend %frame-border-000; + background-color: rgb(var(--tone-blue-500)); + border-color: rgb(var(--tone-blue-800)); + color: rgb(var(--tone-gray-000)); +} +%frame-blue-900 { + @extend %frame-border-000; + background-color: rgb(var(--tone-blue-700)); + border-color: rgb(var(--tone-blue-800)); + color: rgb(var(--tone-gray-000)); +} +%frame-red-300 { + @extend %frame-border-000; + background-color: var(--transparent); + border-color: rgb(var(--tone-red-500)); + color: rgb(var(--tone-red-500)); +} +%frame-red-500 { + @extend %frame-border-000; + background-color: rgb(var(--tone-red-050)); + border-color: rgb(var(--tone-red-500)); + color: rgb(var(--tone-red-800)); +} +%frame-red-600 { + @extend %frame-border-000; + background-color: rgb(var(--tone-red-200)); + border-color: rgb(var(--tone-gray-400)); + color: rgb(var(--tone-gray-000)); +} +%frame-red-700 { + @extend %frame-border-000; + background-color: rgb(var(--tone-red-500)); + border-color: rgb(var(--tone-red-800)); + color: rgb(var(--tone-gray-000)); +} +%frame-red-800 { + @extend %frame-border-000; + background-color: rgb(var(--tone-red-500)); + border-color: rgb(var(--tone-red-800)); + color: rgb(var(--tone-gray-000)); +} +%frame-red-900 { + @extend %frame-border-000; + background-color: rgb(var(--tone-red-700)); + border-color: rgb(var(--tone-red-800)); + color: rgb(var(--tone-gray-000)); +} diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/index.scss b/ui/packages/consul-ui/app/styles/base/color/ui/index.scss new file mode 100644 index 000000000..3948997e7 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/ui/index.scss @@ -0,0 +1,6 @@ +@import './themes/light'; +@import './themes/dark'; +@import './themes/light-high-contrast'; +@import './themes/dark-high-contrast'; +@import './frame-placeholders'; + diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss new file mode 100644 index 000000000..22f5f94ac --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss @@ -0,0 +1,116 @@ +%theme-dark-high-contrast { + --tone-gray-000: var(--black); + --tone-gray-050: var(--black); + --tone-gray-100: var(--black); + --tone-gray-150: var(--black); + --tone-gray-200: var(--black); + --tone-gray-300: var(--black); + --tone-gray-400: var(--black); + --tone-gray-500: var(--gray-500); + --tone-gray-600: var(--white); + --tone-gray-700: var(--white); + --tone-gray-800: var(--white); + --tone-gray-850: var(--white); + --tone-gray-900: var(--white); + --tone-gray-950: var(--white); + --tone-gray-999: var(--white); + + --tone-green-000: var(--white); + --tone-green-050: var(--green-050); + --tone-green-100: var(--green-100); + --tone-green-150: var(--green-150); + --tone-green-200: var(--green-200); + --tone-green-300: var(--green-300); + --tone-green-400: var(--green-400); + --tone-green-500: var(--green-500); + --tone-green-600: var(--green-600); + --tone-green-700: var(--green-700); + --tone-green-800: var(--green-800); + --tone-green-850: var(--green-850); + --tone-green-900: var(--green-900); + --tone-green-950: var(--green-950); + --tone-green-999: var(--black); + + --tone-blue-000: var(--white); + --tone-blue-050: var(--blue-050); + --tone-blue-100: var(--blue-100); + --tone-blue-150: var(--blue-150); + --tone-blue-200: var(--blue-200); + --tone-blue-300: var(--blue-300); + --tone-blue-400: var(--blue-400); + --tone-blue-500: var(--blue-500); + --tone-blue-600: var(--blue-600); + --tone-blue-700: var(--blue-700); + --tone-blue-800: var(--blue-800); + --tone-blue-850: var(--blue-850); + --tone-blue-900: var(--blue-900); + --tone-blue-950: var(--blue-950); + --tone-blue-999: var(--black); + + --tone-red-000: var(--white); + --tone-red-050: var(--red-050); + --tone-red-100: var(--red-100); + --tone-red-150: var(--red-150); + --tone-red-200: var(--red-200); + --tone-red-300: var(--red-300); + --tone-red-400: var(--red-400); + --tone-red-500: var(--red-500); + --tone-red-600: var(--red-600); + --tone-red-700: var(--red-700); + --tone-red-800: var(--red-800); + --tone-red-850: var(--red-850); + --tone-red-900: var(--red-900); + --tone-red-950: var(--red-950); + --tone-red-999: var(--black); + + --tone-orange-000: var(--white); + --tone-orange-050: var(--orange-050); + --tone-orange-100: var(--orange-100); + --tone-orange-150: var(--orange-150); + --tone-orange-200: var(--orange-200); + --tone-orange-300: var(--orange-300); + --tone-orange-400: var(--orange-400); + --tone-orange-500: var(--orange-500); + --tone-orange-600: var(--orange-600); + --tone-orange-700: var(--orange-700); + --tone-orange-800: var(--orange-800); + --tone-orange-850: var(--orange-850); + --tone-orange-900: var(--orange-900); + --tone-orange-950: var(--orange-950); + --tone-orange-999: var(--black); + + --tone-yellow-000: var(--white); + --tone-yellow-050: var(--yellow-050); + --tone-yellow-100: var(--yellow-100); + --tone-yellow-150: var(--yellow-150); + --tone-yellow-200: var(--yellow-200); + --tone-yellow-300: var(--yellow-300); + --tone-yellow-400: var(--yellow-400); + --tone-yellow-500: var(--yellow-500); + --tone-yellow-600: var(--yellow-600); + --tone-yellow-700: var(--yellow-700); + --tone-yellow-800: var(--yellow-800); + --tone-yellow-850: var(--yellow-850); + --tone-yellow-900: var(--yellow-900); + --tone-yellow-950: var(--yellow-950); + --tone-yellow-999: var(--black); + + --tone-yellow-000: var(--white); + --tone-yellow-050: var(--yellow-050); + --tone-yellow-100: var(--yellow-100); + --tone-yellow-150: var(--yellow-150); + --tone-yellow-200: var(--yellow-200); + --tone-yellow-300: var(--yellow-300); + --tone-yellow-400: var(--yellow-400); + --tone-yellow-500: var(--yellow-500); + --tone-yellow-600: var(--yellow-600); + --tone-yellow-700: var(--yellow-700); + --tone-yellow-800: var(--yellow-800); + --tone-yellow-850: var(--yellow-850); + --tone-yellow-900: var(--yellow-900); + --tone-yellow-950: var(--yellow-950); + --tone-yellow-999: var(--black); + + --tone-transparent: var(--transparent); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss new file mode 100644 index 000000000..8bb76828a --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss @@ -0,0 +1,116 @@ +%theme-dark { + --tone-gray-000: var(--black); + --tone-gray-050: var(--gray-950); + --tone-gray-100: var(--gray-900); + --tone-gray-150: var(--gray-850); + --tone-gray-200: var(--gray-800); + --tone-gray-300: var(--gray-700); + --tone-gray-400: var(--gray-600); + --tone-gray-500: var(--gray-500); + --tone-gray-600: var(--gray-400); + --tone-gray-700: var(--gray-300); + --tone-gray-800: var(--gray-200); + --tone-gray-850: var(--gray-250); + --tone-gray-900: var(--gray-100); + --tone-gray-950: var(--gray-050); + --tone-gray-999: var(--white); + + --tone-green-000: var(--white); + --tone-green-050: var(--green-050); + --tone-green-100: var(--green-100); + --tone-green-150: var(--green-150); + --tone-green-200: var(--green-200); + --tone-green-300: var(--green-300); + --tone-green-400: var(--green-400); + --tone-green-500: var(--green-500); + --tone-green-600: var(--green-600); + --tone-green-700: var(--green-700); + --tone-green-800: var(--green-800); + --tone-green-850: var(--green-850); + --tone-green-900: var(--green-900); + --tone-green-950: var(--green-950); + --tone-green-999: var(--black); + + --tone-blue-000: var(--white); + --tone-blue-050: var(--blue-050); + --tone-blue-100: var(--blue-100); + --tone-blue-150: var(--blue-150); + --tone-blue-200: var(--blue-200); + --tone-blue-300: var(--blue-300); + --tone-blue-400: var(--blue-400); + --tone-blue-500: var(--blue-500); + --tone-blue-600: var(--blue-600); + --tone-blue-700: var(--blue-700); + --tone-blue-800: var(--blue-800); + --tone-blue-850: var(--blue-850); + --tone-blue-900: var(--blue-900); + --tone-blue-950: var(--blue-950); + --tone-blue-999: var(--black); + + --tone-red-000: var(--white); + --tone-red-050: var(--red-050); + --tone-red-100: var(--red-100); + --tone-red-150: var(--red-150); + --tone-red-200: var(--red-200); + --tone-red-300: var(--red-300); + --tone-red-400: var(--red-400); + --tone-red-500: var(--red-500); + --tone-red-600: var(--red-600); + --tone-red-700: var(--red-700); + --tone-red-800: var(--red-800); + --tone-red-850: var(--red-850); + --tone-red-900: var(--red-900); + --tone-red-950: var(--red-950); + --tone-red-999: var(--black); + + --tone-orange-000: var(--white); + --tone-orange-050: var(--orange-050); + --tone-orange-100: var(--orange-100); + --tone-orange-150: var(--orange-150); + --tone-orange-200: var(--orange-200); + --tone-orange-300: var(--orange-300); + --tone-orange-400: var(--orange-400); + --tone-orange-500: var(--orange-500); + --tone-orange-600: var(--orange-600); + --tone-orange-700: var(--orange-700); + --tone-orange-800: var(--orange-800); + --tone-orange-850: var(--orange-850); + --tone-orange-900: var(--orange-900); + --tone-orange-950: var(--orange-950); + --tone-orange-999: var(--black); + + --tone-yellow-000: var(--white); + --tone-yellow-050: var(--yellow-050); + --tone-yellow-100: var(--yellow-100); + --tone-yellow-150: var(--yellow-150); + --tone-yellow-200: var(--yellow-200); + --tone-yellow-300: var(--yellow-300); + --tone-yellow-400: var(--yellow-400); + --tone-yellow-500: var(--yellow-500); + --tone-yellow-600: var(--yellow-600); + --tone-yellow-700: var(--yellow-700); + --tone-yellow-800: var(--yellow-800); + --tone-yellow-850: var(--yellow-850); + --tone-yellow-900: var(--yellow-900); + --tone-yellow-950: var(--yellow-950); + --tone-yellow-999: var(--black); + + --tone-yellow-000: var(--white); + --tone-yellow-050: var(--yellow-050); + --tone-yellow-100: var(--yellow-100); + --tone-yellow-150: var(--yellow-150); + --tone-yellow-200: var(--yellow-200); + --tone-yellow-300: var(--yellow-300); + --tone-yellow-400: var(--yellow-400); + --tone-yellow-500: var(--yellow-500); + --tone-yellow-600: var(--yellow-600); + --tone-yellow-700: var(--yellow-700); + --tone-yellow-800: var(--yellow-800); + --tone-yellow-850: var(--yellow-850); + --tone-yellow-900: var(--yellow-900); + --tone-yellow-950: var(--yellow-950); + --tone-yellow-999: var(--black); + + --tone-transparent: var(--transparent); +} + diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss new file mode 100644 index 000000000..947fa8463 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss @@ -0,0 +1,115 @@ +%theme-light-high-contrast { + --tone-gray-000: var(--white); + --tone-gray-050: var(--white); + --tone-gray-100: var(--white); + --tone-gray-150: var(--white); + --tone-gray-200: var(--white); + --tone-gray-300: var(--white); + --tone-gray-400: var(--white); + --tone-gray-500: var(--gray-500); + --tone-gray-600: var(--black); + --tone-gray-700: var(--black); + --tone-gray-800: var(--black); + --tone-gray-850: var(--black); + --tone-gray-900: var(--black); + --tone-gray-950: var(--black); + --tone-gray-999: var(--black); + + --tone-green-000: var(--white); + --tone-green-050: var(--green-050); + --tone-green-100: var(--green-100); + --tone-green-150: var(--green-150); + --tone-green-200: var(--green-200); + --tone-green-300: var(--green-300); + --tone-green-400: var(--green-400); + --tone-green-500: var(--green-500); + --tone-green-600: var(--green-600); + --tone-green-700: var(--green-700); + --tone-green-800: var(--green-800); + --tone-green-850: var(--green-850); + --tone-green-900: var(--green-900); + --tone-green-950: var(--green-950); + --tone-green-999: var(--black); + + --tone-blue-000: var(--white); + --tone-blue-050: var(--blue-050); + --tone-blue-100: var(--blue-100); + --tone-blue-150: var(--blue-150); + --tone-blue-200: var(--blue-200); + --tone-blue-300: var(--blue-300); + --tone-blue-400: var(--blue-400); + --tone-blue-500: var(--blue-500); + --tone-blue-600: var(--blue-600); + --tone-blue-700: var(--blue-700); + --tone-blue-800: var(--blue-800); + --tone-blue-850: var(--blue-850); + --tone-blue-900: var(--blue-900); + --tone-blue-950: var(--blue-950); + --tone-blue-999: var(--black); + + --tone-red-000: var(--white); + --tone-red-050: var(--red-050); + --tone-red-100: var(--red-100); + --tone-red-150: var(--red-150); + --tone-red-200: var(--red-200); + --tone-red-300: var(--red-300); + --tone-red-400: var(--red-400); + --tone-red-500: var(--red-500); + --tone-red-600: var(--red-600); + --tone-red-700: var(--red-700); + --tone-red-800: var(--red-800); + --tone-red-850: var(--red-850); + --tone-red-900: var(--red-900); + --tone-red-950: var(--red-950); + --tone-red-999: var(--black); + + --tone-orange-000: var(--white); + --tone-orange-050: var(--orange-050); + --tone-orange-100: var(--orange-100); + --tone-orange-150: var(--orange-150); + --tone-orange-200: var(--orange-200); + --tone-orange-300: var(--orange-300); + --tone-orange-400: var(--orange-400); + --tone-orange-500: var(--orange-500); + --tone-orange-600: var(--orange-600); + --tone-orange-700: var(--orange-700); + --tone-orange-800: var(--orange-800); + --tone-orange-850: var(--orange-850); + --tone-orange-900: var(--orange-900); + --tone-orange-950: var(--orange-950); + --tone-orange-999: var(--black); + + --tone-yellow-000: var(--white); + --tone-yellow-050: var(--yellow-050); + --tone-yellow-100: var(--yellow-100); + --tone-yellow-150: var(--yellow-150); + --tone-yellow-200: var(--yellow-200); + --tone-yellow-300: var(--yellow-300); + --tone-yellow-400: var(--yellow-400); + --tone-yellow-500: var(--yellow-500); + --tone-yellow-600: var(--yellow-600); + --tone-yellow-700: var(--yellow-700); + --tone-yellow-800: var(--yellow-800); + --tone-yellow-850: var(--yellow-850); + --tone-yellow-900: var(--yellow-900); + --tone-yellow-950: var(--yellow-950); + --tone-yellow-999: var(--black); + + --tone-yellow-000: var(--white); + --tone-yellow-050: var(--yellow-050); + --tone-yellow-100: var(--yellow-100); + --tone-yellow-150: var(--yellow-150); + --tone-yellow-200: var(--yellow-200); + --tone-yellow-300: var(--yellow-300); + --tone-yellow-400: var(--yellow-400); + --tone-yellow-500: var(--yellow-500); + --tone-yellow-600: var(--yellow-600); + --tone-yellow-700: var(--yellow-700); + --tone-yellow-800: var(--yellow-800); + --tone-yellow-850: var(--yellow-850); + --tone-yellow-900: var(--yellow-900); + --tone-yellow-950: var(--yellow-950); + --tone-yellow-999: var(--black); + + --tone-transparent: var(--transparent); +} diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss new file mode 100644 index 000000000..8584bfbd2 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss @@ -0,0 +1,115 @@ +%theme-light { + --tone-gray-000: var(--white); + --tone-gray-050: var(--gray-050); + --tone-gray-100: var(--gray-100); + --tone-gray-150: var(--gray-150); + --tone-gray-200: var(--gray-200); + --tone-gray-300: var(--gray-300); + --tone-gray-400: var(--gray-400); + --tone-gray-500: var(--gray-500); + --tone-gray-600: var(--gray-600); + --tone-gray-700: var(--gray-700); + --tone-gray-800: var(--gray-800); + --tone-gray-850: var(--gray-850); + --tone-gray-900: var(--gray-900); + --tone-gray-950: var(--gray-950); + --tone-gray-999: var(--black); + + --tone-green-000: var(--white); + --tone-green-050: var(--green-050); + --tone-green-100: var(--green-100); + --tone-green-150: var(--green-150); + --tone-green-200: var(--green-200); + --tone-green-300: var(--green-300); + --tone-green-400: var(--green-400); + --tone-green-500: var(--green-500); + --tone-green-600: var(--green-600); + --tone-green-700: var(--green-700); + --tone-green-800: var(--green-800); + --tone-green-850: var(--green-850); + --tone-green-900: var(--green-900); + --tone-green-950: var(--green-950); + --tone-green-999: var(--black); + + --tone-blue-000: var(--white); + --tone-blue-050: var(--blue-050); + --tone-blue-100: var(--blue-100); + --tone-blue-150: var(--blue-150); + --tone-blue-200: var(--blue-200); + --tone-blue-300: var(--blue-300); + --tone-blue-400: var(--blue-400); + --tone-blue-500: var(--blue-500); + --tone-blue-600: var(--blue-600); + --tone-blue-700: var(--blue-700); + --tone-blue-800: var(--blue-800); + --tone-blue-850: var(--blue-850); + --tone-blue-900: var(--blue-900); + --tone-blue-950: var(--blue-950); + --tone-blue-999: var(--black); + + --tone-red-000: var(--white); + --tone-red-050: var(--red-050); + --tone-red-100: var(--red-100); + --tone-red-150: var(--red-150); + --tone-red-200: var(--red-200); + --tone-red-300: var(--red-300); + --tone-red-400: var(--red-400); + --tone-red-500: var(--red-500); + --tone-red-600: var(--red-600); + --tone-red-700: var(--red-700); + --tone-red-800: var(--red-800); + --tone-red-850: var(--red-850); + --tone-red-900: var(--red-900); + --tone-red-950: var(--red-950); + --tone-red-999: var(--black); + + --tone-orange-000: var(--white); + --tone-orange-050: var(--orange-050); + --tone-orange-100: var(--orange-100); + --tone-orange-150: var(--orange-150); + --tone-orange-200: var(--orange-200); + --tone-orange-300: var(--orange-300); + --tone-orange-400: var(--orange-400); + --tone-orange-500: var(--orange-500); + --tone-orange-600: var(--orange-600); + --tone-orange-700: var(--orange-700); + --tone-orange-800: var(--orange-800); + --tone-orange-850: var(--orange-850); + --tone-orange-900: var(--orange-900); + --tone-orange-950: var(--orange-950); + --tone-orange-999: var(--black); + + --tone-yellow-000: var(--white); + --tone-yellow-050: var(--yellow-050); + --tone-yellow-100: var(--yellow-100); + --tone-yellow-150: var(--yellow-150); + --tone-yellow-200: var(--yellow-200); + --tone-yellow-300: var(--yellow-300); + --tone-yellow-400: var(--yellow-400); + --tone-yellow-500: var(--yellow-500); + --tone-yellow-600: var(--yellow-600); + --tone-yellow-700: var(--yellow-700); + --tone-yellow-800: var(--yellow-800); + --tone-yellow-850: var(--yellow-850); + --tone-yellow-900: var(--yellow-900); + --tone-yellow-950: var(--yellow-950); + --tone-yellow-999: var(--black); + + --tone-yellow-000: var(--white); + --tone-yellow-050: var(--yellow-050); + --tone-yellow-100: var(--yellow-100); + --tone-yellow-150: var(--yellow-150); + --tone-yellow-200: var(--yellow-200); + --tone-yellow-300: var(--yellow-300); + --tone-yellow-400: var(--yellow-400); + --tone-yellow-500: var(--yellow-500); + --tone-yellow-600: var(--yellow-600); + --tone-yellow-700: var(--yellow-700); + --tone-yellow-800: var(--yellow-800); + --tone-yellow-850: var(--yellow-850); + --tone-yellow-900: var(--yellow-900); + --tone-yellow-950: var(--yellow-950); + --tone-yellow-999: var(--black); + + --tone-transparent: var(--transparent); +} diff --git a/ui/packages/consul-ui/app/styles/base/decoration/base-variables.scss b/ui/packages/consul-ui/app/styles/base/decoration/base-variables.scss index 2e983a97a..1f81189b9 100644 --- a/ui/packages/consul-ui/app/styles/base/decoration/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/decoration/base-variables.scss @@ -1,16 +1,22 @@ -$decor-radius-000: 0; -$decor-radius-100: 2px; -$decor-radius-200: 4px; -$decor-radius-300: 7px; -$decor-radius-full: 100%; -$decor-border-000: none; -$decor-border-100: 1px solid; -$decor-border-200: 2px solid; -$decor-border-300: 3px solid; -$decor-border-400: 4px solid; -$decor-elevation-100: 0 3px 2px rgba(0, 0, 0, 0.06); -$decor-elevation-200: 0 2px 4px rgba(0, 0, 0, 0.1); -$decor-elevation-300: 0 5px 1px -2px rgba($black, 0.12); -$decor-elevation-400: 0 6px 8px -2px rgba($black, 0.05), 0 8px 4px -4px rgba($black, 0.1); -$decor-elevation-600: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.1); -$decor-elevation-800: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.2); +:root { + /* worthwhile, or confusing ? */ + --decor-radius-000: 0; + --decor-radius-100: 2px; + --decor-radius-200: 4px; + --decor-radius-300: 7px; + --decor-radius-full: 100%; + + --decor-border-000: none; + --decor-border-100: 1px solid; + --decor-border-200: 2px solid; + --decor-border-300: 3px solid; + --decor-border-400: 4px solid; + + /* box-shadowing*/ + --decor-elevation-100: 0 3px 2px rgb(var(--black) / 6%); + --decor-elevation-200: 0 2px 4px rgb(var(--black) / 10%); + --decor-elevation-300: 0 5px 1px -2px rgb(var(--black) / 12%); + --decor-elevation-400: 0 6px 8px -2px rgb(var(--black) / 5%), 0 8px 4px -4px rgb(var(--black) / 10%); + --decor-elevation-600: 0 12px 5px -7px rgb(var(--black) / 8%), 0 11px 10px -3px rgb(var(--black) / 10%); + --decor-elevation-800: 0 16px 6px -10px rgb(var(--black) / 6%), 0 16px 16px -4px rgb(var(--black) / 20%); +} diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss index 15919996a..e8658c846 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss @@ -8,8 +8,8 @@ background-color: currentColor; } %with-glyph-icon { - font-weight: $typo-weight-normal; - background-color: $gray-100; + font-weight: var(--typo-weight-normal); + background-color: rgb(var(--tone-gray-100)); visibility: visible; padding: 0 4px; } diff --git a/ui/packages/consul-ui/app/styles/base/icons/overrides.scss b/ui/packages/consul-ui/app/styles/base/icons/overrides.scss index 9047bbfd7..b0cccf321 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/overrides.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/overrides.scss @@ -1,5 +1,5 @@ %without-mask { -webkit-mask-image: none; mask-image: none; - background-color: $transparent !important; + background-color: var(--transparent) !important; } diff --git a/ui/packages/consul-ui/app/styles/base/reset/index.scss b/ui/packages/consul-ui/app/styles/base/reset/index.scss index 8a7dce89c..0aec96d2d 100644 --- a/ui/packages/consul-ui/app/styles/base/reset/index.scss +++ b/ui/packages/consul-ui/app/styles/base/reset/index.scss @@ -1,6 +1,3 @@ @import './base-variables'; -@import '../color/base-variables'; -@import '../color/semantic-variables'; -@import '../typography/base-variables'; @import './system'; @import './minireset'; diff --git a/ui/packages/consul-ui/app/styles/base/reset/minireset.scss b/ui/packages/consul-ui/app/styles/base/reset/minireset.scss index b469bf940..73b910763 100644 --- a/ui/packages/consul-ui/app/styles/base/reset/minireset.scss +++ b/ui/packages/consul-ui/app/styles/base/reset/minireset.scss @@ -60,5 +60,6 @@ footer, header, hgroup, section { - display: block; + display: block } + diff --git a/ui/packages/consul-ui/app/styles/base/reset/system.scss b/ui/packages/consul-ui/app/styles/base/reset/system.scss index b44318a6f..f2357b386 100644 --- a/ui/packages/consul-ui/app/styles/base/reset/system.scss +++ b/ui/packages/consul-ui/app/styles/base/reset/system.scss @@ -1,31 +1,29 @@ a { text-decoration: none; } -td, -th, -span, -strong { +td, th, +span, strong { color: inherit; } /* %typo-body */ body { - color: var(--gray-900); + color: rgb(var(--tone-gray-900)); } -/* TODO: Consider changing this to 'p a, dd a, td a' etc etc*/ +/* TODO: Consider changing this to 'p a, dd a, td a' etc etc */ a { - color: $color-action; + color: rgb(var(--color-action)); } html { - background-color: $white; + background-color: rgb(var(--tone-gray-000)); } hr { - background-color: $gray-500; + background-color: rgb(var(--tone-gray-200)); } button { - background-color: $transparent; + background-color: var(--transparent); } html { - font-size: $typo-size-000; + font-size: var(--typo-size-000); } /* %typo-body */ body { @@ -36,15 +34,15 @@ button, input, select, textarea { - font-family: $typo-family-sans; + font-family: var(--typo-family-sans); } code, pre { - font-family: $typo-family-mono; + font-family: var(--typo-family-mono); } strong { font-style: inherit; - font-weight: $typo-weight-bold; + font-weight: var(--typo-weight-bold); } html { text-rendering: optimizeLegibility; @@ -71,9 +69,7 @@ html { html { box-sizing: border-box; } -*, -*::before, -*::after { +*, *::before, *::after { box-sizing: inherit; } fieldset { @@ -89,8 +85,8 @@ hr { border: none; display: block; } -input[type='checkbox'], -input[type='radio'] { +input[type="checkbox"], +input[type="radio"] { vertical-align: baseline; } td, @@ -104,5 +100,4 @@ html { hr { height: 1px; margin: 1.5rem 0; - background-color: var(--gray-200); } diff --git a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss index 95a60a106..e72401552 100644 --- a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss @@ -5,12 +5,12 @@ font-style: inherit; } %typo-body { - font-size: $typo-size-600; - font-family: $typo-family-sans; - line-height: $typo-lead-700; + font-size: var(--typo-size-600); + font-family: var(--typo-family-sans); + line-height: var(--typo-lead-700); } %typo-header { - line-height: $typo-lead-200; + line-height: var(--typo-lead-200); } %h000, %h100, @@ -25,37 +25,37 @@ @extend %typo-header; } %h100 { - font-weight: $typo-weight-bold; + font-weight: var(--typo-weight-bold); } %h200, %h300, %h400 { - font-weight: $typo-weight-semibold; + font-weight: var(--typo-weight-semibold); } %h500, %h600 { - font-weight: $typo-weight-medium; + font-weight: var(--typo-weight-medium); } %h000 { - font-size: $typo-size-100; + font-size: var(--typo-size-100); } %h100 { - font-size: $typo-size-200; + font-size: var(--typo-size-200); } %h200 { - font-size: $typo-size-300; + font-size: var(--typo-size-300); } %h300 { - font-size: $typo-size-500; + font-size: var(--typo-size-500); } /*p1 strong, differing weights */ %h400, %h500 { - font-size: $typo-size-600; + font-size: var(--typo-size-600); } /*p2 strong */ %h600 { - font-size: $typo-size-700; + font-size: var(--typo-size-700); } %typo-p { line-height: inherit; @@ -68,11 +68,11 @@ @extend %typo-p; } %p1 { - font-size: $typo-size-600; + font-size: var(--typo-size-600); } %p2 { - font-size: $typo-size-700; + font-size: var(--typo-size-700); } %p3 { - font-size: $typo-size-800; + font-size: var(--typo-size-800); } diff --git a/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss b/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss index 706e390a7..0c271067e 100644 --- a/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss @@ -1,27 +1,46 @@ -$typo-family-sans: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', - 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; -$typo-family-mono: monospace; -$typo-size-000: 16px; -$typo-size-100: 3.5rem; -$typo-size-200: 1.8rem; -$typo-size-300: 1.3rem; -$typo-size-400: 1.2rem; -$typo-size-450: 1.125rem; -$typo-size-500: 1rem; -$typo-size-600: 0.875rem; -$typo-size-700: 0.8125rem; -$typo-size-800: 0.75rem; -$typo-weight-light: 300; -$typo-weight-normal: 400; -$typo-weight-medium: 500; -$typo-weight-semibold: 600; -$typo-weight-bold: 700; -$typo-lead-000: 0; -$typo-lead-050: 1; -$typo-lead-100: 1.2; -$typo-lead-200: 1.25; -$typo-lead-300: 1.28; -$typo-lead-500: 1.33; -$typo-lead-600: 1.4; -$typo-lead-700: 1.5; -$typo-lead-800: 1.7; +:root { + /* families */ + /* -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */ + --typo-family-sans: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + --typo-family-mono: monospace; + + /* sizes */ + /* --typo-size-inherit: inherit; worthwhile? */ + --typo-size-000: 16px; + /* TODO: Numbering of these should possibly be reversed, more likely to add bigger*/ + /* also maybe use 100, 200 etc like colors */ + --typo-size-100: 3.5rem; + --typo-size-200: 1.8rem; + --typo-size-300: 1.3rem; + /* mktg only ^ */ + --typo-size-400: 1.2rem; /* $size-large? 24 */ + --typo-size-450: 1.125rem; + --typo-size-500: 1rem; /* $size-medium? // 18 */ + --typo-size-600: 0.875rem; /* $size-normal? // 14 */ + --typo-size-700: 0.8125rem; /* $size-small? // 13 */ + --typo-size-800: 0.75rem; /* $size-small? // 12 */ + + /* weights */ + --typo-weight-light: 300; + --typo-weight-normal: 400; + --typo-weight-medium: 500; + --typo-weight-semibold: 600; + --typo-weight-bold: 700; + + /* line-heights. lead/leading is easier to write */ + /* is this worthwhile? Should we use font-size relative?*/ + /* DS uses ~ 1.3 */ + --typo-lead-000: 0; + --typo-lead-050: 1; + --typo-lead-100: 1.2; + --typo-lead-200: 1.25; + --typo-lead-300: 1.28; + --typo-lead-500: 1.33; + --typo-lead-600: 1.4; + --typo-lead-700: 1.5; + --typo-lead-800: 1.7; + + /* letter-spacing. kern is easier to write*/ + /* --typo-kern-000: normal; */ + /* --typo-kern-100: 1px; */ +} diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss index fb1a9e18c..6fe7aae1a 100644 --- a/ui/packages/consul-ui/app/styles/debug.scss +++ b/ui/packages/consul-ui/app/styles/debug.scss @@ -122,7 +122,7 @@ html.with-route-announcer .route-title { border-top: 1px solid; border-left: 1px solid; border-right: 1px solid; - border-color: var(--gray-200); + border-color: rgb(var(--tone-gray-200)); padding: 1rem; margin-bottom: 0; } @@ -135,19 +135,19 @@ html.with-route-announcer .route-title { } figcaption { margin-bottom: 0.5rem; - color: var(--gray-400); + color: rgb(var(--tone-gray-400)); font-style: italic; } figcaption code { @extend %inline-code; } figure > [type='text'] { - border: 1px solid var(--gray-999); + border: 1px solid rgb(var(--tone-gray-999)); width: 100%; padding: 0.5rem; } figure > select { - border: 1px solid var(--gray-999); + border: 1px solid rgb(var(--tone-gray-999)); padding: 0.5rem; } } diff --git a/ui/packages/consul-ui/app/styles/layouts/index.scss b/ui/packages/consul-ui/app/styles/layouts/index.scss index 892a73f4d..f76eac0f2 100644 --- a/ui/packages/consul-ui/app/styles/layouts/index.scss +++ b/ui/packages/consul-ui/app/styles/layouts/index.scss @@ -26,7 +26,7 @@ fieldset [role='group'] { [role='group'] fieldset:not(:first-of-type) { padding-left: 20px; border-left: 1px solid; - border-left: $gray-500; + border-left: rgb(var(--tone-gray-500)); } [role='group'] fieldset:not(:last-of-type) { padding-right: 20px; diff --git a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss index 02228a2e7..ac0c58023 100644 --- a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss +++ b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss @@ -6,17 +6,17 @@ html[data-route^='dc.services.instance'] .app-view > header dl { margin-right: 50px; } html[data-route^='dc.services.instance'] .app-view > header dt { - font-weight: $typo-weight-bold; + font-weight: var(--typo-weight-bold); } html[data-route^='dc.services.instance'] .tab-nav { - border-top: $decor-border-100; + border-top: var(--decor-border-100); } html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) { - border-bottom: $decor-border-100; + border-bottom: var(--decor-border-100); } html[data-route^='dc.services.instance'] .tab-nav, html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) { - border-color: var(--gray-200); + border-color: rgb(var(--tone-gray-200)); } html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) { padding-bottom: 24px; diff --git a/ui/packages/consul-ui/app/styles/themes.scss b/ui/packages/consul-ui/app/styles/themes.scss index a29b1c68a..76cc630e6 100644 --- a/ui/packages/consul-ui/app/styles/themes.scss +++ b/ui/packages/consul-ui/app/styles/themes.scss @@ -1,3 +1,6 @@ +@import './base/color/ui/index'; +@import './base/color/magenta/index'; +@import './base/color/strawberry/index'; :root { @extend %theme-light; } @@ -8,5 +11,5 @@ } %main-nav-vertical .menu-panel a:hover, %main-nav-vertical .menu-panel a:focus { - background-color: var(--blue-500); + background-color: rgb(var(--tone-blue-500)); } diff --git a/ui/packages/consul-ui/app/styles/typography.scss b/ui/packages/consul-ui/app/styles/typography.scss index 3bacf5e4c..c3e5a7420 100644 --- a/ui/packages/consul-ui/app/styles/typography.scss +++ b/ui/packages/consul-ui/app/styles/typography.scss @@ -55,7 +55,7 @@ pre code, } %radio-group label { - line-height: $typo-lead-200; + line-height: var(--typo-lead-200); } %tab-nav { letter-spacing: 0.03em; @@ -65,12 +65,12 @@ pre code, /* strong %p3 */ %form-element-label, %button { - font-weight: $typo-weight-semibold; + font-weight: var(--typo-weight-semibold); } %route-card section dt, %route-card header:not(.short) dd, %splitter-card > header { - font-weight: $typo-weight-bold; + font-weight: var(--typo-weight-bold); } /**/ @@ -83,7 +83,7 @@ pre code, %tbody-th em, %app-view h1 em, %route-card header dt { - font-weight: $typo-weight-normal; + font-weight: var(--typo-weight-normal); } %form-element-note, @@ -95,8 +95,8 @@ pre code, /* composite row */ %composite-row-header { - font-size: $typo-size-450; - font-weight: $typo-weight-medium; + font-size: var(--typo-size-450); + font-weight: var(--typo-weight-medium); } %composite-row-header *:not(button) { font-size: inherit; @@ -107,7 +107,7 @@ pre code, /* TODO: We have nothing else with a 500 */ /* either make this the biggest %p or don't use it */ %app-view h1 em { - font-size: $typo-size-500; + font-size: var(--typo-size-500); } /*TODO: This should go in reset, and probably needs select etc adding */ @media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) { diff --git a/ui/packages/consul-ui/app/styles/variables/skin.scss b/ui/packages/consul-ui/app/styles/variables/skin.scss index c0aea2172..fec5b81ff 100644 --- a/ui/packages/consul-ui/app/styles/variables/skin.scss +++ b/ui/packages/consul-ui/app/styles/variables/skin.scss @@ -4,29 +4,23 @@ // potentially see if our compiler can automatically remove // unused CSS props :root { - --white: #{$white}; - --decor-border-100: #{$decor-border-100}; - --decor-radius-200: #{$decor-radius-200}; - --gray-500: #{$gray-500}; - --decor-elevation-600: #{$decor-elevation-600}; - /* base brand colors */ - --brand-050: #{$magenta-050}; - --brand-100: #{$rose-100}; - // --brand-200: #{$magenta-200}; - // --brand-300: #{$magenta-300}; - // --brand-400: #{$magenta-400}; - // --brand-500: #{$magenta-500}; + --brand-050: var(--tone-magenta-050); + --brand-100: var(--tone-strawberry-100); + // rgb(var(--brand-200)): #{rgb(var(--tone-magenta-200))}; + // rgb(var(--brand-300)): #{rgb(var(--tone-magenta-300))}; + // rgb(var(--brand-400)): #{rgb(var(--tone-magenta-400))}; + // rgb(var(--brand-500)): #{rgb(var(--tone-magenta-500))}; /* temporary rose-like color until its replaced by a numbered one */ - --brand-600: #e03875; - // --brand-700: #{$magenta-700}; - --brand-800: #{$magenta-800}; - // --brand-900: #{$magenta-900}; + --brand-600: 224 56 117; + // rgb(var(--brand-700)): #{rgb(var(--tone-magenta-700))}; + --brand-800: var(--tone-magenta-800); + // rgb(var(--brand-900)): #{rgb(var(--tone-magenta-900))}; /* themeable ui colors */ - --typo-action-500: #{$blue-500}; - --decor-error-500: #{$red-500}; - --typo-contrast-999: #{$black}; + --typo-action-500: var(--tone-blue-500); + --decor-error-500: var(--tone-red-500); + --typo-contrast-999: var(--black); /* themeable brand colors */ --typo-brand-050: var(--brand-050);