diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 909d60a984..efee3ccae5 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./packages/orange/dist/css/ouds-web-bootstrap.css", - "maxSize": "83.0 kB" + "maxSize": "83.25 kB" }, { "path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css", - "maxSize": "79.5 kB" + "maxSize": "79.75 kB" }, { "path": "./packages/orange/dist/css/ouds-web-grid.css", @@ -38,7 +38,7 @@ }, { "path": "./packages/orange/dist/css/ouds-web.min.css", - "maxSize": "62.5 kB" + "maxSize": "62.75 kB" }, { "path": "./dist/js/ouds-web.bundle.js", diff --git a/scss/_maps.scss b/scss/_maps.scss index 79261faf4f..026211b0b9 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -123,6 +123,10 @@ $ouds-elevations: ( // scss-docs-start ouds-maps-font $ouds-font-sizes: ( + lxl: "/label-xlarge", + ll: "/label-large", + lm: "/label-medium", + ls: "/label-small", cm: "/code-medium", bs: "/body-small", bm: "/body-medium", diff --git a/scss/mixins/_fonts.scss b/scss/mixins/_fonts.scss index 4285173cc4..d2f09aeb76 100644 --- a/scss/mixins/_fonts.scss +++ b/scss/mixins/_fonts.scss @@ -1,9 +1,11 @@ // scss-docs-start ouds-mixin-font // $font-size-ref can be one of: "code-medium", "label-small", "label-medium", "label-large", "label-xlarge", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large", "heading-xlarge", "display-small", "display-medium", "display-large" -@mixin get-font-size($font-size-ref: "display-large") { - @if str-slice($font-size-ref, 1, 5) != "label" and str-slice($font-size-ref, 1, 4) != "code" { - max-width: var(--#{$prefix}font-max-width-#{$font-size-ref}); +@mixin get-font-size($font-size-ref: "display-large", $label-with-max-width: false) { + @if str-slice($font-size-ref, 1, 4) != "code" { + @if str-slice($font-size-ref, 1, 5) != "label" or $label-with-max-width == true { + max-width: var(--#{$prefix}font-max-width-#{$font-size-ref}); + } } font-size: var(--#{$prefix}font-size-#{$font-size-ref}); line-height: var(--#{$prefix}font-line-height-#{$font-size-ref}); diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index c4c583a7f0..e3d87be8bc 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -45,7 +45,7 @@ // OUDS mod @if type-of($value) == "string" and str-slice($value, 1, 1) == "/" { .#{$bkpt-prefix + $property-class + $infix + $property-class-modifier} { - @include get-font-size(#{str-slice($value, 2)}); + @include get-font-size(#{str-slice($value, 2)}, true); } // End mod } @else { diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss index 451968e82a..1e95e05f81 100644 --- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss @@ -3510,6 +3510,42 @@ $utilities: (); /* rtl:end:remove */ + .fs-lxl { + max-width: var(--bs-font-max-width-label-xlarge); + font-size: var(--bs-font-size-label-xlarge); + line-height: var(--bs-font-line-height-label-xlarge); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-xlarge); + } + + .fs-ll { + max-width: var(--bs-font-max-width-label-large); + font-size: var(--bs-font-size-label-large); + line-height: var(--bs-font-line-height-label-large); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-large); + } + + .fs-lm { + max-width: var(--bs-font-max-width-label-medium); + font-size: var(--bs-font-size-label-medium); + line-height: var(--bs-font-line-height-label-medium); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-medium); + } + + .fs-ls { + max-width: var(--bs-font-max-width-label-small); + font-size: var(--bs-font-size-label-small); + line-height: var(--bs-font-line-height-label-small); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-small); + } + .fs-cm { font-size: var(--bs-font-size-code-medium); line-height: var(--bs-font-line-height-code-medium); @@ -15434,6 +15470,42 @@ $utilities: (); /* rtl:end:remove */ + .fs-lxl { + max-width: var(--bs-font-max-width-label-xlarge); + font-size: var(--bs-font-size-label-xlarge); + line-height: var(--bs-font-line-height-label-xlarge); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-xlarge); + } + + .fs-ll { + max-width: var(--bs-font-max-width-label-large); + font-size: var(--bs-font-size-label-large); + line-height: var(--bs-font-line-height-label-large); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-large); + } + + .fs-lm { + max-width: var(--bs-font-max-width-label-medium); + font-size: var(--bs-font-size-label-medium); + line-height: var(--bs-font-line-height-label-medium); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-medium); + } + + .fs-ls { + max-width: var(--bs-font-max-width-label-small); + font-size: var(--bs-font-size-label-small); + line-height: var(--bs-font-line-height-label-small); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-small); + } + .fs-cm { font-size: var(--bs-font-size-code-medium); line-height: var(--bs-font-line-height-code-medium); diff --git a/site/src/content/docs/foundation/typography.mdx b/site/src/content/docs/foundation/typography.mdx index 05c8953d23..0c6e881587 100644 --- a/site/src/content/docs/foundation/typography.mdx +++ b/site/src/content/docs/foundation/typography.mdx @@ -30,6 +30,13 @@ export const textLevel = [ "body-small" ] +export const labelLevel = [ + "label-xlarge", + "label-large", + "label-medium", + "label-small" +] + export const screenSize = [ "mobile", "tablet", @@ -288,17 +295,24 @@ Since only [headings](#headings), [display headings](#display-headings) and `str { - textLevel.map((level) => ( + [ ...textLevel, ...labelLevel].map((level) => ( {level === 'body-large' && (<>Body large ({'.lead'}))} {level === 'body-medium' && (<>Body medium (default {'

'}))} {level === 'body-small' && (<>Body small ({'.small'} or {''}))} + {level === 'label-xlarge' && (<>Label xlarge ({'.fs-lxl'}))} + {level === 'label-large' && (<>Label large ({'.fs-ll'}))} + {level === 'label-medium' && (<>Label medium ({'.fs-lm'}))} + {level === 'label-small' && (<>Label small ({'.fs-ls'}))} { screenSize.map((size) => ( - {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)}) + {!level.includes('label-') + && (<>{(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)}))} + {level.includes('label-') + && (<>{(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}`)}))} )) } @@ -323,20 +337,24 @@ Since only [headings](#headings), [display headings](#display-headings) and `str { - textLevel.map((level) => ( + [ ...textLevel, ...labelLevel].map((level) => ( {level === 'body-large' && (<>Body large ({'.lead'}))} {level === 'body-medium' && (<>Body medium (default {'

'}))} {level === 'body-small' && (<>Body small ({'.small'} or {''}))} + {level === 'label-xlarge' && (<>Label xlarge ({'.fs-lxl'}))} + {level === 'label-large' && (<>Label large ({'.fs-ll'}))} + {level === 'label-medium' && (<>Label medium ({'.fs-lm'}))} + {level === 'label-small' && (<>Label small ({'.fs-ls'}))} { screenSize.map((size) => (

@@ -487,21 +505,3 @@ Align terms and descriptions horizontally by using our grid system’s predefine `} /> - -## Text style for custom components - -OUDS Web introduces a specific text style for components named `label` with 4 levels: `small`, `medium`, `large` and `xlarge`, it sets `font-size`, `line-height` and `letter-spacing` css properties. We use this style for many components included in OUDS Web, if you need to develop a custom component for your project you can use this font by calling the Scss mixin `get-font-size()`. Following is a call example for this mixin. - - - -This will result in the following CSS. - - diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx index 3fe66cae7f..80cee40331 100644 --- a/site/src/content/docs/getting-started/migration.mdx +++ b/site/src/content/docs/getting-started/migration.mdx @@ -64,6 +64,10 @@ toc: true - Warning `.shadow-default` has been deprecated in favor of `.shadow-elevated`. It will be removed in v1.5.0. Read more in our [shadow page]([[docsref:/utilities/shadow]]). +#### Text + +New Labels have been added to font size text utilities : `.fs-lxl`, `.fs-ll`, `.fs-lm`, `.fs-ls` are now available. Read more in our [typography page]([[docsref:foundation/typography#regular-texts]]). + ### CSS and Sass variables -
diff --git a/site/src/content/docs/utilities/text.mdx b/site/src/content/docs/utilities/text.mdx index c992ab7011..1eb52fdd60 100644 --- a/site/src/content/docs/utilities/text.mdx +++ b/site/src/content/docs/utilities/text.mdx @@ -19,7 +19,11 @@ export const fontSize = [ "body-large", "body-medium", "body-small", - "code-medium" + "code-medium", + "label-xlarge", + "label-large", + "label-medium", + "label-small" ] export const screenSize = [ @@ -140,13 +144,17 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa {level === 'body-medium' && (<>Body medium ({'.fs-bm'}))} {level === 'body-small' && (<>Body small ({'.fs-bs'}))} {level === 'code-medium' && (<>Code medium ({'.fs-cm'}))} + {level === 'label-xlarge' && (<>Label xlarge ({'.fs-lxl'}))} + {level === 'label-large' && (<>Label large ({'.fs-ll'}))} + {level === 'label-medium' && (<>Label medium ({'.fs-lm'}))} + {level === 'label-small' && (<>Label small ({'.fs-ls'}))} { screenSize.map((size) => ( - {level !== 'code-medium' + {(level !== 'code-medium' && !level.includes('label-')) && (<>{(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)}))} - {level === 'code-medium' + {(level === 'code-medium' || level.includes('label-')) && (<>{(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}`)}))} )) @@ -188,11 +196,15 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa {level === 'body-medium' && (<>Body medium ({'.fs-bm'}))} {level === 'body-small' && (<>Body small ({'.fs-bs'}))} {level === 'code-medium' && (<>Code medium ({'.fs-cm'}))} + {level === 'label-xlarge' && (<>Label xlarge ({'.fs-lxl'}))} + {level === 'label-large' && (<>Label large ({'.fs-ll'}))} + {level === 'label-medium' && (<>Label medium ({'.fs-lm'}))} + {level === 'label-small' && (<>Label small ({'.fs-ls'}))} { screenSize.map((size) => ( - {level !== 'code-medium' + {(level !== 'code-medium' && !level.includes('label-')) && (
  • font-size: {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem
    • @@ -201,7 +213,16 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa
  • max-width: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem
)} - {level === 'code-medium' + {(level.includes('label-')) + && ( +
    +
  • font-size: {(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem
    • +
  • line-height: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}`).slice(0, -2))) * 10000) / 10000}
    • +
  • letter-spacing: {(getTokenValue(`$ouds-font-letter-spacing-${level}`).slice(0, -2)) / 16}rem
    • +
  • max-width: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem
    • +
+ )} + {(level === 'code-medium') && (
  • font-size: {(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem
    • @@ -230,7 +251,11 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa

    .fs-bl text

    .fs-bm text

    .fs-bs text

    -

    .fs-cm.font-monospace text

    `} /> +

    .fs-cm.font-monospace text

    +

    .fs-lxl text

    +

    .fs-ll text

    +

    .fs-lm text

    +

    .fs-ls text

    `} /> Customize your available `font-size`s by modifying the `$ouds-font-sizes` Sass map.