diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index fb0eee64dd..ecdec228c6 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./dist/css/ouds-web-bootstrap.css", - "maxSize": "67.25 kB" + "maxSize": "69 kB" }, { "path": "./dist/css/ouds-web-bootstrap.min.css", - "maxSize": "63.75 kB" + "maxSize": "65.5 kB" }, { "path": "./dist/css/ouds-web-grid.css", @@ -34,11 +34,11 @@ }, { "path": "./dist/css/ouds-web.css", - "maxSize": "58.5 kB" + "maxSize": "60.0 kB" }, { "path": "./dist/css/ouds-web.min.css", - "maxSize": "55.0 kB" + "maxSize": "56.25 kB" }, { "path": "./dist/js/ouds-web.bundle.js", diff --git a/scss/_tags.scss b/scss/_tags.scss index 9b9be4c52e..1df757cf73 100644 --- a/scss/_tags.scss +++ b/scss/_tags.scss @@ -1,141 +1,221 @@ -// stylelint-disable function-disallowed-list - .tag { - // scss-docs-start tag-css-vars - --#{$prefix}tag-color: #{$tag-color}; - --#{$prefix}tag-bg: #{$tag-bg}; - --#{$prefix}tag-gap: #{$tag-gap}; - --#{$prefix}tag-padding-x: #{$tag-padding-x}; - --#{$prefix}tag-padding-y: #{$tag-padding-y}; - @include rfs($tag-font-size, --#{$prefix}tag-font-size); - --#{$prefix}tag-font-shift: #{$tag-font-shift}; - --#{$prefix}tag-font-weight: #{$tag-font-weight}; - --#{$prefix}tag-icon-size: #{$tag-icon-size}; - --#{$prefix}tag-icon-margin-start: #{$tag-icon-margin-start}; - --#{$prefix}tag-close-size: #{add(var(--#{$prefix}tag-font-size), .375rem)}; - --#{$prefix}tag-close-margin-end: #{$tag-close-margin-end}; - --#{$prefix}tag-close-margin-start: #{$tag-close-margin-start}; - --#{$prefix}tag-border-width: #{$tag-border-width}; - --#{$prefix}tag-border-radius: #{$tag-border-radius}; - --#{$prefix}tag-border-color: #{$tag-border-color}; - --#{$prefix}tag-active-color: #{$tag-active-color}; - --#{$prefix}tag-active-decoration-color: #{$tag-active-decoration-color}; - --#{$prefix}tag-disabled-color: #{$tag-disabled-color}; - // scss-docs-end tag-css-vars + --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; + --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; + --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; + --#{$prefix}tag-border-width: 0px; + --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; + --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; + --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; + --#{$prefix}tag-padding-asset: #{$ouds-tag-space-padding-inline-asset-default}; + --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; + --#{$prefix}tag-size-asset: #{px-to-rem($ouds-tag-size-asset-default)}; + --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; + --#{$prefix}tag-asset-color: currentcolor; + --#{$prefix}tag-loading-dasharray: 92; + --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; + --#{$prefix}tag-positive-icon: url("data:image/svg+xml,"); + --#{$prefix}tag-info-icon: url("data:image/svg+xml,"); + --#{$prefix}tag-warning-icon: url("data:image/svg+xml,"); + --#{$prefix}tag-negative-icon: url("data:image/svg+xml,"); + position: relative; display: inline-flex; - gap: var(--#{$prefix}tag-gap); + gap: var(--#{$prefix}tag-asset-gap); align-items: center; - padding: subtract(var(--#{$prefix}tag-padding-y), calc(var(--#{$prefix}tag-font-shift) * .5)) var(--#{$prefix}tag-padding-x) add(var(--#{$prefix}tag-padding-y), calc(var(--#{$prefix}tag-font-shift) * .5)); - @include font-size(var(--#{$prefix}tag-font-size)); - font-weight: var(--#{$prefix}tag-font-weight); - line-height: add(var(--#{$prefix}tag-font-size), .125rem); + justify-content: center; + min-width: var(--#{$prefix}tag-min-width); + min-height: var(--#{$prefix}tag-min-height); + padding: calc(var(--#{$prefix}tag-padding-y) - var(--#{$prefix}tag-border-width)) calc(var(--#{$prefix}tag-padding-end) - var(--#{$prefix}tag-border-width)) calc(var(--#{$prefix}tag-padding-y) - var(--#{$prefix}tag-border-width)) calc(var(--#{$prefix}tag-padding-start) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + margin: 0; + font-weight: 700; color: var(--#{$prefix}tag-color); - background-color: var(--#{$prefix}tag-bg); - border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); - @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); - - img, - svg { - width: var(--#{$prefix}tag-icon-size); - min-width: var(--#{$prefix}tag-icon-size); // Here to avoid weird behavior on wrap - height: var(--#{$prefix}tag-icon-size); - margin: add(calc(-.5 * var(--#{$prefix}tag-icon-size)), var(--#{$prefix}tag-font-shift)) 0 calc(-.5 * var(--#{$prefix}tag-icon-size)) var(--#{$prefix}tag-icon-margin-start); - } - - .close { - position: relative; - width: var(--#{$prefix}tag-close-size); - min-width: var(--#{$prefix}tag-close-size); // Here to avoid weird behavior on wrap - height: var(--#{$prefix}tag-close-size); - padding: 0; // Force padding on button to have a circle on iOS - Safari and Chrome - margin: add(calc(-.5 * var(--#{$prefix}tag-close-size)), var(--#{$prefix}tag-font-shift)) var(--#{$prefix}tag-close-margin-end) calc(-.5 * var(--#{$prefix}tag-close-size)) var(--#{$prefix}tag-close-margin-start); - color: inherit; - background-color: transparent; - border: 0; - @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); - - &::before { - position: absolute; - top: calc(-1 * var(--#{$prefix}tag-padding-y)); - right: calc(-1 * var(--#{$prefix}tag-padding-y)); - bottom: calc(-1 * var(--#{$prefix}tag-padding-y)); - left: calc(-1 * var(--#{$prefix}tag-padding-y)); - content: ""; - @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); + white-space: nowrap; + background-color: var(--#{$prefix}tag-background-color); + @include get-font-size("label-medium"); + @include border-radius($ouds-tag-border-radius); + + &.text-bg-status-accent-muted { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-accent-emphasized}; + } + + &.text-bg-status-positive-muted { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-positive-emphasized}; + } + + &.text-bg-status-info-muted { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-info-emphasized}; + } + + &.text-bg-status-warning-muted { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-warning-emphasized}; + } + + &.text-bg-status-negative-muted { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-negative-emphasized}; + } + + + .tag-icon, + .tag-status-icon, + .tag-bullet, + .tag-loader { + display: flex; + flex-shrink: 0; + align-items: center; + width: var(--#{$prefix}tag-size-asset); + height: var(--#{$prefix}tag-size-asset); + padding: #{$ouds-tag-space-inset-icon-default}; + overflow: hidden; + line-height: 1; + color: var(--#{$prefix}tag-asset-color); + } + + .tag-status-icon { + vertical-align: middle; + background-color: var(--#{$prefix}tag-asset-color); + background-size: contain; + } + + .tag-bullet { + width: calc(var(--#{$prefix}tag-size-asset) - (2 * #{$ouds-tag-space-inset-bullet-default})); // stylelint-disable-line function-disallowed-list + height: calc(var(--#{$prefix}tag-size-asset) - (2 * #{$ouds-tag-space-inset-bullet-default})); // stylelint-disable-line function-disallowed-list + padding: 0; + margin: #{$ouds-tag-space-inset-bullet-default}; + background-color: var(--#{$prefix}tag-asset-color); + @include border-radius(#{$ouds-border-radius-pill}); + } + + &.text-bg-status-positive-emphasized, + &.text-bg-status-positive-muted { + .tag-status-icon { + mask-image: escape-svg(var(--#{$prefix}tag-positive-icon)); } + } - &::after { - display: block; - min-width: subtract(var(--#{$prefix}tag-close-size), .625rem); - min-height: subtract(var(--#{$prefix}tag-close-size), .625rem); - content: ""; - background-color: currentcolor; - mask: escape-svg(var(--#{$prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem); + &.text-bg-status-info-emphasized, + &.text-bg-status-info-muted { + .tag-status-icon { + mask-image: escape-svg(var(--#{$prefix}tag-info-icon)); } + } - &:hover, - &:active { - color: var(--#{$prefix}tag-active-color); - background-color: var(--#{$prefix}tag-active-decoration-color); + &.text-bg-status-warning-emphasized, + &.text-bg-status-warning-muted { + .tag-status-icon { + mask-image: escape-svg(var(--#{$prefix}tag-warning-icon)); } + } - &[disabled] { - pointer-events: none; + &.text-bg-status-negative-emphasized, + &.text-bg-status-negative-muted { + .tag-status-icon { + mask-image: escape-svg(var(--#{$prefix}tag-negative-icon)); } } - .btn-check:disabled + &, - .btn-check[disabled] + &, - &[disabled], - &.disabled { - color: var(--#{$prefix}tag-disabled-color); - pointer-events: none; - border-color: var(--#{$prefix}tag-disabled-color); + &:not(.loading) .tag-loader { + display: none; } - .btn-check:checked + & { - color: var(--#{$prefix}tag-active-color); - background-color: var(--#{$prefix}tag-active-decoration-color); - border-color: var(--#{$prefix}tag-active-decoration-color); + &.loading:has(.tag-loader) { + color: #{$ouds-color-content-default} if($enable-important-utilities, !important, null); + background-color: #{$ouds-color-surface-status-neutral-muted} if($enable-important-utilities, !important, null); + } + + .tag-loader { // TODO partially copied from button loader, should be factorized as much as possible + --#{$prefix}tag-asset-color: currentcolor; + display: block; + margin: 0; + font-size: var(--#{$prefix}tag-size-asset); + transform: rotate(-90deg); + + > .tag-loader-inner { + fill: none; + stroke: var(--#{$prefix}tag-asset-color); + stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); + stroke-width: 8; + transform-origin: center; + animation: var(--#{$prefix}tag-loading-animation); + } + } + + .disabled &, + &.disabled { + color: #{$ouds-color-content-on-action-disabled} if($enable-important-utilities, !important, null); + background-color: #{$ouds-color-action-disabled} if($enable-important-utilities, !important, null); } } -// stylelint-disable selector-no-qualifying-type -a.tag, -button.tag, -label.tag { - color: var(--#{$prefix}tag-color); - text-decoration: none; - cursor: pointer; +.tag-sm { + --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; + --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; + --#{$prefix}tag-padding-start-asset: #{$ouds-tag-space-padding-inline-asset-small}; + --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; + --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small}; + --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small}; + --#{$prefix}tag-size-asset: #{px-to-rem($ouds-tag-size-asset-small)}; + --#{$prefix}tag-bullet-padding: #{$ouds-tag-space-inset-bullet-small}; + --#{$prefix}tag-icon-padding: #{$ouds-tag-space-inset-icon-small}; + --#{$prefix}tag-loader-padding: #{$ouds-tag-space-inset-loader-small}; + --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-small}; + @include get-font-size("label-small"); +} + +.tag-input { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; + --#{$prefix}tag-padding-end: var(--#{$prefix}tag-padding-asset); + + margin: calc(($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list + border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); + + &::before { + position: absolute; + top: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + right: calc(-1 * var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + bottom: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + left: calc(-1 * var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + content: ""; + } + + &::after { + width: var(--#{$prefix}tag-size-asset); + height: var(--#{$prefix}tag-size-asset); + content: ""; + background-color: currentcolor; + mask: url("data:image/svg+xml,"); + } &:hover { - border-color: var(--#{$prefix}tag-active-decoration-color); + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; } - &.active, &:active { - color: var(--#{$prefix}tag-active-color); - background-color: var(--#{$prefix}tag-active-decoration-color); - border-color: var(--#{$prefix}tag-active-decoration-color); - - &[disabled], - &.disabled { - background-color: var(--#{$prefix}tag-disabled-color); - border-color: var(--#{$prefix}tag-disabled-color); - } + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; } -} -// stylelint-enable selector-no-qualifying-type -.tag-sm { - // scss-docs-start tag-sm-css-vars - --#{$prefix}tag-padding-x: #{$tag-padding-x-sm}; - --#{$prefix}tag-padding-y: #{$tag-padding-y-sm}; - --#{$prefix}tag-font-size: #{$tag-font-size-sm}; - --#{$prefix}tag-icon-size: #{$tag-icon-size-sm}; - --#{$prefix}tag-icon-margin-start: #{$tag-icon-margin-start-sm}; - --#{$prefix}tag-close-margin-end: #{$tag-close-margin-end-sm}; - --#{$prefix}tag-close-margin-start: #{$tag-close-margin-start-sm}; - // scss-docs-end tag-sm-css-vars + &:focus-visible { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + } + + &:disabled, + &[aria-disabled="true"] { + --#{$prefix}tag-color: #{$ouds-color-action-disabled}; + --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled}; + --#{$prefix}tag-border-color: #{$ouds-color-action-disabled}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; + + pointer-events: none; + } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 1adf1d82e1..d7ea32eb03 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2244,44 +2244,6 @@ $footer-gap: $spacer * .75 !default; $footer-gap-xl: $spacer * 1.7 !default; // scss-docs-end footer - -// Tags - -// scss-docs-start tag-variables -$tag-color: var(--#{$prefix}body-color) !default; -$tag-bg: var(--#{$prefix}body-bg) !default; - -$tag-gap: map-get($spacers, 1) !default; -$tag-font-shift: $spacer * .1 !default; -$tag-font-weight: $font-weight-bold !default; -$tag-border-width: var(--#{$prefix}border-width) !default; -$tag-border-radius: var(--#{$prefix}border-radius-pill) !default; - -$tag-padding-x: $spacer * .65 !default; -$tag-padding-y: $spacer * .45 !default; -$tag-icon-size: $spacer * 1.2 !default; -$tag-icon-margin-start: -$spacer * .35 !default; -$tag-close-margin-end: -$spacer * .3 !default; -$tag-close-margin-start: $spacer * .2 !default; -$tag-font-size: $font-size-base !default; - -$tag-active-color: var(--#{$prefix}highlight-color) !default; -$tag-disabled-color: var(--#{$prefix}color-content-disabled) !default; -$tag-border-color: var(--#{$prefix}color-border-default) !default; -$tag-active-decoration-color: var(--#{$prefix}highlight-bg) !default; -// scss-docs-end tag-variables - -// scss-docs-start tag-sm-variables -$tag-padding-x-sm: $spacer * .4 !default; -$tag-padding-y-sm: $spacer * .25 !default; -$tag-icon-size-sm: $spacer !default; -$tag-icon-margin-start-sm: -$spacer * .1 !default; -$tag-close-margin-end-sm: -$spacer * .25 !default; -$tag-close-margin-start-sm: 0 !default; -$tag-font-size-sm: $font-size-sm !default; -// scss-docs-end tag-sm-variables - - // Local navigation // scss-docs-start local-nav-variables diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 5a8ecd38bf..50f58887f8 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -156,7 +156,6 @@ - title: Sticker draft: true - title: Tags - draft: true - title: Title bars draft: true - title: Toasts diff --git a/site/src/components/shortcodes/BootstrapCompatibility.astro b/site/src/components/shortcodes/BootstrapCompatibility.astro index 02bb7b6b03..cadf719dd7 100644 --- a/site/src/components/shortcodes/BootstrapCompatibility.astro +++ b/site/src/components/shortcodes/BootstrapCompatibility.astro @@ -5,8 +5,8 @@
Bootstrap - - $enable-bootstrap-compatibility: true + + $enable-bootstrap-compatibility: true diff --git a/site/src/components/shortcodes/Code.astro b/site/src/components/shortcodes/Code.astro index 49d375bdd7..0b45b10349 100644 --- a/site/src/components/shortcodes/Code.astro +++ b/site/src/components/shortcodes/Code.astro @@ -137,7 +137,7 @@ if (filePath && fileMatch && codeToDisplay) {
{Astro.slots.has('bar') ? : null} -
+
{ codeToDisplay && lang ? ( diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro index 4b9128d283..b262350b1e 100644 --- a/site/src/components/shortcodes/Example.astro +++ b/site/src/components/shortcodes/Example.astro @@ -36,6 +36,11 @@ interface Props { * @default true */ showPreview?: boolean + /** + * Defines if the toolbar with Stackblitz and copy buttons should be visible or not. + * @default true + */ + showToolbar?: boolean } const { @@ -45,7 +50,8 @@ const { id, lang = 'html', showMarkup = true, - showPreview = true + showPreview = true, + showToolbar = true } = Astro.props let markup = Array.isArray(code) ? code.join('\n') : code @@ -65,7 +71,7 @@ const simplifiedMarkup = markup
{ showPreview && ( -
+
) @@ -75,7 +81,7 @@ const simplifiedMarkup = markup showMarkup && ( <> - {showPreview && ( + {showPreview && showToolbar && (
{lang} diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 7438a82ea9..3eb43055a7 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -1,9 +1,465 @@ --- title: Tags -description: Use tags to convey information, apply filters or display a selection of items. +description: A tag is a small element that shows short info like a label, keyword, or category. It helps users quickly find, group, or understand content. aliases: - "/docs/components/tags/" + - "/docs/components/tag/" + - "/docs/[[config:docs_version]]/components/tag/" toc: true --- - +import { getConfig } from '@libs/config' + + + You can find here the [OUDS tag design guidelines](https://unified-design-system.orange.com/472794e18/p/7565ce-tag). + + +## Overview + +### Component types + +
    +
  • +
    + +
    + Tag is used in an informative way, to show short info like a label, keyword, or category. +
    +
    +
    • +
  • +
    + + +
    + Input tag is interactive and can take all the usual states: enabled, hover, pressed, disabled or focused. +
    +
    +
    • +
+ +For both types of tag, OUDS Web has a basic `.tag` class that sets up default styles. + +Tag

` +} /> + +Input tag` +} /> + + +### Accessibility + +For accessibility reasons, a tag, like any other informative element, must either be a semantic element itself or be wrapped in an appropriate semantic HTML element. In the examples below, the tags appear as `
  • ` elements or inside of `

    ` and `

    ` elements. You may use any other semantic element that best fits the context. + +Visually impaired and blind users will lack the visual context that permits to understand the tags purpose on the page if tags' labels are not self-explanatory. Thus it's mandatory to add textual information to explain what it represents, especially if the tags are in a list. + +*For tags lists: add a semantically informative text to describe the tags' list purpose* if possible, otherwise an `aria-label` on the containing `ul` must be added. + +Several examples are provided below but they will need to be adapted for actual use cases. + +## Tag + +### Overview + + +Tags lists must be wrapped in a semantic container (usually a `

      ` or `
        `). *If possible, display a semantically informative text to describe the tags' list purpose*, otherwise an `aria-label` must be added to the container to explain the function of the tags, [more information here](#accessibility). + + + +
      1. Roaming
        2. +
      2. 5G Ready
        3. +
      3. 4G
        4. +
    ` +} /> + +OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tag variants. Colors are classified in two hierarchies, emphasized (for key tags) or muted (for secondary tags), and each color has its own semantic purpose. Please follow the tag design guidelines to choose the right color for the right usage. + + +Keep in mind that color should not be the only way to convey information. If the color has strong meaning, reflect it in the tag's text and if necessary add additional text with the class `.visually-hidden`. + + + +
  • Neutral
    • +
  • Accent
    • +
  • Positive
    • +
  • Info
    • +
  • Warning
    • +
  • Negative
    • + +
      +
    • Neutral
      • +
    • Accent
      • +
    • Positive
      • +
    • Info
      • +
    • Warning
      • +
    • Negative
      • +
    `} /> + +### Variants + +#### Squared + +To display tags with squared corners, add the `.rounded-none` utility class to the tag. + + +
  • Accent muted
    • +
  • Accent emphasized
    • + `} /> + +#### Bullet + +To add a colored bullet in the tag, add ``. + + +
  • + + Neutral +
    • +
  • + + Accent +
    • +
  • + + Positive +
    • +
  • + + Info +
    • +
  • + + Warning +
    • +
  • + + Negative +
    • + +
      +
    • + + Neutral +
      • +
    • + + Accent +
      • +
    • + + Positive +
      • +
    • + + Info +
      • +
    • + + Warning +
      • +
    • + + Negative +
      • +
    `} /> + + + ... +
  • + + Neutral muted +
    • + ... +
  • + + Neutral emphasized +
    • + `} /> + +#### Tag status + +##### Functional + +Status icons are predefined in SCSS for positive, info, warning and negative functional statuses. To display a status icon, just add `.tag-status-icon` inside the tag, the icon will change depending on the text utility used. + + +If the functional meaning of the text is not sufficiently clear, add additional text with the `.visually-hidden` class to ensure accessibility for all users. + + + +
  • + + Activated +
    • +
  • + + Coming soon +
    • +
  • + + Under maintenance +
    • +
  • + + Error +
    • + +
      +
    • + + + Tested +
      • +
    • + + + Manually tested +
      • +
    • + + + Not tested +
      • +
    • + + + Tested +
      • +
    `} /> + +In case you need to use a different icon than the predefined ones, you can configure your own icons by overriding the custom properties (CSS variables) `--bs-tag-positive-icon`, `--bs-tag-info-icon` `--bs-tag-warning-icon` and `--bs-tag-error-icon`. + +##### Non-functional + + + +To display a colored icon, add the icon inside the tag, with a `.tag-icon` class. + + +Since icons in tags are always next to some text, they are purely decorative and should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our examples. + + + +
  • + + Neutral +
    • +
  • + + Accent +
    • + +
      +
    • + + Neutral +
      • +
    • + + Accent +
      • +
    +

    + + Settings +

    `} /> + +### States + +#### Disabled + +The disabled tag should only be used in a disabled context, inside an interactive element that has been disabled, such as a card. If the tag has been added a `.disabled` class, or is inside an element with a `.disabled` class it will look dimmed, whatever the text utility you used. + + +

    Disabled Some text

    +

    • +

    Disabled Some text

    +

    Disabled Some text

    `} /> + +#### Loading + +The loading state of a tag indicates that an action is currently processing or taking place. This state provides feedback to users, enhancing user experience. + +To make an animated loading state tag, you will add in your standard tag: +- An animated ``, with the class `.tag-loader`. +- A status message ``: the message must be updated regularly in order to be vocalized by screen readers. + +For example, before loading, your tag could be like this: + + + + + Label +

    `} /> + +When the loading starts, you will have to: + - Add the class `.loading` to the tag to provide the appropriate styles and animation. + - Remove the `.d-none` from the status message ``. + - Update regularly the status message `` containing the loading message. + +At the end of the loading, you should: + - Remove the class `.loading` to restore the tag’s look. + - Set a final status message in ``, indicating the loading has ended (so we don’t add again `.d-none` on this status message). + +You can see a similar live example with buttons with the full JavaScript code on our [loading buttons live example]([[docsref:/examples/loading-buttons/]]). + + + + + Label +

    `} /> + +### Sizes + +To display a small tag, add the class `.tag-sm` to the tag. + + +
  • Small neutral
    • +
  • + + Roaming +
    • +
  • + + 5G Ready +
    • +
  • + + + ... +
    • + `} /> + +### Layout + +A tag can be used near some text or some title (to show status or key details), or in a list (to indicate categories or keywords). If needed, you can use the [vertical alignment utilities]([[docsref:/utilities/vertical-align]]) to vertically center inline content. + + +
  • Roaming
    • +
  • 5G Ready
    • +
  • 4G
    • + +
      +
    • Roaming
      • +
    • 5G Ready
      • +
    +

    Title Coming soon

    +

    Title Coming soon

    +

    New Some text

    +

    New Some text

    `} /> + +Tags can be added side by side. They require horizontal and vertical spacing between each other. You can use [flexbox utilities]([[docsref:/utilities/spacing#gap]]) to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`) and the vertical space (default value is obtained thanks to `.row-gap-md`). + + +
  • Label 1
    • +
  • Label 2
    • +
  • Label 3
    • +
  • Label 4
    • +
  • Label 5
    • +
  • Label 6
    • + `} /> + +## Input tag + +### Overview + + + Please note that all the variants of tag above *must not* be applied on input tag. + + +Input tags are interactive and may be associated to an input field to be added dynamically. The input tag should be used on a ` + +
  • + +
    • +
  • + +
    • + `} /> + +### States + +#### Disabled + +To disable an input tag, just add the `disabled` attribute to the `.tag`. + + +
  • + +
    • +
  • + +
    • +
  • + +
    • + `} /> + +### Layout + +Input tags are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. + + +
    • +
    • +
    • +
    • +
    • +
    • + `} /> diff --git a/site/src/content/docs/migrations/migration-from-boosted.mdx b/site/src/content/docs/migrations/migration-from-boosted.mdx index a9a2e28009..c8216dda47 100644 --- a/site/src/content/docs/migrations/migration-from-boosted.mdx +++ b/site/src/content/docs/migrations/migration-from-boosted.mdx @@ -32,13 +32,13 @@ From now on, OUDS Web won’t embed Bootstrap elements that are not part of Oran ## Foundations -- Warning Orange color has been modified from `#f16e00` to `#f15e00`. It means that under certain circumstances, you might be able to use Orange and light gray items together. +- Warning Orange color has been modified from `#f16e00` to `#f15e00`. It means that under certain circumstances, you might be able to use Orange and light gray items together. -- New We provide two brand new themes that are root and root-inverted. They are complementary to `light` and `dark`. See more on our [color modes page]([[docsref:/customize/color-modes]]) +- New We provide two brand new themes that are root and root-inverted. They are complementary to `light` and `dark`. See more on our [color modes page]([[docsref:/customize/color-modes]]) -- Warning The root selector have been tweaked for more flexibility on JS frameworks. Please don’t hesitate to contact us if you find any issue with it. +- Warning The root selector have been tweaked for more flexibility on JS frameworks. Please don’t hesitate to contact us if you find any issue with it. -- Breaking The focus-visible polyfill has been removed. So you no longer need it on your side, and you should replace all the calls to `:focus[data-focus-visible-added]` by `:focus-visible`. +- Breaking The focus-visible polyfill has been removed. So you no longer need it on your side, and you should replace all the calls to `:focus[data-focus-visible-added]` by `:focus-visible`. ## Fonts @@ -53,21 +53,21 @@ Technically, it means that you can get rid of the following things: ### Typography -- New Body fonts’ sizes are now responsive and can change depending on the screen size. See [Typography]([[docsref:/content/typography]]) for more details. +- New Body fonts’ sizes are now responsive and can change depending on the screen size. See [Typography]([[docsref:/content/typography]]) for more details. -- New A `max-width` has been added on all font references for readability reasons. If you want to get rid of the `max-width`, please use our `.mw-none` width utility. +- New A `max-width` has been added on all font references for readability reasons. If you want to get rid of the `max-width`, please use our `.mw-none` width utility. -- New Selected text is now styled with a specific text `color` and `background-color`, making it easier to spot and to read. +- New Selected text is now styled with a specific text `color` and `background-color`, making it easier to spot and to read. -- Breaking Display headings classes `.display-{1|2|3|4|5|6}` have been removed and replaced by `.display-{small|medium|large}`. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Display headings classes `.display-{1|2|3|4|5|6}` have been removed and replaced by `.display-{small|medium|large}`. You can still have them using `$enable-bootstrap-compatibility`. -- Breaking Abbreviation class `.initialism` has been removed. +- Breaking Abbreviation class `.initialism` has been removed. -- Warning Default spacing values now use `px`s instead of `em`s for fixed component spacing, to keep as much space as possible for meaningful content on zoom. +- Warning Default spacing values now use `px`s instead of `em`s for fixed component spacing, to keep as much space as possible for meaningful content on zoom. ## Layout -- Breaking Responsive breakpoints have changed: +- Breaking Responsive breakpoints have changed: - `2xs` and `3xl` have been added. - `xxl` has been renamed to `2xl`. - The breakpoints values have changed. Please refer to the [breakpoints’ documentation]([[docsref:/layout/breakpoints]]). @@ -77,45 +77,45 @@ Technically, it means that you can get rid of the following things: All responsive classes, helpers, and utilities have been updated accordingly to match the new breakpoints. -- Info `.container` and `.container-{breakpoint}` have been removed from the default build but you can still have them using `$enable-bootstrap-compatibility`. -- Info `xxl` breakpoint and thus all related classes (like `.container-xxl`, `.col-xxl-*`) can still be available when `$enable-bootstrap-compatibility` is enabled. +- Info `.container` and `.container-{breakpoint}` have been removed from the default build but you can still have them using `$enable-bootstrap-compatibility`. +- Info `xxl` breakpoint and thus all related classes (like `.container-xxl`, `.col-xxl-*`) can still be available when `$enable-bootstrap-compatibility` is enabled. ## Components ### Badge -- Breaking `.badge` is now rounded by default. -- New `.badge-disabled` has been added. -- New `.badge-xs`, `.badge-sm`, `.badge-lg` have been added to size the badge. -- New `.badge-count` has been added to display a numerical value in the badge. +- Breaking `.badge` is now rounded by default. +- New `.badge-disabled` has been added. +- New `.badge-xs`, `.badge-sm`, `.badge-lg` have been added to size the badge. +- New `.badge-count` has been added to display a numerical value in the badge. ### Breadcrumb -- Breaking the last element of a Breadcrumb must now contain a `span` element to handle behavior on smaller viewport. +- Breaking the last element of a Breadcrumb must now contain a `span` element to handle behavior on smaller viewport. ### Bullet list -- New `.bullet-list`, `.bullet-list-default-color`, `.bullet-list-tick` and `.bullet-list-bare` classes have been added. -- Breaking `.bullet-list` is mandatory for a full Bullet list component as defined in OUDS. +- New `.bullet-list`, `.bullet-list-default-color`, `.bullet-list-tick` and `.bullet-list-bare` classes have been added. +- Breaking `.bullet-list` is mandatory for a full Bullet list component as defined in OUDS. ### Close button -- Warning `.btn-close-white` class has been removed as it was deprecated in Boosted v5.3.3. +- Warning `.btn-close-white` class has been removed as it was deprecated in Boosted v5.3.3. ### Buttons -- New `.btn-default`, `.btn-strong`, `.btn-minimal`, and `.btn-negative` have been added. -- New `.btn-on-colored-bg` has been added; it can be used with `.btn-default`, `.btn-strong` and `.btn-minimal` to get variants on colored backgrounds (neither primary, nor secondary, nor tertiary, nor emphasized backgrounds). -- Breaking `.btn-primary`, `.btn-secondary`, `.btn-success`, `.btn-danger`, `.btn-warning`, `.btn-info`, `.btn-light`, `.btn-dark` and `btn-dropdown` have been removed. You can still have them using `$enable-bootstrap-compatibility`. Here is the visual correspondence: +- New `.btn-default`, `.btn-strong`, `.btn-minimal`, and `.btn-negative` have been added. +- New `.btn-on-colored-bg` has been added; it can be used with `.btn-default`, `.btn-strong` and `.btn-minimal` to get variants on colored backgrounds (neither primary, nor secondary, nor tertiary, nor emphasized backgrounds). +- Breaking `.btn-primary`, `.btn-secondary`, `.btn-success`, `.btn-danger`, `.btn-warning`, `.btn-info`, `.btn-light`, `.btn-dark` and `btn-dropdown` have been removed. You can still have them using `$enable-bootstrap-compatibility`. Here is the visual correspondence: - `.btn-primary` and `.btn-dark` will look as `.btn-strong` - `.btn-secondary` and `.btn-success` will look as `.btn-default` - `.btn-danger` and `.btn-warning` will look as `.btn-negative` - `.btn-info` and `.btn-light` will look as `.btn-minimal` -- Breaking `.btn-no-outline` has been removed. You can use `.btn-minimal` instead. -- Breaking `.btn-social` and all its variants have been removed. -- Breaking `.btn-outline-*` have been removed. You can still have them using `$enable-bootstrap-compatibility`. They all look like `.btn-default`. -- Warning `.btn-sm` and `.btn-lg` have been removed. -- Breaking Loading buttons implementation has changed. You should now use the classes `.loading-indeterminate` and `.loading-determinate` and no more spinner borders. +- Breaking `.btn-no-outline` has been removed. You can use `.btn-minimal` instead. +- Breaking `.btn-social` and all its variants have been removed. +- Breaking `.btn-outline-*` have been removed. You can still have them using `$enable-bootstrap-compatibility`. They all look like `.btn-default`. +- Warning `.btn-sm` and `.btn-lg` have been removed. +- Breaking Loading buttons implementation has changed. You should now use the classes `.loading-indeterminate` and `.loading-determinate` and no more spinner borders.
    For example, if you used to write: @@ -142,7 +142,7 @@ You will have to make some extra Javascript to change the styles and update the
    -- Breaking Button plugin (button with a toggle behavior) has been removed. +- Breaking Button plugin (button with a toggle behavior) has been removed. ### Chips @@ -150,10 +150,14 @@ You will have to make some extra Javascript to change the styles and update the ### Links -- New New standalone link component has been added. Use `.link` class to get it. -- New Use `.link-sm` class to get small standalone link. -- New `.link-on-colored-bg` has been added; it can be used to get variants on colored backgrounds. -- Warning A `.link` class should be added to existing links with `.link-chevron` class to comply with the OUDS Web documentation and ensure future compatibility. +- New New standalone link component has been added. Use `.link` class to get it. +- New Use `.link-sm` class to get small standalone link. +- New `.link-on-colored-bg` has been added; it can be used to get variants on colored backgrounds. +- Warning A `.link` class should be added to existing links with `.link-chevron` class to comply with the OUDS Web documentation and ensure future compatibility. + +### Tags + +- Breaking Tag has changed a lot in its meaning and usages. The Informative tag has changed to be the basic Tag. The Filter tag has changed to the Filter chip. The Navigation tag has been removed. The Input tag has changed to the Tag input. Be careful, either the meaning or the markup changed, or both. ### Tag @@ -163,17 +167,17 @@ You will have to make some extra Javascript to change the styles and update the ### Checks & radios -- New `.control-item-assets-container`, `.control-item-text-container`, `.control-item-label`, `.control-item-indicator`, `.control-item-helper`, `.control-item-divider` and `.control-item-inverse` have been added. +- New `.control-item-assets-container`, `.control-item-text-container`, `.control-item-label`, `.control-item-indicator`, `.control-item-helper`, `.control-item-divider` and `.control-item-inverse` have been added. -- Breaking `.form-check`, `.form-check-input`, `.form-check-label`, `.form-check-inline`, `.form-check-reverse` and `.form-switch` have been removed. +- Breaking `.form-check`, `.form-check-input`, `.form-check-label`, `.form-check-inline`, `.form-check-reverse` and `.form-switch` have been removed. -- Warning `form-star-rating()` mixin has been removed as it was deprecated in Boosted v5.3.2. +- Warning `form-star-rating()` mixin has been removed as it was deprecated in Boosted v5.3.2. #### Checkbox -- New `.checkbox-item` and `.checkbox-standalone` have been added. +- New `.checkbox-item` and `.checkbox-standalone` have been added. -- Breaking Checkbox is a new component compared to Boosted’s Check, the DOM is therefore very different. +- Breaking Checkbox is a new component compared to Boosted’s Check, the DOM is therefore very different.
    For example, if you used to write: @@ -200,13 +204,13 @@ Now you should write: See [our new Checkbox page]([[docsref:/forms/checkbox]]) for more information.
    -- Warning Links in checkboxes’ labels are now forbidden (they won’t be interactive anyway). +- Warning Links in checkboxes’ labels are now forbidden (they won’t be interactive anyway). #### Radio button -- New `.radio-button-item`, `.radio-button-standalone`, `.radio-button-additional-label` and `.radio-button-item-outlined` have been added. +- New `.radio-button-item`, `.radio-button-standalone`, `.radio-button-additional-label` and `.radio-button-item-outlined` have been added. -- Breaking Radio button is a new component compared to Boosted’s radio, the DOM is therefore very different. +- Breaking Radio button is a new component compared to Boosted’s radio, the DOM is therefore very different.
    For example, if you used to write: @@ -233,13 +237,13 @@ Now you should write: See [our new Radio button page]([[docsref:/forms/radio-button]]) for more information.
    -- Warning Links in radio buttons’ labels are now forbidden (they won’t be interactive anyway). +- Warning Links in radio buttons’ labels are now forbidden (they won’t be interactive anyway). #### Switch -- New `.switch-item` and `.switch-standalone` have been added. +- New `.switch-item` and `.switch-standalone` have been added. -- Breaking Switch is a new component compared to Boosted’s Check, the DOM is therefore very different. +- Breaking Switch is a new component compared to Boosted’s Check, the DOM is therefore very different.
    For example, if you used to write: @@ -266,18 +270,18 @@ Now you should write: See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -- Warning Links in switches’ labels are now forbidden (they won’t be interactive anyway). +- Warning Links in switches’ labels are now forbidden (they won’t be interactive anyway). ## Helpers ### Color background -- Breaking Most color-background color helpers have been removed or changed. +- Breaking Most color-background color helpers have been removed or changed. -- New The new color-background color helpers are now available. Visit our [color-bg page]([[docsref:/helpers/color-background]]) to see more. +- New The new color-background color helpers are now available. Visit our [color-bg page]([[docsref:/helpers/color-background]]) to see more. -
    - Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context: + Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context: See more details about [`[data-bs-theme]`]([[docsref:/customize/color-modes]]). @@ -296,19 +300,19 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Colored links -- Breaking All colored links helpers are unstyled in OUDS Web. Classes still exist for Bootstrap compatibility. +- Breaking All colored links helpers are unstyled in OUDS Web. Classes still exist for Bootstrap compatibility. ### Divider -- New Horizontal or vertical rule helpers to create dividers. +- New Horizontal or vertical rule helpers to create dividers. ### Icon link -- Info `.icon-link` and `.link-chevron` are now documented in link component. See [icon link]([[docsref:/components/links#icon-link]]) and [link chevron]([[docsref:/components/links#link-chevron]]). +- Info `.icon-link` and `.link-chevron` are now documented in link component. See [icon link]([[docsref:/components/links#icon-link]]) and [link chevron]([[docsref:/components/links#link-chevron]]). ### Icon -- New Icons’ sizes helpers have been added to help choose the right icon size with a specific typography reference. If you need these helpers, and you are using a custom import stack for helpers, don’t forget to add the needed file `helpers/_icon.scss`: +- New Icons’ sizes helpers have been added to help choose the right icon size with a specific typography reference. If you need these helpers, and you are using a custom import stack for helpers, don’t forget to add the needed file `helpers/_icon.scss`: - Responsive icons’ sizes in headings: - `.h{size}-short-icon`, `.h{size}-medium-icon`, `.h{size}-tall-icon`, where `h` stands for heading and size is one of `s` for small, `m` for medium, `l` for large, or `xl` for x-large - `.b{size}-short-icon`, `.b{size}-medium-icon`, , `.h{size}-tall-icon`, where `b` stands for body and size is one of `m` for medium, or `l` for large @@ -317,26 +321,26 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Position -- Breaking Responsive sticky helpers `.sticky-xxl-{top|bottom}` have been removed and replaced by their equivalent `.sticky-2xl-{top|bottom}`. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Responsive sticky helpers `.sticky-xxl-{top|bottom}` have been removed and replaced by their equivalent `.sticky-2xl-{top|bottom}`. You can still have them using `$enable-bootstrap-compatibility`. -- New Responsive sticky helpers: `.sticky-xs-{top|bottom}`, `.sticky-2xl-{top|bottom}` and `.sticky-3xl-{top|bottom}`. +- New Responsive sticky helpers: `.sticky-xs-{top|bottom}`, `.sticky-2xl-{top|bottom}` and `.sticky-3xl-{top|bottom}`. ### Vertical rule -- Warning The vertical rule documentation has been merged into the new [Divider helper]([[docsref:/helpers/divider]]) documentation. +- Warning The vertical rule documentation has been merged into the new [Divider helper]([[docsref:/helpers/divider]]) documentation. ## Utilities ### Background -- Breaking Most background color utilities have been removed or changed. +- Breaking Most background color utilities have been removed or changed. -- Breaking Background opacity utilities have been removed. +- Breaking Background opacity utilities have been removed. -- New The new background color utilities are now available. Visit our [background page]([[docsref:/utilities/background]]) to see more. +- New The new background color utilities are now available. Visit our [background page]([[docsref:/utilities/background]]) to see more. -
    - Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context: + Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context: See more details about [`[data-bs-theme]`]([[docsref:/customize/color-modes]]). @@ -370,15 +374,15 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Border -- Breaking Border operative utilities have been removed: `.border-0`, `.border-top-0`, `.border-bottom-0`, `.border-start-0`, and `.border-end-0`. Please check the new [border values]([[docsref:/utilities/borders#border]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Border operative utilities have been removed: `.border-0`, `.border-top-0`, `.border-bottom-0`, `.border-start-0`, and `.border-end-0`. Please check the new [border values]([[docsref:/utilities/borders#border]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. -- New Border operative utilities: `.border-none`, `.border-top-none`, `.border-bottom-none`, `.border-start-none`, and `.border-end-none`. +- New Border operative utilities: `.border-none`, `.border-top-none`, `.border-bottom-none`, `.border-start-none`, and `.border-end-none`. -- Breaking Border width utilities have been removed: `.border-0`, `.border-1`, `.border-2`, `.border-3`, `.border-4` and `.border-5`. Please check the new [border values]([[docsref:/utilities/borders#width]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Border width utilities have been removed: `.border-0`, `.border-1`, `.border-2`, `.border-3`, `.border-4` and `.border-5`. Please check the new [border values]([[docsref:/utilities/borders#width]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. -- New Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`. +- New Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`. -- Breaking Border radius utilities with many sizes have been removed. Please check the new [border values]([[docsref:/utilities/borders#radius]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: +- Breaking Border radius utilities with many sizes have been removed. Please check the new [border values]([[docsref:/utilities/borders#radius]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: - **0**: `.rounded-0`, `.rounded-top-0`, `.rounded-bottom-0`, `.rounded-start-0` and `.rounded-end-0`. - **1**: `.rounded-1`, `.rounded-top-1`, `.rounded-bottom-1`, `.rounded-start-1` and `.rounded-end-1`. - **2**: `.rounded-2`, `.rounded-top-2`, `.rounded-bottom-2`, `.rounded-start-2` and `.rounded-end-2`. @@ -386,22 +390,22 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **4**: `.rounded-4`, `.rounded-top-4`, `.rounded-bottom-4`, `.rounded-start-4` and `.rounded-end-4`. - **5**: `.rounded-5`, `.rounded-top-5`, `.rounded-bottom-5`, `.rounded-start-5` and `.rounded-end-5`. -- New Border radius utilities with all sizes: +- New Border radius utilities with all sizes: - **None**: `.rounded-none`, `.rounded-top-none`, `.rounded-bottom-none`, `.rounded-start-none` and `.rounded-end-none`. - **Small**: `.rounded-small`, `.rounded-top-small`, `.rounded-bottom-small`, `.rounded-start-small` and `.rounded-end-small`. - **Medium**: `.rounded-medium`, `.rounded-top-medium`, `.rounded-bottom-medium`, `.rounded-start-medium` and `.rounded-end-medium`. - **Large**: `.rounded-large`, `.rounded-top-large`, `.rounded-bottom-large`, `.rounded-start-large` and `.rounded-end-large`. -- New Border style utilities: `.border-drag`. +- New Border style utilities: `.border-drag`. -- Breaking All border color utilities have been removed or changed. +- Breaking All border color utilities have been removed or changed. -- Breaking Border opacity utilities have been removed. +- Breaking Border opacity utilities have been removed. -- New The new border color utilities are now available. Visit our [border page]([[docsref:/utilities/borders#color]]) to see more. +- New The new border color utilities are now available. Visit our [border page]([[docsref:/utilities/borders#color]]) to see more. -
    - Info Here are the modifications to apply in your websites: + Info Here are the modifications to apply in your websites: 1. `.border-primary` → `.border-brand-primary` 2. `.border-black` → `.border-always-black` or `.border-always-on-white` or `.border-on-brand-primary` @@ -413,14 +417,14 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Colors -- Breaking Most text color utilities have been removed or changed. +- Breaking Most text color utilities have been removed or changed. -- Breaking Text opacity utilities have been removed. +- Breaking Text opacity utilities have been removed. -- New The new text color utilities are now available. Visit our [color page]([[docsref:/utilities/colors]]) to see more. +- New The new text color utilities are now available. Visit our [color page]([[docsref:/utilities/colors]]) to see more. -
    - Info Here are the modifications to apply in your websites: + Info Here are the modifications to apply in your websites: 1. `.text-primary(-emphasis)` → `.text-brand-primary` 2. `.text-secondary(-emphasis)` → `.text-muted` @@ -443,47 +447,47 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Display -- Breaking `.d-xxl-{value}` responsive display utility has been replaced by `.d-2xl-{value}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. -- New `.d-xs-{value}` and `.d-3xl-{value}` responsive display utilities have been added. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). +- Breaking `.d-xxl-{value}` responsive display utility has been replaced by `.d-2xl-{value}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. +- New `.d-xs-{value}` and `.d-3xl-{value}` responsive display utilities have been added. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). ### Flex -- Breaking `xxl` responsive flex utilities have been replaced by `2xl` utilities: `.d-xxl-flex`, `.d-xxl-inline-flex`, `.flex-xxl-{row|column}`, `.flex-xxl-{row|column}-reverse`, `.justify-content-xxl-{start|end|center|between|around|evenly}`, `.align-items-xxl-{start|end|center|baseline|stretch}`, `.align-self-xxl-{start|end|center|baseline|stretch}`, `.flex-xxl-fill`, `.flex-xxl-{grow|shrink}-{0|1}`, `.flex-xxl-{nowrap|wrap|wrap-reverse}`, `.order-xxl-{number}`, `.order-xxl-{first|last}` and `.align-content-xxl-{start|end|center|between|around|stretch}` utilities have been replaced by `.d-2xl-flex`, `.d-2xl-inline-flex`, `.flex-2xl-{row|column}`, `.flex-2xl-{row|column}-reverse`, `.justify-content-2xl-{start|end|center|between|around|evenly}`, `.align-items-2xl-{start|end|center|baseline|stretch}`, `.align-self-2xl-{start|end|center|baseline|stretch}`, `.flex-2xl-fill`, `.flex-2xl-{grow|shrink}-{0|1}`, `.flex-2xl-{nowrap|wrap|wrap-reverse}`, `.order-2xl-{number}`, `.order-2xl-{first|last}` and `.align-content-2xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have them using `$enable-bootstrap-compatibility`. -- New `xs` and `3xl` responsive flex utilities have been added: `.d-xs-flex`, `.d-xs-inline-flex`, `.flex-xs-{row|column}`, `.flex-xs-{row|column}-reverse`, `.justify-content-xs-{start|end|center|between|around|evenly}`, `.align-items-xs-{start|end|center|baseline|stretch}`, `.align-self-xs-{start|end|center|baseline|stretch}`, `.flex-xs-fill`, `.flex-xs-{grow|shrink}-{0|1}`, `.flex-xs-{nowrap|wrap|wrap-reverse}`, `.order-xs-{number}`, `.order-xs-{first|last}`, `.align-content-xs-{start|end|center|between|around|stretch}`, `.d-3xl-flex`, `.d-3xl-inline-flex`, `.flex-3xl-{row|column}`, `.flex-3xl-{row|column}-reverse`, `.justify-content-3xl-{start|end|center|between|around|evenly}`, `.align-items-3xl-{start|end|center|baseline|stretch}`, `.align-self-3xl-{start|end|center|baseline|stretch}`, `.flex-3xl-fill`, `.flex-3xl-{grow|shrink}-{0|1}`, `.flex-3xl-{nowrap|wrap|wrap-reverse}`, `.order-3xl-{number}`, `.order-3xl-{first|last}` and `.align-content-3xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). +- Breaking `xxl` responsive flex utilities have been replaced by `2xl` utilities: `.d-xxl-flex`, `.d-xxl-inline-flex`, `.flex-xxl-{row|column}`, `.flex-xxl-{row|column}-reverse`, `.justify-content-xxl-{start|end|center|between|around|evenly}`, `.align-items-xxl-{start|end|center|baseline|stretch}`, `.align-self-xxl-{start|end|center|baseline|stretch}`, `.flex-xxl-fill`, `.flex-xxl-{grow|shrink}-{0|1}`, `.flex-xxl-{nowrap|wrap|wrap-reverse}`, `.order-xxl-{number}`, `.order-xxl-{first|last}` and `.align-content-xxl-{start|end|center|between|around|stretch}` utilities have been replaced by `.d-2xl-flex`, `.d-2xl-inline-flex`, `.flex-2xl-{row|column}`, `.flex-2xl-{row|column}-reverse`, `.justify-content-2xl-{start|end|center|between|around|evenly}`, `.align-items-2xl-{start|end|center|baseline|stretch}`, `.align-self-2xl-{start|end|center|baseline|stretch}`, `.flex-2xl-fill`, `.flex-2xl-{grow|shrink}-{0|1}`, `.flex-2xl-{nowrap|wrap|wrap-reverse}`, `.order-2xl-{number}`, `.order-2xl-{first|last}` and `.align-content-2xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have them using `$enable-bootstrap-compatibility`. +- New `xs` and `3xl` responsive flex utilities have been added: `.d-xs-flex`, `.d-xs-inline-flex`, `.flex-xs-{row|column}`, `.flex-xs-{row|column}-reverse`, `.justify-content-xs-{start|end|center|between|around|evenly}`, `.align-items-xs-{start|end|center|baseline|stretch}`, `.align-self-xs-{start|end|center|baseline|stretch}`, `.flex-xs-fill`, `.flex-xs-{grow|shrink}-{0|1}`, `.flex-xs-{nowrap|wrap|wrap-reverse}`, `.order-xs-{number}`, `.order-xs-{first|last}`, `.align-content-xs-{start|end|center|between|around|stretch}`, `.d-3xl-flex`, `.d-3xl-inline-flex`, `.flex-3xl-{row|column}`, `.flex-3xl-{row|column}-reverse`, `.justify-content-3xl-{start|end|center|between|around|evenly}`, `.align-items-3xl-{start|end|center|baseline|stretch}`, `.align-self-3xl-{start|end|center|baseline|stretch}`, `.flex-3xl-fill`, `.flex-3xl-{grow|shrink}-{0|1}`, `.flex-3xl-{nowrap|wrap|wrap-reverse}`, `.order-3xl-{number}`, `.order-3xl-{first|last}` and `.align-content-3xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). ### Float -- Breaking `xxl` responsive float utilities have been replaced by `2xl` utilities: `.float-xxl-{start|end|none}` utilities have been replaced by `.float-2xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. -- New `xs` and `3xl` responsive float utilities have been added: `.float-xs-{start|end|none}` and `.float-3xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). +- Breaking `xxl` responsive float utilities have been replaced by `2xl` utilities: `.float-xxl-{start|end|none}` utilities have been replaced by `.float-2xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. +- New `xs` and `3xl` responsive float utilities have been added: `.float-xs-{start|end|none}` and `.float-3xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). ### Link -- Breaking `.link-opacity`, `.link-offset`, `.link-underline`, `.link-underline-opacity` and `.opacity-100` have been removed from the build and from the documentation. They are useless in OUDS web. +- Breaking `.link-opacity`, `.link-offset`, `.link-underline`, `.link-underline-opacity` and `.opacity-100` have been removed from the build and from the documentation. They are useless in OUDS web. ### Object fit -- Breaking `xxl` responsive object fit utilities have been replaced by `2xl` utilities: `.object-fit-xxl-{contain|cover|fill|scale|none}` utilities have been replaced by ``.object-fit-2xl-{contain|cover|fill|scale|none}``. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have them using `$enable-bootstrap-compatibility`. -- New `xs` and `3xl` responsive object fit utilities have been added: `.object-fit-xs-{contain|cover|fill|scale|none}` and `.object-fit-3xl-{contain|cover|fill|scale|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). -- Info `xxl` responsive object fit utilities can still be available when $enable-bootstrap-compatibility is on. +- Breaking `xxl` responsive object fit utilities have been replaced by `2xl` utilities: `.object-fit-xxl-{contain|cover|fill|scale|none}` utilities have been replaced by ``.object-fit-2xl-{contain|cover|fill|scale|none}``. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have them using `$enable-bootstrap-compatibility`. +- New `xs` and `3xl` responsive object fit utilities have been added: `.object-fit-xs-{contain|cover|fill|scale|none}` and `.object-fit-3xl-{contain|cover|fill|scale|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). +- Info `xxl` responsive object fit utilities can still be available when $enable-bootstrap-compatibility is on. ### Opacity -- Breaking `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75` and `.opacity-100` have been removed from the default build. Please check the new [opacity values]([[docsref:/utilities/opacity]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. -- New Opacity utilities: `.opacity-invisible`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-strong` and `.opacity-opaque`. +- Breaking `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75` and `.opacity-100` have been removed from the default build. Please check the new [opacity values]([[docsref:/utilities/opacity]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- New Opacity utilities: `.opacity-invisible`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-strong` and `.opacity-opaque`. ### Shadow -- Breaking `.shadow`, `.shadow-sm` and `.shadow-lg` have been removed from the default build. Please check the new [shadows values]([[docsref:/utilities/shadows]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. -- New Shadows utilities: +- Breaking `.shadow`, `.shadow-sm` and `.shadow-lg` have been removed from the default build. Please check the new [shadows values]([[docsref:/utilities/shadows]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- New Shadows utilities: `.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-default`, `.shadow-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`. ### Sizing -- New Sizing utility `.mw-none` to set `max-width: none`. This utility is particularly useful now that a `max-width` has been added on all font references (for readability reasons), if you want to omit it in some special cases. +- New Sizing utility `.mw-none` to set `max-width: none`. This utility is particularly useful now that a `max-width` has been added on all font references (for readability reasons), if you want to omit it in some special cases. ### Spacings -- Breaking The following margin spacing utilities have been removed from the default build (`.m{position}-{breakpoint}-{negative}{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: +- Breaking The following margin spacing utilities have been removed from the default build (`.m{position}-{breakpoint}-{negative}{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: - **0**: `.m-0`, `.mx-0`, `.my-0`, `.mt-0`, `.mb-0`, `.ms-0`, `.me-0`, `.m-sm-0`, etc... - **1**: `.m-1`, `.mx-1`, `.my-1`, `.mt-1`, `.mb-1`, `.ms-1`, `.me-1`, `.m-sm-1`, etc... - **2**: `.m-2`, `.mx-2`, `.my-2`, `.mt-2`, `.mb-2`, `.ms-2`, `.me-2`, `.m-sm-2`, etc... @@ -492,7 +496,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **5**: `.m-5`, `.mx-5`, `.my-5`, `.mt-5`, `.mb-5`, `.ms-5`, `.me-5`, `.m-sm-5`, etc... - **Negative**: `.m-n1`, `.m-n2`, `.m-n3`, `.m-n4`, `.m-n5`, `.mx-n1`, etc... -- Breaking The following padding spacing utilities have been removed from the default build (`.p{position}-{breakpoint}-{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: +- Breaking The following padding spacing utilities have been removed from the default build (`.p{position}-{breakpoint}-{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: - **0**: `.p-0`, `.px-0`, `.py-0`, `.pt-0`, `.pb-0`, `.ps-0`, `.pe-0`, `.p-sm-0`, etc... - **1**: `.p-1`, `.px-1`, `.py-1`, `.pt-1`, `.pb-1`, `.ps-1`, `.pe-1`, `.p-sm-1`, etc... - **2**: `.p-2`, `.px-2`, `.py-2`, `.pt-2`, `.pb-2`, `.ps-2`, `.pe-2`, `.p-sm-2`, etc... @@ -500,7 +504,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **4**: `.p-4`, `.px-4`, `.py-4`, `.pt-4`, `.pb-4`, `.ps-4`, `.pe-4`, `.p-sm-4`, etc... - **5**: `.p-5`, `.px-5`, `.py-5`, `.pt-5`, `.pb-5`, `.ps-5`, `.pe-5`, `.p-sm-5`, etc... -- Breaking The following gap spacing utilities have been removed from the default build (`.{row-|column-|}gap-{breakpoint}-{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: +- Breaking The following gap spacing utilities have been removed from the default build (`.{row-|column-|}gap-{breakpoint}-{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: - **0**: `.gap-0`, `.row-gap-0`, `.column-gap-0`, `.gap-sm-0`, etc... - **1**: `.gap-1`, `.row-gap-1`, `.column-gap-1`, `.gap-sm-1`, etc... - **2**: `.gap-2`, `.row-gap-2`, `.column-gap-2`, `.gap-sm-2`, etc... @@ -508,7 +512,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **4**: `.gap-4`, `.row-gap-4`, `.column-gap-4`, `.gap-sm-4`, etc... - **5**: `.gap-5`, `.row-gap-5`, `.column-gap-5`, `.gap-sm-5`, etc... -- New fixed margin spacing utilities: +- New fixed margin spacing utilities: - **None**: `.m-none`, `.mx-none`, `.my-none`, `.mt-none`, `.mb-none`, `.ms-none`, `.me-none`, `.m-xs-none`, etc... - **3xs**: `.m-3xs`, `.mx-3xs`, `.my-3xs`, `.mt-3xs`, `.mb-3xs`, `.ms-3xs`, `.me-3xs`, `.m-xs-3xs`, etc... - **2xs**: `.m-2xs`, `.mx-2xs`, `.my-2xs`, `.mt-2xs`, `.mb-2xs`, `.ms-2xs`, `.me-2xs`, `.m-xs-2xs`, etc... @@ -524,7 +528,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **Auto**: `.m-xs-auto`, `.mx-xs-auto`, `.my-xs-auto`, `.mt-xs-auto`, `.mb-xs-auto`, `.ms-xs-auto`, `.me-xs-auto`, `.m-2xl-auto`, etc... - **Negative**: `.m-n3xs`, `.m-n2xs`, `.m-nxs`, `.m-nsm`, `.m-nmd`, `.m-nlg`, `.m-nxl`, `.m-n2xl`, `.m-n3xl`, `.m-n4xl`, `.m-n5xl`, `.mx-n3xs`, etc... -- New scaled margin spacing utilities: +- New scaled margin spacing utilities: - **None**: `.m-scaled-none`, `.mx-scaled-none`, `.my-scaled-none`, `.mt-scaled-none`, `.mb-scaled-none`, `.ms-scaled-none`, `.me-scaled-none`, - **3xs**: `.m-scaled-3xs`, `.mx-scaled-3xs`, `.my-scaled-3xs`, `.mt-scaled-3xs`, `.mb-scaled-3xs`, `.ms-scaled-3xs`, `.me-scaled-3xs`, - **2xs**: `.m-scaled-2xs`, `.mx-scaled-2xs`, `.my-scaled-2xs`, `.mt-scaled-2xs`, `.mb-scaled-2xs`, `.ms-scaled-2xs`, `.me-scaled-2xs`, @@ -536,7 +540,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **2xl**: `.m-scaled-2xl`, `.mx-scaled-2xl`, `.my-scaled-2xl`, `.mt-scaled-2xl`, `.mb-scaled-2xl`, `.ms-scaled-2xl`, `.me-scaled-2xl`, - **3xl**: `.m-scaled-3xl`, `.mx-scaled-3xl`, `.my-scaled-3xl`, `.mt-scaled-3xl`, `.mb-scaled-3xl`, `.ms-scaled-3xl`, `.me-scaled-3xl` -- New fixed padding spacing utilities: +- New fixed padding spacing utilities: - **None**: `.p-none`, `.px-none`, `.py-none`, `.pt-none`, `.pb-none`, `.ps-none`, `.pe-none`, `.p-xs-none`, etc... - **3xs**: `.p-3xs`, `.px-3xs`, `.py-3xs`, `.pt-3xs`, `.pb-3xs`, `.ps-3xs`, `.pe-3xs`, `.p-xs-3xs`, etc... - **2xs**: `.p-2xs`, `.px-2xs`, `.py-2xs`, `.pt-2xs`, `.pb-2xs`, `.ps-2xs`, `.pe-2xs`, `.p-xs-2xs`, etc... @@ -550,7 +554,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **4xl**: `.p-4xl`, `.px-4xl`, `.py-4xl`, `.pt-4xl`, `.pb-4xl`, `.ps-4xl`, `.pe-4xl`, `.p-xs-4xl`, etc... - **5xl**: `.p-5xl`, `.px-5xl`, `.py-5xl`, `.pt-5xl`, `.pb-5xl`, `.ps-5xl`, `.pe-5xl`, `.p-xs-5xl`, etc... -- New scaled padding spacing utilities: +- New scaled padding spacing utilities: - **None**: `.p-scaled-none`, `.px-scaled-none`, `.py-scaled-none`, `.pt-scaled-none`, `.pb-scaled-none`, `.ps-scaled-none`, `.pe-scaled-none`, - **3xs**: `.p-scaled-3xs`, `.px-scaled-3xs`, `.py-scaled-3xs`, `.pt-scaled-3xs`, `.pb-scaled-3xs`, `.ps-scaled-3xs`, `.pe-scaled-3xs`, - **2xs**: `.p-scaled-2xs`, `.px-scaled-2xs`, `.py-scaled-2xs`, `.pt-scaled-2xs`, `.pb-scaled-2xs`, `.ps-scaled-2xs`, `.pe-scaled-2xs`, @@ -562,7 +566,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **2xl**: `.p-scaled-2xl`, `.px-scaled-2xl`, `.py-scaled-2xl`, `.pt-scaled-2xl`, `.pb-scaled-2xl`, `.ps-scaled-2xl`, `.pe-scaled-2xl`, - **3xl**: `.p-scaled-3xl`, `.px-scaled-3xl`, `.py-scaled-3xl`, `.pt-scaled-3xl`, `.pb-scaled-3xl`, `.ps-scaled-3xl`, `.pe-scaled-3xl` -- New fixed gap spacing utilities: +- New fixed gap spacing utilities: - **None**: `.gap-none`, `.row-gap-none`, `.column-gap-none`, `.gap-xs-none`, etc... - **3xs**: `.gap-3xs`, `.row-gap-3xs`, `.column-gap-3xs`, `.gap-xs-3xs`, etc... - **2xs**: `.gap-2xs`, `.row-gap-2xs`, `.column-gap-2xs`, `.gap-xs-2xs`, etc... @@ -576,7 +580,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **4xl**: `.gap-4xl`, `.row-gap-4xl`, `.column-gap-4xl`, `.gap-xs-4xl`, etc... - **5xl**: `.gap-5xl`, `.row-gap-5xl`, `.column-gap-5xl`, `.gap-xs-5xl`, etc... -- New scaled gap spacing utilities: +- New scaled gap spacing utilities: - **None**: `.gap-scaled-none`, `.row-gap-scaled-none`, `.column-gap-scaled-none` - **3xs**: `.gap-scaled-3xs`, `.row-gap-scaled-3xs`, `.column-gap-scaled-3xs` - **2xs**: `.gap-scaled-2xs`, `.row-gap-scaled-2xs`, `.column-gap-scaled-2xs` @@ -588,7 +592,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **2xl**: `.gap-scaled-2xl`, `.row-gap-scaled-2xl`, `.column-gap-scaled-2xl` - **3xl**: `.gap-scaled-3xl`, `.row-gap-scaled-3xl`, `.column-gap-scaled-3xl` -- Warning You might be able to transfer your spacing utilities following one of the two proposed methods (while keeping almost the rendering and at least the same proportion between spacings): +- Warning You might be able to transfer your spacing utilities following one of the two proposed methods (while keeping almost the rendering and at least the same proportion between spacings): - Keep the previous behavior and getting one utility for another. 1. **0**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)0` → `$1none` 2. **1**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)1` → `$12xs` @@ -604,40 +608,40 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Text -- Breaking `.text-xxl-{start|end|none}` responsive alignment text utility has been replaced by `.text-2xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. +- Breaking `.text-xxl-{start|end|none}` responsive alignment text utility has been replaced by `.text-2xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. -- New `.text-xs-{start|end|none}` and `.text-3xl-{start|end|none}` responsive alignment text utilities have been added. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). +- New `.text-xs-{start|end|none}` and `.text-3xl-{start|end|none}` responsive alignment text utilities have been added. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). -- Breaking Font size text utilities `.fs-{1|2|3|4|5|6}` have been removed and replaced by new ones. You can still have them using `$enable-bootstrap-compatibility`: +- Breaking Font size text utilities `.fs-{1|2|3|4|5|6}` have been removed and replaced by new ones. You can still have them using `$enable-bootstrap-compatibility`: - **Display headings**: `.fs-dl`, `.fs-dm`, `.fs-ds` - **Headings**: `.fs-hxl`, `.fs-hl`, `.fs-hm`, `.fs-hs` - **Body**: `.fs-bl`, `.fs-bm`, `.fs-bs` - **Code**: `.fs-cm`, `.fs-cs` -- Breaking Font weight text utilities `.fw-semibold` and `.fw-medium` have been removed. +- Breaking Font weight text utilities `.fw-semibold` and `.fw-medium` have been removed. -- Breaking Line height text utilities `.lh-1`, `.lh-sm`, `.lh-base`, and `.lh-lg` have been removed, since our font references already have defined `line-height`s. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Line height text utilities `.lh-1`, `.lh-sm`, `.lh-base`, and `.lh-lg` have been removed, since our font references already have defined `line-height`s. You can still have them using `$enable-bootstrap-compatibility`. -- Breaking Line length text utilities `.ll-sm` and `.ll-md` have been removed, since there is already a default `max-width`. +- Breaking Line length text utilities `.ll-sm` and `.ll-md` have been removed, since there is already a default `max-width`. ## Examples -- New New [Font example]([[docsref:/examples/font]]). +- New New [Font example]([[docsref:/examples/font]]). -- New New [Grid system example]([[docsref:/examples/grid-system/]]). +- New New [Grid system example]([[docsref:/examples/grid-system/]]). -- New New [Loading buttons live example]([[docsref:/examples/loading-buttons/]]). +- New New [Loading buttons live example]([[docsref:/examples/loading-buttons/]]). ## CSS and Sass variables -- New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. +- New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. - For instance, without the Bootstrap compatibility mode, you won’t have the opacity Bootstrap utilities such as `.opacity-0`, `.opacity-1`, `.opacity-50`, etc. You will only have the semantic OUDS Web utilities such as `.opacity-invisible`, `.opacity-weaker`, `.opacity-weak`, etc. -- Warning `$enable-rounded` option have been set to `true` by default. This option allows you to set rounded corner on components. Please check that it doesn’t impact your website. +- Warning `$enable-rounded` option have been set to `true` by default. This option allows you to set rounded corner on components. Please check that it doesn’t impact your website. -- Warning `scss/_color-palette.scss` doesn’t exist anymore. If you were importing it in your project, please make sure to remove it. +- Warning `scss/_color-palette.scss` doesn’t exist anymore. If you were importing it in your project, please make sure to remove it. -- New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables. +- New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
    See the new import stack @@ -658,7 +662,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - New Sass variables: + New Sass variables:
    • $core-orange-color-decorative-amber-500
    • $core-orange-color-decorative-amethyst-100
      • @@ -1626,7 +1630,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - New Sass variables containing CSS variable with value depending on theme: + New Sass variables containing CSS variable with value depending on theme:
    • $ouds-color-action-disabled
    • $ouds-color-action-enabled
      • @@ -1762,7 +1766,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - New Sass maps: + New Sass maps:
    • $grid-gutter-widths
    • $ouds-backgrounds
      • @@ -1784,14 +1788,14 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - New Sass mixins: + New Sass mixins:
    • get-font-size()
    -
    - New Keys in $utilities map: + New Keys in $utilities map:
    • border-bottom-ouds
    • border-color-ouds
      • @@ -1863,7 +1867,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - New CSS variables: + New CSS variables:
    • --bs-body-letter-spacing
    • --bs-color-action-disabled
      • @@ -2069,7 +2073,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - Warning Dropped Sass variables: + Warning Dropped Sass variables:
    • $blockquote-font-size
    • $blockquote-footer-font-size
      • @@ -2234,7 +2238,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - Warning Dropped CSS variables: + Warning Dropped CSS variables:
    • --bs-border-color-subtle
    • --bs-btn-close-active-border-color
      • @@ -2259,7 +2263,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - Breaking CSS variables only available when $enable-bootstrap-compatibility is on: + Breaking CSS variables only available when $enable-bootstrap-compatibility is on:
    • --bs-black
    • --bs-black-rgb
      • @@ -2359,14 +2363,14 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - Warning Dropped Sass mixins: + Warning Dropped Sass mixins:
    • make-container-fluid-margin()
    -
    - Breaking Keys in $utilities map only available when $enable-bootstrap-compatibility is on: + Breaking Keys in $utilities map only available when $enable-bootstrap-compatibility is on:
    • background-color
    • border
      • @@ -2420,7 +2424,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - Warning Dropped keys in $utilities map: + Warning Dropped keys in $utilities map:
    • bg-opacity
    • border-opacity
      • @@ -2429,12 +2433,12 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -- Warning Signature of `make-row($gutter, $gutter-sm)` is now `make-row($gutter)`. +- Warning Signature of `make-row($gutter, $gutter-sm)` is now `make-row($gutter)`. ## Sass mixins -- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is 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"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/content/typography#sass-mixins]]) for more details. +- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is 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"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/content/typography#sass-mixins]]) for more details. -- Warning `color-mode({mode}, {root}, {inverted-mode})` mixin signature has changed. We now provide an `$inverted-mode` parameter that is set by default to `light` or `dark` depending on the `$mode`. It allows you to precise another mode to be the inverse of a certain mode. +- Warning `color-mode({mode}, {root}, {inverted-mode})` mixin signature has changed. We now provide an `$inverted-mode` parameter that is set by default to `light` or `dark` depending on the `$mode`. It allows you to precise another mode to be the inverse of a certain mode. -- Warning `button-variant` mixin signature has changed. We now provide extra parameters for focus and loading states colors. We keep it as a warning because we provide default values for these parameters. See more in [our Button documentation]([[docsref:/components/buttons#sass-mixins]]). +- Warning `button-variant` mixin signature has changed. We now provide extra parameters for focus and loading states colors. We keep it as a warning because we provide default values for these parameters. See more in [our Button documentation]([[docsref:/components/buttons#sass-mixins]]). diff --git a/site/src/content/docs/migrations/migration.mdx b/site/src/content/docs/migrations/migration.mdx index 6cafe02648..c4e130f6e9 100644 --- a/site/src/content/docs/migrations/migration.mdx +++ b/site/src/content/docs/migrations/migration.mdx @@ -12,33 +12,37 @@ toc: true ### Contents -- Breaking The focus-visible polyfill has been removed. So you no longer need it on your side, and you should replace all the calls to `:focus[data-focus-visible-added]` by `:focus-visible`. +- Breaking The focus-visible polyfill has been removed. So you no longer need it on your side, and you should replace all the calls to `:focus[data-focus-visible-added]` by `:focus-visible`. ### Components #### Button -- Breaking Button CSS variables have been changed. `--bs-button-mono-color-bg-minimal-loading` is no longer available. --New `.btn-rounded` is now available. --New `.btn-brand` is now available. +- Breaking Button CSS variables have been changed. `--bs-button-mono-color-bg-minimal-loading` is no longer available. +- New `.btn-rounded` is now available. +- New `.btn-brand` is now available. #### Chips -- New Chips components have been implemented. See more in our [Chips page]([[docsref:/components/chips]]). +- New Chips components have been implemented. See more in our [Chips page]([[docsref:/components/chips]]). #### Link -- Breaking Link CSS variables have been changed. All the variables containing `arrow` have been renamed the same with `chevron` instead. +- Breaking Link CSS variables have been changed. All the variables containing `arrow` have been renamed the same with `chevron` instead. + +#### Tag + +- New Tag component has been implemented. ### Utilities #### Borders -- Warning `.rounded-small` and `.rounded-medium` have been updated to respectively 4px and 8px. All components have been updated accordingly. It shouldn’t bother you too much since it’s handled on OUDS Web side. +- Warning `.rounded-small` and `.rounded-medium` have been updated to respectively 4px and 8px. All components have been updated accordingly. It shouldn’t bother you too much since it’s handled on OUDS Web side. #### Colors -- Warning Dark mode values of our `.text-status-info`, `.text-status-positive`, `.text-status-warning` and `.text-status-danger` have been tweaked. It shouldn’t bother you too much since it’s handled on OUDS Web side. +- Warning Dark mode values of our `.text-status-info`, `.text-status-positive`, `.text-status-warning` and `.text-status-danger` have been tweaked. It shouldn’t bother you too much since it’s handled on OUDS Web side. ### Helpers @@ -60,51 +64,51 @@ toc: true #### Checkboxes, radio buttons, switches -- New Read only state has been implemented. +- New Read only state has been implemented. ### Components #### Badge -- New Badge component has been implemented. +- New Badge component has been implemented. #### Breadcrumb -- New Breadcrumb component has been implemented. +- New Breadcrumb component has been implemented. #### Bullet list -- New Bullet list component has been implemented. +- New Bullet list component has been implemented. ### Extend #### Icons -- New Icons’ sizes for decorative standalone icons have been added: `.decorative-4xs-icon`, `decorative-3xs-icon`. +- New Icons’ sizes for decorative standalone icons have been added: `.decorative-4xs-icon`, `decorative-3xs-icon`. ### Utilities #### Border -- Breaking Border radius utilities sizes `short` and `tall` have been renamed to `small` and `large` respectively. +- Breaking Border radius utilities sizes `short` and `tall` have been renamed to `small` and `large` respectively. - **Short**: `.rounded-small`, `.rounded-top-small`, `.rounded-bottom-small`, `.rounded-start-small` and `.rounded-end-small`, for example `.rounded-short` → `.rounded-small`. - **Tall**: `.rounded-large`, `.rounded-top-large`, `.rounded-bottom-large`, `.rounded-start-large` and `.rounded-end-large`, for example `.rounded-tall` → `.rounded-large`. #### Colors -- New Color utilities for text on status colors have been added: +- New Color utilities for text on status colors have been added: - **Accent**: `.text-on-status-accent-emphasized`, `.text-on-status-accent-muted` - **Info**: `.text-on-status-info-emphasized`, `.text-on-status-info-muted` - **Negative**: `.text-on-status-negative-emphasized`, `.text-on-status-negative-muted` - **Neutral**: `.text-on-status-neutral-emphasized`, `.text-on-status-neutral-muted` - **Positive**: `.text-on-status-positive-emphasized`, `.text-on-status-positive-muted` - **Warning**: `.text-on-status-warning-emphasized`, `.text-on-status-warning-muted` -- Breaking Generic Color utilities for status background have been removed: `.text-on-status-emphasized`, `.text-on-status-emphasized-alt`, `.text-on-status-muted`. You should use the new color utilities related to the background or directly use our [color & background helpers]([[docsref:/helpers/color-background]]) +- Breaking Generic Color utilities for status background have been removed: `.text-on-status-emphasized`, `.text-on-status-emphasized-alt`, `.text-on-status-muted`. You should use the new color utilities related to the background or directly use our [color & background helpers]([[docsref:/helpers/color-background]]) #### Spacings -- Breaking Spacing utilities (padding, margin, gap, ...) sizes have been renamed as follows: +- Breaking Spacing utilities (padding, margin, gap, ...) sizes have been renamed as follows: - **Smash** is renamed to `3xs` : for example `.m-smash` → `.m-3xs` - **Shortest** is renamed to `2xs` : for example `.m-shortest` → `.m-2xs` - **Shorter** is renamed to `xs` : for example `.m-shorter` → `.m-xs` @@ -120,11 +124,11 @@ toc: true ### CSS and Sass variables -- Breaking Some design tokens prefix have been changed to follow the new naming convention. +- Breaking Some design tokens prefix have been changed to follow the new naming convention. - Core Raw Tokens (in file raw.scss) are now prefixed with `core-ouds` instead of `ouds`. - Orange Raw Tokens (in file raw.scss) are now prefixed with `core-orange` instead of `ouds`. -- Breaking A parameter from the `focus-visible()` mixin has been removed. If you use the `focus-visible()` mixin in your scss files with a `z-index` as a parameter, please adapt your code. +- Breaking A parameter from the `focus-visible()` mixin has been removed. If you use the `focus-visible()` mixin in your scss files with a `z-index` as a parameter, please adapt your code. ## v0.4.0 @@ -134,24 +138,24 @@ toc: true #### Checkboxes -- New Checkbox component has been implemented. +- New Checkbox component has been implemented. #### Radio buttons -- New Radio button component has been implemented. +- New Radio button component has been implemented. #### Switches -- New Switch component has been implemented. +- New Switch component has been implemented. ### Helpers #### Divider -- New Horizontal and vertical rule helpers to create dividers. +- New Horizontal and vertical rule helpers to create dividers. ### CSS and Sass variables -- New A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass file between the semantic and component files. +- New A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass file between the semantic and component files.
    See the new import stack @@ -165,7 +169,7 @@ toc: true
    -
    - New Sass variables: + New Sass variables:
    • $ouds-font-family-body
    • $ouds-font-family-code
      • @@ -179,7 +183,7 @@ toc: true
    -
    - Breaking Removed Sass variables: + Breaking Removed Sass variables:
    • $ouds-font-family
    • $ouds-font-weight-default
      • @@ -195,36 +199,36 @@ toc: true #### Reboot -- New Default link styles has been updated. +- New Default link styles has been updated. ### Components #### Links -- New Link component has been implemented. +- New Link component has been implemented. ### Helpers #### Icon link -- Breaking Colors links are unstyled in OUDS Web, the documentation is only kept for Bootstrap compatibility. +- Breaking Colors links are unstyled in OUDS Web, the documentation is only kept for Bootstrap compatibility. -- Warning The icon link documentation has been merged into is the new [Link component]([[docsref:/components/links]]) documentation and removed from helpers section. +- Warning The icon link documentation has been merged into is the new [Link component]([[docsref:/components/links]]) documentation and removed from helpers section. ### Utilities #### Border -- New Border color: `.border-muted`. +- New Border color: `.border-muted`. #### Link -- Breaking Link utilities are no more used in OUDS Web and the following classes have been removed: .link-opacity-{'{number}'}, .link-offset-{'{number}'}, .link-underline-{'{number}'}, .link-underline-opacity-{'{number}'} +- Breaking Link utilities are no more used in OUDS Web and the following classes have been removed: .link-opacity-{'{number}'}, .link-offset-{'{number}'}, .link-underline-{'{number}'}, .link-underline-opacity-{'{number}'} ### CSS and Sass variables -
      - New Sass variables: + New Sass variables:
      • $ouds-color-border-muted-dark
      • $ouds-color-border-muted-light
        • @@ -257,14 +261,14 @@ toc: true
      -
      - New Sass variables containing CSS variable with value depending on theme: + New Sass variables containing CSS variable with value depending on theme:
      • $ouds-color-border-muted
      -
      - New CSS variables: + New CSS variables:
      • --bs-color-border-muted
      @@ -278,22 +282,22 @@ toc: true #### Buttons -- New Button component has been implemented. +- New Button component has been implemented. ### Examples -- New New [Loading buttons live example]([[docsref:/examples/loading-buttons/]]). +- New New [Loading buttons live example]([[docsref:/examples/loading-buttons/]]). ### CSS and Sass variables -- New `$enable-button-pointers` (default true) has been introduced. It is used to add a "hand" cursor to non-disabled button elements. +- New `$enable-button-pointers` (default true) has been introduced. It is used to add a "hand" cursor to non-disabled button elements. -- New `$enable-gradients` (default false) has been introduced. It is used to enable predefined gradients via `background-image` styles on various components. +- New `$enable-gradients` (default false) has been introduced. It is used to enable predefined gradients via `background-image` styles on various components. -- New `$enable-rounded` (default true) has been introduced. It allows you to set rounded or flat corners on components. +- New `$enable-rounded` (default true) has been introduced. It allows you to set rounded or flat corners on components. -
      - New Sass variables: + New Sass variables:
      • $btn-border-radius
      • $btn-border-width
        • @@ -421,7 +425,7 @@ toc: true
      -
      - New Sass mixins: + New Sass mixins:
      • button-variant
      • button-icon
        • @@ -434,17 +438,17 @@ toc: true ### Foundations -- Warning The root selector have been tweaked for more flexibility on JS frameworks. Please don’t hesitate to contact us if you find any issue with it. +- Warning The root selector have been tweaked for more flexibility on JS frameworks. Please don’t hesitate to contact us if you find any issue with it. ### Color modes -- New We provide four brand new themes that are light, dark, root and root-inverted. See more on our [color modes page]([[docsref:/customize/color-modes]]) +- New We provide four brand new themes that are light, dark, root and root-inverted. See more on our [color modes page]([[docsref:/customize/color-modes]]) ### Content styles #### Default styles -- New Default styles have be added to HTML elements: +- New Default styles have be added to HTML elements: - Default guidelines that guide our choices like spacing units, text `max-width`, or avoiding `margin-top` - `box-sizing: border-box` set on every element - Default font parameters using native font stack @@ -452,7 +456,7 @@ toc: true #### Typography -- New All typography global settings have been set for: +- New All typography global settings have been set for: - Headings - Display headings - Regular texts @@ -465,24 +469,24 @@ toc: true ### 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`. +- New Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints `2xs`, `xs`, `sm`, `md`, `xl`, `2xl`, and `3xl`. - Container class: `.container-fluid` - Limiting class: `.container-max-width` - Row system with `.row` - Column system with classes: `.col-{number}`, `.col-{breakpoint}-{number}`, and `.offset-{breakpoint}-{number}` - Row columns classes: `.row-cols-{number}` -New Responsive CSS grid classes: `.g-col-{breakpoint}-{number}`. +New Responsive CSS grid classes: `.g-col-{breakpoint}-{number}`. ### Helpers #### Color background -- New The new color-background color helpers are now available. Visit our [color-bg page]([[docsref:/helpers/color-background]]) to see more. +- New The new color-background color helpers are now available. Visit our [color-bg page]([[docsref:/helpers/color-background]]) to see more. #### Icon -- New Icons’ sizes utilities are now available to help choose the right icon size with a specific typography reference: +- New Icons’ sizes utilities are now available to help choose the right icon size with a specific typography reference: - Responsive icons’ sizes in headings: - `.h{size}-short-icon`, `.h{size}-medium-icon`, `.h{size}-tall-icon`, where `h` stands for heading and size is one of `s` for small, `m` for medium, `l` for large, or `xl` for x-large - `.b{size}-short-icon`, `.b{size}-medium-icon`, , `.h{size}-tall-icon`, where `b` stands for body and size is one of `m` for medium, or `l` for large @@ -491,25 +495,25 @@ toc: true #### Position -- New Responsive sticky helpers: `.sticky-{value}`, and `.sticky-{breakpoint}-{value}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`, and `value` is in `top|bottom`. +- New Responsive sticky helpers: `.sticky-{value}`, and `.sticky-{breakpoint}-{value}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`, and `value` is in `top|bottom`. ### Utilities #### API -- New The `responsive` option is now available in the API to indicate if responsive classes should be generated. +- New The `responsive` option is now available in the API to indicate if responsive classes should be generated. #### Background -- New The new background color utilities are now available. Visit our [background page]([[docsref:/utilities/background]]) to see more. +- New The new background color utilities are now available. Visit our [background page]([[docsref:/utilities/background]]) to see more. #### Border -- New Border operative utilities: `.border`, `.border-none`, `.border-top`, `.border-top-none`, `.border-bottom`, `.border-bottom-none`, `.border-start`, `.border-start-none`, `.border-end` and `.border-end-none`. +- New Border operative utilities: `.border`, `.border-none`, `.border-top`, `.border-top-none`, `.border-bottom`, `.border-bottom-none`, `.border-start`, `.border-start-none`, `.border-end` and `.border-end-none`. -- New Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`. +- New Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`. -- New Border radius utilities with all sizes: +- New Border radius utilities with all sizes: - **Default**: `.rounded`, `.rounded-top`, `.rounded-bottom`, `.rounded-start` and `.rounded-end`. - **None**: `.rounded-none`, `.rounded-top-none`, `.rounded-bottom-none`, `.rounded-start-none` and `.rounded-end-none`. - **Short**: `.rounded-short`, `.rounded-top-short`, `.rounded-bottom-short`, `.rounded-start-short` and `.rounded-end-short`. @@ -518,47 +522,47 @@ toc: true - **Circle**: `.rounded-circle`, `.rounded-top-circle`, `.rounded-bottom-circle`, `.rounded-start-circle` and `.rounded-end-circle`. - **Pill**: `.rounded-pill`, `.rounded-top-pill`, `.rounded-bottom-pill`, `.rounded-start-pill` and `.rounded-end-pill`. -- New Border style utilities: `.border-drag`. +- New Border style utilities: `.border-drag`. -- New The new border color utilities are now available. Visit our [border page]([[docsref:/utilities/borders#color]]) to see more. +- New The new border color utilities are now available. Visit our [border page]([[docsref:/utilities/borders#color]]) to see more. #### Colors -- New The new text color utilities are now available. Visit our [color page]([[docsref:/utilities/colors]]) to see more. +- New The new text color utilities are now available. Visit our [color page]([[docsref:/utilities/colors]]) to see more. #### Display -- New Responsive display utilities: `.d-{value}`, `.d-{breakpoint}-{value}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`, and `value` is in `none|inline|inline-block|block|grid|inline-grid|table|table-cell|table-row|flex|inline-flex`. +- New Responsive display utilities: `.d-{value}`, `.d-{breakpoint}-{value}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`, and `value` is in `none|inline|inline-block|block|grid|inline-grid|table|table-cell|table-row|flex|inline-flex`. #### Flex -- New Responsive flex utilities without `breakpoint` for `2xs`, and where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`: +- New Responsive flex utilities without `breakpoint` for `2xs`, and where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`: `.d-{breakpoint}-flex`, `.d-{breakpoint}-inline-flex`, `.flex-{breakpoint}-{row|column}`, `.flex-{breakpoint}-{row|column}-reverse`, `.justify-content-{breakpoint}-{start|end|center|between|around|evenly}`, `.align-items-{breakpoint}-{start|end|center|baseline|stretch}`, `.align-self-{breakpoint}-{start|end|center|baseline|stretch}`, `.flex-{breakpoint}-fill`, `.flex-{breakpoint}-{grow|shrink}-{0|1}`, `.flex-{breakpoint}-{nowrap|wrap|wrap-reverse}`, `.order-{breakpoint}-{number}`, `.order-{breakpoint}-{first|last}` and `.align-content-{breakpoint}-{start|end|center|between|around|stretch}`. #### Float -- New Responsive float utilities: `.float-{start|end|none}`, `.float-{breakpoint}-{start|end|none}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. +- New Responsive float utilities: `.float-{start|end|none}`, `.float-{breakpoint}-{start|end|none}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. #### Object fit -- New Responsive object fit utilities: `.object-fit-{contain|cover|fill|scale|none}`, `.object-fit-{breakpoint}-{contain|cover|fill|scale|none}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. +- New Responsive object fit utilities: `.object-fit-{contain|cover|fill|scale|none}`, `.object-fit-{breakpoint}-{contain|cover|fill|scale|none}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. #### Opacity -- Breaking Opacity utilities: `.opacity-emphasis` has been renamed to `.opacity-strong` and `.opacity-transparent` has been renamed `.opacity-invisible`. +- Breaking Opacity utilities: `.opacity-emphasis` has been renamed to `.opacity-strong` and `.opacity-transparent` has been renamed `.opacity-invisible`. #### Shadow -- New Shadows utilities: +- New Shadows utilities: `.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-default`, `.shadow-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`. #### Sizing -- New Sizing utility `.mw-none` to set `max-width: none`. This utility is particularly useful to reset the `max-width` of our font references in some special cases. +- New Sizing utility `.mw-none` to set `max-width: none`. This utility is particularly useful to reset the `max-width` of our font references in some special cases. #### Spacings -- New Fixed margin spacing utilities: +- New Fixed margin spacing utilities: - **None**: `.m-none`, `.mx-none`, `.my-none`, `.mt-none`, `.mb-none`, `.ms-none`, `.me-none`, `.m-xs-none`, etc... - **Smash**: `.m-smash`, `.mx-smash`, `.my-smash`, `.mt-smash`, `.mb-smash`, `.ms-smash`, `.me-smash`, `.m-xs-smash`, etc... - **Shortest**: `.m-shortest`, `.mx-shortest`, `.my-shortest`, `.mt-shortest`, `.mb-shortest`, `.ms-shortest`, `.me-shortest`, `.m-xs-shortest`, etc... @@ -573,7 +577,7 @@ toc: true - **Jumbo**: `.m-jumbo`, `.mx-jumbo`, `.my-jumbo`, `.mt-jumbo`, `.mb-jumbo`, `.ms-jumbo`, `.me-jumbo`, `.m-xs-jumbo`, etc... - **Auto**: `.m-auto`, `.mx-auto`, `.my-auto`, `.mt-auto`, `.mb-auto`, `.ms-auto`, `.me-auto`, `.m-xs-auto`, etc... -- New Scaled margin spacing utilities: +- New Scaled margin spacing utilities: - **None**: `.m-scaled-none`, `.mx-scaled-none`, `.my-scaled-none`, `.mt-scaled-none`, `.mb-scaled-none`, `.ms-scaled-none`, `.me-scaled-none`, - **Smash**: `.m-scaled-smash`, `.mx-scaled-smash`, `.my-scaled-smash`, `.mt-scaled-smash`, `.mb-scaled-smash`, `.ms-scaled-smash`, `.me-scaled-smash`, - **Shortest**: `.m-scaled-shortest`, `.mx-scaled-shortest`, `.my-scaled-shortest`, `.mt-scaled-shortest`, `.mb-scaled-shortest`, `.ms-scaled-shortest`, `.me-scaled-shortest`, @@ -585,7 +589,7 @@ toc: true - **Tallest**: `.m-scaled-tallest`, `.mx-scaled-tallest`, `.my-scaled-tallest`, `.mt-scaled-tallest`, `.mb-scaled-tallest`, `.ms-scaled-tallest`, `.me-scaled-tallest`, - **Spacious**: `.m-scaled-spacious`, `.mx-scaled-spacious`, `.my-scaled-spacious`, `.mt-scaled-spacious`, `.mb-scaled-spacious`, `.ms-scaled-spacious`, `.me-scaled-spacious` -- New Fixed padding spacing utilities: +- New Fixed padding spacing utilities: - **None**: `.p-none`, `.px-none`, `.py-none`, `.pt-none`, `.pb-none`, `.ps-none`, `.pe-none`, `.p-xs-none`, etc... - **Smash**: `.p-smash`, `.px-smash`, `.py-smash`, `.pt-smash`, `.pb-smash`, `.ps-smash`, `.pe-smash`, `.p-xs-smash`, etc... - **Shortest**: `.p-shortest`, `.px-shortest`, `.py-shortest`, `.pt-shortest`, `.pb-shortest`, `.ps-shortest`, `.pe-shortest`, `.p-xs-shortest`, etc... @@ -599,7 +603,7 @@ toc: true - **Huge**: `.p-huge`, `.px-huge`, `.py-huge`, `.pt-huge`, `.pb-huge`, `.ps-huge`, `.pe-huge`, `.p-xs-huge`, etc... - **Jumbo**: `.p-jumbo`, `.px-jumbo`, `.py-jumbo`, `.pt-jumbo`, `.pb-jumbo`, `.ps-jumbo`, `.pe-jumbo`, `.p-xs-jumbo`, etc... -- New Scaled padding spacing utilities: +- New Scaled padding spacing utilities: - **None**: `.p-scaled-none`, `.px-scaled-none`, `.py-scaled-none`, `.pt-scaled-none`, `.pb-scaled-none`, `.ps-scaled-none`, `.pe-scaled-none`, - **Smash**: `.p-scaled-smash`, `.px-scaled-smash`, `.py-scaled-smash`, `.pt-scaled-smash`, `.pb-scaled-smash`, `.ps-scaled-smash`, `.pe-scaled-smash`, - **Shortest**: `.p-scaled-shortest`, `.px-scaled-shortest`, `.py-scaled-shortest`, `.pt-scaled-shortest`, `.pb-scaled-shortest`, `.ps-scaled-shortest`, `.pe-scaled-shortest`, @@ -611,7 +615,7 @@ toc: true - **Tallest**: `.p-scaled-tallest`, `.px-scaled-tallest`, `.py-scaled-tallest`, `.pt-scaled-tallest`, `.pb-scaled-tallest`, `.ps-scaled-tallest`, `.pe-scaled-tallest`, - **Spacious**: `.p-scaled-spacious`, `.px-scaled-spacious`, `.py-scaled-spacious`, `.pt-scaled-spacious`, `.pb-scaled-spacious`, `.ps-scaled-spacious`, `.pe-scaled-spacious` -- New Fixed gap spacing utilities: +- New Fixed gap spacing utilities: - **None**: `.gap-none`, `.row-gap-none`, `.column-gap-none`, `.gap-xs-none`, etc... - **Smash**: `.gap-smash`, `.row-gap-smash`, `.column-gap-smash`, `.gap-xs-smash`, etc... - **Shortest**: `.gap-shortest`, `.row-gap-shortest`, `.column-gap-shortest`, `.gap-xs-shortest`, etc... @@ -625,7 +629,7 @@ toc: true - **Huge**: `.gap-huge`, `.row-gap-huge`, `.column-gap-huge`, `.gap-xs-huge`, etc... - **Jumbo**: `.gap-jumbo`, `.row-gap-jumbo`, `.column-gap-jumbo`, `.gap-xs-jumbo`, etc... -- New Scaled gap spacing utilities: +- New Scaled gap spacing utilities: - **None**: `.gap-scaled-none`, `.row-gap-scaled-none`, `.column-gap-scaled-none` - **Smash**: `.gap-scaled-smash`, `.row-gap-scaled-smash`, `.column-gap-scaled-smash` - **Shortest**: `.gap-scaled-shortest`, `.row-gap-scaled-shortest`, `.column-gap-scaled-shortest` @@ -639,35 +643,35 @@ toc: true #### Text -- New Alignment text utilities: `.text-start`, `.text-center`, `.text-end`, and responsive versions like `.text-{breakpoint}-{start|center|end}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. +- New Alignment text utilities: `.text-start`, `.text-center`, `.text-end`, and responsive versions like `.text-{breakpoint}-{start|center|end}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. -- New Wrapping and overflow text utilities: `.text-wrap` and `.text-nowrap`. +- New Wrapping and overflow text utilities: `.text-wrap` and `.text-nowrap`. -- New Word break text utility: `.text-break`. +- New Word break text utility: `.text-break`. -- New Text transform text utilities: `.text-lowercase`, `.text-uppercase`, and `.text-capitalize`. +- New Text transform text utilities: `.text-lowercase`, `.text-uppercase`, and `.text-capitalize`. -- New Font size text utilities: +- New Font size text utilities: - **Display headings**: `.fs-dl`, `.fs-dm`, `.fs-ds` - **Headings**: `.fs-hxl`, `.fs-hl`, `.fs-hm`, `.fs-hs` - **Body**: `.fs-bl`, `.fs-bm`, `.fs-bs` - **Code**: `.fs-cm`, `.fs-cs` -- New Font weight text utilities: `.fw-normal` and `.fw-bold`. +- New Font weight text utilities: `.fw-normal` and `.fw-bold`. -- New Text decoration utilities: `.text-decoration-underline`, `.text-decoration-line-through`, and `.text-decoration-none`. +- New Text decoration utilities: `.text-decoration-underline`, `.text-decoration-line-through`, and `.text-decoration-none`. ### Examples -- New New [Font example]([[docsref:/examples/font]]). +- New New [Font example]([[docsref:/examples/font]]). -- New New [Grid example]([[docsref:/examples/grid/]]). +- New New [Grid example]([[docsref:/examples/grid/]]). -- New New [Grid system example]([[docsref:/examples/grid-system/]]). +- New New [Grid system example]([[docsref:/examples/grid-system/]]). ### CSS and Sass variables -- New A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass file between the semantic and component files. +- New A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass file between the semantic and component files.
        See the new import stack @@ -683,10 +687,10 @@ toc: true ```
        -- New `$enable-container-classes` to enable or disable the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). +- New `$enable-container-classes` to enable or disable the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). -
        - New Sass variables: + New Sass variables:
        • $enable-container-classes
        • $grid-columns
          • @@ -1594,7 +1598,7 @@ toc: true
        -
        - New Sass variables containing CSS variable with value depending on theme: + New Sass variables containing CSS variable with value depending on theme:
        • $ouds-color-action-disabled
        • $ouds-color-action-enabled
          • @@ -1711,7 +1715,7 @@ toc: true
        -
        - New Sass maps: + New Sass maps:
        • $container-fluid-margin
        • $container-max-widths
          • @@ -1736,7 +1740,7 @@ toc: true
        -
        - New Sass mixins: + New Sass mixins:
        • breakpoint-infix()
        • breakpoint-min()
          • @@ -1757,7 +1761,7 @@ toc: true
        -
        - New Keys in $utilities map: + New Keys in $utilities map:
        • border-bottom-ouds
        • border-color-ouds
          • @@ -1828,7 +1832,7 @@ toc: true
        -
        - New CSS variables: + New CSS variables:
        • --bs-body-letter-spacing
        • --bs-color-action-disabled
          • @@ -2033,7 +2037,7 @@ toc: true
        -
        - Warning Dropped Sass variables: + Warning Dropped Sass variables:
        • $ouds-opacity-100
        • $ouds-opacity-300
          • @@ -2045,9 +2049,9 @@ toc: true ### Sass mixins -- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is 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"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/content/typography#sass-mixins]]) for more details. +- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is 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"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/content/typography#sass-mixins]]) for more details. -- New `color-mode({mode}, {root}, {inverted-mode})` mixin. +- New `color-mode({mode}, {root}, {inverted-mode})` mixin. ## v0.0.3 @@ -2061,14 +2065,14 @@ From now on, by default, OUDS Web won’t embed Bootstrap elements (like helpers #### Opacity -- New Opacity utilities: `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-emphasis` and `.opacity-opaque`. +- New Opacity utilities: `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-emphasis` and `.opacity-opaque`. ### CSS and Sass variables -- New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. +- New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. - For instance, without the Bootstrap compatibility mode, you won’t have the opacity Bootstrap utilities such as `.opacity-0`, `.opacity-1`, `.opacity-50`, etc. You will only have the OUDS Web utilities such as `.opacity-invisible`, `.opacity-weaker`, `.opacity-weak`, etc. [Learn more about Bootstrap compatibility]([[docsref:/extend/approach#bootstrap-compatibility]]). -- New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables. +- New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
          See the new import stack @@ -2085,7 +2089,7 @@ From now on, by default, OUDS Web won’t embed Bootstrap elements (like helpers
          -
          - New Sass variables: + New Sass variables:
          • $ouds-opacity-0
          • $ouds-opacity-100
            • @@ -2097,21 +2101,21 @@ From now on, by default, OUDS Web won’t embed Bootstrap elements (like helpers
          -
          - New Sass maps: + New Sass maps:
          • $ouds-opacities
          -
          - New Keys in $utilities map: + New Keys in $utilities map:
          • opacity-ouds
          -
          - Breaking Keys in $utilities map only available when $enable-bootstrap-compatibility is on: + Breaking Keys in $utilities map only available when $enable-bootstrap-compatibility is on:
          • opacity
          diff --git a/site/src/layouts/partials/ExamplesMain.astro b/site/src/layouts/partials/ExamplesMain.astro index f916e19d56..dd22af842c 100644 --- a/site/src/layouts/partials/ExamplesMain.astro +++ b/site/src/layouts/partials/ExamplesMain.astro @@ -104,7 +104,7 @@ import GitHubIcon from '@components/icons/GitHubIcon.astro'
          Bootstrap{' '} - + $enable-bootstrap-compatibility: true diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro index 443c4ca63c..56b6cb2ab3 100644 --- a/site/src/pages/index.astro +++ b/site/src/pages/index.astro @@ -11,8 +11,8 @@ import { getConfig } from '@libs/config'

          - New in v0.5 - Breadcrumb, Bullet list, Badge, and many more + New in v0.5 + Breadcrumb, Bullet list, Badge, and many more

          diff --git a/site/static/docs/[version]/assets/img/components/Tag-input.png b/site/static/docs/[version]/assets/img/components/Tag-input.png new file mode 100644 index 0000000000..a44bdfc4b1 Binary files /dev/null and b/site/static/docs/[version]/assets/img/components/Tag-input.png differ diff --git a/site/static/docs/[version]/assets/img/components/Tag.png b/site/static/docs/[version]/assets/img/components/Tag.png new file mode 100644 index 0000000000..cb84d250b0 Binary files /dev/null and b/site/static/docs/[version]/assets/img/components/Tag.png differ