diff --git a/scss/_maps.scss b/scss/_maps.scss index 31e2fc3935..ad34e9a489 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -83,6 +83,187 @@ $ouds-elevations: ( ) !default; // scss-docs-end ouds-maps-elevations +// scss-docs-start ouds-maps-font-placeholders +%display-large { + max-width: var(--#{$prefix}font-max-width-display-large); + font-size: var(--#{$prefix}font-size-display-large); + line-height: var(--#{$prefix}font-line-height-display-large); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-display-large); +} + +%display-medium { + max-width: var(--#{$prefix}font-max-width-display-medium); + font-size: var(--#{$prefix}font-size-display-medium); + line-height: var(--#{$prefix}font-line-height-display-medium); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-display-medium); +} + +%display-small { + max-width: var(--#{$prefix}font-max-width-display-small); + font-size: var(--#{$prefix}font-size-display-small); + line-height: var(--#{$prefix}font-line-height-display-small); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-display-small); +} + +%heading-xlarge { + max-width: var(--#{$prefix}font-max-width-heading-xlarge); + font-size: var(--#{$prefix}font-size-heading-xlarge); + line-height: var(--#{$prefix}font-line-height-heading-xlarge); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xlarge); +} + +%heading-large { + max-width: var(--#{$prefix}font-max-width-heading-large); + font-size: var(--#{$prefix}font-size-heading-large); + line-height: var(--#{$prefix}font-line-height-heading-large); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-heading-large); +} + +%heading-medium { + max-width: var(--#{$prefix}font-max-width-heading-medium); + font-size: var(--#{$prefix}font-size-heading-medium); + line-height: var(--#{$prefix}font-line-height-heading-medium); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-heading-medium); +} + +%heading-small { + max-width: var(--#{$prefix}font-max-width-heading-small); + font-size: var(--#{$prefix}font-size-heading-small); + line-height: var(--#{$prefix}font-line-height-heading-small); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-heading-small); +} + +%heading-xsmall { + max-width: var(--#{$prefix}font-max-width-heading-xsmall); + font-size: var(--#{$prefix}font-size-heading-xsmall); + line-height: var(--#{$prefix}font-line-height-heading-xsmall); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xsmall); +} + +%body-large { + max-width: var(--#{$prefix}font-max-width-body-large); + font-size: var(--#{$prefix}font-size-body-large); + line-height: var(--#{$prefix}font-line-height-body-large); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-body-large); +} + +%body-medium { + max-width: var(--#{$prefix}font-max-width-body-medium); + font-size: var(--#{$prefix}font-size-body-medium); + line-height: var(--#{$prefix}font-line-height-body-medium); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-body-medium); +} + +%body-small { + max-width: var(--#{$prefix}font-max-width-body-small); + font-size: var(--#{$prefix}font-size-body-small); + line-height: var(--#{$prefix}font-line-height-body-small); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-body-small); +} + +%label-xlarge { + font-size: px-to-rem($ouds-font-size-label-xlarge); + line-height: divide($ouds-font-line-height-label-xlarge, $ouds-font-size-label-xlarge); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-label-xlarge); +} + +%label-large { + font-size: px-to-rem($ouds-font-size-label-large); + line-height: divide($ouds-font-line-height-label-large, $ouds-font-size-label-large); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-label-large); +} + +%label-medium { + font-size: px-to-rem($ouds-font-size-label-medium); + line-height: divide($ouds-font-line-height-label-medium, $ouds-font-size-label-medium); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-label-medium); +} + +%label-small { + font-size: px-to-rem($ouds-font-size-label-small); + line-height: divide($ouds-font-line-height-label-small, $ouds-font-size-label-small); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-label-small); +} + +%code-medium { + font-size: px-to-rem($ouds-font-size-code-medium); + line-height: divide($ouds-font-line-height-code-medium, $ouds-font-size-code-medium); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-code-medium); +} + +%code-small { + font-size: px-to-rem($ouds-font-size-code-small); + line-height: divide($ouds-font-line-height-code-small, $ouds-font-size-code-small); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-code-small); +} +// scss-docs-end ouds-maps-font-placeholders + +// scss-docs-start ouds-maps-fonts +$ouds-font-sizes: ( + dl: "%display-large", + dm: "%display-medium", + ds: "%display-small", + hxl: "%heading-xlarge", + hl: "%heading-large", + hm: "%heading-medium", + hs: "%heading-small", + hxs: "%heading-xsmall", + bl: "%body-large", + bm: "%body-medium", + bs: "%body-small", + lxl: "%label-xlarge", + ll: "%label-large", + lm: "%label-medium", + ls: "%label-small", + cm: "%code-medium", + cs: "%code-small" +) !default; + +$ouds-font-weights: ( + normal: $ouds-font-weight-web-default, + bold: $ouds-font-weight-web-strong +) !default; + +$ouds-line-lengths: ( + sm: 40ch, + md: 80ch +) !default; +// scss-docs-end ouds-maps-fonts + // scss-docs-start ouds-maps-opacities $ouds-opacities: ( "transparent": $ouds-opacity-transparent, diff --git a/scss/_reboot.scss b/scss/_reboot.scss index b1fdf59e4e..a47ff39bd7 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -57,7 +57,7 @@ // 2. As a best practice, apply a default `background-color`. // 3. Prevent adjustments of font size after orientation changes in iOS. // 4. Change the default tap highlight to be completely transparent in iOS. -// 5. Prevent faux-bold/italic +// 5. Prevent faux-bold/italic maybe for some RTL fonts // See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis // scss-docs-start reboot-body-rules @@ -69,11 +69,11 @@ body { @include font-size(var(--#{$prefix}body-font-size)); font-weight: var(--#{$prefix}body-font-weight); line-height: var(--#{$prefix}body-line-height); - // OUDS mod: no color + color: var(--#{$prefix}body-color); text-align: var(--#{$prefix}body-text-align); /* rtl:remove */ - letter-spacing: $letter-spacing-base; // OUDS mod + letter-spacing: var(--#{$prefix}body-letter-spacing); // OUDS mod background-color: var(--#{$prefix}body-bg); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: rgba($black, 0); // 4 @@ -134,7 +134,6 @@ hr { %heading { margin-top: 0; // 1 margin-bottom: $headings-margin-bottom; - @include font-size($font-size-base); // OUDS mod font-family: $headings-font-family; font-style: $headings-font-style; font-weight: $headings-font-weight; @@ -142,7 +141,6 @@ hr { color: var(--#{$prefix}heading-color); /* rtl:remove */ - letter-spacing: $letter-spacing-base; // OUDS mod -webkit-font-smoothing: antialiased; // OUDS mod -moz-osx-font-smoothing: grayscale; // OUDS mod text-rendering: optimizelegibility; // OUDS mod @@ -150,27 +148,32 @@ hr { h1 { @extend %heading; - @include font-size($h4-font-size); - line-height: $h4-line-height; + @extend %heading-xlarge; // OUDS mod: instead of `@include font-size($h1-font-size)` +} - /* rtl:remove */ - letter-spacing: $h4-spacing; +h2 { + @extend %heading; + @extend %heading-large; // OUDS mod: instead of `@include font-size($h2-font-size)` } -h2, h3 { @extend %heading; - @include font-size($h5-font-size); - line-height: $h5-line-height; + @extend %heading-medium; // OUDS mod: instead of `@include font-size($h3-font-size)` +} - /* rtl:remove */ - letter-spacing: $h5-spacing; +h4 { + @extend %heading; + @extend %heading-small; // OUDS mod: instead of `@include font-size($h4-font-size)` +} + +h5 { + @extend %heading; + @extend %heading-xsmall; // OUDS mod: instead of `@include font-size($h5-font-size)` } -h4, -h5, h6 { @extend %heading; + @extend %body-large; // OUDS mod: instead of `@include font-size($h6-font-size)` // Makes sense for me to have the smallest title the same font-size as the largest body since it's Bold and spaced correctly } @@ -286,6 +289,13 @@ blockquote { margin: 0 0 1rem; } +// OUDS mod: No italic +em, +cite { + font-style: normal; // OUDS mod: remove italic. +} +// End mod + // Strong // @@ -304,10 +314,6 @@ strong { small { @include font-size($small-font-size); - // OUDS mod - font-weight: $font-weight-normal; - line-height: $line-height-sm; - // End mod } @@ -383,8 +389,7 @@ pre { margin-top: 0; // 1 margin-bottom: 1rem; // 2 overflow: auto; // 3 - @include font-size($code-font-size); - line-height: $pre-line-height; // OUDS mod + @extend %code-small; // OUDS mod: instead of `@include font-size($code-font-size)` color: $pre-color; // Account for some code outputs that place code tags in pre tags @@ -399,7 +404,6 @@ var, // OUDS mod code { @include font-size($code-font-size); font-style: normal; // OUDS mod: is italic in all browsers - line-height: $line-height-sm; // OUDS mod color: var(--#{$prefix}code-color); word-wrap: break-word; @@ -409,9 +413,9 @@ code { } } -kbd { +kbd { // TODO LM: Check the rendering padding: $kbd-padding-y $kbd-padding-x; - @include font-size($kbd-font-size); + @extend %code-small; // OUDS mod: instead of `@include font-size($code-font-size)` color: $kbd-color; background-color: $kbd-bg; @include border-radius($border-radius-sm); @@ -460,13 +464,10 @@ table { caption { padding-top: $table-caption-padding-y; padding-bottom: $table-caption-padding-y; - @include font-size($h1-font-size); // OUDS mod - font-weight: $font-weight-bold; // OUDS mod + @extend %heading-xlarge; // OUDS mod + font-weight: $font-weight-bold; // OUDS mod color: $table-caption-color; text-align: left; - - /* rtl:remove */ - letter-spacing: $h1-spacing; // OUDS mod -webkit-font-smoothing: antialiased; // OUDS mod -moz-osx-font-smoothing: grayscale; // OUDS mod text-rendering: optimizelegibility; // OUDS mod @@ -500,7 +501,6 @@ th { label { display: inline-block; // 1 - font-weight: $form-label-font-weight; // OUDS mod } // Remove the default `border-radius` that macOS Chrome adds. @@ -626,9 +626,8 @@ legend { width: 100%; padding: 0; margin-bottom: $legend-margin-bottom; - @include font-size($legend-font-size); + @extend %body-large; // OUDS mod: instead of `@include font-size($legend-font-size)` font-weight: $legend-font-weight; - line-height: inherit; + * { clear: left; // 2 diff --git a/scss/_root.scss b/scss/_root.scss index c4f23e8ff4..d15f7e610b 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -63,6 +63,145 @@ --#{$prefix}font-monospace: #{inspect($font-family-monospace)}; --#{$prefix}gradient: #{$gradient}; + --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-mobile)}; + --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-mobile)}; + --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-mobile)}; + --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-mobile)}; + --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-mobile)}; + --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-mobile)}; + --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-mobile)}; + --#{$prefix}font-size-heading-xsmall: #{px-to-rem($ouds-font-size-heading-xsmall-mobile)}; + --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-mobile)}; + --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-mobile)}; + --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-mobile)}; + --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-mobile, $ouds-font-size-display-large-mobile)}; + --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-mobile, $ouds-font-size-display-medium-mobile)}; + --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-mobile, $ouds-font-size-display-small-mobile)}; + --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-mobile, $ouds-font-size-heading-xlarge-mobile)}; + --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-mobile, $ouds-font-size-heading-large-mobile)}; + --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-mobile, $ouds-font-size-heading-medium-mobile)}; + --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-mobile, $ouds-font-size-heading-small-mobile)}; + --#{$prefix}font-line-height-heading-xsmall: #{divide($ouds-font-line-height-heading-xsmall-mobile, $ouds-font-size-heading-xsmall-mobile)}; + --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-mobile, $ouds-font-size-body-large-mobile)}; + --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-mobile, $ouds-font-size-body-medium-mobile)}; + --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-mobile, $ouds-font-size-body-small-mobile)}; + --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-mobile)}; + --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-mobile)}; + --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-mobile)}; + --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-mobile)}; + --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-mobile)}; + --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-mobile)}; + --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-mobile)}; + --#{$prefix}font-letter-spacing-heading-xsmall: #{px-to-rem($ouds-font-letter-spacing-heading-xsmall-mobile)}; + --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-mobile)}; + --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-mobile)}; + --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-mobile)}; + --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-mobile)}; + --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-mobile)}; + --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-mobile)}; + --#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-mobile)}; + --#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-mobile)}; + --#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-mobile)}; + --#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-mobile)}; + --#{$prefix}font-max-width-heading-xsmall: #{px-to-rem($ouds-size-max-width-type-heading-xsmall-mobile)}; + --#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-mobile)}; + --#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-mobile)}; + --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-mobile)}; + + @include media-breakpoint-up(md) { + --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-tablet)}; + --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-tablet)}; + --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-tablet)}; + --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-tablet)}; + --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-tablet)}; + --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-tablet)}; + --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-tablet)}; + --#{$prefix}font-size-heading-xsmall: #{px-to-rem($ouds-font-size-heading-xsmall-tablet)}; + --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-tablet)}; + --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-tablet)}; + --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-tablet)}; + --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-tablet, $ouds-font-size-display-large-tablet)}; + --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-tablet, $ouds-font-size-display-medium-tablet)}; + --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-tablet, $ouds-font-size-display-small-tablet)}; + --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-tablet, $ouds-font-size-heading-xlarge-tablet)}; + --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-tablet, $ouds-font-size-heading-large-tablet)}; + --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-tablet, $ouds-font-size-heading-medium-tablet)}; + --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-tablet, $ouds-font-size-heading-small-tablet)}; + --#{$prefix}font-line-height-heading-xsmall: #{divide($ouds-font-line-height-heading-xsmall-tablet, $ouds-font-size-heading-xsmall-tablet)}; + --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-tablet, $ouds-font-size-body-large-tablet)}; + --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-tablet, $ouds-font-size-body-medium-tablet)}; + --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-tablet, $ouds-font-size-body-small-tablet)}; + --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-tablet)}; + --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-tablet)}; + --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-tablet)}; + --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-tablet)}; + --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-tablet)}; + --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-tablet)}; + --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-tablet)}; + --#{$prefix}font-letter-spacing-heading-xsmall: #{px-to-rem($ouds-font-letter-spacing-heading-xsmall-tablet)}; + --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-tablet)}; + --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-tablet)}; + --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-tablet)}; + --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-tablet)}; + --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-tablet)}; + --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-tablet)}; + --#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-tablet)}; + --#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-tablet)}; + --#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-tablet)}; + --#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-tablet)}; + --#{$prefix}font-max-width-heading-xsmall: #{px-to-rem($ouds-size-max-width-type-heading-xsmall-tablet)}; + --#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-tablet)}; + --#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-tablet)}; + --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-tablet)}; + } + + @include media-breakpoint-up(xl) { + --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-desktop)}; + --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-desktop)}; + --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-desktop)}; + --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-desktop)}; + --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-desktop)}; + --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-desktop)}; + --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-desktop)}; + --#{$prefix}font-size-heading-xsmall: #{px-to-rem($ouds-font-size-heading-xsmall-desktop)}; + --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-desktop)}; + --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-desktop)}; + --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-desktop)}; + --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-desktop, $ouds-font-size-display-large-desktop)}; + --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-desktop, $ouds-font-size-display-medium-desktop)}; + --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-desktop, $ouds-font-size-display-small-desktop)}; + --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-desktop, $ouds-font-size-heading-xlarge-desktop)}; + --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-desktop, $ouds-font-size-heading-large-desktop)}; + --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-desktop, $ouds-font-size-heading-medium-desktop)}; + --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-desktop, $ouds-font-size-heading-small-desktop)}; + --#{$prefix}font-line-height-heading-xsmall: #{divide($ouds-font-line-height-heading-xsmall-desktop, $ouds-font-size-heading-xsmall-desktop)}; + --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-desktop, $ouds-font-size-body-large-desktop)}; + --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-desktop, $ouds-font-size-body-medium-desktop)}; + --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-desktop, $ouds-font-size-body-small-desktop)}; + --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-desktop)}; + --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-desktop)}; + --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-desktop)}; + --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-desktop)}; + --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-desktop)}; + --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-desktop)}; + --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-desktop)}; + --#{$prefix}font-letter-spacing-heading-xsmall: #{px-to-rem($ouds-font-letter-spacing-heading-xsmall-desktop)}; + --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-desktop)}; + --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-desktop)}; + --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-desktop)}; + --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-desktop)}; + --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-desktop)}; + --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-desktop)}; + --#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-desktop)}; + --#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-desktop)}; + --#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-desktop)}; + --#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-desktop)}; + --#{$prefix}font-max-width-heading-xsmall: #{px-to-rem($ouds-size-max-width-type-heading-xsmall-desktop)}; + --#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-desktop)}; + --#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-desktop)}; + --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-desktop)}; + } + // Root and body // scss-docs-start root-body-variables @if $font-size-root != null { @@ -72,6 +211,7 @@ @include rfs($font-size-base, --#{$prefix}body-font-size); --#{$prefix}body-font-weight: #{$font-weight-base}; --#{$prefix}body-line-height: #{$line-height-base}; + --#{$prefix}body-letter-spacing: #{$letter-spacing-base}; @if $body-text-align != null { --#{$prefix}body-text-align: #{$body-text-align}; } diff --git a/scss/_title-bars.scss b/scss/_title-bars.scss index 5b90722cab..3774390a0f 100644 --- a/scss/_title-bars.scss +++ b/scss/_title-bars.scss @@ -15,16 +15,6 @@ background-color: var(--#{$prefix}title-bar-bg); border-bottom: var(--#{$prefix}title-bar-border-width) solid var(--#{$prefix}title-bar-border-color); - @include media-breakpoint-up(md) { - --#{$prefix}title-bar-font-size: #{$title-bar-font-size-md}; - --#{$prefix}title-bar-letter-spacing: #{$title-bar-letter-spacing-md}; - } - - @include media-breakpoint-up(xl) { - --#{$prefix}title-bar-font-size: #{$title-bar-font-size-xl}; - --#{$prefix}title-bar-letter-spacing: #{$title-bar-letter-spacing-xl}; - } - > [class*="container"] { display: flex; align-items: flex-end; diff --git a/scss/_type.scss b/scss/_type.scss index 8217542491..daf12717ab 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -26,185 +26,41 @@ } -// OUDS mod -// Headings and displays together -// = Add letter-spacing and line-height -// = Reduce heading font-sizes for mobile (mobile first, obviously) -[class*="display-"] { - @extend %heading; -} - -.display-1 { - @include font-size($h2-font-size); - line-height: $h2-line-height; - - /* rtl:remove */ - letter-spacing: $h2-spacing; -} - -h1, -.display-2, -.display-3 { - @include font-size($h3-font-size); - line-height: $h3-line-height; - - /* rtl:remove */ - letter-spacing: $mid-spacing; -} - -/* rtl:begin:remove */ -.display-2 { - letter-spacing: $h3-spacing; -} - -/* rtl:end:remove */ - -h2, -.display-4 { - @include font-size($h5-font-size); - line-height: $h5-line-height; - - /* rtl:remove */ - letter-spacing: $h5-spacing; -} - .lead { - @include font-size($h6-font-size); + @extend %heading-xsmall; // OUDS mod: instead of `@include font-size($lead-font-size)` font-weight: $lead-font-weight; - line-height: $lead-line-height; - - /* rtl:remove */ - letter-spacing: $h6-spacing; } -@include media-breakpoint-up(sm) { - h1, - .display-1, - .display-2, - .display-3 { +// OUDS mod: no @each +// Type display classes +@each $display, $font-size in $display-font-sizes { // TODO LM Check + .display-#{$display} { + font-family: $display-font-family; + font-style: $display-font-style; + font-weight: $display-font-weight; line-height: $display-line-height; - } - - .display-1 { - @include font-size($display2-size); - - /* rtl:remove */ - letter-spacing: $display2-spacing; - } - - .display-2 { - @include font-size($display3-size); - - /* rtl:remove */ - letter-spacing: $display3-spacing; - } - - h1, - .display-3 { - @include font-size($display4-size); - - /* rtl:remove */ - letter-spacing: $display4-spacing; - } - - h2, - h3, - .display-4 { - @include font-size($h3-font-size); - line-height: $h3-line-height; - - /* rtl:remove */ - letter-spacing: $h3-spacing; - } - - h4, - h5, - h6 { - @include font-size($h5-font-size); - line-height: $h5-line-height; - - /* rtl:remove */ - letter-spacing: $h5-spacing; - } - - .lead { - @include font-size($h5-font-size); - - /* rtl:remove */ - letter-spacing: $h5-spacing; + @extend %heading; // OUDS mod + @extend #{$font-size}; // OUDS mod: instead of `@include font-size($font-size)` } } -@include media-breakpoint-up(lg) { - .display-1 { - @include font-size($display1-size); - - /* rtl:remove */ - letter-spacing: $display1-spacing; - } - - .display-2 { - @include font-size($display2-size); - - /* rtl:remove */ - letter-spacing: $display2-spacing; - } - - .display-3 { - @include font-size($display3-size); - - /* rtl:remove */ - letter-spacing: $display3-spacing; - } - - .display-4 { - @include font-size($display4-size); - line-height: $display-line-height; - - /* rtl:remove */ - letter-spacing: $display4-spacing; - } - - h2 { - @include font-size($h2-font-size); - line-height: $h2-line-height; +// .display-1 { +// @extend %heading; +// font-weight: $display-font-weight; +// @extend %display-large; +// } - /* rtl:remove */ - letter-spacing: $h2-spacing; - } - - h3 { - @include font-size($h3-font-size); - line-height: $h3-line-height; - - /* rtl:remove */ - letter-spacing: $h3-spacing; - } - - h4 { - @include font-size($h4-font-size); - line-height: $h4-line-height; - - /* rtl:remove */ - letter-spacing: $h4-spacing; - } - - h5, - h6 { - @include font-size($h5-font-size); - line-height: $h5-line-height; +// .display-2 { +// @extend %heading; +// font-weight: $display-font-weight; +// @extend %display-medium; +// } - /* rtl:remove */ - letter-spacing: $h5-spacing; - } - - .lead { - @include font-size($lead-font-size); - - /* rtl:remove */ - letter-spacing: $lead-letter-spacing; - } -} +// .display-3 { +// @extend %heading; +// font-weight: $display-font-weight; +// @extend %display-small; +// } // End mod @@ -252,11 +108,7 @@ h2, // Blockquotes .blockquote { margin-bottom: $blockquote-margin-y; - @include font-size($blockquote-font-size); - line-height: $blockquote-line-height; // OUDS mod - - /* rtl:remove */ - letter-spacing: $blockquote-letter-spacing; // OUDS mod + @extend %body-large; // OUDS mod: instead of `@include font-size($blockquote-font-size)` > :last-child { margin-bottom: 0; @@ -266,13 +118,9 @@ h2, .blockquote-footer { margin-top: -$blockquote-margin-y; margin-bottom: $blockquote-margin-y; - @include font-size($blockquote-footer-font-size); - line-height: $line-height-sm; // OUDS mod + @extend %body-small; // OUDS mod: instead of `@include font-size($blockquote-footer-font-size)` color: $blockquote-footer-color; - /* rtl:remove */ - letter-spacing: $letter-spacing-base; // OUDS mod - &::before { content: "\2014\00A0"; // em dash, nbsp } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1892a6836e..4a7ac56d55 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -885,7 +885,8 @@ $utilities: map-merge( "font-size": ( property: font-size, class: fs, - values: $font-sizes + values: $font-sizes, + bootstrap-compatibility: true ), // OUDS mod: no font-style "font-weight": ( @@ -894,31 +895,18 @@ $utilities: map-merge( values: ( lighter: $font-weight-lighter, light: $font-weight-light, - normal: $font-weight-normal, + // OUDS mod: no normal because handled by ouds map medium: $font-weight-medium, semibold: $font-weight-semibold, - bold: $font-weight-bold, + // OUDS mod: no bold because handled by ouds map bolder: $font-weight-bolder - ) + ), + bootstrap-compatibility: true ), - // OUDS mod: use hardcoded values instead of variables since our variables can't fit utilities "line-height": ( property: line-height, class: lh, - values: ( - 1: 1, - sm: 1.25, // OUDS mod: instead of `$line-height-sm` - base: 1.5, // OUDS mod: instead of `$line-height-base` - lg: 2, // OUDS mod: instead of `$line-height-lg` - ) - ), - "line-length": ( - property: max-width, - class: ll, - values: ( - sm: $line-length-sm, - md: $line-length-md, - ) + values: $line-heights // OUDS mod: use map instead of variables to ease the customization ), "text-align": ( responsive: true, @@ -954,6 +942,23 @@ $utilities: map-merge( rtl: false ), // scss-docs-end utils-text + // scss-docs-start utils-text-ouds + "font-size-ouds": ( + property: font-size, + class: fs, + values: $ouds-font-sizes + ), + "font-weight-ouds": ( + property: font-weight, + class: fw, + values: $ouds-font-weights + ), + "line-length-ouds": ( + property: max-width, + class: ll, + values: $ouds-line-lengths + ), + // scss-docs-end utils-text-ouds // scss-docs-start utils-color "color": ( property: color, diff --git a/scss/_variables.scss b/scss/_variables.scss index 7f223e8056..074727a8a1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -717,52 +717,47 @@ $aspect-ratios: ( // Font, line-height, and color for body text, headings, and more. // scss-docs-start font-variables -// stylelint-disable value-keyword-case -$font-family-sans-serif: "Helvetica Neue", Helvetica, "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; -$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; -// stylelint-enable value-keyword-case +$font-family-sans-serif: $ouds-font-family-sans-serif-stack !default; +$font-family-monospace: $ouds-font-family-monospace-stack !default; $font-family-base: var(--#{$prefix}font-sans-serif) !default; $font-family-code: var(--#{$prefix}font-monospace) !default; // OUDS mod //// Type scale & vertical rhythm completely revamped to match Orange Web Guidelines - +// TODO LM: Check for spacings and colors // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings and margins // $font-size-base affects the font size of the body text $font-size-root: null !default; -$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -$font-size-sm: $font-size-base * .875 !default; // 14px -$font-size-lg: $font-size-base * 1.125 !default; // 18px -$font-size-xlg: $font-size-base * 1.25 !default; // 20px +$font-size-base: var(--#{$prefix}font-size-body-medium) !default; // Assumes the browser default, typically `16px` +$font-size-sm: var(--#{$prefix}font-size-body-small) !default; // 14px +$font-size-lg: var(--#{$prefix}font-size-body-large) !default; // 18px +// $font-size-xlg: $ouds-font-size-label-xlarge !default; // 20px // TODO LM remove ? $font-weight-lighter: null !default; $font-weight-light: null !default; -$font-weight-normal: 400 !default; -$font-weight-medium: 500 !default; -$font-weight-semibold: 600 !default; -$font-weight-bold: 700 !default; +$font-weight-normal: $ouds-font-weight-web-default !default; +$font-weight-medium: null !default; +$font-weight-semibold: null !default; +$font-weight-bold: $ouds-font-weight-web-strong !default; $font-weight-bolder: null !default; $font-weight-base: $font-weight-normal !default; -// stylelint-disable function-disallowed-list -$line-height-base: calc(18 / 16) !default; -$line-height-sm: calc(16 / 14) !default; -$line-height-lg: calc(30 / 16) !default; -// stylelint-enable function-disallowed-list - -$line-length-sm: 40ch !default; -$line-length-md: 80ch !default; +$line-height-base: var(--#{$prefix}font-line-height-body-medium) !default; +$line-height-sm: var(--#{$prefix}font-line-height-body-small) !default; +$line-height-lg: var(--#{$prefix}font-line-height-body-large) !default; -$letter-spacing-base: $spacer * -.005 !default; // -0.1px +$letter-spacing-base: var(--#{$prefix}font-letter-spacing-body-medium) !default; +// $letter-spacing-sm: var(--#{$prefix}font-letter-spacing-body-small) !default; +$letter-spacing-lg: var(--#{$prefix}font-letter-spacing-body-large) !default; -$h1-font-size: $font-size-base * 2.125 !default; // 34px -$h2-font-size: $font-size-base * 1.875 !default; // 30px -$h3-font-size: $font-size-base * 1.5 !default; // 24px -$h4-font-size: $font-size-xlg !default; // 20px -$h5-font-size: $font-size-lg !default; // 18px -$h6-font-size: $font-size-base !default; // 16px +$h1-font-size: var(--#{$prefix}font-size-heading-xlarge) !default; +$h2-font-size: var(--#{$prefix}font-size-heading-large) !default; +$h3-font-size: var(--#{$prefix}font-size-heading-medium) !default; +$h4-font-size: var(--#{$prefix}font-size-heading-small) !default; +$h5-font-size: var(--#{$prefix}font-size-heading-xsmall) !default; +$h6-font-size: var(--#{$prefix}font-size-body-large) !default; // scss-docs-end font-variables // scss-docs-start font-sizes @@ -775,58 +770,55 @@ $font-sizes: ( 6: $h6-font-size ) !default; // scss-docs-end font-sizes - +// TODO LM: Decide if we should have them or not // scss-docs-start letter-spacing -$h1-spacing: $letter-spacing-base * 10 !default; // -1px -$h2-spacing: $letter-spacing-base * 8 !default; // -0.8px -$mid-spacing: $letter-spacing-base * 6 !default; // -0.6px -$h3-spacing: $letter-spacing-base * 5 !default; // -0.5px -$h4-spacing: $letter-spacing-base * 4 !default; // -0.4px -$h5-spacing: $letter-spacing-base * 2 !default; // -0.2px -$h6-spacing: $letter-spacing-base !default; +$h2-spacing: var(--#{$prefix}font-letter-spacing-heading-large) !default; +$h3-spacing: var(--#{$prefix}font-letter-spacing-heading-medium) !default; +$h5-spacing: var(--#{$prefix}font-letter-spacing-heading-xsmall) !default; // scss-docs-end letter-spacing -// stylelint-disable function-disallowed-list // scss-docs-start line-height -$h1-line-height: 1 !default; -$h2-line-height: calc(32 / 30) !default; -$h3-line-height: calc(26 / 24) !default; -$h4-line-height: calc(22 / 20) !default; -$h5-line-height: calc(20 / 18) !default; -$h6-line-height: $line-height-base !default; +$line-heights: ( + 1: 1, + sm: 1.25, + base: 1.5, + lg: 2, +) !default; +$h5-line-height: var(--#{$prefix}font-line-height-heading-xsmall) !default; // scss-docs-end line-height -// stylelint-enable function-disallowed-list // scss-docs-start headings-variables $headings-margin-bottom: $spacer !default; // OUDS mod $headings-font-family: null !default; $headings-font-style: null !default; -$headings-font-weight: 700 !default; -$headings-line-height: $h6-line-height !default; +$headings-font-weight: $ouds-font-weight-web-heading !default; +$headings-line-height: null !default; $headings-color: inherit !default; // scss-docs-end headings-variables +// TODO LM: Check + test other values in here // scss-docs-start display-headings -$display1-size: $font-size-xlg * 3 !default; // 60px -$display2-size: $font-size-xlg * 2.5 !default; // 50px -$display3-size: $font-size-xlg * 2 !default; // 40px -$display4-size: $h1-font-size !default; // 34px -$display1-spacing: $letter-spacing-base * 20 !default; // -2px -$display2-spacing: $letter-spacing-base * 16 !default; // -1.6px -$display3-spacing: $h1-spacing !default; // -1px -$display4-spacing: $h1-spacing !default; // -1px -$display-line-height: $h1-line-height !default; +$display-font-sizes: ( + 1: "%display-large", + 2: "%display-medium", + 3: "%display-small" +) !default; + +$display-font-family: null !default; +$display-font-style: null !default; +$display-font-weight: $ouds-font-weight-web-display !default; +$display-line-height: $headings-line-height !default; // scss-docs-end display-headings // scss-docs-start type-variables -$lead-font-size: $font-size-xlg !default; -$lead-font-weight: 400 !default; -$lead-line-height: 1.5 !default; -$lead-letter-spacing: $letter-spacing-base * 4 !default; +$lead-font-size: $h5-font-size !default; +$lead-font-weight: $ouds-font-weight-web-body-default !default; +// $lead-line-height: $line-height-lg !default; +// $lead-letter-spacing: $letter-spacing-lg !default; -$small-font-size: .875rem !default; +$small-font-size: .875em !default; -$sub-sup-font-size: .75em !default; +$sub-sup-font-size: .75em !default; // TODO LM: Ask designers for this use case // fusv-disable $text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in Bootstrap 5.3.0 @@ -835,11 +827,9 @@ $text-muted: var(--#{$prefix}secondary-color) !default; // Depr $initialism-font-size: $small-font-size !default; $blockquote-margin-y: $spacer !default; -$blockquote-font-size: $font-size-xlg !default; +// $blockquote-font-size: $font-size-lg !default; $blockquote-footer-color: var(--#{$prefix}secondary-color) !default; // OUDS mod: instead of `$gray-600` -$blockquote-footer-font-size: $small-font-size !default; -$blockquote-line-height: 1.5 !default; // OUDS mod -$blockquote-letter-spacing: $letter-spacing-base * .25 !default; // OUDS mod +// $blockquote-footer-font-size: $small-font-size !default; $hr-margin-y: $spacer !default; $hr-color: inherit !default; @@ -858,14 +848,14 @@ $vr-border-width: 2px !default; // OUDS mod: instead of `var(--#{$pr // scss-docs-end vr-variables $legend-margin-bottom: $spacer * .25 !default; -$legend-font-size: $font-size-xlg !default; +// $legend-font-size: $font-size-lg !default; $legend-font-weight: $font-weight-bold !default; $dt-font-weight: $font-weight-bold !default; $list-inline-padding: $spacer * .25 !default; -$mark-padding: 0 .1875em !default; // OUDS mod +$mark-padding: .125em .1875em !default; // OUDS mod $mark-color: $white !default; // OUDS mod: instead of `$body-color` $mark-bg: $black !default; // OUDS mod: instead of `$yellow-100` // scss-docs-end type-variables @@ -993,7 +983,7 @@ $btn-padding-y-lg: $input-btn-padding-y-lg !default; $btn-padding-x-lg: $input-btn-padding-x-lg !default; $btn-font-size-lg: $input-btn-font-size-lg !default; $btn-line-height-lg: $h5-line-height !default; // OUDS mod -$btn-letter-spacing-lg: $letter-spacing-base * 2 !default; // OUDS mod +$btn-letter-spacing-lg: calc($letter-spacing-base * 2) !default; // stylelint-disable-line function-disallowed-list $btn-border-width: $input-btn-border-width !default; @@ -1109,7 +1099,7 @@ $form-text-color: var(--#{$prefix}secondary-color) !defaul $form-label-margin-bottom: .5rem !default; // OUDS mod $form-label-font-size: null !default; $form-label-font-style: null !default; -$form-label-font-weight: $font-weight-bold !default; +$form-label-font-weight: null !default; $form-label-color: null !default; $form-label-disabled-color: var(--#{$prefix}disabled-color) !default; // OUDS mod $form-label-required-margin-left: .1875rem !default; // OUDS mod @@ -1121,7 +1111,7 @@ $form-helper-size: 1.25rem !default; // OUDS mod $form-helper-color: var(--#{$prefix}info) !default; // OUDS mod $form-helper-bg: var(--#{$prefix}highlight-color) !default; // OUDS mod $form-helper-icon: escape-svg($helper-icon) !default; // OUDS mod -$form-helper-label-margin-bottom: $form-label-margin-bottom - divide(($form-helper-size - $font-size-base), 2) !default; // OUDS mod +$form-helper-label-margin-bottom: $form-label-margin-bottom - divide(($form-helper-size - 1rem), 2) !default; // OUDS mod // scss-docs-end form-helper-variables // scss-docs-start form-input-variables @@ -1187,7 +1177,7 @@ $form-color-disabled-filter: brightness(0) invert(1) brightness(.8) ! // scss-docs-start form-check-variables $form-check-input-width: 1em !default; -$form-check-min-height: $font-size-base * $input-btn-line-height !default; +$form-check-min-height: calc($font-size-base * $input-btn-line-height) !default; // stylelint-disable-line function-disallowed-list $form-check-padding-start: $form-check-input-width + .5em !default; $form-check-margin-bottom: .125rem !default; $form-check-label-padding-top: .4375rem !default; // OUDS mod @@ -1541,15 +1531,15 @@ $navbar-border-color: var(--#{$prefix}border-color-subtle) $navbar-brand-margin-y-xs: $spacer * .5 !default; $navbar-brand-logo-size-xs: $spacer * 1.5 !default; $navbar-brand-font-size-xs: 1.3125rem !default; -$navbar-brand-letter-spacing-xs: $letter-spacing-base * 5 !default; +$navbar-brand-letter-spacing-xs: calc($letter-spacing-base * 5) !default; // stylelint-disable-line function-disallowed-list $navbar-brand-font-size-two-lined-xs: 1.0625rem !default; -$navbar-brand-letter-spacing-two-lined-xs: $letter-spacing-base * 4 !default; +$navbar-brand-letter-spacing-two-lined-xs: calc($letter-spacing-base * 4) !default; // stylelint-disable-line function-disallowed-list $navbar-brand-margin-y: $spacer * .95 !default; $navbar-brand-logo-size: $spacer * 2.5 !default; -$navbar-brand-letter-spacing: $letter-spacing-base * 10 !default; +$navbar-brand-letter-spacing: calc($letter-spacing-base * 10) !default; // stylelint-disable-line function-disallowed-list $navbar-brand-font-size-two-lined: 1.8125rem !default; -$navbar-brand-letter-spacing-two-lined: $letter-spacing-base * 8 !default; +$navbar-brand-letter-spacing-two-lined: calc($letter-spacing-base * 8) !default; // stylelint-disable-line function-disallowed-list $navbar-icon-size-xs: $spacer * 1.25 !default; $navbar-icon-size: $spacer * 1.5 !default; @@ -2097,12 +2087,6 @@ $title-bar-line-height: $display-line-height !default; $title-bar-letter-spacing: $h2-spacing !default; $title-bar-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list $title-bar-border-color: var(--#{$prefix}border-color-subtle) !default; - -$title-bar-font-size-md: $display2-size !default; -$title-bar-letter-spacing-md: $display2-spacing !default; - -$title-bar-font-size-xl: $display1-size !default; -$title-bar-letter-spacing-xl: $display1-spacing !default; // scss-docs-end title-bars-variables // End mod @@ -2255,18 +2239,17 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; // Code // OUDS mod -$code-font-size: .875em !default; +$code-font-size: $small-font-size !default; $code-color: $gray-700 !default; $kbd-padding-y: $spacer * .05 !default; $kbd-padding-x: $spacer * .05 !default; -$kbd-font-size: $code-font-size !default; +// $kbd-font-size: $code-font-size !default; $kbd-color: var(--#{$prefix}kbd-color, $black) !default; $kbd-bg: var(--#{$prefix}kbd-bg, $gray-300) !default; $nested-kbd-font-weight: null !default; // Deprecated in Bootstrap v5.2.0, removing in v6 $pre-color: var(--#{$prefix}code-color) !default; -$pre-line-height: 1.25 !default; // End mod // diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 0b097acb68..0412d11244 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -55,30 +55,23 @@ /* rtl:begin:remove */ } - @if $is-css-var { + @if type-of($value) == "string" and str-slice($value, 1, 1) == "%" { .#{$property-class + $infix + $property-class-modifier} { - --#{$prefix}#{$css-variable-name}: #{$value}; + @extend #{$value}; } - - @each $pseudo in $state { - .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + } @else { + @if $is-css-var { + .#{$property-class + $infix + $property-class-modifier} { --#{$prefix}#{$css-variable-name}: #{$value}; } - } - } @else { - .#{$property-class + $infix + $property-class-modifier} { - @each $property in $properties { - @if $is-local-vars { - @each $local-var, $variable in $is-local-vars { - --#{$prefix}#{$local-var}: #{$variable}; - } + + @each $pseudo in $state { + .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + --#{$prefix}#{$css-variable-name}: #{$value}; } - #{$property}: $value if($enable-important-utilities, !important, null); } - } - - @each $pseudo in $state { - .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + } @else { + .#{$property-class + $infix + $property-class-modifier} { @each $property in $properties { @if $is-local-vars { @each $local-var, $variable in $is-local-vars { @@ -88,11 +81,24 @@ #{$property}: $value if($enable-important-utilities, !important, null); } } + + @each $pseudo in $state { + .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + @each $property in $properties { + @if $is-local-vars { + @each $local-var, $variable in $is-local-vars { + --#{$prefix}#{$local-var}: #{$variable}; + } + } + #{$property}: $value if($enable-important-utilities, !important, null); + } + } + } } - } - @if $is-rtl == false { - /* rtl:end:remove */ + @if $is-rtl == false { + /* rtl:end:remove */ + } } } } diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss index 7750d7de9a..f9bdbabe4b 100644 --- a/scss/tokens/_composite.scss +++ b/scss/tokens/_composite.scss @@ -13,3 +13,10 @@ $ouds-elevation-sticky-default: $ouds-elevation-x-sticky-default $ouds-elevation $ouds-elevation-sticky-emphasized: $ouds-elevation-x-sticky-emphasized $ouds-elevation-y-sticky-emphasized $ouds-elevation-blur-sticky-emphasized $ouds-elevation-spread-sticky-emphasized $ouds-elevation-color-sticky-emphasized !default; $ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation-scrolled $ouds-elevation-y-sticky-navigation-scrolled $ouds-elevation-blur-sticky-navigation-scrolled $ouds-elevation-spread-sticky-navigation-scrolled $ouds-elevation-color-sticky-navigation-scrolled !default; // scss-docs-end ouds-composite-elevation + +// stylelint-disable value-keyword-case +// scss-docs-start ouds-composite-font +$ouds-font-family-sans-serif-stack: "SF Pro", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !default; // TODO LM: Do or check RTL as well +$ouds-font-family-monospace-stack: "SF Mono", "Roboto Mono", Consolas, Menlo, monospace !default; +// scss-docs-end ouds-composite-font +// stylelint-enable value-keyword-case diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index c2e7a736da..4ac265ee44 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -267,7 +267,8 @@ $ouds-elevation-y-500: 12px !default; // scss-docs-start ouds-raw-font $ouds-font-family-brand-default: "Helvetica Neue" !default; // $ouds-font-family-brand-tv: "Helvetica Neue LT" !default; -// $ouds-font-family-monospace-courier-new: "Courier New" !default; +// $ouds-font-family-monospace-consolas: "Consolas" !default; // TODO LM: Ask for this specific font +// $ouds-font-family-monospace-courier-new: "Courier New" !default; // TODO LM: Ask to remove this one (default monosapce font is better than this one imo) // $ouds-font-family-monospace-menlo: "Menlo" !default; // $ouds-font-family-monospace-monaco: "Monaco" !default; // $ouds-font-family-monospace-sf-mono: "SF Mono" !default; @@ -276,23 +277,23 @@ $ouds-font-family-brand-default: "Helvetica Neue" !default; // $ouds-font-family-system-noto-sans: "Noto Sans" !default; // $ouds-font-family-system-roboto: "Roboto" !default; // $ouds-font-family-system-sf-pro: "SF Pro" !default; -$ouds-font-letter-spacing-150: .18 !default; -// $ouds-font-letter-spacing-175: .19 !default; -$ouds-font-letter-spacing-200: .17 !default; -$ouds-font-letter-spacing-250: .2 !default; -$ouds-font-letter-spacing-300: .18 !default; +$ouds-font-letter-spacing-150: .18px !default; // TODO LM: Ask for px in tokenator. +// $ouds-font-letter-spacing-175: .19px !default; +$ouds-font-letter-spacing-200: .17px !default; // TODO LM: Weird value compared to the 5 positive ones. +$ouds-font-letter-spacing-250: .2px !default; +$ouds-font-letter-spacing-300: .18px !default; $ouds-font-letter-spacing-350: 0 !default; -$ouds-font-letter-spacing-450: -.12 !default; -$ouds-font-letter-spacing-550: -.28 !default; -$ouds-font-letter-spacing-650: -.32 !default; -$ouds-font-letter-spacing-750: -.36 !default; -$ouds-font-letter-spacing-850: -.4 !default; -// $ouds-font-letter-spacing-950: -.55 !default; -$ouds-font-letter-spacing-1050: -.6 !default; -// $ouds-font-letter-spacing-1150: -.65 !default; -$ouds-font-letter-spacing-1250: -.7 !default; -$ouds-font-letter-spacing-1450: -.96 !default; -$ouds-font-letter-spacing-1850: -1.08 !default; +$ouds-font-letter-spacing-450: -.12px !default; +$ouds-font-letter-spacing-550: -.28px !default; +$ouds-font-letter-spacing-650: -.32px !default; +$ouds-font-letter-spacing-750: -.36px !default; +$ouds-font-letter-spacing-850: -.4px !default; +// $ouds-font-letter-spacing-950: -.55px !default; +$ouds-font-letter-spacing-1050: -.6px !default; +// $ouds-font-letter-spacing-1150: -.65px !default; +$ouds-font-letter-spacing-1250: -.7px !default; +$ouds-font-letter-spacing-1450: -.96px !default; +$ouds-font-letter-spacing-1850: -1.08px !default; $ouds-font-line-height-250: 16px !default; $ouds-font-line-height-350: 20px !default; $ouds-font-line-height-450: 24px !default; diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index c0789778d9..00e60da68d 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -1,3 +1,4 @@ +// fusv-disable // Semantic applications // Depends on raw primitive values @@ -340,6 +341,9 @@ $ouds-font-letter-spacing-heading-small-tablet: $ouds-font-letter-spacing-350 !d $ouds-font-letter-spacing-heading-xlarge-desktop: $ouds-font-letter-spacing-850 !default; $ouds-font-letter-spacing-heading-xlarge-mobile: $ouds-font-letter-spacing-550 !default; $ouds-font-letter-spacing-heading-xlarge-tablet: $ouds-font-letter-spacing-750 !default; +$ouds-font-letter-spacing-heading-xsmall-desktop: $ouds-font-letter-spacing-350 !default; // TODO LM: Ask designer about these tokens +$ouds-font-letter-spacing-heading-xsmall-mobile: $ouds-font-letter-spacing-250 !default; +$ouds-font-letter-spacing-heading-xsmall-tablet: $ouds-font-letter-spacing-300 !default; // TODO LM: Until there $ouds-font-letter-spacing-label-large: $ouds-font-letter-spacing-250 !default; $ouds-font-letter-spacing-label-medium: $ouds-font-letter-spacing-200 !default; $ouds-font-letter-spacing-label-small: $ouds-font-letter-spacing-150 !default; @@ -376,6 +380,9 @@ $ouds-font-line-height-heading-small-tablet: $ouds-font-line-height-550 !default $ouds-font-line-height-heading-xlarge-desktop: $ouds-font-line-height-1050 !default; $ouds-font-line-height-heading-xlarge-mobile: $ouds-font-line-height-750 !default; $ouds-font-line-height-heading-xlarge-tablet: $ouds-font-line-height-950 !default; +$ouds-font-line-height-heading-xsmall-desktop: $ouds-font-line-height-550 !default; // TODO LM: Ask designer about these tokens +$ouds-font-line-height-heading-xsmall-mobile: $ouds-font-line-height-450 !default; +$ouds-font-line-height-heading-xsmall-tablet: $ouds-font-line-height-450 !default; // TODO LM: Until there $ouds-font-line-height-label-large: $ouds-font-line-height-450 !default; $ouds-font-line-height-label-medium: $ouds-font-line-height-350 !default; $ouds-font-line-height-label-small: $ouds-font-line-height-250 !default; @@ -389,7 +396,7 @@ $ouds-font-size-body-medium-tablet: $ouds-font-size-200 !default; $ouds-font-size-body-small-desktop: $ouds-font-size-200 !default; $ouds-font-size-body-small-mobile: $ouds-font-size-150 !default; $ouds-font-size-body-small-tablet: $ouds-font-size-150 !default; -$ouds-font-size-code-medium: $ouds-font-size-200 !default; +$ouds-font-size-code-medium: $ouds-font-size-200 !default; // TODO LM: Decide whether it should be em or rem and apply it $ouds-font-size-code-small: $ouds-font-size-150 !default; $ouds-font-size-display-large-desktop: $ouds-font-size-1850 !default; $ouds-font-size-display-large-mobile: $ouds-font-size-850 !default; @@ -412,6 +419,9 @@ $ouds-font-size-heading-small-tablet: $ouds-font-size-350 !default; $ouds-font-size-heading-xlarge-desktop: $ouds-font-size-850 !default; $ouds-font-size-heading-xlarge-mobile: $ouds-font-size-550 !default; $ouds-font-size-heading-xlarge-tablet: $ouds-font-size-750 !default; +$ouds-font-size-heading-xsmall-desktop: $ouds-font-size-350 !default; // TODO LM: Ask designer about these tokens +$ouds-font-size-heading-xsmall-mobile: $ouds-font-size-250 !default; +$ouds-font-size-heading-xsmall-tablet: $ouds-font-size-300 !default; // TODO LM: Until there $ouds-font-size-label-large: $ouds-font-size-250 !default; $ouds-font-size-label-medium: $ouds-font-size-200 !default; $ouds-font-size-label-small: $ouds-font-size-150 !default; @@ -421,7 +431,7 @@ $ouds-font-weight-web-default: $ouds-font-weight-400 !default; $ouds-font-weight-web-strong: $ouds-font-weight-700 !default; $ouds-font-weight-web-body-default: $ouds-font-weight-web-default !default; $ouds-font-weight-web-body-strong: $ouds-font-weight-web-strong !default; -$ouds-font-weight-web-display: $ouds-font-weight-web-strong !default; +$ouds-font-weight-web-display: $ouds-font-weight-web-strong !default; // TODO LM: Ask for a color field for code, headings, body, etc $ouds-font-weight-web-heading: $ouds-font-weight-web-strong !default; $ouds-font-weight-web-label-default: $ouds-font-weight-web-default !default; $ouds-font-weight-web-label-strong: $ouds-font-weight-web-strong !default; @@ -564,7 +574,7 @@ $ouds-size-icon-with-heading-xlarge-size-tall-desktop: $ouds-dimension-800 !defa $ouds-size-icon-with-heading-xlarge-size-tall-mobile: $ouds-dimension-650 !default; $ouds-size-icon-with-heading-xlarge-size-tall-tablet: $ouds-dimension-800 !default; $ouds-size-max-width-grid: $ouds-grid-max-width-650 !default; -$ouds-size-max-width-type-body-large-desktop: $ouds-dimension-7000 !default; +$ouds-size-max-width-type-body-large-desktop: $ouds-dimension-7000 !default; // TODO LM: Ask if these values reflect any design choice. $ouds-size-max-width-type-body-large-mobile: $ouds-dimension-6000 !default; $ouds-size-max-width-type-body-large-tablet: $ouds-dimension-6000 !default; $ouds-size-max-width-type-body-medium-desktop: $ouds-dimension-7000 !default; @@ -594,6 +604,9 @@ $ouds-size-max-width-type-heading-small-tablet: $ouds-dimension-6000 !default; $ouds-size-max-width-type-heading-xlarge-desktop: $ouds-dimension-11000 !default; $ouds-size-max-width-type-heading-xlarge-mobile: $ouds-dimension-9000 !default; $ouds-size-max-width-type-heading-xlarge-tablet: $ouds-dimension-9000 !default; +$ouds-size-max-width-type-heading-xsmall-desktop: $ouds-dimension-7000 !default; // TODO LM: Ask designer about these tokens +$ouds-size-max-width-type-heading-xsmall-mobile: $ouds-dimension-6000 !default; +$ouds-size-max-width-type-heading-xsmall-tablet: $ouds-dimension-6000 !default; // TODO LM: Until there $ouds-size-icon-with-label-large-size-medium: $ouds-dimension-2xs !default; $ouds-size-icon-with-label-large-size-short: $ouds-dimension-3xs !default; $ouds-size-icon-with-label-large-size-shorter: $ouds-dimension-4xs !default; @@ -733,3 +746,4 @@ $ouds-space-row-gap-with-icon-shorter: $ouds-dimension-9xs !default; $ouds-space-row-gap-with-icon-shortest: $ouds-dimension-10xs !default; $ouds-space-row-gap-with-icon-tall: $ouds-dimension-5xs !default; // scss-docs-end ouds-semantic-space +// fusv-enable diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss index 9ee7abbd13..c9c932e4a9 100644 --- a/site/assets/scss/_colors.scss +++ b/site/assets/scss/_colors.scss @@ -1,6 +1,7 @@ // // Docs color palette classes // +// TODO LM @each $color, $value in map-merge($colors, ("gray-500": $gray-500)) { .swatch-#{$color} { diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index d4e4e1f189..8c1ef5e773 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -47,14 +47,13 @@ white-space: nowrap; .bs-text-standard { - font-size: $font-size-base; - line-height: $line-height-base; + @extend %body-medium; } } > details { + @extend %label-large; padding: 0 10px; // static even when zoomed - font-size: 1rem; line-height: 1.5; border: var(--bs-border-color) dashed calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list } @@ -112,11 +111,11 @@ .bd-title { --bs-heading-color: var(--bs-emphasis-color); - @include font-size(3rem); + @extend %display-small; // OUDS mod: instead of `3rem` } .bd-lead { - @include font-size(1.5rem); + @extend %heading-small; // OUDS mod: instead of `1.5rem` font-weight: 400; } diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 560b9a4059..36f46ef4bf 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -9,7 +9,7 @@ } .lead { - @include font-size(1rem); + @extend %heading-small; font-weight: 400; color: var(--bs-secondary-color); } @@ -48,12 +48,7 @@ } // OUDS mod: no `#carbonads` - - @include media-breakpoint-up(md) { - .lead { - @include font-size(1.5rem); - } - } + // OUDS mod: no @media query } .masthead-followup { @@ -64,14 +59,10 @@ } .lead { - @include font-size(1rem); + @extend %heading-xsmall; } - @include media-breakpoint-up(md) { - .lead { - @include font-size(1.25rem); - } - } + // OUDS mod: no @media query } .masthead-followup-icon { diff --git a/site/assets/scss/_ouds-web.scss b/site/assets/scss/_ouds-web.scss index b3ec661888..045173c8e7 100644 --- a/site/assets/scss/_ouds-web.scss +++ b/site/assets/scss/_ouds-web.scss @@ -13,7 +13,7 @@ body { } .display-0 { - font-size: 5.25em; + @extend %display-large; // OUDS mod: instead of `5.25em` backface-visibility: hidden; transform-style: preserve-3d; -webkit-font-smoothing: antialiased; diff --git a/site/assets/scss/_placeholder-img.scss b/site/assets/scss/_placeholder-img.scss index 6f5bbe4189..189d6b68cd 100644 --- a/site/assets/scss/_placeholder-img.scss +++ b/site/assets/scss/_placeholder-img.scss @@ -5,11 +5,11 @@ // Remember to update `site/_layouts/examples.html` too if this changes! .bd-placeholder-img { - @include font-size(1.125rem); + @extend %body-large; // OUDS mod: instead of `1.125rem` user-select: none; text-anchor: middle; } .bd-placeholder-img-lg { - @include font-size(3.5rem); + @extend %display-medium; // OUDS mod: instead of `3.5rem` } diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 6ce66af533..6eb4bf33d9 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -24,6 +24,7 @@ color: var(--bs-emphasis-color); // OUDS mod + // TODO LM svg { font-size: 1.5625rem; } @@ -31,9 +32,7 @@ } .bd-links-nav { - @include media-breakpoint-down(lg) { - font-size: .875rem; - } + @extend %body-medium; // OUDS mod: instead of media query @include media-breakpoint-between(xs, lg) { column-count: 2; diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss index c76ac9743c..e3bdca09d5 100644 --- a/site/assets/scss/_tarteaucitron.scss +++ b/site/assets/scss/_tarteaucitron.scss @@ -54,7 +54,7 @@ } @include tac("DisclaimerAlert") { - font-size: $font-size-sm; + @extend %label-small; } @include tac("ClosePanel") { @@ -81,20 +81,17 @@ } @include tac("H1", true) { + @extend %heading-xlarge; margin-bottom: $spacer; - font-size: $h2-font-size; - letter-spacing: $h2-spacing; } @include tac("H2", true) { + @extend %heading-large; padding-top: $spacer / 10; - font-size: $h4-font-size; - letter-spacing: $h4-spacing; } @include tac("H3", true) { - font-size: $h6-font-size; - letter-spacing: $h6-spacing; + @extend %heading-small; } @include tac("Info") { @@ -104,7 +101,7 @@ } @include tac("Name", true) { - font-size: $font-size-sm; + @extend %label-small; color: var(--bs-secondary-color); } diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index 8dbfcb473e..3f4919173d 100644 --- a/site/assets/scss/_toc.scss +++ b/site/assets/scss/_toc.scss @@ -11,7 +11,7 @@ } nav { - @include font-size(.875rem); + @extend %label-small; // OUDS mod: instead of `.875rem` ul { padding-left: 0; diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md index 5ece016074..03897d1ebc 100644 --- a/site/content/docs/0.0/content/reboot.md +++ b/site/content/docs/0.0/content/reboot.md @@ -11,4 +11,477 @@ aliases: toc: true --- -{{< callout-soon "page" >}} +## Approach + +Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more. + +Here are our guidelines and reasons for choosing what to override in Reboot: + +- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing. +- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model. +- For easier scaling across device sizes, block elements should use `rem`s for `margin`s. +- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible. + +## CSS variables + +OUDS Web standards require `@import`s across all our CSS bundles (including `ouds-web.css`, `ouds-web-reboot.css`, and `ouds-web-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately OUDS Web will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.** + +For example, consider these `:root` CSS variables for common `` styles: + +{{< scss-docs name="root-body-variables" file="scss/_root.scss" >}} + +In practice, those variables are then applied in Reboot like so: + +{{< scss-docs name="reboot-body-rules" file="scss/_reboot.scss" >}} + +Which allows you to make real-time customizations however you like: + +```html + + + +``` + +## Page defaults + +The `` and `` elements are updated to provide better page-wide defaults. More specifically: + +- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border. + - No base `font-size` is declared on the ``, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. This browser default can be overridden by modifying the `$font-size-root` variable. +- The `` also sets a global `font-family`, `font-weight`, `line-height`, and `color`. This is inherited later by some form elements to prevent font inconsistencies. +- For safety, the `` has a declared `background-color`, defaulting to `#fff`. + +## Native font stack + +OUDS Web utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically with today's devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/). + +```scss +$font-family-sans-serif: + // Safari for macOS and iOS (San Francisco) + "SF Pro", + // Android + Roboto, + // older macOS and iOS + "Helvetica Neue", + // Windows + Helvetica + // Basic web fallback + Arial, + // Sans serif fallback + sans-serif !default; +``` + +This `font-family` is applied to the `` and automatically inherited globally throughout OUDS Web. To switch the global `font-family`, update `$font-family-base` and recompile OUDS Web. + +The following `font-family` is applied on every code basis element. To switch the global `font-family`, update `$font-family-code` and recompile OUDS Web. + +```scss +$font-family-sans-serif: + // Safari for macOS and iOS (San Francisco) + "SF Mono", + // Android + "Roboto Mono", + // Windows + Consolas, + // Basic web fallback + Menlo, + // Monospace fallback + monospace !default; +``` + +## Headings + +// TODO LM +All heading elements—`

