vault/ui/app/styles/core/title.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

67 lines
1.2 KiB
SCSS

@use '../utils/size_variables';
/**
* Copyright IBM Corp. 2016, 2025
* SPDX-License-Identifier: BUSL-1.1
*/
// This file styles the following styles: title, subtitle, form-section.title and title sizes
.title:not(:last-child),
.subtitle:not(:last-child) {
display: block;
margin-bottom: 1rem;
}
.title {
color: hsl(0, 0%, 21%);
font-size: 2rem;
font-weight: var(--token-typography-font-weight-bold);
line-height: 1.125;
word-break: break-word;
> a {
color: hsl(0, 0%, 4%);
text-decoration: none;
}
// title sizes
&.is-2 {
font-size: size_variables.$size-2;
}
&.is-3 {
font-size: size_variables.$size-3;
}
&.is-4 {
font-size: var(--token-typography-display-400-font-size);
}
&.is-5 {
font-size: size_variables.$size-5;
}
&.is-6 {
font-size: var(--token-typography-display-200-font-size);
}
&.is-7 {
font-size: size_variables.$size-7;
}
&.is-8 {
font-size: var(--token-typography-body-200-font-size);
}
}
.form-section .title {
margin-bottom: size_variables.$spacing-12;
}
.is-subtitle-gray {
text-transform: uppercase;
font-size: size_variables.$size-7;
color: var(--token-color-palette-neutral-400);
}