mirror of https://github.com/status-im/consul.git
feat: update typography to consume hds styles (#16577)
This commit is contained in:
Valeriia Ruban
GitHub
parent
724b752ca7
commit
ad25ba3068
|
|
@ -0,0 +1,3 @@
|
|||
```release-note:improvement
|
||||
ui: update typography to styles from hds
|
||||
```
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<fsm.State @matches={{array "idle" "error"}}>
|
||||
<fsm.State @matches={{"error"}}>
|
||||
<Hds::Alert @type='critical' class='mb-3 mt-2' as |A|>
|
||||
<Hds::Alert @color='critical' class='mb-3 mt-2' as |A|>
|
||||
<A.Title>Error</A.Title>
|
||||
<A.Description>{{fsm.state.context.error.message}}</A.Description>
|
||||
</Hds::Alert>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
as |writer|
|
||||
>
|
||||
<BlockSlot @name="error" as |after error|>
|
||||
<Hds::Alert @type='critical' class='mb-3 mt-2' as |A|>
|
||||
<Hds::Alert @color='critical' class='mb-3 mt-2' as |A|>
|
||||
<A.Title>Error</A.Title>
|
||||
<A.Description>{{error.message}}</A.Description>
|
||||
</Hds::Alert>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
%auth-form em {
|
||||
@extend %p3;
|
||||
@extend %body-100-regular;
|
||||
color: var(--token-color-foreground-faint);
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,3 @@
|
|||
{{!
|
||||
Copyright (c) HashiCorp, Inc.
|
||||
SPDX-License-Identifier: MPL-2.0
|
||||
}}
|
||||
|
||||
<div
|
||||
class="brand-loader"
|
||||
style="margin-left: calc(-{{@width}}px / 2)"
|
||||
|
|
|
|||
|
|
@ -39,4 +39,4 @@
|
|||
@options={{options}}
|
||||
@valueUpdated={{action onkeyup}}
|
||||
/>
|
||||
<pre><code>{{#if (has-block "content")}}{{yield to="content"}}{{else}}{{value}}{{/if}}</code></pre>
|
||||
<pre><code>{{#if (has-block 'content')}}{{yield to='content'}}{{else}}{{value}}{{/if}}</code></pre>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
}
|
||||
%healthcheck-output header > * {
|
||||
@extend %h300;
|
||||
@extend %display-300-semibold;
|
||||
}
|
||||
%healthcheck-output dd em {
|
||||
@extend %pill;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
display: inline;
|
||||
}
|
||||
.permissions > button {
|
||||
@extend %anchor, %p2;
|
||||
@extend %anchor, %body-100-regular;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,4 +20,7 @@
|
|||
td.intent- strong {
|
||||
@extend %pill-l7;
|
||||
}
|
||||
td.permissions {
|
||||
@extend %body-100-regular;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
*/
|
||||
|
||||
.consul-source {
|
||||
@extend %pill-200, %frame-gray-600, %p1;
|
||||
@extend %pill-200, %frame-gray-600, %body-200-regular;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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*/
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -60,5 +60,5 @@
|
|||
top: 30px;
|
||||
}
|
||||
%list-row-200 dd {
|
||||
@extend %p2;
|
||||
@extend %body-100-regular;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
%oidc-select button.reset {
|
||||
@extend %anchor;
|
||||
@extend %p3;
|
||||
@extend %body-100-regular;
|
||||
}
|
||||
.oidc-select {
|
||||
@extend %oidc-select;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
}
|
||||
|
||||
.peerings-badge__text {
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
@extend %body-100-medium;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
}
|
||||
%tooltip-content {
|
||||
@extend %p3;
|
||||
@extend %body-100-regular;
|
||||
padding: 12px;
|
||||
max-width: 224px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -10,10 +10,6 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
%reset-typo {
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
%reset-list {
|
||||
list-style: none;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; */
|
||||
}
|
||||
|
|
@ -3,6 +3,5 @@
|
|||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
@import './base-variables';
|
||||
@import './base-keyframes';
|
||||
@import './base-placeholders';
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
/>
|
||||
<Hds::Link::Standalone
|
||||
@text={{compute (fn route.t 'documentation.links.renewing-license.text')}}
|
||||
@href='{{concat (env 'CONSUL_DOCS_URL') (compute (fn route.t 'documentation.links.renewing-license.link'))}}'
|
||||
@icon='docs-link'
|
||||
@iconPosition='trailing'
|
||||
/>
|
||||
<Hds::Link::Standalone
|
||||
@text={{compute (fn route.t 'documentation.links.applying-new-license.text')}}
|
||||
@href='{{concat (env 'CONSUL_DOCS_URL') (compute (fn route.t 'documentation.links.applying-new-license.link'))}}'
|
||||
@icon='docs-link'
|
||||
@iconPosition='trailing'
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -2,4 +2,3 @@
|
|||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -4,5 +4,4 @@
|
|||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
|
||||
require('../lib/list.js')(`${process.cwd()}/tests/steps.js`);
|
||||
|
|
|
|||
Loading…
Reference in New Issue