From f404d3eb138367bd56752e700b3c2c57a5dc1d12 Mon Sep 17 00:00:00 2001 From: Valeriia Ruban Date: Tue, 14 Mar 2023 19:49:14 -0700 Subject: [PATCH] feat: update typography to consume hds styles (#16577) --- .changelog/16577.txt | 3 + .../components/consul/peer/components.scss | 4 +- .../consul/peer/form/generate/index.hbs | 2 +- .../components/consul/peer/form/index.scss | 3 +- .../consul/peer/form/initiate/index.hbs | 2 +- .../app/components/app-view/skin.scss | 3 - .../consul-ui/app/components/app/index.scss | 3 +- .../app/components/auth-form/skin.scss | 2 +- .../app/components/auth-profile/index.scss | 6 +- .../components/brand-loader/enterprise.hbs | 5 - .../app/components/brand-loader/index.hbs | 5 - .../app/components/code-editor/index.hbs | 2 +- .../app/components/code-editor/skin.scss | 8 +- .../app/components/composite-row/index.scss | 3 + .../components/consul/auth-method/index.scss | 14 +- .../components/consul/bucket/list/index.scss | 2 +- .../consul/discovery-chain/skin.scss | 2 +- .../consul/external-source/index.scss | 2 +- .../consul/health-check/list/skin.scss | 2 +- .../consul/intention/components.scss | 4 +- .../intention/form/fieldsets/layout.scss | 2 +- .../consul/intention/form/index.scss | 3 - .../consul/intention/list/components.scss | 3 + .../intention/permission/form/skin.scss | 4 +- .../app/components/consul/kind/index.scss | 2 +- .../components/consul/server/card/skin.scss | 4 +- .../app/components/consul/source/index.scss | 2 +- .../consul/tomography/graph/index.scss | 1 - .../consul/upstream-instance/list/index.scss | 2 +- .../app/components/empty-state/skin.scss | 4 +- .../app/components/form-elements/index.scss | 2 +- .../components/hashicorp-consul/index.scss | 2 +- .../app/components/informed-action/skin.scss | 4 +- .../app/components/inline-alert/skin.scss | 4 +- .../app/components/list-row/layout.scss | 2 +- .../components/main-nav-vertical/skin.scss | 5 +- .../app/components/menu-panel/skin.scss | 5 +- .../app/components/modal-dialog/skin.scss | 5 +- .../app/components/oidc-select/index.scss | 2 +- .../app/components/peerings/badge/index.scss | 3 +- .../app/components/table/layout.scss | 2 +- .../consul-ui/app/components/table/skin.scss | 10 +- .../app/components/tabular-dl/skin.scss | 2 +- .../app/components/tooltip/index.scss | 2 +- .../topology-metrics/card/index.scss | 3 +- .../components/topology-metrics/layout.scss | 3 +- .../topology-metrics/series/skin.scss | 13 +- .../topology-metrics/status/index.scss | 3 +- .../styles/base/icons/base-placeholders.scss | 2 +- .../app/styles/base/reset/base-variables.scss | 4 - .../app/styles/base/reset/minireset.scss | 17 +-- .../app/styles/base/reset/system.scss | 13 +- .../base/typography/base-placeholders.scss | 136 +++++++++--------- .../base/typography/base-variables.scss | 52 ------- .../app/styles/base/typography/index.scss | 1 - ui/packages/consul-ui/app/styles/debug.scss | 40 +++--- .../app/styles/prism-coldark-cold.scss | 6 +- .../app/styles/prism-coldark-dark.scss | 6 +- .../app/styles/routes/dc/kv/index.scss | 2 +- .../styles/routes/dc/overview/license.scss | 6 +- .../routes/dc/overview/serverstatus.scss | 10 +- .../app/styles/routes/dc/services/index.scss | 4 +- .../consul-ui/app/styles/typography.scss | 83 ++++++----- .../app/templates/dc/show/license.hbs | 3 + .../consul-ui/blueprints/route-test/index.js | 1 - .../consul-ui/lib/commands/bin/list.js | 1 - 66 files changed, 231 insertions(+), 332 deletions(-) create mode 100644 .changelog/16577.txt delete mode 100644 ui/packages/consul-ui/app/styles/base/typography/base-variables.scss diff --git a/.changelog/16577.txt b/.changelog/16577.txt new file mode 100644 index 000000000..3e8fdbece --- /dev/null +++ b/.changelog/16577.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: update typography to styles from hds +``` \ No newline at end of file diff --git a/ui/packages/consul-peerings/app/components/consul/peer/components.scss b/ui/packages/consul-peerings/app/components/consul/peer/components.scss index 6f4532f23..1e20d8b23 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/components.scss +++ b/ui/packages/consul-peerings/app/components/consul/peer/components.scss @@ -18,8 +18,8 @@ %pill-failing, %pill-terminated, %pill-deleting { - font-weight: var(--typo-weight-medium); - font-size: var(--typo-size-700); + @extend .hds-font-weight-medium; + font-size: var(--token-typography-body-200-font-size); } %pill-pending::before { diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs index 9d3a71308..217818abd 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs +++ b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs @@ -18,7 +18,7 @@ - + Error {{fsm.state.context.error.message}} diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss b/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss index 72997f4ce..bca9acedd 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss +++ b/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss @@ -48,11 +48,10 @@ z-index: 2; } li::after { + @extend %body-200-semibold; content: counter(hexagonal-counter); position: absolute; top: 0px; - font-size: 14px; - font-weight: var(--typo-weight-bold); background-color: var(--token-color-palette-neutral-0); z-index: 1; text-align: center; diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs index 4e36952fc..1a8f534ec 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs +++ b/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs @@ -19,7 +19,7 @@ as |writer| > - + Error {{error.message}} diff --git a/ui/packages/consul-ui/app/components/app-view/skin.scss b/ui/packages/consul-ui/app/components/app-view/skin.scss index 11a7133af..b88b2ec96 100644 --- a/ui/packages/consul-ui/app/components/app-view/skin.scss +++ b/ui/packages/consul-ui/app/components/app-view/skin.scss @@ -3,9 +3,6 @@ * SPDX-License-Identifier: MPL-2.0 */ -%app-view-title-left-container > *:first-child { - @extend %h100; -} %app-view-title { border-bottom: var(--decor-border-100); } diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss index 2de98d11c..73d266bdb 100644 --- a/ui/packages/consul-ui/app/components/app/index.scss +++ b/ui/packages/consul-ui/app/components/app/index.scss @@ -78,12 +78,11 @@ main { @extend %transition-pushover; } %footer { + @extend %body-100-regular; position: fixed; z-index: 50; color: var(--token-color-foreground-disabled); - font-size: var(--typo-size-800); - width: 250px; padding-left: 25px; } diff --git a/ui/packages/consul-ui/app/components/auth-form/skin.scss b/ui/packages/consul-ui/app/components/auth-form/skin.scss index 79d6ede05..18ff35fea 100644 --- a/ui/packages/consul-ui/app/components/auth-form/skin.scss +++ b/ui/packages/consul-ui/app/components/auth-form/skin.scss @@ -4,7 +4,7 @@ */ %auth-form em { - @extend %p3; + @extend %body-100-regular; color: var(--token-color-foreground-faint); font-style: normal; } diff --git a/ui/packages/consul-ui/app/components/auth-profile/index.scss b/ui/packages/consul-ui/app/components/auth-profile/index.scss index cc0a6e8a7..cc749d474 100644 --- a/ui/packages/consul-ui/app/components/auth-profile/index.scss +++ b/ui/packages/consul-ui/app/components/auth-profile/index.scss @@ -7,13 +7,13 @@ padding: 0.9em 1em; } .auth-profile { - @extend %p2; + @extend %body-100-regular; } .auth-profile dt span { - font-weight: var(--typo-weight-normal); + font-weight: var(--token-typography-font-weight-regular); } .auth-profile dt { - font-weight: var(--typo-weight-bold); + font-weight: var(--token-typography-font-weight-bold); } .auth-profile dt, .auth-profile dd { diff --git a/ui/packages/consul-ui/app/components/brand-loader/enterprise.hbs b/ui/packages/consul-ui/app/components/brand-loader/enterprise.hbs index 54376aad2..98caaba5e 100644 --- a/ui/packages/consul-ui/app/components/brand-loader/enterprise.hbs +++ b/ui/packages/consul-ui/app/components/brand-loader/enterprise.hbs @@ -1,7 +1,2 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - diff --git a/ui/packages/consul-ui/app/components/brand-loader/index.hbs b/ui/packages/consul-ui/app/components/brand-loader/index.hbs index a02a5c8c3..e00f7dd30 100644 --- a/ui/packages/consul-ui/app/components/brand-loader/index.hbs +++ b/ui/packages/consul-ui/app/components/brand-loader/index.hbs @@ -1,8 +1,3 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
-
{{#if (has-block "content")}}{{yield to="content"}}{{else}}{{value}}{{/if}}
+
{{#if (has-block 'content')}}{{yield to='content'}}{{else}}{{value}}{{/if}}
diff --git a/ui/packages/consul-ui/app/components/code-editor/skin.scss b/ui/packages/consul-ui/app/components/code-editor/skin.scss index 9fdc1283b..db0f52bc0 100644 --- a/ui/packages/consul-ui/app/components/code-editor/skin.scss +++ b/ui/packages/consul-ui/app/components/code-editor/skin.scss @@ -39,12 +39,11 @@ $syntax-dark-gray: #535f73; overflow-x: hidden !important; } .CodeMirror-lint-tooltip { + @extend %code-100-regular; background-color: #f9f9fa; border: 1px solid var(--syntax-light-gray); border-radius: 0; color: lighten(#000, 13%); - font-family: var(--typo-family-mono); - font-size: 13px; padding: 7px 8px 9px; } @@ -54,7 +53,7 @@ $syntax-dark-gray: #535f73; background-color: var(--token-color-hashicorp-brand) !important; color: #cfd2d1 !important; border: none; - font-family: var(--typo-family-mono); + font-family: var(--token-typography-font-stack-code); -webkit-font-smoothing: auto; line-height: 1.4; } @@ -210,9 +209,8 @@ $syntax-dark-gray: #535f73; .toolbar { .title { + @extend %body-200-semibold; color: var(--token-color-foreground-strong); - font-size: 14px; - font-weight: 700; } .toolbar-separator { border-right: 1px solid var(--token-color-palette-neutral-300); diff --git a/ui/packages/consul-ui/app/components/composite-row/index.scss b/ui/packages/consul-ui/app/components/composite-row/index.scss index debfe17c3..255a2a67c 100644 --- a/ui/packages/consul-ui/app/components/composite-row/index.scss +++ b/ui/packages/consul-ui/app/components/composite-row/index.scss @@ -74,6 +74,9 @@ %composite-row .copy-button { display: inline-flex; } +%composite-row .copy-button button { + @extend %body-100-medium; +} %composite-row-header .copy-button { margin-left: 4px; } diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss index d247fa2bd..266174687 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss +++ b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss @@ -15,23 +15,21 @@ .consul-auth-method-view { margin-bottom: 32px; section { - @extend %p1; + @extend %body-200-regular; width: 100%; position: relative; overflow-y: auto; h2 { - @extend %h200; + @extend %display-400-semibold; padding-bottom: 12px; } table { thead td { + @extend %body-200-semibold; 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: var(--token-color-hashicorp-brand); } tr { @@ -61,7 +59,7 @@ margin-bottom: 4px !important; } h2 { - @extend %h200; + @extend %display-400-semibold; padding-bottom: 12px; } dl { @@ -77,14 +75,12 @@ .consul-auth-method-nspace-list { thead { td { + @extend %body-200-semibold; color: var(--token-color-foreground-faint) !important; - font-weight: var(--typo-weight-semibold) !important; - font-size: var(--typo-size-700) !important; } } tbody { td { - font-size: var(--typo-size-600); color: var(--token-color-hashicorp-brand); } tr { diff --git a/ui/packages/consul-ui/app/components/consul/bucket/list/index.scss b/ui/packages/consul-ui/app/components/consul/bucket/list/index.scss index d1e6673a7..710f6a359 100644 --- a/ui/packages/consul-ui/app/components/consul/bucket/list/index.scss +++ b/ui/packages/consul-ui/app/components/consul/bucket/list/index.scss @@ -20,7 +20,7 @@ @extend %with-network-alt-mask, %as-pseudo; } .service + dd { - font-weight: var(--typo-weight-semibold); + @extend .hds-font-weight-semibold; } /* potential for some sort of %composite-kv thing here */ dd:not(:last-child)::after { diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss index 1d62df461..cac17f506 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss @@ -57,7 +57,7 @@ } %chain-group > header > * { text-transform: uppercase; - @extend %p3; + @extend %body-100-regular; } %chain-group > header span::after { @extend %with-info-circle-outline-icon, %as-pseudo; diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.scss b/ui/packages/consul-ui/app/components/consul/external-source/index.scss index ede34f71f..4c0b07e38 100644 --- a/ui/packages/consul-ui/app/components/consul/external-source/index.scss +++ b/ui/packages/consul-ui/app/components/consul/external-source/index.scss @@ -4,7 +4,7 @@ */ .consul-external-source { - @extend %pill-200, %frame-gray-600, %p1; + @extend %pill-200, %frame-gray-600, %body-200-regular; } .consul-external-source::before { diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss index 3bbee2d70..99f01729d 100644 --- a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss @@ -20,7 +20,7 @@ } } %healthcheck-output header > * { - @extend %h300; + @extend %display-300-semibold; } %healthcheck-output dd em { @extend %pill; diff --git a/ui/packages/consul-ui/app/components/consul/intention/components.scss b/ui/packages/consul-ui/app/components/consul/intention/components.scss index e26778e1a..0bcef73f3 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/components.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/components.scss @@ -11,9 +11,9 @@ %pill-allow, %pill-deny, %pill-l7 { + font-weight: var(--token-typography-font-weight-regular); + font-size: var(--token-typography-body-200-font-size); display: inline-block; - font-weight: var(--typo-weight-normal); - font-size: var(--typo-size-600); } %pill-allow { color: var(--token-color-foreground-success-on-surface); diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss index 15ee20edd..b1b253998 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss @@ -17,7 +17,7 @@ display: inline; } .permissions > button { - @extend %anchor, %p2; + @extend %anchor, %body-100-regular; float: right; } } diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss index 6b5c812d0..e6a2e3f8b 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss @@ -7,9 +7,6 @@ .modal-dialog-window { max-width: 450px; } - .modal-dialog-body p { - font-size: var(--typo-size-600); - } button.dangerous { @extend %dangerous-button; } diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/components.scss b/ui/packages/consul-ui/app/components/consul/intention/list/components.scss index 2764906e2..f2559a377 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/list/components.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/list/components.scss @@ -20,4 +20,7 @@ td.intent- strong { @extend %pill-l7; } + td.permissions { + @extend %body-100-regular; + } } diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss index 170779ee7..ea2872261 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss @@ -6,7 +6,7 @@ .consul-intention-permission-form { h2 { border-top: 1px solid var(--token-color-foreground-action); - @extend %h200; + @extend %display-400-semibold; } button.type-submit { @extend %frame-blue-300; @@ -22,6 +22,6 @@ .consul-intention-view { h2 { - @extend %h200; + @extend %display-400-semibold; } } diff --git a/ui/packages/consul-ui/app/components/consul/kind/index.scss b/ui/packages/consul-ui/app/components/consul/kind/index.scss index cd77b74ec..173ffac92 100644 --- a/ui/packages/consul-ui/app/components/consul/kind/index.scss +++ b/ui/packages/consul-ui/app/components/consul/kind/index.scss @@ -4,7 +4,7 @@ */ .consul-kind { - @extend %pill-200, %frame-gray-600, %p1; + @extend %pill-200, %frame-gray-600, %body-200-regular; } .consul-kind::before { @extend %with-gateway-mask, %as-pseudo; diff --git a/ui/packages/consul-ui/app/components/consul/server/card/skin.scss b/ui/packages/consul-ui/app/components/consul/server/card/skin.scss index 4e204de8d..125d3b9d6 100644 --- a/ui/packages/consul-ui/app/components/consul/server/card/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/server/card/skin.scss @@ -10,13 +10,13 @@ @extend %with-leader-tile; } %consul-server-card .name + dd { - @extend %h300; + @extend %display-200-semibold; color: var(--token-color-hashicorp-brand); animation-name: typo-truncate; } %consul-server-card .health-status + dd { @extend %pill-200; - font-size: var(--typo-size-700); + @extend %body-100-regular; } %consul-server-card.voting-status-non-voter .health-status + dd { background-color: var(--token-color-surface-strong); diff --git a/ui/packages/consul-ui/app/components/consul/source/index.scss b/ui/packages/consul-ui/app/components/consul/source/index.scss index 56a43fe60..0590740aa 100644 --- a/ui/packages/consul-ui/app/components/consul/source/index.scss +++ b/ui/packages/consul-ui/app/components/consul/source/index.scss @@ -4,5 +4,5 @@ */ .consul-source { - @extend %pill-200, %frame-gray-600, %p1; + @extend %pill-200, %frame-gray-600, %body-200-regular; } diff --git a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss index e1c2181a4..51ca74694 100644 --- a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss +++ b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss @@ -34,7 +34,6 @@ stroke: var(--token-color-palette-neutral-300); } .tick text { - font-size: var(--typo-size-600); text-anchor: start; color: var(--token-color-foreground-strong); } diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss index b0e8098a3..412d78ed6 100644 --- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss +++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss @@ -26,7 +26,7 @@ dl.local-bind-socket-mode dt { @extend %horizontal-kv-list-visible-title; text-transform: lowercase; - font-weight: var(--typo-weight-semibold); + font-weight: var(--token-typography-font-weight-semibold); } } .consul-upstream-instance-list { diff --git a/ui/packages/consul-ui/app/components/empty-state/skin.scss b/ui/packages/consul-ui/app/components/empty-state/skin.scss index 102d948b7..a60638368 100644 --- a/ui/packages/consul-ui/app/components/empty-state/skin.scss +++ b/ui/packages/consul-ui/app/components/empty-state/skin.scss @@ -11,7 +11,7 @@ border-bottom: none; } %empty-state-header { - @extend %h200; + @extend %display-400-semibold; } /* Icons */ %empty-state header::before { @@ -22,8 +22,8 @@ margin-right: 10px; } %empty-state-anchor::before { + @extend %body-200-regular; margin-right: 0.5em; - font-size: 0.9em; } %empty-state[class*='status-'] header::before { @extend %as-pseudo; diff --git a/ui/packages/consul-ui/app/components/form-elements/index.scss b/ui/packages/consul-ui/app/components/form-elements/index.scss index ece0fd0af..67b2339d6 100644 --- a/ui/packages/consul-ui/app/components/form-elements/index.scss +++ b/ui/packages/consul-ui/app/components/form-elements/index.scss @@ -7,7 +7,7 @@ @import './layout'; %form h2, .modal-dialog-body h2 { - @extend %h200; + @extend %display-400-semibold; } /* TODO: This is positioning the element */ /* probably should be in a special %form class*/ diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss index f1aca983c..3424f79cb 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss @@ -23,7 +23,7 @@ nav .dcs .dc-name { color: var(--token-color-foreground-faint); padding: 3.25px 0px; - font-weight: var(--typo-weight-semibold); + font-weight: var(--token-typography-font-weight-semibold); } nav .dcs .dc-name span { @extend %pill-200; diff --git a/ui/packages/consul-ui/app/components/informed-action/skin.scss b/ui/packages/consul-ui/app/components/informed-action/skin.scss index f1f0325e6..837459d56 100644 --- a/ui/packages/consul-ui/app/components/informed-action/skin.scss +++ b/ui/packages/consul-ui/app/components/informed-action/skin.scss @@ -16,13 +16,13 @@ cursor: default; } header { - @extend %h400; + @extend %display-100-semibold; } header > * { @extend %typo-inherit; } p { - @extend %p2; + @extend %body-100-regular; color: var(--token-color-hashicorp-brand); } > ul { diff --git a/ui/packages/consul-ui/app/components/inline-alert/skin.scss b/ui/packages/consul-ui/app/components/inline-alert/skin.scss index 5789f61e5..8534bdf52 100644 --- a/ui/packages/consul-ui/app/components/inline-alert/skin.scss +++ b/ui/packages/consul-ui/app/components/inline-alert/skin.scss @@ -5,7 +5,7 @@ %inline-alert { font-style: normal; - font-weight: normal; + font-weight: var(--token-typography-font-weight-regular); } %inline-alert-success, %inline-alert-info, @@ -20,7 +20,7 @@ color: var(--token-color-foreground-critical); } %inline-alert::before { - font-size: 14px; + @extend %body-200-regular; } %inline-alert::before { @extend %as-pseudo; diff --git a/ui/packages/consul-ui/app/components/list-row/layout.scss b/ui/packages/consul-ui/app/components/list-row/layout.scss index 3b9a81f4d..11e46544b 100644 --- a/ui/packages/consul-ui/app/components/list-row/layout.scss +++ b/ui/packages/consul-ui/app/components/list-row/layout.scss @@ -60,5 +60,5 @@ top: 30px; } %list-row-200 dd { - @extend %p2; + @extend %body-100-regular; } diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss index 372ca2f62..57a402b49 100644 --- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss +++ b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss @@ -4,7 +4,7 @@ */ %main-nav-vertical-action { - @extend %p1; + @extend %body-200-medium; cursor: pointer; border-right: var(--decor-border-400); border-color: transparent; @@ -14,9 +14,8 @@ font-size: inherit; } %main-nav-vertical [role='separator'] { - @extend %p3; + @extend %body-100-medium; text-transform: uppercase; - font-weight: var(--typo-weight-medium); } %main-nav-vertical-action-intent { text-decoration: underline; diff --git a/ui/packages/consul-ui/app/components/menu-panel/skin.scss b/ui/packages/consul-ui/app/components/menu-panel/skin.scss index c4690293c..8d3b26e6f 100644 --- a/ui/packages/consul-ui/app/components/menu-panel/skin.scss +++ b/ui/packages/consul-ui/app/components/menu-panel/skin.scss @@ -7,7 +7,7 @@ @extend %with-check-plain-mask, %as-pseudo; } %menu-panel-header { - @extend %p2; + @extend %body-100-regular; } %menu-panel-header + ul { border-top: var(--decor-border-100); @@ -19,9 +19,8 @@ border: none; } %menu-panel-separator { - @extend %p3; + @extend %body-100-medium; text-transform: uppercase; - font-weight: var(--typo-weight-medium); color: var(--token-color-foreground-faint); } %menu-panel-item { diff --git a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss index a011fb989..32185dbfb 100644 --- a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss +++ b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss @@ -9,8 +9,7 @@ color: var(--token-color-vault-foreground); } %modal-dialog.warning header > *:not(label) { - font-size: var(--typo-size-500); - font-weight: var(--typo-weight-semibold); + @extend %display-300-semibold; } %modal-dialog.warning header::before { @extend %with-alert-triangle-mask, %as-pseudo; @@ -35,7 +34,7 @@ @extend %frame-gray-800; } %modal-window > header > *:not(button) { - @extend %h200; + @extend %display-400-semibold; } .modal-dialog-body, diff --git a/ui/packages/consul-ui/app/components/oidc-select/index.scss b/ui/packages/consul-ui/app/components/oidc-select/index.scss index 4b18eeb52..a844e6f16 100644 --- a/ui/packages/consul-ui/app/components/oidc-select/index.scss +++ b/ui/packages/consul-ui/app/components/oidc-select/index.scss @@ -11,7 +11,7 @@ %oidc-select button.reset { @extend %anchor; - @extend %p3; + @extend %body-100-regular; } .oidc-select { @extend %oidc-select; diff --git a/ui/packages/consul-ui/app/components/peerings/badge/index.scss b/ui/packages/consul-ui/app/components/peerings/badge/index.scss index f85364fa3..677f5e620 100644 --- a/ui/packages/consul-ui/app/components/peerings/badge/index.scss +++ b/ui/packages/consul-ui/app/components/peerings/badge/index.scss @@ -41,7 +41,6 @@ } .peerings-badge__text { - font-weight: 500; - font-size: 13px; + @extend %body-100-medium; } } diff --git a/ui/packages/consul-ui/app/components/table/layout.scss b/ui/packages/consul-ui/app/components/table/layout.scss index a928eae86..18204d15b 100644 --- a/ui/packages/consul-ui/app/components/table/layout.scss +++ b/ui/packages/consul-ui/app/components/table/layout.scss @@ -61,7 +61,7 @@ %table tbody td em { display: block; font-style: normal; - font-weight: normal; + font-weight: var(--token-typography-font-weight-regular); } %table tbody td em { color: var(--token-color-foreground-faint); diff --git a/ui/packages/consul-ui/app/components/table/skin.scss b/ui/packages/consul-ui/app/components/table/skin.scss index 8d2e6f581..c8b03fe31 100644 --- a/ui/packages/consul-ui/app/components/table/skin.scss +++ b/ui/packages/consul-ui/app/components/table/skin.scss @@ -7,11 +7,12 @@ %table td { border-bottom: var(--decor-border-100); } -%table th { +%table th, +%tbody-th { border-color: var(--token-color-palette-neutral-300); } %table td { - border-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-palette-neutral-300); color: var(--token-color-foreground-faint); } %table th, @@ -22,10 +23,9 @@ * current th's to `thead th` and changing the templates * at whichpoint we can probably remove the %table a selector from here */ -%table a, -%tbody-th { +%table a { color: var(--token-color-foreground-strong); } -%table td:first-child { +%table th { @extend %tbody-th; } diff --git a/ui/packages/consul-ui/app/components/tabular-dl/skin.scss b/ui/packages/consul-ui/app/components/tabular-dl/skin.scss index 04bec1b79..9bd4ac16d 100644 --- a/ui/packages/consul-ui/app/components/tabular-dl/skin.scss +++ b/ui/packages/consul-ui/app/components/tabular-dl/skin.scss @@ -14,7 +14,7 @@ color: var(--token-color-hashicorp-brand) !important; } dt { - font-weight: var(--typo-weight-bold); + font-weight: var(--token-typography-font-weight-bold); } dd .copy-button button::before { background-color: var(--token-color-hashicorp-brand); diff --git a/ui/packages/consul-ui/app/components/tooltip/index.scss b/ui/packages/consul-ui/app/components/tooltip/index.scss index 7d3bf425b..53d1ced3e 100644 --- a/ui/packages/consul-ui/app/components/tooltip/index.scss +++ b/ui/packages/consul-ui/app/components/tooltip/index.scss @@ -27,7 +27,7 @@ } } %tooltip-content { - @extend %p3; + @extend %body-100-regular; padding: 12px; max-width: 224px; position: relative; diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss index a36466aaf..bc2e4dc21 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss @@ -19,9 +19,8 @@ /* border property then the compressor removes the color */ border-color: var(--token-color-surface-interactive-active); p { + @extend %display-300-semibold; padding: 12px 12px 0 12px; - font-size: var(--typo-size-500); - font-weight: var(--typo-weight-semibold); margin-bottom: 0 !important; } p.empty { diff --git a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss index 6e0b2be2a..4f4c8e00f 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss @@ -61,10 +61,9 @@ grid-area: metrics; div:first-child { + @extend %body-300-semibold; padding: 12px; border: none; - font-size: 16px; - font-weight: bold; } .link { padding: 18px; diff --git a/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss index f23727a4f..14b20e868 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss @@ -9,10 +9,8 @@ } .tooltip { + @extend %body-200-regular; padding: 0 0 10px; - font-size: 0.875em; - line-height: 1.5em; - font-weight: normal; border: 1px solid var(--token-color-palette-neutral-300); background: #fff; border-radius: 2px; @@ -20,9 +18,8 @@ box-shadow: var(--token-elevation-higher-box-shadow); .sparkline-time { + @extend %body-200-semibold; padding: 8px 10px; - font-weight: bold; - font-size: 14px; color: #000; border-bottom: 1px solid var(--token-color-surface-interactive-active); margin-bottom: 4px; @@ -76,17 +73,17 @@ h3::before { @extend %with-info-circle-fill-mask, %as-pseudo; margin: 2px 3px 0 0; - font-size: 14px; + font-size: var(--token-typography-body-200-font-size); } h3 { + @extend %display-300-semibold; color: var(--token-color-foreground-strong); - font-size: 16px; } .sparkline-key-content { dt { - font-weight: 600; + font-weight: var(--token-typography-font-weight-semibold); } dd { color: var(--token-color-foreground-faint); diff --git a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss index db3ceeecb..9f9e25db8 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss @@ -5,8 +5,7 @@ .topology-metrics-status-error, .topology-metrics-status-loader { - font-weight: normal; - font-size: 0.875rem; + @extend %body-200-regular; color: var(--token-color-foreground-faint); text-align: center; margin: 0 auto !important; diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss index 09a82bdf8..dc5fd5fae 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss @@ -4,7 +4,7 @@ */ %with-glyph-icon { - font-weight: var(--typo-weight-normal); + font-weight: var(--token-typography-font-weight-regular); background-color: var(--token-color-surface-strong); visibility: visible; padding: 0 4px; diff --git a/ui/packages/consul-ui/app/styles/base/reset/base-variables.scss b/ui/packages/consul-ui/app/styles/base/reset/base-variables.scss index 7a226c784..c05ca231f 100644 --- a/ui/packages/consul-ui/app/styles/base/reset/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/reset/base-variables.scss @@ -10,10 +10,6 @@ margin: 0; padding: 0; } -%reset-typo { - font-size: 100%; - font-weight: normal; -} %reset-list { list-style: none; diff --git a/ui/packages/consul-ui/app/styles/base/reset/minireset.scss b/ui/packages/consul-ui/app/styles/base/reset/minireset.scss index c6d70f714..a0438a027 100644 --- a/ui/packages/consul-ui/app/styles/base/reset/minireset.scss +++ b/ui/packages/consul-ui/app/styles/base/reset/minireset.scss @@ -17,25 +17,10 @@ figure, fieldset, legend, textarea, -pre, iframe, -hr, -h1, -h2, -h3, -h4, -h5, -h6 { +hr { @extend %reset-box; } -h1, -h2, -h3, -h4, -h5, -h6 { - @extend %reset-typo; -} ul { @extend %reset-list; diff --git a/ui/packages/consul-ui/app/styles/base/reset/system.scss b/ui/packages/consul-ui/app/styles/base/reset/system.scss index 24ecceb95..7a40b2c8f 100644 --- a/ui/packages/consul-ui/app/styles/base/reset/system.scss +++ b/ui/packages/consul-ui/app/styles/base/reset/system.scss @@ -27,25 +27,22 @@ hr { background-color: var(--token-color-surface-interactive-active); } html { - font-size: var(--typo-size-000); -} -/* %typo-body */ -body { - line-height: 1.5; + font-size: 16px; } + body, input, select, textarea { - font-family: var(--typo-family-sans); + font-family: var(--token-typography-font-stack-text); } code, pre { - font-family: var(--typo-family-mono); + font-family: var(--token-typography-font-stack-code); } strong { font-style: inherit; - font-weight: var(--typo-weight-bold); + @extend %body-200-semibold; } html { text-rendering: optimizeLegibility; diff --git a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss index b1c84cc88..9b7fa8c5d 100644 --- a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss @@ -3,81 +3,73 @@ * SPDX-License-Identifier: MPL-2.0 */ +%display-500-bold { + @extend .hds-typography-display-500; + @extend .hds-font-weight-bold; +} +%display-400-bold { + @extend .hds-typography-display-400; + @extend .hds-font-weight-bold; +} +%display-400-semibold { + @extend .hds-typography-display-400; + @extend .hds-font-weight-semibold; +} +%display-400-medium { + @extend .hds-typography-display-400; + @extend .hds-font-weight-medium; +} +%display-300-bold { + @extend .hds-typography-display-300; + @extend .hds-font-weight-bold; +} +%display-300-semibold { + @extend .hds-typography-display-300; + @extend .hds-font-weight-semibold; +} +%display-300-medium { + @extend .hds-typography-display-300; + @extend .hds-font-weight-medium; +} +%display-200-semibold { + @extend .hds-typography-display-200; + @extend .hds-font-weight-semibold; +} +%display-100-medium { + @extend .hds-typography-display-100; + @extend .hds-font-weight-medium; +} +%display-100-semibold { + @extend .hds-typography-display-100; + @extend .hds-font-weight-semibold; +} + +$sizes: 100, 200, 300; +@each $size in $sizes { + %body-#{$size}-regular { + @extend .hds-typography-body-#{$size}; + @extend .hds-font-weight-regular; + } + %body-#{$size}-medium { + @extend .hds-typography-body-#{$size}; + @extend .hds-font-weight-medium; + } + %body-#{$size}-semibold { + @extend .hds-typography-body-#{$size}; + @extend .hds-font-weight-semibold; + } + + %code-#{$size}-regular { + font-family: var(--token-typography-font-stack-code); + font-size: var(--token-typography-code-#{$size}-font-size); + line-height: var(--token-typography-code-#{$size}-line-height); + font-weight: var(--token-typography-font-weight-regular); + } +} + %typo-inherit { font-size: inherit; font-weight: inherit; line-height: inherit; font-style: inherit; } -%typo-body { - font-size: var(--typo-size-600); - font-family: var(--typo-family-sans); - line-height: var(--typo-lead-700); -} -%typo-header { - line-height: var(--typo-lead-200); -} -%h000, -%h100, -%h200, -%h300, -%h400, -%h500, -%h600, -%h400, -%h500, -%h600 { - @extend %typo-header; -} -%h100 { - font-weight: var(--typo-weight-bold); -} -%h200, -%h300, -%h400 { - font-weight: var(--typo-weight-semibold); -} -%h500, -%h600 { - font-weight: var(--typo-weight-medium); -} -%h000 { - font-size: var(--typo-size-100); -} -%h100 { - font-size: var(--typo-size-200); -} -%h200 { - font-size: var(--typo-size-300); -} -%h300 { - font-size: var(--typo-size-500); -} -/*p1 strong, differing weights */ -%h400, -%h500 { - font-size: var(--typo-size-600); -} -/*p2 strong */ -%h600 { - font-size: var(--typo-size-700); -} -%typo-p { - line-height: inherit; - font-size: inherit; -} -%p, -%p1, -%p2, -%p3 { - @extend %typo-p; -} -%p1 { - font-size: var(--typo-size-600); -} -%p2 { - font-size: var(--typo-size-700); -} -%p3 { - font-size: var(--typo-size-800); -} diff --git a/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss b/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss deleted file mode 100644 index b71499a8f..000000000 --- a/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss +++ /dev/null @@ -1,52 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -:root { - /* families */ - /* -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */ - --typo-family-sans: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; - --typo-family-mono: monospace; - - /* sizes */ - /* --typo-size-inherit: inherit; worthwhile? */ - --typo-size-000: 16px; - /* TODO: Numbering of these should possibly be reversed, more likely to add bigger*/ - /* also maybe use 100, 200 etc like colors */ - --typo-size-100: 3.5rem; - --typo-size-200: 1.8rem; - --typo-size-250: 1.750rem; /* 28px */ - --typo-size-300: 1.3rem; - /* mktg only ^ */ - --typo-size-400: 1.2rem; /* $size-large? 24 */ - --typo-size-450: 1.125rem; - --typo-size-500: 1rem; /* $size-medium? // 18 */ - --typo-size-600: 0.875rem; /* $size-normal? // 14 */ - --typo-size-700: 0.8125rem; /* $size-small? // 13 */ - --typo-size-800: 0.75rem; /* $size-small? // 12 */ - - /* weights */ - --typo-weight-light: 300; - --typo-weight-normal: 400; - --typo-weight-medium: 500; - --typo-weight-semibold: 600; - --typo-weight-bold: 700; - - /* line-heights. lead/leading is easier to write */ - /* is this worthwhile? Should we use font-size relative?*/ - /* DS uses ~ 1.3 */ - --typo-lead-000: 0; - --typo-lead-050: 1; - --typo-lead-100: 1.2; - --typo-lead-200: 1.25; - --typo-lead-300: 1.28; - --typo-lead-500: 1.33; - --typo-lead-600: 1.4; - --typo-lead-700: 1.5; - --typo-lead-800: 1.7; - - /* letter-spacing. kern is easier to write*/ - /* --typo-kern-000: normal; */ - /* --typo-kern-100: 1px; */ -} diff --git a/ui/packages/consul-ui/app/styles/base/typography/index.scss b/ui/packages/consul-ui/app/styles/base/typography/index.scss index e7d398189..261f3ce9f 100644 --- a/ui/packages/consul-ui/app/styles/base/typography/index.scss +++ b/ui/packages/consul-ui/app/styles/base/typography/index.scss @@ -3,6 +3,5 @@ * SPDX-License-Identifier: MPL-2.0 */ -@import './base-variables'; @import './base-keyframes'; @import './base-placeholders'; diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss index 37862067f..2e7ec816f 100644 --- a/ui/packages/consul-ui/app/styles/debug.scss +++ b/ui/packages/consul-ui/app/styles/debug.scss @@ -33,7 +33,7 @@ width: 140px; } %debug-grid figcaption { - @extend %p3; + @extend %body-100-regular; text-align: center; } [id^='docfy-demo-preview-color'] ul, @@ -64,38 +64,36 @@ } [id^='docfy-demo-preview-typography'] { - .debug-h000 { - @extend %h000; - } + .debug-h000, .debug-h100 { - @extend %h100; + @extend %display-500-bold; } .debug-h200 { - @extend %h200; + @extend %display-400-semibold; } .debug-h300 { - @extend %h300; + @extend %display-300-semibold; } .debug-h400 { - @extend %h400; + @extend %display-100-semibold; } .debug-h500 { - @extend %h500; + @extend %display-100-medium; } .debug-h600 { - @extend %h600; + @extend %display-100-medium; } .debug-p { - @extend %p; + @extend %body-200-regular; } .debug-p1 { - @extend %p1; + @extend %body-200-regular; } .debug-p2 { - @extend %p2; + @extend %body-100-regular; } .debug-p3 { - @extend %p3; + @extend %body-100-regular; } } @@ -120,7 +118,7 @@ html:not(.with-data-source) .data-source-debug { } html.with-href-to [href^='console://']::before { - @extend %p3; + @extend %body-100-regular; @extend %debug-box; content: attr(href); display: inline; @@ -192,25 +190,25 @@ html.with-route-announcer .route-title { } > h1 { padding-top: 20px; - @extend %h100; + @extend %display-500-bold; } > h2 { - @extend %h200; + @extend %display-400-semibold; } > h3 { - @extend %h300; + @extend %display-300-semibold; } > h4 { - @extend %h400; + @extend %display-100-semibold; } > p { - @extend %p1; + @extend %body-200-regular; } > table { margin-bottom: 3em; } > table td { - font-weight: normal !important; + font-weight: var(--token-typography-font-weight-regular) !important; cursor: default !important; } > table td code { diff --git a/ui/packages/consul-ui/app/styles/prism-coldark-cold.scss b/ui/packages/consul-ui/app/styles/prism-coldark-cold.scss index 3ae00cf9f..e61ac5f2b 100644 --- a/ui/packages/consul-ui/app/styles/prism-coldark-cold.scss +++ b/ui/packages/consul-ui/app/styles/prism-coldark-cold.scss @@ -15,7 +15,7 @@ code[class*='language-'], pre[class*='language-'] { color: #111b27; background: none; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-family: var(--token-typography-font-stack-code); text-align: left; white-space: pre; word-spacing: normal; @@ -147,7 +147,7 @@ pre[class*='language-'] { .token.keyword-this, .token.this, .token.bold { - font-weight: bold; + font-weight: var(--token-typography-font-weight-bold); } .token.delimiter.important { @@ -165,7 +165,7 @@ pre[class*='language-'] { .language-markdown .token.title, .language-markdown .token.title .token.punctuation { color: #005a8e; - font-weight: bold; + font-weight: var(--token-typography-font-weight-bold); } .language-markdown .token.blockquote.punctuation { diff --git a/ui/packages/consul-ui/app/styles/prism-coldark-dark.scss b/ui/packages/consul-ui/app/styles/prism-coldark-dark.scss index 5c86eae4d..e4b8d569f 100644 --- a/ui/packages/consul-ui/app/styles/prism-coldark-dark.scss +++ b/ui/packages/consul-ui/app/styles/prism-coldark-dark.scss @@ -15,7 +15,7 @@ code[class*='language-'], pre[class*='language-'] { color: #e3eaf2; background: none; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-family: var(--token-typography-font-stack-code); text-align: left; white-space: pre; word-spacing: normal; @@ -147,7 +147,7 @@ pre[class*='language-'] { .token.keyword-this, .token.this, .token.bold { - font-weight: bold; + font-weight: var(--token-typography-font-weight-bold); } .token.delimiter.important { @@ -165,7 +165,7 @@ pre[class*='language-'] { .language-markdown .token.title, .language-markdown .token.title .token.punctuation { color: #6cb8e6; - font-weight: bold; + font-weight: var(--token-typography-font-weight-bold); } .language-markdown .token.blockquote.punctuation { diff --git a/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss index 6b288942a..2a85b0e3d 100644 --- a/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss +++ b/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss @@ -8,7 +8,7 @@ html[data-route^='dc.kv'] .type-toggle { margin-bottom: 0 !important; } html[data-route^='dc.kv.edit'] h2 { - @extend %h200; + @extend %display-400-semibold; border-bottom: var(--decor-border-200); border-color: var(--token-color-surface-interactive-active); padding-bottom: 0.2em; diff --git a/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss b/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss index 2f034dc05..73ac353ad 100644 --- a/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss +++ b/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss @@ -14,7 +14,7 @@ section[data-route='dc.show.license'] { } %license-route h2 { - @extend %h200; + @extend %display-400-semibold; } %license-validity p { @@ -22,7 +22,7 @@ section[data-route='dc.show.license'] { } %license-validity dl { @extend %horizontal-kv-list; - font-size: var(--typo-size-400); + @extend %body-300-regular; } %license-validity dl .expired + dd { @extend %visually-hidden; @@ -53,7 +53,7 @@ section[data-route='dc.show.license'] { margin-top: 1rem; /* 16px */ } %license-route-learn-more header > :first-child { - @extend %h300; + @extend %display-300-semibold; } %license-route-learn-more header { margin-bottom: 1rem; /* 16px */ diff --git a/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss b/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss index f97ec416c..38e0519c6 100644 --- a/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss +++ b/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss @@ -20,7 +20,7 @@ section[data-route='dc.show.serverstatus'] { %serverstatus-route h2, %serverstatus-route h3 { - @extend %h200; + @extend %display-300-semibold; } %server-failure-tolerance { @@ -45,7 +45,7 @@ section[data-route='dc.show.serverstatus'] { %server-failure-tolerance header em { @extend %pill-200; - font-size: 0.812rem; /* 13px */ + @extend %body-100-regular; background-color: var(--token-color-surface-interactive-active); text-transform: uppercase; @@ -78,11 +78,11 @@ section[data-route='dc.show.serverstatus'] { padding-right: 1.5rem; /* 24px */ } %server-failure-tolerance dt { - @extend %p2; + @extend %body-100-regular; color: var(--token-color-foreground-faint); } %server-failure-tolerance dd { - font-size: var(--typo-size-250); + @extend %display-300-semibold; color: var(--token-color-hashicorp-brand); } %server-failure-tolerance header span::before { @@ -103,7 +103,7 @@ section[data-route='dc.show.serverstatus'] { } %redundancy-zones h3 { - @extend %h300; + @extend %display-300-semibold; } %redundancy-zone header { display: flow-root; diff --git a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss index 8750b43d6..80828acd3 100644 --- a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss +++ b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss @@ -19,7 +19,7 @@ html[data-route^='dc.services.instance'] .app-view > header dl { margin-right: 50px; } html[data-route^='dc.services.instance'] .app-view > header dt { - font-weight: var(--typo-weight-bold); + font-weight: var(--token-typography-font-weight-bold); } html[data-route^='dc.services.instance'] .tab-nav { border-top: var(--decor-border-100); @@ -35,6 +35,6 @@ html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) { padding-bottom: 24px; } html[data-route^='dc.services.instance.metadata'] .tab-section section h2 { - @extend %h300; + @extend %display-300-semibold; margin: 24px 0 12px 0; } diff --git a/ui/packages/consul-ui/app/styles/typography.scss b/ui/packages/consul-ui/app/styles/typography.scss index 5b725336e..f1e5a47d0 100644 --- a/ui/packages/consul-ui/app/styles/typography.scss +++ b/ui/packages/consul-ui/app/styles/typography.scss @@ -5,79 +5,73 @@ body, %form-element-text-input { - @extend %typo-body; + @extend %body-200-regular; } %radio-card header, fieldset > header, -%main-nav-horizontal-action, %definition-table dt, %table caption, %tbody-th, %form-element > span { - @extend %h400; + @extend %display-100-semibold; +} +%main-nav-horizontal-action { + @extend %body-200-medium; } %definition-table dt { - line-height: var(--typo-lead-700); + line-height: var(--token-typography-body-300-line-height); } %internal-button, %breadcrumbs li > *, %tab-nav { - @extend %h500; + @extend %body-200-medium; } -%healthcheck-output dt, -%table th, -%table td strong, -%sliding-toggle label span { - @extend %h600; +%table td p, +%table td { + @extend %body-200-regular; +} + +%healthcheck-output dt, +%table td:first-child p, +%table td:first-child, +%sliding-toggle label span { + @extend %body-200-semibold; } -pre code, -%notice, -%notice p, -%flash-message p, %filter-bar input, %tab-section p { - @extend %p1; + @extend %body-200-regular; } %empty-state-anchor, -%table td p, -%table td, -%healthcheck-output dl > dd, %form-element-label, %stats-card header a span, %footer, %app-view h1 span.kind-proxy { - @extend %p2; + @extend %body-100-regular; } %empty-state-subheader, %empty-state p, -%button, %main-content p, %form-element-note, %form-element-error > strong { - @extend %p3; + @extend %body-100-regular; } %main-content p code { @extend %inline-code; } %radio-group label { - line-height: var(--typo-lead-200); -} -%tab-nav { - letter-spacing: 0.03em; + line-height: var(--token-typography-body-100-line-height); } -/*TODO: See if we can collapse these into a */ -/* strong %p3 */ %form-element-label, %button { - font-weight: var(--typo-weight-semibold); + @extend %body-100-semibold; } %route-card section dt, %route-card header:not(.short) dd, %splitter-card > header { - font-weight: var(--typo-weight-bold); + @extend .hds-font-weight-bold; } /**/ @@ -87,9 +81,8 @@ pre code, %pill, %form-element > strong, %tbody-th em, -%app-view h1 em, %route-card header dt { - font-weight: var(--typo-weight-normal); + @extend .hds-font-weight-regular; } %form-element-note, @@ -101,8 +94,7 @@ pre code, /* composite row */ %composite-row-header { - font-size: var(--typo-size-450); - font-weight: var(--typo-weight-medium); + @extend %display-300-medium; } %composite-row-header *:not(button) { font-size: inherit; @@ -110,14 +102,31 @@ pre code, } /**/ -/* TODO: We have nothing else with a 500 */ -/* either make this the biggest %p or don't use it */ %app-view h1 em { - font-size: var(--typo-size-500); + @extend %body-200-medium; } /*TODO: This should go in reset, and probably needs select etc adding */ @media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) { input { - font-size: 16px !important; + font-size: var(--token-typography-body-300-font-size) !important; } } +%healthcheck-output dl > dd { + @extend %body-200-regular; +} + +h1 { + @extend %display-500-bold; +} + +%healthcheck-output pre code, +pre code, +pre, +code { + @extend %code-200-regular; +} + +dd code, +dd pre code { + @extend %code-100-regular; +} diff --git a/ui/packages/consul-ui/app/templates/dc/show/license.hbs b/ui/packages/consul-ui/app/templates/dc/show/license.hbs index b2f81a208..88d5dc7a1 100644 --- a/ui/packages/consul-ui/app/templates/dc/show/license.hbs +++ b/ui/packages/consul-ui/app/templates/dc/show/license.hbs @@ -120,16 +120,19 @@ as |item|}} @text={{compute (fn route.t 'documentation.links.license-expiration.text')}} @href='{{concat (env 'CONSUL_DOCS_URL') (compute (fn route.t 'documentation.links.license-expiration.link'))}}' @icon='docs-link' + @iconPosition='trailing' />
diff --git a/ui/packages/consul-ui/blueprints/route-test/index.js b/ui/packages/consul-ui/blueprints/route-test/index.js index 25bf4df27..3af54990c 100644 --- a/ui/packages/consul-ui/blueprints/route-test/index.js +++ b/ui/packages/consul-ui/blueprints/route-test/index.js @@ -2,4 +2,3 @@ * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: MPL-2.0 */ - diff --git a/ui/packages/consul-ui/lib/commands/bin/list.js b/ui/packages/consul-ui/lib/commands/bin/list.js index 358986acc..5d81554b3 100755 --- a/ui/packages/consul-ui/lib/commands/bin/list.js +++ b/ui/packages/consul-ui/lib/commands/bin/list.js @@ -4,5 +4,4 @@ * SPDX-License-Identifier: MPL-2.0 */ - require('../lib/list.js')(`${process.cwd()}/tests/steps.js`);