mirrors/vault
1
0
Fork 0
mirror of https://github.com/hashicorp/vault.git synced 2025-08-05 22:27:03 +02:00
Code Issues Projects Releases Wiki Activity

UI: Cleanup scss color variables (#31386)

Browse Source 
* update greys to use hds tokens

* update blue vars

* remove unused color vars

* replace remaining colors, add hex codes in commnets

* update kv rgp color

* remove color_variables file and use hds tokens directly
This commit is contained in:
claire bontempo 2025-07-29 13:13:08 -07:00 committed by GitHub
parent 4036485739
commit f18a0643d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
60 changed files with 354 additions and 612 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/app/styles/components/autocomplete-input.scss
View File

@ -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;
}
}

19
ui/app/styles/components/box-label.scss
View File

@ -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);
}
}

3
ui/app/styles/components/calendar-widget.scss
View File

@ -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 {

58
ui/app/styles/components/chart-container.scss
View File

@ -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;

13
ui/app/styles/components/console-ui-panel.scss
View File

@ -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%);
}
}

13
ui/app/styles/components/control-group.scss
View File

@ -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 {

3
ui/app/styles/components/doc-link.scss
View File

@ -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;

5
ui/app/styles/components/empty-state-component.scss
View File

@ -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;

5
ui/app/styles/components/env-banner.scss
View File

@ -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;

6
ui/app/styles/components/form-section.scss
View File

@ -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);
}
}

3
ui/app/styles/components/icon.scss
View File

@ -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 {

13
ui/app/styles/components/info-table-row.scss
View File

@ -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) {

7
ui/app/styles/components/list-item-row.scss
View File

@ -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;
}

9
ui/app/styles/components/masked-input.scss
View File

@ -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);
}

5
ui/app/styles/components/namespace-reminder.scss
View File

@ -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;

23
ui/app/styles/components/popup-menu.scss
View File

@ -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;
}
}

5
ui/app/styles/components/radial-progress.scss
View File

@ -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);
}

25
ui/app/styles/components/radio-card.scss
View File

@ -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);
}
}

3
ui/app/styles/components/raft-join.scss
View File

@ -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;
}

5
ui/app/styles/components/regex-validator.scss
View File

@ -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;

7
ui/app/styles/components/replication-dashboard.scss
View File

@ -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

17
ui/app/styles/components/search-select.scss
View File

@ -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);
}
}
}

3
ui/app/styles/components/shamir-progress.scss
View File

@ -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;
}

5
ui/app/styles/components/sidebar.scss
View File

@ -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%);
}
}

3
ui/app/styles/components/splash-page.scss
View File

@ -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;

15
ui/app/styles/components/stat-text.scss
View File

@ -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;
}
}

27
ui/app/styles/components/tabs-component.scss
View File

@ -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);
}
}

21
ui/app/styles/components/tool-tip.scss
View File

@ -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 {

31
ui/app/styles/components/toolbar.scss
View File

@ -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);
}
}

5
ui/app/styles/components/transform-edit.scss
View File

@ -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;
}
}

11
ui/app/styles/components/transit-card.scss
View File

@ -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;

4
ui/app/styles/components/ttl-picker.scss
View File

@ -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 {

1
ui/app/styles/core.scss
View File

@ -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';

11
ui/app/styles/core/box.scss
View File

@ -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;
}

125
ui/app/styles/core/buttons.scss
View File

@ -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);
}
}
}

9
ui/app/styles/core/charts-lineal.scss
View File

@ -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);
}

37
ui/app/styles/core/charts.scss
View File

@ -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;
}
}

15
ui/app/styles/core/checkbox-and-radio.scss
View File

@ -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;
}

15
ui/app/styles/core/element-styling.scss
View File

@ -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>
.hds-dropdown-list-item {
> button:disabled {
color: color_variables.$black;
color: hsl(0, 0%, 4%);
opacity: 0.5;
cursor: not-allowed;
}

3
ui/app/styles/core/field.scss
View File

@ -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;
}

3
ui/app/styles/core/file.scss
View File

@ -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;
}

19
ui/app/styles/core/inputs.scss
View File

@ -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);
}
}

4
ui/app/styles/core/json-diff-patch.scss
View File

@ -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 {

5
ui/app/styles/core/label.scss
View File

@ -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);
}
}

3
ui/app/styles/core/link.scss
View File

@ -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;

5
ui/app/styles/core/lists.scss
View File

@ -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;

3
ui/app/styles/core/menu.scss
View File

@ -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);
}
}

49
ui/app/styles/core/message.scss
View File

@ -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);
}
}
}

11
ui/app/styles/core/progress.scss
View File

@ -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%);
}

19
ui/app/styles/core/select.scss
View File

@ -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);
}
}

5
ui/app/styles/core/title.scss
View File

@ -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);
}

11
ui/app/styles/core/toggle.scss
View File

@ -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 {

11
ui/app/styles/docs.scss
View File

@ -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;

48
ui/app/styles/helper-classes/colors.scss
View File

@ -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);
}

17
ui/app/styles/helper-classes/general.scss
View File

@ -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;
}

30
ui/app/styles/utils/_box-shadow_variables.scss
View File

@ -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);

108
ui/app/styles/utils/_color_variables.scss
View File

@ -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;

15
ui/app/styles/utils/swagger.scss
View File

@ -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);
}
}

2
ui/lib/core/addon/components/string-list.hbs
View File

@ -53,7 +53,7 @@
{{/if}}
</div>
{{#if (includes index this.indicesWithComma)}}
<Hds::Icon @name="alert-triangle" @color="var(--token-color-foreground-warning)" @size="24" @isInline={{true}} />
<Hds::Icon @name="alert-triangle" @color="warning" @size="24" @isInline={{true}} />
{{/if}}
</div>
{{/each}}

2
ui/tests/integration/components/kv/page/kv-page-version-history-test.js
View File

@ -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