From 05c34d7b0b1c1b0c52fad2d7bbac6b7ffbbebdc2 Mon Sep 17 00:00:00 2001 From: Vincent Prothais Date: Wed, 18 Sep 2024 13:46:01 +0200 Subject: [PATCH] feat: add border token, utilities and documentation (#2687) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Louis Maxime Piton Co-authored-by: Julien Déramond --- .bundlewatch.config.json | 4 +- scss/_maps.scss | 36 + scss/_root.scss | 20 +- scss/_utilities.scss | 190 ++- scss/_variables.scss | 26 +- .../customize/_ouds-web-bootstrap.test.scss | 1345 ++++++++++++++++- scss/tokens/_raw.scss | 36 +- scss/tokens/_semantic.scss | 40 +- .../docs/0.0/migration-from-boosted.md | 134 +- site/content/docs/0.0/migration.md | 137 ++ site/content/docs/0.0/utilities/borders.md | 212 ++- site/content/docs/0.0/utilities/opacity.md | 21 +- site/data/sidebar.yml | 1 - .../shortcodes/bootstrap-compatibility.html | 2 +- 14 files changed, 2045 insertions(+), 159 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 709b33c554..357d0bc479 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./dist/css/ouds-web-bootstrap.css", - "maxSize": "44.75 kB" + "maxSize": "45.0 kB" }, { "path": "./dist/css/ouds-web-bootstrap.min.css", - "maxSize": "41.5 kB" + "maxSize": "41.75 kB" }, { "path": "./dist/css/ouds-web-grid.css", diff --git a/scss/_maps.scss b/scss/_maps.scss index b82c03a0dd..998de1c460 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -1,3 +1,39 @@ +// 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": $ouds-border-radius-pill, + "circle": 50% +) !default; + +$ouds-border-styles: ( + "drag": $ouds-border-style-drag +) !default; + +$ouds-border-widths: ( + "thin": $ouds-border-width-thin, + "thick": $ouds-border-width-thick, + "thicker": $ouds-border-width-thicker, + "thickest": $ouds-border-width-thickest, +) !default; +// scss-docs-end ouds-maps-borders + +// 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/_root.scss b/scss/_root.scss index fb9bc8ccb4..9373fd2c93 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -114,20 +114,24 @@ --#{$prefix}disabled-color: #{$disabled-color}; // OUDS mod --#{$prefix}tertiary-active-bg: #{$tertiary-active-bg}; // OUDS mod - // scss-docs-start root-border-var + // scss-docs-start root-border-var-ouds --#{$prefix}border-width: #{$border-width}; --#{$prefix}border-style: #{$border-style}; --#{$prefix}border-color: #{$border-color}; --#{$prefix}border-color-subtle: #{$border-color-subtle}; // OUDS mod --#{$prefix}border-color-translucent: #{$border-color-translucent}; + // scss-docs-end root-border-var-ouds - --#{$prefix}border-radius: #{$border-radius}; - --#{$prefix}border-radius-sm: #{$border-radius-sm}; - --#{$prefix}border-radius-lg: #{$border-radius-lg}; - --#{$prefix}border-radius-xl: #{$border-radius-xl}; - --#{$prefix}border-radius-xxl: #{$border-radius-xxl}; - --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in Bootstrap v5.3.0 for consistency - --#{$prefix}border-radius-pill: #{$border-radius-pill}; + // scss-docs-start root-border-var + @if $enable-bootstrap-compatibility { + --#{$prefix}border-radius: #{$border-radius}; + --#{$prefix}border-radius-sm: #{$border-radius-sm}; + --#{$prefix}border-radius-lg: #{$border-radius-lg}; + --#{$prefix}border-radius-xl: #{$border-radius-xl}; + --#{$prefix}border-radius-xxl: #{$border-radius-xxl}; + --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in Bootstrap v5.3.0 for consistency + --#{$prefix}border-radius-pill: #{$border-radius-pill}; + } // scss-docs-end root-border-var --#{$prefix}box-shadow: #{$box-shadow}; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 4e0349df96..db74136cbb 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -132,43 +132,59 @@ $utilities: map-merge( ) ), // scss-docs-end utils-position + // OUDS mod + // scss-docs-start utils-border-ouds + "border-ouds": ( + property: border, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": $ouds-border-width-none, + ), + ), + // scss-docs-end utils-border-ouds + // End mod // scss-docs-start utils-borders "border": ( property: border, values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + // OUDS mod: null value moved to border-ouds 0: 0, - ) + ), + bootstrap-compatibility: true ), "border-top": ( property: border-top, values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + // OUDS mod: null value moved to border-top-ouds 0: 0, - ) + ), + bootstrap-compatibility: true ), "border-end": ( property: border-right, class: border-end, values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + // OUDS mod: null value moved to border-end-ouds 0: 0, - ) + ), + bootstrap-compatibility: true ), "border-bottom": ( property: border-bottom, values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + // OUDS mod: null value moved to border-bottom-ouds 0: 0, - ) + ), + bootstrap-compatibility: true ), "border-start": ( property: border-left, class: border-start, values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + // OUDS mod: null value moved to border-start-ouds 0: 0, - ) + ), + bootstrap-compatibility: true ), "border-color": ( property: border-color, @@ -186,7 +202,8 @@ $utilities: map-merge( "border-width": ( property: border-width, class: border, - values: $border-widths + values: $border-widths, + bootstrap-compatibility: true ), "border-opacity": ( css-var: true, @@ -197,9 +214,54 @@ $utilities: map-merge( 50: .5, 75: .75, 100: 1 - ) + ), + bootstrap-compatibility: true ), // scss-docs-end utils-borders + // OUDS mod + // scss-docs-start utils-borders-ouds + "border-top-ouds": ( + property: border-top, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": $ouds-border-width-none, + ), + ), + "border-end-ouds": ( + property: border-right, + class: border-end, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": $ouds-border-width-none, + ), + ), + "border-bottom-ouds": ( + property: border-bottom, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": $ouds-border-width-none, + ), + ), + "border-start-ouds": ( + property: border-left, + class: border-start, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": $ouds-border-width-none, + ), + ), + "border-width-ouds": ( + property: border-width, + class: border, + values: $ouds-border-widths + ), + "border-style-ouds": ( + property: border-style, + class: border, + values: $ouds-border-styles + ), + // scss-docs-end utils-borders-ouds + // End mod // Sizing utilities // scss-docs-start utils-sizing "width": ( @@ -729,78 +791,102 @@ $utilities: map-merge( property: border-radius, class: rounded, values: ( - null: var(--#{$prefix}border-radius), + // OUDS mod: null value moved to rounded-ouds 0: 0, 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius), - 3: var(--#{$prefix}border-radius-lg), - 4: var(--#{$prefix}border-radius-xl), - 5: var(--#{$prefix}border-radius-xxl), - circle: 50%, - pill: var(--#{$prefix}border-radius-pill) - ) + 2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)` + 3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)` + 4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)` + 5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)` + ), + bootstrap-compatibility: true ), "rounded-top": ( property: border-top-left-radius border-top-right-radius, class: rounded-top, values: ( - null: var(--#{$prefix}border-radius), + // OUDS mod: null value moved to rounded-top-ouds 0: 0, 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius), - 3: var(--#{$prefix}border-radius-lg), - 4: var(--#{$prefix}border-radius-xl), - 5: var(--#{$prefix}border-radius-xxl), - circle: 50%, - pill: var(--#{$prefix}border-radius-pill) - ) + 2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)` + 3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)` + 4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)` + 5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)` + ), + bootstrap-compatibility: true ), "rounded-end": ( property: border-top-right-radius border-bottom-right-radius, class: rounded-end, values: ( - null: var(--#{$prefix}border-radius), + // OUDS mod: null value moved to rounded-end-ouds 0: 0, 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius), - 3: var(--#{$prefix}border-radius-lg), - 4: var(--#{$prefix}border-radius-xl), - 5: var(--#{$prefix}border-radius-xxl), - circle: 50%, - pill: var(--#{$prefix}border-radius-pill) - ) + 2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)` + 3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)` + 4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)` + 5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)` + ), + bootstrap-compatibility: true ), "rounded-bottom": ( property: border-bottom-right-radius border-bottom-left-radius, class: rounded-bottom, values: ( - null: var(--#{$prefix}border-radius), + // OUDS mod: null value moved to rounded-bottom-ouds 0: 0, 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius), - 3: var(--#{$prefix}border-radius-lg), - 4: var(--#{$prefix}border-radius-xl), - 5: var(--#{$prefix}border-radius-xxl), - circle: 50%, - pill: var(--#{$prefix}border-radius-pill) - ) + 2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)` + 3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)` + 4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)` + 5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)` + ), + bootstrap-compatibility: true ), "rounded-start": ( property: border-bottom-left-radius border-top-left-radius, class: rounded-start, values: ( - null: var(--#{$prefix}border-radius), + // OUDS mod: null value moved to rounded-start-ouds 0: 0, 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius), - 3: var(--#{$prefix}border-radius-lg), - 4: var(--#{$prefix}border-radius-xl), - 5: var(--#{$prefix}border-radius-xxl), - circle: 50%, - pill: var(--#{$prefix}border-radius-pill) - ) + 2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)` + 3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)` + 4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)` + 5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)` + ), + bootstrap-compatibility: true ), // scss-docs-end utils-border-radius + // OUDS mod + // scss-docs-start utils-border-radius-ouds + "rounded-ouds": ( + property: border-radius, + class: rounded, + values: $ouds-border-radiuses + ), + "rounded-top-ouds": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-top, + values: $ouds-border-radiuses + ), + "rounded-end-ouds": ( + property: border-top-right-radius border-bottom-right-radius, + class: rounded-end, + values: $ouds-border-radiuses + ), + "rounded-bottom-ouds": ( + property: border-bottom-right-radius border-bottom-left-radius, + class: rounded-bottom, + values: $ouds-border-radiuses + ), + "rounded-start-ouds": ( + property: border-bottom-left-radius border-top-left-radius, + class: rounded-start, + values: $ouds-border-radiuses + ), + // scss-docs-end utils-border-radius-ouds + // End mod // scss-docs-start utils-visibility "visibility": ( property: visibility, diff --git a/scss/_variables.scss b/scss/_variables.scss index 7310bad2d3..27df317098 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -611,27 +611,27 @@ $container-padding-x: $grid-gutter-width !default; // Define common padding and border radius sizes and more. // scss-docs-start border-variables -$border-width: .125rem !default; +$border-width: $ouds-border-width-default !default; // OUDS mod: instead of `.125rem` $border-widths: ( - 1: $border-width * .5, - 2: $border-width, - 3: $border-width * 1.5, - 4: $border-width * 2, - 5: $border-width * 2.5 + 1: $ouds-border-width-thin, // OUDS mod: instead of `$border-width * .5` + 2: $ouds-border-width-thick, // OUDS mod: instead of `$border-width` + 3: $ouds-border-width-thicker, // OUDS mod: instead of `$border-width * 1.5` + 4: $ouds-border-width-thickest, // OUDS mod: instead of `$border-width * 2` + 5: $ouds-border-width-thickest * 1.25 // OUDS mod: instead of `$border-width * 2.5` ) !default; -$border-style: solid !default; +$border-style: $ouds-border-style-default !default; // OUDS mod: instead of `solid` $border-color: $black !default; // OUDS mod: instead of `$gray-300` $border-color-subtle: $gray-500 !default; // OUDS mod $border-color-translucent: rgba($black, .175) !default; // scss-docs-end border-variables // scss-docs-start border-radius-variables -$border-radius: .375rem !default; -$border-radius-sm: .25rem !default; -$border-radius-lg: .5rem !default; -$border-radius-xl: 1rem !default; -$border-radius-xxl: 2rem !default; -$border-radius-pill: 50rem !default; +$border-radius: $ouds-border-radius-default !default; // OUDS mod: instead of `.375rem` +$border-radius-sm: $ouds-border-radius-short !default; // OUDS mod: instead of `.25rem` +$border-radius-lg: $ouds-border-radius-medium !default; // OUDS mod: instead of `.5rem` +$border-radius-xl: $ouds-border-radius-tall !default; //OUDS mod: instead of `1rem` +$border-radius-xxl: $ouds-border-radius-tall * 1.5 !default; // OUDS mod: instead of `2rem` +$border-radius-pill: $ouds-border-radius-pill !default; // OUDS mod: instead of `50rem` // scss-docs-end border-radius-variables // fusv-disable $border-radius-2xl: $border-radius-xxl !default; // Deprecated in Bootstrap v5.3.0 diff --git a/scss/tests/customize/_ouds-web-bootstrap.test.scss b/scss/tests/customize/_ouds-web-bootstrap.test.scss index cafc8dab28..a4bdb32731 100644 --- a/scss/tests/customize/_ouds-web-bootstrap.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap.test.scss @@ -3,12 +3,13 @@ @import "../../tokens/semantic"; @import "../../tokens/component"; @import "../../variables"; +@import "../../maps"; @import "../../mixins"; $utilities: (); @include describe("customize/ouds-web-bootstrap") { - @include it("generates OUDS and Bootstrap utilities") { + @include it("generates only OUDS utilities") { $enable-bootstrap-compatibility: false !global; $utilities: ( @@ -27,6 +28,211 @@ $utilities: (); property: opacity, values: $ouds-opacities ), + "border-ouds": ( + property: border, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border": ( + property: border, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-top": ( + property: border-top, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-end": ( + property: border-right, + class: border-end, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-bottom": ( + property: border-bottom, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-start": ( + property: border-left, + class: border-start, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-color": ( + property: border-color, + class: border, + local-vars: ( + "border-opacity": 1 + ), + values: $utilities-border-colors + ), + "subtle-border-color": ( + property: border-color, + class: border, + values: $utilities-border-subtle + ), + "border-width": ( + property: border-width, + class: border, + values: $border-widths, + bootstrap-compatibility: true + ), + "border-opacity": ( + css-var: true, + class: border-opacity, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ), + bootstrap-compatibility: true + ), + "border-top-ouds": ( + property: border-top, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": $ouds-border-width-none, + ), + ), + "border-end-ouds": ( + property: border-right, + class: border-end, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-bottom-ouds": ( + property: border-bottom, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-start-ouds": ( + property: border-left, + class: border-start, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-width-ouds": ( + property: border-width, + class: border, + values: $ouds-border-widths + ), + "border-style-ouds": ( + property: border-style, + class: border, + values: $ouds-border-styles + ), + "rounded": ( + property: border-radius, + class: rounded, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-top": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-top, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-end": ( + property: border-top-right-radius border-bottom-right-radius, + class: rounded-end, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-bottom": ( + property: border-bottom-right-radius border-bottom-left-radius, + class: rounded-bottom, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-start": ( + property: border-bottom-left-radius border-top-left-radius, + class: rounded-start, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-ouds": ( + property: border-radius, + class: rounded, + values: $ouds-border-radiuses + ), + "rounded-top-ouds": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-top, + values: $ouds-border-radiuses + ), + "rounded-end-ouds": ( + property: border-top-right-radius border-bottom-right-radius, + class: rounded-end, + values: $ouds-border-radiuses + ), + "rounded-bottom-ouds": ( + property: border-bottom-right-radius border-bottom-left-radius, + class: rounded-bottom, + values: $ouds-border-radiuses + ), + "rounded-start-ouds": ( + property: border-bottom-left-radius border-top-left-radius, + class: rounded-start, + values: $ouds-border-radiuses + ) ) !global; @include assert() { @@ -50,85 +256,1122 @@ $utilities: (); opacity: .32 !important; } - .opacity-emphasis { + .opacity-strong { opacity: .64 !important; } .opacity-opaque { opacity: 1 !important; } - } - } - } - @include it("generates only OUDS utilities") { - $enable-bootstrap-compatibility: true !global; + .border { + border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + } - $utilities: ( - "opacity": ( - property: opacity, - values: ( - 0: 0, - 25: .25, - 50: .5, - 75: .75, - 100: 1, - ), - bootstrap-compatibility: true - ), - "opacity-ouds": ( - property: opacity, - values: $ouds-opacities - ), - ) !global; + .border-none { + border: 0 !important; + } - @include assert() { - @include output() { - @import "../../utilities/api"; // stylelint-disable-line no-duplicate-at-import-rules - } - @include expect() { - .opacity-0 { - opacity: 0 !important; + .border-primary { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important; } - .opacity-25 { - opacity: .25 !important; + .border-secondary { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important; } - .opacity-50 { - opacity: .5 !important; + .border-success { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important; } - .opacity-75 { - opacity: .75 !important; + .border-info { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important; } - .opacity-100 { - opacity: 1 !important; + .border-warning { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important; } - .opacity-transparent { - opacity: 0 !important; + .border-danger { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important; } - .opacity-weaker { - opacity: .04 !important; + .border-light { + --bs-border-opacity: 1; + border-color: rgba(204, 204, 204, var(--bs-border-opacity)) !important; } - .opacity-weak { - opacity: .16 !important; + .border-dark { + --bs-border-opacity: 1; + border-color: rgba(102, 102, 102, var(--bs-border-opacity)) !important; } - .opacity-medium { - opacity: .32 !important; + .border-black { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important; } - .opacity-emphasis { - opacity: .64 !important; + .border-white { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important; } - .opacity-opaque { - opacity: 1 !important; + .border-primary-subtle { + border-color: var(--bs-primary-border-subtle) !important; + } + + .border-secondary-subtle { + border-color: var(--bs-secondary-border-subtle) !important; + } + + .border-success-subtle { + border-color: var(--bs-success-border-subtle) !important; + } + + .border-info-subtle { + border-color: var(--bs-info-border-subtle) !important; + } + + .border-warning-subtle { + border-color: var(--bs-warning-border-subtle) !important; + } + + .border-danger-subtle { + border-color: var(--bs-danger-border-subtle) !important; + } + + .border-light-subtle { + border-color: var(--bs-light-border-subtle) !important; + } + + .border-dark-subtle { + border-color: var(--bs-dark-border-subtle) !important; + } + + .border-top { + border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + } + + .border-top-none { + border-top: 0 !important; + } + + .border-end { + border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + } + + .border-end-none { + border-right: 0 !important; + } + + .border-bottom { + border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + } + + .border-bottom-none { + border-bottom: 0 !important; + } + + .border-start { + border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + } + + .border-start-none { + border-left: 0 !important; + } + + .border-thin { + border-width: 1px !important; + } + + .border-thick { + border-width: 2px !important; + } + + .border-thicker { + border-width: 3px !important; + } + + .border-thickest { + border-width: 4px !important; + } + + .border-drag { + border-style: dashed !important; + } + + .rounded { + border-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-none { + border-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-short { + border-radius: 3px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-medium { + border-radius: 6px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-tall { + border-radius: 12px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-pill { + border-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-circle { + border-radius: 50% !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top { + border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-none { + border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-short { + border-top-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-medium { + border-top-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-tall { + border-top-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-pill { + border-top-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-circle { + border-top-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end { + border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-none { + border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-short { + border-top-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-medium { + border-top-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-tall { + border-top-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-pill { + border-top-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-circle { + border-top-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom { + border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-none { + border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-short { + border-bottom-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-medium { + border-bottom-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-tall { + border-bottom-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-pill { + border-bottom-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-circle { + border-bottom-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-start { + border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-none { + border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-short { + border-bottom-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-medium { + border-bottom-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-tall { + border-bottom-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-pill { + border-bottom-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-circle { + border-bottom-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + } + } + } + + @include it("generates OUDS and Bootstrap utilities") { + $enable-bootstrap-compatibility: true !global; + + $utilities: ( + "opacity": ( + property: opacity, + values: ( + 0: 0, + 25: .25, + 50: .5, + 75: .75, + 100: 1, + ), + bootstrap-compatibility: true + ), + "opacity-ouds": ( + property: opacity, + values: $ouds-opacities + ), + "border-ouds": ( + property: border, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border": ( + property: border, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-top": ( + property: border-top, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-end": ( + property: border-right, + class: border-end, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-bottom": ( + property: border-bottom, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-start": ( + property: border-left, + class: border-start, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-color": ( + property: border-color, + class: border, + local-vars: ( + "border-opacity": 1 + ), + values: $utilities-border-colors + ), + "subtle-border-color": ( + property: border-color, + class: border, + values: $utilities-border-subtle + ), + "border-width": ( + property: border-width, + class: border, + values: $border-widths, + bootstrap-compatibility: true + ), + "border-opacity": ( + css-var: true, + class: border-opacity, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ), + bootstrap-compatibility: true + ), + "border-top-ouds": ( + property: border-top, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": $ouds-border-width-none, + ), + ), + "border-end-ouds": ( + property: border-right, + class: border-end, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-bottom-ouds": ( + property: border-bottom, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-start-ouds": ( + property: border-left, + class: border-start, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-width-ouds": ( + property: border-width, + class: border, + values: $ouds-border-widths + ), + "border-style-ouds": ( + property: border-style, + class: border, + values: $ouds-border-styles + ), + "rounded": ( + property: border-radius, + class: rounded, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-top": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-top, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-end": ( + property: border-top-right-radius border-bottom-right-radius, + class: rounded-end, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-bottom": ( + property: border-bottom-right-radius border-bottom-left-radius, + class: rounded-bottom, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-start": ( + property: border-bottom-left-radius border-top-left-radius, + class: rounded-start, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-ouds": ( + property: border-radius, + class: rounded, + values: $ouds-border-radiuses + ), + "rounded-top-ouds": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-top, + values: $ouds-border-radiuses + ), + "rounded-end-ouds": ( + property: border-top-right-radius border-bottom-right-radius, + class: rounded-end, + values: $ouds-border-radiuses + ), + "rounded-bottom-ouds": ( + property: border-bottom-right-radius border-bottom-left-radius, + class: rounded-bottom, + values: $ouds-border-radiuses + ), + "rounded-start-ouds": ( + property: border-bottom-left-radius border-top-left-radius, + class: rounded-start, + values: $ouds-border-radiuses + ) + ) !global; + + @include assert() { + @include output() { + @import "../../utilities/api"; // stylelint-disable-line no-duplicate-at-import-rules + } + @include expect() { + .opacity-0 { + opacity: 0 !important; + } + + .opacity-25 { + opacity: .25 !important; + } + + .opacity-50 { + opacity: .5 !important; + } + + .opacity-75 { + opacity: .75 !important; + } + + .opacity-100 { + opacity: 1 !important; + } + + .opacity-transparent { + opacity: 0 !important; + } + + .opacity-weaker { + opacity: .04 !important; + } + + .opacity-weak { + opacity: .16 !important; + } + + .opacity-medium { + opacity: .32 !important; + } + + .opacity-strong { + opacity: .64 !important; + } + + .opacity-opaque { + opacity: 1 !important; + } + + .border { + border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + } + + .border-none { + border: 0 !important; + } + + .border-0 { + border: 0 !important; + } + + .border-top-0 { + border-top: 0 !important; + } + + .border-end-0 { + border-right: 0 !important; + } + + .border-bottom-0 { + border-bottom: 0 !important; + } + + .border-start-0 { + border-left: 0 !important; + } + + .border-primary { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important; + } + + .border-secondary { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important; + } + + .border-success { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important; + } + + .border-info { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important; + } + + .border-warning { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important; + } + + .border-danger { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important; + } + + .border-light { + --bs-border-opacity: 1; + border-color: rgba(204, 204, 204, var(--bs-border-opacity)) !important; + } + + .border-dark { + --bs-border-opacity: 1; + border-color: rgba(102, 102, 102, var(--bs-border-opacity)) !important; + } + + .border-black { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important; + } + + .border-white { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important; + } + + .border-primary-subtle { + border-color: var(--bs-primary-border-subtle) !important; + } + + .border-secondary-subtle { + border-color: var(--bs-secondary-border-subtle) !important; + } + + .border-success-subtle { + border-color: var(--bs-success-border-subtle) !important; + } + + .border-info-subtle { + border-color: var(--bs-info-border-subtle) !important; + } + + .border-warning-subtle { + border-color: var(--bs-warning-border-subtle) !important; + } + + .border-danger-subtle { + border-color: var(--bs-danger-border-subtle) !important; + } + + .border-light-subtle { + border-color: var(--bs-light-border-subtle) !important; + } + + .border-dark-subtle { + border-color: var(--bs-dark-border-subtle) !important; + } + + .border-1 { + border-width: 1px !important; + } + + .border-2 { + border-width: 2px !important; + } + + .border-3 { + border-width: 3px !important; + } + + .border-4 { + border-width: 4px !important; + } + + .border-5 { + border-width: 5px !important; + } + + .border-opacity-10 { + // Sass compilation will put a leading zero so we want to keep that one + // stylelint-disable-next-line @stylistic/number-leading-zero + --bs-border-opacity: 0.1; + } + + .border-opacity-25 { + // Sass compilation will put a leading zero so we want to keep that one + // stylelint-disable-next-line @stylistic/number-leading-zero + --bs-border-opacity: 0.25; + } + + .border-opacity-50 { + // Sass compilation will put a leading zero so we want to keep that one + // stylelint-disable-next-line @stylistic/number-leading-zero + --bs-border-opacity: 0.5; + } + + .border-opacity-75 { + // Sass compilation will put a leading zero so we want to keep that one + // stylelint-disable-next-line @stylistic/number-leading-zero + --bs-border-opacity: 0.75; + } + + .border-opacity-100 { + --bs-border-opacity: 1; + } + + .border-top { + border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + } + + .border-top-none { + border-top: 0 !important; + } + + .border-end { + border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + } + + .border-end-none { + border-right: 0 !important; + } + + .border-bottom { + border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + } + + .border-bottom-none { + border-bottom: 0 !important; + } + + .border-start { + border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + } + + .border-start-none { + border-left: 0 !important; + } + + .border-thin { + border-width: 1px !important; + } + + .border-thick { + border-width: 2px !important; + } + + .border-thicker { + border-width: 3px !important; + } + + .border-thickest { + border-width: 4px !important; + } + + .border-drag { + border-style: dashed !important; + } + + .rounded-0 { + border-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-1 { + border-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-2 { + border-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-3 { + border-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-4 { + border-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-5 { + border-radius: 27px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-0 { + border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-1 { + border-top-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-2 { + border-top-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-3 { + border-top-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-4 { + border-top-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-5 { + border-top-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-0 { + border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-1 { + border-top-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-2 { + border-top-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-3 { + border-top-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-4 { + border-top-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-5 { + border-top-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-0 { + border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-1 { + border-bottom-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-2 { + border-bottom-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-3 { + border-bottom-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-4 { + border-bottom-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-5 { + border-bottom-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-start-0 { + border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-1 { + border-bottom-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-2 { + border-bottom-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-3 { + border-bottom-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-4 { + border-bottom-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-5 { + border-bottom-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded { + border-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-none { + border-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-short { + border-radius: 3px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-medium { + border-radius: 6px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-tall { + border-radius: 12px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-pill { + border-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-circle { + border-radius: 50% !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top { + border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-none { + border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-short { + border-top-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-medium { + border-top-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-tall { + border-top-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-pill { + border-top-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-top-circle { + border-top-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list + border-top-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end { + border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-none { + border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-short { + border-top-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-medium { + border-top-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-tall { + border-top-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-pill { + border-top-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-end-circle { + border-top-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list + border-bottom-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom { + border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-none { + border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-short { + border-bottom-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-medium { + border-bottom-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-tall { + border-bottom-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-pill { + border-bottom-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-bottom-circle { + border-bottom-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list + border-bottom-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list + } + + .rounded-start { + border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-none { + border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-short { + border-bottom-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-medium { + border-bottom-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-tall { + border-bottom-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-pill { + border-bottom-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list, order/properties-order + } + + .rounded-start-circle { + border-bottom-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list + border-top-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list, order/properties-order } } } diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index d9ec110122..37cf42259f 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -3,9 +3,41 @@ //// Raw primitive values //// Insertion of brand foundations +// Border + +// scss-docs-start ouds-raw-border +$ouds-border-base: 4px !default; + +$ouds-border-radius-0: 0 !default; +// $ouds-border-radius-25: $ouds-border-base * .25 !default; +// $ouds-border-radius-50: $ouds-border-base * .5 !default; +$ouds-border-radius-75: $ouds-border-base * .75 !default; +// $ouds-border-radius-100: $ouds-border-base !default; +$ouds-border-radius-150: $ouds-border-base * 1.5 !default; +// $ouds-border-radius-200: $ouds-border-base * 2 !default; +$ouds-border-radius-300: $ouds-border-base * 3 !default; +// $ouds-border-radius-400: $ouds-border-base * 4 !default; +// $ouds-border-radius-500: $ouds-border-base * 5 !default; +// $ouds-border-radius-600: $ouds-border-base * 6 !default; +// $ouds-border-radius-800: $ouds-border-base * 8 !default; + +// $ouds-border-style-none: none !default; +$ouds-border-style-solid: solid !default; +$ouds-border-style-dashed: dashed !default; +// $ouds-border-style-dotted: dotted !default; + +$ouds-border-width-0: 0 !default; +$ouds-border-width-25: $ouds-border-base * .25 !default; +$ouds-border-width-50: $ouds-border-base * .5 !default; +$ouds-border-width-75: $ouds-border-base * .75 !default; +$ouds-border-width-100: $ouds-border-base !default; +// $ouds-border-width-150: $ouds-border-base * 1.5 !default; +// $ouds-border-width-200: $ouds-border-base * 2 !default; +// scss-docs-end ouds-raw-border + // Opacity -// scss-docs-start ouds-opacities-variables +// scss-docs-start ouds-raw-opacity $ouds-opacity-0: 0 !default; $ouds-opacity-100: .04 !default; // $ouds-opacity-200: .08 !default; @@ -16,4 +48,4 @@ $ouds-opacity-500: .32 !default; $ouds-opacity-700: .64 !default; // $ouds-opacity-800: .80 !default; $ouds-opacity-900: 1 !default; -// scss-docs-end ouds-opacities-variables +// scss-docs-end ouds-raw-opacity diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index a0b0819c16..5e9d25b632 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -1,15 +1,35 @@ //// Semantic applications //// Depends on raw primitive values +// Border + +// scss-docs-start ouds-semantic-border +$ouds-border-radius-none: $ouds-border-radius-0 !default; +$ouds-border-radius-default: $ouds-border-radius-0 !default; +$ouds-border-radius-short: $ouds-border-radius-75 !default; +$ouds-border-radius-medium: $ouds-border-radius-150 !default; +$ouds-border-radius-tall: $ouds-border-radius-300 !default; +$ouds-border-radius-pill: 125rem !default; + +$ouds-border-style-default: $ouds-border-style-solid !default; +$ouds-border-style-drag: $ouds-border-style-dashed !default; + +$ouds-border-width-none: $ouds-border-width-0 !default; +$ouds-border-width-default: $ouds-border-width-25 !default; +$ouds-border-width-thin: $ouds-border-width-25 !default; +$ouds-border-width-thick: $ouds-border-width-50 !default; +$ouds-border-width-thicker: $ouds-border-width-75 !default; +$ouds-border-width-thickest: $ouds-border-width-100 !default; +// $ouds-border-width-interactive-primary-focus: $ouds-border-width-100 !default; +// scss-docs-end ouds-semantic-border + // Opacity -// scss-docs-start ouds-opacities-variables-maps -$ouds-opacities: ( - "transparent": $ouds-opacity-0, - "weaker": $ouds-opacity-100, - "weak": $ouds-opacity-300, - "medium": $ouds-opacity-500, - "emphasis": $ouds-opacity-700, - "opaque": $ouds-opacity-900 -) !default; -// scss-docs-end ouds-opacities-variables-maps +// scss-docs-start ouds-semantic-opacity +$ouds-opacity-transparent: $ouds-opacity-0 !default; +$ouds-opacity-weaker: $ouds-opacity-100 !default; +$ouds-opacity-weak: $ouds-opacity-300 !default; +$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 diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index 94c783e271..fceb47c342 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -9,7 +9,7 @@ aliases: toc: true --- -This guide provides information on how to migrate from Boosted (latest release) to OUDS Web. +This guide provides information on how to migrate from Boosted (latest release) to OUDS Web, with Bootstrap compatibility turned off. Let's start with the most obvious change you'll notice: the name. **Boosted is now OUDS Web.** @@ -55,10 +55,36 @@ Technically, it means that you can get rid of the following things: ## Utilities +### Border + +- Breaking Border operative utilities have been removed: `.border-0`, `.border-top-0`, `.border-bottom-0`, `.border-start-0`, and `.border-end-0`. Please check the new [border values]({{< docsref "/utilities/borders#border" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. + +- New Border operative utilities: `.border-none`, `.border-top-none`, `.border-bottom-none`, `.border-start-none`, and `.border-end-none`. + +- Breaking Border width utilities have been removed: `.border-0`, `.border-1`, `.border-2`, `.border-3`, `.border-4` and `.border-5`. Please check the new [border values]({{< docsref "/utilities/borders#width" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. + +- New Border width utilities: `.border-none`, `.border-thin`, `.border-thick`, `.border-thicker` and `.border-thickest`. + +- 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`. + +- 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`. + +- New Border style utilities: `.border-drag`. + ### Opacity - Breaking `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75` and `.opacity-100` have been removed from the default build. Please check the new [opacity values]({{< docsref "/utilities/opacity" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. -- New Opacity utilities: `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-emphasis` and `.opacity-opaque`. +- New Opacity utilities: `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-strong` and `.opacity-opaque`. ## CSS and Sass variables @@ -81,6 +107,79 @@ Technically, it means that you can get rid of the following things: ``` +-
+ New Sass variables: +
    +
  • $ouds-border-base
    • +
  • $ouds-border-radius-0
    • +
  • $ouds-border-radius-75
    • +
  • $ouds-border-radius-150
    • +
  • $ouds-border-radius-300
    • +
  • $ouds-border-radius-default
    • +
  • $ouds-border-radius-medium
    • +
  • $ouds-border-radius-none
    • +
  • $ouds-border-radius-pill
    • +
  • $ouds-border-radius-short
    • +
  • $ouds-border-radius-tall
    • +
  • $ouds-border-style-dashed
    • +
  • $ouds-border-style-default
    • +
  • $ouds-border-style-drag
    • +
  • $ouds-border-style-solid
    • +
  • $ouds-border-width-0
    • +
  • $ouds-border-width-25
    • +
  • $ouds-border-width-50
    • +
  • $ouds-border-width-75
    • +
  • $ouds-border-width-100
    • +
  • $ouds-border-width-default
    • +
  • $ouds-border-width-none
    • +
  • $ouds-border-width-thick
    • +
  • $ouds-border-width-thicker
    • +
  • $ouds-border-width-thickest
    • +
  • $ouds-border-width-thin
    • +
  • $ouds-opacity-0
    • +
  • $ouds-opacity-100
    • +
  • $ouds-opacity-300
    • +
  • $ouds-opacity-500
    • +
  • $ouds-opacity-700
    • +
  • $ouds-opacity-900
    • +
  • $ouds-opacity-medium
    • +
  • $ouds-opacity-opaque
    • +
  • $ouds-opacity-strong
    • +
  • $ouds-opacity-transparent
    • +
  • $ouds-opacity-weak
    • +
  • $ouds-opacity-weaker
    • +
+
+ +-
+ New Sass maps: +
    +
  • $ouds-border-radiuses
    • +
  • $ouds-border-styles
    • +
  • $ouds-border-widths
    • +
  • $ouds-opacities
    • +
+
+ +-
+ New keys in $utilities map: +
    +
  • border-bottom-ouds
    • +
  • border-end-ouds
    • +
  • border-ouds
    • +
  • border-start-ouds
    • +
  • border-style-ouds
    • +
  • border-top-ouds
    • +
  • border-width-ouds
    • +
  • opacity-ouds
    • +
  • rounded-bottom-ouds
    • +
  • rounded-end-ouds
    • +
  • rounded-ouds
    • +
  • rounded-start-ouds
    • +
  • rounded-top-ouds
    • +
+
+ -
Warning Dropped deprecated Sass variables:
    @@ -121,20 +220,33 @@ Technically, it means that you can get rid of the following things:
-
- New Sass variables: + Breaking Dropped CSS variables:
    -
  • $ouds-opacity-0
    • -
  • $ouds-opacity-100
    • -
  • $ouds-opacity-300
    • -
  • $ouds-opacity-500
    • -
  • $ouds-opacity-700
    • -
  • $ouds-opacity-900
    • +
  • --bs-border-radius
    • +
  • --bs-border-radius-2xl
    • +
  • --bs-border-radius-lg
    • +
  • --bs-border-radius-pill
    • +
  • --bs-border-radius-sm
    • +
  • --bs-border-radius-xl
    • +
  • --bs-border-radius-xxl
-
- New Sass maps: + Breaking keys in $utilities map only available when $enable-bootstrap-compatibility is on:
    -
  • $ouds-opacities
    • +
  • border
    • +
  • border-bottom
    • +
  • border-end
    • +
  • border-opacity
    • +
  • border-start
    • +
  • border-top
    • +
  • border-width
    • +
  • opacity
    • +
  • rounded
    • +
  • rounded-bottom
    • +
  • rounded-end
    • +
  • rounded-start
    • +
  • rounded-top
diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index d675a91dd8..77bdd4473f 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -9,6 +9,129 @@ aliases: toc: true --- +## v0.0.4 + +### Utilities + +#### Border + +- New Border operative utilities: `.border`, `.border-none`, `.border-top`, `.border-top-none`, `.border-bottom`, `.border-bottom-none`, `.border-start`, `.border-start-none`, `.border-end` and `.border-end-none`. + +- New Border width utilities: `.border-none`, `.border-thin`, `.border-thick`, `.border-thicker` and `.border-thickest`. + +- 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`. + +- New Border style utilities: `.border-drag`. + +#### Opacity + +- Breaking Opacity utilities: `.opacity-emphasis` has been renamed to `.opacity-strong`. + +### CSS and Sass variables + +-
+ New Sass variables: +
    +
  • $ouds-border-base
    • +
  • $ouds-border-radius-0
    • +
  • $ouds-border-radius-75
    • +
  • $ouds-border-radius-150
    • +
  • $ouds-border-radius-300
    • +
  • $ouds-border-radius-default
    • +
  • $ouds-border-radius-medium
    • +
  • $ouds-border-radius-none
    • +
  • $ouds-border-radius-pill
    • +
  • $ouds-border-radius-short
    • +
  • $ouds-border-radius-tall
    • +
  • $ouds-border-style-dashed
    • +
  • $ouds-border-style-default
    • +
  • $ouds-border-style-drag
    • +
  • $ouds-border-style-solid
    • +
  • $ouds-border-width-0
    • +
  • $ouds-border-width-25
    • +
  • $ouds-border-width-50
    • +
  • $ouds-border-width-75
    • +
  • $ouds-border-width-100
    • +
  • $ouds-border-width-default
    • +
  • $ouds-border-width-none
    • +
  • $ouds-border-width-thick
    • +
  • $ouds-border-width-thicker
    • +
  • $ouds-border-width-thickest
    • +
  • $ouds-border-width-thin
    • +
  • $ouds-opacity-medium
    • +
  • $ouds-opacity-opaque
    • +
  • $ouds-opacity-strong
    • +
  • $ouds-opacity-transparent
    • +
  • $ouds-opacity-weak
    • +
  • $ouds-opacity-weaker
    • +
+
+ +-
+ New Sass maps: +
    +
  • $ouds-border-radiuses
    • +
  • $ouds-border-styles
    • +
  • $ouds-border-widths
    • +
+
+ +-
+ New keys in $utilities map: +
    +
  • border-bottom-ouds
    • +
  • border-end-ouds
    • +
  • border-ouds
    • +
  • border-start-ouds
    • +
  • border-style-ouds
    • +
  • border-top-ouds
    • +
  • border-width-ouds
    • +
  • rounded-bottom-ouds
    • +
  • rounded-end-ouds
    • +
  • rounded-ouds
    • +
  • rounded-start-ouds
    • +
  • rounded-top-ouds
    • +
+
+ +-
+ Breaking Dropped CSS variables: +
    +
  • --bs-border-radius
    • +
  • --bs-border-radius-2xl
    • +
  • --bs-border-radius-lg
    • +
  • --bs-border-radius-pill
    • +
  • --bs-border-radius-sm
    • +
  • --bs-border-radius-xl
    • +
  • --bs-border-radius-xxl
    • +
+
+ +-
+ Breaking keys in $utilities map only available when $enable-bootstrap-compatibility is on: +
    +
  • border
    • +
  • border-bottom
    • +
  • border-end
    • +
  • border-opacity
    • +
  • border-start
    • +
  • border-top
    • +
  • border-width
    • +
  • rounded
    • +
  • rounded-bottom
    • +
  • rounded-end
    • +
  • rounded-start
    • +
  • rounded-top
    • +
+
+ ## v0.0.3 ### Pre-compiled versions @@ -61,6 +184,20 @@ From now on, OUDS Web won't embed Bootstrap elements that are not part of Orange +-
+ New keys in $utilities map: +
    +
  • opacity-ouds
    • +
+
+ +-
+ Breaking keys in $utilities map only available when $enable-bootstrap-compatibility is on: +
    +
  • opacity
    • +
+
+ ## v0.0.1
diff --git a/site/content/docs/0.0/utilities/borders.md b/site/content/docs/0.0/utilities/borders.md index fd1f7f00e1..71f6344068 100644 --- a/site/content/docs/0.0/utilities/borders.md +++ b/site/content/docs/0.0/utilities/borders.md @@ -8,4 +8,214 @@ aliases: toc: true --- -{{< callout-soon "page" >}} +## Border + +Use border utilities to add or remove an element's borders. Choose from all borders or one at a time. + +### Additive + +Add borders to custom elements: + +{{< example class="bd-example-border-utils" >}} + + + + + +{{< /example >}} + +### Subtractive + +Or remove borders: + +{{< example class="bd-example-border-utils" >}} + + + + + +{{< /example >}} + +{{< bootstrap-compatibility >}} + +{{< example class="bd-example-border-utils" >}} + + + + + +{{< /example >}} + +{{< /bootstrap-compatibility >}} + + + + + +## Width + +{{< example class="bd-example-border-utils" >}} + + + + + +{{< /example >}} + +{{< bootstrap-compatibility >}} + +{{< example class="bd-example-border-utils" >}} + + + + + + +{{< /example >}} + +{{< /bootstrap-compatibility >}} + +## Radius + +Add classes to an element to easily round its corners. + +{{< example >}} +{{< placeholder width="75" height="75" class="rounded-tall" title="Example rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-top-tall" title="Example top rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-end-tall" title="Example right rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-bottom-tall" title="Example bottom rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-start-tall" title="Example left rounded image" color="#999" >}} +{{< /example >}} + +### Sizes + +Use the scaling classes for larger or smaller rounded corners. Sizes are `none`, `short`, `medium`, `tall`, `circle` and `pill`, and can be configured by modifying the utilities API. + +{{< callout info >}} +The `.rounded` class is mapped to the "default" border radius design token. In Orange brand, the value for this token is zero, explaining why the `.rounded` class does not apply any border radius here. +{{< /callout >}} + +{{< example class="bd-example-rounded-utils" >}} +{{< placeholder width="75" height="75" class="rounded" title="Example default rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-none" title="Example non-rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-short" title="Example short rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-medium" title="Example medium rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-tall" title="Example tall rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" color="#999" >}} +{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" color="#999" >}} +{{< /example >}} + +{{< example class="bd-example-rounded-utils" >}} +{{< placeholder width="75" height="75" class="rounded-bottom-short" title="Example small rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-start-medium" title="Example default left rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-tall rounded-top-none" title="Example extra large bottom rounded image" color="#999" >}} +{{< /example >}} + +{{< bootstrap-compatibility >}} + +Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5`, and can be configured by modifying the utilities API. + +{{< example class="bd-example-rounded-utils" >}} +{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" color="#999" >}} +{{< /example >}} + +{{< example class="bd-example-rounded-utils" >}} +{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" color="#999" >}} +{{< /example >}} + +{{< /bootstrap-compatibility >}} + + + +## Drag and drop + +Use the `.border-drag` utility to apply the border style for a drop zone. + +{{< callout danger >}} +This utility must not be used in any other context than drag and drop. +{{< /callout >}} + +{{< example class="bd-example-border-utils" >}} + +{{< /example >}} + +## CSS + +### Variables + +{{< scss-docs name="root-border-var-ouds" file="scss/_root.scss" >}} + +{{< bootstrap-compatibility false >}} + +{{< scss-docs name="root-border-var" file="scss/_root.scss" >}} + +{{< /bootstrap-compatibility >}} + +### Sass tokens + +#### Raw tokens + +Border raw tokens as Sass variables. **Not to be used as-is**. + +{{< scss-docs name="ouds-raw-border" file="scss/tokens/_raw.scss" >}} + +#### Semantic tokens + +Border semantic tokens are defined as a Sass map. The border utilities are declared through this map and generated using our utilities API. + +{{< scss-docs name="ouds-semantic-border" file="scss/tokens/_semantic.scss" >}} + +### Sass variables + +{{< scss-docs name="border-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}} + + + +### Sass maps + +{{< scss-docs name="ouds-maps-borders" file="scss/_maps.scss" >}} + + + +### Sass mixins + +{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}} + +### Sass utilities API + +Border 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-border-ouds" file="scss/_utilities.scss" >}} + +{{< scss-docs name="utils-borders-ouds" file="scss/_utilities.scss" >}} + +{{< scss-docs name="utils-border-radius-ouds" file="scss/_utilities.scss" >}} + +{{< bootstrap-compatibility false >}} + +{{< scss-docs name="utils-borders" file="scss/_utilities.scss" >}} + +{{< scss-docs name="utils-border-radius" file="scss/_utilities.scss" >}} + +{{< /bootstrap-compatibility >}} diff --git a/site/content/docs/0.0/utilities/opacity.md b/site/content/docs/0.0/utilities/opacity.md index c4d87d4256..ff11cbf2d8 100644 --- a/site/content/docs/0.0/utilities/opacity.md +++ b/site/content/docs/0.0/utilities/opacity.md @@ -5,6 +5,7 @@ description: Control the opacity of elements. group: utilities aliases: - "/docs/utilities/opacity/" +toc: true --- The `opacity` property sets the opacity level for an element. The opacity level describes the semantic transparency level, where `opaque` is not transparent at all, `emphasis` to `weaker` are various levels of transparency, and `transparent` is completely transparent. @@ -13,7 +14,7 @@ Set the opacity of an element using `.opacity-{value}` utilities.
-
+
@@ -22,7 +23,7 @@ Set the opacity of an element using `.opacity-{value}` utilities. ```html
...
-
...
+
...
...
...
...
@@ -60,15 +61,21 @@ Set the `opacity` of an element using `.opacity-{value}` utilities. ### Sass tokens -Opacity tokens as Sass variables. +#### Raw tokens -{{< scss-docs name="ouds-opacities-variables" file="scss/tokens/_raw.scss" >}} +Opacity raw tokens as Sass variables. **Not to be used as-is**. -### Sass maps +{{< scss-docs name="ouds-raw-opacity" file="scss/tokens/_raw.scss" >}} + +#### Semantic tokens + +Opacity semantic tokens are defined as a Sass map. The opacity utilities are declared through this map and generated using our utilities API. -Opacity utilities are declared via a Sass map and then generated with our utilities API. +{{< scss-docs name="ouds-semantic-opacity" file="scss/tokens/_semantic.scss" >}} + +### Sass maps -{{< scss-docs name="ouds-opacities-variables-maps" file="scss/tokens/_semantic.scss" >}} +{{< scss-docs name="ouds-maps-opacities" file="scss/_maps.scss" >}} ### Sass utilities API diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 1a090ba1ff..22982eece4 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -205,7 +205,6 @@ - title: Background draft: true - title: Borders - draft: true - title: Colors draft: true - title: Display diff --git a/site/layouts/shortcodes/bootstrap-compatibility.html b/site/layouts/shortcodes/bootstrap-compatibility.html index 548b617eb2..c4702ee19c 100644 --- a/site/layouts/shortcodes/bootstrap-compatibility.html +++ b/site/layouts/shortcodes/bootstrap-compatibility.html @@ -5,7 +5,7 @@ {{- if $markdown -}}