`—`

` have their `margin-top` removed, `margin-bottom: .5rem` set, and `line-height` tightened. While headings inherit their `color` by default, you can also override it via optional CSS variable, `--bs-heading-color`. + +{{< bs-table "table" >}} +| Heading | Example | +| --- | --- | +| `

` | h1. OUDS Web heading | +| `

` | h2. OUDS Web heading | +| `

` | h3. OUDS Web heading | +| `

` | h4. OUDS Web heading | +| `
` | h5. OUDS Web heading | +| `
` | h6. OUDS Web heading | +{{< /bs-table >}} + +## Paragraphs + +// TODO LM +All `

` elements have their `margin-top` removed and `margin-bottom: 1rem` set for easy spacing. + +{{< example >}} +

This is an example paragraph.

+{{< /example >}} + +## Links + +// TODO LM: No focus ? +Links have a default `color` and underline applied. While links change on `:hover`, they don't change based on whether someone `:visited` the link. They also receive no special `:focus` styles. + +{{< example >}} +This is an example link +{{< /example >}} + +As of Bootstrap v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `--bs-link-opacity` CSS variable: + +{{< example >}} +This is an example link +{{< /example >}} + +Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values. + +{{< example >}} +This is a placeholder link +{{< /example >}} + +## Horizontal rules + +The `
` element has been simplified. Similar to browser defaults, `
`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities. + +{{< example >}} +
+ + +{{< /example >}} + +## Lists + +// TODO LM +All lists—`
`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}). + +{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ This is an example table, and this is its caption to describe the contents. +
Table headingTable headingTable headingTable heading
Table cellTable cellTable cellTable cell
Table cellTable cellTable cellTable cell
Table cellTable cellTable cellTable cell
+{{< /example >}} + +## Forms + +Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes: + +- `
`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs. +- ``s, like fieldsets, have also been restyled to be displayed as a heading of sorts. +- `
+ + +### Pointers on buttons + +Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `