vault/ui/app/styles/components/stat-text.scss
claire bontempo f18a0643d3
UI: Cleanup scss color variables (#31386)
* update greys to use hds tokens

* update blue vars

* remove unused color vars

* replace remaining colors, add hex codes in commnets

* update kv rgp color

* remove color_variables file and use hds tokens directly
2025-07-29 13:13:08 -07:00

114 lines
3.0 KiB
SCSS

@use '../utils/font_variables';
@use '../utils/size_variables';
/**
* Copyright (c) HashiCorp, Inc.
* 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: size_variables.$size-5;
font-weight: font_variables.$font-weight-semibold;
margin-bottom: size_variables.$spacing-4;
line-height: inherit;
}
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-3;
font-weight: font_variables.$font-weight-normal;
margin-top: size_variables.$spacing-12;
}
}
&.s {
.stat-label {
font-size: size_variables.$size-5;
font-weight: font_variables.$font-weight-semibold;
line-height: inherit;
}
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-5;
font-weight: font_variables.$font-weight-normal;
margin-top: size_variables.$spacing-12;
}
}
&.l-no-subText {
.stat-label {
font-size: size_variables.$size-5;
font-weight: font_variables.$font-weight-semibold;
line-height: inherit;
}
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-3;
font-weight: font_variables.$font-weight-normal;
margin-top: size_variables.$spacing-4;
}
}
&.m-no-subText {
.stat-label {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-bold;
line-height: inherit;
}
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-5;
font-weight: font_variables.$font-weight-normal;
margin-top: size_variables.$spacing-4;
}
}
&.s-no-subText {
.stat-label {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-400);
line-height: inherit;
}
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-600);
line-height: inherit;
}
}
}