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, `

` through `

`, are available. Each class sets `font-s

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 >}}
@@ -174,13 +170,13 @@ Since only [headings](#headings), [display headings](#display-headings) and `str | Regular text | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper | | --- | --- | --- | --- | | Body large | | | | -| Body medium | | | | +| Body medium (default) | | | | | Body small | | | | {{< /bs-table >}}
-## Lead +### Lead Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-text) body large. @@ -190,6 +186,19 @@ Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-te

{{< /example >}} +### Small + +Render a paragraph with a small `font-size` by adding `.small` or use ``. It uses [Regular text](#regular-text) body small. + +{{< example >}} +

+ 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. - `` represents element that are no longer relevant or no longer accurate. - `` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. @@ -219,7 +228,7 @@ If you want to style your text, you should use the following classes instead: - `.text-decoration-underline` will apply the same styles as ``. - `.text-decoration-line-through` will apply the same styles as ``. -While not shown above, feel free to use `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance. +While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance, while `` is mostly for voice, technical terms, etc. ## Text utilities @@ -229,16 +238,13 @@ Change text alignment, transform, style, weight, line-height, decoration -## Lists + ## CSS diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index 965b4491dd..ea19010caa 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -11,6 +11,8 @@ toc: true ## v0.0.4 +### Contents + ### Layout - New Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints `2xs`, `xs`, `sm`, `md`, `xl`, `2xl`, and `3xl`. diff --git a/site/content/docs/0.0/utilities/text.md b/site/content/docs/0.0/utilities/text.md index 7e251bccf7..822e64a485 100644 --- a/site/content/docs/0.0/utilities/text.md +++ b/site/content/docs/0.0/utilities/text.md @@ -12,18 +12,23 @@ toc: true Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. -{{< example >}} +// TODO LM +{{< callout info >}} +Note that you may use `.ms-{breakpoint}-auto` (respectively `.mx-{breakpoint}-auto`) in addition of `.text-{breakpoint}-end` (respectively `.text-{breakpoint}-center`) in some cases. +{{< /callout >}} + +{{< example class="fs-bm" >}}

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 >}}