From 6b7eec89b3c58780ceecc18fac802d935257d129 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 7 Oct 2024 16:58:56 +0200 Subject: [PATCH] Implementing Size, Spacing and Dimension tokens and associated doc --- scss/_maps.scss | 96 +++++ scss/_ouds-maps.scss | 49 --- scss/_root.scss | 39 ++ scss/_utilities.scss | 347 +++++++++++++++-- scss/_variables.scss | 11 +- scss/ouds-web-grid.scss | 2 +- scss/ouds-web-reboot.scss | 2 +- scss/ouds-web-utilities.scss | 2 +- scss/ouds-web.scss | 2 +- .../customize/_ouds-web-bootstrap.test.scss | 2 +- .../_auto-import-of-variables-dark.test.scss | 2 +- scss/tests/mixins/_color-modes.test.scss | 2 +- scss/tests/mixins/_utilities.test.scss | 2 +- scss/tests/utilities/_api.test.scss | 2 +- scss/tokens/_composite.scss | 16 + scss/tokens/_raw.scss | 41 ++ scss/tokens/_semantic.scss | 273 ++++++++++++++ site/assets/scss/docs.scss | 2 +- site/assets/scss/search.scss | 2 +- .../docs/0.0/customize/custom-libraries.md | 2 +- site/content/docs/0.0/customize/options.md | 8 +- .../docs/0.0/migration-from-boosted.md | 304 ++++++++++++++- site/content/docs/0.0/migration.md | 264 ++++++++++++- site/content/docs/0.0/utilities/api.md | 14 +- site/content/docs/0.0/utilities/borders.md | 2 +- site/content/docs/0.0/utilities/opacity.md | 2 +- site/content/docs/0.0/utilities/shadows.md | 2 +- site/content/docs/0.0/utilities/sizing.md | 55 ++- site/content/docs/0.0/utilities/spacing.md | 355 +++++++++++++++++- site/data/sidebar.yml | 2 - site/layouts/partials/home/customize.html | 2 +- 31 files changed, 1775 insertions(+), 131 deletions(-) delete mode 100644 scss/_ouds-maps.scss create mode 100644 scss/tokens/_composite.scss diff --git a/scss/_maps.scss b/scss/_maps.scss index 5c4557d351..dfa87bfd29 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -1,3 +1,99 @@ +// OUDS mod +// scss-docs-start ouds-maps-borders +$ouds-border-radiuses: ( + null: $ouds-border-radius-default, + "none": $ouds-border-radius-none, + "short": $ouds-border-radius-short, + "medium": $ouds-border-radius-medium, + "tall": $ouds-border-radius-tall, + "pill": px-to-rem($ouds-border-radius-pill), + "circle": 50% +) !default; + +$ouds-border-styles: ( + "drag": $ouds-border-style-drag +) !default; + +$ouds-border-widths: ( + "thin": $ouds-border-width-thin, + "medium": $ouds-border-width-medium, + "thick": $ouds-border-width-thick, + "thicker": $ouds-border-width-thicker, +) !default; +// scss-docs-end ouds-maps-borders + +// scss-docs-start ouds-maps-dimension +$ouds-dimension-space-scaled: ( + "none": var(--#{$prefix}space-scaled-none), + "smash": var(--#{$prefix}space-scaled-smash), + "shortest": var(--#{$prefix}space-scaled-shortest), + "shorter": var(--#{$prefix}space-scaled-shorter), + "short": var(--#{$prefix}space-scaled-short), + "medium": var(--#{$prefix}space-scaled-medium), + "tall": var(--#{$prefix}space-scaled-tall), + "taller": var(--#{$prefix}space-scaled-taller), + "tallest": var(--#{$prefix}space-scaled-tallest), + "spacious": var(--#{$prefix}space-scaled-spacious) +) !default; + +// stylelint-disable function-disallowed-list +$ouds-dimension-negative-space-scaled: ( + "nsmash": calc(-1 * var(--#{$prefix}space-scaled-smash)), + "nshortest": calc(-1 * var(--#{$prefix}space-scaled-shortest)), + "nshorter": calc(-1 * var(--#{$prefix}space-scaled-shorter)), + "nshort": calc(-1 * var(--#{$prefix}space-scaled-short)), + "nmedium": calc(-1 * var(--#{$prefix}space-scaled-medium)), + "ntall": calc(-1 * var(--#{$prefix}space-scaled-tall)), + "ntaller": calc(-1 * var(--#{$prefix}space-scaled-taller)), + "ntallest": calc(-1 * var(--#{$prefix}space-scaled-tallest)), + "nspacious": calc(-1 * var(--#{$prefix}space-scaled-spacious)) +) !default; +// stylelint-enable function-disallowed-list + +$ouds-dimension-space-fixed: ( + "none": $ouds-space-fixed-none, + "smash": $ouds-space-fixed-smash, + "shortest": $ouds-space-fixed-shortest, + "shorter": $ouds-space-fixed-shorter, + "short": $ouds-space-fixed-short, + "medium": $ouds-space-fixed-medium, + "tall": $ouds-space-fixed-tall, + "taller": $ouds-space-fixed-taller, + "tallest": $ouds-space-fixed-tallest, + "spacious": $ouds-space-fixed-spacious, + "huge": $ouds-space-fixed-huge, + "jumbo": $ouds-space-fixed-jumbo +) !default; + +$ouds-dimension-negative-space-fixed: if($enable-negative-margins, negativify-map($ouds-dimension-space-fixed), null) !default; +// scss-docs-end ouds-maps-dimension + +// scss-docs-start ouds-maps-elevations +$ouds-elevations: ( + "none": $ouds-elevation-none, + "raised": $ouds-elevation-raised, + "drag": $ouds-elevation-drag, + "overlay-default": $ouds-elevation-overlay-default, + "overlay-emphasized": $ouds-elevation-overlay-emphasized, + "sticky-default": $ouds-elevation-sticky-default, + "sticky-emphasized": $ouds-elevation-sticky-emphasized, + "sticky-navigation-scrolled": $ouds-elevation-sticky-navigation-scrolled, + "focus": $ouds-elevation-focus +) !default; +// scss-docs-end ouds-maps-elevations + +// scss-docs-start ouds-maps-opacities +$ouds-opacities: ( + "transparent": $ouds-opacity-transparent, + "weaker": $ouds-opacity-weaker, + "weak": $ouds-opacity-weak, + "medium": $ouds-opacity-medium, + "strong": $ouds-opacity-strong, + "opaque": $ouds-opacity-opaque +) !default; +// scss-docs-end ouds-maps-opacities +// End mod + // Re-assigned maps // // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more. diff --git a/scss/_ouds-maps.scss b/scss/_ouds-maps.scss deleted file mode 100644 index 40851401fe..0000000000 --- a/scss/_ouds-maps.scss +++ /dev/null @@ -1,49 +0,0 @@ -// OUDS mod -// scss-docs-start ouds-maps-borders -$ouds-border-radiuses: ( - null: $ouds-border-radius-default, - "none": $ouds-border-radius-none, - "short": $ouds-border-radius-short, - "medium": $ouds-border-radius-medium, - "tall": $ouds-border-radius-tall, - "pill": px-to-rem($ouds-border-radius-pill), - "circle": 50% -) !default; - -$ouds-border-styles: ( - "drag": $ouds-border-style-drag -) !default; - -$ouds-border-widths: ( - "thin": $ouds-border-width-thin, - "medium": $ouds-border-width-medium, - "thick": $ouds-border-width-thick, - "thicker": $ouds-border-width-thicker, -) !default; -// scss-docs-end ouds-maps-borders - -// scss-docs-start ouds-maps-elevations -$ouds-elevations: ( - "none": $ouds-elevation-x-none $ouds-elevation-y-none $ouds-elevation-blur-none $ouds-elevation-spread-none $ouds-elevation-color-none, - "raised": $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-elevation-blur-raised $ouds-elevation-spread-raised $ouds-elevation-color-raised, - "drag": $ouds-elevation-x-drag $ouds-elevation-y-drag $ouds-elevation-blur-drag $ouds-elevation-spread-drag $ouds-elevation-color-drag, - "overlay-default": $ouds-elevation-x-overlay-default $ouds-elevation-y-overlay-default $ouds-elevation-blur-overlay-default $ouds-elevation-spread-overlay-default $ouds-elevation-color-overlay-default, - "overlay-emphasized": $ouds-elevation-x-overlay-emphasized $ouds-elevation-y-overlay-emphasized $ouds-elevation-blur-overlay-emphasized $ouds-elevation-spread-overlay-emphasized $ouds-elevation-color-overlay-emphasized, - "sticky-default": $ouds-elevation-x-sticky-default $ouds-elevation-y-sticky-default $ouds-elevation-blur-sticky-default $ouds-elevation-spread-sticky-default $ouds-elevation-color-sticky-default, - "sticky-emphasized": $ouds-elevation-x-sticky-emphasized $ouds-elevation-y-sticky-emphasized $ouds-elevation-blur-sticky-emphasized $ouds-elevation-spread-sticky-emphasized $ouds-elevation-color-sticky-emphasized, - "sticky-navigation-scrolled": $ouds-elevation-x-sticky-navigation-scrolled $ouds-elevation-y-sticky-navigation-scrolled $ouds-elevation-blur-sticky-navigation-scrolled $ouds-elevation-spread-sticky-navigation-scrolled $ouds-elevation-color-sticky-navigation-scrolled, - "focus": $ouds-elevation-x-focus $ouds-elevation-y-focus $ouds-elevation-blur-focus $ouds-elevation-spread-focus $ouds-elevation-color-focus -) !default; -// scss-docs-end ouds-maps-elevations - -// scss-docs-start ouds-maps-opacities -$ouds-opacities: ( - "transparent": $ouds-opacity-transparent, - "weaker": $ouds-opacity-weaker, - "weak": $ouds-opacity-weak, - "medium": $ouds-opacity-medium, - "strong": $ouds-opacity-strong, - "opaque": $ouds-opacity-opaque -) !default; -// scss-docs-end ouds-maps-opacities -// End mod diff --git a/scss/_root.scss b/scss/_root.scss index c107400155..a8338a2d04 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -122,6 +122,45 @@ --#{$prefix}border-color-translucent: #{$border-color-translucent}; // scss-docs-end root-border-var-ouds + // scss-docs-start root-space-scaled-var-ouds + --#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-mobile}; + --#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-mobile}; + --#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-mobile}; + --#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-mobile}; + --#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-mobile}; + --#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-mobile}; + --#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-mobile}; + --#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-mobile}; + --#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-mobile}; + --#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-mobile}; + + @include media-breakpoint-up(md) { + --#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-tablet}; + --#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-tablet}; + --#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-tablet}; + --#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-tablet}; + --#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-tablet}; + --#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-tablet}; + --#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-tablet}; + --#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-tablet}; + --#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-tablet}; + --#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-tablet}; + } + + @include media-breakpoint-up(xl) { + --#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-desktop}; + --#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-desktop}; + --#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-desktop}; + --#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-desktop}; + --#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-desktop}; + --#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-desktop}; + --#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-desktop}; + --#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-desktop}; + --#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-desktop}; + --#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-desktop}; + } + // scss-docs-end root-space-scaled-var-ouds + // scss-docs-start root-border-var @if $enable-bootstrap-compatibility { --#{$prefix}border-radius: #{$border-radius}; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index c288006092..044732b3ad 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -426,156 +426,453 @@ $utilities: map-merge( ), ), // scss-docs-end utils-flex - // Margin utilities // scss-docs-start utils-spacing + // Margin utilities "margin": ( responsive: true, property: margin, class: m, - values: map-merge($spacers, (auto: auto)) + values: $spacers, // OUDS mod: `auto` value handled by `margin-ouds` + bootstrap-compatibility: true ), "margin-x": ( responsive: true, property: margin-right margin-left, class: mx, - values: map-merge($spacers, (auto: auto)) + values: $spacers, // OUDS mod: `auto` value handled by `margin-x-ouds` + bootstrap-compatibility: true ), "margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, - values: map-merge($spacers, (auto: auto)) + values: $spacers, // OUDS mod: `auto` value handled by `margin-y-ouds` + bootstrap-compatibility: true ), "margin-top": ( responsive: true, property: margin-top, class: mt, - values: map-merge($spacers, (auto: auto)) + values: $spacers, // OUDS mod: `auto` value handled by `margin-top-ouds` + bootstrap-compatibility: true ), "margin-end": ( responsive: true, property: margin-right, class: me, - values: map-merge($spacers, (auto: auto)) + values: $spacers, // OUDS mod: `auto` value handled by `margin-end-ouds` + bootstrap-compatibility: true ), "margin-bottom": ( responsive: true, property: margin-bottom, class: mb, - values: map-merge($spacers, (auto: auto)) + values: $spacers, // OUDS mod: `auto` value handled by `margin-bottom-ouds` + bootstrap-compatibility: true ), "margin-start": ( responsive: true, property: margin-left, class: ms, - values: map-merge($spacers, (auto: auto)) + values: $spacers, // OUDS mod: `auto` value handled by `margin-start-ouds` + bootstrap-compatibility: true ), // Negative margin utilities "negative-margin": ( responsive: true, property: margin, class: m, - values: $negative-spacers + values: $negative-spacers, + bootstrap-compatibility: true ), "negative-margin-x": ( responsive: true, property: margin-right margin-left, class: mx, - values: $negative-spacers + values: $negative-spacers, + bootstrap-compatibility: true ), "negative-margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, - values: $negative-spacers + values: $negative-spacers, + bootstrap-compatibility: true ), "negative-margin-top": ( responsive: true, property: margin-top, class: mt, - values: $negative-spacers + values: $negative-spacers, + bootstrap-compatibility: true ), "negative-margin-end": ( responsive: true, property: margin-right, class: me, - values: $negative-spacers + values: $negative-spacers, + bootstrap-compatibility: true ), "negative-margin-bottom": ( responsive: true, property: margin-bottom, class: mb, - values: $negative-spacers + values: $negative-spacers, + bootstrap-compatibility: true ), "negative-margin-start": ( responsive: true, property: margin-left, class: ms, - values: $negative-spacers + values: $negative-spacers, + bootstrap-compatibility: true ), // Padding utilities "padding": ( responsive: true, property: padding, class: p, - values: $spacers + values: $spacers, + bootstrap-compatibility: true ), "padding-x": ( responsive: true, property: padding-right padding-left, class: px, - values: $spacers + values: $spacers, + bootstrap-compatibility: true ), "padding-y": ( responsive: true, property: padding-top padding-bottom, class: py, - values: $spacers + values: $spacers, + bootstrap-compatibility: true ), "padding-top": ( responsive: true, property: padding-top, class: pt, - values: $spacers + values: $spacers, + bootstrap-compatibility: true ), "padding-end": ( responsive: true, property: padding-right, class: pe, - values: $spacers + values: $spacers, + bootstrap-compatibility: true ), "padding-bottom": ( responsive: true, property: padding-bottom, class: pb, - values: $spacers + values: $spacers, + bootstrap-compatibility: true ), "padding-start": ( responsive: true, property: padding-left, class: ps, - values: $spacers + values: $spacers, + bootstrap-compatibility: true ), // Gap utility "gap": ( responsive: true, property: gap, class: gap, - values: $spacers + values: $spacers, + bootstrap-compatibility: true ), "row-gap": ( responsive: true, property: row-gap, class: row-gap, - values: $spacers + values: $spacers, + bootstrap-compatibility: true ), "column-gap": ( responsive: true, property: column-gap, class: column-gap, - values: $spacers + values: $spacers, + bootstrap-compatibility: true ), // scss-docs-end utils-spacing + // TODO: Decide whether we keep them stacked under or split under each utilities + // First scenario: some issue such as `.gap-none.row-gap-3` doesn't work, but `.gap-0.row-gap-medium` works well + // Second scenario: some issue regarding the documentation + // scss-docs-start utils-spacing-ouds + // Margin utilities + "margin-ouds": ( + responsive: true, + property: margin, + class: m, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-scaled-ouds": ( + property: margin, + class: m-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-x-ouds": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-x-scaled-ouds": ( + property: margin-right margin-left, + class: mx-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-y-ouds": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-y-scaled-ouds": ( + property: margin-top margin-bottom, + class: my-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-top-ouds": ( + responsive: true, + property: margin-top, + class: mt, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-top-scaled-ouds": ( + property: margin-top, + class: mt-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-end-ouds": ( + responsive: true, + property: margin-right, + class: me, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-end-scaled-ouds": ( + property: margin-right, + class: me-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-bottom-ouds": ( + responsive: true, + property: margin-bottom, + class: mb, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-bottom-scaled-ouds": ( + property: margin-bottom, + class: mb-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-start-ouds": ( + responsive: true, + property: margin-left, + class: ms, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-start-scaled-ouds": ( + property: margin-left, + class: ms-scaled, + values: $ouds-dimension-space-scaled + ), + // Negative margin utilities + "negative-margin-ouds": ( + responsive: true, + property: margin, + class: m, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-scaled-ouds": ( + property: margin, + class: m-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-x-ouds": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-x-scaled-ouds": ( + property: margin-right margin-left, + class: mx-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-y-ouds": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-y-scaled-ouds": ( + property: margin-top margin-bottom, + class: my-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-top-ouds": ( + responsive: true, + property: margin-top, + class: mt, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-top-scaled-ouds": ( + property: margin-top, + class: mt-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-end-ouds": ( + responsive: true, + property: margin-right, + class: me, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-end-scaled-ouds": ( + property: margin-right, + class: me-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-bottom-ouds": ( + responsive: true, + property: margin-bottom, + class: mb, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-bottom-scaled-ouds": ( + property: margin-bottom, + class: mb-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-start-ouds": ( + responsive: true, + property: margin-left, + class: ms, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-start-scaled-ouds": ( + property: margin-left, + class: ms-scaled, + values: $ouds-dimension-negative-space-scaled + ), + // Padding utilities + "padding-ouds": ( + responsive: true, + property: padding, + class: p, + values: $ouds-dimension-space-fixed + ), + "padding-scaled-ouds": ( + property: padding, + class: p-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-x-ouds": ( + responsive: true, + property: padding-right padding-left, + class: px, + values: $ouds-dimension-space-fixed + ), + "padding-x-scaled-ouds": ( + property: padding-right padding-left, + class: px-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-y-ouds": ( + responsive: true, + property: padding-top padding-bottom, + class: py, + values: $ouds-dimension-space-fixed + ), + "padding-y-scaled-ouds": ( + property: padding-top padding-bottom, + class: py-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-top-ouds": ( + responsive: true, + property: padding-top, + class: pt, + values: $ouds-dimension-space-fixed + ), + "padding-top-scaled-ouds": ( + property: padding-top, + class: pt-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-end-ouds": ( + responsive: true, + property: padding-right, + class: pe, + values: $ouds-dimension-space-fixed + ), + "padding-end-scaled-ouds": ( + property: padding-right, + class: pe-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-bottom-ouds": ( + responsive: true, + property: padding-bottom, + class: pb, + values: $ouds-dimension-space-fixed + ), + "padding-bottom-scaled-ouds": ( + property: padding-bottom, + class: pb-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-start-ouds": ( + responsive: true, + property: padding-left, + class: ps, + values: $ouds-dimension-space-fixed + ), + "padding-start-scaled-ouds": ( + property: padding-left, + class: ps-scaled, + values: $ouds-dimension-space-scaled + ), + // Gap utility + "gap-ouds": ( + responsive: true, + property: gap, + class: gap, + values: $ouds-dimension-space-fixed + ), + "gap-scaled-ouds": ( + property: gap, + class: gap-scaled, + values: $ouds-dimension-space-scaled + ), + "row-gap-ouds": ( + responsive: true, + property: row-gap, + class: row-gap, + values: $ouds-dimension-space-fixed + ), + "row-gap-scaled-ouds": ( + property: row-gap, + class: row-gap-scaled, + values: $ouds-dimension-space-scaled + ), + "column-gap-ouds": ( + responsive: true, + property: column-gap, + class: column-gap, + values: $ouds-dimension-space-fixed + ), + "column-gap-scaled-ouds": ( + property: column-gap, + class: column-gap-scaled, + values: $ouds-dimension-space-scaled + ), + // scss-docs-end utils-spacing-ouds // Text // scss-docs-start utils-text "font-family": ( diff --git a/scss/_variables.scss b/scss/_variables.scss index c03876a419..b4eae0ff06 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -464,7 +464,10 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default; // You can add more entries to the $spacers map, should you need more variation. // scss-docs-start spacer-variables-maps -$spacer: 1.25rem !default; // OUDS mod +// TODO: Decide which value to use here since it could have many impacts on projects +// $spacer: px-to-rem($ouds-dimension-250) !default; // OUDS mod: instead of: `1rem` +// $spacer: px-to-rem($ouds-dimension-md) !default; // OUDS mod: instead of: `1rem` +$spacer: 1.25rem !default; // OUDS mod: instead of: `1rem` $spacers: ( 0: 0, 1: $spacer * .25, @@ -655,9 +658,9 @@ $focus-visible-outer-color: $black !default; // OUDS mod // scss-docs-end focus-visible-variables // scss-docs-start box-shadow-variables -$box-shadow: map-get($ouds-elevations, "overlay-default") !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)` -$box-shadow-sm: map-get($ouds-elevations, "overlay-default") !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)` -$box-shadow-lg: map-get($ouds-elevations, "overlay-emphasized") !default; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)` +$box-shadow: $ouds-elevation-overlay-default !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)` +$box-shadow-sm: $ouds-elevation-overlay-default !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)` +$box-shadow-lg: $ouds-elevation-overlay-emphasized !default; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)` $box-shadow-inset: null !default; // OUDS mod: instead of `inset 0 1px 2px rgba($black, .075)` // scss-docs-end box-shadow-variables diff --git a/scss/ouds-web-grid.scss b/scss/ouds-web-grid.scss index d894e4bbf5..bf06302c33 100644 --- a/scss/ouds-web-grid.scss +++ b/scss/ouds-web-grid.scss @@ -6,8 +6,8 @@ $include-column-box-sizing: true !default; @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; +@import "tokens/composite"; @import "tokens/component"; -@import "ouds-maps"; @import "variables"; @import "variables-dark"; @import "maps"; diff --git a/scss/ouds-web-reboot.scss b/scss/ouds-web-reboot.scss index 0282ab376a..6ea8a0e0cf 100644 --- a/scss/ouds-web-reboot.scss +++ b/scss/ouds-web-reboot.scss @@ -4,8 +4,8 @@ @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; +@import "tokens/composite"; @import "tokens/component"; -@import "ouds-maps"; @import "variables"; @import "variables-dark"; @import "maps"; diff --git a/scss/ouds-web-utilities.scss b/scss/ouds-web-utilities.scss index 0ec484a8f7..9a486fd651 100644 --- a/scss/ouds-web-utilities.scss +++ b/scss/ouds-web-utilities.scss @@ -5,8 +5,8 @@ @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; +@import "tokens/composite"; @import "tokens/component"; -@import "ouds-maps"; @import "variables"; @import "variables-dark"; @import "maps"; diff --git a/scss/ouds-web.scss b/scss/ouds-web.scss index ce4c13c43a..26771c97d7 100644 --- a/scss/ouds-web.scss +++ b/scss/ouds-web.scss @@ -6,8 +6,8 @@ @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; +@import "tokens/composite"; @import "tokens/component"; -@import "ouds-maps"; @import "variables"; @import "variables-dark"; @import "maps"; diff --git a/scss/tests/customize/_ouds-web-bootstrap.test.scss b/scss/tests/customize/_ouds-web-bootstrap.test.scss index 28253c6c80..e587846903 100644 --- a/scss/tests/customize/_ouds-web-bootstrap.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap.test.scss @@ -1,8 +1,8 @@ @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; +@import "../../tokens/composite"; @import "../../tokens/component"; -@import "../../ouds-maps"; @import "../../variables"; @import "../../maps"; @import "../../mixins"; diff --git a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss index 295740ac02..e02ca021b9 100644 --- a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss +++ b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss @@ -3,8 +3,8 @@ @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; +@import "../../tokens/composite"; @import "../../tokens/component"; -@import "../../ouds-maps"; @import "../../variables"; // Voluntarily not importing _variables-dark.scss @import "../../maps"; diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss index 0ec15d38e2..6d29be555b 100644 --- a/scss/tests/mixins/_color-modes.test.scss +++ b/scss/tests/mixins/_color-modes.test.scss @@ -3,8 +3,8 @@ @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; +@import "../../tokens/composite"; @import "../../tokens/component"; -@import "../../ouds-maps"; @import "../../variables"; @import "../../variables-dark"; @import "../../maps"; diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss index ffa366c11e..ba6d401500 100644 --- a/scss/tests/mixins/_utilities.test.scss +++ b/scss/tests/mixins/_utilities.test.scss @@ -6,8 +6,8 @@ $enable-important-utilities: false; @import "../../functions"; // Added because needed by "variables" @import "../../tokens/raw"; @import "../../tokens/semantic"; +@import "../../tokens/composite"; @import "../../tokens/component"; -@import "../../ouds-maps"; @import "../../variables"; // Added to avoid undefined variable error like `$white` // End mod @import "../../mixins/utilities"; diff --git a/scss/tests/utilities/_api.test.scss b/scss/tests/utilities/_api.test.scss index 51da71577d..9fe38d40aa 100644 --- a/scss/tests/utilities/_api.test.scss +++ b/scss/tests/utilities/_api.test.scss @@ -1,8 +1,8 @@ @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; +@import "../../tokens/composite"; @import "../../tokens/component"; -@import "../../ouds-maps"; @import "../../variables"; @import "../../variables-dark"; @import "../../maps"; diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss new file mode 100644 index 0000000000..46a627f2d9 --- /dev/null +++ b/scss/tokens/_composite.scss @@ -0,0 +1,16 @@ +//// Composite values +//// Manual insertion of composite values + +// Elevation + +// scss-docs-start ouds-composite-elevation +$ouds-elevation-none: $ouds-elevation-x-none $ouds-elevation-y-none $ouds-elevation-blur-none $ouds-elevation-spread-none $ouds-elevation-color-none !default; +$ouds-elevation-raised: $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-elevation-blur-raised $ouds-elevation-spread-raised $ouds-elevation-color-raised !default; +$ouds-elevation-drag: $ouds-elevation-x-drag $ouds-elevation-y-drag $ouds-elevation-blur-drag $ouds-elevation-spread-drag $ouds-elevation-color-drag !default; +$ouds-elevation-overlay-default: $ouds-elevation-x-overlay-default $ouds-elevation-y-overlay-default $ouds-elevation-blur-overlay-default $ouds-elevation-spread-overlay-default $ouds-elevation-color-overlay-default !default; +$ouds-elevation-overlay-emphasized: $ouds-elevation-x-overlay-emphasized $ouds-elevation-y-overlay-emphasized $ouds-elevation-blur-overlay-emphasized $ouds-elevation-spread-overlay-emphasized $ouds-elevation-color-overlay-emphasized !default; +$ouds-elevation-sticky-default: $ouds-elevation-x-sticky-default $ouds-elevation-y-sticky-default $ouds-elevation-blur-sticky-default $ouds-elevation-spread-sticky-default $ouds-elevation-color-sticky-default !default; +$ouds-elevation-sticky-emphasized: $ouds-elevation-x-sticky-emphasized $ouds-elevation-y-sticky-emphasized $ouds-elevation-blur-sticky-emphasized $ouds-elevation-spread-sticky-emphasized $ouds-elevation-color-sticky-emphasized !default; +$ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation-scrolled $ouds-elevation-y-sticky-navigation-scrolled $ouds-elevation-blur-sticky-navigation-scrolled $ouds-elevation-spread-sticky-navigation-scrolled $ouds-elevation-color-sticky-navigation-scrolled !default; +$ouds-elevation-focus: $ouds-elevation-x-focus $ouds-elevation-y-focus $ouds-elevation-blur-focus $ouds-elevation-spread-focus $ouds-elevation-color-focus !default; +// scss-docs-end ouds-composite-elevation diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index 648828e26b..e1e07ba012 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -36,6 +36,47 @@ $ouds-border-width-100: $ouds-border-base !default; // $ouds-border-width-200: $ouds-border-base * 2 !default; // scss-docs-end ouds-raw-border +// Dimension + +// scss-docs-start ouds-raw-dimension +$ouds-dimension-base: 4px !default; +$ouds-dimension-0: $ouds-dimension-base * 0 !default; // 0 +$ouds-dimension-25: $ouds-dimension-base * .5 !default; // 2 +$ouds-dimension-50: $ouds-dimension-base * 1 !default; // 4 +$ouds-dimension-75: $ouds-dimension-base * 1.5 !default; // 6 +$ouds-dimension-100: $ouds-dimension-base * 2 !default; // 8 +// $ouds-dimension-125: $ouds-dimension-base * 2.5 !default; // 10 +$ouds-dimension-150: $ouds-dimension-base * 3 !default; // 12 +$ouds-dimension-200: $ouds-dimension-base * 4 !default; // 16 +$ouds-dimension-250: $ouds-dimension-base * 5 !default; // 20 +$ouds-dimension-300: $ouds-dimension-base * 6 !default; // 24 +$ouds-dimension-350: $ouds-dimension-base * 7 !default; // 28 +$ouds-dimension-400: $ouds-dimension-base * 8 !default; // 32 +$ouds-dimension-450: $ouds-dimension-base * 9 !default; // 36 +$ouds-dimension-500: $ouds-dimension-base * 10 !default; // 40 +$ouds-dimension-550: $ouds-dimension-base * 11 !default; // 44 +$ouds-dimension-600: $ouds-dimension-base * 12 !default; // 48 +$ouds-dimension-650: $ouds-dimension-base * 13 !default; // 52 +$ouds-dimension-700: $ouds-dimension-base * 14 !default; // 56 +$ouds-dimension-750: $ouds-dimension-base * 15 !default; // 60 +$ouds-dimension-800: $ouds-dimension-base * 16 !default; // 64 +// $ouds-dimension-850: $ouds-dimension-base * 17 !default; // 68 +$ouds-dimension-900: $ouds-dimension-base * 18 !default; // 72 +$ouds-dimension-1000: $ouds-dimension-base * 20 !default; // 80 +$ouds-dimension-1200: $ouds-dimension-base * 24 !default; // 96 +$ouds-dimension-1400: $ouds-dimension-base * 28 !default; // 112 +$ouds-dimension-1600: $ouds-dimension-base * 32 !default; // 128 +$ouds-dimension-1800: $ouds-dimension-base * 36 !default; // 144 +// $ouds-dimension-2000: $ouds-dimension-base * 40 !default; // 160 +// $ouds-dimension-3000: $ouds-dimension-base * 80 !default; // 320 +// $ouds-dimension-4000: $ouds-dimension-base * 120 !default; // 480 +// $ouds-dimension-5000: $ouds-dimension-base * 140 !default; // 560 +// $ouds-dimension-6000: $ouds-dimension-base * 160 !default; // 640 +// $ouds-dimension-7000: $ouds-dimension-base * 180 !default; // 720 +// $ouds-dimension-9000: $ouds-dimension-base * 220 !default; // 880 +// $ouds-dimension-11000: $ouds-dimension-base * 260 !default; // 1040 +// scss-docs-end ouds-raw-dimension + // Elevation // scss-docs-start ouds-raw-elevation diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index d7a68b484c..d21188a7de 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -23,6 +23,36 @@ $ouds-border-width-thicker: $ouds-border-width-100 !default; // $ouds-border-width-outside-focus: $ouds-border-width-50 !default; // scss-docs-end ouds-semantic-border +// Dimension + +// scss-docs-start ouds-semantic-dimension +// $ouds-dimension-xs: $ouds-dimension-400 !default; +// $ouds-dimension-xl: $ouds-dimension-600 !default; +// $ouds-dimension-sm: $ouds-dimension-450 !default; +// $ouds-dimension-none: $ouds-dimension-0 !default; +// $ouds-dimension-md: $ouds-dimension-500 !default; +// $ouds-dimension-lg: $ouds-dimension-550 !default; +// $ouds-dimension-9xs: $ouds-dimension-50 !default; +// $ouds-dimension-9xl: $ouds-dimension-1400 !default; +// $ouds-dimension-8xs: $ouds-dimension-75 !default; +// $ouds-dimension-8xl: $ouds-dimension-1200 !default; +// $ouds-dimension-7xs: $ouds-dimension-100 !default; +// $ouds-dimension-7xl: $ouds-dimension-1000 !default; +// $ouds-dimension-6xs: $ouds-dimension-150 !default; +// $ouds-dimension-6xl: $ouds-dimension-900 !default; +// $ouds-dimension-5xs: $ouds-dimension-200 !default; +// $ouds-dimension-5xl: $ouds-dimension-800 !default; +// $ouds-dimension-4xs: $ouds-dimension-250 !default; +// $ouds-dimension-4xl: $ouds-dimension-750 !default; +// $ouds-dimension-3xs: $ouds-dimension-300 !default; +// $ouds-dimension-3xl: $ouds-dimension-700 !default; +// $ouds-dimension-2xs: $ouds-dimension-350 !default; +// $ouds-dimension-2xl: $ouds-dimension-650 !default; +// $ouds-dimension-11xl: $ouds-dimension-1800 !default; +// $ouds-dimension-10xs: $ouds-dimension-25 !default; +// $ouds-dimension-10xl: $ouds-dimension-1600 !default; +// scss-docs-end ouds-semantic-dimension + // Elevation // scss-docs-start ouds-semantic-elevation @@ -148,3 +178,246 @@ $ouds-opacity-medium: $ouds-opacity-500 !default; $ouds-opacity-strong: $ouds-opacity-700 !default; $ouds-opacity-opaque: $ouds-opacity-900 !default; // scss-docs-end ouds-semantic-opacity + +// Size + +// scss-docs-start ouds-semantic-size +// $ouds-size-type-max-width-heading-xlarge-tablet: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-heading-xlarge-mobile: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-heading-xlarge-desktop: $ouds-dimension-11000 !default; +// $ouds-size-type-max-width-heading-small-tablet: $ouds-dimension-6000 !default; +// $ouds-size-type-max-width-heading-small-mobile: $ouds-dimension-6000 !default; +// $ouds-size-type-max-width-heading-small-desktop: $ouds-dimension-7000 !default; +// $ouds-size-type-max-width-heading-medium-tablet: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-heading-medium-mobile: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-heading-medium-desktop: $ouds-dimension-11000 !default; +// $ouds-size-type-max-width-heading-large-tablet: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-heading-large-mobile: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-heading-large-desktop: $ouds-dimension-11000 !default; +// $ouds-size-type-max-width-display-small-tablet: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-display-small-mobile: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-display-small-desktop: $ouds-dimension-11000 !default; +// $ouds-size-type-max-width-display-medium-tablet: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-display-medium-mobile: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-display-medium-desktop: $ouds-dimension-11000 !default; +// $ouds-size-type-max-width-display-large-tablet: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-display-large-mobile: $ouds-dimension-9000 !default; +// $ouds-size-type-max-width-display-large-desktop: $ouds-dimension-11000 !default; +// $ouds-size-type-max-width-body-small-tablet: $ouds-dimension-6000 !default; +// $ouds-size-type-max-width-body-small-mobile: $ouds-dimension-6000 !default; +// $ouds-size-type-max-width-body-small-desktop: $ouds-dimension-6000 !default; +// $ouds-size-type-max-width-body-medium-tablet: $ouds-dimension-6000 !default; +// $ouds-size-type-max-width-body-medium-mobile: $ouds-dimension-6000 !default; +// $ouds-size-type-max-width-body-medium-desktop: $ouds-dimension-7000 !default; +// $ouds-size-type-max-width-body-large-tablet: $ouds-dimension-6000 !default; +// $ouds-size-type-max-width-body-large-mobile: $ouds-dimension-6000 !default; +// $ouds-size-type-max-width-body-large-desktop: $ouds-dimension-7000 !default; +// $ouds-size-icon-with-heading-xlarge-size-tall-tablet: $ouds-dimension-800 !default; +// $ouds-size-icon-with-heading-xlarge-size-tall-mobile: $ouds-dimension-650 !default; +// $ouds-size-icon-with-heading-xlarge-size-tall-desktop: $ouds-dimension-800 !default; +// $ouds-size-icon-with-heading-xlarge-size-short-tablet: $ouds-dimension-650 !default; +// $ouds-size-icon-with-heading-xlarge-size-short-mobile: $ouds-dimension-550 !default; +// $ouds-size-icon-with-heading-xlarge-size-short-desktop: $ouds-dimension-700 !default; +// $ouds-size-icon-with-heading-xlarge-size-medium-tablet: $ouds-dimension-700 !default; +// $ouds-size-icon-with-heading-xlarge-size-medium-mobile: $ouds-dimension-600 !default; +// $ouds-size-icon-with-heading-xlarge-size-medium-desktop: $ouds-dimension-750 !default; +// $ouds-size-icon-with-heading-small-size-tall-tablet: $ouds-dimension-550 !default; +// $ouds-size-icon-with-heading-small-size-tall-mobile: $ouds-dimension-550 !default; +// $ouds-size-icon-with-heading-small-size-tall-desktop: $ouds-dimension-600 !default; +// $ouds-size-icon-with-heading-small-size-short-tablet: $ouds-dimension-400 !default; +// $ouds-size-icon-with-heading-small-size-short-mobile: $ouds-dimension-400 !default; +// $ouds-size-icon-with-heading-small-size-short-desktop: $ouds-dimension-500 !default; +// $ouds-size-icon-with-heading-small-size-medium-tablet: $ouds-dimension-500 !default; +// $ouds-size-icon-with-heading-small-size-medium-mobile: $ouds-dimension-500 !default; +// $ouds-size-icon-with-heading-small-size-medium-desktop: $ouds-dimension-550 !default; +// $ouds-size-icon-with-heading-medium-size-tall-tablet: $ouds-dimension-600 !default; +// $ouds-size-icon-with-heading-medium-size-tall-mobile: $ouds-dimension-550 !default; +// $ouds-size-icon-with-heading-medium-size-tall-desktop: $ouds-dimension-650 !default; +// $ouds-size-icon-with-heading-medium-size-short-tablet: $ouds-dimension-500 !default; +// $ouds-size-icon-with-heading-medium-size-short-mobile: $ouds-dimension-400 !default; +// $ouds-size-icon-with-heading-medium-size-short-desktop: $ouds-dimension-550 !default; +// $ouds-size-icon-with-heading-medium-size-medium-tablet: $ouds-dimension-550 !default; +// $ouds-size-icon-with-heading-medium-size-medium-mobile: $ouds-dimension-500 !default; +// $ouds-size-icon-with-heading-medium-size-medium-desktop: $ouds-dimension-600 !default; +// $ouds-size-icon-with-heading-large-size-tall-tablet: $ouds-dimension-650 !default; +// $ouds-size-icon-with-heading-large-size-tall-mobile: $ouds-dimension-600 !default; +// $ouds-size-icon-with-heading-large-size-tall-desktop: $ouds-dimension-700 !default; +// $ouds-size-icon-with-heading-large-size-short-tablet: $ouds-dimension-550 !default; +// $ouds-size-icon-with-heading-large-size-short-mobile: $ouds-dimension-500 !default; +// $ouds-size-icon-with-heading-large-size-short-desktop: $ouds-dimension-600 !default; +// $ouds-size-icon-with-heading-large-size-medium-tablet: $ouds-dimension-600 !default; +// $ouds-size-icon-with-heading-large-size-medium-mobile: $ouds-dimension-550 !default; +// $ouds-size-icon-with-heading-large-size-medium-desktop: $ouds-dimension-650 !default; +// $ouds-size-icon-with-body-small-size-tall-tablet: $ouds-dimension-250 !default; +// $ouds-size-icon-with-body-small-size-tall-mobile: $ouds-dimension-250 !default; +// $ouds-size-icon-with-body-small-size-tall-desktop: $ouds-dimension-300 !default; +// $ouds-size-icon-with-body-small-size-short-tablet: $ouds-dimension-150 !default; +// $ouds-size-icon-with-body-small-size-short-mobile: $ouds-dimension-150 !default; +// $ouds-size-icon-with-body-small-size-short-desktop: $ouds-dimension-200 !default; +// $ouds-size-icon-with-body-small-size-medium-tablet: $ouds-dimension-200 !default; +// $ouds-size-icon-with-body-small-size-medium-mobile: $ouds-dimension-200 !default; +// $ouds-size-icon-with-body-small-size-medium-desktop: $ouds-dimension-250 !default; +// $ouds-size-icon-with-body-medium-size-tall-tablet: $ouds-dimension-300 !default; +// $ouds-size-icon-with-body-medium-size-tall-mobile: $ouds-dimension-300 !default; +// $ouds-size-icon-with-body-medium-size-tall-desktop: $ouds-dimension-350 !default; +// $ouds-size-icon-with-body-medium-size-short-tablet: $ouds-dimension-200 !default; +// $ouds-size-icon-with-body-medium-size-short-mobile: $ouds-dimension-200 !default; +// $ouds-size-icon-with-body-medium-size-short-desktop: $ouds-dimension-250 !default; +// $ouds-size-icon-with-body-medium-size-medium-tablet: $ouds-dimension-250 !default; +// $ouds-size-icon-with-body-medium-size-medium-mobile: $ouds-dimension-250 !default; +// $ouds-size-icon-with-body-medium-size-medium-desktop: $ouds-dimension-300 !default; +// $ouds-size-icon-with-body-large-size-tall-tablet: $ouds-dimension-350 !default; +// $ouds-size-icon-with-body-large-size-tall-mobile: $ouds-dimension-350 !default; +// $ouds-size-icon-with-body-large-size-tall-desktop: $ouds-dimension-550 !default; +// $ouds-size-icon-with-body-large-size-short-tablet: $ouds-dimension-250 !default; +// $ouds-size-icon-with-body-large-size-short-mobile: $ouds-dimension-250 !default; +// $ouds-size-icon-with-body-large-size-short-desktop: $ouds-dimension-400 !default; +// $ouds-size-icon-with-body-large-size-medium-tablet: $ouds-dimension-300 !default; +// $ouds-size-icon-with-body-large-size-medium-mobile: $ouds-dimension-300 !default; +// $ouds-size-icon-with-body-large-size-medium-desktop: $ouds-dimension-500 !default; +// $ouds-size-icon-decorative-tallest: $ouds-dimension-900 !default; +// $ouds-size-icon-decorative-taller: $ouds-dimension-700 !default; +// $ouds-size-icon-decorative-tall: $ouds-dimension-600 !default; +// $ouds-size-icon-decorative-shortest: $ouds-dimension-200 !default; +// $ouds-size-icon-decorative-shorter: $ouds-dimension-300 !default; +// $ouds-size-icon-decorative-short: $ouds-dimension-400 !default; +// $ouds-size-icon-decorative-medium: $ouds-dimension-500 !default; +// $ouds-size-icon-with-label-xlarge-size-tall: $ouds-dimension-lg !default; +// $ouds-size-icon-with-label-xlarge-size-short: $ouds-dimension-xs !default; +// $ouds-size-icon-with-label-xlarge-size-medium: $ouds-dimension-md !default; +// $ouds-size-icon-with-label-small-size-tall: $ouds-dimension-4xs !default; +// $ouds-size-icon-with-label-small-size-short: $ouds-dimension-6xs !default; +// $ouds-size-icon-with-label-small-size-medium: $ouds-dimension-5xs !default; +// $ouds-size-icon-with-label-medium-size-tall: $ouds-dimension-3xs !default; +// $ouds-size-icon-with-label-medium-size-short: $ouds-dimension-5xs !default; +// $ouds-size-icon-with-label-medium-size-medium: $ouds-dimension-4xs !default; +// $ouds-size-icon-with-label-large-size-taller: $ouds-dimension-lg !default; +// $ouds-size-icon-with-label-large-size-tall: $ouds-dimension-xs !default; +// $ouds-size-icon-with-label-large-size-shorter: $ouds-dimension-4xs !default; +// $ouds-size-icon-with-label-large-size-short: $ouds-dimension-3xs !default; +// $ouds-size-icon-with-label-large-size-medium: $ouds-dimension-2xs !default; +// scss-docs-end ouds-semantic-size + +// Space + +// scss-docs-start ouds-semantic-space +$ouds-space-scaled-tallest-tablet: $ouds-dimension-600 !default; +$ouds-space-scaled-tallest-mobile: $ouds-dimension-500 !default; +$ouds-space-scaled-tallest-desktop: $ouds-dimension-700 !default; +$ouds-space-scaled-taller-tablet: $ouds-dimension-500 !default; +$ouds-space-scaled-taller-mobile: $ouds-dimension-400 !default; +$ouds-space-scaled-taller-desktop: $ouds-dimension-600 !default; +$ouds-space-scaled-tall-tablet: $ouds-dimension-400 !default; +$ouds-space-scaled-tall-mobile: $ouds-dimension-300 !default; +$ouds-space-scaled-tall-desktop: $ouds-dimension-500 !default; +$ouds-space-scaled-spacious-tablet: $ouds-dimension-700 !default; +$ouds-space-scaled-spacious-mobile: $ouds-dimension-600 !default; +$ouds-space-scaled-spacious-desktop: $ouds-dimension-800 !default; +$ouds-space-scaled-smash-tablet: $ouds-dimension-50 !default; +$ouds-space-scaled-smash-mobile: $ouds-dimension-25 !default; +$ouds-space-scaled-smash-desktop: $ouds-dimension-50 !default; +$ouds-space-scaled-shortest-tablet: $ouds-dimension-100 !default; +$ouds-space-scaled-shortest-mobile: $ouds-dimension-50 !default; +$ouds-space-scaled-shortest-desktop: $ouds-dimension-100 !default; +$ouds-space-scaled-shorter-tablet: $ouds-dimension-150 !default; +$ouds-space-scaled-shorter-mobile: $ouds-dimension-100 !default; +$ouds-space-scaled-shorter-desktop: $ouds-dimension-200 !default; +$ouds-space-scaled-short-tablet: $ouds-dimension-200 !default; +$ouds-space-scaled-short-mobile: $ouds-dimension-150 !default; +$ouds-space-scaled-short-desktop: $ouds-dimension-300 !default; +$ouds-space-scaled-none-tablet: $ouds-dimension-0 !default; +$ouds-space-scaled-none-mobile: $ouds-dimension-0 !default; +$ouds-space-scaled-none-desktop: $ouds-dimension-0 !default; +$ouds-space-scaled-medium-tablet: $ouds-dimension-300 !default; +$ouds-space-scaled-medium-mobile: $ouds-dimension-200 !default; +$ouds-space-scaled-medium-desktop: $ouds-dimension-400 !default; +$ouds-space-fixed-tallest: $ouds-dimension-500 !default; +$ouds-space-fixed-taller: $ouds-dimension-400 !default; +$ouds-space-fixed-tall: $ouds-dimension-300 !default; +$ouds-space-fixed-spacious: $ouds-dimension-600 !default; +$ouds-space-fixed-smash: $ouds-dimension-25 !default; +$ouds-space-fixed-shortest: $ouds-dimension-50 !default; +$ouds-space-fixed-shorter: $ouds-dimension-100 !default; +$ouds-space-fixed-short: $ouds-dimension-150 !default; +$ouds-space-fixed-none: $ouds-dimension-0 !default; +$ouds-space-fixed-medium: $ouds-dimension-200 !default; +$ouds-space-fixed-jumbo: $ouds-dimension-800 !default; +$ouds-space-fixed-huge: $ouds-dimension-700 !default; +// $ouds-space-row-gap-with-icon-tall: $ouds-dimension-5xs !default; +// $ouds-space-row-gap-with-icon-shortest: $ouds-dimension-10xs !default; +// $ouds-space-row-gap-with-icon-shorter: $ouds-dimension-9xs !default; +// $ouds-space-row-gap-with-icon-short: $ouds-dimension-8xs !default; +// $ouds-space-row-gap-with-icon-none: $ouds-dimension-none !default; +// $ouds-space-row-gap-with-icon-medium: $ouds-dimension-7xs !default; +// $ouds-space-row-gap-tall: $ouds-dimension-5xs !default; +// $ouds-space-row-gap-shortest: $ouds-dimension-10xs !default; +// $ouds-space-row-gap-shorter: $ouds-dimension-9xs !default; +// $ouds-space-row-gap-short: $ouds-dimension-8xs !default; +// $ouds-space-row-gap-none: $ouds-dimension-none !default; +// $ouds-space-row-gap-medium: $ouds-dimension-7xs !default; +// $ouds-space-padding-inline-with-icon-tallest: $ouds-dimension-2xs !default; +// $ouds-space-padding-inline-with-icon-taller: $ouds-dimension-3xs !default; +// $ouds-space-padding-inline-with-icon-tall: $ouds-dimension-4xs !default; +// $ouds-space-padding-inline-with-icon-shortest: $ouds-dimension-10xs !default; +// $ouds-space-padding-inline-with-icon-shorter: $ouds-dimension-9xs !default; +// $ouds-space-padding-inline-with-icon-short: $ouds-dimension-7xs !default; +// $ouds-space-padding-inline-with-icon-none: $ouds-dimension-none !default; +// $ouds-space-padding-inline-with-icon-medium: $ouds-dimension-5xs !default; +// $ouds-space-padding-inline-with-arrow-tallest: $ouds-dimension-3xs !default; +// $ouds-space-padding-inline-with-arrow-taller: $ouds-dimension-4xs !default; +// $ouds-space-padding-inline-with-arrow-tall: $ouds-dimension-5xs !default; +// $ouds-space-padding-inline-with-arrow-shortest: $ouds-dimension-10xs !default; +// $ouds-space-padding-inline-with-arrow-shorter: $ouds-dimension-9xs !default; +// $ouds-space-padding-inline-with-arrow-short: $ouds-dimension-8xs !default; +// $ouds-space-padding-inline-with-arrow-none: $ouds-dimension-none !default; +// $ouds-space-padding-inline-with-arrow-medium: $ouds-dimension-7xs !default; +// $ouds-space-padding-inline-tallest: $ouds-dimension-xs !default; +// $ouds-space-padding-inline-taller: $ouds-dimension-2xs !default; +// $ouds-space-padding-inline-tall: $ouds-dimension-3xs !default; +// $ouds-space-padding-inline-shorter: $ouds-dimension-9xs !default; +// $ouds-space-padding-inline-short: $ouds-dimension-7xs !default; +// $ouds-space-padding-inline-none: $ouds-dimension-none !default; +// $ouds-space-padding-inline-medium: $ouds-dimension-5xs !default; +// $ouds-space-padding-block-with-icon-taller: $ouds-dimension-5xs !default; +// $ouds-space-padding-block-with-icon-tall: $ouds-dimension-6xs !default; +// $ouds-space-padding-block-with-icon-shortest: $ouds-dimension-10xs !default; +// $ouds-space-padding-block-with-icon-shorter: $ouds-dimension-9xs !default; +// $ouds-space-padding-block-with-icon-short: $ouds-dimension-8xs !default; +// $ouds-space-padding-block-with-icon-none: $ouds-dimension-none !default; +// $ouds-space-padding-block-with-icon-medium: $ouds-dimension-7xs !default; +// $ouds-space-padding-block-tallest: $ouds-dimension-xs !default; +// $ouds-space-padding-block-taller: $ouds-dimension-3xs !default; +// $ouds-space-padding-block-tall: $ouds-dimension-5xs !default; +// $ouds-space-padding-block-shorter: $ouds-dimension-9xs !default; +// $ouds-space-padding-block-short: $ouds-dimension-7xs !default; +// $ouds-space-padding-block-none: $ouds-dimension-none !default; +// $ouds-space-padding-block-medium: $ouds-dimension-6xs !default; +// $ouds-space-inset-tallest: $ouds-dimension-xs !default; +// $ouds-space-inset-taller: $ouds-dimension-3xs !default; +// $ouds-space-inset-tall: $ouds-dimension-5xs !default; +// $ouds-space-inset-spacious: $ouds-dimension-md !default; +// $ouds-space-inset-smash: $ouds-dimension-10xs !default; +// $ouds-space-inset-shortest: $ouds-dimension-9xs !default; +// $ouds-space-inset-shorter: $ouds-dimension-8xs !default; +// $ouds-space-inset-short: $ouds-dimension-7xs !default; +// $ouds-space-inset-none: $ouds-dimension-none !default; +// $ouds-space-inset-medium: $ouds-dimension-6xs !default; +// $ouds-space-column-gap-with-icon-tall: $ouds-dimension-5xs !default; +// $ouds-space-column-gap-with-icon-shortest: $ouds-dimension-10xs !default; +// $ouds-space-column-gap-with-icon-shorter: $ouds-dimension-9xs !default; +// $ouds-space-column-gap-with-icon-short: $ouds-dimension-8xs !default; +// $ouds-space-column-gap-with-icon-none: $ouds-dimension-none !default; +// $ouds-space-column-gap-with-icon-medium: $ouds-dimension-7xs !default; +// $ouds-space-column-gap-with-arrow-tall: $ouds-dimension-5xs !default; +// $ouds-space-column-gap-with-arrow-shortest: $ouds-dimension-10xs !default; +// $ouds-space-column-gap-with-arrow-shorter: $ouds-dimension-9xs !default; +// $ouds-space-column-gap-with-arrow-short: $ouds-dimension-8xs !default; +// $ouds-space-column-gap-with-arrow-none: $ouds-dimension-none !default; +// $ouds-space-column-gap-with-arrow-medium: $ouds-dimension-7xs !default; +// $ouds-space-column-gap-taller: $ouds-dimension-xs !default; +// $ouds-space-column-gap-tall: $ouds-dimension-3xs !default; +// $ouds-space-column-gap-shorter: $ouds-dimension-9xs !default; +// $ouds-space-column-gap-short: $ouds-dimension-7xs !default; +// $ouds-space-column-gap-none: $ouds-dimension-none !default; +// $ouds-space-column-gap-medium: $ouds-dimension-5xs !default; +// scss-docs-end ouds-semantic-space diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index bffba6d5e2..0ef3dfdb63 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -26,8 +26,8 @@ @import "../../../scss/functions"; @import "../../../scss/tokens/raw"; @import "../../../scss/tokens/semantic"; +@import "../../../scss/tokens/composite"; @import "../../../scss/tokens/component"; -@import "../../../scss/ouds-maps"; @import "../../../scss/variables"; @import "../../../scss/maps"; @import "../../../scss/mixins"; diff --git a/site/assets/scss/search.scss b/site/assets/scss/search.scss index 74544e92e5..5a3420798f 100644 --- a/site/assets/scss/search.scss +++ b/site/assets/scss/search.scss @@ -8,8 +8,8 @@ @import "../../../scss/functions"; @import "../../../scss/tokens/raw"; @import "../../../scss/tokens/semantic"; +@import "../../../scss/tokens/composite"; @import "../../../scss/tokens/component"; -@import "../../../scss/ouds-maps"; @import "../../../scss/variables"; @import "../../../scss/mixins"; @import "variables"; diff --git a/site/content/docs/0.0/customize/custom-libraries.md b/site/content/docs/0.0/customize/custom-libraries.md index 5bb6a575dd..4a56156f09 100644 --- a/site/content/docs/0.0/customize/custom-libraries.md +++ b/site/content/docs/0.0/customize/custom-libraries.md @@ -24,7 +24,7 @@ The [`scss/tokens/_raw.scss`]({{< param repo >}}/blob/v{{< param current_version The [`scss/tokens/_semantic.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/tokens/_semantic.scss) file contains all the semantic tokens. Unlike raw tokens, these are intended to be used directly in projects. They are built on raw tokens, assigning them semantic meaning through media queries or specific contexts. These tokens are ready to be applied either in utilities or directly within components. The names of these tokens are not intended to be modified for a custom library, only the link between a token and its value defined by a raw token. -Some semantic tokens are grouped into maps to simplify their transformation into helpers or utilities via the utilities API. These maps are defined in the [`scss/_ouds-maps.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/_ouds-maps.scss) file. +Some semantic tokens are grouped into maps to simplify their transformation into helpers or utilities via the utilities API. These maps are defined in the [`scss/_maps.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/_maps.scss) file. ### Component tokens diff --git a/site/content/docs/0.0/customize/options.md b/site/content/docs/0.0/customize/options.md index 508783a69a..4eb991cb0e 100644 --- a/site/content/docs/0.0/customize/options.md +++ b/site/content/docs/0.0/customize/options.md @@ -14,11 +14,13 @@ You can find and customize these variables for key global options in OUDS Web's {{< bs-table "table table-options" >}} | Variable | Values | Description | | --------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------- | +| `$ouds-dimension-base` | `4px` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). | | `$enable-bootstrap-compatibility` | `true` or `false` (default) | Enforces Bootstrap compatibility. | | `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). | +| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). | +| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in Bootstrap `v6`. | | `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. | - {{< /bs-table >}} diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index 537e90d4c9..0daf7ae71e 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -66,18 +66,18 @@ Technically, it means that you can get rid of the following things: - 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`: - - 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`. - - 3: `.rounded-3`, `.rounded-top-3`, `.rounded-bottom-3`, `.rounded-start-3` and `.rounded-end-3`. - - 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`. + - **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`. + - **3**: `.rounded-3`, `.rounded-top-3`, `.rounded-bottom-3`, `.rounded-start-3` and `.rounded-end-3`. + - **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: - - 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`. - - Medium: `.rounded-medium`, `.rounded-top-medium`, `.rounded-bottom-medium`, `.rounded-start-medium` and `.rounded-end-medium`. - - Tall: `.rounded-tall`, `.rounded-top-tall`, `.rounded-bottom-tall`, `.rounded-start-tall` and `.rounded-end-tall`. + - **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`. + - **Medium**: `.rounded-medium`, `.rounded-top-medium`, `.rounded-bottom-medium`, `.rounded-start-medium` and `.rounded-end-medium`. + - **Tall**: `.rounded-tall`, `.rounded-top-tall`, `.rounded-bottom-tall`, `.rounded-start-tall` and `.rounded-end-tall`. - New Border style utilities: `.border-drag`. @@ -92,6 +92,124 @@ Technically, it means that you can get rid of the following things: - New Shadows utilities: `shadow-none`, `shadow-raised`, `shadow-drag`, `shadow-overlay-default`, `shadow-overlay-emphasized`, `shadow-sticky-default`, `shadow-sticky-emphasized`, `shadow-sticky-navigation-scrolled` and `shadow-focus`. +### Spacings + +- Breaking The following margin Spacing utilities have been removed from the default build. 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... + - **3**: `m-3`, `mx-3`, `my-3`, `mt-3`, `mb-3`, `ms-3`, `me-3`, `m-sm-3`, etc... + - **4**: `m-4`, `mx-4`, `my-4`, `mt-4`, `mb-4`, `ms-4`, `me-4`, `m-sm-4`, etc... + - **5**: `m-5`, `mx-5`, `my-5`, `mt-5`, `mb-5`, `ms-5`, `me-5`, `m-sm-5`, etc... + +- Breaking The following padding Spacing utilities have been removed from the default build. 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... + - **3**: `p-3`, `px-3`, `py-3`, `pt-3`, `pb-3`, `ps-3`, `pe-3`, `p-sm-3`, etc... + - **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. 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... + - **3**: `gap-3`, `row-gap-3`, `column-gap-3`, `gap-sm-3`, etc... + - **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: + - **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... + - **Shorter**: `m-shorter`, `mx-shorter`, `my-shorter`, `mt-shorter`, `mb-shorter`, `ms-shorter`, `me-shorter`, `m-xs-shorter`, etc... + - **Short**: `m-short`, `mx-short`, `my-short`, `mt-short`, `mb-short`, `ms-short`, `me-short`, `m-xs-short`, etc... + - **Medium**: `m-medium`, `mx-medium`, `my-medium`, `mt-medium`, `mb-medium`, `ms-medium`, `me-medium`, `m-xs-medium`, etc... + - **Tall**: `m-tall`, `mx-tall`, `my-tall`, `mt-tall`, `mb-tall`, `ms-tall`, `me-tall`, `m-xs-tall`, etc... + - **Taller**: `m-taller`, `mx-taller`, `my-taller`, `mt-taller`, `mb-taller`, `ms-taller`, `me-taller`, `m-xs-taller`, etc... + - **Tallest**: `m-tallest`, `mx-tallest`, `my-tallest`, `mt-tallest`, `mb-tallest`, `ms-tallest`, `me-tallest`, `m-xs-tallest`, etc... + - **Spacious**: `m-spacious`, `mx-spacious`, `my-spacious`, `mt-spacious`, `mb-spacious`, `ms-spacious`, `me-spacious`, `m-xs-spacious`, etc... + - **Huge**: `m-huge`, `mx-huge`, `my-huge`, `mt-huge`, `mb-huge`, `ms-huge`, `me-huge`, `m-xs-huge`, etc... + - **Jumbo**: `m-jumbo`, `mx-jumbo`, `my-jumbo`, `mt-jumbo`, `mb-jumbo`, `ms-jumbo`, `me-jumbo`, `m-xs-jumbo`, etc... + - **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... + +- 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`, + - **Shorter**: `m-scaled-shorter`, `mx-scaled-shorter`, `my-scaled-shorter`, `mt-scaled-shorter`, `mb-scaled-shorter`, `ms-scaled-shorter`, `me-scaled-shorter`, + - **Short**: `m-scaled-short`, `mx-scaled-short`, `my-scaled-short`, `mt-scaled-short`, `mb-scaled-short`, `ms-scaled-short`, `me-scaled-short`, + - **Medium**: `m-scaled-medium`, `mx-scaled-medium`, `my-scaled-medium`, `mt-scaled-medium`, `mb-scaled-medium`, `ms-scaled-medium`, `me-scaled-medium`, + - **Tall**: `m-scaled-tall`, `mx-scaled-tall`, `my-scaled-tall`, `mt-scaled-tall`, `mb-scaled-tall`, `ms-scaled-tall`, `me-scaled-tall`, + - **Taller**: `m-scaled-taller`, `mx-scaled-taller`, `my-scaled-taller`, `mt-scaled-taller`, `mb-scaled-taller`, `ms-scaled-taller`, `me-scaled-taller`, + - **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: + - **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... + - **Shorter**: `p-shorter`, `px-shorter`, `py-shorter`, `pt-shorter`, `pb-shorter`, `ps-shorter`, `pe-shorter`, `p-xs-shorter`, etc... + - **Short**: `p-short`, `px-short`, `py-short`, `pt-short`, `pb-short`, `ps-short`, `pe-short`, `p-xs-short`, etc... + - **Medium**: `p-medium`, `px-medium`, `py-medium`, `pt-medium`, `pb-medium`, `ps-medium`, `pe-medium`, `p-xs-medium`, etc... + - **Tall**: `p-tall`, `px-tall`, `py-tall`, `pt-tall`, `pb-tall`, `ps-tall`, `pe-tall`, `p-xs-tall`, etc... + - **Taller**: `p-taller`, `px-taller`, `py-taller`, `pt-taller`, `pb-taller`, `ps-taller`, `pe-taller`, `p-xs-taller`, etc... + - **Tallest**: `p-tallest`, `px-tallest`, `py-tallest`, `pt-tallest`, `pb-tallest`, `ps-tallest`, `pe-tallest`, `p-xs-tallest`, etc... + - **Spacious**: `p-spacious`, `px-spacious`, `py-spacious`, `pt-spacious`, `pb-spacious`, `ps-spacious`, `pe-spacious`, `p-xs-spacious`, etc... + - **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: + - **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`, + - **Shorter**: `p-scaled-shorter`, `px-scaled-shorter`, `py-scaled-shorter`, `pt-scaled-shorter`, `pb-scaled-shorter`, `ps-scaled-shorter`, `pe-scaled-shorter`, + - **Short**: `p-scaled-short`, `px-scaled-short`, `py-scaled-short`, `pt-scaled-short`, `pb-scaled-short`, `ps-scaled-short`, `pe-scaled-short`, + - **Medium**: `p-scaled-medium`, `px-scaled-medium`, `py-scaled-medium`, `pt-scaled-medium`, `pb-scaled-medium`, `ps-scaled-medium`, `pe-scaled-medium`, + - **Tall**: `p-scaled-tall`, `px-scaled-tall`, `py-scaled-tall`, `pt-scaled-tall`, `pb-scaled-tall`, `ps-scaled-tall`, `pe-scaled-tall`, + - **Taller**: `p-scaled-taller`, `px-scaled-taller`, `py-scaled-taller`, `pt-scaled-taller`, `pb-scaled-taller`, `ps-scaled-taller`, `pe-scaled-taller`, + - **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: + - **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... + - **Shorter**: `gap-shorter`, `row-gap-shorter`, `column-gap-shorter`, `gap-xs-shorter`, etc... + - **Short**: `gap-short`, `row-gap-short`, `column-gap-short`, `gap-xs-short`, etc... + - **Medium**: `gap-medium`, `row-gap-medium`, `column-gap-medium`, `gap-xs-medium`, etc... + - **Tall**: `gap-tall`, `row-gap-tall`, `column-gap-tall`, `gap-xs-tall`, etc... + - **Taller**: `gap-taller`, `row-gap-taller`, `column-gap-taller`, `gap-xs-taller`, etc... + - **Tallest**: `gap-tallest`, `row-gap-tallest`, `column-gap-tallest`, `gap-xs-tallest`, etc... + - **Spacious**: `gap-spacious`, `row-gap-spacious`, `column-gap-spacious`, `gap-xs-spacious`, etc... + - **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: + - **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` + - **Shorter**: `gap-scaled-shorter`, `row-gap-scaled-shorter`, `column-gap-scaled-shorter` + - **Short**: `gap-scaled-short`, `row-gap-scaled-short`, `column-gap-scaled-short` + - **Medium**: `gap-scaled-medium`, `row-gap-scaled-medium`, `column-gap-scaled-medium` + - **Tall**: `gap-scaled-tall`, `row-gap-scaled-tall`, `column-gap-scaled-tall` + - **Taller**: `gap-scaled-taller`, `row-gap-scaled-taller`, `column-gap-scaled-taller` + - **Tallest**: `gap-scaled-tallest`, `row-gap-scaled-tallest`, `column-gap-scaled-tallest` + - **Spacious**: `gap-scaled-spacious`, `row-gap-scaled-spacious`, `column-gap-scaled-spacious` + +- 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]\S?-?\S?\S?\S?)-0` → `$1-none` + 2. **1**: `([mp]\S?-?\S?\S?\S?)-1` → `$1-shortest` + 3. **2**: `([mp]\S?-?\S?\S?\S?)-2` → `$1-shorter` + 4. **3**: `([mp]\S?-?\S?\S?\S?)-3` → `$1-medium` + 5. **4**: `([mp]\S?-?\S?\S?\S?)-4` → `$1-tall` + 6. **5**: `([mp]\S?-?\S?\S?\S?)-5` → `$1-spacious` + 7. **All numbers**: Search for `[mp]\S?-?\S?\S?\S?-\d` and you shouldn't have Bootstrap Spacing utilities anymore + - Change all the utilities using more precise utilities + 1. **Mixing Bootstrap numbers**: Search for `[mp]\S?-?\S?\S?\S?-\d`, when you match multiple on one line, consider using one of our [scaled spacing utilities]({{< docsref "/utilities/spacing#notation-for-scaled-values" >}}) (for example, `.mb-1.mb-md-2` → `.mb-scaled-shortest`). + 2. **Remaining standalone classes**: Follow the previous guide going through all the standalone classes. + ## 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. @@ -106,8 +224,8 @@ Technically, it means that you can get rid of the following things: @import "functions"; + @import "tokens/raw"; + @import "tokens/semantic"; + + @import "tokens/composite"; + @import "tokens/component"; - + @import "ouds-maps"; @import "variables"; @import "variables-dark"; // etc @@ -144,6 +262,32 @@ Technically, it means that you can get rid of the following things:
  • $ouds-border-width-thick
  • $ouds-border-width-thicker
  • $ouds-border-width-thin
    • +
  • $ouds-dimension-0
    • +
  • $ouds-dimension-100
    • +
  • $ouds-dimension-1000
    • +
  • $ouds-dimension-1200
    • +
  • $ouds-dimension-1400
    • +
  • $ouds-dimension-150
    • +
  • $ouds-dimension-1600
    • +
  • $ouds-dimension-1800
    • +
  • $ouds-dimension-200
    • +
  • $ouds-dimension-25
    • +
  • $ouds-dimension-250
    • +
  • $ouds-dimension-300
    • +
  • $ouds-dimension-350
    • +
  • $ouds-dimension-400
    • +
  • $ouds-dimension-450
    • +
  • $ouds-dimension-50
    • +
  • $ouds-dimension-500
    • +
  • $ouds-dimension-550
    • +
  • $ouds-dimension-600
    • +
  • $ouds-dimension-650
    • +
  • $ouds-dimension-700
    • +
  • $ouds-dimension-75
    • +
  • $ouds-dimension-750
    • +
  • $ouds-dimension-800
    • +
  • $ouds-dimension-900
    • +
  • $ouds-dimension-base
  • $ouds-elevation-blur-0
  • $ouds-elevation-blur-200
  • $ouds-elevation-blur-300
    • @@ -167,6 +311,12 @@ Technically, it means that you can get rid of the following things:
  • $ouds-elevation-color-sticky-default
  • $ouds-elevation-color-sticky-emphasized
  • $ouds-elevation-color-sticky-navigation-scrolled
    • +
  • $ouds-elevation-drag
    • +
  • $ouds-elevation-focus
    • +
  • $ouds-elevation-none
    • +
  • $ouds-elevation-overlay-default
    • +
  • $ouds-elevation-overlay-emphasized
    • +
  • $ouds-elevation-raised
  • $ouds-elevation-spread-0
  • $ouds-elevation-spread-300
  • $ouds-elevation-spread-drag
    • @@ -180,6 +330,9 @@ Technically, it means that you can get rid of the following things:
  • $ouds-elevation-spread-sticky-default
  • $ouds-elevation-spread-sticky-emphasized
  • $ouds-elevation-spread-sticky-navigation-scrolled
    • +
  • $ouds-elevation-sticky-default
    • +
  • $ouds-elevation-sticky-emphasized
    • +
  • $ouds-elevation-sticky-navigation-scrolled
  • $ouds-elevation-x-0
  • $ouds-elevation-x-drag
  • $ouds-elevation-x-focus
    • @@ -216,6 +369,48 @@ Technically, it means that you can get rid of the following things:
  • $ouds-opacity-transparent
  • $ouds-opacity-weak
  • $ouds-opacity-weaker
    • +
  • $ouds-space-fixed-huge
    • +
  • $ouds-space-fixed-jumbo
    • +
  • $ouds-space-fixed-medium
    • +
  • $ouds-space-fixed-none
    • +
  • $ouds-space-fixed-short
    • +
  • $ouds-space-fixed-shorter
    • +
  • $ouds-space-fixed-shortest
    • +
  • $ouds-space-fixed-smash
    • +
  • $ouds-space-fixed-spacious
    • +
  • $ouds-space-fixed-tall
    • +
  • $ouds-space-fixed-taller
    • +
  • $ouds-space-fixed-tallest
    • +
  • $ouds-space-scaled-medium-desktop
    • +
  • $ouds-space-scaled-medium-mobile
    • +
  • $ouds-space-scaled-medium-tablet
    • +
  • $ouds-space-scaled-none-desktop
    • +
  • $ouds-space-scaled-none-mobile
    • +
  • $ouds-space-scaled-none-tablet
    • +
  • $ouds-space-scaled-short-desktop
    • +
  • $ouds-space-scaled-short-mobile
    • +
  • $ouds-space-scaled-short-tablet
    • +
  • $ouds-space-scaled-shorter-desktop
    • +
  • $ouds-space-scaled-shorter-mobile
    • +
  • $ouds-space-scaled-shorter-tablet
    • +
  • $ouds-space-scaled-shortest-desktop
    • +
  • $ouds-space-scaled-shortest-mobile
    • +
  • $ouds-space-scaled-shortest-tablet
    • +
  • $ouds-space-scaled-smash-desktop
    • +
  • $ouds-space-scaled-smash-mobile
    • +
  • $ouds-space-scaled-smash-tablet
    • +
  • $ouds-space-scaled-spacious-desktop
    • +
  • $ouds-space-scaled-spacious-mobile
    • +
  • $ouds-space-scaled-spacious-tablet
    • +
  • $ouds-space-scaled-tall-desktop
    • +
  • $ouds-space-scaled-tall-mobile
    • +
  • $ouds-space-scaled-tall-tablet
    • +
  • $ouds-space-scaled-taller-desktop
    • +
  • $ouds-space-scaled-taller-mobile
    • +
  • $ouds-space-scaled-taller-tablet
    • +
  • $ouds-space-scaled-tallest-desktop
    • +
  • $ouds-space-scaled-tallest-mobile
    • +
  • $ouds-space-scaled-tallest-tablet
    • @@ -225,6 +420,10 @@ Technically, it means that you can get rid of the following things:
  • $ouds-border-radiuses
  • $ouds-border-styles
  • $ouds-border-widths
    • +
  • $ouds-dimension-negative-space-fixed
    • +
  • $ouds-dimension-negative-space-scaled
    • +
  • $ouds-dimension-space-fixed
    • +
  • $ouds-dimension-space-scaled
  • $ouds-elevations
  • $ouds-opacities
    • @@ -240,12 +439,60 @@ Technically, it means that you can get rid of the following things:
  • border-style-ouds
  • border-top-ouds
  • border-width-ouds
    • +
  • column-gap-ouds
    • +
  • column-gap-scaled-ouds
    • +
  • gap-ouds
    • +
  • gap-scaled-ouds
    • +
  • margin-bottom-ouds
    • +
  • margin-bottom-scaled-ouds
    • +
  • margin-end-ouds
    • +
  • margin-end-scaled-ouds
    • +
  • margin-ouds
    • +
  • margin-scaled-ouds
    • +
  • margin-start-ouds
    • +
  • margin-start-scaled-ouds
    • +
  • margin-top-ouds
    • +
  • margin-top-scaled-ouds
    • +
  • margin-x-ouds
    • +
  • margin-x-scaled-ouds
    • +
  • margin-y-ouds
    • +
  • margin-y-scaled-ouds
    • +
  • negative-margin-bottom-ouds
    • +
  • negative-margin-bottom-scaled-ouds
    • +
  • negative-margin-end-ouds
    • +
  • negative-margin-end-scaled-ouds
    • +
  • negative-margin-ouds
    • +
  • negative-margin-scaled-ouds
    • +
  • negative-margin-start-ouds
    • +
  • negative-margin-start-scaled-ouds
    • +
  • negative-margin-top-ouds
    • +
  • negative-margin-top-scaled-ouds
    • +
  • negative-margin-x-ouds
    • +
  • negative-margin-x-scaled-ouds
    • +
  • negative-margin-y-ouds
    • +
  • negative-margin-y-scaled-ouds
  • opacity-ouds
    • +
  • padding-bottom-ouds
    • +
  • padding-bottom-scaled-ouds
    • +
  • padding-end-ouds
    • +
  • padding-end-scaled-ouds
    • +
  • padding-ouds
    • +
  • padding-scaled-ouds
    • +
  • padding-start-ouds
    • +
  • padding-start-scaled-ouds
    • +
  • padding-top-ouds
    • +
  • padding-top-scaled-ouds
    • +
  • padding-x-ouds
    • +
  • padding-x-scaled-ouds
    • +
  • padding-y-ouds
    • +
  • padding-y-scaled-ouds
  • rounded-bottom-ouds
  • rounded-end-ouds
  • rounded-ouds
  • rounded-start-ouds
  • rounded-top-ouds
    • +
  • row-gap-ouds
    • +
  • row-gap-scaled-ouds
  • shadow-ouds
    • @@ -286,6 +533,16 @@ Technically, it means that you can get rid of the following things:
  • --bs-btn-close-color
  • --bs-btn-close-disabled-color
  • --bs-btn-close-hover-color
    • +
  • --bs-space-scaled-medium
    • +
  • --bs-space-scaled-none
    • +
  • --bs-space-scaled-short
    • +
  • --bs-space-scaled-shorter
    • +
  • --bs-space-scaled-shortest
    • +
  • --bs-space-scaled-smash
    • +
  • --bs-space-scaled-spacious
    • +
  • --bs-space-scaled-tall
    • +
  • --bs-space-scaled-taller
    • +
  • --bs-space-scaled-tallest
    • @@ -303,7 +560,6 @@ Technically, it means that you can get rid of the following things:
  • --bs-box-shadow-inset
  • --bs-box-shadow-lg
  • --bs-box-shadow-sm
    • - @@ -317,12 +573,36 @@ Technically, it means that you can get rid of the following things:
  • border-start
  • border-top
  • border-width
    • +
  • column-gap
    • +
  • gap
    • +
  • margin-bottom
    • +
  • margin-end
    • +
  • margin
    • +
  • margin-start
    • +
  • margin-top
    • +
  • margin-x
    • +
  • margin-y
    • +
  • negative-margin-bottom
    • +
  • negative-margin-end
    • +
  • negative-margin
    • +
  • negative-margin-start
    • +
  • negative-margin-top
    • +
  • negative-margin-x
    • +
  • negative-margin-y
  • opacity
    • +
  • padding-bottom
    • +
  • padding-end
    • +
  • padding
    • +
  • padding-start
    • +
  • padding-top
    • +
  • padding-x
    • +
  • padding-y
  • rounded
  • rounded-bottom
  • rounded-end
  • rounded-start
  • rounded-top
    • +
  • row-gap
  • shadow
    • diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index 9202473f37..271f29a220 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -20,13 +20,13 @@ toc: true - New Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`. - 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`. - - Medium: `.rounded-medium`, `.rounded-top-medium`, `.rounded-bottom-medium`, `.rounded-start-medium` and `.rounded-end-medium`. - - Tall: `.rounded-tall`, `.rounded-top-tall`, `.rounded-bottom-tall`, `.rounded-start-tall` and `.rounded-end-tall`. - - 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`. + - **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`. + - **Medium**: `.rounded-medium`, `.rounded-top-medium`, `.rounded-bottom-medium`, `.rounded-start-medium` and `.rounded-end-medium`. + - **Tall**: `.rounded-tall`, `.rounded-top-tall`, `.rounded-bottom-tall`, `.rounded-start-tall` and `.rounded-end-tall`. + - **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`. @@ -39,17 +39,98 @@ toc: true - New Shadows utilities: `shadow-none`, `shadow-raised`, `shadow-drag`, `shadow-overlay-default`, `shadow-overlay-emphasized`, `shadow-sticky-default`, `shadow-sticky-emphasized`, `shadow-sticky-navigation-scrolled` and `shadow-focus`. +#### Spacings + +- 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... + - **Shorter**: `.m-shorter`, `.mx-shorter`, `.my-shorter`, `.mt-shorter`, `.mb-shorter`, `.ms-shorter`, `.me-shorter`, `.m-xs-shorter`, etc... + - **Short**: `.m-short`, `.mx-short`, `.my-short`, `.mt-short`, `.mb-short`, `.ms-short`, `.me-short`, `.m-xs-short`, etc... + - **Medium**: `.m-medium`, `.mx-medium`, `.my-medium`, `.mt-medium`, `.mb-medium`, `.ms-medium`, `.me-medium`, `.m-xs-medium`, etc... + - **Tall**: `.m-tall`, `.mx-tall`, `.my-tall`, `.mt-tall`, `.mb-tall`, `.ms-tall`, `.me-tall`, `.m-xs-tall`, etc... + - **Taller**: `.m-taller`, `.mx-taller`, `.my-taller`, `.mt-taller`, `.mb-taller`, `.ms-taller`, `.me-taller`, `.m-xs-taller`, etc... + - **Tallest**: `.m-tallest`, `.mx-tallest`, `.my-tallest`, `.mt-tallest`, `.mb-tallest`, `.ms-tallest`, `.me-tallest`, `.m-xs-tallest`, etc... + - **Spacious**: `.m-spacious`, `.mx-spacious`, `.my-spacious`, `.mt-spacious`, `.mb-spacious`, `.ms-spacious`, `.me-spacious`, `.m-xs-spacious`, etc... + - **Huge**: `.m-huge`, `.mx-huge`, `.my-huge`, `.mt-huge`, `.mb-huge`, `.ms-huge`, `.me-huge`, `.m-xs-huge`, etc... + - **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: + - **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`, + - **Shorter**: `.m-scaled-shorter`, `.mx-scaled-shorter`, `.my-scaled-shorter`, `.mt-scaled-shorter`, `.mb-scaled-shorter`, `.ms-scaled-shorter`, `.me-scaled-shorter`, + - **Short**: `.m-scaled-short`, `.mx-scaled-short`, `.my-scaled-short`, `.mt-scaled-short`, `.mb-scaled-short`, `.ms-scaled-short`, `.me-scaled-short`, + - **Medium**: `.m-scaled-medium`, `.mx-scaled-medium`, `.my-scaled-medium`, `.mt-scaled-medium`, `.mb-scaled-medium`, `.ms-scaled-medium`, `.me-scaled-medium`, + - **Tall**: `.m-scaled-tall`, `.mx-scaled-tall`, `.my-scaled-tall`, `.mt-scaled-tall`, `.mb-scaled-tall`, `.ms-scaled-tall`, `.me-scaled-tall`, + - **Taller**: `.m-scaled-taller`, `.mx-scaled-taller`, `.my-scaled-taller`, `.mt-scaled-taller`, `.mb-scaled-taller`, `.ms-scaled-taller`, `.me-scaled-taller`, + - **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: + - **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... + - **Shorter**: `.p-shorter`, `.px-shorter`, `.py-shorter`, `.pt-shorter`, `.pb-shorter`, `.ps-shorter`, `.pe-shorter`, `.p-xs-shorter`, etc... + - **Short**: `.p-short`, `.px-short`, `.py-short`, `.pt-short`, `.pb-short`, `.ps-short`, `.pe-short`, `.p-xs-short`, etc... + - **Medium**: `.p-medium`, `.px-medium`, `.py-medium`, `.pt-medium`, `.pb-medium`, `.ps-medium`, `.pe-medium`, `.p-xs-medium`, etc... + - **Tall**: `.p-tall`, `.px-tall`, `.py-tall`, `.pt-tall`, `.pb-tall`, `.ps-tall`, `.pe-tall`, `.p-xs-tall`, etc... + - **Taller**: `.p-taller`, `.px-taller`, `.py-taller`, `.pt-taller`, `.pb-taller`, `.ps-taller`, `.pe-taller`, `.p-xs-taller`, etc... + - **Tallest**: `.p-tallest`, `.px-tallest`, `.py-tallest`, `.pt-tallest`, `.pb-tallest`, `.ps-tallest`, `.pe-tallest`, `.p-xs-tallest`, etc... + - **Spacious**: `.p-spacious`, `.px-spacious`, `.py-spacious`, `.pt-spacious`, `.pb-spacious`, `.ps-spacious`, `.pe-spacious`, `.p-xs-spacious`, etc... + - **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: + - **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`, + - **Shorter**: `.p-scaled-shorter`, `.px-scaled-shorter`, `.py-scaled-shorter`, `.pt-scaled-shorter`, `.pb-scaled-shorter`, `.ps-scaled-shorter`, `.pe-scaled-shorter`, + - **Short**: `.p-scaled-short`, `.px-scaled-short`, `.py-scaled-short`, `.pt-scaled-short`, `.pb-scaled-short`, `.ps-scaled-short`, `.pe-scaled-short`, + - **Medium**: `.p-scaled-medium`, `.px-scaled-medium`, `.py-scaled-medium`, `.pt-scaled-medium`, `.pb-scaled-medium`, `.ps-scaled-medium`, `.pe-scaled-medium`, + - **Tall**: `.p-scaled-tall`, `.px-scaled-tall`, `.py-scaled-tall`, `.pt-scaled-tall`, `.pb-scaled-tall`, `.ps-scaled-tall`, `.pe-scaled-tall`, + - **Taller**: `.p-scaled-taller`, `.px-scaled-taller`, `.py-scaled-taller`, `.pt-scaled-taller`, `.pb-scaled-taller`, `.ps-scaled-taller`, `.pe-scaled-taller`, + - **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: + - **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... + - **Shorter**: `.gap-shorter`, `.row-gap-shorter`, `.column-gap-shorter`, `.gap-xs-shorter`, etc... + - **Short**: `.gap-short`, `.row-gap-short`, `.column-gap-short`, `.gap-xs-short`, etc... + - **Medium**: `.gap-medium`, `.row-gap-medium`, `.column-gap-medium`, `.gap-xs-medium`, etc... + - **Tall**: `.gap-tall`, `.row-gap-tall`, `.column-gap-tall`, `.gap-xs-tall`, etc... + - **Taller**: `.gap-taller`, `.row-gap-taller`, `.column-gap-taller`, `.gap-xs-taller`, etc... + - **Tallest**: `.gap-tallest`, `.row-gap-tallest`, `.column-gap-tallest`, `.gap-xs-tallest`, etc... + - **Spacious**: `.gap-spacious`, `.row-gap-spacious`, `.column-gap-spacious`, `.gap-xs-spacious`, etc... + - **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: + - **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` + - **Shorter**: `.gap-scaled-shorter`, `.row-gap-scaled-shorter`, `.column-gap-scaled-shorter` + - **Short**: `.gap-scaled-short`, `.row-gap-scaled-short`, `.column-gap-scaled-short` + - **Medium**: `.gap-scaled-medium`, `.row-gap-scaled-medium`, `.column-gap-scaled-medium` + - **Tall**: `.gap-scaled-tall`, `.row-gap-scaled-tall`, `.column-gap-scaled-tall` + - **Taller**: `.gap-scaled-taller`, `.row-gap-scaled-taller`, `.column-gap-scaled-taller` + - **Tallest**: `.gap-scaled-tallest`, `.row-gap-scaled-tallest`, `.column-gap-scaled-tallest` + - **Spacious**: `.gap-scaled-spacious`, `.row-gap-scaled-spacious`, `.column-gap-scaled-spacious` + ### CSS and Sass variables -- New A new file containing maps of token for utilities has been added. If you were using the Sass compilation, you must import the new Sass files before the variables. +- New A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass files between the semantic and component files.
    See the new import stack ```diff + @import "tokens/semantic"; + + @import "tokens/composite"; @import "tokens/component"; - + @import "ouds-maps"; - @import "variables"; ```
    @@ -83,6 +164,32 @@ toc: true
  • $ouds-border-width-thick
  • $ouds-border-width-thicker
  • $ouds-border-width-thin
    • +
  • $ouds-dimension-0
    • +
  • $ouds-dimension-100
    • +
  • $ouds-dimension-1000
    • +
  • $ouds-dimension-1200
    • +
  • $ouds-dimension-1400
    • +
  • $ouds-dimension-150
    • +
  • $ouds-dimension-1600
    • +
  • $ouds-dimension-1800
    • +
  • $ouds-dimension-200
    • +
  • $ouds-dimension-25
    • +
  • $ouds-dimension-250
    • +
  • $ouds-dimension-300
    • +
  • $ouds-dimension-350
    • +
  • $ouds-dimension-400
    • +
  • $ouds-dimension-450
    • +
  • $ouds-dimension-50
    • +
  • $ouds-dimension-500
    • +
  • $ouds-dimension-550
    • +
  • $ouds-dimension-600
    • +
  • $ouds-dimension-650
    • +
  • $ouds-dimension-700
    • +
  • $ouds-dimension-75
    • +
  • $ouds-dimension-750
    • +
  • $ouds-dimension-800
    • +
  • $ouds-dimension-900
    • +
  • $ouds-dimension-base
  • $ouds-elevation-blur-0
  • $ouds-elevation-blur-200
  • $ouds-elevation-blur-300
    • @@ -106,6 +213,12 @@ toc: true
  • $ouds-elevation-color-sticky-default
  • $ouds-elevation-color-sticky-emphasized
  • $ouds-elevation-color-sticky-navigation-scrolled
    • +
  • $ouds-elevation-drag
    • +
  • $ouds-elevation-focus
    • +
  • $ouds-elevation-none
    • +
  • $ouds-elevation-overlay-default
    • +
  • $ouds-elevation-overlay-emphasized
    • +
  • $ouds-elevation-raised
  • $ouds-elevation-spread-0
  • $ouds-elevation-spread-300
  • $ouds-elevation-spread-drag
    • @@ -119,6 +232,9 @@ toc: true
  • $ouds-elevation-spread-sticky-default
  • $ouds-elevation-spread-sticky-emphasized
  • $ouds-elevation-spread-sticky-navigation-scrolled
    • +
  • $ouds-elevation-sticky-default
    • +
  • $ouds-elevation-sticky-emphasized
    • +
  • $ouds-elevation-sticky-navigation-scrolled
  • $ouds-elevation-x-0
  • $ouds-elevation-x-drag
  • $ouds-elevation-x-focus
    • @@ -149,6 +265,48 @@ toc: true
  • $ouds-opacity-transparent
  • $ouds-opacity-weak
  • $ouds-opacity-weaker
    • +
  • $ouds-space-fixed-huge
    • +
  • $ouds-space-fixed-jumbo
    • +
  • $ouds-space-fixed-medium
    • +
  • $ouds-space-fixed-none
    • +
  • $ouds-space-fixed-short
    • +
  • $ouds-space-fixed-shorter
    • +
  • $ouds-space-fixed-shortest
    • +
  • $ouds-space-fixed-smash
    • +
  • $ouds-space-fixed-spacious
    • +
  • $ouds-space-fixed-tall
    • +
  • $ouds-space-fixed-taller
    • +
  • $ouds-space-fixed-tallest
    • +
  • $ouds-space-scaled-medium-desktop
    • +
  • $ouds-space-scaled-medium-mobile
    • +
  • $ouds-space-scaled-medium-tablet
    • +
  • $ouds-space-scaled-none-desktop
    • +
  • $ouds-space-scaled-none-mobile
    • +
  • $ouds-space-scaled-none-tablet
    • +
  • $ouds-space-scaled-short-desktop
    • +
  • $ouds-space-scaled-short-mobile
    • +
  • $ouds-space-scaled-short-tablet
    • +
  • $ouds-space-scaled-shorter-desktop
    • +
  • $ouds-space-scaled-shorter-mobile
    • +
  • $ouds-space-scaled-shorter-tablet
    • +
  • $ouds-space-scaled-shortest-desktop
    • +
  • $ouds-space-scaled-shortest-mobile
    • +
  • $ouds-space-scaled-shortest-tablet
    • +
  • $ouds-space-scaled-smash-desktop
    • +
  • $ouds-space-scaled-smash-mobile
    • +
  • $ouds-space-scaled-smash-tablet
    • +
  • $ouds-space-scaled-spacious-desktop
    • +
  • $ouds-space-scaled-spacious-mobile
    • +
  • $ouds-space-scaled-spacious-tablet
    • +
  • $ouds-space-scaled-tall-desktop
    • +
  • $ouds-space-scaled-tall-mobile
    • +
  • $ouds-space-scaled-tall-tablet
    • +
  • $ouds-space-scaled-taller-desktop
    • +
  • $ouds-space-scaled-taller-mobile
    • +
  • $ouds-space-scaled-taller-tablet
    • +
  • $ouds-space-scaled-tallest-desktop
    • +
  • $ouds-space-scaled-tallest-mobile
    • +
  • $ouds-space-scaled-tallest-tablet
    • @@ -158,6 +316,10 @@ toc: true
  • $ouds-border-radiuses
  • $ouds-border-styles
  • $ouds-border-widths
    • +
  • $ouds-dimension-negative-space-fixed
    • +
  • $ouds-dimension-negative-space-scaled
    • +
  • $ouds-dimension-space-fixed
    • +
  • $ouds-dimension-space-scaled
  • $ouds-elevations
    • @@ -172,11 +334,59 @@ toc: true
  • border-style-ouds
  • border-top-ouds
  • border-width-ouds
    • +
  • column-gap-ouds
    • +
  • column-gap-scaled-ouds
    • +
  • gap-ouds
    • +
  • gap-scaled-ouds
    • +
  • margin-bottom-ouds
    • +
  • margin-bottom-scaled-ouds
    • +
  • margin-end-ouds
    • +
  • margin-end-scaled-ouds
    • +
  • margin-ouds
    • +
  • margin-scaled-ouds
    • +
  • margin-start-ouds
    • +
  • margin-start-scaled-ouds
    • +
  • margin-top-ouds
    • +
  • margin-top-scaled-ouds
    • +
  • margin-x-ouds
    • +
  • margin-x-scaled-ouds
    • +
  • margin-y-ouds
    • +
  • margin-y-scaled-ouds
    • +
  • negative-margin-bottom-ouds
    • +
  • negative-margin-bottom-scaled-ouds
    • +
  • negative-margin-end-ouds
    • +
  • negative-margin-end-scaled-ouds
    • +
  • negative-margin-ouds
    • +
  • negative-margin-scaled-ouds
    • +
  • negative-margin-start-ouds
    • +
  • negative-margin-start-scaled-ouds
    • +
  • negative-margin-top-ouds
    • +
  • negative-margin-top-scaled-ouds
    • +
  • negative-margin-x-ouds
    • +
  • negative-margin-x-scaled-ouds
    • +
  • negative-margin-y-ouds
    • +
  • negative-margin-y-scaled-ouds
    • +
  • padding-bottom-ouds
    • +
  • padding-bottom-scaled-ouds
    • +
  • padding-end-ouds
    • +
  • padding-end-scaled-ouds
    • +
  • padding-ouds
    • +
  • padding-scaled-ouds
    • +
  • padding-start-ouds
    • +
  • padding-start-scaled-ouds
    • +
  • padding-top-ouds
    • +
  • padding-top-scaled-ouds
    • +
  • padding-x-ouds
    • +
  • padding-x-scaled-ouds
    • +
  • padding-y-ouds
    • +
  • padding-y-scaled-ouds
  • rounded-bottom-ouds
  • rounded-end-ouds
  • rounded-ouds
  • rounded-start-ouds
  • rounded-top-ouds
    • +
  • row-gap-ouds
    • +
  • row-gap-scaled-ouds
  • shadow-ouds
    • @@ -195,6 +405,16 @@ toc: true
  • --bs-box-shadow-inset
  • --bs-box-shadow-lg
  • --bs-box-shadow-sm
    • +
  • --bs-space-scaled-medium
    • +
  • --bs-space-scaled-none
    • +
  • --bs-space-scaled-short
    • +
  • --bs-space-scaled-shorter
    • +
  • --bs-space-scaled-shortest
    • +
  • --bs-space-scaled-smash
    • +
  • --bs-space-scaled-spacious
    • +
  • --bs-space-scaled-tall
    • +
  • --bs-space-scaled-taller
    • +
  • --bs-space-scaled-tallest
    • @@ -208,11 +428,35 @@ toc: true
  • border-start
  • border-top
  • border-width
    • +
  • column-gap
    • +
  • gap
    • +
  • margin-bottom
    • +
  • margin-end
    • +
  • margin
    • +
  • margin-start
    • +
  • margin-top
    • +
  • margin-x
    • +
  • margin-y
    • +
  • negative-margin-bottom
    • +
  • negative-margin-end
    • +
  • negative-margin
    • +
  • negative-margin-start
    • +
  • negative-margin-top
    • +
  • negative-margin-x
    • +
  • negative-margin-y
    • +
  • padding-bottom
    • +
  • padding-end
    • +
  • padding
    • +
  • padding-start
    • +
  • padding-top
    • +
  • padding-x
    • +
  • padding-y
  • rounded
  • rounded-bottom
  • rounded-end
  • rounded-start
  • rounded-top
    • +
  • row-gap
  • shadow
    • diff --git a/site/content/docs/0.0/utilities/api.md b/site/content/docs/0.0/utilities/api.md index 097c62a301..f78eb7fc13 100644 --- a/site/content/docs/0.0/utilities/api.md +++ b/site/content/docs/0.0/utilities/api.md @@ -412,8 +412,8 @@ New utilities can be added to the default `$utilities` map with a `map-merge`. M @import "ouds-web/scss/functions"; @import "ouds-web/scss/tokens/raw"; @import "ouds-web/scss/tokens/semantic"; +@import "ouds-web/scss/tokens/composite"; @import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/ouds-maps"; @import "ouds-web/scss/variables"; @import "ouds-web/scss/variables-dark"; @import "ouds-web/scss/maps"; @@ -443,8 +443,8 @@ Modify existing utilities in the default `$utilities` map with `map-get` and `ma @import "ouds-web/scss/functions"; @import "ouds-web/scss/tokens/raw"; @import "ouds-web/scss/tokens/semantic"; +@import "ouds-web/scss/tokens/composite"; @import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/ouds-maps"; @import "ouds-web/scss/variables"; @import "ouds-web/scss/variables-dark"; @import "ouds-web/scss/maps"; @@ -477,8 +477,8 @@ You can enable responsive classes for an existing set of utilities that are not @import "ouds-web/scss/functions"; @import "ouds-web/scss/tokens/raw"; @import "ouds-web/scss/tokens/semantic"; +@import "ouds-web/scss/tokens/composite"; @import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/ouds-maps"; @import "ouds-web/scss/variables"; @import "ouds-web/scss/variables-dark"; @import "ouds-web/scss/maps"; @@ -537,8 +537,8 @@ Used to another naming convention? The utilities API can be used to override the @import "ouds-web/scss/functions"; @import "ouds-web/scss/tokens/raw"; @import "ouds-web/scss/tokens/semantic"; +@import "ouds-web/scss/tokens/composite"; @import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/ouds-maps"; @import "ouds-web/scss/variables"; @import "ouds-web/scss/variables-dark"; @import "ouds-web/scss/maps"; @@ -565,8 +565,8 @@ Remove any of the default utilities with the [`map-remove()` Sass function](http @import "ouds-web/scss/functions"; @import "ouds-web/scss/tokens/raw"; @import "ouds-web/scss/tokens/semantic"; +@import "ouds-web/scss/tokens/composite"; @import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/ouds-maps"; @import "ouds-web/scss/variables"; @import "ouds-web/scss/variables-dark"; @import "ouds-web/scss/maps"; @@ -585,8 +585,8 @@ You can also use the [`map-merge()` Sass function](https://sass-lang.com/documen @import "ouds-web/scss/functions"; @import "ouds-web/scss/tokens/raw"; @import "ouds-web/scss/tokens/semantic"; +@import "ouds-web/scss/tokens/composite"; @import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/ouds-maps"; @import "ouds-web/scss/variables"; @import "ouds-web/scss/variables-dark"; @import "ouds-web/scss/maps"; @@ -611,8 +611,8 @@ You can add, remove, and modify many utilities all at once with the [`map-merge( @import "ouds-web/scss/functions"; @import "ouds-web/scss/tokens/raw"; @import "ouds-web/scss/tokens/semantic"; +@import "ouds-web/scss/tokens/composite"; @import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/ouds-maps"; @import "ouds-web/scss/variables"; @import "ouds-web/scss/variables-dark"; @import "ouds-web/scss/maps"; diff --git a/site/content/docs/0.0/utilities/borders.md b/site/content/docs/0.0/utilities/borders.md index fd7dfde2cb..4981ca0276 100644 --- a/site/content/docs/0.0/utilities/borders.md +++ b/site/content/docs/0.0/utilities/borders.md @@ -190,7 +190,7 @@ Border semantic tokens are defined as a Sass map. The border utilities are decla ### Sass maps -{{< scss-docs name="ouds-maps-borders" file="scss/_ouds-maps.scss" >}} +{{< scss-docs name="ouds-maps-borders" file="scss/_maps.scss" >}} + +{{< bs-table "table" >}} +| Size name | Size for mobile (`2xs` to `md` or `0 - 735.98px`) | Size for tablet (`md` to `xl` or `736px - 1319.98px`) | Size for desktop (`xl` to `3xl` and above or `1320px - 1880px and above`) | +| --- | --- | --- | --- | +| `none` | `0` | `0` | `0` | +| `smash` | `2px` | `4px` | `4px` | +| `shortest` | `4px` | `8px` | `8px` | +| `shorter` | `8px` | `12px` | `16px` | +| `short` | `12px` | `16px` | `24px` | +| `medium` | `16px` | `24px` | `32px` | +| `tall` | `24px` | `32px` | `40px` | +| `taller` | `32px` | `40px` | `48px` | +| `tallest` | `40px` | `48px` | `56px` | +| `spacious` | `48px` | `56px` | `64px` | +{{< /bs-table >}} + +(You can add more sizes by adding entries to the `$ouds-dimension-space-scaled` Sass map variable.) + +### Examples + +Here are some representative examples of these classes: + +```scss +.mt-none { + margin-top: $ouds-space-fixed-none !important; +} + +.ms-scaled-tall { + margin-left: var(--bs-space-scaled-tall) !important; +} + +.px-scaled-shortest { + padding-right: var(--bs-space-scaled-shortest) !important; + padding-left: var(--bs-space-scaled-shortest) !important; +} + +.p-tall { + padding: $ouds-space-fixed-tall !important; +} +``` + +{{< bootstrap-compatibility >}} + +```scss +.mt-0 { + margin-top: 0 !important; +} + +.ms-1 { + margin-left: ($spacer * .25) !important; +} + +.px-2 { + padding-left: ($spacer * .5) !important; + padding-right: ($spacer * .5) !important; +} + +.p-3 { + padding: $spacer !important; +} +``` + +{{< /bootstrap-compatibility >}} + +### Horizontal centering + +Additionally, OUDS Web also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`. + +
    +
    + Centered element +
    +
    + +```html +
    + Centered element +
    +``` + +## Negative margin + +In CSS, `margin` properties can utilize negative values (`padding` cannot). These negative margins are **disabled by default**, but can be enabled in Sass by setting `$enable-negative-margins: true`. + +The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here are some example classes that are the opposite of `.mt-short` and `.ms-scaled-tall`: + +```scss +.mt-nshort { + margin-top: -$ouds-space-fixed-short !important; +} + +.ms-scaled-ntall { + margin-top: calc(-1 * var(--bs-space-scaled-tall)) !important; +} +``` + +{{< bootstrap-compatibility >}} + +Here's an example class that's the opposite of `.mt-1`: + +```scss +.mt-n1 { + margin-top: -0.25rem !important; +} +``` + +{{< /bootstrap-compatibility >}} + +## Gap + +When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$ouds-dimension-space-fixed` Sass map. + +{{< example class="bd-example-cssgrid" >}} +
    +
    Grid item 1
    +
    Grid item 2
    +
    Grid item 3
    +
    Grid item 4
    +
    +{{< /example >}} + +Support includes responsive options for all of OUDS Web's grid breakpoints, as well as sizes from the `$ouds-dimension-space-fixed` map (`none`–`jumbo`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-none`. + +{{< bootstrap-compatibility >}} + +Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map. + +{{< example class="bd-example-cssgrid" >}} +
    +
    Grid item 1
    +
    Grid item 2
    +
    Grid item 3
    +
    Grid item 4
    +
    +{{< /example >}} + +Support includes responsive options for all of OUDS Web's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`. + +{{< /bootstrap-compatibility >}} + +### row-gap + +`row-gap` sets the vertical space between children items in the specified container. + +{{< example class="bd-example-cssgrid" >}} +
    +
    Grid item 1
    +
    Grid item 2
    +
    Grid item 3
    +
    Grid item 4
    +
    +{{< /example >}} + +{{< bootstrap-compatibility >}} + +{{< example class="bd-example-cssgrid" >}} +
    +
    Grid item 1
    +
    Grid item 2
    +
    Grid item 3
    +
    Grid item 4
    +
    +{{< /example >}} + +{{< /bootstrap-compatibility >}} + +### column-gap + +`column-gap` sets the horizontal space between children items in the specified container. + +{{< example class="bd-example-cssgrid" >}} +
    +
    Grid item 1
    +
    Grid item 2
    +
    Grid item 3
    +
    Grid item 4
    +
    +{{< /example >}} + +{{< bootstrap-compatibility >}} + +{{< example class="bd-example-cssgrid" >}} +
    +
    Grid item 1
    +
    Grid item 2
    +
    Grid item 3
    +
    Grid item 4
    +
    +{{< /example >}} + +{{< /bootstrap-compatibility >}} + +### Scaled gap + +We also provide scaled versions of the gap (including `row-gap` and `column-gap`). These are generated via our Utilities API, based on the `$ouds-dimension-space-scaled` Sass map. + +{{< example class="bd-example-cssgrid" >}} +
    +
    Grid item 1
    +
    Grid item 2
    +
    Grid item 3
    +
    Grid item 4
    +
    +{{< /example >}} + +## CSS + +### Variables + +CSS variables that are used to build our scaled utilities. + +{{< scss-docs name="root-space-scaled-var-ouds" file="scss/_root.scss" >}} + +### Sass tokens + +#### Raw tokens + +Dimension raw tokens as Sass variables. **Not to be used as-is**. + +{{< scss-docs name="ouds-raw-dimension" file="scss/tokens/_raw.scss" >}} + +#### Semantic tokens + +Spacing semantic tokens are defined as Sass variables. + +{{< scss-docs name="ouds-semantic-space" file="scss/tokens/_semantic.scss" >}} + +### Sass variables + +{{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}} + +### Sass maps + +Spacing utilities are declared via Sass map and then generated with our utilities API. + +{{< scss-docs name="ouds-maps-dimension" file="scss/_maps.scss" >}} + +### Sass utilities API + +Spacing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-spacing-ouds" file="scss/_utilities.scss" >}} + +{{< bootstrap-compatibility false >}} + +{{< scss-docs name="utils-spacing" file="scss/_utilities.scss" >}} + +{{< /bootstrap-compatibility >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 7f5d21f3f4..ddc9cccc1e 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -212,9 +212,7 @@ - title: Position - title: Shadows - title: Sizing - draft: true - title: Spacing - draft: true - title: Text draft: true - title: Vertical align diff --git a/site/layouts/partials/home/customize.html b/site/layouts/partials/home/customize.html index 29fb58f8c8..dd080be571 100644 --- a/site/layouts/partials/home/customize.html +++ b/site/layouts/partials/home/customize.html @@ -42,8 +42,8 @@

    Include what you need

    // Required OUDS Web imports @import "../node_modules/@ouds/web/scss/tokens/raw"; @import "../node_modules/@ouds/web/scss/tokens/semantic"; +@import "../node_modules/@ouds/web/scss/tokens/composite"; @import "../node_modules/@ouds/web/scss/tokens/component"; -@import "../node_modules/@ouds/web/scss/ouds-maps"; @import "../node_modules/@ouds/web/scss/variables"; @import "../node_modules/@ouds/web/scss/variables-dark"; @import "../node_modules/@ouds/web/scss/maps";