Antoine ClausseandCopybot
0e4682ef89
* Create DS version for Bootstrap Input form elements * Move DS Button Storybook to DS component folder * Use phosphor icons * Add ds-focus-outline mixin * Use math.div GitOrigin-RevId: e50934212ec5949f0f7abc7880eb73933fce2a9b
117 lines
3.1 KiB
SCSS
117 lines
3.1 KiB
SCSS
// Typography mixins for consistent text styles
|
|
|
|
@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() {
|
|
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() {
|
|
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;
|
|
}
|