Tim DownandCopybot
38f2b5e616
Miscellaneous CIAM fixes GitOrigin-RevId: b7f38888b602fc7b4dc4fbc63e38f82527ab666e
129 lines
3.3 KiB
SCSS
129 lines
3.3 KiB
SCSS
// Typography mixins for consistent text styles
|
|
|
|
:root {
|
|
--ds-link-text-decoration-thickness: auto;
|
|
}
|
|
|
|
@mixin ds-body-sm-links() {
|
|
--ds-link-text-decoration-thickness: 0.06em;
|
|
}
|
|
|
|
@mixin ds-body-xs-regular() {
|
|
font-size: var(--ds-font-size-300);
|
|
font-weight: var(--ds-font-weight-regular);
|
|
line-height: var(--ds-font-line-height-500);
|
|
}
|
|
|
|
@mixin ds-body-xs-semibold() {
|
|
font-size: var(--ds-font-size-300);
|
|
font-weight: var(--ds-font-weight-semibold);
|
|
line-height: var(--ds-font-line-height-500);
|
|
}
|
|
|
|
@mixin ds-body-sm-regular() {
|
|
@include ds-body-sm-links;
|
|
|
|
font-size: var(--ds-font-size-350);
|
|
font-weight: var(--ds-font-weight-regular);
|
|
line-height: var(--ds-font-line-height-500);
|
|
}
|
|
|
|
@mixin ds-body-sm-semibold() {
|
|
@include ds-body-sm-links;
|
|
|
|
font-size: var(--ds-font-size-350);
|
|
font-weight: var(--ds-font-weight-semibold);
|
|
line-height: var(--ds-font-line-height-500);
|
|
}
|
|
|
|
@mixin ds-body-md-regular() {
|
|
font-size: var(--ds-font-size-400);
|
|
font-weight: var(--ds-font-weight-regular);
|
|
line-height: var(--ds-font-line-height-600);
|
|
}
|
|
|
|
@mixin ds-body-md-semibold() {
|
|
font-size: var(--ds-font-size-400);
|
|
font-weight: var(--ds-font-weight-semibold);
|
|
line-height: var(--ds-font-line-height-600);
|
|
}
|
|
|
|
@mixin ds-body-lg-regular() {
|
|
font-size: var(--ds-font-size-450);
|
|
font-weight: var(--ds-font-weight-regular);
|
|
line-height: var(--ds-font-line-height-700);
|
|
}
|
|
|
|
@mixin ds-body-lg-semibold() {
|
|
font-size: var(--ds-font-size-450);
|
|
font-weight: var(--ds-font-weight-semibold);
|
|
line-height: var(--ds-font-line-height-700);
|
|
}
|
|
|
|
@mixin ds-heading-xs-regular() {
|
|
font-size: var(--ds-font-size-450);
|
|
font-weight: var(--ds-font-weight-regular);
|
|
line-height: var(--ds-font-line-height-600);
|
|
}
|
|
|
|
@mixin ds-heading-xs-semibold() {
|
|
font-size: var(--ds-font-size-450);
|
|
font-weight: var(--ds-font-weight-semibold);
|
|
line-height: var(--ds-font-line-height-600);
|
|
}
|
|
|
|
@mixin ds-heading-sm-regular() {
|
|
font-size: var(--ds-font-size-500);
|
|
font-weight: var(--ds-font-weight-regular);
|
|
line-height: var(--ds-font-line-height-700);
|
|
}
|
|
|
|
@mixin ds-heading-sm-semibold() {
|
|
font-size: var(--ds-font-size-500);
|
|
font-weight: var(--ds-font-weight-semibold);
|
|
line-height: var(--ds-font-line-height-700);
|
|
}
|
|
|
|
@mixin ds-heading-md-regular() {
|
|
font-size: var(--ds-font-size-600);
|
|
font-weight: var(--ds-font-weight-regular);
|
|
line-height: var(--ds-font-line-height-800);
|
|
}
|
|
|
|
@mixin ds-heading-md-semibold() {
|
|
font-size: var(--ds-font-size-600);
|
|
font-weight: var(--ds-font-weight-semibold);
|
|
line-height: var(--ds-font-line-height-800);
|
|
}
|
|
|
|
@mixin ds-heading-lg-regular() {
|
|
font-size: var(--ds-font-size-800);
|
|
font-weight: var(--ds-font-weight-regular);
|
|
line-height: var(--ds-font-line-height-1000);
|
|
}
|
|
|
|
@mixin ds-heading-lg-semibold() {
|
|
font-size: var(--ds-font-size-800);
|
|
font-weight: var(--ds-font-weight-semibold);
|
|
line-height: var(--ds-font-line-height-1000);
|
|
}
|
|
|
|
@mixin ds-heading-xl-regular() {
|
|
font-size: var(--ds-font-size-1000);
|
|
font-weight: var(--ds-font-weight-regular);
|
|
line-height: var(--ds-font-line-height-1200);
|
|
}
|
|
|
|
@mixin ds-heading-xl-semibold() {
|
|
font-size: var(--ds-font-size-1000);
|
|
font-weight: var(--ds-font-weight-semibold);
|
|
line-height: var(--ds-font-line-height-1200);
|
|
}
|
|
|
|
// Focus outline
|
|
@mixin ds-focus-outline() {
|
|
box-shadow: none;
|
|
outline: 2px solid var(--ds-color-yellow-500);
|
|
outline-offset: 2px;
|
|
}
|