vault/ui/app/styles/components/stat-text.scss
Vault Automation 796c5fb294
[HDS-5060] UI: Align typography styles to HDS tokens (#10193) (#10360)
Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>
2025-10-23 16:37:36 -04:00

112 lines
3.3 KiB
SCSS

@use '../utils/size_variables';
/**
* Copyright IBM Corp. 2016, 2025
* SPDX-License-Identifier: BUSL-1.1
*/
.stat-text-container {
line-height: normal;
max-height: 100%;
display: flex;
flex-direction: column;
&.l,
&.m {
.stat-label {
font-size: var(--token-typography-body-300-font-size);
font-weight: var(--token-typography-font-weight-semibold);
margin-bottom: size_variables.$spacing-4;
line-height: inherit;
}
.stat-text {
font-size: var(--token-typography-body-200-font-size);
font-weight: var(--token-typography-font-weight-regular);
color: var(--token-color-foreground-faint);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-3;
font-weight: var(--token-typography-font-weight-regular);
margin-top: size_variables.$spacing-12;
}
}
&.s {
.stat-label {
font-size: size_variables.$size-5;
font-weight: var(--token-typography-font-weight-semibold);
line-height: inherit;
}
.stat-text {
font-size: var(--token-typography-body-200-font-size);
font-weight: var(--token-typography-font-weight-regular);
color: var(--token-color-foreground-faint);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-5;
font-weight: var(--token-typography-font-weight-regular);
margin-top: size_variables.$spacing-12;
}
}
&.l-no-subText {
.stat-label {
font-size: size_variables.$size-5;
font-weight: var(--token-typography-font-weight-semibold);
line-height: inherit;
}
.stat-text {
font-size: var(--token-typography-body-200-font-size);
font-weight: var(--token-typography-font-weight-regular);
color: var(--token-color-foreground-faint);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-3;
font-weight: var(--token-typography-font-weight-regular);
margin-top: size_variables.$spacing-4;
}
}
&.m-no-subText {
.stat-label {
font-size: var(--token-typography-body-200-font-size);
font-weight: var(--token-typography-font-weight-bold);
line-height: inherit;
}
.stat-text {
font-size: var(--token-typography-body-200-font-size);
font-weight: var(--token-typography-font-weight-regular);
color: var(--token-color-foreground-faint);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-5;
font-weight: var(--token-typography-font-weight-regular);
margin-top: size_variables.$spacing-4;
}
}
&.s-no-subText {
.stat-label {
font-size: var(--token-typography-body-200-font-size);
font-weight: var(--token-typography-font-weight-regular);
color: var(--token-color-palette-neutral-400);
line-height: inherit;
}
.stat-text {
font-size: var(--token-typography-body-200-font-size);
font-weight: var(--token-typography-font-weight-regular);
color: var(--token-color-foreground-faint);
line-height: inherit;
}
.stat-value {
font-size: var(--token-typography-body-200-font-size);
font-weight: var(--token-typography-font-weight-regular);
color: var(--token-color-foreground-primary);
line-height: inherit;
}
}
}