diff --git a/ui/app/styles/components/autocomplete-input.scss b/ui/app/styles/components/autocomplete-input.scss index 5c5430d5d5..ed8d5f84ef 100644 --- a/ui/app/styles/components/autocomplete-input.scss +++ b/ui/app/styles/components/autocomplete-input.scss @@ -1,13 +1,11 @@ -@use '../utils/color_variables'; - /** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: BUSL-1.1 */ .autocomplete-input { - background: color_variables.$white !important; - border: 1px solid color_variables.$grey-light; + background: hsl(0, 0%, 100%) !important; + border: 1px solid var(--token-color-palette-neutral-300); box-sizing: border-box; border-radius: 3px; width: 99%; @@ -19,7 +17,7 @@ .autocomplete-input-option { padding: 12px; &:hover { - background-color: color_variables.$grey-lightest; + background-color: var(--token-color-palette-neutral-50); cursor: pointer; } } diff --git a/ui/app/styles/components/box-label.scss b/ui/app/styles/components/box-label.scss index 4704de5cc0..c15ef62cd8 100644 --- a/ui/app/styles/components/box-label.scss +++ b/ui/app/styles/components/box-label.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/size_variables'; @use '../core/box.scss'; @use '../core/columns.scss'; @@ -18,7 +17,7 @@ label.box-label { @extend .box; @extend .is-centered; - border-color: color_variables.$grey-light; + border-color: var(--token-color-palette-neutral-300); border-radius: 3px; box-shadow: box-shadow_variables.$box-link-shadow; text-decoration: none; @@ -37,12 +36,12 @@ label.box-label { box-shadow: box-shadow_variables.$box-link-hover-shadow, box-shadow_variables.$box-shadow-middle; .icon { - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); } } .icon { - color: color_variables.$grey-light; + color: var(--token-color-palette-neutral-300); } input[type='radio'] { @@ -50,7 +49,7 @@ label.box-label { } input[type='radio'] + label { - border: 1px solid color_variables.$grey-light; + border: 1px solid var(--token-color-palette-neutral-300); border-radius: 50%; cursor: pointer; display: block; @@ -60,16 +59,16 @@ label.box-label { } input[type='radio']:checked + label { - background: color_variables.$blue; - border: 1px solid color_variables.$blue; - box-shadow: inset 0 0 0 0.15rem color_variables.$white; + background: var(--token-color-palette-blue-200); + border: 1px solid var(--token-color-palette-blue-200); + box-shadow: inset 0 0 0 0.15rem hsl(0, 0%, 100%); } } .box-label-header { - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); .is-selected & { - color: color_variables.$grey-darkest; + color: var(--token-color-palette-neutral-600); } } diff --git a/ui/app/styles/components/calendar-widget.scss b/ui/app/styles/components/calendar-widget.scss index c616ccf527..a4f59ddfeb 100644 --- a/ui/app/styles/components/calendar-widget.scss +++ b/ui/app/styles/components/calendar-widget.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -41,7 +40,7 @@ $dark-gray: #535f73; .border-col { grid-area: border-col; - background-color: color_variables.$ui-gray-200; + background-color: var(--token-color-palette-neutral-200); } .calendar-widget-container { diff --git a/ui/app/styles/components/chart-container.scss b/ui/app/styles/components/chart-container.scss index 83635bfd03..9c4c5266d9 100644 --- a/ui/app/styles/components/chart-container.scss +++ b/ui/app/styles/components/chart-container.scss @@ -1,6 +1,5 @@ @use 'sass:color'; @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -31,24 +30,7 @@ grid-column-start: 1; grid-column-end: span col4-end; grid-row-start: 1; - box-shadow: inset 0 -1px 0 color_variables.$ui-gray-200; -} - -.has-header-link { - display: grid; - grid-template-columns: 4fr 1fr; - - .header-right { - text-align: right; - > button { - &:hover, - &:focus { - background-color: transparent; - background-color: color.adjust(color_variables.$ui-gray-050, $lightness: -5%); - border-color: color.adjust(color_variables.$ui-gray-300, $lightness: -5%); - } - } - } + box-shadow: inset 0 -1px 0 var(--token-color-palette-neutral-200); } .chart-container-wide { @@ -67,40 +49,6 @@ } } -.chart-container-left { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 2; - grid-row-end: 5; - padding-bottom: size_variables.$spacing-36; - margin-bottom: size_variables.$spacing-12; - box-shadow: inset 0 -1px 0 color_variables.$ui-gray-200; - - > h2 { - padding-left: 18px; - } - > p { - padding-left: 18px; - } -} - -.chart-container-right { - grid-column-start: 4; - grid-column-end: 8; - grid-row-start: 2; - grid-row-end: 5; - padding-bottom: size_variables.$spacing-36; - margin-bottom: size_variables.$spacing-12; - box-shadow: inset 0 -1px 0 color_variables.$ui-gray-200; - - > h2 { - padding-left: 18px; - } - > p { - padding-left: 18px; - } -} - .chart-empty-state { place-self: center stretch; grid-row-end: span 2; @@ -159,14 +107,14 @@ h2.chart-title { } p.chart-description { - color: color_variables.$ui-gray-700; + color: var(--token-color-palette-neutral-500); font-size: 14px; line-height: 18px; margin-bottom: size_variables.$spacing-8; } p.chart-subtext { - color: color_variables.$ui-gray-500; + color: var(--token-color-palette-neutral-400); font-size: size_variables.$size-8; line-height: 16px; margin-top: size_variables.$spacing-8; diff --git a/ui/app/styles/components/console-ui-panel.scss b/ui/app/styles/components/console-ui-panel.scss index 6244c1a9d2..3174ad4c98 100644 --- a/ui/app/styles/components/console-ui-panel.scss +++ b/ui/app/styles/components/console-ui-panel.scss @@ -1,6 +1,5 @@ @use 'sass:color'; @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -29,7 +28,7 @@ $console-close-height: 35px; } .console-ui-panel-content { - color: color_variables.$white; + color: hsl(0, 0%, 100%); display: flex; flex-direction: column; font-size: size_variables.$size-7; @@ -58,11 +57,11 @@ $console-close-height: 35px; display: flex; input { - background-color: rgba(color_variables.$black, 0.5); + background-color: rgba(hsl(0, 0%, 4%), 0.5); border: 1px solid var(--token-color-palette-neutral-500); border-radius: var(--token-side-nav-body-list-item-border-radius); - caret-color: color_variables.$white; - color: color_variables.$white; + caret-color: hsl(0, 0%, 100%); + color: hsl(0, 0%, 100%); flex: 1 1 auto; font-family: font_variables.$family-monospace; font-size: size_variables.$size-6; @@ -102,13 +101,9 @@ $console-close-height: 35px; } &.console-ui-alert--error { - // HDS tokens are not light enough on the dark background to pass a11y tests. - // hex value for --token-color-foreground-critical color: color.adjust(#e52228, $lightness: 20%); } &.console-ui-alert--success { - // HDS tokens are not light enough on the dark background to pass a11y tests. - // hex value for --token-color-foreground-success color: color.adjust(#008a22, $lightness: 20%); } } diff --git a/ui/app/styles/components/control-group.scss b/ui/app/styles/components/control-group.scss index adfdeb2fd3..54ff8b909b 100644 --- a/ui/app/styles/components/control-group.scss +++ b/ui/app/styles/components/control-group.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/size_variables'; @use '../core/box.scss'; @@ -13,10 +12,10 @@ @extend .box; box-shadow: box-shadow_variables.$box-shadow-middle, - 0 0 1px color_variables.$grey-dark; + 0 0 1px var(--token-color-palette-neutral-500); } .control-group-success.is-editor { - background: color_variables.$grey-lightest; + background: var(--token-color-palette-neutral-50); } .control-group a { @@ -25,8 +24,8 @@ .control-group-header { box-shadow: 0 0 1px currentColor; padding: size_variables.$spacing-10 size_variables.$spacing-14; - background: color_variables.$grey-lightest; - color: color_variables.$grey-dark; + background: var(--token-color-palette-neutral-50); + color: var(--token-color-palette-neutral-500); position: relative; strong { color: currentColor; @@ -34,8 +33,8 @@ } .control-group-header.is-success { - color: color_variables.$green-dark; - background: color_variables.$green-lightest; + color: var(--token-color-palette-green-300); + background: var(--token-color-palette-green-50); } .control-group .authorizations { diff --git a/ui/app/styles/components/doc-link.scss b/ui/app/styles/components/doc-link.scss index c1d3a4c6a3..b07fb279dd 100644 --- a/ui/app/styles/components/doc-link.scss +++ b/ui/app/styles/components/doc-link.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; /** @@ -7,7 +6,7 @@ */ .doc-link { - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); font-weight: font_variables.$font-weight-semibold; &:hover { text-decoration: underline !important; diff --git a/ui/app/styles/components/empty-state-component.scss b/ui/app/styles/components/empty-state-component.scss index e62611ebab..2169633ec3 100644 --- a/ui/app/styles/components/empty-state-component.scss +++ b/ui/app/styles/components/empty-state-component.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -14,7 +13,7 @@ display: flex; justify-content: center; padding: size_variables.$spacing-48 size_variables.$spacing-12; - box-shadow: 0 -2px 0 -1px color_variables.$ui-gray-300; + box-shadow: 0 -2px 0 -1px var(--token-color-palette-neutral-300); } .empty-state-transparent { @@ -32,7 +31,7 @@ } .empty-state-title { - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); font-size: size_variables.$size-4; font-weight: font_variables.$font-weight-semibold; line-height: 1.2; diff --git a/ui/app/styles/components/env-banner.scss b/ui/app/styles/components/env-banner.scss index 01230117a9..ddd09b290f 100644 --- a/ui/app/styles/components/env-banner.scss +++ b/ui/app/styles/components/env-banner.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/size_variables'; /** @@ -11,11 +10,11 @@ border-radius: 3rem; background: linear-gradient( 135deg, - color_variables.$blue, + var(--token-color-palette-blue-200), hsl(271, 100%, 71%) ); // only use case for purple in the app. define here instead of utils/color_var animation: env-banner-color-rotate 8s infinite linear alternate; - color: color_variables.$white; + color: hsl(0, 0%, 100%); .hs-icon { margin: 0; diff --git a/ui/app/styles/components/form-section.scss b/ui/app/styles/components/form-section.scss index 7c43905f6f..666ca58bab 100644 --- a/ui/app/styles/components/form-section.scss +++ b/ui/app/styles/components/form-section.scss @@ -1,5 +1,3 @@ -@use '../utils/color_variables'; - /** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: BUSL-1.1 @@ -7,7 +5,7 @@ .form-section { padding: 1.75rem 0; - box-shadow: 0 -1px 0 0 rgba(color_variables.$black, 0.1); + box-shadow: 0 -1px 0 0 rgba(hsl(0, 0%, 4%), 0.1); } .field:first-child .form-section, @@ -21,6 +19,6 @@ background-color: black; pre { - color: color_variables.$ui-gray-010; + color: var(--token-color-palette-neutral-50); } } diff --git a/ui/app/styles/components/icon.scss b/ui/app/styles/components/icon.scss index 477b69ed28..d4edf1b32d 100644 --- a/ui/app/styles/components/icon.scss +++ b/ui/app/styles/components/icon.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/size_variables'; /** @@ -20,7 +19,7 @@ } .icon-blue { - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); } .hds-icon { diff --git a/ui/app/styles/components/info-table-row.scss b/ui/app/styles/components/info-table-row.scss index 4efe17afb3..7bae844b7f 100644 --- a/ui/app/styles/components/info-table-row.scss +++ b/ui/app/styles/components/info-table-row.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/mixins'; @use '../utils/size_variables'; @@ -9,7 +8,7 @@ */ .info-table-row { - box-shadow: 0 1px 0 color_variables.$grey-light; + box-shadow: 0 1px 0 var(--token-color-palette-neutral-300); margin: 0; &.has-no-shadow { @@ -22,8 +21,8 @@ &.thead { box-shadow: - 0 1px 0 color_variables.$grey-light, - 0 -1px 0 color_variables.$grey-light; + 0 1px 0 var(--token-color-palette-neutral-300), + 0 -1px 0 var(--token-color-palette-neutral-300); margin: 0; padding: 0 size_variables.$spacing-14 0 0; @@ -59,11 +58,11 @@ } .icon-true { - color: color_variables.$green-500; + color: var(--token-color-palette-green-200); } .icon-false { - color: color_variables.$ui-gray-300; + color: var(--token-color-palette-neutral-300); } a { @@ -96,7 +95,7 @@ .info-table-row-header { margin: 0; font-size: size_variables.$size-8; - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); font-weight: font_variables.$font-weight-semibold; @include mixins.until(size_variables.$mobile) { diff --git a/ui/app/styles/components/list-item-row.scss b/ui/app/styles/components/list-item-row.scss index c9dc0d4173..4771a6749d 100644 --- a/ui/app/styles/components/list-item-row.scss +++ b/ui/app/styles/components/list-item-row.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @use '../core/box.scss'; @@ -27,7 +26,7 @@ margin-left: auto; font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-semibold; - color: color_variables.$ui-gray-500; + color: var(--token-color-palette-neutral-400); } .center-display { @@ -58,8 +57,8 @@ a.list-item-row, padding-right: size_variables.$spacing-10; position: relative; box-shadow: - 0 2px 0 -1px color_variables.$grey-light, - 0 -2px 0 -1px color_variables.$grey-light, + 0 2px 0 -1px var(--token-color-palette-neutral-300), + 0 -2px 0 -1px var(--token-color-palette-neutral-300), box-shadow_variables.$box-link-hover-shadow, box-shadow_variables.$box-shadow-middle; } diff --git a/ui/app/styles/components/masked-input.scss b/ui/app/styles/components/masked-input.scss index f68db6e8d9..4963ee665c 100644 --- a/ui/app/styles/components/masked-input.scss +++ b/ui/app/styles/components/masked-input.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -56,7 +55,7 @@ pre.masked-font { .button.masked-input-toggle { min-width: size_variables.$spacing-36; border-left: 0; - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12); } @@ -72,7 +71,7 @@ pre.masked-font { min-width: size_variables.$spacing-24; border: 0; box-shadow: none; - color: color_variables.$grey-light; + color: var(--token-color-palette-neutral-300); padding-left: 0; padding-right: 0; @@ -81,7 +80,7 @@ pre.masked-font { &:focus, &:hover, &:focus:not(:active) { - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); border: 0; box-shadow: none; } @@ -93,5 +92,5 @@ pre.masked-font { } .masked-input .input:focus + .masked-input-toggle { - background: rgba(color_variables.$white, 0.95); + background: rgba(hsl(0, 0%, 100%), 0.95); } diff --git a/ui/app/styles/components/namespace-reminder.scss b/ui/app/styles/components/namespace-reminder.scss index 1b8bfd21b8..ecf10b702c 100644 --- a/ui/app/styles/components/namespace-reminder.scss +++ b/ui/app/styles/components/namespace-reminder.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -8,12 +7,12 @@ */ .namespace-reminder { - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); margin: 0 0 size_variables.$spacing-14 0; } .console-reminder p.namespace-reminder { - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); font-family: font_variables.$family-monospace; font-size: size_variables.$size-8; margin: size_variables.$spacing-4 0 0; diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss index 4774db8bec..647ceb630b 100644 --- a/ui/app/styles/components/popup-menu.scss +++ b/ui/app/styles/components/popup-menu.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -58,7 +57,7 @@ // so they match other dropdown elements until we replace popup-menu with Hds::Dropdown .hds-confirm-action-critical { &:hover { - background-color: color_variables.$ui-gray-050; + background-color: var(--token-color-palette-neutral-50); } div, span { @@ -72,26 +71,26 @@ .ember-power-select-option, .ember-power-select-option[aria-current='true'], a { - background-color: color_variables.$white; - color: color_variables.$grey-darkest; + background-color: hsl(0, 0%, 100%); + color: var(--token-color-palette-neutral-600); &:hover { - background-color: color_variables.$ui-gray-050; - color: color_variables.$ui-gray-900; + background-color: var(--token-color-palette-neutral-50); + color: var(--token-color-palette-neutral-600); } &.active, &.is-active { background-color: transparent; - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); } &.is-destroy { - color: color_variables.$red; + color: var(--token-color-palette-red-200); &:hover { - background-color: color_variables.$red; - color: color_variables.$white; + background-color: var(--token-color-palette-red-200); + color: hsl(0, 0%, 100%); } } @@ -110,7 +109,7 @@ } .menu-label { - color: color_variables.$grey-dark; + color: var(--token-color-palette-neutral-500); font-size: size_variables.$size-9; font-weight: font_variables.$font-weight-normal; letter-spacing: 0; @@ -124,7 +123,7 @@ } hr { - background-color: color_variables.$ui-gray-200; + background-color: var(--token-color-palette-neutral-200); margin: 0; } } diff --git a/ui/app/styles/components/radial-progress.scss b/ui/app/styles/components/radial-progress.scss index dbf92fad9e..727fac1dc7 100644 --- a/ui/app/styles/components/radial-progress.scss +++ b/ui/app/styles/components/radial-progress.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/size_variables'; /** @@ -10,11 +9,11 @@ transform: rotate(-90deg) translateX(-20%); } .radial-progress circle { - stroke: rgba(color_variables.$grey-light, 0.5); + stroke: rgba(var(--token-color-palette-neutral-300), 0.5); transition: stroke-dashoffset size_variables.$speed ease-in; will-change: stroke-dashoffset; stroke-linecap: round; } .radial-progress circle.progress-fill { - stroke: color_variables.$green; + stroke: var(--token-color-palette-green-200); } diff --git a/ui/app/styles/components/radio-card.scss b/ui/app/styles/components/radio-card.scss index 8d779ffea0..48c4308364 100644 --- a/ui/app/styles/components/radio-card.scss +++ b/ui/app/styles/components/radio-card.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -29,7 +28,7 @@ } input[type='radio'] + span.dot { - border: 1px solid color_variables.$grey-light; + border: 1px solid var(--token-color-palette-neutral-300); border-radius: 50%; cursor: pointer; display: block; @@ -40,14 +39,14 @@ } input[type='radio']:checked + span.dot { - background: color_variables.$blue; - border: 1px solid color_variables.$blue; - box-shadow: inset 0 0 0 0.15rem color_variables.$white; + background: var(--token-color-palette-blue-200); + border: 1px solid var(--token-color-palette-blue-200); + box-shadow: inset 0 0 0 0.15rem hsl(0, 0%, 100%); } input[type='radio']:focus + span.dot { box-shadow: - 0 0 10px 1px rgba(color_variables.$blue, 0.4), - inset 0 0 0 0.15rem color_variables.$white; + 0 0 10px 1px rgba(#1060ff, 0.4), + inset 0 0 0 0.15rem hsl(0, 0%, 100%); } &.is-disabled { @@ -77,7 +76,7 @@ padding: size_variables.$spacing-16; } .radio-card-icon { - color: color_variables.$ui-gray-300; + color: var(--token-color-palette-neutral-300); } .radio-card-message { margin: size_variables.$spacing-4; @@ -97,20 +96,20 @@ .radio-card-radio-row { display: flex; justify-content: center; - background: color_variables.$ui-gray-050; + background: var(--token-color-palette-neutral-50); padding: size_variables.$spacing-8; } .is-selected { &.radio-card { - border-color: color_variables.$blue-500; - background: color_variables.$ui-gray-010; + border-color: var(--token-color-palette-blue-200); + background: var(--token-color-palette-neutral-50); box-shadow: box-shadow_variables.$box-shadow-middle; } .radio-card-icon { - color: color_variables.$black; + color: hsl(0, 0%, 4%); } .radio-card-radio-row { - background: color_variables.$blue-050; + background: var(--token-color-palette-blue-50); } } diff --git a/ui/app/styles/components/raft-join.scss b/ui/app/styles/components/raft-join.scss index 276ad87547..660b89f436 100644 --- a/ui/app/styles/components/raft-join.scss +++ b/ui/app/styles/components/raft-join.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/size_variables'; /** @@ -14,7 +13,7 @@ padding-bottom: size_variables.$spacing-12; } .raft-join-unseal { - color: color_variables.$orange; + color: var(--token-color-palette-amber-200); 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 cc672ec075..3b8e5f97f1 100644 --- a/ui/app/styles/components/regex-validator.scss +++ b/ui/app/styles/components/regex-validator.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -20,10 +19,10 @@ .regex-group { font-family: font_variables.$family-monospace; font-size: size_variables.$size-8; - color: color_variables.$ui-gray-600; + color: var(--token-color-palette-neutral-500); } .regex-group-position { - background-color: color_variables.$ui-gray-200; + background-color: var(--token-color-palette-neutral-200); border-radius: 3px; padding-top: 5px; padding-bottom: 4px; diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss index a3ac3ddab6..06809d0582 100644 --- a/ui/app/styles/components/replication-dashboard.scss +++ b/ui/app/styles/components/replication-dashboard.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/mixins'; @use '../utils/size_variables'; @@ -15,11 +14,11 @@ line-height: normal; &:hover { - box-shadow: 0 0 0 1px rgba(color_variables.$grey-dark, 0.3); + box-shadow: 0 0 0 1px rgba(var(--token-color-palette-neutral-500), 0.3); } .toolbar-link { - color: color_variables.$blue-500; + color: var(--token-color-palette-blue-200); } } @@ -130,7 +129,7 @@ } .summary-state { padding-bottom: size_variables.$spacing-36; - border-bottom: 1px solid rgba(color_variables.$grey-dark, 0.3); + border-bottom: 1px solid rgba(var(--token-color-palette-neutral-500), 0.3); } // prevent double lines at the bottom of the dashboard diff --git a/ui/app/styles/components/search-select.scss b/ui/app/styles/components/search-select.scss index aea51b68af..6805c1d77d 100644 --- a/ui/app/styles/components/search-select.scss +++ b/ui/app/styles/components/search-select.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -48,7 +47,7 @@ z-index: -1; &::after { - background: color_variables.$white; + background: hsl(0, 0%, 100%); bottom: size_variables.$spacing-4; content: ''; left: size_variables.$spacing-4 + size_variables.$spacing-24; @@ -67,7 +66,7 @@ } div > .ember-power-select-options { - background: color_variables.$white; + background: hsl(0, 0%, 100%); border: box-shadow_variables.$base-border; box-shadow: box-shadow_variables.$box-shadow-middle; margin: -4px size_variables.$spacing-8 0; @@ -81,12 +80,12 @@ div > .ember-power-select-options { } .ember-power-select-option[aria-current='true'] { - background-color: color_variables.$ui-gray-050; - color: color_variables.$ui-gray-900; + background-color: var(--token-color-palette-neutral-50); + color: var(--token-color-palette-neutral-600); } .ember-power-select-option--no-matches-message { - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-semibold; text-transform: uppercase; @@ -94,7 +93,7 @@ div > .ember-power-select-options { &:hover, &:focus { background: transparent; - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); } } } @@ -111,12 +110,12 @@ div > .ember-power-select-options { } .control .button { - color: color_variables.$grey-light; + color: var(--token-color-palette-neutral-300); min-width: auto; &:hover, &:focus { - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); } } } diff --git a/ui/app/styles/components/shamir-progress.scss b/ui/app/styles/components/shamir-progress.scss index 7d74b03baa..f5aa8113e0 100644 --- a/ui/app/styles/components/shamir-progress.scss +++ b/ui/app/styles/components/shamir-progress.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/size_variables'; /** @@ -13,7 +12,7 @@ margin-right: size_variables.$spacing-12; } .progress { - box-shadow: 0 0 0 4px color_variables.$ui-gray-050; + box-shadow: 0 0 0 4px var(--token-color-palette-neutral-50); margin-top: size_variables.$spacing-8; min-width: 90px; } diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss index fedb1dca4a..2b4f717c65 100644 --- a/ui/app/styles/components/sidebar.scss +++ b/ui/app/styles/components/sidebar.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -12,7 +11,7 @@ .popup-menu-content { .menu-label { - color: color_variables.$black; + color: hsl(0, 0%, 4%); font-size: 14px; font-weight: font_variables.$font-weight-bold; text-transform: unset; @@ -25,6 +24,6 @@ .confirm-action-message p { padding-top: size_variables.$spacing-4; font-weight: font_variables.$font-weight-semibold; - color: color_variables.$black; + color: hsl(0, 0%, 4%); } } diff --git a/ui/app/styles/components/splash-page.scss b/ui/app/styles/components/splash-page.scss index d429a2d027..9185a821ef 100644 --- a/ui/app/styles/components/splash-page.scss +++ b/ui/app/styles/components/splash-page.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/mixins'; @use '../utils/size_variables'; @@ -16,7 +15,7 @@ } svg { - fill: color_variables.$white; + fill: hsl(0, 0%, 100%); height: 24px; width: 72px; diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss index 3de5778cb3..860697f86e 100644 --- a/ui/app/styles/components/stat-text.scss +++ b/ui/app/styles/components/stat-text.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -24,7 +23,7 @@ .stat-text { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: color_variables.$ui-gray-700; + color: var(--token-color-palette-neutral-500); line-height: inherit; } .stat-value { @@ -43,7 +42,7 @@ .stat-text { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: color_variables.$ui-gray-700; + color: var(--token-color-palette-neutral-500); line-height: inherit; } .stat-value { @@ -62,7 +61,7 @@ .stat-text { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: color_variables.$ui-gray-700; + color: var(--token-color-palette-neutral-500); line-height: inherit; } .stat-value { @@ -81,7 +80,7 @@ .stat-text { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: color_variables.$ui-gray-700; + color: var(--token-color-palette-neutral-500); line-height: inherit; } .stat-value { @@ -95,19 +94,19 @@ .stat-label { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: color_variables.$ui-gray-500; + color: var(--token-color-palette-neutral-400); line-height: inherit; } .stat-text { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: color_variables.$ui-gray-700; + color: var(--token-color-palette-neutral-500); line-height: inherit; } .stat-value { font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-normal; - color: color_variables.$ui-gray-800; + color: var(--token-color-palette-neutral-600); line-height: inherit; } } diff --git a/ui/app/styles/components/tabs-component.scss b/ui/app/styles/components/tabs-component.scss index 65a2e66bea..789ca5f182 100644 --- a/ui/app/styles/components/tabs-component.scss +++ b/ui/app/styles/components/tabs-component.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -15,7 +14,7 @@ .tabs { align-items: stretch; - box-shadow: inset 0 -1px 0 color_variables.$grey-light; + box-shadow: inset 0 -1px 0 var(--token-color-palette-neutral-300); display: flex; justify-content: space-between; overflow: hidden; @@ -34,22 +33,22 @@ box-shadow: none; } &.active { - border-color: color_variables.$blue; - color: color_variables.$blue; + border-color: var(--token-color-palette-blue-200); + color: var(--token-color-palette-blue-200); } } li { // solves for tools -> sub-tabs like "Unwrap data" -> "Data" &.is-active { - border-bottom: 2px solid color_variables.$blue; - color: color_variables.$blue; + border-bottom: 2px solid var(--token-color-palette-blue-200); + color: var(--token-color-palette-blue-200); } // solves for tabs on auth mounts & secrets engines > a { &.active { - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); background-color: transparent; - border-bottom: 2px solid color_variables.$blue; + border-bottom: 2px solid var(--token-color-palette-blue-200); } } } @@ -61,8 +60,8 @@ } &.active a, &.is-active a { - border-color: color_variables.$blue; - color: color_variables.$blue; + border-color: var(--token-color-palette-blue-200); + color: var(--token-color-palette-blue-200); } } // important for auth tabs in active state, otherwise the border-bottom will not show. @@ -72,7 +71,7 @@ justify-content: center; vertical-align: top; border-bottom: 2px solid transparent; - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); font-weight: font_variables.$font-weight-semibold; padding: size_variables.$spacing-14 size_variables.$spacing-12 size_variables.$spacing-12; text-decoration: none; @@ -82,12 +81,12 @@ &:hover, &:active { - border-color: color_variables.$grey-light; + border-color: var(--token-color-palette-neutral-300); } &:hover { - background-color: color_variables.$ui-gray-050; - color: color_variables.$grey-darkest; + background-color: var(--token-color-palette-neutral-50); + color: var(--token-color-palette-neutral-600); } } diff --git a/ui/app/styles/components/tool-tip.scss b/ui/app/styles/components/tool-tip.scss index ea832f7c91..2e909ec8c4 100644 --- a/ui/app/styles/components/tool-tip.scss +++ b/ui/app/styles/components/tool-tip.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/mixins'; @use '../utils/size_variables'; @@ -16,9 +15,9 @@ .box { position: relative; - color: color_variables.$white; + color: hsl(0, 0%, 100%); max-width: 200px; - background: color_variables.$black; + background: hsl(0, 0%, 4%); padding: 0.5rem; line-height: 1.4; border-radius: size_variables.$radius-large; @@ -28,7 +27,7 @@ max-width: fit-content; } - @include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, 20px); + @include mixins.css-top-arrow(8px, hsl(0, 0%, 4%), 1px, hsl(0, 0%, 4%), 20px); &.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in { animation: drop-fade-above 0.15s; } @@ -60,25 +59,19 @@ } .ember-basic-dropdown-content--below.ember-basic-dropdown-content--left.tool-tip { - @include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, calc(100% - 20px)); + @include mixins.css-top-arrow(8px, hsl(0, 0%, 4%), 1px, hsl(0, 0%, 4%), calc(100% - 20px)); } .ember-basic-dropdown-content--below.ember-basic-dropdown-content--right.tool-tip { - @include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, calc(100% - 20px)); + @include mixins.css-top-arrow(8px, hsl(0, 0%, 4%), 1px, hsl(0, 0%, 4%), calc(100% - 20px)); } .ember-basic-dropdown-content--above.tool-tip { - @include mixins.css-bottom-arrow(8px, color_variables.$black, 1px, color_variables.$black); + @include mixins.css-bottom-arrow(8px, hsl(0, 0%, 4%), 1px, hsl(0, 0%, 4%)); & { margin-top: -8px; } } .ember-basic-dropdown-content--above.ember-basic-dropdown-content--right.tool-tip { - @include mixins.css-bottom-arrow( - 8px, - color_variables.$black, - 1px, - color_variables.$black, - calc(100% - 20px) - ); + @include mixins.css-bottom-arrow(8px, hsl(0, 0%, 4%), 1px, hsl(0, 0%, 4%), calc(100% - 20px)); } .b-checkbox .tool-tip-trigger { diff --git a/ui/app/styles/components/toolbar.scss b/ui/app/styles/components/toolbar.scss index eb4f73eba0..35d42cd36d 100644 --- a/ui/app/styles/components/toolbar.scss +++ b/ui/app/styles/components/toolbar.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/mixins'; @use '../utils/size_variables'; @use '../core/buttons.scss'; @@ -14,17 +13,17 @@ } .toolbar { - background-color: color_variables.$ui-gray-010; - border: 1px solid color_variables.$ui-gray-100; - border-bottom-color: color_variables.$ui-gray-300; - border-top-color: color_variables.$ui-gray-300; + background-color: var(--token-color-palette-neutral-50); + 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); position: relative; &::after { background: linear-gradient( to right, - color_variables.$ui-gray-010, - rgba(color_variables.$ui-gray-010, 0) + var(--token-color-palette-neutral-50), + rgba(var(--token-color-palette-neutral-50), 0) ); bottom: 0; content: ''; @@ -43,7 +42,7 @@ .toolbar-label { padding: size_variables.$spacing-8; - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); } .toolbar-scroller { @@ -63,7 +62,7 @@ } &::-webkit-scrollbar-thumb { - background: color_variables.$ui-gray-300; + background: var(--token-color-palette-neutral-300); border-radius: size_variables.$spacing-4; } } @@ -99,13 +98,13 @@ @extend .is-ghost; @extend .has-icon-right; border: 0; - color: color_variables.$black; + color: hsl(0, 0%, 4%); transition: background-color size_variables.$speed; &:hover:not(.disabled) { - background-color: color_variables.$ui-gray-100; + background-color: var(--token-color-palette-neutral-100); border: 0; - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); } &:active { @@ -130,12 +129,12 @@ } } a.disabled.toolbar-link { - color: color_variables.$black; - background-color: color_variables.$white; + color: hsl(0, 0%, 4%); + background-color: hsl(0, 0%, 100%); cursor: not-allowed; &:hover { - background-color: color_variables.$ui-gray-100; - color: color_variables.$blue; + background-color: var(--token-color-palette-neutral-100); + color: var(--token-color-palette-blue-200); } } diff --git a/ui/app/styles/components/transform-edit.scss b/ui/app/styles/components/transform-edit.scss index 77e08bbf37..e749c00fce 100644 --- a/ui/app/styles/components/transform-edit.scss +++ b/ui/app/styles/components/transform-edit.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -8,10 +7,10 @@ */ .copy-text { - background: color_variables.$ui-gray-010; + background: var(--token-color-palette-neutral-50); & > code { - color: color_variables.$ui-gray-800; + color: var(--token-color-palette-neutral-600); padding: 14px; } } diff --git a/ui/app/styles/components/transit-card.scss b/ui/app/styles/components/transit-card.scss index 7222109d47..95585a5f43 100644 --- a/ui/app/styles/components/transit-card.scss +++ b/ui/app/styles/components/transit-card.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -19,7 +18,7 @@ .transit-card { border-radius: size_variables.$radius; - box-shadow: 0 0 0 1px rgba(color_variables.$grey-light, 0.4); + box-shadow: 0 0 0 1px rgba(var(--token-color-palette-neutral-300), 0.4); display: grid; grid-template-columns: 0.45fr 2fr; padding: size_variables.$spacing-16; @@ -32,20 +31,20 @@ .transit-action-description { font-family: font_variables.$family-sans; font-size: size_variables.$size-8; - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); } .title { - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); font-size: size_variables.$size-7; margin-bottom: size_variables.$spacing-4; } &:hover { box-shadow: - 0 0 0 1px color_variables.$blue-500, + 0 0 0 1px var(--token-color-palette-blue-200), box-shadow_variables.$box-shadow-middle; - background: color_variables.$blue-010; + background: var(--token-color-palette-blue-50); .title { color: initial; diff --git a/ui/app/styles/components/ttl-picker.scss b/ui/app/styles/components/ttl-picker.scss index 6f331afd21..3f2dd42e87 100644 --- a/ui/app/styles/components/ttl-picker.scss +++ b/ui/app/styles/components/ttl-picker.scss @@ -1,5 +1,3 @@ -@use '../utils/color_variables'; - /** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: BUSL-1.1 @@ -16,7 +14,7 @@ input.has-error, input.has-error:focus, input.has-error:hover { - border-color: color_variables.$red-dark; + border-color: var(--token-color-palette-red-300); } .ttl-value-error { diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index 703e3bb6a1..f69630e1c0 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -4,7 +4,6 @@ */ // Variables -@use 'utils/color_variables'; // colors need to come first. @use 'utils/box-shadow_variables'; @use 'utils/font_variables'; @use 'utils/size_variables'; diff --git a/ui/app/styles/core/box.scss b/ui/app/styles/core/box.scss index a248f71ec8..87fd7379b3 100644 --- a/ui/app/styles/core/box.scss +++ b/ui/app/styles/core/box.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/size_variables'; /** @@ -8,10 +7,10 @@ */ .box { - background-color: color_variables.$white; + background-color: hsl(0, 0%, 100%); border-radius: 0; - box-shadow: 0 0 0 1px rgba(color_variables.$grey-dark, 0.3); - color: color_variables.$ui-gray-900; + box-shadow: 0 0 0 1px rgba(var(--token-color-palette-neutral-500), 0.3); + color: var(--token-color-palette-neutral-600); display: block; padding: size_variables.$spacing-18; @@ -33,11 +32,11 @@ } &.no-top-shadow { - box-shadow: inset 0 -1px 0 0 rgba(color_variables.$black, 0.1); + box-shadow: inset 0 -1px 0 0 rgba(hsl(0, 0%, 4%), 0.1); } &.has-container { - box-shadow: 0 4px 4px rgba(color_variables.$black, 0.25); + box-shadow: 0 4px 4px rgba(hsl(0, 0%, 4%), 0.25); border: box-shadow_variables.$base-border; padding: size_variables.$spacing-24; } diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index d25a390b2c..52b811da92 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -1,6 +1,5 @@ @use 'sass:color'; @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -11,12 +10,12 @@ .button { align-items: center; - background-color: color_variables.$grey-lightest; - border: 1px solid color_variables.$grey-light; + background-color: var(--token-color-palette-neutral-50); + 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: color_variables.$ui-gray-800; + color: var(--token-color-palette-neutral-600); display: inline-block; font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-semibold; @@ -47,9 +46,9 @@ &:active, &.is-active, &:focus { - border-color: color.adjust(color_variables.$grey-light, $lightness: -10%); + border-color: color.adjust(#c2c5cb, $lightness: -10%); box-shadow: box-shadow_variables.$button-box-shadow-standard; - color: color.adjust(color_variables.$grey-dark, $lightness: -10%); + color: color.adjust(#656a76, $lightness: -10%); } &:focus:not(:active) { @@ -57,8 +56,8 @@ } &:disabled { - background-color: color_variables.$white; - border-color: color_variables.$ui-gray-050; + background-color: hsl(0, 0%, 100%); + border-color: var(--token-color-palette-neutral-50); box-shadow: none; cursor: not-allowed; opacity: 0.5; @@ -72,33 +71,33 @@ } &.is-danger { - background-color: color_variables.$red-500; - border-color: color.adjust(color_variables.$red-500, $lightness: -2%); - color: color_variables.$white; - text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25); + background-color: var(--token-color-palette-red-200); + border-color: color.adjust(#e52228, $lightness: -2%); + color: hsl(0, 0%, 100%); + text-shadow: 0 1px 1px rgba(hsl(0, 0%, 4%), 0.25); &:hover:not([disabled]) { - background-color: color.adjust(color_variables.$red-500, $lightness: -5%); - border-color: color.adjust(color_variables.$red-500, $lightness: -5%); + background-color: color.adjust(#e52228, $lightness: -5%); + border-color: color.adjust(#e52228, $lightness: -5%); box-shadow: box-shadow_variables.$box-shadow-middle; } &:active, &.is-active { - background-color: color.adjust(color_variables.$red-500, $lightness: -10%); - border-color: color.adjust(color_variables.$red-500, $lightness: -10%); + background-color: color.adjust(#e52228, $lightness: -10%); + border-color: color.adjust(#e52228, $lightness: -10%); box-shadow: box-shadow_variables.$box-shadow-middle; } &:focus { - border-color: color.adjust(color_variables.$red-500, $lightness: -10%); + border-color: color.adjust(#e52228, $lightness: -10%); box-shadow: box-shadow_variables.$button-box-shadow-standard; } } &.is-danger-outlined { - border: 1px solid color_variables.$red-500; - color: color_variables.$red-500; + border: 1px solid var(--token-color-palette-red-200); + color: var(--token-color-palette-red-200); } &.is-flat { @@ -111,12 +110,12 @@ background-color: transparent; border-color: transparent; box-shadow: none; - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); text-decoration: none; &:hover { - color: color_variables.$blue-500; - background-color: color_variables.$grey-lightest; + color: var(--token-color-palette-blue-500); + background-color: var(--token-color-palette-neutral-50); } } @@ -129,7 +128,7 @@ pointer-events: none; &::after { animation: spinAround 500ms infinite linear; - border: 2px solid color_variables.$ui-gray-300; + border: 2px solid var(--token-color-palette-neutral-300); border-radius: 290486px; border-right-color: transparent; border-top-color: transparent; @@ -146,7 +145,7 @@ &.is-link { background-color: transparent; border-color: transparent; - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); text-decoration: none; font-weight: font_variables.$font-weight-semibold; box-shadow: none; @@ -154,75 +153,75 @@ } &.is-primary { - background-color: color_variables.$blue; - border-color: color.adjust(color_variables.$blue, $lightness: -2%); - color: color_variables.$white; + background-color: var(--token-color-palette-blue-200); + border-color: color.adjust(#1060ff, $lightness: -2%); + color: hsl(0, 0%, 100%); font-weight: font_variables.$font-weight-bold; - text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25); + text-shadow: 0 1px 1px rgba(hsl(0, 0%, 4%), 0.25); &:disabled { - background-color: color_variables.$ui-gray-700; + background-color: var(--token-color-palette-neutral-500); border-color: transparent; box-shadow: none; } &:hover:not([disabled]) { - background-color: color.adjust(color_variables.$blue, $lightness: -5%); - border-color: color.adjust(color_variables.$blue, $lightness: -5%); + background-color: color.adjust(#1060ff, $lightness: -5%); + border-color: color.adjust(#1060ff, $lightness: -5%); box-shadow: box-shadow_variables.$box-shadow-middle; } &:active, &.is-active { - background-color: color.adjust(color_variables.$blue, $lightness: -10%); - border-color: color.adjust(color_variables.$blue, $lightness: -10%); + background-color: color.adjust(#1060ff, $lightness: -10%); + border-color: color.adjust(#1060ff, $lightness: -10%); box-shadow: box-shadow_variables.$box-shadow-middle; } &:focus { - border-color: color.adjust(color_variables.$blue, $lightness: -10%); + border-color: color.adjust(#1060ff, $lightness: -10%); box-shadow: box-shadow_variables.$button-box-shadow-standard; } &.is-loading::after { - border-color: transparent transparent color_variables.$white color_variables.$white; + border-color: transparent transparent hsl(0, 0%, 100%) hsl(0, 0%, 100%); } &.is-underlined { &:active, &.is-active { background-color: transparent; - border-bottom: 2px solid color.adjust(color_variables.$blue, $lightness: -10%); + border-bottom: 2px solid color.adjust(#1060ff, $lightness: -10%); border-radius: unset; - color: color.adjust(color_variables.$blue, $lightness: -10%); + color: color.adjust(#1060ff, $lightness: -10%); } } // is-primary.is-outlined the only is-outlined buttons are primary. &.is-outlined { background-color: transparent; - border-color: color_variables.$blue; - color: color_variables.$blue; + border-color: var(--token-color-palette-blue-200); + color: var(--token-color-palette-blue-200); &:hover, &:focus { background-color: transparent; - border-color: color.adjust(color_variables.$blue, $lightness: -10%); - color: color_variables.$blue; + border-color: color.adjust(#1060ff, $lightness: -10%); + color: var(--token-color-palette-blue-200); } &:active, &.is-active { background-color: transparent; - border-color: color.adjust(color_variables.$blue, $lightness: -10%); - color: color.adjust(color_variables.$blue, $lightness: -10%); + border-color: color.adjust(#1060ff, $lightness: -10%); + color: color.adjust(#1060ff, $lightness: -10%); } } &.is-outlined [disabled] { background-color: transparent; - border-color: color_variables.$ui-gray-700; + border-color: var(--token-color-palette-neutral-500); box-shadow: none; - color: color_variables.$ui-gray-700; + color: var(--token-color-palette-neutral-500); } } @@ -237,7 +236,7 @@ // End of button types &.tool-tip-trigger { - color: color_variables.$grey-dark; + color: var(--token-color-palette-neutral-500); min-width: auto; padding: 0; } @@ -291,8 +290,8 @@ } a.button.disabled { - color: color_variables.$white; - background-color: color_variables.$grey-dark; + color: hsl(0, 0%, 100%); + background-color: var(--token-color-palette-neutral-500); opacity: 0.5; border-color: transparent; box-shadow: none; @@ -315,7 +314,7 @@ a.button.disabled { cursor: pointer; &:disabled { - color: color_variables.$grey-light; + color: var(--token-color-palette-neutral-300); cursor: not-allowed; } } @@ -327,15 +326,15 @@ a.button.disabled { box-shadow: box-shadow_variables.$box-shadow-low; // TODO delete &.white-icon svg { - color: color_variables.$white; + color: hsl(0, 0%, 100%); } &.icon-grey-300 svg { - color: color_variables.$ui-gray-300; + color: var(--token-color-palette-neutral-300); } &.icon-grey-500 svg { - color: color_variables.$ui-gray-500; + color: var(--token-color-palette-neutral-400); } &.transparent { @@ -343,25 +342,25 @@ a.button.disabled { box-shadow: none; border: 1px solid transparent; &:hover { - border: 1px solid color_variables.$grey-light; + border: 1px solid var(--token-color-palette-neutral-300); border-color: var(--token-color-border-strong); } } &.primary { - background-color: color_variables.$blue; - border-color: color.adjust(color_variables.$blue, $lightness: -2%); - color: color_variables.$white; + background-color: var(--token-color-palette-blue-200); + border-color: color.adjust(#1060ff, $lightness: -2%); + color: hsl(0, 0%, 100%); font-weight: font_variables.$font-weight-bold; - text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25); + text-shadow: 0 1px 1px rgba(hsl(0, 0%, 4%), 0.25); svg { - color: color_variables.$white; + color: hsl(0, 0%, 100%); } } &.secondary { - background-color: color_variables.$grey-lightest; - border: 1px solid color_variables.$grey-light; + background-color: var(--token-color-palette-neutral-50); + border: 1px solid var(--token-color-palette-neutral-300); } &.in-dropdown { @@ -380,13 +379,13 @@ a.button.disabled { display: inline-flex; // temporarily fixes existing button alignment until we adopt Hds::ButtonSet // for toolbar-button must pass arg @color="secondary" &.toolbar-button { - color: color_variables.$black; + color: hsl(0, 0%, 4%); background: none; border: none; box-shadow: none; &:hover:not(.disabled) { - background-color: color_variables.$ui-gray-100; - color: color_variables.$blue; + background-color: var(--token-color-palette-neutral-100); + color: var(--token-color-palette-blue-200); } } } diff --git a/ui/app/styles/core/charts-lineal.scss b/ui/app/styles/core/charts-lineal.scss index d086e05a53..9abafabe43 100644 --- a/ui/app/styles/core/charts-lineal.scss +++ b/ui/app/styles/core/charts-lineal.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/size_variables'; /** @@ -19,12 +18,12 @@ fill: var(--token-color-palette-blue-500); } .lineal-axis { - color: color_variables.$ui-gray-500; + color: var(--token-color-palette-neutral-400); text { font-size: 0.75rem; } line { - color: color_variables.$ui-gray-300; + color: var(--token-color-palette-neutral-300); } } .lineal-tooltip-position { @@ -56,6 +55,6 @@ fill: var(--token-color-palette-blue-200); } .custom-bar-new_clients { - fill: var(--token-color-palette-blue-500); - color: var(--token-color-palette-blue-500); + fill: var(--token-color-palette-blue-200); + color: var(--token-color-palette-blue-200); } diff --git a/ui/app/styles/core/charts.scss b/ui/app/styles/core/charts.scss index 2128baf5c8..d372cac143 100644 --- a/ui/app/styles/core/charts.scss +++ b/ui/app/styles/core/charts.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -32,7 +31,7 @@ background-color: var(--token-color-palette-blue-200); } &.dot-new_clients { - background-color: var(--token-color-palette-blue-500); + background-color: var(--token-color-palette-blue-200); } } @@ -42,7 +41,7 @@ } .chart-tooltip { - background-color: color_variables.$black; + background-color: hsl(0, 0%, 4%); color: white; font-size: size_variables.$size-9; padding: 6px; @@ -64,7 +63,7 @@ height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-top: 9px solid color_variables.$black; + border-top: 9px solid hsl(0, 0%, 4%); position: absolute; opacity: 0.8; bottom: -9px; @@ -73,14 +72,14 @@ .has-grid { g > text { - color: color_variables.$ui-gray-500; + color: var(--token-color-palette-neutral-400); font-size: size_variables.$size-9; } g > line { // TODO: mix-blend doesn't work in firefox browser? mix-blend-mode: darken; - color: color_variables.$ui-gray-300; + color: var(--token-color-palette-neutral-300); } } @@ -90,29 +89,3 @@ font-size: size_variables.$size-9; } } - -// RESPONSIVE STYLING // - -@media only screen and (max-width: 950px) { - .chart-container-left { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 2; - grid-row-end: 3; - margin-left: size_variables.$spacing-48; - margin-right: size_variables.$spacing-48; - } - .chart-container-right { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 3; - grid-row-end: 4; - margin-left: size_variables.$spacing-48; - margin-right: size_variables.$spacing-48; - } - - .timestamp { - grid-column-start: 1; - grid-row-start: 4; - } -} diff --git a/ui/app/styles/core/checkbox-and-radio.scss b/ui/app/styles/core/checkbox-and-radio.scss index 71d942efc6..9cdaebff75 100644 --- a/ui/app/styles/core/checkbox-and-radio.scss +++ b/ui/app/styles/core/checkbox-and-radio.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -32,7 +31,7 @@ .radio[disabled], .checkbox input[disabled], .radio input[disabled] { - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); cursor: not-allowed; } @@ -43,7 +42,7 @@ // one-off checkbox class .checkbox-help-text { - color: color_variables.$ui-gray-700; + color: var(--token-color-palette-neutral-500); font-size: size_variables.$size-7; padding-left: 28px; } @@ -55,9 +54,9 @@ } .b-checkbox label::before { - background-color: color_variables.$white; + background-color: hsl(0, 0%, 100%); border-radius: 3px; - border: 1px solid color_variables.$ui-gray-300; + border: 1px solid var(--token-color-palette-neutral-300); content: ''; height: 17px; left: 0; @@ -68,7 +67,7 @@ } .b-checkbox input[type='checkbox']:checked + label::before { - border-color: color_variables.$blue; + border-color: var(--token-color-palette-blue-200); } .b-checkbox input[type='checkbox']:checked + label::after, @@ -86,7 +85,7 @@ } .b-checkbox label::after { - color: color_variables.$ui-gray-800; + color: var(--token-color-palette-neutral-600); font-size: 12px; height: 16px; left: 3px; @@ -111,7 +110,7 @@ .b-checkbox input[type='checkbox']:disabled + label::before, .b-checkbox input[type='radio']:disabled + label::before { - background-color: color_variables.$ui-gray-100; + background-color: var(--token-color-palette-neutral-100); cursor: not-allowed; } diff --git a/ui/app/styles/core/element-styling.scss b/ui/app/styles/core/element-styling.scss index 028756cf7e..b3fcd40363 100644 --- a/ui/app/styles/core/element-styling.scss +++ b/ui/app/styles/core/element-styling.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -41,7 +40,7 @@ body, pre:not(.hds-code-block__code), strong, table th { - color: color_variables.$ui-gray-900; + color: var(--token-color-palette-neutral-600); } h1, @@ -84,7 +83,7 @@ object { } html { - background-color: color_variables.$white; + background-color: hsl(0, 0%, 100%); font-size: size_variables.$base-font-size; // 16px -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -132,7 +131,7 @@ body { } a { - color: color_variables.$blue-500; + color: var(--token-color-palette-blue-200); cursor: pointer; text-decoration: underline; @@ -144,19 +143,19 @@ a { } a:hover { - color: color_variables.$ui-gray-900; + color: var(--token-color-palette-neutral-600); } code { background-color: transparent; - color: color_variables.$ui-gray-700; + color: var(--token-color-palette-neutral-500); font-size: 1em; font-weight: 400; padding: 0; } hr { - background-color: color_variables.$ui-gray-300; + background-color: var(--token-color-palette-neutral-300); border: none; display: block; height: 1px; @@ -194,7 +193,7 @@ label { // .hds-dropdown-list-item { > button:disabled { - color: color_variables.$black; + color: hsl(0, 0%, 4%); opacity: 0.5; cursor: not-allowed; } diff --git a/ui/app/styles/core/field.scss b/ui/app/styles/core/field.scss index 0f36b21d91..82c2987377 100644 --- a/ui/app/styles/core/field.scss +++ b/ui/app/styles/core/field.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/size_variables'; /** @@ -11,7 +10,7 @@ .field { // cannot use :read-only selector because tag used for other purposes &.is-readOnly { - background-color: color_variables.$ui-gray-100; + background-color: var(--token-color-palette-neutral-100); cursor: not-allowed; } diff --git a/ui/app/styles/core/file.scss b/ui/app/styles/core/file.scss index 97206ac3ba..3e4b8a16fd 100644 --- a/ui/app/styles/core/file.scss +++ b/ui/app/styles/core/file.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/size_variables'; @use '../core/buttons.scss'; @use '../core/inputs.scss'; @@ -49,7 +48,7 @@ .file-delete-button { @extend .button; @extend .is-transparent; - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); position: absolute; right: size_variables.$spacing-8; } diff --git a/ui/app/styles/core/inputs.scss b/ui/app/styles/core/inputs.scss index cd337f6af8..3376a07ff5 100644 --- a/ui/app/styles/core/inputs.scss +++ b/ui/app/styles/core/inputs.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/mixins'; @use '../utils/size_variables'; @@ -15,8 +14,8 @@ align-items: center; border-radius: size_variables.$radius; border: box-shadow_variables.$base-border; - box-shadow: 0 4px 1px rgba(color_variables.$black, 0.06) inset; - color: color_variables.$grey-dark; + box-shadow: 0 4px 1px rgba(hsl(0, 0%, 4%), 0.06) inset; + color: var(--token-color-palette-neutral-500); display: inline-flex; font-size: size_variables.$size-6; height: size_variables.$size-2; @@ -33,13 +32,13 @@ &.is-active, &:focus-visible { outline: none; - background-color: color_variables.$white; - border-color: color_variables.$blue-500 !important; + background-color: hsl(0, 0%, 100%); + border-color: var(--token-color-palette-blue-200) !important; box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25); } &:hover { - border-color: color_variables.$ui-gray-300; + border-color: var(--token-color-palette-neutral-300); } @include mixins.until(size_variables.$desktop) { @@ -53,13 +52,13 @@ .input[disabled], .textarea[disabled] { - border-color: color_variables.$grey-light; - background-color: color_variables.$ui-gray-100; - color: color_variables.$ui-gray-500; + border-color: var(--token-color-palette-neutral-300); + background-color: var(--token-color-palette-neutral-100); + color: var(--token-color-palette-neutral-400); cursor: not-allowed; &:hover { - border-color: color_variables.$grey-light; + border-color: var(--token-color-palette-neutral-300); } } diff --git a/ui/app/styles/core/json-diff-patch.scss b/ui/app/styles/core/json-diff-patch.scss index d5a5cc9b5d..4b695c63aa 100644 --- a/ui/app/styles/core/json-diff-patch.scss +++ b/ui/app/styles/core/json-diff-patch.scss @@ -1,5 +1,3 @@ -@use '../utils/color_variables'; - /** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: BUSL-1.1 @@ -21,7 +19,7 @@ } .jsondiffpatch-property-name { - color: color_variables.$ui-gray-300; + color: var(--token-color-palette-neutral-300); } .jsondiffpatch-added > .jsondiffpatch-property-name { diff --git a/ui/app/styles/core/label.scss b/ui/app/styles/core/label.scss index 2854eabda3..1189bb4ed4 100644 --- a/ui/app/styles/core/label.scss +++ b/ui/app/styles/core/label.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -10,7 +9,7 @@ // This file defines the style for .is-label .is-label { - color: color_variables.$grey-darkest; + color: var(--token-color-palette-neutral-600); font-size: 14px; font-weight: font_variables.$font-weight-bold; display: flex; @@ -29,6 +28,6 @@ } &::before { - border-color: color_variables.$grey-light; + border-color: var(--token-color-palette-neutral-300); } } diff --git a/ui/app/styles/core/link.scss b/ui/app/styles/core/link.scss index ab0bd1cf1b..8d35531ef7 100644 --- a/ui/app/styles/core/link.scss +++ b/ui/app/styles/core/link.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; /** @@ -9,7 +8,7 @@ .link { background: transparent; border: 0; - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); cursor: pointer; display: inline; font: inherit; diff --git a/ui/app/styles/core/lists.scss b/ui/app/styles/core/lists.scss index 0ec27ba3ba..65069721ec 100644 --- a/ui/app/styles/core/lists.scss +++ b/ui/app/styles/core/lists.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -14,7 +13,7 @@ align-items: center; &:before { font-size: size_variables.$size-5; - color: color_variables.$blue-500; + color: var(--token-color-palette-blue-200); content: '|'; position: relative; } @@ -22,7 +21,7 @@ .list-header { margin: size_variables.$spacing-10 size_variables.$spacing-10 0; - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); font-size: size_variables.$size-8; font-weight: font_variables.$font-weight-semibold; text-transform: uppercase; diff --git a/ui/app/styles/core/menu.scss b/ui/app/styles/core/menu.scss index 13af772fe8..dc5d774079 100644 --- a/ui/app/styles/core/menu.scss +++ b/ui/app/styles/core/menu.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -33,6 +32,6 @@ &:hover, &.is-active { - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); } } diff --git a/ui/app/styles/core/message.scss b/ui/app/styles/core/message.scss index e2b571a28a..57e3dc9038 100644 --- a/ui/app/styles/core/message.scss +++ b/ui/app/styles/core/message.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -13,8 +12,8 @@ } .message { - background: color_variables.$blue-010; - border: 1px solid color_variables.$blue-100; + background: var(--token-color-palette-blue-50); + border: 1px solid var(--token-color-palette-blue-100); margin-bottom: size_variables.$spacing-12; padding: size_variables.$spacing-12 size_variables.$spacing-16 size_variables.$spacing-16 size_variables.$spacing-12; @@ -25,12 +24,12 @@ } .message-icon { - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); margin-right: size_variables.$spacing-8; } .message-title { - color: color_variables.$blue-500; + color: var(--token-color-palette-blue-200); font-size: 16px; font-weight: font_variables.$font-weight-bold; line-height: 1.25; @@ -44,70 +43,70 @@ // message types, see message-types.js &.is-danger { - background: color_variables.$red-010; - border: 1px solid color_variables.$red-050; + background: var(--token-color-surface-critical); + border: 1px solid var(--token-color-palette-red-50); .message-body { - color: color_variables.$red-700; + color: var(--token-color-palette-red-300); } .message-icon { - color: color_variables.$red-500; + color: var(--token-color-palette-red-200); } .message-title { - color: color_variables.$red-700; + color: var(--token-color-palette-red-300); } } &.is-highlight { - background: color_variables.$yellow-010; - border: 1px solid color_variables.$yellow-100; + background: var(--token-color-surface-warning); + border: 1px solid var(--token-color-palette-amber-100); .message-body { - color: color_variables.$ui-gray-900; + color: var(--token-color-palette-neutral-600); } .message-icon { - color: color_variables.$yellow-500; + color: var(--token-color-palette-amber-200); } .message-title { - color: color_variables.$orange-700; + color: var(--token-color-palette-amber-300); } } &.is-info { - background-color: color_variables.$blue-010; + background-color: var(--token-color-palette-blue-50); .message-body { - color: color_variables.$blue-700; + color: var(--token-color-palette-blue-300); } .message-header { - background-color: color_variables.$blue-500; - color: color_variables.$white; + background-color: var(--token-color-palette-blue-200); + color: hsl(0, 0%, 100%); } .message-title { - color: color_variables.$blue-700; + color: var(--token-color-palette-blue-300); } } &.is-success { - background: color_variables.$green-010; - border: 1px solid color_variables.$green-100; + background: var(--token-color-surface-success); + border: 1px solid var(--token-color-palette-green-100); .message-body { - color: color_variables.$green-900; + color: var(--token-color-palette-green-500); } .message-icon { - color: color_variables.$green-500; + color: var(--token-color-palette-green-200); } .message-title { - color: color_variables.$green-700; + color: var(--token-color-palette-green-300); } } } diff --git a/ui/app/styles/core/progress.scss b/ui/app/styles/core/progress.scss index 1eb74275a4..f98a08a849 100644 --- a/ui/app/styles/core/progress.scss +++ b/ui/app/styles/core/progress.scss @@ -1,5 +1,4 @@ @use '../utils/box-shadow_variables'; -@use '../utils/color_variables'; @use '../utils/size_variables'; /** @@ -9,7 +8,7 @@ .progress { appearance: none; - background: color_variables.$ui-gray-050; + background: var(--token-color-palette-neutral-50); border: none; box-shadow: inset box-shadow_variables.$box-link-shadow; border-radius: size_variables.$radius; @@ -74,17 +73,17 @@ } .progress.is-success::-webkit-progress-value { - background-color: color_variables.$green-500; + background-color: var(--token-color-palette-green-200); } .progress.is-success::-moz-progress-bar { - background-color: color_variables.$green-500; + background-color: var(--token-color-palette-green-200); } .progress.is-success::-ms-fill { - background-color: color_variables.$green-500; + background-color: var(--token-color-palette-green-200); } .progress.is-success:indeterminate { - background-image: linear-gradient(to right, color_variables.$green-500 30%, #ededed 30%); + background-image: linear-gradient(to right, var(--token-color-palette-green-200) 30%, #ededed 30%); } diff --git a/ui/app/styles/core/select.scss b/ui/app/styles/core/select.scss index 7f387faccb..637f79f5d7 100644 --- a/ui/app/styles/core/select.scss +++ b/ui/app/styles/core/select.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/mixins'; @use '../utils/size_variables'; @@ -12,11 +11,11 @@ select { } .select select { - background-color: color_variables.$ui-gray-050; - box-shadow: 0 3px 1px rgba(color_variables.$black, 0.12); - border: 1px solid color_variables.$grey-light; + background-color: var(--token-color-palette-neutral-50); + 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: color_variables.$grey-dark; + color: var(--token-color-palette-neutral-500); cursor: pointer; display: block; font-size: 1em; @@ -41,7 +40,7 @@ select { &:focus, &:focus-visible, &.is-active { - border-color: color_variables.$blue-500; + border-color: var(--token-color-palette-blue-200); box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25); } } @@ -51,13 +50,13 @@ select { } .select select[disabled] { - border-color: color_variables.$grey-light; - background-color: color_variables.$ui-gray-100; - color: color_variables.$ui-gray-500; + border-color: var(--token-color-palette-neutral-300); + background-color: var(--token-color-palette-neutral-100); + color: var(--token-color-palette-neutral-400); cursor: not-allowed; user-select: none; &:hover { - border-color: color_variables.$grey-light; + border-color: var(--token-color-palette-neutral-300); } } diff --git a/ui/app/styles/core/title.scss b/ui/app/styles/core/title.scss index eb0b483908..9bd46cda4a 100644 --- a/ui/app/styles/core/title.scss +++ b/ui/app/styles/core/title.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/font_variables'; @use '../utils/size_variables'; @@ -23,7 +22,7 @@ word-break: break-word; > a { - color: color_variables.$black; + color: hsl(0, 0%, 4%); text-decoration: none; } @@ -64,5 +63,5 @@ .is-subtitle-gray { text-transform: uppercase; font-size: size_variables.$size-7; - color: color_variables.$ui-gray-500; + color: var(--token-color-palette-neutral-400); } diff --git a/ui/app/styles/core/toggle.scss b/ui/app/styles/core/toggle.scss index 233cb07463..8482c8e472 100644 --- a/ui/app/styles/core/toggle.scss +++ b/ui/app/styles/core/toggle.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/size_variables'; /** @@ -46,7 +45,7 @@ height: 1.5rem; border: 0.1rem solid transparent; border-radius: 0.75rem; - background: color_variables.$ui-gray-300; + background: var(--token-color-palette-neutral-300); content: ''; } .toggle[type='checkbox'] + label::after { @@ -58,12 +57,12 @@ height: 1rem; transform: translate3d(0, 0, 0); border-radius: 50%; - background: color_variables.$white; + background: hsl(0, 0%, 100%); transition: all 0.25s size_variables.$easing; content: ''; } .toggle[type='checkbox']:checked + label::before { - background: color_variables.$ui-gray-700; + background: var(--token-color-palette-neutral-500); } .toggle[type='checkbox']:checked + label::after { left: 1.625rem; @@ -99,10 +98,10 @@ will-change: left; } .toggle[type='checkbox']:focus + label { - box-shadow: 0 0 1px color_variables.$blue; + box-shadow: 0 0 1px var(--token-color-palette-blue-200); } .toggle[type='checkbox'].is-success:checked + label::before { - background: color_variables.$blue; + background: var(--token-color-palette-blue-200); } .toggle-label { diff --git a/ui/app/styles/docs.scss b/ui/app/styles/docs.scss index 5527017e48..a820346ed5 100644 --- a/ui/app/styles/docs.scss +++ b/ui/app/styles/docs.scss @@ -1,4 +1,3 @@ -@use 'utils/color_variables'; @use 'utils/size_variables'; /** @@ -30,7 +29,7 @@ h1, h2, h3 { - border-bottom: 1px solid color_variables.$grey-light; + border-bottom: 1px solid var(--token-color-palette-neutral-300); padding-bottom: 0.5rem; } @@ -61,13 +60,13 @@ pre, code { - background-color: color_variables.$ui-gray-100; + background-color: var(--token-color-palette-neutral-100); } blockquote { margin-left: 1rem; padding: 0.5rem; - background: color_variables.$ui-gray-010; + background: var(--token-color-palette-neutral-50); border-radius: 6px; } @@ -102,12 +101,12 @@ } } tr { - border-bottom: 1px solid color_variables.$grey-light; + border-bottom: 1px solid var(--token-color-palette-neutral-300); } } .docfy-demo { - border: 1px solid color_variables.$grey-lightest; + border: 1px solid var(--token-color-palette-neutral-50); border-radius: 6px; padding: 1rem; overflow: scroll; diff --git a/ui/app/styles/helper-classes/colors.scss b/ui/app/styles/helper-classes/colors.scss index 179aa7fcd2..aaebb5b962 100644 --- a/ui/app/styles/helper-classes/colors.scss +++ b/ui/app/styles/helper-classes/colors.scss @@ -1,5 +1,3 @@ -@use '../utils/color_variables'; - /** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: BUSL-1.1 @@ -9,27 +7,27 @@ // background colors .background-neutral-50 { - background: color_variables.$neutral-50; + background: var(--token-color-palette-neutral-50); } .has-background-white-bis { - background: color_variables.$ui-gray-050; + background: var(--token-color-palette-neutral-50); } .has-background-gray-100 { - background-color: color_variables.$ui-gray-100; + background-color: var(--token-color-palette-neutral-100); } .has-background-gray-200 { - background-color: color_variables.$ui-gray-200; + background-color: var(--token-color-palette-neutral-200); } .has-background-gray-300 { - background-color: color_variables.$ui-gray-300; + background-color: var(--token-color-palette-neutral-300); } .has-background-gray-900 { - background-color: color_variables.$ui-gray-900; + background-color: var(--token-color-palette-neutral-600); } .background-color-black { @@ -39,12 +37,12 @@ // borders .has-border-top-light { border-radius: 0; - border-top: 1px solid color_variables.$grey-light; + border-top: 1px solid var(--token-color-palette-neutral-300); } .has-border-bottom-light { border-radius: 0; - border-bottom: 1px solid color_variables.$grey-light; + border-bottom: 1px solid var(--token-color-palette-neutral-300); } .has-error-border, @@ -52,25 +50,25 @@ select.has-error-border, .ttl-picker-form-field-error input, .string-list-form-field-error .field:first-of-type textarea, .hds-form-checkbox.has-error-border { - border: 1px solid color_variables.$red-500; + border: 1px solid var(--token-color-palette-red-200); } .error-border-child-inputs input, .error-border-child-inputs textarea { - border: 1px solid color_variables.$red-500; + border: 1px solid var(--token-color-palette-red-200); } // specifically for the SearchSelect dropdown. .dropdown-has-error-border > div.ember-basic-dropdown-trigger { - border: 1px solid color_variables.$red-500; + border: 1px solid var(--token-color-palette-red-200); } // text color .text-grey-lightest { - color: color_variables.$grey-lightest; + color: var(--token-color-palette-neutral-50); } -.has-text-grey-light { +.has-text-neutral-300 { color: var(--token-color-foreground-faint) !important; } @@ -78,38 +76,38 @@ select.has-error-border, color: var(--token-color-foreground-faint) !important; } -.has-text-grey-dark { - color: color_variables.$ui-gray-700 !important; +.has-text-neutral-500 { + color: var(--token-color-palette-neutral-500) !important; } .has-text-white { - color: color_variables.$white !important; + color: hsl(0, 0%, 100%) !important; } .has-text-black { - color: color_variables.$black !important; + color: hsl(0, 0%, 4%) !important; } .has-text-info { - color: color_variables.$blue-500 !important; + color: var(--token-color-palette-blue-200) !important; } // same without the !important .has-text-primary { - color: color_variables.$blue-500; + color: var(--token-color-palette-blue-200); } .has-text-success { - color: var(--token-color-foreground-success) !important; + color: var(--token-color-palette-green-200) !important; } .has-text-highlight { - color: color_variables.$yellow-500; + color: var(--token-color-palette-amber-200); } .has-text-danger { - color: color_variables.$red-500 !important; + color: var(--token-color-palette-red-200) !important; } .has-text-primary { - color: color_variables.$blue; + color: var(--token-color-palette-blue-200); } diff --git a/ui/app/styles/helper-classes/general.scss b/ui/app/styles/helper-classes/general.scss index 40300d0fd4..0b099615bb 100644 --- a/ui/app/styles/helper-classes/general.scss +++ b/ui/app/styles/helper-classes/general.scss @@ -1,4 +1,3 @@ -@use '../utils/color_variables'; @use '../utils/size_variables'; /** @@ -11,8 +10,8 @@ // box-shadow helpers .has-only-top-shadow { box-shadow: - 0 -1px 0 -1px color_variables.$grey-light, - 0 -2px 0 -1px color_variables.$grey-light; + 0 -1px 0 -1px var(--token-color-palette-neutral-300), + 0 -2px 0 -1px var(--token-color-palette-neutral-300); } .is-shadowless { @@ -21,18 +20,18 @@ .is-sideless { box-shadow: - 0 2px 0 -1px color_variables.$grey-light, - 0 -2px 0 -1px color_variables.$grey-light; + 0 2px 0 -1px var(--token-color-palette-neutral-300), + 0 -2px 0 -1px var(--token-color-palette-neutral-300); } // this helper needs to go after is-sideless as they are often used together and is-bottomless needs to override is-sideless (no this is not ideal). .is-bottomless { - box-shadow: 0 -1px 0 0 color_variables.$grey-light; + box-shadow: 0 -1px 0 0 var(--token-color-palette-neutral-300); } // border helpers .has-default-border { - border: 1px solid color_variables.$grey !important; + border: 1px solid var(--token-color-palette-neutral-400) !important; } .is-borderless { @@ -70,13 +69,13 @@ // large grouped css blocks .is-hint { - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); font-size: size_variables.$size-8; padding: size_variables.$spacing-12 0; } .is-optional { - color: color_variables.$grey; + color: var(--token-color-palette-neutral-400); font-size: size_variables.$size-8; text-transform: lowercase; } diff --git a/ui/app/styles/utils/_box-shadow_variables.scss b/ui/app/styles/utils/_box-shadow_variables.scss index 06deb7c852..cb83a67e05 100644 --- a/ui/app/styles/utils/_box-shadow_variables.scss +++ b/ui/app/styles/utils/_box-shadow_variables.scss @@ -1,5 +1,3 @@ -@use 'color_variables'; - /** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: BUSL-1.1 @@ -8,27 +6,27 @@ // TODO: lots of inconsistent variation on box-shadow usage. Fix. // box -$box-shadow: 0 0 0 1px rgba(color_variables.$black, 0.1); +$box-shadow: 0 0 0 1px rgba(hsl(0, 0%, 4%), 0.1); $box-shadow-low: - 0 5px 1px -2px rgba(color_variables.$black, 0.12), - 0 3px 2px -1px rgba(color_variables.$black, 0); + 0 5px 1px -2px rgba(hsl(0, 0%, 4%), 0.12), + 0 3px 2px -1px rgba(hsl(0, 0%, 4%), 0); $box-shadow-middle: - 0 8px 4px -4px rgba(color_variables.$black, 0.1), - 0 6px 8px -2px rgba(color_variables.$black, 0.05); + 0 8px 4px -4px rgba(hsl(0, 0%, 4%), 0.1), + 0 6px 8px -2px rgba(hsl(0, 0%, 4%), 0.05); $box-shadow-high: - 0 12px 5px -7px rgba(color_variables.$black, 0.08), - 0 11px 10px -3px rgba(color_variables.$black, 0.1); + 0 12px 5px -7px rgba(hsl(0, 0%, 4%), 0.08), + 0 11px 10px -3px rgba(hsl(0, 0%, 4%), 0.1); $box-shadow-highest: - 0 16px 6px -10px rgba(color_variables.$black, 0.06), - 0 16px 16px -4px rgba(color_variables.$black, 0.2); + 0 16px 6px -10px rgba(hsl(0, 0%, 4%), 0.06), + 0 16px 16px -4px rgba(hsl(0, 0%, 4%), 0.2); // box-link -$box-link-shadow: 0 0 0 1px color_variables.$ui-gray-200; -$box-link-hover-shadow: 0 0 0 1px color_variables.$ui-gray-300; +$box-link-shadow: 0 0 0 1px var(--token-color-palette-neutral-200); +$box-link-hover-shadow: 0 0 0 1px var(--token-color-palette-neutral-300); // border -$base-border: 1px solid color_variables.$ui-gray-300; -$light-border: 1px solid color_variables.$ui-gray-200; +$base-border: 1px solid var(--token-color-palette-neutral-300); +$light-border: 1px solid var(--token-color-palette-neutral-200); // button specific -$button-box-shadow-standard: 0 3px 1px 0 rgba(color_variables.$black, 0.12); +$button-box-shadow-standard: 0 3px 1px 0 rgba(hsl(0, 0%, 4%), 0.12); diff --git a/ui/app/styles/utils/_color_variables.scss b/ui/app/styles/utils/_color_variables.scss deleted file mode 100644 index 05986d5a43..0000000000 --- a/ui/app/styles/utils/_color_variables.scss +++ /dev/null @@ -1,108 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -// HDS TOKENS - -// Grey -$neutral-50: var(--token-color-palette-neutral-50); - -/* -DEPRECATED -below variables are deprecated, use HDS tokens instead -*/ - -// UI Gray -$ui-gray-010: #fbfbfc; -$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; -$grey-lightest: $ui-gray-050; -$grey-light: $ui-gray-300; -$grey: $ui-gray-500; -$grey-dark: $ui-gray-700; -$grey-darkest: $ui-gray-900; - -// Black -$black: hsl(0, 0%, 4%); // in hex: #0a0a0a - -// White -$white: hsl(0, 0%, 100%); - -// Blue -$blue-010: #fbfcff; -$blue-050: #f0f5ff; -$blue-100: #bfd4ff; -$blue-300: #5b92ff; -$blue-500: #1563ff; -$blue-700: #0e40a3; -$blue-900: #061b46; -$blue-lightest: $blue-050; -$blue-light: $blue-300; -$blue: $blue-500; -$blue-dark: $blue-700; -$blue-darkest: $blue-900; - -// Red -$red-010: #fdfafb; -$red-050: #f9ecee; -$red-100: #efc7cc; -$red-300: #db7d88; -$red-500: #c73445; -$red-700: #7f222c; -$red-900: #370f13; -$red-lightest: $red-050; -$red-light: $red-300; -$red: $red-500; -$red-dark: $red-700; -$red-darkest: $red-900; - -// Green -$green-010: #fafdfa; -$green-050: #ecf7ed; -$green-100: #c6e9c9; -$green-300: #7acc81; -$green-500: #2eb039; -$green-700: #1e7125; -$green-900: #0d3010; -$green-lightest: $green-050; -$green-light: $green-300; -$green: $green-500; -$green-dark: $green-700; -$green-darkest: $green-900; - -// Orange -$orange-010: #fffcfa; -$orange-050: #fef4ec; -$orange-100: #fde0c8; -$orange-300: #fbb77f; -$orange-500: #fa8f37; -$orange-700: #a05c23; -$orange-900: #45270f; -$orange-lightest: $orange-050; -$orange-light: $orange-300; -$orange: $orange-500; -$orange-dark: $orange-700; -$orange-darkest: $orange-900; - -// Yellow -$yellow-010: #fffdf6; -$yellow-050: #fffbed; -$yellow-100: #fdeeba; -$yellow-300: #fbd95e; -$yellow-500: #fac402; -$yellow-700: #a07d02; -$yellow-900: #453601; -$yellow-lightest: $yellow-050; -$yellow-light: $yellow-300; -$yellow: $yellow-500; -$yellow-dark: $yellow-700; -$yellow-darkest: $yellow-900; diff --git a/ui/app/styles/utils/swagger.scss b/ui/app/styles/utils/swagger.scss index 0e38e77ff6..c08c34e514 100644 --- a/ui/app/styles/utils/swagger.scss +++ b/ui/app/styles/utils/swagger.scss @@ -1,5 +1,4 @@ @use '../utils/size_variables'; -@use '../utils/color_variables'; /** * Copyright (c) HashiCorp, Inc. @@ -13,15 +12,15 @@ padding: 0; .info a { - color: color_variables.$blue-700; + color: var(--token-color-palette-blue-300); } .title { small { - background-color: color_variables.$ui-gray-800; + background-color: var(--token-color-palette-neutral-600); } .version-stamp { - background-color: color_variables.$green-700; + background-color: var(--token-color-palette-green-300); } } @@ -29,26 +28,26 @@ opacity: 1; .opblock-summary-method { - background-color: color_variables.$ui-gray-700; + background-color: var(--token-color-palette-neutral-500); } } .opblock-get { .opblock-summary-method { - background-color: color_variables.$blue-500; + background-color: var(--token-color-palette-blue-200); } } .opblock-post, .opblock-patch { .opblock-summary-method { - background-color: color_variables.$green-700; + background-color: var(--token-color-palette-green-300); } } .opblock-delete { .opblock-summary-method { - background-color: color_variables.$red-500; + background-color: var(--token-color-palette-red-200); } } diff --git a/ui/lib/core/addon/components/string-list.hbs b/ui/lib/core/addon/components/string-list.hbs index dc7794eac6..71ee2480d5 100644 --- a/ui/lib/core/addon/components/string-list.hbs +++ b/ui/lib/core/addon/components/string-list.hbs @@ -53,7 +53,7 @@ {{/if}} {{#if (includes index this.indicesWithComma)}} - + {{/if}} {{/each}} diff --git a/ui/tests/integration/components/kv/page/kv-page-version-history-test.js b/ui/tests/integration/components/kv/page/kv-page-version-history-test.js index 2ccf91c861..c3ef7b791c 100644 --- a/ui/tests/integration/components/kv/page/kv-page-version-history-test.js +++ b/ui/tests/integration/components/kv/page/kv-page-version-history-test.js @@ -64,7 +64,7 @@ module('Integration | Component | kv | Page::Secret::Metadata::Version-History', if (data.destroyed) { assert .dom(`${PAGE.versions.icon(version)} [data-test-icon="x-square-fill"]`) - .hasStyle({ color: 'rgb(199, 52, 69)' }); + .hasStyle({ color: 'rgb(229, 34, 40)' }); } if (data.isSecretDeleted) { assert