luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

UI: Update Consul UI colors to use HDS colors (#16111) 

* update red color variables to hds

* change background red to be one step lighter

* map oranges

* map greens

* map blues

* map greys

* delete themes, colours: lemon, magenta, strawberry, and vault color aliases

* add unmapped rainbow colours

* replace white and transparent vars, remove unused semantic vars and frame placeholders

* small tweaks to improve contrast, change node health status x/check colours for non-voters to match design doc, replace semantic colour action w hds colour

* add unmapped grays, remove dark theme, manually set nav bar to use dark colours

* map consul pink colour

* map yellows

* add unmapped oranges, delete light theme

* remove readme, base variables, clean up dangling colours

* Start working on the nav disclosure menus

* Update main-nav-horizontal dropdowns

* Format template

* Update box-shadow tokens

* Replace --tone- usage with tokens

* Update nav disabled state and panel border colour

* Replace rgb usage on tile

* Fix permissions modal overlay

* More fixes

* Replace orange-500 with amber-200

* Update badge colors

* Update vertical sidebar colors

* Remove top border on consul peer list ul

---------

Co-authored-by: wenincode <tyler.wendlandt@hashicorp.com>
This commit is contained in:
Ella Cai 2023-02-27 11:30:12 -05:00 committed by GitHub
parent 7143eb2776
commit aa03846880
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
148 changed files with 756 additions and 2111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs
View File

@ -1,79 +1,69 @@
{{#let
(or @partition 'default')
(is-href 'dc.partitions' @dc.Name)
as |partition isManaging|}}
(or @partition "default")
(is-href "dc.partitions" @dc.Name)
as |partition isManaging|
}}
{{#if (can "choose partitions" dc=@dc)}}
<li
class="partitions"
data-test-partition-menu
<li class="partitions" data-test-partition-menu>
<DisclosureMenu
aria-label="Admin Partition"
@items={{append
(hash
Name="Manage Partitions" href=(href-to "dc.partitions" @dc.Name)
)
(reject-by "DeletedAt" @partitions)
}}
as |disclosure|
>
<DisclosureMenu
aria-label="Admin Partition"
@items={{append
(hash
Name="Manage Partitions"
href=(href-to 'dc.partitions' @dc.Name)
)
(reject-by 'DeletedAt' @partitions)
}}
as |disclosure|>
<disclosure.Action
{{on 'click' disclosure.toggle}}
>
{{if isManaging 'Manage Partition' partition}}
</disclosure.Action>
<disclosure.Menu as |panel|>
<DataSource
@src={{uri
'/*/*/${dc}/partitions'
(hash
dc=@dc.Name
)
}}
@onchange={{fn (optional @onchange)}}
/>
<panel.Menu as |menu|>
{{#each menu.items as |item|}}
<menu.Item
aria-current={{if
(or
(and isManaging item.href)
(and (not isManaging) (eq partition item.Name))
<disclosure.Action {{on "click" disclosure.toggle}}>
{{if isManaging "Manage Partition" partition}}
</disclosure.Action>
<disclosure.Menu as |panel|>
<DataSource
@src={{uri "/*/*/${dc}/partitions" (hash dc=@dc.Name)}}
@onchange={{fn (optional @onchange)}}
/>
<panel.Menu as |menu|>
{{#each menu.items as |item|}}
<menu.Item
aria-current={{if
(or
(and isManaging item.href)
(and (not isManaging) (eq partition item.Name))
)
"true"
}}
>
<menu.Action
{{on "click" disclosure.close}}
@href={{if
item.href
item.href
(if
isManaging
(href-to
"dc.services.index"
params=(hash
partition=item.Name nspace=undefined dc=@dc.Name
)
)
(href-to
"." params=(hash partition=item.Name nspace=undefined)
)
)
'true'
}}
>
<menu.Action
{{on 'click' disclosure.close}}
@href={{if item.href
item.href
(if isManaging
(href-to 'dc.services.index' params=(hash
partition=item.Name
nspace=undefined
dc=@dc.Name
))
(href-to '.' params=(hash
partition=item.Name
nspace=undefined
))
)
}}
>
{{item.Name}}
</menu.Action>
</menu.Item>
{{/each}}
</panel.Menu>
</disclosure.Menu>
</DisclosureMenu>
</li>
{{item.Name}}
</menu.Action>
</menu.Item>
{{/each}}
</panel.Menu>
</disclosure.Menu>
</DisclosureMenu>
</li>
{{else}}
<li
class="partition"
aria-label="Admin Partition"
>
{{'default'}}
<li class="partition" aria-label="Admin Partition">
{{"default"}}
</li>
{{/if}}
{{/let}}

42
ui/packages/consul-peerings/app/components/consul/peer/components.scss
View File

@ -5,7 +5,7 @@
%pill-terminated::before,
%pill-deleting::before {
--icon-size: icon-000;
content: '';
content: "";
}
%pill-pending,
%pill-establishing,
@ -19,58 +19,54 @@
%pill-pending::before {
--icon-name: icon-running;
--icon-color: rgb(var(--tone-gray-800));
--icon-color: var(--token-color-palette-neutral-600);
}
%pill-pending {
background-color: rgb(var(--tone-strawberry-050));
color: rgb(var(--tone-strawberry-500));
background-color: var(--token-color-consul-surface);
color: var(--token-color-consul-foreground);
}
%pill-establishing::before {
--icon-name: icon-running;
--icon-color: rgb(var(--tone-gray-800));
--icon-color: var(--token-color-palette-neutral-600);
}
%pill-establishing {
background-color: rgb(var(--tone-blue-050));
color: rgb(var(--tone-blue-500));
background-color: var(--token-color-palette-blue-50);
color: var(--token-color-palette-blue-200);
}
%pill-active::before {
--icon-name: icon-check;
--icon-color: rgb(var(--tone-green-800));
--icon-color: var(--token-color-palette-green-400);
}
%pill-active {
background-color: rgb(var(--tone-green-050));
color: rgb(var(--tone-green-600));
background-color: var(--token-color-palette-green-50);
color: var(--token-color-palette-green-200);
}
%pill-failing::before {
--icon-name: icon-x;
--icon-color: rgb(var(--tone-red-500));
--icon-color: var(--token-color-palette-red-200);
}
%pill-failing {
background-color: rgb(var(--tone-red-050));
color: rgb(var(--tone-red-500));
background-color: var(--token-color-palette-red-50);
color: var(--token-color-palette-red-200);
}
%pill-terminated::before {
--icon-name: icon-x-square;
--icon-color: rgb(var(--tone-gray-800));
--icon-color: var(--token-color-palette-neutral-600);
}
%pill-terminated {
background-color: rgb(var(--tone-gray-150));
color: rgb(var(--tone-gray-800));
background-color: var(--token-color-palette-neutral-200);
color: var(--token-color-palette-neutral-600);
}
%pill-deleting::before {
--icon-name: icon-loading;
--icon-color: rgb(var(--tone-green-800));
--icon-color: var(--token-color-foreground-warning-on-surface);
}
%pill-deleting {
background-color: rgb(var(--tone-yellow-050));
color: rgb(var(--tone-yellow-800));
background-color: var(--token-color-surface-warning);
color: var(--token-color-foreground-warning-on-surface);
}

8
ui/packages/consul-peerings/app/components/consul/peer/form/index.scss
View File

@ -19,9 +19,9 @@
position: relative;
}
ol::before {
content: '';
content: "";
border-left: var(--decor-border-100);
border-color: rgb(var(--tone-gray-300));
border-color: var(--token-color-palette-neutral-300);
height: 100%;
position: absolute;
left: 2rem;
@ -38,7 +38,7 @@
li::before {
--icon-name: icon-hexagon;
--icon-size: icon-600;
content: '';
content: "";
position: absolute;
z-index: 2;
}
@ -48,7 +48,7 @@
top: 0px;
font-size: 14px;
font-weight: var(--typo-weight-bold);
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-palette-neutral-0);
z-index: 1;
text-align: center;
}

4
ui/packages/consul-ui/app/components/anchors/index.scss
View File

@ -4,14 +4,14 @@ a[rel*='external']::after {
margin-left: 8px;
}
%main-content label a[rel*='help'] {
color: rgb(var(--tone-gray-400));
color: var(--token-color-foreground-disabled);
}
%main-content a[rel*='help']::after {
@extend %with-info-circle-outline-icon, %as-pseudo;
opacity: 0.4;
}
%main-content h2 a {
color: rgb(var(--tone-gray-900));
color: var(--token-color-foreground-strong);
}
%main-content h2 a[rel*='help']::after {
font-size: 0.65em;

4
ui/packages/consul-ui/app/components/anchors/skin.scss
View File

@ -8,7 +8,7 @@
%anchor,
%anchor-intent,
%anchor-active {
color: rgb(var(--color-action));
color: var(--token-color-foreground-action);
}
%anchor-decoration:hover,
%anchor-decoration:focus {
@ -20,7 +20,7 @@
%anchor {
@extend %anchor-decoration;
cursor: pointer;
background-color: var(--transparent);
background-color: transparent;
}
%anchor:hover,
%anchor:focus {

2
ui/packages/consul-ui/app/components/app-view/index.scss
View File

@ -32,7 +32,7 @@
width: 26px;
height: 26px;
cursor: pointer;
color: rgb(var(--tone-blue-500));
color: var(--token-color-foreground-action);
}
#toolbar-toggle {
display: none;

8
ui/packages/consul-ui/app/components/app-view/skin.scss
View File

@ -8,15 +8,15 @@
border-bottom: var(--decor-border-200);
}
%app-view-header h1 > em {
color: rgb(var(--tone-gray-600));
color: var(--token-color-foreground-faint);
}
%app-view-header dd > a {
color: rgb(var(--tone-gray-999));
color: var(--token-color-hashicorp-brand);
}
%app-view-content div > dl > dd {
color: rgb(var(--tone-gray-400));
color: var(--token-color-foreground-disabled);
}
%app-view-title,
%app-view-content form:not(.filter-bar) fieldset {
border-color: rgb(var(--tone-gray-200));
border-color: var(--token-color-surface-interactive-active);
}

2
ui/packages/consul-ui/app/components/app/index.scss
View File

@ -80,7 +80,7 @@ main {
position: fixed;
z-index: 50;
color: rgb(var(--tone-gray-400));
color: var(--token-color-foreground-disabled);
font-size: var(--typo-size-800);
width: 250px;

4
ui/packages/consul-ui/app/components/auth-form/skin.scss
View File

@ -1,5 +1,5 @@
%auth-form em {
@extend %p3;
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
font-style: normal;
}
}

2
ui/packages/consul-ui/app/components/auth-modal/layout.scss
View File

@ -6,7 +6,7 @@
padding-right: 42px;
}
%auth-modal footer {
background-color: var(--transparent);
background-color: transparent;
}
%auth-modal > div > div > div {
padding-bottom: 0;

4
ui/packages/consul-ui/app/components/auth-profile/index.scss
View File

@ -12,8 +12,8 @@
}
.auth-profile dt,
.auth-profile dd {
color: rgb(var(--tone-gray-800));
color: var(--token-color-paletter-neutral-300);
}
.auth-profile dt span {
color: rgb(var(--tone-gray-600));
color: var(--token-color-foreground-faint);
}

4
ui/packages/consul-ui/app/components/badge/index.scss
View File

@ -8,8 +8,8 @@
%badge,
%badge + dd {
@extend %pill;
background-color: rgb(var(--tone-gray-100));
color: rgb(var(--tone-gray-500));
background-color: var(--token-color-surface-strong);
color: var(--token-color-foreground-faint);
}
%badge::after,
%badge-reversed::after,

8
ui/packages/consul-ui/app/components/breadcrumbs/skin.scss
View File

@ -1,9 +1,9 @@
%crumbs {
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
text-decoration: none;
}
%crumbs:hover {
color: rgb(var(--tone-blue-500));
color: var(--token-color-foreground-action);
text-decoration: underline;
}
%crumbs::before {
@ -11,9 +11,9 @@
}
%breadcrumb-milestone::before {
@extend %with-chevron-left-mask, %as-pseudo;
background-color: rgb(var(--tone-gray-500));
background-color: var(--token-color-foreground-faint);
}
%breadcrumb::before {
content: '/';
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
}

19
ui/packages/consul-ui/app/components/buttons/skin.scss
View File

@ -16,7 +16,7 @@
@extend %button;
border-width: 1px;
border-radius: var(--decor-radius-100);
box-shadow: var(--decor-elevation-300);
box-shadow: var(--token-elevation-high-box-shadow);
}
/**/
%secondary-button:hover:not(:disabled):not(:active),
@ -27,14 +27,13 @@
@extend %frame-gray-400;
}
%secondary-button:disabled {
color: rgb(var(--tone-gray-600));
color: var(--token-color-foreground-faint);
}
%secondary-button:active {
/* %frame-gray-something */
@extend %frame-gray-700;
background-color: rgb(var(--tone-gray-200));
color: rgb(var(--tone-gray-800));
border-color: rgb(var(--tone-gray-700));
background-color: var(--token-color-surface-interactive-active);
color: var(--token-color-foreground-primary);
border-color: var(--token-color-foreground-faint);
}
/**/
%dangerous-button {
@ -52,8 +51,8 @@
}
%internal-button {
color: rgb(var(--tone-gray-900));
background-color: rgb(var(--tone-gray-000));
color: var(--token-color-foreground-strong);
background-color: var(--token-color-surface-primary);
}
%internal-button-dangerous {
@extend %frame-red-300;
@ -62,7 +61,7 @@
@extend %frame-red-700;
}
%internal-button-intent {
background-color: rgb(var(--tone-gray-050));
background-color: var(--token-color-surface-strong);
}
%internal-button:focus,
%internal-button:hover {
@ -80,7 +79,7 @@
top: 0;
height: 100%;
margin-left: 8px;
background-color: rgb(var(--tone-gray-300));
background-color: var(--token-color-palette-neutral-300);
}
%sort-button::before {
@extend %with-sort-mask, %as-pseudo;

6
ui/packages/consul-ui/app/components/card/skin.scss
View File

@ -5,7 +5,7 @@
%card {
border: var(--decor-border-100);
border-radius: var(--decor-radius-100);
background-color: rgb(var(--tone-gray-000) / 90%);
background-color: var(--token-color-surface-faint);
}
%card > section,
%card > ul > li {
@ -14,12 +14,12 @@
%card,
%card > section,
%card > ul > li {
border-color: rgb(var(--tone-gray-200));
border-color: var(--token-color-surface-interactive-active);
}
%card ul {
/*TODO: %list-style-none?*/
list-style-type: none;
}
%card-intent {
box-shadow: var(--decor-elevation-400);
box-shadow: var(--token-surface-mid-box-shadow);
}

2
ui/packages/consul-ui/app/components/code-editor/layout.scss
View File

@ -11,7 +11,7 @@
bottom: 0px;
width: 100%;
height: 25px;
background-color: rgb(var(--tone-gray-999));
background-color: var(--token-color-hashicorp-brand);
content: '';
display: block;
}

32
ui/packages/consul-ui/app/components/code-editor/skin.scss
View File

@ -21,7 +21,7 @@ $syntax-dark-gray: #535f73;
--syntax-dark-gray: #{$syntax-dark-gray};
--syntax-gutter-grey: #2a2f36;
--syntax-yellow: rgb(var(--tone-yellow-500));
--syntax-yellow: var(--token-color-vault-brand);
}
.CodeMirror {
max-width: 1260px;
@ -46,7 +46,7 @@ $syntax-dark-gray: #535f73;
.cm-s-hashi {
&.CodeMirror {
width: 100%;
background-color: rgb(var(--tone-gray-999)) !important;
background-color: var(--token-color-hashicorp-brand) !important;
color: #cfd2d1 !important;
border: none;
font-family: var(--typo-family-mono);
@ -81,7 +81,7 @@ $syntax-dark-gray: #535f73;
.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
background: rgb(var(--tone-gray-000) / 10%);
background: var(--token-color-surface-interactive);
}
span.cm-comment {
@ -158,7 +158,7 @@ $syntax-dark-gray: #535f73;
.CodeMirror-matchingbracket {
text-decoration: underline;
color: rgb(var(--tone-gray-000)) !important;
color: var(--token-color-surface-primary) !important;
}
}
@ -182,7 +182,7 @@ $syntax-dark-gray: #535f73;
}
span.cm-property {
color: rgb(var(--tone-gray-000));
color: var(--token-color-surface-primary);
}
span.cm-variable-2 {
@ -193,32 +193,32 @@ $syntax-dark-gray: #535f73;
%code-editor {
.toolbar-container {
background: rgb(var(--tone-gray-050));
background: var(--token-color-surface-strong);
background: linear-gradient(
180deg,
rgb(var(--tone-gray-050)) 50%,
rgb(var(--tone-gray-150)) 100%
var(--token-color-surface-strong) 50%,
var(--token-color-surface-interactive-active) 100%
);
border: 1px solid rgb(var(--tone-gray-150));
border-bottom-color: rgb(var(--tone-gray-600));
border-top-color: rgb(var(--tone-gray-400));
border: 1px solid var(--token-color-surface-interactive-active);
border-bottom-color: var(--token-color-foreground-faint);
border-top-color: var(--token-color-foreground-disabled);
.toolbar {
.title {
color: rgb(var(--tone-gray-900));
color: var(--token-color-foreground-strong);
font-size: 14px;
font-weight: 700;
}
.toolbar-separator {
border-right: 1px solid rgb(var(--tone-gray-300));
border-right: 1px solid var(--token-color-palette-neutral-300);
}
}
.ember-power-select-trigger {
background-color: rgb(var(--tone-gray-000));
color: rgb(var(--tone-gray-999));
background-color: var(--token-color-surface-primary);
color: var(--token-color-hashicorp-brand);
border-radius: var(--decor-radius-100);
border: var(--decor-border-100);
border-color: rgb(var(--tone-gray-700));
border-color: var(--token-color-foreground-faint);
}
}
}

4
ui/packages/consul-ui/app/components/composite-row/index.scss
View File

@ -56,7 +56,7 @@
overflow-x: visible !important;
}
.consul-intention-permission-list > ul {
border-top: 1px solid rgb(var(--tone-gray-200));
border-top: 1px solid var(--token-color-surface-interactive-active);
}
.consul-service-instance-list .port dt,
.consul-service-instance-list .port dt::before {
@ -108,5 +108,5 @@
%composite-row-header .policy-management dd::before,
%composite-row-detail .policy-management::before {
@extend %with-star-fill-mask, %as-pseudo;
--icon-color: rgb(var(--tone-brand-600));
--icon-color: var(--token-color-consul-brand);
}

4
ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss
View File

@ -1,6 +1,6 @@
table div.with-confirmation.confirming {
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-surface-primary);
}
%confirmation-dialog-inline p {
color: rgb(var(--tone-gray-400));
color: var(--token-color-foreground-disabled);
}

10
ui/packages/consul-ui/app/components/consul/auth-method/index.scss
View File

@ -20,14 +20,14 @@
}
table {
thead td {
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
font-weight: var(--typo-weight-semibold);
font-size: var(--typo-size-700);
}
tbody {
td {
font-size: var(--typo-size-600);
color: rgb(var(--tone-gray-999));
color: var(--token-color-hashicorp-brand);
}
tr {
cursor: default;
@ -63,7 +63,7 @@
@extend %tabular-dl;
}
code {
background-color: rgb(var(--tone-gray-050));
background-color: var(--token-color-surface-strong);
padding: 0 12px;
}
}
@ -72,7 +72,7 @@
.consul-auth-method-nspace-list {
thead {
td {
color: rgb(var(--tone-gray-500)) !important;
color: var(--token-color-foreground-faint) !important;
font-weight: var(--typo-weight-semibold) !important;
font-size: var(--typo-size-700) !important;
}
@ -80,7 +80,7 @@
tbody {
td {
font-size: var(--typo-size-600);
color: rgb(var(--tone-gray-999));
color: var(--token-color-hashicorp-brand);
}
tr {
cursor: default;

151
ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
View File

@ -1,81 +1,82 @@
<style>
{{#if selected.nodes }}
{{selected.nodes}} {
opacity: 1 !important;
background-color: var(--tone-gray-000);
border: var(--decor-border-100);
border-radius: var(--decor-radius-200);
border-color: rgb(var(--tone-gray-500));
box-shadow: var(--decor-elevation-600);
}
{{#if selected.nodes}}
{{selected.nodes}}
{ opacity: 1 !important; background-color: var(--token-color-surface-interactive); border:
var(--decor-border-100); border-radius: var(--decor-radius-200); border-color:
var(--token-color-foreground-faint); box-shadow: var(--token-surface-high-box-shadow); }
{{/if}}
{{#if selected.edges }}
{{selected.edges}} {
opacity: 1;
}
{{#if selected.edges}}
{{selected.edges}}
{ opacity: 1; }
{{/if}}
</style>
<div class="routes">
<div class='routes'>
<header>
<h2>
{{chain.ServiceName}} Router
{{chain.ServiceName}}
Router
<span
{{tooltip 'Use routers to intercept traffic using Layer 7 criteria such as path prefixes or http headers.'}}
{{tooltip
'Use routers to intercept traffic using Layer 7 criteria such as path prefixes or http headers.'
}}
>
</span>
</h2>
</header>
<div role="group">
<div role='group'>
{{#each routes as |item|}}
<Consul::DiscoveryChain::RouteCard
{{on-resize (dom-position (set item 'rect') from=this.edges)}}
@item={{item}}
@onclick={{action "click"}}
@onclick={{action 'click'}}
/>
{{/each}}
</div>
</div>
<div class="splitters">
<div class='splitters'>
<header>
<h2>
Splitters
<span
{{tooltip 'Splitters are configured to split incoming requests across different services or subsets of a single service.'}}
{{tooltip
'Splitters are configured to split incoming requests across different services or subsets of a single service.'
}}
>
</span>
</h2>
</header>
<div role="group">
<div role='group'>
{{#each (sort-by 'Name' splitters) as |item|}}
<Consul::DiscoveryChain::SplitterCard
{{on-resize (dom-position (set item 'rect') from=this.edges)}}
@item={{item}}
@onclick={{action "click"}}
@onclick={{action 'click'}}
/>
{{/each}}
</div>
</div>
<div class="resolvers">
<div class='resolvers'>
<header>
<h2>
Resolvers
<span
{{tooltip "Resolvers are used to define which instances of a service should satisfy discovery requests."}}
{{tooltip
'Resolvers are used to define which instances of a service should satisfy discovery requests.'
}}
>
</span>
</h2>
</header>
<div role="group">
<div role='group'>
{{#each (sort-by 'Name' resolvers) as |item|}}
<Consul::DiscoveryChain::ResolverCard
{{on-resize (dom-position (set item 'rect') from=this.edges)}}
@item={{item}}
@edges={{this.edges}}
@onclick={{action "click"}}
@onclick={{action 'click'}}
/>
{{/each}}
</div>
@ -83,31 +84,28 @@
{{nodes}}
<svg class="edges"
<svg
class='edges'
{{did-insert (set this 'edges')}}
width="100%"
height="100%"
preserveAspectRatio="none"
width='100%'
height='100%'
preserveAspectRatio='none'
>
{{#each routes as |item|}}
{{#if item.rect}}
{{#let item.rect item.NextItem.rect as |src destRect|}}
{{#let (tween-to (hash
x=destRect.x
y=(add destRect.y (div destRect.height 2))
) (concat item.ID)) as |dest|}}
{{#let
(tween-to (hash x=destRect.x y=(add destRect.y (div destRect.height 2))) (concat item.ID))
as |dest|
}}
<path
id={{concat item.ID '>' item.NextNode}}
d={{
svg-curve (hash
x=dest.x
y=(sub dest.y 0)
) src=(hash
x=src.right
y=(add src.y (div src.height 2))
)}}
/>
<path
id={{concat item.ID '>' item.NextNode}}
d={{svg-curve
(hash x=dest.x y=(sub dest.y 0))
src=(hash x=src.right y=(add src.y (div src.height 2)))
}}
></path>
{{/let}}
{{/let}}
@ -119,27 +117,26 @@
{{#let splitter.rect as |src|}}
{{#each splitter.Splits as |item index|}}
{{#let item.NextItem.rect as |destRect|}}
{{#let (tween-to (hash
x=destRect.x
y=(add destRect.y (div destRect.height 2))
) (concat splitter.ID '-' index)) as |dest|}}
{{#let
(tween-to
(hash x=destRect.x y=(add destRect.y (div destRect.height 2)))
(concat splitter.ID '-' index)
)
as |dest|
}}
<path
{{tooltip
(concat (round (or item.Weight 0) decimals=2) '%')
options=(hash followCursor=true)
}}
id={{concat 'splitter:' splitter.Name '>' item.NextNode}}
class="split"
d={{
svg-curve (hash
x=dest.x
y=dest.y
) src=(hash
x=src.right
y=(add src.y (div src.height 2))
)}}
/>
<path
{{tooltip
(concat (round (or item.Weight 0) decimals=2) '%')
options=(hash followCursor=true)
}}
id={{concat 'splitter:' splitter.Name '>' item.NextNode}}
class='split'
d={{svg-curve
(hash x=dest.x y=dest.y)
src=(hash x=src.right y=(add src.y (div src.height 2)))
}}
></path>
{{/let}}
{{/let}}
@ -150,28 +147,28 @@
</svg>
<svg class="resolver-inlets" height="100%">
<svg class='resolver-inlets' height='100%'>
{{#each routes as |item|}}
{{#if (string-starts-with item.NextNode 'resolver:') }}
{{#if (string-starts-with item.NextNode 'resolver:')}}
{{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
<circle r="2.5" cx="5" cy={{add dest.y (div dest.height 2)}} />
<circle r='2.5' cx='5' cy={{add dest.y (div dest.height 2)}}></circle>
{{/let}}
{{/if}}
{{/each}}
{{#each splitters as |item|}}
{{#each item.Splits as |item|}}
{{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
<circle r="2.5" cx="5" cy={{add dest.y (div dest.height 2)}} />
{{/let}}
{{/each}}
{{#each item.Splits as |item|}}
{{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
<circle r='2.5' cx='5' cy={{add dest.y (div dest.height 2)}}></circle>
{{/let}}
{{/each}}
{{/each}}
</svg>
<svg class="splitter-inlets" height="100%">
<svg class='splitter-inlets' height='100%'>
{{#each routes as |item|}}
{{#if (string-starts-with item.NextNode 'splitter:') }}
{{#if (string-starts-with item.NextNode 'splitter:')}}
{{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
<circle r="2.5" cx="5" cy={{add dest.y (div dest.height 2)}} />
<circle r='2.5' cx='5' cy={{add dest.y (div dest.height 2)}}></circle>
{{/let}}
{{/if}}
{{/each}}

22
ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
View File

@ -19,7 +19,7 @@
transition-property: stroke;
fill: none;
stroke: rgb(var(--tone-gray-400));
stroke: var(--token-color-foreground-disabled);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
@ -30,18 +30,18 @@
}
%chain-node,
%chain-node a {
color: rgb(var(--tone-gray-900)) !important;
color: var(--token-color-foreground-strong) !important;
}
%discovery-chain-edge-active {
stroke: rgb(var(--tone-gray-900));
stroke: var(--token-color-foreground-strong);
}
%chain-group {
border-radius: var(--decor-radius-100);
border: 1px solid;
/* TODO: If this color is combined with the above */
/* border property then the compressor removes the color */
border-color: rgb(var(--tone-gray-200));
background-color: rgb(var(--tone-gray-100));
border-color: var(--token-color-surface-interactive-active);
background-color: var(--token-color-surface-strong);
pointer-events: none;
}
@ -66,8 +66,8 @@
}
%chain-node-active {
opacity: 1;
background-color: rgb(var(--tone-gray-000));
border-color: rgb(var(--tone-gray-500));
background-color: var(--token-color-surface-primary);
border-color: var(--token-color-foreground-faint);
}
/* TODO: More text truncation, centralize */
%route-card header:not(.short) dd {
@ -105,16 +105,16 @@
/**/
%with-chain-outlet::before {
@extend %as-pseudo;
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-surface-primary);
border-radius: var(--decor-radius-full);
border: 2px solid;
/* TODO: If this color is combined with the above */
/* border property then the compressor removes the color */
border-color: rgb(var(--tone-gray-400));
border-color: var(--token-color-foreground-disabled);
}
%discovery-chain circle {
stroke-width: 2;
stroke: rgb(var(--tone-gray-400));
fill: rgb(var(--tone-gray-000));
stroke: var(--token-color-foreground-disabled);
fill: var(--token-color-surface-primary);
}

2
ui/packages/consul-ui/app/components/consul/exposed-path/list/index.scss
View File

@ -1,6 +1,6 @@
.consul-exposed-path-list {
> ul {
border-top: 1px solid rgb(var(--tone-gray-200));
border-top: 1px solid var(--token-color-surface-interactive-active);
}
> ul > li {
@extend %composite-row;

2
ui/packages/consul-ui/app/components/consul/external-source/index.hbs
View File

@ -36,7 +36,7 @@
class="consul-external-source"
...attributes
>
<FlightIcon @name={{icon-mapping externalSource}} @color="rgb(var(--black))" class="mr-1.5 h-4 w-4" />
<FlightIcon @name={{icon-mapping externalSource}} @color="var(--token-color-hashicorp-brand)" class="mr-1.5 h-4 w-4" />
{{#if @label}}
{{@label}}
{{else}}

24
ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
View File

@ -19,7 +19,7 @@
}
%healthcheck-output dd em {
@extend %pill;
background-color: rgb(var(--tone-gray-100));
background-color: var(--token-color-surface-strong);
/*TODO: Should this be merged into %pill? */
cursor: default;
font-style: normal;
@ -28,41 +28,41 @@
}
%healthcheck-output.passing::before {
@extend %with-check-circle-fill-mask;
color: rgb(var(--tone-green-500));
color: var(--token-color-foreground-success);
}
%healthcheck-output.warning::before {
@extend %with-alert-triangle-mask;
color: rgb(var(--tone-orange-500));
color: var(--token-color-foreground-warning);
}
%healthcheck-output.critical::before {
@extend %with-cancel-square-fill-mask;
color: rgb(var(--tone-red-500));
color: var(--token-color-foreground-critical);
}
%healthcheck-output,
%healthcheck-output pre {
border-radius: var(--decor-radius-100);
}
%healthcheck-output dd:first-of-type {
color: rgb(var(--tone-gray-400));
color: var(--token-color-foreground-disabled);
}
%healthcheck-output pre {
background-color: rgb(var(--tone-gray-050));
color: rgb(var(--tone-gray-600));
background-color: var(--token-color-surface-strong);
color: var(--token-color-foreground-faint);
}
%healthcheck-output {
/* TODO: this should be a frame-gray */
color: rgb(var(--tone-gray-900));
border-color: rgb(var(--tone-gray-200));
color: var(--token-color-foreground-strong);
border-color: var(--token-color-surface-interactive-active);
border-style: solid;
border-left-width: 4px;
}
%healthcheck-output.passing {
border-left-color: rgb(var(--tone-green-500));
border-left-color: var(--token-color-foreground-success);
}
%healthcheck-output.warning {
border-left-color: rgb(var(--tone-yellow-500));
border-left-color: var(--token-color-vault-brand);
}
%healthcheck-output.critical {
border-left-color: rgb(var(--tone-red-500));
border-left-color: var(--token-color-foreground-critical);
}

8
ui/packages/consul-ui/app/components/consul/instance-checks/index.scss
View File

@ -7,18 +7,18 @@
}
&.passing dt::before {
@extend %with-check-circle-fill-mask;
color: rgb(var(--tone-green-500));
color: var(--token-color-foreground-success);
}
&.warning dt::before {
@extend %with-alert-triangle-mask;
color: rgb(var(--tone-orange-500));
color: var(--token-color-foreground-warning);
}
&.critical dt::before {
@extend %with-cancel-square-fill-mask;
color: rgb(var(--tone-red-500));
color: var(--token-color-foreground-critical);
}
&.empty dt::before {
@extend %with-minus-square-fill-mask;
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
}
}

8
ui/packages/consul-ui/app/components/consul/intention/components.scss
View File

@ -11,12 +11,12 @@
font-size: var(--typo-size-600);
}
%pill-allow {
color: rgb(var(--tone-green-800));
background-color: rgb(var(--tone-green-100));
color: var(--token-color-foreground-success-on-surface);
background-color: var(--token-color-border-success);
}
%pill-deny {
color: rgb(var(--tone-red-800));
background-color: rgb(var(--tone-red-100));
color: var(--token-color-foreground-critical-on-surface);
background-color: var(--token-color-border-critical);
}
%pill-l7 {
@extend %frame-gray-900;

2
ui/packages/consul-ui/app/components/consul/intention/list/skin.scss
View File

@ -1,5 +1,5 @@
%consul-intention-list td.permissions {
color: rgb(var(--tone-blue-500));
color: var(--token-color-foreground-action);
}
%consul-intention-list em {
--word-spacing: 0.25rem;

2
ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
View File

@ -1,6 +1,6 @@
.consul-intention-permission-form {
h2 {
border-top: 1px solid rgb(var(--tone-blue-500));
border-top: 1px solid var(--token-color-foreground-action);
@extend %h200;
}
button.type-submit {

2
ui/packages/consul-ui/app/components/consul/loader/skin.scss
View File

@ -1,5 +1,5 @@
%loader circle {
fill: rgb(var(--tone-brand-100));
fill: var(--token-color-consul-gradient-faint-stop);
}
%loader circle {
animation: loader-animation 1.5s infinite ease-in-out;

4
ui/packages/consul-ui/app/components/consul/peer/info/index.scss
View File

@ -1,6 +1,6 @@
.consul-peer-info {
background: rgb(var(--gray-100));
color: rgb(var(--gray-600));
background: var(--token-color-surface-faint);
color: var(--token-color-foreground-faint);
padding: 0px 8px;
border-radius: 2px;

17
ui/packages/consul-ui/app/components/consul/server/card/skin.scss
View File

@ -6,7 +6,7 @@
}
%consul-server-card .name + dd {
@extend %h300;
color: rgb(var(--tone-gray-999));
color: var(--token-color-hashicorp-brand);
animation-name: typo-truncate;
}
%consul-server-card .health-status + dd {
@ -14,16 +14,16 @@
font-size: var(--typo-size-700);
}
%consul-server-card.voting-status-non-voter .health-status + dd {
background-color: rgb(var(--tone-gray-100));
color: rgb(var(--tone-gray-600));
background-color: var(--token-color-surface-strong);
color: var(--token-color-foreground-faint);
}
%consul-server-card:not(.voting-status-non-voter) .health-status.healthy + dd {
background-color: rgb(var(--tone-green-050));
color: rgb(var(--tone-green-800));
background-color: var(--token-color-surface-success);
color: var(--token-color-palette-green-400);
}
%consul-server-card:not(.voting-status-non-voter) .health-status:not(.healthy) + dd {
background-color: rgb(var(--tone-red-050));
color: rgb(var(--tone-red-500));
background-color: var(--token-color-surface-critical);
color: var(--token-color-foreground-critical);
}
%consul-server-card .health-status + dd::before {
--icon-size: icon-000;
@ -31,10 +31,7 @@
}
%consul-server-card .health-status.healthy + dd::before {
--icon-name: icon-check;
--icon-color: rgb(var(--tone-green-800));
}
%consul-server-card .health-status:not(.healthy) + dd::before {
--icon-name: icon-x;
--icon-color: rgb(var(--tone-red-500));
}

4
ui/packages/consul-ui/app/components/consul/server/list/index.scss
View File

@ -9,6 +9,6 @@
}
%consul-server-list a:hover div {
box-shadow: var(--decor-elevation-800);
--tone-border: var(--tone-gray-500);
box-shadow: var(--token-elevation-overlay-box-shadow);
--tone-border: var(--token-color-foreground-faint);
}

2
ui/packages/consul-ui/app/components/consul/service/list/index.hbs
View File

@ -86,4 +86,4 @@
{{/if}}
<TagList @item={{item}} />
</BlockSlot>
</ListCollection>
</ListCollection>

18
ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
View File

@ -1,36 +1,36 @@
.tomography-graph {
.background {
fill: rgb(var(--tone-gray-050));
fill: var(--token-color-surface-strong);
}
.axis {
fill: none;
stroke: rgb(var(--tone-gray-300));
stroke: var(--token-color-palette-neutral-300);
stroke-dasharray: 4 4;
}
.border {
fill: none;
stroke: rgb(var(--tone-gray-300));
stroke: var(--token-color-palette-neutral-300);
}
.point {
stroke: rgb(var(--tone-gray-400));
fill: rgb(var(--tone-magenta-600));
stroke: var(--token-color-foreground-disabled);
fill: var(--token-color-consul-foreground);
}
.lines rect {
fill: rgb(var(--tone-magenta-600));
fill: var(--token-color-consul-foreground);
stroke: transparent;
stroke-width: 5px;
}
.lines rect:hover {
fill: rgb(var(--tone-gray-300));
fill: var(--token-color-palette-neutral-300);
height: 3px;
y: -1px;
}
.tick line {
stroke: rgb(var(--tone-gray-300));
stroke: var(--token-color-palette-neutral-300);
}
.tick text {
font-size: var(--typo-size-600);
text-anchor: start;
color: rgb(var(--tone-gray-900));
color: var(--token-color-foreground-strong);
}
}

16
ui/packages/consul-ui/app/components/copy-button/skin.scss
View File

@ -1,22 +1,22 @@
%copy-button {
color: rgb(var(--tone-blue-500));
--icon-color: var(--transparent);
color: var(--token-color-foreground-action);
--icon-color: transparent;
}
%copy-button::before {
@extend %with-copy-action-mask, %as-pseudo;
--icon-color: rgb(var(--tone-gray-500));
--icon-color: var(--token-color-foreground-faint);
}
%copy-button::after {
--icon-color: rgb(var(--tone-gray-050));
--icon-color: var(--token-color-surface-strong);
}
%copy-button:hover:not(:disabled):not(:active),
%copy-button:focus {
color: rgb(var(--tone-blue-500));
--icon-color: rgb(var(--tone-gray-050));
color: var(--token-color-foreground-action);
--icon-color: var(--token-color-surface-strong);
}
%copy-button:hover::before {
--icon-color: rgb(var(--tone-blue-500));
--icon-color: var(--token-color-foreground-action);
}
%copy-button:active {
--icon-color: rgb(var(--tone-gray-200));
--icon-color: var(--token-color-surface-interactive-active);
}

14
ui/packages/consul-ui/app/components/copyable-code/index.scss
View File

@ -8,7 +8,7 @@
padding-bottom: 3px;
border: var(--decor-border-100);
border-color: rgb(var(--tone-gray-200));
border-color: var(--token-color-surface-interactive-active);
border-radius: var(--decor-radius-200);
}
&.obfuscated {
@ -22,7 +22,7 @@
height: 100%;
display: block;
content: '';
background-color: rgb(var(--tone-gray-050));
background-color: var(--token-color-surface-strong);
}
.copy-button {
position: absolute;
@ -45,12 +45,12 @@
button[aria-expanded]::before {
content: '';
--icon-size: icon-000;
--icon-color: rgb(var(--tone-gray-500));
--icon-color: var(--token-color-foreground-faint);
}
button[aria-expanded=true]::before {
button[aria-expanded='true']::before {
--icon-name: icon-eye-off;
}
button[aria-expanded=false]::before {
button[aria-expanded='false']::before {
--icon-name: icon-eye;
}
pre {
@ -67,7 +67,7 @@
margin: 0;
margin-top: 8px;
margin-bottom: 13px;
border: 3px dashed rgb(var(--tone-gray-300));
background-color: rgb(var(--tone-gray-000));
border: 3px dashed var(--token-color-palette-neutral-300);
background-color: var(--token-color-surface-primary);
}
}

2
ui/packages/consul-ui/app/components/disclosure-menu/README.mdx
View File

@ -44,7 +44,7 @@ common usecase of having a floating menu.
<disclosure.Menu
style={{style-map
(array 'position' 'absolute')
(array 'background-color' 'rgb(var(--tone-gray-000))')
(array 'background-color' 'var(--token-color-surface-primary)')
}}
as |panel|>
<panel.Menu as |menu|>

4
ui/packages/consul-ui/app/components/empty-state/skin.scss
View File

@ -1,6 +1,6 @@
%empty-state {
color: rgb(var(--tone-gray-500));
background-color: rgb(var(--tone-gray-010));
color: var(--token-color-foreground-faint);
background-color: var(--token-color-surface-faint);
}
%empty-state-header {
border-bottom: none;

6
ui/packages/consul-ui/app/components/expanded-single-select/skin.scss
View File

@ -1,6 +1,6 @@
%expanded-single-select {
border: var(--decor-border-100);
border-color: rgb(var(--tone-gray-300));
border-color: var(--token-color-palette-neutral-300);
border-radius: var(--decor-radius-100);
}
%expanded-single-select label {
@ -9,10 +9,10 @@
%expanded-single-select input[type='radio']:checked + *,
%expanded-single-select input[type='radio']:hover + *,
%expanded-single-select input[type='radio']:focus + * {
box-shadow: var(--decor-elevation-300);
box-shadow: var(--token-elevation-high-box-shadow);
}
%expanded-single-select input[type='radio']:checked + *,
%expanded-single-select input[type='radio']:hover + *,
%expanded-single-select input[type='radio']:focus + * {
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-surface-primary);
}

8
ui/packages/consul-ui/app/components/filter-bar/skin.scss
View File

@ -1,14 +1,14 @@
.filter-bar {
& {
background-color: rgb(var(--tone-gray-010));
background-color: var(--token-color-foreground-high-contrast);
border-bottom: var(--decor-border-100);
border-color: rgb(var(--tone-gray-200));
border-color: var(--token-color-surface-interactive-active);
}
.filters,
.sort {
.popover-menu > [type='checkbox']:checked + label button {
color: rgb(var(--tone-blue-500));
background-color: rgb(var(--tone-gray-100));
color: var(--token-color-foreground-action);
background-color: var(--token-color-foreground-high-contrast);
}
}
}

16
ui/packages/consul-ui/app/components/form-elements/skin.scss
View File

@ -1,7 +1,7 @@
%form-element-text-input {
-moz-appearance: none;
-webkit-appearance: none;
box-shadow: inset var(--decor-elevation-100);
box-shadow: var(--token-surface-inset-box-shadow);
border-radius: var(--decor-radius-100);
border: var(--decor-border-100);
outline: none;
@ -14,22 +14,22 @@ textarea:disabled + .CodeMirror,
%form fieldset > p,
%form-element-note,
%form-element-text-input::placeholder {
color: rgb(var(--tone-gray-400));
color: var(--token-color-foreground-disabled);
}
%form-element-error > input,
%form-element-error > textarea {
border-color: var(--decor-error-500, rgb(var(--tone-red-500))) !important;
border-color: var(--decor-error, var(--token-color-foreground-critical)) !important;
}
%form-element-text-input {
color: rgb(var(--tone-gray-500));
border-color: rgb(var(--tone-gray-300));
color: var(--token-color-foreground-faint);
border-color: var(--token-color-palette-neutral-300);
}
%form-element-text-input-hover {
border-color: rgb(var(--tone-gray-500));
border-color: var(--token-color-foreground-faint);
}
%form-element-text-input-focus {
border-color: var(--typo-action-500, rgb(var(--tone-blue-500)));
border-color: var(--typo-action, var(--token-color-foreground-action));
}
%form-element-label {
color: var(--typo-contrast-999, inherit);
color: var(--typo-contrast, inherit);
}

14
ui/packages/consul-ui/app/components/freetext-filter/skin.scss
View File

@ -3,13 +3,13 @@
border: var(--decor-border-100);
border-radius: var(--decor-radius-100);
background-color: rgb(var(--tone-gray-000));
border-color: rgb(var(--tone-gray-200));
color: rgb(var(--tone-gray-400));
background-color: var(--token-color-surface-primary);
border-color: var(--token-color-surface-interactive-active);
color: var(--token-color-foreground-disabled);
}
&:hover,
&:hover * {
border-color: rgb(var(--tone-gray-400));
border-color: var(--token-color-foreground-disabled);
}
& *,
&_input::placeholder {
@ -35,14 +35,14 @@
margin-top: -8px;
}
.popover-menu {
background-color: rgb(var(--tone-gray-050));
color: rgb(var(--tone-gray-800));
background-color: var(--token-color-surface-strong);
color: var(--token-color-foreground-primary);
}
.popover-menu {
border-left: 1px solid;
border-color: inherit;
}
.popover-menu > [type='checkbox']:checked + label button {
background-color: rgb(var(--tone-gray-200));
background-color: var(--token-color-surface-interactive-active);
}
}

16
ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
View File

@ -5,8 +5,10 @@
.dcs-message {
padding: 8px 12px;
border-bottom: 1px solid rgb(var(--tone-gray-400));
border-bottom: 1px solid var(--token-color-foreground-disabled);
max-width: fit-content;
background-color: var(--token-color-hashicorp-brand);
color: var(--token-color-palette-neutral-300);
}
}
nav .dcs li.is-primary span,
@ -14,15 +16,15 @@
@extend %menu-panel-badge;
}
nav .dcs .dc-name {
color: rgb(var(--tone-gray-600));
color: var(--token-color-foreground-faint);
padding: 3.25px 0px;
font-weight: var(--typo-weight-semibold)
font-weight: var(--typo-weight-semibold);
}
nav .dcs .dc-name span {
@extend %pill-200;
margin-left: 1rem;
background-color: rgb(var(--tone-gray-300));
color: rgb(var(--tone-gray-999));
background-color: var(--token-color-palette-neutral-300);
color: var(--token-color-hashicorp-brand);
}
nav li.partitions,
nav li.nspaces {
@ -42,7 +44,7 @@
}
[role='banner'] a svg {
fill: rgb(var(--tone-brand-600));
fill: var(--token-color-consul-brand);
}
.docs-link a::after {
@extend %with-docs-mask, %as-pseudo;
@ -55,7 +57,7 @@
}
.acls-separator span {
@extend %led-icon;
color: rgb(var(--tone-red-500));
color: var(--token-color-foreground-critical);
display: inline-block;
position: relative;
top: 2px;

4
ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx
View File

@ -202,11 +202,11 @@ dl {
}
.lock-delay::before {
@extend %with-delay-mask, %as-pseudo;
color: rgb(var(--tone-gray-700));
color: var(--token-color-foreground-faint);
}
.ttl::before {
@extend %with-history-mask, %as-pseudo;
color: rgb(var(--tone-blue-500));
color: var(--token-color-foreground-action);
}
.service-identity {
@extend %badge;

6
ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss
View File

@ -1,14 +1,14 @@
[id^=docfy-demo-preview-horizontal-kv-list] {
[id^='docfy-demo-preview-horizontal-kv-list'] {
dl {
@extend %horizontal-kv-list;
}
.lock-delay::before {
@extend %with-delay-mask, %as-pseudo;
color: rgb(var(--tone-gray-700));
color: var(--token-color-foreground-faint);
}
.ttl::before {
@extend %with-history-mask, %as-pseudo;
color: rgb(var(--tone-blue-500));
color: var(--token-color-foreground-action);
}
.service-identity {
@extend %badge;

12
ui/packages/consul-ui/app/components/icon-definition/index.scss
View File

@ -8,32 +8,32 @@
%icon-definition.passing dt::before,
%composite-row-header .passing dd::before {
@extend %with-check-circle-fill-mask, %as-pseudo;
color: rgb(var(--tone-green-500));
color: var(--token-color-foreground-success);
}
%icon-definition.warning dt::before,
%composite-row-header .warning dd::before {
@extend %with-alert-triangle-mask, %as-pseudo;
color: rgb(var(--tone-orange-500));
color: var(--token-color-foreground-warning);
}
%icon-definition.critical dt::before,
%composite-row-header .critical dd::before {
@extend %with-cancel-square-fill-mask, %as-pseudo;
color: rgb(var(--tone-red-500));
color: var(--token-color-foreground-critical);
}
%icon-definition.empty dt::before,
%composite-row-header .empty dd::before {
@extend %with-minus-square-fill-mask, %as-pseudo;
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
}
%icon-definition.unknown dt::before,
%composite-row-header .unknown dd::before {
@extend %with-help-circle-outline-mask, %as-pseudo;
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
}
%composite-row-header [rel='me'] dd::before {
@extend %with-check-circle-fill-mask, %as-pseudo;
color: rgb(var(--tone-blue-500));
color: var(--token-color-foreground-action);
}
%icon-definition.node dt::before {

28
ui/packages/consul-ui/app/components/informed-action/skin.scss
View File

@ -2,8 +2,8 @@
& {
border-radius: var(--decor-radius-200);
border: var(--decor-border-100);
border-color: rgb(var(--tone-gray-300));
background-color: rgb(var(--tone-gray-000));
border-color: var(--token-color-palette-neutral-300);
background-color: var(--token-color-surface-primary);
}
> div {
border-top-left-radius: var(--decor-radius-200);
@ -18,57 +18,57 @@
}
p {
@extend %p2;
color: rgb(var(--tone-gray-999));
color: var(--token-color-hashicorp-brand);
}
> ul {
list-style: none;
}
> ul > li > *:hover,
> ul > li > *:focus {
background-color: rgb(var(--tone-gray-100));
background-color: var(--token-color-surface-strong);
}
/* variants */
&.info {
header {
color: rgb(var(--tone-blue-700));
color: var(--token-color-foreground-action-active);
}
header::before {
@extend %with-info-circle-fill-mask, %as-pseudo;
background-color: rgb(var(--tone-blue-500));
background-color: var(--token-color-foreground-action);
margin-right: 5px;
}
> div {
background-color: rgb(var(--tone-blue-010));
background-color: var(--token-color-surface-action);
}
}
&.dangerous {
header {
color: rgb(var(--tone-red-700));
color: var(--token-color-palette-red-400);
}
header::before {
@extend %with-alert-triangle-mask, %as-pseudo;
background-color: rgb(var(--tone-red-500));
background-color: var(--token-color-foreground-critical);
}
> div {
background-color: rgb(var(--tone-red-010));
background-color: var(--token-color-surface-critical);
}
}
&.warning {
header {
color: rgb(var(--tone-orange-700));
color: var(--token-color-foreground-warning-on-surface);
}
header::before {
@extend %with-alert-triangle-mask, %as-pseudo;
background-color: rgb(var(--tone-yellow-500));
background-color: var(--token-color-vault-brand);
margin-right: 5px;
}
> div {
background-color: rgb(var(--tone-yellow-050));
background-color: var(--token-color-vault-gradient-faint-start);
}
}
/**/
> ul > .action > * {
color: rgb(var(--tone-blue-500));
color: var(--token-color-foreground-action);
}
> ul > .dangerous > * {
@extend %frame-red-300;

10
ui/packages/consul-ui/app/components/inline-alert/skin.scss
View File

@ -12,7 +12,7 @@
color: inherit;
}
%inline-alert-error {
color: rgb(var(--color-failure));
color: var(--token-color-foreground-critical);
}
%inline-alert::before {
font-size: 14px;
@ -22,15 +22,15 @@
}
%inline-alert-success::before {
@extend %with-check-circle-fill-mask;
color: rgb(var(--tone-green-500));
color: var(--token-color-foreground-success);
}
%inline-alert-error::before {
@extend %with-cancel-square-fill-mask;
color: rgb(var(--tone-red-500));
color: var(--token-color-foreground-critical);
}
%inline-alert-warning::before {
@extend %with-alert-triangle-mask;
color: rgb(var(--tone-orange-500));
color: var(--token-color-foreground-warning);
/* the warning triangle always looks */
/* too low just because its a triangle */
/* this tweak make it look better */
@ -38,5 +38,5 @@
}
%inline-alert-info::before {
@extend %with-info-circle-fill-mask;
color: rgb(var(--tone-blue-500));
color: var(--token-color-foreground-action);
}

6
ui/packages/consul-ui/app/components/inline-code/skin.scss
View File

@ -1,7 +1,7 @@
%block-code,
%inline-code {
border: 1px solid;
color: rgb(var(--tone-brand-600));
background-color: rgb(var(--tone-gray-050));
border-color: rgb(var(--tone-gray-200));
color: var(--token-color-consul-brand);
background-color: var(--token-color-surface-strong);
border-color: var(--token-color-surface-interactive-active);
}

6
ui/packages/consul-ui/app/components/list-collection/skin.scss
View File

@ -1,11 +1,11 @@
%list-collection > ul {
border-top: 1px solid;
border-color: rgb(var(--tone-gray-200));
border-color: var(--token-color-surface-interactive-active);
}
%list-collection-partial-button {
cursor: pointer;
background-color: rgb(var(--tone-gray-050));
color: rgb(var(--tone-blue-500));
background-color: var(--token-color-surface-strong);
color: var(--token-color-foreground-action);
}
%list-collection-partial-button::after {
@extend %with-chevron-up-mask, %as-pseudo;

21
ui/packages/consul-ui/app/components/list-row/skin.scss
View File

@ -1,31 +1,30 @@
%list-row {
list-style-type: none;
border: var(--decor-border-100);
border-top-color: var(--transparent);
border-bottom-color: rgb(var(--tone-gray-200));
border-right-color: var(--transparent);
border-left-color: var(--transparent);
border-top-color: transparent;
border-bottom-color: var(--token-color-surface-interactive-active);
border-right-color: transparent;
border-left-color: transparent;
}
%list-row-intent {
border-color: rgb(var(--tone-gray-200));
/*TODO: This should use a shared/CSS prop shadow*/
box-shadow: 0 2px 4px rgb(var(--black) / 10%);
border-top-color: var(--transparent);
border-color: var(--token-color-surface-interactive-active);
box-shadow: var(--token-elevation-high-box-shadow);
border-top-color: transparent;
cursor: pointer;
}
%list-row-header {
color: rgb(var(--tone-gray-999));
color: var(--token-color-hashicorp-brand);
}
%list-row-header * {
color: inherit;
}
%list-row-detail {
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
}
%list-row-detail a {
color: inherit;
}
%list-row-detail a:hover {
color: rgb(var(--color-action));
color: var(--token-color-foreground-action);
text-decoration: underline;
}

2
ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss
View File

@ -1,3 +1,3 @@
%main-header-horizontal::before {
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-hashicorp-brand);
}

2
ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss
View File

@ -26,6 +26,6 @@
/**/
/* menu-panels in the main navigation are treated slightly differently */
%main-nav-horizontal label + div {
%main-nav-horizontal .disclosure-menu button + * {
@extend %main-nav-horizontal-menu-panel;
}

2
ui/packages/consul-ui/app/components/main-nav-horizontal/layout.scss
View File

@ -16,8 +16,6 @@
%main-nav-horizontal-menu-panel {
z-index: 400;
/* TODO: We should probably make menu-panel default to left hand side*/
left: 0;
right: auto;
top: 28px !important;
}
%main-nav-horizontal-action {

16
ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
View File

@ -13,18 +13,28 @@
transform: scaleY(-100%);
}
%main-nav-horizontal-menu-panel,
%main-nav-horizontal-menu-panel > ul[role='menu'],
%main-nav-horizontal-menu-panel > ul[role='menu'] > li > [role='menuitem'] {
background-color: var(--token-color-hashicorp-brand);
color: var(--token-color-palette-neutral-300);
}
%main-nav-horizontal-menu-panel > ul[role='menu'] > li > [role='menuitem']:hover {
background-color: var(--token-color-palette-neutral-600);
}
%main-nav-horizontal-toggle {
display: none;
}
%main-nav-horizontal-toggle-button::before {
--icon-name: icon-menu;
--icon-color: rgb(var(--tone-gray-800));
--icon-color: var(--token-color-palette-neutral-300);
content: '';
cursor: pointer;
}
%main-nav-horizontal-action,
%main-nav-horizontal-action-intent,
%main-nav-horizontal-action-active {
color: rgb(var(--tone-gray-600));
color: var(--token-color-palette-neutral-300);
}
/**/

2
ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx
View File

@ -65,7 +65,7 @@ you need to define a different ancestor for a containing block you can use
/* a transform is required to mark this element as the containing block */
/* for hoisting, otherwise the viewport is the containing block */
transform: translate(0, 0);
background-color: rgb(var(--tone-gray-600));
background-color: var(--token-color-foreground-faint);
padding-top: 64px;
}
```

2
ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss
View File

@ -15,7 +15,7 @@
/* a transform is required to mark this element as the containing block */
/* for hoisting, otherwise the viewport is the containing block */
transform: translate(0, 0);
background-color: rgb(var(--tone-gray-600));
background-color: var(--token-color-foreground-faint);
padding-top: 64px;
}
// TODO: Reduce the need for these debug overrides

60
ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
View File

@ -2,7 +2,7 @@
@extend %p1;
cursor: pointer;
border-right: var(--decor-border-400);
border-color: var(--transparent);
border-color: transparent;
}
%main-nav-vertical-action > a {
color: inherit;
@ -20,29 +20,31 @@
text-decoration: none;
}
%main-nav-vertical {
background-color: rgb(var(--tone-gray-050));
color: rgb(var(--tone-gray-700));
background-color: var(--token-color-foreground-strong);
color: var(--token-color-foreground-faint);
}
%main-nav-vertical li:not([role='separator']) > span {
color: rgb(var(--tone-gray-300));
color: var(--token-color-palette-neutral-300);
}
%main-nav-vertical [role='separator'] {
color: rgb(var(--tone-gray-600));
%main-nav-vertical [role='separator'],
%main-nav-vertical-hoisted [role='separator'] {
color: var(--token-color-palette-neutral-400);
background-color: var(--token-color-foreground-strong);
}
%main-nav-vertical-action {
color: rgb(var(--tone-gray-800));
color: var(--token-color-palette-neutral-300);
}
%main-nav-vertical-item,
%main-nav-vertical-action-intent,
%main-nav-vertical-action-active {
color: rgb(var(--tone-gray-999));
color: var(--token-color-palette-neutral-0);
}
%main-nav-vertical-action-active {
background-color: rgb(var(--tone-gray-150));
border-color: rgb(var(--tone-gray-999));
background-color: var(--token-color-palette-neutral-500);
border-color: var(--token-color-palette-neutral-0);
}
%main-nav-vertical [aria-label]::before {
color: rgb(var(--tone-gray-700));
color: var(--token-color-palette-neutral-400);
content: attr(aria-label);
display: block;
margin-top: -0.5rem;
@ -50,18 +52,42 @@
}
%main-nav-vertical-popover-menu-trigger {
border: var(--decor-border-100);
border-color: rgb(var(--tone-gray-500));
border-color: var(--token-color-foreground-faint);
border-radius: var(--decor-radius-100);
font-weight: inherit;
background-color: rgb(var(--tone-gray-050));
color: rgb(var(--tone-gray-999));
background-color: var(--token-color-foreground-strong);
color: var(--token-color-palette-neutral-200);
}
%main-nav-vertical-popover-menu-trigger:hover,
%main-nav-vertical-popover-menu-trigger:focus {
color: var(--token-color-palette-neutral-300);
background-color: var(--token-color-foreground-strong);
}
%main-nav-vertical ul[role='menu'] li a[role='menuitem'] {
color: var(--token-color-palette-neutral-300);
background-color: var(--token-color-foreground-strong);
}
%main-nav-vertical ul[role='menu']li a[role='menuitem']:hover {
background-color: var(--token-color-palette-neutral-600);
}
%main-nav-vertical-popover-menu-trigger[aria-expanded='true'] {
border-bottom-left-radius: var(--decor-radius-000);
border-bottom-right-radius: var(--decor-radius-000);
}
%main-nav-horizontal %panel,
%main-nav-horizontal %panel-separator,
%main-nav-vertical %panel,
%main-nav-vertical %panel-separator {
border-color: var(--token-color-foreground-faint);
}
%main-nav-vertical-popover-menu-trigger::after {
@extend %with-chevron-down-mask, %as-pseudo;
width: 16px;
@ -75,4 +101,10 @@
border-top-left-radius: var(--decor-radius-000);
border-top-right-radius: var(--decor-radius-000);
border-top: var(--decor-border-000);
color: var(--token-color-palette-neutral-300);
background-color: var(--token-color-foreground-strong);
}
%main-nav-vertical-hoisted ul[role='menu'] {
background-color: var(--token-color-hashicorp-brand);
}

8
ui/packages/consul-ui/app/components/menu-panel/skin.scss
View File

@ -6,7 +6,7 @@
}
%menu-panel-header + ul {
border-top: var(--decor-border-100);
border-color: rgb(var(--tone-border, var(--tone-gray-300)));
border-color: var(--token-form--base-border-color-default);
}
/* if the first item is a separator and it */
/* contains text don't add a line */
@ -17,15 +17,15 @@
@extend %p3;
text-transform: uppercase;
font-weight: var(--typo-weight-medium);
color: rgb(var(--tone-gray-600));
color: var(--token-color-foreground-faint);
}
%menu-panel-item {
list-style-type: none;
}
%menu-panel-badge {
@extend %pill;
color: rgb(var(--tone-gray-000));
background-color: rgb(var(--tone-gray-500));
color: var(--token-color-surface-primary);
background-color: var(--token-color-foreground-faint);
}
%menu-panel-body .informed-action {
border: 0 !important;

17
ui/packages/consul-ui/app/components/modal-dialog/skin.scss
View File

@ -1,7 +1,7 @@
%modal-dialog.warning header {
background-color: rgb(var(--tone-yellow-050));
border-color: rgb(var(--tone-yellow-500));
color: rgb(var(--tone-yellow-800));
background-color: var(--token-color-vault-gradient-faint-start);
border-color: var(--token-color-vault-brand);
color: var(--token-color-vault-foreground);
}
%modal-dialog.warning header > *:not(label) {
font-size: var(--typo-size-500);
@ -9,20 +9,21 @@
}
%modal-dialog.warning header::before {
@extend %with-alert-triangle-mask, %as-pseudo;
color: rgb(var(--tone-yellow-500));
color: var(--token-color-vault-brand);
float: left;
margin-top: 2px;
margin-right: 3px;
}
%modal-dialog-overlay {
background-color: rgb(var(--tone-gray-000) / 90%);
background-color: var(--token-color-surface-interactive);
opacity: 0.9;
}
%modal-window {
box-shadow: var(--decor-elevation-800);
box-shadow: var(--token-elevation-overlay-box-shadow);
}
%modal-window {
/*%frame-gray-000*/
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-surface-primary);
}
%modal-window > footer,
%modal-window > header {
@ -35,7 +36,7 @@
.modal-dialog-body,
%modal-window > footer,
%modal-window > header {
border-color: rgb(var(--tone-gray-300));
border-color: var(--token-color-palette-neutral-300);
}
.modal-dialog-body {
border-style: solid;

8
ui/packages/consul-ui/app/components/more-popover-menu/index.scss
View File

@ -14,7 +14,7 @@
padding: 7px;
}
%more-popover-menu-trigger > * {
background-color: var(--transparent);
background-color: transparent;
border-radius: var(--decor-radius-100);
width: 30px;
height: 30px;
@ -22,7 +22,7 @@
}
%more-popover-menu-trigger > *::after {
--icon-name: icon-more-horizontal;
--icon-color: rgb(var(--tone-gray-900));
--icon-color: var(--token-color-foreground-strong);
--icon-size: icon-300;
content: '';
position: absolute;
@ -32,9 +32,9 @@
margin-left: -8px;
}
%more-popover-menu-trigger > *:active {
background-color: rgb(var(--tone-gray-100));
background-color: var(--token-color-surface-strong);
}
%more-popover-menu-trigger > *:hover,
%more-popover-menu-trigger > *:focus {
background-color: rgb(var(--tone-gray-050));
background-color: var(--token-color-surface-strong);
}

42
ui/packages/consul-ui/app/components/notice/skin.scss
View File

@ -1,7 +1,7 @@
%notice {
border-radius: var(--decor-radius-100);
border: var(--decor-border-100);
color: rgb(var(--tone-gray-999));
color: var(--token-color-hashicorp-brand);
}
%notice::before {
@extend %as-pseudo;
@ -21,57 +21,57 @@
@extend %notice;
}
%notice-success {
background-color: rgb(var(--tone-green-050));
border-color: rgb(var(--tone-green-500));
background-color: var(--token-color-surface-success);
border-color: var(--token-color-foreground-success);
}
%notice-success header * {
color: rgb(var(--tone-green-800));
color: var(--token-color-palette-green-400);
}
%notice-info {
border-color: rgb(var(--tone-blue-100));
background-color: rgb(var(--tone-blue-010));
border-color: var(--token-color-border-action);
background-color: var(--token-color-surface-action);
}
%notice-info header * {
color: rgb(var(--tone-blue-700));
color: var(--token-color-foreground-action-active);
}
%notice-highlight {
background-color: rgb(var(--tone-gray-050));
border-color: rgb(var(--tone-gray-300));
background-color: var(--token-color-surface-strong);
border-color: var(--token-color-palette-neutral-300);
}
%notice-info header * {
color: rgb(var(--tone-blue-700));
color: var(--token-color-foreground-action-active);
}
%notice-warning {
border-color: rgb(var(--tone-yellow-100));
background-color: rgb(var(--tone-yellow-050));
border-color: var(--token-color-vault-border);
background-color: var(--token-color-vault-gradient-faint-start);
}
%notice-warning header * {
color: rgb(var(--tone-yellow-800));
color: var(--token-color-vault-foreground);
}
%notice-error {
background-color: rgb(var(--tone-red-050));
border-color: rgb(var(--tone-red-500));
background-color: var(--token-color-surface-critical);
border-color: var(--token-color-foreground-critical);
}
%notice-error header * {
color: rgb(var(--tone-red-500));
color: var(--token-color-foreground-critical);
}
%notice-success::before {
@extend %with-check-circle-fill-mask;
color: rgb(var(--tone-green-500));
color: var(--token-color-foreground-success);
}
%notice-info::before {
@extend %with-info-circle-fill-mask;
color: rgb(var(--tone-blue-500));
color: var(--token-color-foreground-action);
}
%notice-highlight::before {
@extend %with-star-fill-mask;
color: rgb(var(--tone-yellow-500));
color: var(--token-color-vault-brand);
}
%notice-warning::before {
@extend %with-alert-triangle-mask;
color: rgb(var(--tone-orange-500));
color: var(--token-color-foreground-warning);
}
%notice-error::before {
@extend %with-cancel-square-fill-mask;
color: rgb(var(--tone-red-500));
color: var(--token-color-foreground-critical);
}

4
ui/packages/consul-ui/app/components/overlay/none.scss
View File

@ -26,9 +26,9 @@
transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}
& {
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-surface-primary);
border-radius: var(--decor-radius-100);
box-shadow: var(--decor-elevation-400);
box-shadow: var(--token-surface-mid-box-shadow);
}
.tippy-arrow {
@extend %overlay-tail;

4
ui/packages/consul-ui/app/components/overlay/square-tail.scss
View File

@ -4,11 +4,11 @@
left: calc(0px - (var(--size) / 2)) !important;
}
.tippy-arrow::before {
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-surface-primary);
width: calc(1px + var(--size));
height: calc(1px + var(--size));
border: var(--decor-border-100);
border-color: rgb(var(--tone-gray-300));
border-color: var(--token-color-palette-neutral-300);
}
// potential icon
.tippy-arrow::after {

4
ui/packages/consul-ui/app/components/paged-collection/README.mdx
View File

@ -29,7 +29,7 @@ A renderless component to act as a helper for different types of pagination.
as |pager|>
<div
style={{{style-map
(array 'outline' '1px solid rgb(var(--tone-gray-300))')
(array 'outline' '1px solid var(--token-color-palette-neutral-300)')
(array 'max-height' '360' 'px')
(array '--paged-row-height' (if (not-eq this.type 'index') '43px'))
}}}
@ -46,7 +46,7 @@ A renderless component to act as a helper for different types of pagination.
<li
style={{{style-map
(array 'height' '43' 'px')
(array 'outline' '1px solid rgb(var(--tone-gray-100))')
(array 'outline' '1px solid var(--token-color-surface-strong)')
}}}
>
{{item.Node}}

67
ui/packages/consul-ui/app/components/panel/README.mdx
View File

@ -12,17 +12,10 @@ properties available to help maintain consistency within the panel.
below is only for illustrative purposes. Please use this CSS component as a
building block for other CSS instead.
```hbs preview-template
<figure>
<figcaption>Panel with no padding (in dark mode)</figcaption>
<div
class={{class-map
"panel"
"theme-dark"
}}
...attributes
>
<div class={{class-map 'panel' 'theme-dark'}} ...attributes>
<div>
<p>Some text purposefully with no padding</p>
</div>
@ -34,34 +27,21 @@ building block for other CSS instead.
</figure>
<figure>
<figcaption>Panel using inherited padding for consistency</figcaption>
<div
class={{class-map
"panel"
}}
...attributes
>
<div class={{class-map 'panel'}} ...attributes>
<Action
style={{style-map
(array 'width' '100%')
(array 'border-bottom' '1px solid rgb(var(--tone-border))')
(array 'border-bottom' '1px solid var(--tone-border)')
(array 'padding' 'var(--padding-x) var(--padding-y)')
}}
>
Full Width Button
</Action>
<div
style={{style-map
(array 'padding' 'var(--padding-x) var(--padding-y)')
}}
>
<div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
<p>Some text with padding</p>
</div>
<hr />
<div
style={{style-map
(array 'padding' 'var(--padding-x) var(--padding-y)')
}}
>
<div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
<p>Along with a separator ^ again with padding</p>
</div>
</div>
@ -69,45 +49,34 @@ building block for other CSS instead.
<figure>
<figcaption>Panel using larger padding and different color borders</figcaption>
<div
class={{class-map
"panel"
class={{class-map 'panel'}}
style={{style-map
(array '--padding-x' '24px')
(array '--padding-y' '24px')
(array '--tone-border' 'var(--token-color-consul-foreground)')
}}
style={{style-map
(array '--padding-x' '24px')
(array '--padding-y' '24px')
(array '--tone-border' 'var(--tone-strawberry-500)')
}}
...attributes
>
<Action
style={{style-map
(array 'width' '100%')
(array 'border-bottom' '1px solid rgb(var(--tone-border))')
(array 'border-bottom' '1px solid var(--tone-border)')
(array 'padding' 'var(--padding-x) var(--padding-y)')
}}
>
Full Width Button
</Action>
<div
style={{style-map
(array 'padding' 'var(--padding-x) var(--padding-y)')
}}
>
<div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
<p>Some text with padding</p>
</div>
<hr />
<div
style={{style-map
(array 'padding' 'var(--padding-x) var(--padding-y)')
}}
>
<div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
<p>Along with a separator ^ again with padding</p>
</div>
</div>
</figure>
```
```css
.panel {
@extend %panel;
@ -119,8 +88,8 @@ building block for other CSS instead.
## CSS Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `--tone-border` | `color` | --tone-gray-300 | Default color for all borders |
| `--padding-x` | `length` | 14px | Default x padding to be used for padding values within the component |
| `--padding-y` | `length` | 14px | Default y padding to be used for padding values within the component |
| Property | Type | Default | Description |
| --------------- | -------- | --------------------------------- | -------------------------------------------------------------------- |
| `--tone-border` | `color` | --token-color-palette-neutral-300 | Default color for all borders |
| `--padding-x` | `length` | 14px | Default x padding to be used for padding values within the component |
| `--padding-y` | `length` | 14px | Default y padding to be used for padding values within the component |

10
ui/packages/consul-ui/app/components/panel/index.css.js
View File

@ -11,21 +11,21 @@ export default (css) => css`
}
.panel {
--tone-border: var(--tone-gray-300);
--tone-border: var(--token-color-palette-neutral-300);
border: var(--decor-border-100);
border-radius: var(--decor-radius-200);
box-shadow: var(--decor-elevation-600);
box-shadow: var(--token-surface-high-box-shadow);
}
.panel-separator {
border: 0;
border-top: var(--decor-border-100);
}
.panel {
color: rgb(var(--tone-gray-900));
background-color: rgb(var(--tone-gray-000));
color: var(--token-color-foreground-strong);
background-color: var(--token-color-surface-primary);
}
.panel,
.panel-separator {
border-color: rgb(var(--tone-border));
border-color: var(--tone-border);
}
`;

10
ui/packages/consul-ui/app/components/panel/skin.scss
View File

@ -1,17 +1,17 @@
%panel {
--tone-border: var(--tone-gray-300);
--tone-border: var(--token-color-palette-neutral-300);
border: var(--decor-border-100);
border-radius: var(--decor-radius-200);
box-shadow: var(--decor-elevation-600);
box-shadow: var(--token-surface-high-box-shadow);
}
%panel-separator {
border-top: var(--decor-border-100);
}
%panel {
color: rgb(var(--tone-gray-900));
background-color: rgb(var(--tone-gray-000));
color: var(--token-color-foreground-strong);
background-color: var(--token-color-surface-primary);
}
%panel,
%panel-separator {
border-color: rgb(var(--tone-border));
border-color: var(--tone-border);
}

28
ui/packages/consul-ui/app/components/peerings/badge/index.scss
View File

@ -7,32 +7,32 @@
gap: 4px;
&.active {
background: rgb(var(--tone-green-050));
color: rgb(var(--tone-green-600));
background: var(--token-color-surface-success);
color: var(--token-color-foreground-success);
}
&.pending {
background: rgb(var(--tone-strawberry-050));
color: rgb(var(--tone-strawberry-500));
background: var(--token-color-consul-surface);
color: var(--token-color-consul-brand);
}
&.establishing {
background: rgb(var(--tone-blue-050));
color: rgb(var(--tone-blue-500));
background: var(--token-color-surface-action);
color: var(--token-color-foreground-action);
}
&.failing {
background: rgb(var(--tone-red-050));
color: rgb(var(--tone-red-500));
background: var(--token-color-surface-critical);
color: var(--token-color-foreground-critical);
}
&.deleting {
background: rgb(var(--tone-yellow-050));
color: rgb(var(--tone-yellow-800));
background: var(--token-color-surface-warning);
color: var(--token-color-foreground-warning-on-surface);
}
&.terminated {
background: rgb(var(--tone-gray-150));
color: rgb(var(--tone-gray-800));
background: var(--token-color-surface-interactive-active);
color: var(--token-color-foreground-primary);
}
&.undefined {
background: rgb(var(--tone-gray-150));
color: rgb(var(--tone-gray-800));
background: var(--token-color-surface-interactive-active);
color: var(--token-color-foreground-primary);
}
.peerings-badge__text {

12
ui/packages/consul-ui/app/components/popover-select/index.scss
View File

@ -28,23 +28,23 @@
/* even their own search bar sub menu components */
%popover-select .value-passing button::before {
@extend %with-check-circle-fill-mask, %as-pseudo;
color: rgb(var(--tone-green-500));
color: var(--token-color-foreground-success);
}
%popover-select .value-warning button::before {
@extend %with-alert-triangle-mask, %as-pseudo;
color: rgb(var(--tone-orange-500));
color: var(--token-color-foreground-warning);
}
%popover-select .value-critical button::before {
@extend %with-cancel-square-fill-mask, %as-pseudo;
color: rgb(var(--tone-red-500));
color: var(--token-color-foreground-critical);
}
%popover-select .value-empty button::before {
@extend %with-minus-square-fill-mask, %as-pseudo;
color: rgb(var(--tone-gray-400));
color: var(--token-color-foreground-disabled);
}
%popover-select .value-unknown button::before {
@extend %with-help-circle-outline-mask, %as-pseudo;
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
}
%popover-select.type-source li:not(.partition) button {
text-transform: capitalize;
@ -54,7 +54,7 @@
}
%popover-select.type-source li.partition button::before {
@extend %with-user-team-mask, %as-pseudo;
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
}
%popover-select .jwt button::before {
@extend %with-logo-jwt-color-icon, %as-pseudo;

2
ui/packages/consul-ui/app/components/progress/skin.scss
View File

@ -5,7 +5,7 @@
justify-content: center;
--icon-size: icon-700; /* 24px */
--icon-name: var(--icon-loading);
--icon-color: rgb(var(--tone-gray-500));
--icon-color: var(--token-color-foreground-faint);
}
%progress-indeterminate::before {
content: '';

14
ui/packages/consul-ui/app/components/radio-card/skin.scss
View File

@ -1,25 +1,25 @@
%radio-card {
border: var(--decor-border-100);
border-radius: var(--decor-radius-100);
border-color: rgb(var(--tone-gray-200));
box-shadow: var(--decor-elevation-400);
color: rgb(var(--tone-gray-500));
border-color: var(--token-color-surface-interactive-active);
box-shadow: var(--token-surface-mid-box-shadow);
color: var(--token-color-foreground-faint);
cursor: pointer;
}
%radio-card.checked {
border-color: rgb(var(--tone-blue-500));
border-color: var(--token-color-foreground-action);
}
%radio-card > :first-child {
background-color: rgb(var(--tone-gray-050));
background-color: var(--token-color-surface-strong);
}
%radio-card.checked > :first-child {
background-color: rgb(var(--tone-blue-050));
background-color: var(--token-color-surface-action);
}
%radio-card header {
margin-bottom: 0.5em;
}
%radio-card header {
color: rgb(var(--tone-gray-999));
color: var(--token-color-hashicorp-brand);
}
%radio-card-with-icon > :last-child {
padding-left: 47px;

8
ui/packages/consul-ui/app/components/search-bar/index.scss
View File

@ -2,7 +2,7 @@
&-status {
& {
border-bottom: var(--decor-border-100);
border-bottom-color: rgb(var(--tone-gray-200));
border-bottom-color: var(--token-color-surface-interactive-active);
}
.remove-all button {
@extend %anchor;
@ -11,15 +11,15 @@
& {
@extend %pill-200;
border: var(--decor-border-100);
border-color: rgb(var(--tone-gray-200));
color: rgb(var(--tone-gray-600));
border-color: var(--token-color-surface-interactive-active);
color: var(--token-color-foreground-faint);
}
button {
cursor: pointer;
}
button::before {
@extend %with-cancel-plain-mask, %as-pseudo;
color: rgb(var(--tone-gray-600));
color: var(--token-color-foreground-faint);
margin-top: 1px;
margin-right: 0.2rem;
}

6
ui/packages/consul-ui/app/components/skip-links/skin.scss
View File

@ -1,7 +1,7 @@
%skip-links {
outline: 1px solid rgb(var(--tone-gray-000));
color: rgb(var(--tone-gray-000));
background-color: rgb(var(--tone-blue-500));
outline: 1px solid var(--token-color-surface-primary);
color: var(--token-color-surface-primary);
background-color: var(--token-color-foreground-action);
}
%skip-links button,
%skip-links a {

8
ui/packages/consul-ui/app/components/sliding-toggle/skin.scss
View File

@ -15,16 +15,16 @@
@extend %sliding-toggle-negative;
}
%sliding-toggle label span {
color: rgb(var(--tone-gray-900));
color: var(--token-color-foreground-strong);
}
%sliding-toggle label span::after {
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-surface-primary);
}
%sliding-toggle label input:checked + span::before,
%sliding-toggle-negative label input + span::before {
background-color: rgb(var(--tone-blue-500));
background-color: var(--token-color-foreground-action);
}
%sliding-toggle label span::before,
%sliding-toggle-negative label input:checked + span::before {
background-color: rgb(var(--tone-gray-300));
background-color: var(--token-color-palette-neutral-300);
}

12
ui/packages/consul-ui/app/components/tab-nav/skin.scss
View File

@ -18,22 +18,22 @@
}
%tab-nav {
/* %frame-transparent-something */
border-color: rgb(var(--tone-gray-200));
border-color: var(--token-color-surface-interactive-active);
}
%tab-button {
@extend %with-transition-500;
transition-property: background-color, border-color;
border-color: var(--transparent);
color: rgb(var(--tone-gray-500));
border-color: transparent;
color: var(--token-color-foreground-faint);
}
%tab-button-intent,
%tab-button-active {
/* %frame-gray-something */
background-color: rgb(var(--tone-gray-100));
background-color: var(--token-color-surface-strong);
}
%tab-button-intent {
border-color: rgb(var(--tone-gray-300));
border-color: var(--token-color-palette-neutral-300);
}
%tab-nav.animatable .selected a {
border-color: var(--transparent) !important;
border-color: transparent !important;
}

6
ui/packages/consul-ui/app/components/table/index.scss
View File

@ -21,7 +21,7 @@ table.consul-metadata-list tbody tr:hover {
%table th span::after {
@extend %with-info-circle-outline-mask, %as-pseudo;
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
margin-left: 4px;
}
%table tbody tr {
@ -31,12 +31,12 @@ table.consul-metadata-list tbody tr:hover {
padding: 0;
}
%table tbody tr:hover {
box-shadow: var(--decor-elevation-300);
box-shadow: var(--token-elevation-high-box-shadow);
}
%table td.folder::before {
@extend %with-folder-outline-mask, %as-pseudo;
background-color: rgb(var(--tone-gray-300));
background-color: var(--token-color-palette-neutral-300);
margin-top: 1px;
margin-right: 5px;
}

2
ui/packages/consul-ui/app/components/table/layout.scss
View File

@ -59,5 +59,5 @@
font-weight: normal;
}
%table tbody td em {
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
}

10
ui/packages/consul-ui/app/components/table/skin.scss
View File

@ -3,15 +3,15 @@
border-bottom: var(--decor-border-100);
}
%table th {
border-color: rgb(var(--tone-gray-300));
border-color: var(--token-color-palette-neutral-300);
}
%table td {
border-color: rgb(var(--tone-gray-200));
color: rgb(var(--tone-gray-500));
border-color: var(--token-color-surface-interactive-active);
color: var(--token-color-foreground-faint);
}
%table th,
%table td strong {
color: rgb(var(--tone-gray-600));
color: var(--token-color-foreground-faint);
}
/* TODO: Add to native selector `tbody th` - will involve moving all
* current th's to `thead th` and changing the templates
@ -19,7 +19,7 @@
*/
%table a,
%tbody-th {
color: rgb(var(--tone-gray-900));
color: var(--token-color-foreground-strong);
}
%table td:first-child {
@extend %tbody-th;

8
ui/packages/consul-ui/app/components/tabular-details/skin.scss
View File

@ -6,22 +6,22 @@
border: 0;
}
%tabular-detail {
border: 1px solid rgb(var(--tone-gray-300));
border: 1px solid var(--token-color-palette-neutral-300);
border-radius: var(--decor-radius-100);
box-shadow: var(--decor-elevation-600);
box-shadow: var(--token-surface-high-box-shadow);
margin-bottom: 20px;
}
%tabular-detail::before,
%tabular-detail > div,
%tabular-detail > label {
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-surface-primary);
}
%tabular-detail > label::before {
transform: rotate(180deg);
}
// this is here as its a fake border
%tabular-detail::before {
background: rgb(var(--tone-gray-200));
background: var(--token-color-surface-interactive-active);
content: '';
display: block;
height: 1px;

10
ui/packages/consul-ui/app/components/tabular-dl/skin.scss
View File

@ -1,21 +1,21 @@
%tabular-dl {
> dt:last-of-type,
> dd:last-of-type {
border-color: rgb(var(--tone-gray-300)) !important;
border-color: var(--token-color-palette-neutral-300) !important;
}
dt,
dd {
border-color: rgb(var(--tone-gray-300)) !important;
color: rgb(var(--tone-gray-999)) !important;
border-color: var(--token-color-palette-neutral-300) !important;
color: var(--token-color-hashicorp-brand) !important;
}
dt {
font-weight: var(--typo-weight-bold);
}
dd .copy-button button::before {
background-color: rgb(var(--tone-gray-999));
background-color: var(--token-color-hashicorp-brand);
}
dt.type + dd span::before {
@extend %with-info-circle-outline-mask, %as-pseudo;
background-color: rgb(var(--tone-gray-500));
background-color: var(--token-color-foreground-faint);
}
}

2
ui/packages/consul-ui/app/components/tag-list/index.scss
View File

@ -8,7 +8,7 @@ td.tags {
%tag-list dt::before {
@extend %with-tag-mask, %as-pseudo;
color: inherit;
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
}
%tag-list dd {
@extend %csv-list;

13
ui/packages/consul-ui/app/components/tile/index.scss
View File

@ -1,4 +1,3 @@
%with-tile {
position: relative;
width: var(--tile-size, 3rem);
@ -23,15 +22,15 @@
@extend %with-tile;
}
%with-leader-tile::before {
background-image: linear-gradient(135deg,
rgb(var(--strawberry-010)) 0%,
rgb(var(--strawberry-200)) 100%
background-image: linear-gradient(
135deg,
var(--token-color-consul-surface) 0%,
var(--token-color-consul-border) 100%
);
border-color: rgb(var(--tone-gray-999) / 10%);
border-color: var(--token-color-border-faint);
}
%with-leader-tile::after {
--icon-name: icon-star-fill;
--icon-size: icon-700;
color: rgb(var(--strawberry-500));
color: var(--token-color-consul-brand);
}

4
ui/packages/consul-ui/app/components/toggle-button/skin.scss
View File

@ -3,10 +3,10 @@
cursor: pointer;
}
%toggle-button-intent {
background-color: rgb(var(--tone-gray-050));
background-color: var(--token-color-surface-strong);
}
%toggle-button-active {
background-color: rgb(var(--tone-gray-100));
background-color: var(--token-color-surface-strong);
}
%toggle-button:hover,
%toggle-button:focus {

6
ui/packages/consul-ui/app/components/tooltip-panel/skin.scss
View File

@ -6,9 +6,9 @@
@extend %as-pseudo;
width: 12px;
height: 12px;
background-color: rgb(var(--tone-gray-000));
border-top: 1px solid rgb(var(--tone-gray-300));
border-right: 1px solid rgb(var(--tone-gray-300));
background-color: var(--token-color-surface-primary);
border-top: 1px solid var(--token-color-palette-neutral-300);
border-right: 1px solid var(--token-color-palette-neutral-300);
transform: rotate(-45deg);
position: absolute;
left: 16px;

8
ui/packages/consul-ui/app/components/tooltip/index.scss
View File

@ -31,19 +31,19 @@
%tooltip-bubble {
& {
background-color: rgb(var(--tone-gray-700));
color: rgb(var(--tone-gray-000));
background-color: var(--token-color-foreground-faint);
color: var(--token-color-surface-primary);
}
}
%tooltip-tail {
--size: 5px;
& {
color: rgb(var(--tone-gray-700));
color: var(--token-color-foreground-faint);
width: calc(var(--size) * 2);
height: calc(var(--size) * 2);
}
&::before {
border-color: var(--transparent);
border-color: transparent;
border-style: solid;
}
}

20
ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
View File

@ -5,14 +5,14 @@
#upstream-container .topology-metrics-card,
#downstream-container .topology-metrics-card {
display: block;
color: rgb(var(--tone-gray-700));
color: var(--token-color-foreground-faint);
overflow: hidden;
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-surface-primary);
border-radius: var(--decor-radius-100);
border: 1px solid;
/* TODO: If this color is combined with the above */
/* border property then the compressor removes the color */
border-color: rgb(var(--tone-gray-200));
border-color: var(--token-color-surface-interactive-active);
p {
padding: 12px 12px 0 12px;
font-size: var(--typo-size-500);
@ -28,7 +28,7 @@
margin-right: 8px;
}
dd {
color: rgb(var(--tone-gray-700));
color: var(--token-color-foreground-faint);
}
span {
margin-right: 8px;
@ -56,23 +56,23 @@
.partition dt::before,
.nspace dt::before,
.health dt::before {
--icon-color: rgb(var(--tone-gray-500));
--icon-color: var(--token-color-foreground-faint);
}
.passing::before {
@extend %with-check-circle-fill-mask, %as-pseudo;
--icon-color: rgb(var(--tone-green-500));
--icon-color: var(--token-color-foreground-success);
}
.warning::before {
@extend %with-alert-triangle-mask, %as-pseudo;
--icon-color: rgb(var(--tone-orange-500));
--icon-color: var(--token-color-foreground-warning);
}
.critical::before {
@extend %with-cancel-square-fill-mask, %as-pseudo;
--icon-color: rgb(var(--tone-red-500));
--icon-color: var(--token-color-foreground-critical);
}
.empty::before {
@extend %with-minus-square-fill-mask, %as-pseudo;
--icon-color: rgb(var(--tone-gray-500));
--icon-color: var(--token-color-foreground-faint);
}
}
.details {
@ -96,7 +96,7 @@
span::before {
margin-right: 0px;
@extend %with-union-mask, %as-pseudo;
--icon-color: rgb(var(--tone-gray-500));
--icon-color: var(--token-color-foreground-faint);
}
dl:first-child {
grid-area: partition;

8
ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
View File

@ -2,7 +2,7 @@
> button {
position: absolute;
transform: translate(-50%, -50%);
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-surface-primary);
padding: 1px 1px;
&:hover {
cursor: pointer;
@ -21,16 +21,16 @@
&.deny > button::before,
&.deny .tippy-arrow::after {
@extend %with-cancel-square-fill-mask, %as-pseudo;
--icon-color: rgb(var(--tone-red-500));
--icon-color: var(--token-color-foreground-critical);
}
&.l7 > button::before,
&.l7 .tippy-arrow::after {
@extend %with-layers-mask, %as-pseudo;
--icon-color: rgb(var(--tone-gray-300));
--icon-color: var(--token-color-palette-neutral-300);
}
&.not-defined > button::before,
&.not-defined .tippy-arrow::after {
@extend %with-alert-triangle-mask, %as-pseudo;
--icon-color: rgb(var(--tone-yellow-500));
--icon-color: var(--token-color-vault-brand);
}
}

18
ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
View File

@ -8,18 +8,18 @@
font-size: 0.875em;
line-height: 1.5em;
font-weight: normal;
border: 1px solid rgb(var(--tone-gray-300));
border: 1px solid var(--token-color-palette-neutral-300);
background: #fff;
border-radius: 2px;
box-sizing: border-box;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.1);
box-shadow: var(--token-elevation-higher-box-shadow);
.sparkline-time {
padding: 8px 10px;
font-weight: bold;
font-size: 14px;
color: #000;
border-bottom: 1px solid rgb(var(--tone-gray-200));
border-bottom: 1px solid var(--token-color-surface-interactive-active);
margin-bottom: 4px;
text-align: center;
}
@ -31,7 +31,7 @@
}
.sparkline-tt-sum {
border-top: 1px solid rgb(var(--tone-gray-200));
border-top: 1px solid var(--token-color-surface-interactive-active);
margin-top: 4px;
padding: 8px 10px 0 10px;
}
@ -58,7 +58,7 @@
height: 12px;
left: 15px;
bottom: -7px;
border: 1px solid rgb(var(--tone-gray-300));
border: 1px solid var(--token-color-palette-neutral-300);
border-top: 0;
border-left: 0;
background: #fff;
@ -75,7 +75,7 @@
}
h3 {
color: rgb(var(--tone-gray-900));
color: var(--token-color-foreground-strong);
font-size: 16px;
}
@ -84,16 +84,16 @@
font-weight: 600;
}
dd {
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
}
}
}
.sparkline-key-link {
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
}
.sparkline-key-link:hover {
color: rgb(var(--tone-blue-500));
color: var(--token-color-foreground-action);
}
#metrics-container:hover .sparkline-key-link::before {
@extend %with-info-circle-fill-mask, %as-pseudo;

36
ui/packages/consul-ui/app/components/topology-metrics/skin.scss
View File

@ -1,7 +1,7 @@
.topology-notices {
button {
@extend %button;
color: rgb(var(--tone-blue-500));
color: var(--token-color-foreground-action);
}
button::before {
@extend %as-pseudo;
@ -12,7 +12,7 @@
}
}
.topology-container {
color: rgb(var(--tone-gray-700));
color: var(--token-color-foreground-faint);
}
// Columns/Containers & Lines
@ -23,35 +23,35 @@
border: 1px solid;
/* TODO: If this color is combined with the above */
/* border property then the compressor removes the color */
border-color: rgb(var(--tone-gray-200));
border-color: var(--token-color-surface-interactive-active);
}
#downstream-container,
#upstream-container {
background-color: rgb(var(--tone-gray-100));
background-color: var(--token-color-surface-strong);
}
#downstream-container > div:first-child {
display: inline-flex;
span::before {
@extend %with-info-circle-outline-mask, %as-pseudo;
background-color: rgb(var(--tone-gray-500));
background-color: var(--token-color-foreground-faint);
}
}
// Metrics Container
#metrics-container {
div:first-child {
background-color: rgb(var(--tone-gray-000));
background-color: var(--token-color-surface-primary);
}
.link {
background-color: rgb(var(--tone-gray-100));
background-color: var(--token-color-surface-strong);
a {
color: rgb(var(--tone-gray-700));
color: var(--token-color-foreground-faint);
}
a::before {
background-color: rgb(var(--tone-gray-500));
background-color: var(--token-color-foreground-faint);
}
a:hover {
color: rgb(var(--color-action));
color: var(--token-color-foreground-action);
}
.metrics-link::before {
@extend %with-exit-mask, %as-pseudo;
@ -66,19 +66,19 @@
#downstream-lines svg,
#upstream-lines svg {
path {
fill: var(--transparent);
fill: transparent;
}
circle {
fill: rgb(var(--tone-gray-000));
fill: var(--token-color-surface-primary);
}
.allow-arrow {
fill: rgb(var(--tone-gray-300));
fill: var(--token-color-palette-neutral-300);
stroke-linejoin: round;
}
path,
.allow-dot,
.allow-arrow {
stroke: rgb(var(--tone-gray-300));
stroke: var(--token-color-palette-neutral-300);
stroke-width: 2;
}
path[data-permission='not-defined'],
@ -86,15 +86,15 @@
stroke-dasharray: 4;
}
path[data-permission='deny'] {
stroke: rgb(var(--tone-red-500));
stroke: var(--token-color-foreground-critical);
}
.deny-dot {
stroke: rgb(var(--tone-red-500));
stroke: var(--token-color-foreground-critical);
stroke-width: 2;
}
.deny-arrow {
fill: rgb(var(--tone-red-500));
stroke: rgb(var(--tone-red-500));
fill: var(--token-color-foreground-critical);
stroke: var(--token-color-foreground-critical);
stroke-linejoin: round;
}
}

4
ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
View File

@ -5,7 +5,7 @@
justify-content: space-between;
align-items: stretch;
width: 100%;
border-top: 1px solid rgb(var(--tone-gray-200));
border-top: 1px solid var(--token-color-surface-interactive-active);
dl {
display: flex;
padding-bottom: 12px;
@ -15,7 +15,7 @@
line-height: 1.5em !important;
}
dd {
color: rgb(var(--tone-gray-400)) !important;
color: var(--token-color-foreground-disabled) !important;
}
span {
padding-bottom: 12px;

4
ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
View File

@ -2,14 +2,14 @@
.topology-metrics-status-loader {
font-weight: normal;
font-size: 0.875rem;
color: rgb(var(--tone-gray-500));
color: var(--token-color-foreground-faint);
text-align: center;
margin: 0 auto !important;
display: block;
span::before {
@extend %with-info-circle-outline-mask, %as-pseudo;
background-color: rgb(var(--tone-gray-500));
background-color: var(--token-color-foreground-faint);
}
}

4
ui/packages/consul-ui/app/modifiers/aria-menu.mdx
View File

@ -56,9 +56,9 @@ In the example below, the Before Trigger and After Trigger don't do anything, th
style={{style-map
(array 'position' 'absolute')
(array 'padding' '1rem')
(array 'border' '1px solid rgb(var(--tone-gray-500))')
(array 'border' '1px solid var(--token-color-foreground-faint)')
(array 'top' '2rem')
(array 'background-color' 'rgb(var(--tone-gray-000))')
(array 'background-color' 'var(--token-color-surface-primary)')
}}
role="menu"
aria-labelledby="trigger"

4
ui/packages/consul-ui/app/modifiers/css-prop.mdx
View File

@ -5,9 +5,9 @@ Get the value for a single specific CSS Property from the modified element.
```hbs preview-template
<div
{{css-prop '--red-500' returns=(set this 'red')}}
{{css-prop '--token-color-foreground-critical' returns=(set this 'red')}}
>
<code>--red-500: {{this.red}}</code>
<code>--token-color-foreground-critical: {{this.red}}</code>
</div>
```

81
ui/packages/consul-ui/app/styles/base/color/README.mdx
View File

@ -1,81 +0,0 @@
# Colors
All colors for the immediate future should _mostly_ use the following `tone`
CSS properties, unless:
1. We get around to eventually adding semantic colors names (or adding something else) in which case these docs should be updated.
2. You are absolutely sure the color you want should never be changed by a theme. These should be very very few and far between so even if we get that wrong it should be easy to update.
`tones` should always using the following form:
```css
property: rgb(var(--tone-gray-500));
```
In other words always use `rgb` this gives us the flexibility to easily use these variables with alpha if we ever need to.
```css
property: rgb(var(--tone-gray-500) / 50);
```
Currently, alphas are mainly used for shadows. Please avoid the use of alphas for adjusting hues as they can produce unpredictable results. We should be utilizing our pre-defined color palette or adding new colors to it with proper RGB values. If you do need to add a color with alpha, please include a code comment or a self-comment explaining the use case.
Lastly, there is currently one non-color alias group which is `--tone-brand` which is a group of our current brand colors.
## %theme-light (default)
```hbs preview-template
<ul
{{css-props (set this 'tones')
prefix='tone-'
group='[a-z\-]'
}}
>
{{#each-in this.tones as |prop value|}}
<li>
{{#each-in value as |prop value|}}
<figure
{{with-copyable (concat "rgb(var(" prop "));")}}
style={{concat "background-color: rgb(var(" prop "))"}}
>
<figcaption>{{prop}}</figcaption>
</figure>
{{/each-in}}
</li>
{{/each-in}}
</ul>
```
## %theme-dark
If you need to build something (like a component or view) which begins in 'dark mode', you will need to switch your coloring and use
```css
%component-name {
@extend %theme-dark;
}
```
```hbs preview-template
<ul
{{css-props (set this 'tones')
prefix='tone-'
group='[a-z\-]'
}}
>
{{#each-in this.tones as |prop value|}}
<li>
{{#each-in value as |prop value|}}
<figure
{{with-copyable (concat "rgb(var(" prop "));")}}
style={{concat "background-color: rgb(var(" prop "))"}}
>
<figcaption>{{prop}}</figcaption>
</figure>
{{/each-in}}
</li>
{{/each-in}}
</ul>
```

190
ui/packages/consul-ui/app/styles/base/color/base-variables.scss
View File

@ -1,190 +0,0 @@
:root {
/* vault */
--steel-050: 245 246 247;
--steel-100: 225 228 231;
--steel-200: 205 211 215;
--steel-300: 185 193 199;
--steel-400: 165 176 183;
--steel-500: 145 159 168;
--steel-600: 119 131 138;
--steel-700: 93 102 107;
--steel-800: 66 73 77;
--steel-900: 40 44 46;
/* vault refresh */
--lemon-050: 255 216 20;
--lemon-100: 255 216 20;
--lemon-200: 255 216 20;
--lemon-300: 255 216 20;
--lemon-400: 255 216 20;
--lemon-500: 255 216 20;
--lemon-600: 255 216 20;
--lemon-700: 255 216 20;
--lemon-800: 255 216 20;
--lemon-900: 255 216 20;
/* consul */
--magenta-050: 249 235 242;
--magenta-100: 239 196 216;
--magenta-200: 229 158 190;
--magenta-300: 218 119 164;
--magenta-400: 208 80 138;
--magenta-500: 198 42 113;
--magenta-600: 158 33 89;
--magenta-700: 125 26 71;
--magenta-800: 90 20 52;
--magenta-900: 54 12 31;
/* consul refresh */
--strawberry-010: 255 242 248;
--strawberry-050: 255 242 248;
--strawberry-100: 248 217 231;
--strawberry-200: 248 217 231;
--strawberry-300: 224 126 172;
--strawberry-400: 224 126 172;
--strawberry-500: 202 33 113;
--strawberry-600: 142 19 74;
--strawberry-700: 142 19 74;
--strawberry-800: 101 13 52;
--strawberry-900: 101 13 52;
/* vagrant */
--cobalt-050: 240 245 255;
--cobalt-100: 191 212 255;
--cobalt-200: 138 177 255;
--cobalt-300: 91 146 255;
--cobalt-400: 56 122 255;
--cobalt-500: 21 99 255;
--cobalt-600: 15 79 209;
--cobalt-700: 14 64 163;
--cobalt-800: 10 45 116;
--cobalt-900: 6 27 70;
/* terraform */
--indigo-050: 238 237 252;
--indigo-100: 213 210 247;
--indigo-200: 174 167 242;
--indigo-300: 141 131 237;
--indigo-400: 117 104 232;
--indigo-500: 92 78 229;
--indigo-600: 76 64 188;
--indigo-700: 59 50 146;
--indigo-800: 42 36 105;
--indigo-900: 26 22 63;
/* nomad */
--teal-050: 235 248 243; /*#c3ecdc*/
--teal-100: 195 236 220; /*#e1e4e7*/
--teal-200: 155 223 197;
--teal-300: 116 211 174;
--teal-400: 76 198 151;
--teal-500: 37 186 129;
--teal-600: 31 153 106;
--teal-700: 24 119 83;
--teal-800: 17 85 59;
--teal-900: 11 51 36;
/* packer */
--cyan-050: 231 248 255;
--cyan-100: 185 236 255;
--cyan-200: 139 224 255;
--cyan-300: 92 211 255;
--cyan-400: 46 199 255;
--cyan-500: 0 187 255;
--cyan-600: 0 159 217;
--cyan-700: 0 119 163;
--cyan-800: 0 85 116;
--cyan-900: 0 51 70;
/* ui */
/* removed to prevent confusion
--gray-1: #191a1c;
--gray-2: #323538;
--gray-3: #4c4f54;
--gray-4: #656a70;
--gray-5: #7f858d;
--gray-6: #9a9ea5;
--gray-7: #b4b8bc;
--gray-8: #d0d2d5;
--gray-9: #ebecee;
--gray-10: #f3f4f6;
*/
--gray-010: 251 251 252;
--gray-050: 247 248 250;
--gray-100: 235 238 242;
--gray-150: 235 238 242;
--gray-200: 220 224 230;
--gray-300: 186 193 204;
--gray-400: 142 150 163;
--gray-500: 111 118 130;
--gray-600: 98 104 115;
--gray-700: 82 87 97;
--gray-800: 55 58 66;
--gray-850: 44 46 51;
--gray-900: 31 33 36;
--gray-950: 21 23 28;
/* status */
--green-050: 236 247 237;
--green-100: 198 233 201;
--green-200: 160 219 165;
--green-300: 122 204 129;
--green-400: 84 190 93;
--green-500: 46 176 57;
--green-600: 38 145 47;
--green-700: 30 113 37;
--green-800: 21 80 26;
--green-900: 13 48 16;
--blue-010: 251 252 255;
--blue-050: 240 245 255;
--blue-100: 191 212 255;
--blue-200: 138 177 255;
--blue-300: 91 146 255;
--blue-400: 56 122 255;
--blue-500: 21 99 255;
--blue-600: 15 79 209;
--blue-700: 14 64 163;
--blue-800: 10 45 116;
--blue-900: 6 27 70;
--red-010: 253 250 251;
--red-050: 249 236 238;
--red-100: 239 199 204;
--red-200: 229 162 170;
--red-300: 219 125 136;
--red-400: 209 88 102;
--red-500: 199 52 69;
--red-600: 163 43 57;
--red-700: 127 34 44;
--red-800: 91 24 32;
--red-900: 55 15 19;
--orange-050: 254 244 236; /*#fa8f37*/
--orange-100: 253 224 200;
--orange-200: 252 204 164;
--orange-300: 251 183 127;
--orange-400: 250 163 91;
--orange-500: 250 143 55;
--orange-600: 205 118 46;
--orange-700: 160 92 35;
--orange-800: 114 65 25;
--orange-900: 69 39 15;
--yellow-050: 255 251 237; /*#fa8f37;*/
--yellow-100: 253 238 186;
--yellow-200: 252 228 140;
--yellow-300: 251 217 94;
--yellow-400: 250 206 48;
--yellow-500: 250 196 2;
--yellow-600: 205 161 2;
--yellow-700: 160 125 2;
--yellow-800: 114 90 1;
--yellow-900: 69 54 1;
--transparent: transparent;
--white: 255 255 255;
--black: 0 0 0;
}

178
ui/packages/consul-ui/app/styles/base/color/hex-variables.scss
View File

@ -1,178 +0,0 @@
:root {
/* vault */
--steel-050: #f5f6f7;
--steel-100: #e1e4e7;
--steel-200: #cdd3d7;
--steel-300: #b9c1c7;
--steel-400: #a5b0b7;
--steel-500: #919fa8;
--steel-600: #77838a;
--steel-700: #5d666b;
--steel-800: #42494d;
--steel-900: #282c2e;
/* consul */
--magenta-050: #f9ebf2;
--magenta-100: #efc4d8;
--magenta-200: #e59ebe;
--magenta-300: #da77a4;
--magenta-400: #d0508a;
--magenta-500: #c62a71;
--magenta-600: #9e2159;
--magenta-700: #7d1a47;
--magenta-800: #5a1434;
--magenta-900: #360c1f;
/* consul refresh */
--strawberry-010: #fff2f8;
--strawberry-050: #fff2f8;
--strawberry-100: #f8d9e7;
--strawberry-200: #f8d9e7;
--strawberry-300: #e07eac;
--strawberry-400: #e07eac;
--strawberry-500: #ca2171;
--strawberry-600: #8e134a;
--strawberry-700: #8e134a;
--strawberry-800: #650d34;
--strawberry-900: #650d34;
/* vagrant */
--cobalt-050: #f0f5ff;
--cobalt-100: #bfd4ff;
--cobalt-200: #8ab1ff;
--cobalt-300: #5b92ff;
--cobalt-400: #387aff;
--cobalt-500: #1563ff;
--cobalt-600: #0f4fd1;
--cobalt-700: #0e40a3;
--cobalt-800: #0a2d74;
--cobalt-900: #061b46;
/* terraform */
--indigo-050: #eeedfc;
--indigo-100: #d5d2f7;
--indigo-200: #aea7f2;
--indigo-300: #8d83ed;
--indigo-400: #7568e8;
--indigo-500: #5c4ee5;
--indigo-600: #4c40bc;
--indigo-700: #3b3292;
--indigo-800: #2a2469;
--indigo-900: #1a163f;
/* nomad */
--teal-050: #ebf8f3;/*#c3ecdc*/;
--teal-100: #c3ecdc;/*#e1e4e7*/;
--teal-200: #9bdfc5;
--teal-300: #74d3ae;
--teal-400: #4cc697;
--teal-500: #25ba81;
--teal-600: #1f996a;
--teal-700: #187753;
--teal-800: #11553b;
--teal-900: #0b3324;
/* packer */
--cyan-050: #e7f8ff;
--cyan-100: #b9ecff;
--cyan-200: #8be0ff;
--cyan-300: #5cd3ff;
--cyan-400: #2ec7ff;
--cyan-500: #00bbff;
--cyan-600: #009fd9;
--cyan-700: #0077a3;
--cyan-800: #005574;
--cyan-900: #003346;
/* ui */
/* removed to prevent confusion
--gray-1: #191a1c;
--gray-2: #323538;
--gray-3: #4c4f54;
--gray-4: #656a70;
--gray-5: #7f858d;
--gray-6: #9a9ea5;
--gray-7: #b4b8bc;
--gray-8: #d0d2d5;
--gray-9: #ebecee;
--gray-10: #f3f4f6;
*/
--gray-010: #fbfbfc;
--gray-050: #f7f8fa;
--gray-100: #ebeef2;
--gray-150: #ebeef2;
--gray-200: #dce0e6;
--gray-300: #bac1cc;
--gray-400: #8e96a3;
--gray-500: #6f7682;
--gray-600: #626873;
--gray-700: #525761;
--gray-800: #373a42;
--gray-850: #2c2e33;
--gray-900: #1f2124;
--gray-950: #15171c;
/* status */
--green-050: #ecf7ed;
--green-100: #c6e9c9;
--green-200: #a0dba5;
--green-300: #7acc81;
--green-400: #54be5d;
--green-500: #2eb039;
--green-600: #26912f;
--green-700: #1e7125;
--green-800: #15501a;
--green-900: #0d3010;
--blue-010: #fbfcff;
--blue-050: #f0f5ff;
--blue-100: #bfd4ff;
--blue-200: #8ab1ff;
--blue-300: #5b92ff;
--blue-400: #387aff;
--blue-500: #1563ff;
--blue-600: #0f4fd1;
--blue-700: #0e40a3;
--blue-800: #0a2d74;
--blue-900: #061b46;
--red-010: #fdfafb;
--red-050: #f9ecee;
--red-100: #efc7cc;
--red-200: #e5a2aa;
--red-300: #db7d88;
--red-400: #d15866;
--red-500: #c73445;
--red-600: #a32b39;
--red-700: #7f222c;
--red-800: #5b1820;
--red-900: #370f13;
--orange-050: #fef4ec;/*#fa8f37*/;
--orange-100: #fde0c8;
--orange-200: #fccca4;
--orange-300: #fbb77f;
--orange-400: #faa35b;
--orange-500: #fa8f37;
--orange-600: #cd762e;
--orange-700: #a05c23;
--orange-800: #724119;
--orange-900: #45270f;
--yellow-050: #fffbed;/*#fa8f37;*/
--yellow-100: #fdeeba;
--yellow-200: #fce48c;
--yellow-300: #fbd95e;
--yellow-400: #face30;
--yellow-500: #fac402;
--yellow-600: #cda102;
--yellow-700: #a07d02;
--yellow-800: #725a01;
--yellow-900: #453601;
--transparent: transparent;
--white: #fff;
--black: #000;
}

5
ui/packages/consul-ui/app/styles/base/color/index.scss
View File

@ -1,7 +1,2 @@
/*@import './hex-variables';*/
@import './base-variables';
/* load in the ui theme */
@import './ui/index';
/* other themes should be added at a project level */
@import './semantic-variables';
/*@import './theme-placeholders';*/

0
ui/packages/consul-ui/app/styles/base/color/lemon/frame-placeholders.scss
View File

Some files were not shown because too many files have changed in this diff Show More