diff --git a/scss/_reboot.scss b/scss/_reboot.scss index b113b40722..ab6174a260 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -185,6 +185,7 @@ h6 { p { margin-top: 0; margin-bottom: $paragraph-margin-bottom; + // todo lm: @extend %body-medium; } @@ -290,6 +291,7 @@ blockquote { } // OUDS mod: No italic +i, em, cite { font-style: normal; // OUDS mod: remove italic. @@ -389,7 +391,7 @@ pre { margin-top: 0; // 1 margin-bottom: 1rem; // 2 overflow: auto; // 3 - @extend %code-small; // OUDS mod: instead of `@include font-size($code-font-size)` + @extend %code-medium; // 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 diff --git a/scss/_type.scss b/scss/_type.scss index 46cd3fd906..15f537e36a 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -82,10 +82,7 @@ // // Builds on `abbr` -.initialism { - @include font-size($initialism-font-size); - text-transform: uppercase; -} +// OUDS mod: no .initialism // Blockquotes .blockquote { diff --git a/scss/_variables.scss b/scss/_variables.scss index d843f7e4b1..a693778226 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -810,7 +810,7 @@ $sub-sup-font-size: .75em !default; $text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in Bootstrap 5.3.0 // fusv-enable -$initialism-font-size: $small-font-size !default; +// OUDS mod: no $initialism-font-size $blockquote-margin-y: $spacer !default; // OUDS mod: no `$blockquote-font-size` diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 0412d11244..d827b05c56 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -55,10 +55,12 @@ /* rtl:begin:remove */ } + // OUDS mod @if type-of($value) == "string" and str-slice($value, 1, 1) == "%" { .#{$property-class + $infix + $property-class-modifier} { @extend #{$value}; } + // End mod } @else { @if $is-css-var { .#{$property-class + $infix + $property-class-modifier} { diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss index 2239f1481d..b1b2334dad 100644 --- a/scss/tokens/_composite.scss +++ b/scss/tokens/_composite.scss @@ -15,7 +15,6 @@ $ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation- // scss-docs-end ouds-composite-elevation // scss-docs-start ouds-composite-font -// todo lm: Should we add default svg img height and width ? If yes, then we should add it here. Do we introduce new classes in here ? %display-large { max-width: var(--#{$prefix}font-max-width-display-large); font-size: var(--#{$prefix}font-size-display-large); @@ -50,6 +49,25 @@ $ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation- /* rtl:remove */ letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xlarge); + // todo lm: Should we add default svg img height and width ? If yes, then we should add it here. Do we introduce new classes in here ? + + // img, + // svg, + // .#{$prefix}icon, + // .#{$prefix}icon-sm, + // .#{$prefix}icon-lg { + // width: 1em; + // height: 1em; + // font-size: var(--#{$prefix}icon-medium-with-heading-xlarge); + // } + + // .#{$prefix}icon-sm { + // font-size: var(--#{$prefix}icon-small-with-heading-xlarge); + // } + + // .#{$prefix}icon-lg { + // font-size: var(--#{$prefix}icon-large-with-heading-xlarge); + // } } %heading-large { diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss index f0a53a2fc3..78320c6186 100644 --- a/site/assets/scss/_colors.scss +++ b/site/assets/scss/_colors.scss @@ -15,7 +15,8 @@ top: 1rem; right: 1rem; padding-left: 1rem; - @extend %label-small; + @extend %label-small; // OUDS mod: instead of `.75rem` + // OUDS mod: no line-height white-space: pre; content: str-slice($contrast-ratio, 1, 4) "\A" diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index aa61e62aec..aa2b52ca5a 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -9,7 +9,7 @@ } .lead { - @extend %heading-small; + @extend %heading-small; // OUDS mod: instead of `@include font-size(1rem)` font-weight: 400; color: var(--bs-secondary-color); } @@ -59,7 +59,7 @@ } .lead { - @extend %heading-small; + @extend %heading-small; // OUDS mod: instead of `@include font-size(1rem)` } // OUDS mod: no @media query diff --git a/site/content/docs/0.0/content/typography.md b/site/content/docs/0.0/content/typography.md index 4447d49f77..e9ba97e27c 100644 --- a/site/content/docs/0.0/content/typography.md +++ b/site/content/docs/0.0/content/typography.md @@ -71,16 +71,7 @@ All HTML headings, `
h6. OUDS Web heading
{{< /example >}} - + ## Display headings @@ -157,14 +148,19 @@ Display headings are customizable via two variables, `$display-font-family` and ## Regular text -Since only [headings](#headings), [display headings](#display-headings) and `strong` text are meant to use **Bold** in main content, other contents should use regular font-weight. Each class sets `font-size` but also `line-height`, `letter-spacing`, and `max-width`. Here are the associated `font-size`s depending on the breakpoints. See our [Font utilities]({{< docsref "/utilities/text#font-size" >}}). +Since only [headings](#headings), [display headings](#display-headings) and `strong` text are meant to use **Bold** in main content, other contents should use `normal` font-weight. Each class sets `font-size` but also `line-height`, `letter-spacing`, and `max-width`. Here are the associated `font-size`s depending on the breakpoints. See our [Font utilities]({{< docsref "/utilities/text#font-size" >}}). + +{{< callout info >}} +Body medium is set by default on `body` but we don't set the `max-width` property for usability reasons. +So if you need to limit width of a default body paragraph, please use `.fs-bm`. +{{< /callout >}} {{< bs-table >}} | Regular text | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper | | --- | --- | --- | --- | -| Body large | `1rem` (16px) | `1rem` (16px) | `1.125rem` (18px) | -| Body medium | `.875rem` (14px) | `.875rem` (14px) | `1rem` (16px) | -| Body small | `.75rem` (12px) | `.75rem` (12px) | `.875rem` (14px) | +| Body large (`.lead`) | `1rem` (16px) | `1rem` (16px) | `1.125rem` (18px) | +| Body medium (default) | `.875rem` (14px) | `.875rem` (14px) | `1rem` (16px) | +| Body small (`.small`) | `.75rem` (12px) | `.75rem` (12px) | `.875rem` (14px) | {{< /bs-table >}}font-size
: 1remline-height
: 1.5letter-spacing
: 0.0125remmax-width
: 40remfont-size
: 1remline-height
: 1.5letter-spacing
: 0.0125remmax-width
: 40remfont-size
: 1.125remline-height
: 1.3333letter-spacing
: 0.01125remmax-width
: 45remfont-size
: .875remline-height
: 1.4286letter-spacing
: 0.010625remmax-width
: 40remfont-size
: .875remline-height
: 1.4286letter-spacing
: 0.010625remmax-width
: 40remfont-size
: 1remline-height
: 1.5letter-spacing
: 0.0125remmax-width
: 45remfont-size
: .875remline-height
: 1.4286letter-spacing
: 0.010625remmax-width
: 40remfont-size
: .875remline-height
: 1.4286letter-spacing
: 0.010625remmax-width
: 40remfont-size
: 1remline-height
: 1.5letter-spacing
: 0.0125remmax-width
: 45remfont-size
: .75remline-height
: 1.3333letter-spacing
: 0.01125remmax-width
: 40remfont-size
: .75remline-height
: 1.3333letter-spacing
: 0.01125remmax-width
: 40remfont-size
: .875remline-height
: 1.4286letter-spacing
: 0.010625remmax-width
: 45rem+ This is a small paragraph. +
++ This is a small paragraph. +
+{{< /example >}} + ## Inline text elements Styling for common inline HTML5 elements. @@ -208,7 +217,7 @@ Styling for common inline HTML5 elements. Beware that those tags should be used for semantic purpose: - `` represents text which is marked or highlighted for reference or notation purposes. -- `` represents side-comments and small print, like copyright and legal text. +- `` represents side-comments and small print, like copyright and legal text. It uses [Regular text](#regular-text) body small. - `Start aligned text on all viewport sizes.
-Center aligned text on all viewport sizes.
-End aligned text on all viewport sizes.
- -End aligned text on viewports sized XS (x-small) or wider.
-End aligned text on viewports sized SM (small) or wider.
-End aligned text on viewports sized MD (medium) or wider.
-End aligned text on viewports sized LG (large) or wider.
-End aligned text on viewports sized XL (x-large) or wider.
-End aligned text on viewports sized 2XL (2x-large) or wider.
-End aligned text on viewports sized 3XL (3x-large) or wider.
+Center aligned text on all viewport sizes.
+End aligned text on all viewport sizes.
+ +End aligned text on viewports sized XS (x-small) or wider.
+End aligned text on viewports sized SM (small) or wider.
+End aligned text on viewports sized MD (medium) or wider.
+End aligned text on viewports sized LG (large) or wider.
+End aligned text on viewports sized XL (x-large) or wider.
+End aligned text on viewports sized 2XL (2x-large) or wider.
+End aligned text on viewports sized 3XL (3x-large) or wider.
{{< /example >}} {{< callout info >}}