diff --git a/ui/app/styles/components/autocomplete-input.scss b/ui/app/styles/components/autocomplete-input.scss index ed8d5f84ef3..5e52d0acfe5 100644 --- a/ui/app/styles/components/autocomplete-input.scss +++ b/ui/app/styles/components/autocomplete-input.scss @@ -7,7 +7,7 @@ background: hsl(0, 0%, 100%) !important; border: 1px solid var(--token-color-palette-neutral-300); box-sizing: border-box; - border-radius: 3px; + border-radius: var(--token-border-radius-x-small); width: 99%; padding: 4px 0; margin-left: 0.5%; @@ -17,7 +17,7 @@ .autocomplete-input-option { padding: 12px; &:hover { - background-color: var(--token-color-palette-neutral-50); + background-color: var(--token-color-surface-faint); cursor: pointer; } } diff --git a/ui/app/styles/components/box-label.scss b/ui/app/styles/components/box-label.scss index c15ef62cd8a..7ac532a6d2b 100644 --- a/ui/app/styles/components/box-label.scss +++ b/ui/app/styles/components/box-label.scss @@ -18,7 +18,7 @@ label.box-label { @extend .is-centered; border-color: var(--token-color-palette-neutral-300); - border-radius: 3px; + border-radius: var(--token-border-radius-x-small); box-shadow: box-shadow_variables.$box-link-shadow; text-decoration: none; transition: box-shadow size_variables.$speed; @@ -69,6 +69,6 @@ label.box-label { color: var(--token-color-palette-neutral-400); .is-selected & { - color: var(--token-color-palette-neutral-600); + color: var(--token-color-foreground-primary); } } diff --git a/ui/app/styles/components/calendar-widget.scss b/ui/app/styles/components/calendar-widget.scss index a4f59ddfebe..617d02f6abe 100644 --- a/ui/app/styles/components/calendar-widget.scss +++ b/ui/app/styles/components/calendar-widget.scss @@ -51,7 +51,7 @@ $dark-gray: #535f73; grid-template-columns: 1fr; grid-template-rows: 0.7fr 3fr; box-shadow: box-shadow_variables.$box-shadow, box-shadow_variables.$box-shadow-middle; - background-color: white; + background-color: var(--token-color-surface-primary); border-radius: size_variables.$radius; } diff --git a/ui/app/styles/components/control-group.scss b/ui/app/styles/components/control-group.scss index 54ff8b909b8..d8af7bf004e 100644 --- a/ui/app/styles/components/control-group.scss +++ b/ui/app/styles/components/control-group.scss @@ -15,7 +15,7 @@ 0 0 1px var(--token-color-palette-neutral-500); } .control-group-success.is-editor { - background: var(--token-color-palette-neutral-50); + background: var(--token-color-surface-faint); } .control-group a { @@ -24,8 +24,8 @@ .control-group-header { box-shadow: 0 0 1px currentColor; padding: size_variables.$spacing-10 size_variables.$spacing-14; - background: var(--token-color-palette-neutral-50); - color: var(--token-color-palette-neutral-500); + background: var(--token-color-surface-faint); + color: var(--token-color-foreground-faint); position: relative; strong { color: currentColor; @@ -33,7 +33,7 @@ } .control-group-header.is-success { - color: var(--token-color-palette-green-300); + color: var(--token-color-foreground-success-on-surface); background: var(--token-color-palette-green-50); } diff --git a/ui/app/styles/components/doc-link.scss b/ui/app/styles/components/doc-link.scss index b07fb279ddb..9156ac69b45 100644 --- a/ui/app/styles/components/doc-link.scss +++ b/ui/app/styles/components/doc-link.scss @@ -6,7 +6,7 @@ */ .doc-link { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); font-weight: font_variables.$font-weight-semibold; &:hover { text-decoration: underline !important; diff --git a/ui/app/styles/components/form-section.scss b/ui/app/styles/components/form-section.scss index 666ca58bab5..a7fb3f9eba8 100644 --- a/ui/app/styles/components/form-section.scss +++ b/ui/app/styles/components/form-section.scss @@ -19,6 +19,6 @@ background-color: black; pre { - color: var(--token-color-palette-neutral-50); + color: var(--token-color-surface-faint); } } diff --git a/ui/app/styles/components/icon.scss b/ui/app/styles/components/icon.scss index d4edf1b32de..7fd1927bc81 100644 --- a/ui/app/styles/components/icon.scss +++ b/ui/app/styles/components/icon.scss @@ -19,7 +19,7 @@ } .icon-blue { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } .hds-icon { diff --git a/ui/app/styles/components/info-table-row.scss b/ui/app/styles/components/info-table-row.scss index 7bae844b7fe..0199a228cf8 100644 --- a/ui/app/styles/components/info-table-row.scss +++ b/ui/app/styles/components/info-table-row.scss @@ -58,7 +58,7 @@ } .icon-true { - color: var(--token-color-palette-green-200); + color: var(--token-color-foreground-success); } .icon-false { diff --git a/ui/app/styles/components/masked-input.scss b/ui/app/styles/components/masked-input.scss index 4963ee665c4..9502f545127 100644 --- a/ui/app/styles/components/masked-input.scss +++ b/ui/app/styles/components/masked-input.scss @@ -80,7 +80,7 @@ pre.masked-font { &:focus, &:hover, &:focus:not(:active) { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); border: 0; box-shadow: none; } diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss index 9d46714f32a..2c5661de971 100644 --- a/ui/app/styles/components/popup-menu.scss +++ b/ui/app/styles/components/popup-menu.scss @@ -57,7 +57,7 @@ // so they match other dropdown elements until we replace popup-menu with Hds::Dropdown .hds-confirm-action-critical { &:hover { - background-color: var(--token-color-palette-neutral-50); + background-color: var(--token-color-surface-faint); } div, span { @@ -72,21 +72,21 @@ .ember-power-select-option[aria-current='true'], a { background-color: hsl(0, 0%, 100%); - color: var(--token-color-palette-neutral-600); + color: var(--token-color-foreground-primary); &:hover { - background-color: var(--token-color-palette-neutral-50); - color: var(--token-color-palette-neutral-600); + background-color: var(--token-color-surface-faint); + color: var(--token-color-foreground-primary); } &.active, &.is-active { background-color: transparent; - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } &.is-destroy { - color: var(--token-color-palette-red-200); + color: var(--token-color-foreground-critical); &:hover { background-color: var(--token-color-palette-red-200); @@ -109,7 +109,7 @@ } .menu-label { - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); font-size: size_variables.$size-9; font-weight: font_variables.$font-weight-normal; letter-spacing: 0; diff --git a/ui/app/styles/components/radio-card.scss b/ui/app/styles/components/radio-card.scss index 48c4308364c..6d728dba6a2 100644 --- a/ui/app/styles/components/radio-card.scss +++ b/ui/app/styles/components/radio-card.scss @@ -96,14 +96,14 @@ .radio-card-radio-row { display: flex; justify-content: center; - background: var(--token-color-palette-neutral-50); + background: var(--token-color-surface-faint); padding: size_variables.$spacing-8; } .is-selected { &.radio-card { border-color: var(--token-color-palette-blue-200); - background: var(--token-color-palette-neutral-50); + background: var(--token-color-surface-faint); box-shadow: box-shadow_variables.$box-shadow-middle; } .radio-card-icon { diff --git a/ui/app/styles/components/raft-join.scss b/ui/app/styles/components/raft-join.scss index 660b89f436e..34ae1788938 100644 --- a/ui/app/styles/components/raft-join.scss +++ b/ui/app/styles/components/raft-join.scss @@ -13,7 +13,7 @@ padding-bottom: size_variables.$spacing-12; } .raft-join-unseal { - color: var(--token-color-palette-amber-200); + color: var(--token-color-foreground-warning); font-size: size_variables.$size-6; display: inline-block; } diff --git a/ui/app/styles/components/regex-validator.scss b/ui/app/styles/components/regex-validator.scss index 3b8e5f97f18..7b8dd923715 100644 --- a/ui/app/styles/components/regex-validator.scss +++ b/ui/app/styles/components/regex-validator.scss @@ -19,11 +19,11 @@ .regex-group { font-family: font_variables.$family-monospace; font-size: size_variables.$size-8; - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); } .regex-group-position { background-color: var(--token-color-palette-neutral-200); - border-radius: 3px; + border-radius: var(--token-border-radius-x-small); padding-top: 5px; padding-bottom: 4px; margin-right: 4px; diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss index 06809d0582d..febc38b5be8 100644 --- a/ui/app/styles/components/replication-dashboard.scss +++ b/ui/app/styles/components/replication-dashboard.scss @@ -18,7 +18,7 @@ } .toolbar-link { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } } diff --git a/ui/app/styles/components/search-select.scss b/ui/app/styles/components/search-select.scss index eaa4361889c..1de0b63109c 100644 --- a/ui/app/styles/components/search-select.scss +++ b/ui/app/styles/components/search-select.scss @@ -81,8 +81,8 @@ } .ember-power-select-option[aria-current='true'] { - background-color: var(--token-color-palette-neutral-50); - color: var(--token-color-palette-neutral-600); + background-color: var(--token-color-surface-faint); + color: var(--token-color-foreground-primary); } .ember-power-select-option--no-matches-message { @@ -116,7 +116,7 @@ &:hover, &:focus { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } } } diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss index 705f5b29f13..c8a6cbcb11b 100644 --- a/ui/app/styles/components/stat-text.scss +++ b/ui/app/styles/components/stat-text.scss @@ -23,7 +23,7 @@ .stat-text { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); line-height: inherit; } .stat-value { @@ -42,7 +42,7 @@ .stat-text { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); line-height: inherit; } .stat-value { @@ -61,7 +61,7 @@ .stat-text { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); line-height: inherit; } .stat-value { @@ -80,7 +80,7 @@ .stat-text { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); line-height: inherit; } .stat-value { @@ -100,13 +100,13 @@ .stat-text { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); line-height: inherit; } .stat-value { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: var(--token-color-palette-neutral-600); + color: var(--token-color-foreground-primary); line-height: inherit; } } diff --git a/ui/app/styles/components/tabs-component.scss b/ui/app/styles/components/tabs-component.scss index 789ca5f1822..a1ae69d093a 100644 --- a/ui/app/styles/components/tabs-component.scss +++ b/ui/app/styles/components/tabs-component.scss @@ -34,19 +34,19 @@ } &.active { border-color: var(--token-color-palette-blue-200); - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } } li { // solves for tools -> sub-tabs like "Unwrap data" -> "Data" &.is-active { border-bottom: 2px solid var(--token-color-palette-blue-200); - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } // solves for tabs on auth mounts & secrets engines > a { &.active { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); background-color: transparent; border-bottom: 2px solid var(--token-color-palette-blue-200); } @@ -61,7 +61,7 @@ &.active a, &.is-active a { border-color: var(--token-color-palette-blue-200); - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } } // important for auth tabs in active state, otherwise the border-bottom will not show. @@ -85,8 +85,8 @@ } &:hover { - background-color: var(--token-color-palette-neutral-50); - color: var(--token-color-palette-neutral-600); + background-color: var(--token-color-surface-faint); + color: var(--token-color-foreground-primary); } } diff --git a/ui/app/styles/components/toolbar.scss b/ui/app/styles/components/toolbar.scss index 35d42cd36da..7c2e2b9fa14 100644 --- a/ui/app/styles/components/toolbar.scss +++ b/ui/app/styles/components/toolbar.scss @@ -13,7 +13,7 @@ } .toolbar { - background-color: var(--token-color-palette-neutral-50); + background-color: var(--token-color-surface-faint); border: 1px solid var(--token-color-palette-neutral-100); border-bottom-color: var(--token-color-palette-neutral-300); border-top-color: var(--token-color-palette-neutral-300); @@ -62,7 +62,7 @@ } &::-webkit-scrollbar-thumb { - background: var(--token-color-palette-neutral-300); + background: var(--token-color-surface-strong); border-radius: size_variables.$spacing-4; } } @@ -102,9 +102,9 @@ transition: background-color size_variables.$speed; &:hover:not(.disabled) { - background-color: var(--token-color-palette-neutral-100); + background-color: var(--token-color-surface-strong); border: 0; - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } &:active { @@ -133,8 +133,8 @@ a.disabled.toolbar-link { background-color: hsl(0, 0%, 100%); cursor: not-allowed; &:hover { - background-color: var(--token-color-palette-neutral-100); - color: var(--token-color-palette-blue-200); + background-color: var(--token-color-surface-strong); + color: var(--token-color-foreground-action); } } diff --git a/ui/app/styles/components/transform-edit.scss b/ui/app/styles/components/transform-edit.scss index e749c00fcef..9e81ae21f89 100644 --- a/ui/app/styles/components/transform-edit.scss +++ b/ui/app/styles/components/transform-edit.scss @@ -7,10 +7,10 @@ */ .copy-text { - background: var(--token-color-palette-neutral-50); + background: var(--token-color-surface-faint); & > code { - color: var(--token-color-palette-neutral-600); + color: var(--token-color-foreground-primary); padding: 14px; } } diff --git a/ui/app/styles/core/box.scss b/ui/app/styles/core/box.scss index 87fd7379b38..f56256c2ff2 100644 --- a/ui/app/styles/core/box.scss +++ b/ui/app/styles/core/box.scss @@ -10,7 +10,7 @@ background-color: hsl(0, 0%, 100%); border-radius: 0; box-shadow: 0 0 0 1px rgba(var(--token-color-palette-neutral-500), 0.3); - color: var(--token-color-palette-neutral-600); + color: var(--token-color-foreground-primary); display: block; padding: size_variables.$spacing-18; diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index 52b811da92e..d858973cea8 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -10,12 +10,12 @@ .button { align-items: center; - background-color: var(--token-color-palette-neutral-50); + background-color: var(--token-color-surface-faint); border: 1px solid var(--token-color-palette-neutral-300); border-radius: size_variables.$radius; box-shadow: box-shadow_variables.$box-shadow-low; cursor: pointer; - color: var(--token-color-palette-neutral-600); + color: var(--token-color-foreground-primary); display: inline-block; font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-semibold; @@ -97,7 +97,7 @@ &.is-danger-outlined { border: 1px solid var(--token-color-palette-red-200); - color: var(--token-color-palette-red-200); + color: var(--token-color-foreground-critical); } &.is-flat { @@ -110,7 +110,7 @@ background-color: transparent; border-color: transparent; box-shadow: none; - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); text-decoration: none; &:hover { @@ -145,7 +145,7 @@ &.is-link { background-color: transparent; border-color: transparent; - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); text-decoration: none; font-weight: font_variables.$font-weight-semibold; box-shadow: none; @@ -200,13 +200,13 @@ &.is-outlined { background-color: transparent; border-color: var(--token-color-palette-blue-200); - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); &:hover, &:focus { background-color: transparent; border-color: color.adjust(#1060ff, $lightness: -10%); - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } &:active, @@ -221,7 +221,7 @@ background-color: transparent; border-color: var(--token-color-palette-neutral-500); box-shadow: none; - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); } } @@ -236,7 +236,7 @@ // End of button types &.tool-tip-trigger { - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); min-width: auto; padding: 0; } @@ -359,7 +359,7 @@ a.button.disabled { } &.secondary { - background-color: var(--token-color-palette-neutral-50); + background-color: var(--token-color-surface-faint); border: 1px solid var(--token-color-palette-neutral-300); } @@ -384,8 +384,8 @@ a.button.disabled { border: none; box-shadow: none; &:hover:not(.disabled) { - background-color: var(--token-color-palette-neutral-100); - color: var(--token-color-palette-blue-200); + background-color: var(--token-color-surface-strong); + color: var(--token-color-foreground-action); } } } diff --git a/ui/app/styles/core/charts.scss b/ui/app/styles/core/charts.scss index bc2d81fbcf6..97d7992ba68 100644 --- a/ui/app/styles/core/charts.scss +++ b/ui/app/styles/core/charts.scss @@ -42,7 +42,7 @@ $fourth: #6cc5b0; .chart-tooltip { background-color: hsl(0, 0%, 4%); - color: white; + color: var(--token-color-foreground-high-contrast); font-size: size_variables.$size-9; padding: 6px; border-radius: size_variables.$radius-large; diff --git a/ui/app/styles/core/checkbox-and-radio.scss b/ui/app/styles/core/checkbox-and-radio.scss index 9cdaebff755..ac7e06554c1 100644 --- a/ui/app/styles/core/checkbox-and-radio.scss +++ b/ui/app/styles/core/checkbox-and-radio.scss @@ -31,7 +31,7 @@ .radio[disabled], .checkbox input[disabled], .radio input[disabled] { - color: var(--token-color-palette-neutral-400); + color: var(--token-color-foreground-disabled); cursor: not-allowed; } @@ -42,7 +42,7 @@ // one-off checkbox class .checkbox-help-text { - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); font-size: size_variables.$size-7; padding-left: 28px; } @@ -55,7 +55,7 @@ .b-checkbox label::before { background-color: hsl(0, 0%, 100%); - border-radius: 3px; + border-radius: var(--token-border-radius-x-small); border: 1px solid var(--token-color-palette-neutral-300); content: ''; height: 17px; @@ -85,7 +85,7 @@ } .b-checkbox label::after { - color: var(--token-color-palette-neutral-600); + color: var(--token-color-foreground-primary); font-size: 12px; height: 16px; left: 3px; diff --git a/ui/app/styles/core/element-styling.scss b/ui/app/styles/core/element-styling.scss index b3fcd403631..df797d731d3 100644 --- a/ui/app/styles/core/element-styling.scss +++ b/ui/app/styles/core/element-styling.scss @@ -40,7 +40,7 @@ body, pre:not(.hds-code-block__code), strong, table th { - color: var(--token-color-palette-neutral-600); + color: var(--token-color-foreground-primary); } h1, @@ -131,7 +131,7 @@ body { } a { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); cursor: pointer; text-decoration: underline; @@ -143,19 +143,19 @@ a { } a:hover { - color: var(--token-color-palette-neutral-600); + color: var(--token-color-foreground-primary); } code { background-color: transparent; - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); font-size: 1em; font-weight: 400; padding: 0; } hr { - background-color: var(--token-color-palette-neutral-300); + background-color: var(--token-color-surface-strong); border: none; display: block; height: 1px; diff --git a/ui/app/styles/core/field.scss b/ui/app/styles/core/field.scss index 82c29873771..83a6c3399b9 100644 --- a/ui/app/styles/core/field.scss +++ b/ui/app/styles/core/field.scss @@ -10,7 +10,7 @@ .field { // cannot use :read-only selector because tag used for other purposes &.is-readOnly { - background-color: var(--token-color-palette-neutral-100); + background-color: var(--token-color-surface-strong); cursor: not-allowed; } diff --git a/ui/app/styles/core/inputs.scss b/ui/app/styles/core/inputs.scss index 3376a07ff54..56bda0bae5d 100644 --- a/ui/app/styles/core/inputs.scss +++ b/ui/app/styles/core/inputs.scss @@ -15,7 +15,7 @@ border-radius: size_variables.$radius; border: box-shadow_variables.$base-border; box-shadow: 0 4px 1px rgba(hsl(0, 0%, 4%), 0.06) inset; - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); display: inline-flex; font-size: size_variables.$size-6; height: size_variables.$size-2; @@ -54,7 +54,7 @@ .textarea[disabled] { border-color: var(--token-color-palette-neutral-300); background-color: var(--token-color-palette-neutral-100); - color: var(--token-color-palette-neutral-400); + color: var(--token-color-foreground-disabled); cursor: not-allowed; &:hover { diff --git a/ui/app/styles/core/label.scss b/ui/app/styles/core/label.scss index 1189bb4ed48..11d1ff6d8aa 100644 --- a/ui/app/styles/core/label.scss +++ b/ui/app/styles/core/label.scss @@ -9,7 +9,7 @@ // This file defines the style for .is-label .is-label { - color: var(--token-color-palette-neutral-600); + color: var(--token-color-foreground-primary); font-size: 14px; font-weight: font_variables.$font-weight-bold; display: flex; diff --git a/ui/app/styles/core/link.scss b/ui/app/styles/core/link.scss index 8d35531ef7f..3919f4e6463 100644 --- a/ui/app/styles/core/link.scss +++ b/ui/app/styles/core/link.scss @@ -8,7 +8,7 @@ .link { background: transparent; border: 0; - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); cursor: pointer; display: inline; font: inherit; diff --git a/ui/app/styles/core/lists.scss b/ui/app/styles/core/lists.scss index 65069721ec9..ff37a73ab1e 100644 --- a/ui/app/styles/core/lists.scss +++ b/ui/app/styles/core/lists.scss @@ -13,7 +13,7 @@ align-items: center; &:before { font-size: size_variables.$size-5; - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); content: '|'; position: relative; } diff --git a/ui/app/styles/core/menu.scss b/ui/app/styles/core/menu.scss index dc5d774079f..0baafe8087a 100644 --- a/ui/app/styles/core/menu.scss +++ b/ui/app/styles/core/menu.scss @@ -32,6 +32,6 @@ &:hover, &.is-active { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } } diff --git a/ui/app/styles/core/message.scss b/ui/app/styles/core/message.scss index 57e3dc9038c..9f0ff9f983e 100644 --- a/ui/app/styles/core/message.scss +++ b/ui/app/styles/core/message.scss @@ -24,12 +24,12 @@ } .message-icon { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); margin-right: size_variables.$spacing-8; } .message-title { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); font-size: 16px; font-weight: font_variables.$font-weight-bold; line-height: 1.25; @@ -47,32 +47,32 @@ border: 1px solid var(--token-color-palette-red-50); .message-body { - color: var(--token-color-palette-red-300); + color: var(--token-color-foreground-critical-on-surface); } .message-icon { - color: var(--token-color-palette-red-200); + color: var(--token-color-foreground-critical); } .message-title { - color: var(--token-color-palette-red-300); + color: var(--token-color-foreground-critical-on-surface); } } &.is-highlight { background: var(--token-color-surface-warning); - border: 1px solid var(--token-color-palette-amber-100); + border: 1px solid var(--token-color-border-warning); .message-body { - color: var(--token-color-palette-neutral-600); + color: var(--token-color-foreground-primary); } .message-icon { - color: var(--token-color-palette-amber-200); + color: var(--token-color-foreground-warning); } .message-title { - color: var(--token-color-palette-amber-300); + color: var(--token-color-foreground-warning-on-surface); } } @@ -95,18 +95,18 @@ &.is-success { background: var(--token-color-surface-success); - border: 1px solid var(--token-color-palette-green-100); + border: 1px solid var(--token-color-border-success); .message-body { - color: var(--token-color-palette-green-500); + color: var(--token-color-foreground-success-high-contrast); } .message-icon { - color: var(--token-color-palette-green-200); + color: var(--token-color-foreground-success); } .message-title { - color: var(--token-color-palette-green-300); + color: var(--token-color-foreground-success-on-surface); } } } diff --git a/ui/app/styles/core/progress.scss b/ui/app/styles/core/progress.scss index f98a08a8496..82845be43fc 100644 --- a/ui/app/styles/core/progress.scss +++ b/ui/app/styles/core/progress.scss @@ -8,7 +8,7 @@ .progress { appearance: none; - background: var(--token-color-palette-neutral-50); + background: var(--token-color-surface-faint); border: none; box-shadow: inset box-shadow_variables.$box-link-shadow; border-radius: size_variables.$radius; diff --git a/ui/app/styles/core/select.scss b/ui/app/styles/core/select.scss index 637f79f5d72..fb2f6b4fc3a 100644 --- a/ui/app/styles/core/select.scss +++ b/ui/app/styles/core/select.scss @@ -11,11 +11,11 @@ select { } .select select { - background-color: var(--token-color-palette-neutral-50); + background-color: var(--token-color-surface-faint); box-shadow: 0 3px 1px rgba(hsl(0, 0%, 4%), 0.12); border: 1px solid var(--token-color-palette-neutral-300); border-radius: size_variables.$radius; - color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-faint); cursor: pointer; display: block; font-size: 1em; @@ -52,7 +52,7 @@ select { .select select[disabled] { border-color: var(--token-color-palette-neutral-300); background-color: var(--token-color-palette-neutral-100); - color: var(--token-color-palette-neutral-400); + color: var(--token-color-foreground-disabled); cursor: not-allowed; user-select: none; &:hover { diff --git a/ui/app/styles/core/toggle.scss b/ui/app/styles/core/toggle.scss index 8482c8e472b..a6d77510c73 100644 --- a/ui/app/styles/core/toggle.scss +++ b/ui/app/styles/core/toggle.scss @@ -62,7 +62,7 @@ content: ''; } .toggle[type='checkbox']:checked + label::before { - background: var(--token-color-palette-neutral-500); + background: var(--token-color-foreground-faint); } .toggle[type='checkbox']:checked + label::after { left: 1.625rem; diff --git a/ui/app/styles/docs.scss b/ui/app/styles/docs.scss index a820346ed54..de72e194f4b 100644 --- a/ui/app/styles/docs.scss +++ b/ui/app/styles/docs.scss @@ -60,13 +60,13 @@ pre, code { - background-color: var(--token-color-palette-neutral-100); + background-color: var(--token-color-surface-strong); } blockquote { margin-left: 1rem; padding: 0.5rem; - background: var(--token-color-palette-neutral-50); + background: var(--token-color-surface-faint); border-radius: 6px; } @@ -87,7 +87,7 @@ margin-bottom: 1rem; padding: 1rem; text-align: left; - border-radius: 6px; + border-radius: var(--token-border-radius-medium); } table { @@ -107,7 +107,7 @@ .docfy-demo { border: 1px solid var(--token-color-palette-neutral-50); - border-radius: 6px; + border-radius: var(--token-border-radius-medium); padding: 1rem; overflow: scroll; diff --git a/ui/app/styles/helper-classes/colors.scss b/ui/app/styles/helper-classes/colors.scss index aaebb5b9621..a186a3e0d22 100644 --- a/ui/app/styles/helper-classes/colors.scss +++ b/ui/app/styles/helper-classes/colors.scss @@ -11,7 +11,7 @@ } .has-background-white-bis { - background: var(--token-color-palette-neutral-50); + background: var(--token-color-surface-faint); } .has-background-gray-100 { @@ -77,7 +77,7 @@ select.has-error-border, } .has-text-neutral-500 { - color: var(--token-color-palette-neutral-500) !important; + color: var(--token-color-foreground-faint) !important; } .has-text-white { @@ -89,25 +89,25 @@ select.has-error-border, } .has-text-info { - color: var(--token-color-palette-blue-200) !important; + color: var(--token-color-foreground-action) !important; } // same without the !important .has-text-primary { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } .has-text-success { - color: var(--token-color-palette-green-200) !important; + color: var(--token-color-foreground-success) !important; } .has-text-highlight { - color: var(--token-color-palette-amber-200); + color: var(--token-color-foreground-warning); } .has-text-danger { - color: var(--token-color-palette-red-200) !important; + color: var(--token-color-foreground-critical) !important; } .has-text-primary { - color: var(--token-color-palette-blue-200); + color: var(--token-color-foreground-action); } diff --git a/ui/app/styles/utils/swagger.scss b/ui/app/styles/utils/swagger.scss index c08c34e514c..9c0e7f13a19 100644 --- a/ui/app/styles/utils/swagger.scss +++ b/ui/app/styles/utils/swagger.scss @@ -28,7 +28,7 @@ opacity: 1; .opblock-summary-method { - background-color: var(--token-color-palette-neutral-500); + background-color: var(--token-color-foreground-faint); } }