diff --git a/ui-v2/app/styles/base/color/base-variables.scss b/ui-v2/app/styles/base/color/base-variables.scss index b31e096c9a..accc1466d4 100644 --- a/ui-v2/app/styles/base/color/base-variables.scss +++ b/ui-v2/app/styles/base/color/base-variables.scss @@ -1,133 +1,133 @@ -$brand-gray-050: #f5f6f7; -$brand-gray-100: #e1e4e7; -$brand-gray-200: #cdd3d7; -$brand-gray-300: #b9c1c7; -$brand-gray-400: #a5b0b7; -$brand-gray-500: #919fa8; -$brand-gray-600: #77838a; -$brand-gray-700: #5d666b; -$brand-gray-800: #42494d; -$brand-gray-900: #282c2e; -$brand-magenta-050: #f9ebf2; -$brand-magenta-100: #efc4d8; -$brand-magenta-200: #e59ebe; -$brand-magenta-300: #da77a4; -$brand-magenta-400: #d0508a; -$brand-magenta-500: #c62a71; -$brand-magenta-600: #9e2159; -$brand-magenta-700: #7d1a47; -$brand-magenta-800: #5a1434; -$brand-magenta-900: #360c1f; -$brand-blue-050: #f0f5ff; -$brand-blue-100: #bfd4ff; -$brand-blue-200: #8ab1ff; -$brand-blue-300: #5b92ff; -$brand-blue-400: #387aff; -$brand-blue-500: #1563ff; -$brand-blue-600: #0f4fd1; -$brand-blue-700: #0e40a3; -$brand-blue-800: #0a2d74; -$brand-blue-900: #061b46; -$brand-purple-050: #eeedfc; -$brand-purple-100: #d5d2f7; -$brand-purple-200: #aea7f2; -$brand-purple-300: #8d83ed; -$brand-purple-400: #7568e8; -$brand-purple-500: #5c4ee5; -$brand-purple-600: #4c40bc; -$brand-purple-700: #3b3292; -$brand-purple-800: #2a2469; -$brand-purple-900: #1a163f; -$brand-teal-050: #ebf8f3; -$brand-teal-100: #c3ecdc; -$brand-teal-200: #9bdfc5; -$brand-teal-300: #74d3ae; -$brand-teal-400: #4cc679; -$brand-teal-500: #25ba81; -$brand-teal-600: #1f996a; -$brand-teal-700: #187753; -$brand-teal-800: #11553b; -$brand-teal-900: #0b3324; -$brand-cyan-050: #e7f8ff; -$brand-cyan-100: #b9ecff; -$brand-cyan-200: #8be0ff; -$brand-cyan-300: #5cd3ff; -$brand-cyan-400: #2ec7ff; -$brand-cyan-500: #00bbff; -$brand-cyan-600: #009fd9; -$brand-cyan-700: #0077a3; -$brand-cyan-800: #005574; -$brand-cyan-900: #003346; -$ui-gray-1: #191a1c; -$ui-gray-2: #323538; -$ui-gray-3: #4c4f54; -$ui-gray-4: #656a70; -$ui-gray-5: #7f858d; -$ui-gray-6: #9a9ea5; -$ui-gray-7: #b4b8bc; -$ui-gray-8: #d0d2d5; -$ui-gray-9: #ebecee; -$ui-gray-10: #f3f4f6; -$ui-gray-050: #f7f8fa; -$ui-gray-100: #ebeef2; -$ui-gray-200: #dce0e6; -$ui-gray-300: #bac1cc; -$ui-gray-400: #8e96a3; -$ui-gray-500: #6f7682; -$ui-gray-600: #626873; -$ui-gray-700: #525761; -$ui-gray-800: #373a42; -$ui-gray-900: #1f2124; -$ui-green-050: #ecf7ed; -$ui-green-100: #c6e9c9; -$ui-green-200: #a0dba5; -$ui-green-300: #7acc81; -$ui-green-400: #54be5d; -$ui-green-500: #2eb039; -$ui-green-600: #26912f; -$ui-green-700: #1e7125; -$ui-green-800: #15501a; -$ui-green-900: #0d3010; -$ui-blue-050: #f0f5ff; -$ui-blue-100: #bfd4ff; -$ui-blue-200: #8ab1ff; -$ui-blue-300: #5b92ff; -$ui-blue-400: #387aff; -$ui-blue-500: #1563ff; -$ui-blue-600: #0f4fd1; -$ui-blue-700: #0e40a3; -$ui-blue-800: #0a2d74; -$ui-blue-900: #061b46; -$ui-red-050: #f9ecee; -$ui-red-100: #efc7cc; -$ui-red-200: #e5a2aa; -$ui-red-300: #db7d88; -$ui-red-400: #d15866; -$ui-red-500: #c73445; -$ui-red-600: #a32b39; -$ui-red-700: #7f222c; -$ui-red-800: #5b1820; -$ui-red-900: #370f13; -$ui-orange-050: #fef4ec; -$ui-orange-100: #fde0c8; -$ui-orange-200: #fccca4; -$ui-orange-300: #fbb77f; -$ui-orange-400: #faa35b; -$ui-orange-500: #fa8f37; -$ui-orange-600: #cd762e; -$ui-orange-700: #a05c23; -$ui-orange-800: #724119; -$ui-orange-900: #45270f; -$ui-yellow-050: #fffbed; -$ui-yellow-100: #fdeeba; -$ui-yellow-200: #fce48c; -$ui-yellow-300: #fbd95e; -$ui-yellow-400: #face30; -$ui-yellow-500: #fac402; -$ui-yellow-600: #cda102; -$ui-yellow-700: #a07d02; -$ui-yellow-800: #725a01; -$ui-yellow-900: #453601; +$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; +$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-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-050: #f7f8fa; +$gray-100: #ebeef2; +$gray-200: #dce0e6; +$gray-300: #bac1cc; +$gray-400: #8e96a3; +$gray-500: #6f7682; +$gray-600: #626873; +$gray-700: #525761; +$gray-800: #373a42; +$gray-900: #1f2124; +$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-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-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; -$ui-white: #fff; -$ui-black: #000; +$white: #fff; +$black: #000; diff --git a/ui-v2/app/styles/base/color/frame-placeholders.scss b/ui-v2/app/styles/base/color/frame-placeholders.scss index e4843ed790..fa1aa302a4 100644 --- a/ui-v2/app/styles/base/color/frame-placeholders.scss +++ b/ui-v2/app/styles/base/color/frame-placeholders.scss @@ -5,82 +5,153 @@ %frame-border-000 { /* same as decor-border-000 - but need to think about being able to import color on its own*/ border-style: solid; - // border-width: 0; } -%frame-yellow-500 { + +/* possibly filter bar */ +/* modal close button */ +%frame-gray-050 { @extend %frame-border-000; - background-color: $ui-yellow-050; - border-color: $ui-color-warning; + background-color: $gray-050; + border-color: $gray-300; + color: $gray-400; } -%frame-green-500 { +/* modal main content */ +%frame-gray-100 { @extend %frame-border-000; - background-color: $ui-green-050; - border-color: $ui-green-500; - color: $ui-green-500; + 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: $ui-gray-050; - border-color: $ui-gray-300; - color: $ui-gray-400; + 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-green-500 { + @extend %frame-border-000; + background-color: $green-050; + border-color: $green-500; + color: $green-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: $ui-blue-200; - border-color: $ui-gray-400; - color: $ui-blue-050; + background-color: $blue-200; + border-color: $gray-400; + color: $blue-050; } %frame-blue-700 { @extend %frame-border-000; - background-color: $ui-blue-400; - border-color: $ui-blue-800; - color: $ui-white; + background-color: $blue-400; + border-color: $blue-800; + color: $white; } %frame-blue-800 { @extend %frame-border-000; - background-color: $ui-blue-500; - border-color: $ui-blue-800; - color: $ui-white; + background-color: $blue-500; + border-color: $blue-800; + color: $white; } %frame-blue-900 { @extend %frame-border-000; - background-color: $ui-blue-700; - border-color: $ui-blue-800; - color: $ui-white; + background-color: $blue-700; + border-color: $blue-800; + color: $white; } %frame-red-300 { @extend %frame-border-000; - background-color: $ui-white; - border-color: $ui-red-500; - color: $ui-red-500; + background-color: $white; + border-color: $red-500; + color: $red-500; } %frame-red-500 { @extend %frame-border-000; - background-color: $ui-red-050; - border-color: $ui-red-500; - color: $ui-red-800; + background-color: $red-050; + border-color: $red-500; + color: $red-800; } %frame-red-600 { @extend %frame-border-000; - background-color: $ui-red-200; - border-color: $ui-gray-400; - color: $ui-white; + background-color: $red-200; + border-color: $gray-400; + color: $white; } %frame-red-700 { @extend %frame-border-000; - background-color: $ui-red-500; - border-color: $ui-red-800; - color: $ui-white; + background-color: $red-500; + border-color: $red-800; + color: $white; } %frame-red-900 { @extend %frame-border-000; - background-color: $ui-red-700; - border-color: $ui-red-800; - color: $ui-white; + background-color: $red-700; + border-color: $red-800; + color: $white; } %frame-magenta-300 { @extend %frame-border-000; - background-color: $ui-white; - border-color: $brand-magenta-600; - color: $brand-magenta-600; + background-color: $white; + border-color: $magenta-600; + color: $magenta-600; } diff --git a/ui-v2/app/styles/base/color/semantic-variables.scss b/ui-v2/app/styles/base/color/semantic-variables.scss index 32cb0fa149..14d545e43c 100644 --- a/ui-v2/app/styles/base/color/semantic-variables.scss +++ b/ui-v2/app/styles/base/color/semantic-variables.scss @@ -1,12 +1,12 @@ -$ui-color-primary: $ui-blue-500; -$ui-color-dangerous: $ui-red-500; -$ui-color-primary-disabled: $ui-blue-500; -$ui-color-transparent: transparent; -$ui-color-neutral: $ui-gray-500; -$ui-color-action: $ui-blue-500; -$ui-color-info: $ui-blue-500; -$ui-color-success: $ui-green-500; -$ui-color-failure: $ui-red-500; -$ui-color-danger: $ui-red-500; -$ui-color-warning: $ui-yellow-500; -$ui-color-alert: $ui-orange-500; +$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; diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss new file mode 100644 index 0000000000..e63eeb0642 --- /dev/null +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -0,0 +1,98 @@ +$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-svg: url('data:image/svg+xml;charset=UTF-8,'); +$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$code-svg: url('data:image/svg+xml;charset=UTF-8,'); +$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,'); +$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,'); +$disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); +$download-svg: url('data:image/svg+xml;charset=UTF-8,'); +$edit-svg: url('data:image/svg+xml;charset=UTF-8,'); +$exit-svg: url('data:image/svg+xml;charset=UTF-8,'); +$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,'); +$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,'); +$eye-svg: url('data:image/svg+xml;charset=UTF-8,'); +$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$filter-svg: url('data:image/svg+xml;charset=UTF-8,'); +$flag-svg: url('data:image/svg+xml;charset=UTF-8,'); +$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,'); +$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,'); +$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,'); +$hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); +$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$history-svg: url('data:image/svg+xml;charset=UTF-8,'); +$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$link-svg: url('data:image/svg+xml;charset=UTF-8,'); +$loading-svg: url('data:image/svg+xml;charset=UTF-8,'); +$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,'); +$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); +$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,'); +$menu-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-svg: url('data:image/svg+xml;charset=UTF-8,'); +$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); +$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); +$nomad-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$queue-svg: url('data:image/svg+xml;charset=UTF-8,'); +$refresh-svg: url('data:image/svg+xml;charset=UTF-8,'); +$run-svg: url('data:image/svg+xml;charset=UTF-8,'); +$search-svg: url('data:image/svg+xml;charset=UTF-8,'); +$settings-svg: url('data:image/svg+xml;charset=UTF-8,'); +$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$star-svg: url('data:image/svg+xml;charset=UTF-8,'); +$sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +$sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); +$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); +$terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$tier-enterprise-svg: url('data:image/svg+xml;charset=UTF-8,'); +$tier-oss-svg: url('data:image/svg+xml;charset=UTF-8,'); +$trash-svg: url('data:image/svg+xml;charset=UTF-8,'); +$tune-svg: url('data:image/svg+xml;charset=UTF-8,'); +$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,'); +$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,'); +$upload-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-team-svg: url('data:image/svg+xml;charset=UTF-8,'); +$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,'); +$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui-v2/app/styles/base/icons/index.scss b/ui-v2/app/styles/base/icons/index.scss index 9d228363d3..bb221c7e8f 100644 --- a/ui-v2/app/styles/base/icons/index.scss +++ b/ui-v2/app/styles/base/icons/index.scss @@ -1,14 +1 @@ -$star-svg: url('data:image/svg+xml;charset=UTF-8,'); -$eye-svg: url('data:image/svg+xml;charset=UTF-8,'); - -$chevron-svg: url('data:image/svg+xml;charset=UTF-8,'); - -$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); - -$loading-svg: url('data:image/svg+xml;charset=UTF-8,'); - -$hashicorp-svg: url('data:image/svg+xml;charset=UTF-8,'); - -$consul-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$nomad-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$terraform-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +@import './base-variables'; diff --git a/ui-v2/app/styles/base/reset/system.scss b/ui-v2/app/styles/base/reset/system.scss index 27d5d3797b..8f42d0169e 100644 --- a/ui-v2/app/styles/base/reset/system.scss +++ b/ui-v2/app/styles/base/reset/system.scss @@ -8,16 +8,16 @@ strong { color: inherit; } body { - color: $ui-gray-900; + color: $gray-900; } a { - color: $ui-color-action; + color: $color-action; } html { - background-color: $ui-white; + background-color: $white; } hr { - background-color: $ui-gray-500; + background-color: $gray-500; } html { font-size: $typo-size-000; diff --git a/ui-v2/app/styles/components/action-group/skin.scss b/ui-v2/app/styles/components/action-group/skin.scss index ac46082e59..73e72a2a9c 100644 --- a/ui-v2/app/styles/components/action-group/skin.scss +++ b/ui-v2/app/styles/components/action-group/skin.scss @@ -2,7 +2,8 @@ @extend %toggle-button; } %action-group input[type='radio']:checked + label:first-of-type { - background-color: $ui-gray-050; + /* frame-gray */ + background-color: $gray-050; } %action-group label { cursor: pointer; @@ -23,13 +24,12 @@ } %action-group ul, %action-group ul::before { - border-color: $ui-color-action; + border-color: $color-action; } %action-group li a:hover { - background-color: $ui-color-action; - color: $ui-white; + @extend %frame-blue-800; } %action-group ul, %action-group ul::before { - background-color: $ui-white; + background-color: $white; } diff --git a/ui-v2/app/styles/components/anchors.scss b/ui-v2/app/styles/components/anchors.scss index 3d26d0764b..a4ac20ee7b 100644 --- a/ui-v2/app/styles/components/anchors.scss +++ b/ui-v2/app/styles/components/anchors.scss @@ -1,12 +1,12 @@ @import './anchors/index'; %main-content a { - color: $ui-gray-900; + color: $gray-900; } %main-content a[rel*='help'] { @extend %with-info; } %main-content label a[rel*='help'] { - color: $ui-gray-400; + color: $gray-400; } [role='tabpanel'] > p:only-child [rel*='help']::after { diff --git a/ui-v2/app/styles/components/anchors/index.scss b/ui-v2/app/styles/components/anchors/index.scss index 093b8f8936..9cd1c30b9d 100644 --- a/ui-v2/app/styles/components/anchors/index.scss +++ b/ui-v2/app/styles/components/anchors/index.scss @@ -6,5 +6,5 @@ %anchor:hover, %anchor:focus, %anchor:active { - color: $ui-color-action; + color: $color-action; } diff --git a/ui-v2/app/styles/components/app-view/skin.scss b/ui-v2/app/styles/components/app-view/skin.scss index ab4fd115d4..e0269410ff 100644 --- a/ui-v2/app/styles/components/app-view/skin.scss +++ b/ui-v2/app/styles/components/app-view/skin.scss @@ -7,15 +7,11 @@ border-color: $keyline-light; } %app-content div > dl > dd { - color: $ui-gray-400; + color: $gray-400; } [role='tabpanel'] > p:only-child, -.template-error > div { - background-color: $ui-gray-050; - color: $ui-gray-400; -} +.template-error > div, %app-content > p:only-child, %app-view > div.disabled > div { - background-color: $ui-gray-050; - color: $ui-gray-400; + @extend %frame-gray-500; } diff --git a/ui-v2/app/styles/components/breadcrumbs/skin.scss b/ui-v2/app/styles/components/breadcrumbs/skin.scss index 86f88cf495..6bbe41f288 100644 --- a/ui-v2/app/styles/components/breadcrumbs/skin.scss +++ b/ui-v2/app/styles/components/breadcrumbs/skin.scss @@ -5,5 +5,5 @@ list-style-type: none; } %breadcrumbs a { - color: $ui-color-action; + color: $color-action; } diff --git a/ui-v2/app/styles/components/buttons/skin.scss b/ui-v2/app/styles/components/buttons/skin.scss index af1af1b0b1..0ba5ebcd34 100644 --- a/ui-v2/app/styles/components/buttons/skin.scss +++ b/ui-v2/app/styles/components/buttons/skin.scss @@ -21,22 +21,23 @@ @extend %button; border-width: 1px; border-radius: $radius-small; - box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12); + box-shadow: 0 3px 1px 0 rgba($black, 0.12); } /* color */ %copy-button { - color: $ui-color-action; - background-color: $ui-color-transparent; + color: $color-action; + background-color: $color-transparent; } %copy-button:hover:not(:disabled):not(:active), %copy-button:focus { - color: $ui-color-action; - background-color: $ui-gray-050; + /*frame-grey frame-blue*/ + color: $color-action; + background-color: $gray-050; } %copy-button:disabled { } %copy-button:active { - background-color: $ui-gray-200; + background-color: $gray-200; } %primary-button { @extend %frame-blue-800; @@ -52,28 +53,22 @@ @extend %frame-blue-900; } /**/ -%secondary-button { - /* %frame-gray-something */ - color: $ui-gray-800; - background-color: $ui-gray-050; - border-color: $ui-gray-300; - border-style: solid; -} %secondary-button:hover:not(:disabled):not(:active), %secondary-button:focus { - /* %frame-gray-something */ - background-color: $ui-white; - color: $ui-gray-800; - border-color: $ui-gray-700; + @extend %frame-gray-300; +} +%secondary-button { + @extend %frame-gray-400; } %secondary-button:disabled { - color: $ui-gray-600; + color: $gray-600; } %secondary-button:active { /* %frame-gray-something */ - background-color: $ui-gray-200; - color: $ui-gray-800; - border-color: $ui-gray-700; + @extend %frame-gray-700; + background-color: $gray-200; + color: $gray-800; + border-color: $gray-700; } /**/ %dangerous-button { diff --git a/ui-v2/app/styles/components/code-editor/layout.scss b/ui-v2/app/styles/components/code-editor/layout.scss index 1410a65344..d2dbfac845 100644 --- a/ui-v2/app/styles/components/code-editor/layout.scss +++ b/ui-v2/app/styles/components/code-editor/layout.scss @@ -15,8 +15,8 @@ %code-editor-syntax-select { margin-top: 1px; border: 0; - background-color: $ui-black; - color: $ui-white; + background-color: $black; + color: $white; border-left: 1px solid; border-radius: 0; } @@ -25,7 +25,7 @@ bottom: 0px; width: 100%; height: 25px; - background-color: black; + background-color: $black; content: ''; display: block; } diff --git a/ui-v2/app/styles/components/code-editor/skin.scss b/ui-v2/app/styles/components/code-editor/skin.scss index e5d1c6395a..5053054fa6 100644 --- a/ui-v2/app/styles/components/code-editor/skin.scss +++ b/ui-v2/app/styles/components/code-editor/skin.scss @@ -12,13 +12,13 @@ $syntax-serf: #dd4e58; $syntax-packer: #1ddba3; // Our colors -$syntax-gray: lighten($ui-black, 89%); +$syntax-gray: lighten($black, 89%); $syntax-red: #ff3d3d; $syntax-green: #39b54a; $syntax-dark-gray: #535f73; $syntax-gutter-grey: #2a2f36; -$syntax-yellow: $ui-yellow-500; +$syntax-yellow: $yellow-500; .CodeMirror { max-width: 1150px; min-height: 300px; @@ -33,7 +33,7 @@ $syntax-yellow: $ui-yellow-500; background-color: #f9f9fa; border: 1px solid $syntax-light-gray; border-radius: 0; - color: lighten($ui-black, 13%); + color: lighten($black, 13%); font-family: $typo-family-mono; font-size: 13px; padding: 7px 8px 9px; @@ -42,7 +42,7 @@ $syntax-yellow: $ui-yellow-500; .cm-s-hashi { &.CodeMirror { width: 100%; - background-color: $ui-black !important; + background-color: $black !important; color: #cfd2d1 !important; border: none; font-family: $typo-family-mono; @@ -150,7 +150,7 @@ $syntax-yellow: $ui-yellow-500; .CodeMirror-matchingbracket { text-decoration: underline; - color: $ui-white !important; + color: $white !important; } } @@ -174,7 +174,7 @@ $syntax-yellow: $ui-yellow-500; } span.cm-property { - color: $ui-white; + color: $white; } span.cm-variable-2 { diff --git a/ui-v2/app/styles/components/confirmation-dialog/skin.scss b/ui-v2/app/styles/components/confirmation-dialog/skin.scss index 8df087ff55..aa50e08d36 100644 --- a/ui-v2/app/styles/components/confirmation-dialog/skin.scss +++ b/ui-v2/app/styles/components/confirmation-dialog/skin.scss @@ -1,6 +1,6 @@ table div.with-confirmation.confirming { - background-color: $ui-white; + background-color: $white; } %confirmation-dialog-inline p { - color: $ui-gray-400; + color: $gray-400; } diff --git a/ui-v2/app/styles/components/expanded-single-select/skin.scss b/ui-v2/app/styles/components/expanded-single-select/skin.scss index a03183b045..d67d29c25f 100644 --- a/ui-v2/app/styles/components/expanded-single-select/skin.scss +++ b/ui-v2/app/styles/components/expanded-single-select/skin.scss @@ -4,10 +4,10 @@ %expanded-single-select input[type='radio']:checked + *, %expanded-single-select input[type='radio']:hover + *, %expanded-single-select input[type='radio']:focus + * { - box-shadow: 0 4px 8px 0 rgba($ui-black, 0.05); + box-shadow: 0 4px 8px 0 rgba($black, 0.05); } %expanded-single-select input[type='radio']:checked + *, %expanded-single-select input[type='radio']:hover + *, %expanded-single-select input[type='radio']:focus + * { - background-color: $ui-white; + background-color: $white; } diff --git a/ui-v2/app/styles/components/feedback-dialog.scss b/ui-v2/app/styles/components/feedback-dialog.scss index 7fbeff2d72..61c93da807 100644 --- a/ui-v2/app/styles/components/feedback-dialog.scss +++ b/ui-v2/app/styles/components/feedback-dialog.scss @@ -14,7 +14,7 @@ main .with-feedback { .actions .with-feedback p::after { bottom: auto; top: -13px !important; - border-bottom: 18px solid $ui-gray-800; + border-bottom: 18px solid $gray-800; border-top: 0; } } diff --git a/ui-v2/app/styles/components/filter-bar/skin.scss b/ui-v2/app/styles/components/filter-bar/skin.scss index 518b63ec94..e981f3d2ba 100644 --- a/ui-v2/app/styles/components/filter-bar/skin.scss +++ b/ui-v2/app/styles/components/filter-bar/skin.scss @@ -20,19 +20,20 @@ } %filter-bar, %filter-bar > * { - background-color: $ui-gray-050; + /* frame-gray */ + background-color: $gray-050; } %filter-bar > *, %filter-bar label:not(:last-child) { - border-color: $ui-gray-300 !important; + border-color: $gray-300 !important; } %filter-bar [role='radiogroup'] label { - color: $ui-gray-400; + color: $gray-400; } %filter-bar .value-warning span::after { - border-color: $ui-gray-050; + border-color: $gray-050; } %filter-bar .value-warning input:checked + span::after { - border-color: $ui-white; + border-color: $white; } diff --git a/ui-v2/app/styles/components/form-elements/skin.scss b/ui-v2/app/styles/components/form-elements/skin.scss index 1b76786336..ce13bff2c6 100644 --- a/ui-v2/app/styles/components/form-elements/skin.scss +++ b/ui-v2/app/styles/components/form-elements/skin.scss @@ -23,39 +23,39 @@ border-radius: $decor-radius-100; } %form-element-error > input { - border-color: $ui-color-failure !important; + border-color: $color-failure !important; } %form-element > strong { - color: $ui-color-failure; + color: $color-failure; } %form-element > em { - color: $ui-gray-400; + color: $gray-400; } %form-element > em > code { - background-color: $ui-gray-200; - color: $brand-magenta-600; + background-color: $gray-200; + color: $magenta-600; border-radius: $decor-radius-100; } %form-element > span { - color: $ui-black; + color: $black; } %form-element [type='text'], %form-element [type='password'], %form-element textarea { - color: $ui-gray-500; + color: $gray-500; } %form-element [type='text'], %form-element [type='password'], %form-element textarea { - border-color: $ui-gray-300; + border-color: $gray-300; } %form-element [type='text']:hover, %form-element [type='password']:hover, %form-element textarea:hover { - border-color: $ui-gray-500; + border-color: $gray-500; } %form-element [type='text']:focus, %form-element [type='password']:focus, %form-element textarea:focus { - border-color: $ui-blue-500; + border-color: $blue-500; } diff --git a/ui-v2/app/styles/components/freetext-filter/skin.scss b/ui-v2/app/styles/components/freetext-filter/skin.scss index 9c1dfbc788..09ddc99862 100644 --- a/ui-v2/app/styles/components/freetext-filter/skin.scss +++ b/ui-v2/app/styles/components/freetext-filter/skin.scss @@ -7,15 +7,15 @@ border-right: $decor-border-100; } %freetext-filter { - background-color: $ui-white; + background-color: $white; } %freetext-filter span { - color: $ui-gray-300; + color: $gray-300; } %freetext-filter input { - border-color: $ui-gray-300; + border-color: $gray-300; } %freetext-filter input, %freetext-filter input::placeholder { - color: $ui-gray-400; + color: $gray-400; } diff --git a/ui-v2/app/styles/components/healthcheck-status/skin.scss b/ui-v2/app/styles/components/healthcheck-status/skin.scss index 8656904fe2..d0fd2cec13 100644 --- a/ui-v2/app/styles/components/healthcheck-status/skin.scss +++ b/ui-v2/app/styles/components/healthcheck-status/skin.scss @@ -6,30 +6,30 @@ border-radius: $decor-radius-100; } %healthcheck-status dd:first-of-type { - color: $ui-gray-400; + color: $gray-400; } %healthcheck-status pre { - background-color: $ui-black; - color: $ui-white; + background-color: $black; + color: $white; } %healthcheck-status.passing { - /* TODO: this should be a gray frame */ + /* TODO: this should be a frame-gray */ // @extend %frame-green-500; - color: $ui-gray-900; - border-color: $ui-gray-200; + color: $gray-900; + border-color: $gray-200; border-style: solid; } %healthcheck-status.warning { @extend %frame-yellow-500; - color: $ui-gray-900; + color: $gray-900; } %healthcheck-status.critical { @extend %frame-red-500; - color: $ui-gray-900; + color: $gray-900; } %healthcheck-status.passing::before { - background-color: $ui-color-success !important; + background-color: $color-success !important; } %healthcheck-status.critical::before { - background-color: $ui-color-danger !important; + background-color: $color-danger !important; } diff --git a/ui-v2/app/styles/components/healthchecked-resource/skin.scss b/ui-v2/app/styles/components/healthchecked-resource/skin.scss index 0938e5f26f..12b5ecc86e 100644 --- a/ui-v2/app/styles/components/healthchecked-resource/skin.scss +++ b/ui-v2/app/styles/components/healthchecked-resource/skin.scss @@ -1,26 +1,26 @@ %healthchecked-resource { border: $decor-border-100; - box-shadow: 0 4px 8px 0 rgba($ui-black, 0.05); + box-shadow: 0 4px 8px 0 rgba($black, 0.05); } %healthchecked-resource li { border-top: $decor-border-100; } %healthchecked-resource, %healthchecked-resource li { - border-color: $ui-gray-200; + border-color: $gray-200; } %healthchecked-resource li.passing { - color: $ui-color-success; + color: $color-success; } %healthchecked-resource li.warning { - color: $ui-color-alert; + color: $color-alert; } %healthchecked-resource li.critical { - color: $ui-color-failure; + color: $color-failure; } %healthchecked-resource:hover, %healthchecked-resource:focus { - box-shadow: 0 8px 10px 0 rgba($ui-black, 0.1); + box-shadow: 0 8px 10px 0 rgba($black, 0.1); } %healthchecked-resource { border-radius: $radius-small; @@ -29,5 +29,5 @@ @extend %with-no-healthchecks; } %healthchecked-resource ul:empty::before { - color: $ui-gray-400; + color: $gray-400; } diff --git a/ui-v2/app/styles/components/icons/index.scss b/ui-v2/app/styles/components/icons/index.scss index b17f57590a..acc1eb7d6f 100644 --- a/ui-v2/app/styles/components/icons/index.scss +++ b/ui-v2/app/styles/components/icons/index.scss @@ -66,18 +66,18 @@ display: inline-block; } %with-hashicorp { - background-color: $ui-white; + background-color: $white; } %with-hashicorp::before { @extend %pseudo-icon; opacity: 0.45; - background-image: $hashicorp-svg; + background-image: $hashicorp-logo-svg; background-size: cover; width: 20px; height: 20px; left: -25px; margin-top: -10px; - background-color: $ui-color-transparent; + background-color: $color-transparent; } %with-clipboard { padding-left: 38px !important; @@ -89,7 +89,7 @@ height: 17px; left: 12px; margin-top: -8px; - background-color: $ui-color-transparent; + background-color: $color-transparent; } %with-chevron::before { @extend %pseudo-icon; @@ -98,7 +98,7 @@ height: 9px; left: 0; margin-top: -4px; - background-color: $ui-color-transparent; + background-color: $color-transparent; } %with-folder::before { @extend %pseudo-icon; @@ -108,7 +108,7 @@ margin-top: -6px; left: 2px; background-image: url('data:image/svg+xml;charset=UTF-8,'); - background-color: $ui-color-transparent; + background-color: $color-transparent; } %with-magnifier { position: relative; @@ -126,7 +126,7 @@ border: 0.05em solid; border-radius: 0.35em; border-color: currentColor; - background-color: $ui-color-transparent; + background-color: $color-transparent; } %with-magnifier::after { @extend %pseudo-icon; @@ -148,7 +148,7 @@ @extend %pseudo-icon; right: 0; background-image: url('data:image/svg+xml;charset=UTF-8,'); - background-color: $ui-color-transparent; + background-color: $color-transparent; width: 16px; height: 16px; } @@ -188,7 +188,7 @@ } %with-inverted-tick { @extend %pseudo-icon; - background-color: $ui-color-transparent; + background-color: $color-transparent; background-image: url('data:image/svg+xml;charset=UTF-8,'); height: 20px !important; width: 16px !important; @@ -214,7 +214,7 @@ background-image: url('data:image/svg+xml;charset=UTF-8,'); width: 16px; height: 14px; - background-color: $ui-color-transparent; + background-color: $color-transparent; } %with-right-arrow-grey { @extend %pseudo-icon; @@ -225,7 +225,7 @@ background-image: url('data:image/svg+xml;charset=UTF-8,'); width: 16px; height: 16px; - background-color: $ui-color-transparent; + background-color: $color-transparent; } %with-deny-icon-grey { @extend %pseudo-icon; @@ -243,7 +243,7 @@ } %with-warning::before { @extend %with-warning-icon-orange; - background-color: $ui-color-transparent; + background-color: $color-transparent; } %with-critical::before { @extend %with-cross; diff --git a/ui-v2/app/styles/components/modal-dialog/skin.scss b/ui-v2/app/styles/components/modal-dialog/skin.scss index bd901019de..a97a159dcc 100644 --- a/ui-v2/app/styles/components/modal-dialog/skin.scss +++ b/ui-v2/app/styles/components/modal-dialog/skin.scss @@ -1,21 +1,18 @@ %modal-dialog > label { - background-color: rgba($ui-white, 0.9); + background-color: rgba($white, 0.9); } %modal-window { - box-shadow: 2px 8px 8px 0 rgba($ui-black, 0.1); + box-shadow: 2px 8px 8px 0 rgba($black, 0.1); } %modal-window { /*%frame-gray-000*/ - background-color: $ui-white; + background-color: $white; border: $decor-border-100; - border-color: $ui-gray-300; + border-color: $gray-300; } %modal-window > footer, %modal-window > header { - /*%frame-gray-000*/ - border: 0 solid; - background-color: $ui-gray-050; - border-color: $ui-gray-300; + @extend %frame-gray-800; } %modal-window > footer { border-top-width: 1px; @@ -34,9 +31,9 @@ background-size: 80%; cursor: pointer; - /*%frame-gray-000*/ - background-color: $ui-gray-050; + /*%frame-gray-050??*/ + background-color: $gray-050; border: $decor-border-100; - border-color: $ui-gray-300; + border-color: $gray-300; border-radius: $decor-radius-100; } diff --git a/ui-v2/app/styles/components/notice/skin.scss b/ui-v2/app/styles/components/notice/skin.scss index fcba275786..c2488b3b2e 100644 --- a/ui-v2/app/styles/components/notice/skin.scss +++ b/ui-v2/app/styles/components/notice/skin.scss @@ -10,46 +10,31 @@ @extend %notice; } %notice-success { - @extend %with-passing; - background-color: $ui-green-050; - border-color: $ui-color-success; - color: $ui-green-700; -} -%notice-success::before { - color: $ui-color-success; + @extend %frame-green-500, %with-passing; } %notice-info { - /* %frame-blue-000*/ - border-style: solid; /*TODO: this can go once we are using a frame*/ - @extend %with-passing; /* needs a better info button*/ - background-color: $ui-blue-050; - border-color: $ui-color-action; /* TODO: change to info */ - color: $ui-blue-700; + @extend %frame-blue-500, %with-passing; /* needs a better info button*/ } %notice-highlight { - /* %frame-blue-000*/ - border-style: solid; /*TODO: this can go once we are using a frame*/ - @extend %with-star; - border-color: $ui-gray-300; - background-color: $ui-gray-050; + @extend %frame-gray-800, %with-star; } -%notice-info::before { - color: $ui-color-action; /* change to info */ +%notice-warning { + @extend %frame-yellow-500, %with-warning; +} +%notice-error { + @extend %frame-red-500, %with-critical; } %notice-highlight::before { /* %with-star, bigger */ width: 16px; height: 16px; } -%notice-warning { - @extend %frame-yellow-500, %with-warning; +%notice-success::before { + color: $color-success; } -%notice-error { - @extend %with-critical; - background-color: $ui-red-050; - border-color: $ui-color-failure; - color: $ui-red-600; +%notice-info::before { + color: $color-action; /* change to info */ } %notice-error::before { - color: $ui-color-failure; + color: $color-failure; } diff --git a/ui-v2/app/styles/components/pill/skin.scss b/ui-v2/app/styles/components/pill/skin.scss index 6efe90d8a4..b234ac46df 100644 --- a/ui-v2/app/styles/components/pill/skin.scss +++ b/ui-v2/app/styles/components/pill/skin.scss @@ -1,4 +1,4 @@ %pill { - background-color: $ui-gray-100; + @extend %frame-gray-900; border-radius: $radius-small; } diff --git a/ui-v2/app/styles/components/product.scss b/ui-v2/app/styles/components/product.scss index 4207add1a2..90fa382b25 100644 --- a/ui-v2/app/styles/components/product.scss +++ b/ui-v2/app/styles/components/product.scss @@ -10,23 +10,23 @@ html.template-loading main > div { @extend %loader; } %loader circle { - fill: $brand-magenta-100; + fill: $magenta-100; } %main-header::before { - background-color: $brand-magenta-600; + background-color: $magenta-600; } %header-nav a, %header-nav-toggle-button { - color: $brand-magenta-050; + color: $magenta-050; } @media #{$--lt-horizontal-nav} { %header-nav-panel { - background-color: $brand-magenta-600; + background-color: $magenta-600; } } @media #{$--horizontal-nav} { %header-nav > ul > li:not(:first-child).is-active > a { - background-color: $brand-magenta-800; + background-color: $magenta-800; } } #wrapper > footer { @@ -41,7 +41,7 @@ html.template-loading main > div { /* toggleable toolbar for short screens */ [for='toolbar-toggle'] { @extend %with-magnifier; - color: $ui-blue-500; + color: $blue-500; width: 20px; height: 20px; margin-left: 15px; diff --git a/ui-v2/app/styles/components/product/footer.scss b/ui-v2/app/styles/components/product/footer.scss index 25d61c6342..6192d6e24e 100644 --- a/ui-v2/app/styles/components/product/footer.scss +++ b/ui-v2/app/styles/components/product/footer.scss @@ -5,11 +5,11 @@ border-top: $decor-border-100; } %footer { - border-color: $ui-gray-200; - background-color: $ui-white; + border-color: $gray-200; + background-color: $white; } %footer > * { - color: $ui-gray-400; + color: $gray-400; } %footer { display: flex; diff --git a/ui-v2/app/styles/components/product/header-nav.scss b/ui-v2/app/styles/components/product/header-nav.scss index 85e55abf58..29458807f2 100644 --- a/ui-v2/app/styles/components/product/header-nav.scss +++ b/ui-v2/app/styles/components/product/header-nav.scss @@ -21,20 +21,20 @@ border-bottom: $decor-border-100; } %header-drop-nav li { - border-color: $ui-gray-300; + border-color: $gray-300; } %header-drop-nav { - border-color: $ui-gray-300; - background-color: $ui-white; + border-color: $gray-300; + background-color: $white; } %header-drop-nav a { - color: $ui-gray-900 !important; + color: $gray-900 !important; } %header-nav > ul > li > a:hover, %header-nav > ul > li > a:focus, %header-nav > ul > li > a:active, %header-nav > ul > li.is-active > a { - color: $ui-white; + color: $white; } %header-nav-toggle-button::before, %header-nav-toggle-button::after, @@ -99,7 +99,7 @@ padding: 15px 35px; } %header-nav-toggle:checked + label { - background-color: rgba($ui-black, 0.4); + background-color: rgba($black, 0.4); width: 100vw; height: 100%; left: 0; @@ -125,7 +125,7 @@ %header-drop-nav a:focus, %header-drop-nav a:active, %header-drop-nav a.selected { - background-color: $ui-gray-050; + background-color: $gray-050; } %header-nav a { display: block; diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss index 7f497a3b43..364c214b65 100644 --- a/ui-v2/app/styles/components/table.scss +++ b/ui-v2/app/styles/components/table.scss @@ -16,7 +16,7 @@ td span.zero { @extend %with-no-healthchecks; display: block; text-indent: 20px; - color: $ui-gray-400; + color: $gray-400; } table:not(.sessions) tr { cursor: pointer; @@ -26,15 +26,15 @@ table:not(.sessions) td:first-child { } td dt.passing, td dt.passing + dd { - color: $ui-color-success; + color: $color-success; } td dt.warning, td dt.warning + dd { - color: $ui-color-alert; + color: $color-alert; } td dt.critical, td dt.critical + dd { - color: $ui-color-failure; + color: $color-failure; } /* Header Tooltips/Icon*/ th { diff --git a/ui-v2/app/styles/components/table/skin.scss b/ui-v2/app/styles/components/table/skin.scss index d6582bb793..9ab4efc978 100644 --- a/ui-v2/app/styles/components/table/skin.scss +++ b/ui-v2/app/styles/components/table/skin.scss @@ -3,7 +3,7 @@ td { border-bottom: $decor-border-100; } th { - color: $ui-gray-400 !important; + color: $gray-400 !important; } th { border-color: $keyline-dark; diff --git a/ui-v2/app/styles/components/tabs/skin.scss b/ui-v2/app/styles/components/tabs/skin.scss index 7a5eeda62f..81faad3695 100644 --- a/ui-v2/app/styles/components/tabs/skin.scss +++ b/ui-v2/app/styles/components/tabs/skin.scss @@ -8,17 +8,16 @@ border-bottom: $decor-border-200; } %tab-nav a { - border-color: $ui-color-transparent; - color: $ui-gray-500; + border-color: $color-transparent; + color: $gray-500; } %tab-nav li:not(.selected) a:hover, %tab-nav li:not(.selected) a:focus, %tab-nav li:not(.selected) a:active { /* %frame-gray-something */ - border-color: $ui-color-transparent; - background-color: $ui-gray-100; + border-color: $color-transparent; + background-color: $gray-100; } %tab-nav .selected a { @extend %frame-magenta-300; } - diff --git a/ui-v2/app/styles/components/tabular-details/skin.scss b/ui-v2/app/styles/components/tabular-details/skin.scss index f3b7f38b09..7a7faae958 100644 --- a/ui-v2/app/styles/components/tabular-details/skin.scss +++ b/ui-v2/app/styles/components/tabular-details/skin.scss @@ -5,15 +5,15 @@ cursor: default; } %tabular-detail { - border: 1px solid $ui-gray-300; + border: 1px solid $gray-300; border-radius: $decor-radius-100; - box-shadow: 0 8px 10px 0 rgba($ui-black, 0.1); + box-shadow: 0 8px 10px 0 rgba($black, 0.1); margin-bottom: 20px; } %tabular-detail::before, %tabular-detail > div, %tabular-detail > label { - background-color: $ui-white; + background-color: $white; } %tabular-detail > label::before { transform: rotate(180deg); diff --git a/ui-v2/app/styles/components/toggle-button/skin.scss b/ui-v2/app/styles/components/toggle-button/skin.scss index 759b2e430f..bc993a5566 100644 --- a/ui-v2/app/styles/components/toggle-button/skin.scss +++ b/ui-v2/app/styles/components/toggle-button/skin.scss @@ -4,8 +4,8 @@ } %toggle-button:hover, %toggle-button:focus { - background-color: $ui-gray-050; + background-color: $gray-050; } %toggle-button:active { - background-color: $ui-gray-100; + background-color: $gray-100; } diff --git a/ui-v2/app/styles/components/toggle/skin.scss b/ui-v2/app/styles/components/toggle/skin.scss index df2500819f..80c0bf3687 100644 --- a/ui-v2/app/styles/components/toggle/skin.scss +++ b/ui-v2/app/styles/components/toggle/skin.scss @@ -15,16 +15,16 @@ @extend %toggle-negative; } %toggle label span { - color: $ui-gray-900; + color: $gray-900; } %toggle label span::after { - background-color: $ui-white; + background-color: $white; } %toggle label input:checked + span::before, %toggle-negative label input + span::before { - background-color: $ui-blue-500; + background-color: $blue-500; } %toggle label span::before, %toggle-negative label input:checked + span::before { - background-color: $ui-gray-300; + background-color: $gray-300; } diff --git a/ui-v2/app/styles/components/tomography-graph.scss b/ui-v2/app/styles/components/tomography-graph.scss index b76b8bccb1..b61f62776c 100644 --- a/ui-v2/app/styles/components/tomography-graph.scss +++ b/ui-v2/app/styles/components/tomography-graph.scss @@ -1,31 +1,31 @@ .tomography .background { - fill: $ui-gray-050; + fill: $gray-050; } .tomography .axis { fill: none; - stroke: $ui-gray-300; + stroke: $gray-300; stroke-dasharray: 4 4; } .tomography .border { fill: none; - stroke: $ui-gray-300; + stroke: $gray-300; } .tomography .point { - stroke: $ui-gray-400; - fill: $brand-magenta-600; + stroke: $gray-400; + fill: $magenta-600; } .tomography .lines line { - stroke: $brand-magenta-600; + stroke: $magenta-600; } .tomography .lines line:hover { - stroke: $ui-gray-300; + stroke: $gray-300; stroke-width: 2px; } .tomography .tick line { - stroke: $ui-gray-300; + stroke: $gray-300; } .tomography .tick text { font-size: $typo-size-600; text-anchor: start; - color: $ui-gray-900; + color: $gray-900; } diff --git a/ui-v2/app/styles/components/with-tooltip/layout.scss b/ui-v2/app/styles/components/with-tooltip/layout.scss index c3a3193dbd..773cbb1e35 100644 --- a/ui-v2/app/styles/components/with-tooltip/layout.scss +++ b/ui-v2/app/styles/components/with-tooltip/layout.scss @@ -30,5 +30,5 @@ background-color: transparent !important; border-left: 9px solid transparent; border-right: 9px solid transparent; - border-top: 18px solid $ui-gray-800; + border-top: 18px solid $gray-800; } diff --git a/ui-v2/app/styles/components/with-tooltip/skin.scss b/ui-v2/app/styles/components/with-tooltip/skin.scss index f8fbf8ac1c..b4a17d7c5a 100644 --- a/ui-v2/app/styles/components/with-tooltip/skin.scss +++ b/ui-v2/app/styles/components/with-tooltip/skin.scss @@ -1,9 +1,9 @@ %tooltip-bubble, %tooltip-tail { - color: $ui-white; - background-color: $ui-gray-800; + color: $white; + background-color: $gray-800; } %tooltip-bubble { border-radius: $decor-radius-200; - box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12); + box-shadow: 0 3px 1px 0 rgba($black, 0.12); } diff --git a/ui-v2/app/styles/routes/dc/acls/tokens/index.scss b/ui-v2/app/styles/routes/dc/acls/tokens/index.scss index 0715d3371b..dbd72fdd6f 100644 --- a/ui-v2/app/styles/routes/dc/acls/tokens/index.scss +++ b/ui-v2/app/styles/routes/dc/acls/tokens/index.scss @@ -8,13 +8,13 @@ } %token-yours { text-indent: 20px; - color: $ui-blue-500; + color: $blue-500; padding-left: 15px; } %token-yours::after { @extend %with-tick; border-radius: 100%; - background-color: $ui-blue-500; + background-color: $blue-500; } .me ~ :nth-last-child(2) { @extend %token-yours; diff --git a/ui-v2/app/styles/variables/index.scss b/ui-v2/app/styles/variables/index.scss index 03b270c13a..a5f40df0c7 100644 --- a/ui-v2/app/styles/variables/index.scss +++ b/ui-v2/app/styles/variables/index.scss @@ -1,13 +1,13 @@ @import './custom-query'; -$gray: $ui-gray-200; -$ui-gray-025: #fafbfc; +$gray: $gray-200; +$gray-025: #fafbfc; $magenta-800-no-hash: 5a1434; -$keyline-light: $ui-gray-100; // h1 -$keyline-mid: $ui-gray-200; // td, footer -$keyline-dark: $ui-gray-300; // th -$keyline-darker: $ui-gray-400; +$keyline-light: $gray-100; // h1 +$keyline-mid: $gray-200; // td, footer +$keyline-dark: $gray-300; // th +$keyline-darker: $gray-400; // decoration // undecided