{{#if @model.isNew}}
diff --git a/ui/app/components/sidebar/frame.hbs b/ui/app/components/sidebar/frame.hbs
index 8511309370..2139385f3a 100644
--- a/ui/app/components/sidebar/frame.hbs
+++ b/ui/app/components/sidebar/frame.hbs
@@ -13,7 +13,7 @@
@icon="vault"
@route="vault.cluster.dashboard"
@model={{this.currentCluster.cluster.name}}
- @ariaLabel="home link"
+ @ariaLabel="Vault home"
data-test-sidebar-logo
/>
@@ -31,7 +31,7 @@
{{! this block is where the Hds::SideNav::Portal components render into }}
<:body>
-
+
<:footer>
diff --git a/ui/app/components/tool-actions-form.js b/ui/app/components/tool-actions-form.js
index 2441653bd3..40b183f3af 100644
--- a/ui/app/components/tool-actions-form.js
+++ b/ui/app/components/tool-actions-form.js
@@ -10,6 +10,7 @@ import Component from '@ember/component';
import { setProperties, computed, set } from '@ember/object';
import { addSeconds, parseISO } from 'date-fns';
import { A } from '@ember/array';
+import { capitalize } from '@ember/string';
const DEFAULTS = {
token: null,
@@ -30,6 +31,7 @@ const DEFAULTS = {
const WRAPPING_ENDPOINTS = ['lookup', 'wrap', 'unwrap', 'rewrap'];
export default Component.extend(DEFAULTS, {
+ flashMessages: service(),
store: service(),
// putting these attrs here so they don't get reset when you click back
//random
@@ -97,6 +99,7 @@ export default Component.extend(DEFAULTS, {
props = assign({}, props, { [keyName]: resp.wrap_info.token });
}
setProperties(this, props);
+ this.flashMessages.success(`${capitalize(action)} was successful.`);
},
getData() {
diff --git a/ui/app/styles/components/auth-form.scss b/ui/app/styles/components/auth-form.scss
index a0f7fc55b6..c6f62abfea 100644
--- a/ui/app/styles/components/auth-form.scss
+++ b/ui/app/styles/components/auth-form.scss
@@ -37,6 +37,6 @@
}
.is-label {
- color: $grey;
+ color: var(--token-color-foreground-faint);
}
}
diff --git a/ui/app/styles/components/calendar-widget.scss b/ui/app/styles/components/calendar-widget.scss
index 258fcf9bdc..d7db945638 100644
--- a/ui/app/styles/components/calendar-widget.scss
+++ b/ui/app/styles/components/calendar-widget.scss
@@ -32,30 +32,6 @@ $dark-gray: #535f73;
.calendar-widget {
grid-area: calendar-widget;
-
- > button {
- &.is-month-list {
- background-color: $white;
- color: black;
- text-align: center;
- border: $light-border;
- border-radius: $radius;
- }
- &.is-current-month {
- border: 1px solid $ui-gray-900;
- }
- &:hover {
- background-color: lighten($dark-gray, 30%);
- color: $white;
- text-align: center;
- cursor: pointer;
- }
- &.is-readOnly {
- background-color: $ui-gray-100;
- color: lighten($dark-gray, 30%);
- pointer-events: none;
- }
- }
}
.border-col {
@@ -84,15 +60,6 @@ $dark-gray: #535f73;
}
// for modal-dialog tooltips
-.calendar-tooltip {
- background-color: $ui-gray-700;
- color: $white;
- font-size: $size-8;
- padding: $spacing-10;
- border-radius: $radius-large;
- width: 141px;
-}
-
.ember-modal-dialog {
z-index: 1000;
}
diff --git a/ui/app/styles/components/console-ui-panel.scss b/ui/app/styles/components/console-ui-panel.scss
index 2342969ec8..ed4b420ef5 100644
--- a/ui/app/styles/components/console-ui-panel.scss
+++ b/ui/app/styles/components/console-ui-panel.scss
@@ -50,6 +50,10 @@ $console-close-height: 35px;
margin-left: $spacing-20;
padding: $spacing-12 $spacing-20;
}
+
+ .console-ui-panel-intro {
+ color: var(--token-color-palette-neutral-400);
+ }
}
.console-ui-input {
@@ -83,6 +87,7 @@ $console-close-height: 35px;
padding-right: $spacing-36;
position: relative;
background-color: rgba(#000, 0);
+ color: var(--token-color-palette-neutral-400);
&:hover {
background-color: rgba(#000, 0.5);
}
@@ -91,12 +96,24 @@ $console-close-height: 35px;
.console-ui-alert {
margin-left: calc(#{$spacing-20} - 0.33rem);
position: relative;
+ color: var(--token-color-palette-neutral-400);
svg {
position: absolute;
left: 0;
top: 0;
}
+
+ &.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: lighten(#e52228, 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: lighten(#008a22, 20%);
+ }
}
.panel-open .console-ui-panel {
diff --git a/ui/app/styles/components/doc-link.scss b/ui/app/styles/components/doc-link.scss
index 20edb9d62d..8629ee56a6 100644
--- a/ui/app/styles/components/doc-link.scss
+++ b/ui/app/styles/components/doc-link.scss
@@ -5,7 +5,6 @@
.doc-link {
color: $blue;
- text-decoration: none;
font-weight: $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 abac11593b..dce11b29e4 100644
--- a/ui/app/styles/components/empty-state-component.scss
+++ b/ui/app/styles/components/empty-state-component.scss
@@ -5,8 +5,8 @@
.empty-state {
align-items: center;
- color: $grey;
- background: $ui-gray-010;
+ color: var(--token-color-foreground-faint);
+ background: var(--token-color-surface-faint);
display: flex;
justify-content: center;
padding: $spacing-48 $spacing-12;
@@ -15,7 +15,7 @@
.empty-state-transparent {
align-items: center;
- color: $grey;
+ color: var(--token-color-foreground-faint);
background: transparent;
display: flex;
justify-content: center;
@@ -50,12 +50,6 @@
display: flex;
justify-content: space-between;
- a,
- .link,
- a:not(.button):not(.file-delete-button):not(.tag) {
- text-decoration: none;
- }
-
> * + * {
margin-left: $spacing-12;
margin-right: $spacing-12;
diff --git a/ui/app/styles/components/masked-input.scss b/ui/app/styles/components/masked-input.scss
index 5edd649e4d..12987d0574 100644
--- a/ui/app/styles/components/masked-input.scss
+++ b/ui/app/styles/components/masked-input.scss
@@ -3,8 +3,9 @@
* SPDX-License-Identifier: BUSL-1.1
*/
-.masked-font {
- color: $ui-gray-300;
+.masked-font,
+pre.masked-font {
+ color: var(--token-color-foreground-faint);
}
.masked-input {
@@ -84,7 +85,7 @@
}
.masked-input.masked .masked-value {
- color: $grey-light;
+ color: var(--token-color-foreground-faint);
}
.masked-input .input:focus + .masked-input-toggle {
diff --git a/ui/app/styles/components/radio-card.scss b/ui/app/styles/components/radio-card.scss
index d6b9c11138..b335ebb6ef 100644
--- a/ui/app/styles/components/radio-card.scss
+++ b/ui/app/styles/components/radio-card.scss
@@ -83,7 +83,7 @@
}
.radio-card-message-body {
line-height: 1.2;
- color: $ui-gray-500;
+ color: var(--token-color-foreground-faint);
font-size: $size-8;
}
diff --git a/ui/app/styles/components/search-select.scss b/ui/app/styles/components/search-select.scss
index 3e49c01b69..fe279671df 100644
--- a/ui/app/styles/components/search-select.scss
+++ b/ui/app/styles/components/search-select.scss
@@ -113,7 +113,7 @@ div > .ember-power-select-options {
}
.search-select-list-key {
- color: $grey;
+ color: var(--token-color-foreground-faint);
font-size: $size-8;
}
diff --git a/ui/app/styles/components/tool-tip.scss b/ui/app/styles/components/tool-tip.scss
index d452b0d1b4..e77d90033e 100644
--- a/ui/app/styles/components/tool-tip.scss
+++ b/ui/app/styles/components/tool-tip.scss
@@ -7,21 +7,24 @@
font-size: $size-7;
text-transform: none;
margin: 8px 0px 0 -4px;
+ border: none;
+ border-radius: $radius-large;
.box {
position: relative;
color: $white;
max-width: 200px;
- background: $grey;
+ background: $black;
padding: 0.5rem;
line-height: 1.4;
+ border-radius: $radius-large;
}
.fit-content {
max-width: fit-content;
}
- @include css-top-arrow(8px, $grey, 1px, $grey-dark, 20px);
+ @include css-top-arrow(8px, $black, 1px, $black, 20px);
&.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
animation: drop-fade-above 0.15s;
}
@@ -53,17 +56,17 @@
}
.ember-basic-dropdown-content--below.ember-basic-dropdown-content--left.tool-tip {
- @include css-top-arrow(8px, $grey, 1px, $grey-dark, calc(100% - 20px));
+ @include css-top-arrow(8px, $black, 1px, $black, calc(100% - 20px));
}
.ember-basic-dropdown-content--below.ember-basic-dropdown-content--right.tool-tip {
- @include css-top-arrow(8px, $grey, 1px, $grey-dark, calc(100% - 20px));
+ @include css-top-arrow(8px, $black, 1px, $black, calc(100% - 20px));
}
.ember-basic-dropdown-content--above.tool-tip {
- @include css-bottom-arrow(8px, $grey, 1px, $grey-dark);
+ @include css-bottom-arrow(8px, $black, 1px, $black);
margin-top: -8px;
}
.ember-basic-dropdown-content--above.ember-basic-dropdown-content--right.tool-tip {
- @include css-bottom-arrow(8px, $grey, 1px, $grey-dark, calc(100% - 20px));
+ @include css-bottom-arrow(8px, $black, 1px, $black, calc(100% - 20px));
}
.b-checkbox .tool-tip-trigger {
diff --git a/ui/app/styles/core/charts.scss b/ui/app/styles/core/charts.scss
index ece1e4cab2..167d9f1125 100644
--- a/ui/app/styles/core/charts.scss
+++ b/ui/app/styles/core/charts.scss
@@ -250,7 +250,7 @@ p.data-details {
}
.chart-tooltip {
- background-color: $ui-gray-700;
+ background-color: $black;
color: white;
font-size: $size-9;
padding: 6px;
@@ -282,7 +282,7 @@ p.data-details {
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
- border-top: 9px solid $ui-gray-700;
+ border-top: 9px solid $black;
position: absolute;
opacity: 0.8;
bottom: -9px;
diff --git a/ui/app/styles/core/element-styling.scss b/ui/app/styles/core/element-styling.scss
index 383d3e2a7c..596523db17 100644
--- a/ui/app/styles/core/element-styling.scss
+++ b/ui/app/styles/core/element-styling.scss
@@ -33,7 +33,8 @@ h6 {
a:hover,
body,
-pre,
+// default set here is too dark for HDS codeblock
+pre:not(.hds-code-block__code),
strong,
table th {
color: $ui-gray-900;
diff --git a/ui/app/styles/core/inputs.scss b/ui/app/styles/core/inputs.scss
index 275200d7b7..e7982fd811 100644
--- a/ui/app/styles/core/inputs.scss
+++ b/ui/app/styles/core/inputs.scss
@@ -81,5 +81,5 @@
.input-hint {
padding: 0 $spacing-10;
font-size: $size-8;
- color: $grey;
+ color: var(--token-color-foreground-faint);
}
diff --git a/ui/app/styles/core/json-diff-patch.scss b/ui/app/styles/core/json-diff-patch.scss
index 3e472d9ddb..170926ff05 100644
--- a/ui/app/styles/core/json-diff-patch.scss
+++ b/ui/app/styles/core/json-diff-patch.scss
@@ -9,15 +9,23 @@
.jsondiffpatch-deleted pre,
.jsondiffpatch-modified .jsondiffpatch-left-value pre,
.jsondiffpatch-textdiff-deleted {
- background: $red-500;
+ background: var(--token-color-foreground-critical-high-contrast);
}
.jsondiffpatch-added .jsondiffpatch-property-name,
.jsondiffpatch-added .jsondiffpatch-value pre,
.jsondiffpatch-modified .jsondiffpatch-right-value pre,
.jsondiffpatch-textdiff-added {
- background: $green-500;
+ background: var(--token-color-foreground-success-high-contrast);
}
.jsondiffpatch-property-name {
color: $ui-gray-300;
}
+
+.jsondiffpatch-added > .jsondiffpatch-property-name {
+ color: var(--token-color-surface-success);
+}
+
+.jsondiffpatch-deleted > .jsondiffpatch-property-name {
+ color: var(--token-color-surface-critical);
+}
diff --git a/ui/app/styles/core/link.scss b/ui/app/styles/core/link.scss
index 9382d51eef..efece782fc 100644
--- a/ui/app/styles/core/link.scss
+++ b/ui/app/styles/core/link.scss
@@ -21,7 +21,3 @@
cursor: default;
}
}
-// NICE TO HAVE: replace all instances with helper "is-no-underline"
-.link-plain {
- text-decoration: none;
-}
diff --git a/ui/app/styles/core/tag.scss b/ui/app/styles/core/tag.scss
index 4918d549ed..fd211e30b1 100644
--- a/ui/app/styles/core/tag.scss
+++ b/ui/app/styles/core/tag.scss
@@ -7,9 +7,10 @@
.tag:not(body) {
align-items: center;
- background-color: $ui-gray-100;
+ // same as HDS::Badge @color=neutral
+ background-color: var(--token-color-surface-strong);
+ color: var(--token-color-foreground-primary);
border-radius: $radius;
- color: $grey;
display: inline-flex;
font-size: $size-8;
font-weight: $font-weight-normal;
@@ -22,7 +23,7 @@
vertical-align: middle;
code {
- color: $grey;
+ color: var(--token-color-foreground-primary);
}
.icon {
diff --git a/ui/app/styles/helper-classes/colors.scss b/ui/app/styles/helper-classes/colors.scss
index 7f31e1df38..d505ef8b56 100644
--- a/ui/app/styles/helper-classes/colors.scss
+++ b/ui/app/styles/helper-classes/colors.scss
@@ -60,15 +60,11 @@ select.has-error-border,
}
.has-text-grey-light {
- color: $ui-gray-300 !important;
-}
-
-.has-text-grey-400 {
- color: $ui-gray-400;
+ color: var(--token-color-foreground-faint) !important;
}
.has-text-grey {
- color: $ui-gray-500 !important;
+ color: var(--token-color-foreground-faint) !important;
}
.has-text-grey-dark {
@@ -92,7 +88,7 @@ select.has-error-border,
}
.has-text-success {
- color: $green-500 !important;
+ color: var(--token-color-foreground-success) !important;
}
.has-text-highlight {
diff --git a/ui/app/styles/helper-classes/typography.scss b/ui/app/styles/helper-classes/typography.scss
index 2425adc375..4cde9b2d3c 100644
--- a/ui/app/styles/helper-classes/typography.scss
+++ b/ui/app/styles/helper-classes/typography.scss
@@ -3,7 +3,7 @@
* SPDX-License-Identifier: BUSL-1.1
*/
-/* This helper includes styles relating to: font-size, font-family, font-alignment, text-transform, text-weight, font-style, text-decoration.
+/* This helper includes styles relating to: font-size, font-family, font-alignment, text-transform, text-weight, font-style, text-decoration.
* Deprecated, please use the HDS text component to style fonts https://helios.hashicorp.design/components/text */
// font size helpers
@@ -101,7 +101,7 @@
}
.sub-text {
- color: $grey;
+ color: var(--token-color-foreground-faint);
margin-bottom: $size-11;
font-size: $size-8;
diff --git a/ui/app/templates/components/auth-form.hbs b/ui/app/templates/components/auth-form.hbs
index 8d06e36dcd..01ea4f760f 100644
--- a/ui/app/templates/components/auth-form.hbs
+++ b/ui/app/templates/components/auth-form.hbs
@@ -140,6 +140,7 @@
autocomplete="off"
spellcheck="false"
data-test-token={{true}}
+ id="token"
/>