From 797713aa5753f12fd898b60363eabdc0f43e4573 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 17 Dec 2024 16:39:34 +0100 Subject: [PATCH] Add border color utilities to the Colors tokens PR --- .bundlewatch.config.json | 2 +- scss/_maps.scss | 11 +- scss/_utilities.scss | 11 +- .../_ouds-web-bootstrap-utilities.test.scss | 136 +++++++----------- site/assets/scss/_callouts.scss | 2 +- site/assets/scss/_component-examples.scss | 4 - site/content/docs/0.0/content/reboot.md | 11 +- site/content/docs/0.0/utilities/borders.md | 49 ++++++- site/content/docs/0.0/utilities/position.md | 16 +-- site/content/docs/0.0/utilities/text.md | 2 +- site/layouts/shortcodes/example.html | 2 +- site/layouts/shortcodes/js-docs.html | 4 +- site/layouts/shortcodes/scss-docs.html | 4 +- 13 files changed, 137 insertions(+), 117 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index c6efe2b3e0..f34f1e7545 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -6,7 +6,7 @@ }, { "path": "./dist/css/ouds-web-bootstrap.min.css", - "maxSize": "60.5 kB" + "maxSize": "60.75 kB" }, { "path": "./dist/css/ouds-web-grid.css", diff --git a/scss/_maps.scss b/scss/_maps.scss index 04e247adff..7a9ac3fe03 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -20,6 +20,13 @@ $ouds-border-widths: ( "thick": $ouds-border-width-thick, "thicker": $ouds-border-width-thicker, ) !default; + +$ouds-border-colors: ( + "brand-primary": var(--#{$prefix}color-border-brand-primary), + "default": var(--#{$prefix}color-border-default), + "emphasized": var(--#{$prefix}color-border-emphasized), + "on-brand-primary": var(--#{$prefix}color-border-on-brand-primary) +) !default; // scss-docs-end ouds-maps-borders // scss-docs-start ouds-maps-dimension @@ -117,7 +124,7 @@ $ouds-opacities: ( ) !default; // scss-docs-end ouds-maps-opacities -// scss-docs-start ouds-maps-opacities +// scss-docs-start ouds-maps-backgrouds $ouds-backgrounds: ( "primary": var(--#{$prefix}color-bg-primary), "secondary": var(--#{$prefix}color-bg-secondary), @@ -140,7 +147,7 @@ $ouds-backgrounds: ( "always-white": var(--#{$prefix}color-always-white), "transparent": transparent, ) !default; -// scss-docs-end ouds-maps-opacities +// scss-docs-end ouds-maps-backgrounds // End mod // Re-assigned maps diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 5c34472a45..6e7452c96c 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -202,12 +202,14 @@ $utilities: map-merge( local-vars: ( "border-opacity": 1 ), - values: $utilities-border-colors + values: $utilities-border-colors, + bootstrap-compatibility: true ), "subtle-border-color": ( property: border-color, class: border, - values: $utilities-border-subtle + values: $utilities-border-subtle, + bootstrap-compatibility: true ), "border-width": ( property: border-width, @@ -270,6 +272,11 @@ $utilities: map-merge( class: border, values: $ouds-border-styles ), + "border-color-ouds": ( + property: border-color, + class: border, + values: $ouds-border-colors + ), // scss-docs-end utils-borders-ouds // End mod // Sizing utilities diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss index 5cde5d1b40..2a16aeca0a 100644 --- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss @@ -85,12 +85,14 @@ $utilities: (); local-vars: ( "border-opacity": 1 ), - values: $utilities-border-colors + values: $utilities-border-colors, + bootstrap-compatibility: true ), "subtle-border-color": ( property: border-color, class: border, - values: $utilities-border-subtle + values: $utilities-border-subtle, + bootstrap-compatibility: true ), "border-width": ( property: border-width, @@ -150,6 +152,11 @@ $utilities: (); class: border, values: $ouds-border-styles ), + "border-color-ouds": ( + property: border-color, + class: border, + values: $ouds-border-colors + ), "rounded": ( property: border-radius, class: rounded, @@ -1057,88 +1064,6 @@ $utilities: (); border: 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(85, 85, 85, var(--bs-border-opacity)) !important; - } - - .border-dark { - --bs-border-opacity: 1; - border-color: rgba(39, 39, 39, 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-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } @@ -1191,6 +1116,22 @@ $utilities: (); border-style: dashed !important; } + .border-brand-primary { + border-color: var(--bs-color-border-brand-primary) !important; + } + + .border-default { + border-color: var(--bs-color-border-default) !important; + } + + .border-emphasized { + border-color: var(--bs-color-border-emphasized) !important; + } + + .border-on-brand-primary { + border-color: var(--bs-color-border-on-brand-primary) !important; + } + .rounded { border-radius: 0px !important; // stylelint-disable-line property-disallowed-list, length-zero-no-unit } @@ -9957,12 +9898,14 @@ $utilities: (); local-vars: ( "border-opacity": 1 ), - values: $utilities-border-colors + values: $utilities-border-colors, + bootstrap-compatibility: true ), "subtle-border-color": ( property: border-color, class: border, - values: $utilities-border-subtle + values: $utilities-border-subtle, + bootstrap-compatibility: true ), "border-width": ( property: border-width, @@ -10022,6 +9965,11 @@ $utilities: (); class: border, values: $ouds-border-styles ), + "border-color-ouds": ( + property: border-color, + class: border, + values: $ouds-border-colors + ), "rounded": ( property: border-radius, class: rounded, @@ -11151,6 +11099,22 @@ $utilities: (); border-style: dashed !important; } + .border-brand-primary { + border-color: var(--bs-color-border-brand-primary) !important; + } + + .border-default { + border-color: var(--bs-color-border-default) !important; + } + + .border-emphasized { + border-color: var(--bs-color-border-emphasized) !important; + } + + .border-on-brand-primary { + border-color: var(--bs-color-border-on-brand-primary) !important; + } + .rounded-0 { border-radius: 0 !important; // stylelint-disable-line property-disallowed-list } diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss index a98b0bb51b..5ae9afa7d8 100644 --- a/site/assets/scss/_callouts.scss +++ b/site/assets/scss/_callouts.scss @@ -33,6 +33,6 @@ .bd-callout-#{$variant} { --bd-callout-color: var(--bs-emphasis-color); // OUDS mod: instead of `var(--bs-#{$variant}-text-emphasis)` --bd-callout-bg: var(--#{$prefix}color-surface-status-#{if($variant == "danger", negative, $variant)}-muted); // OUDS mod: instead of `var(--bs-#{$variant}-bg-subtle)` - --bd-callout-border: var(--bs-#{$variant}-border-subtle); + --bd-callout-border: var(--bs-#{$variant}-border-subtle); // TODO LM: Check after the complete list } } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 639499106f..640be8f0bf 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -472,10 +472,6 @@ } // scss-docs-end sticker-fs-xl -.border-subtle { - --bs-border-color: var(--bs-color-border-default); -} - .color-copy:hover > svg { transform: scale(1.07); } diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md index 3b1bc001c3..5345a38b17 100644 --- a/site/content/docs/0.0/content/reboot.md +++ b/site/content/docs/0.0/content/reboot.md @@ -140,14 +140,15 @@ The `
` element has been simplified. Similar to browser defaults, `
`s are {{< example >}}
+ +
+
{{< /example >}} - +--> +## Color + +Change the border color using utilities. The color utilities are generated from our `$theme-colors` Sass map. + +{{< example class="bd-example-border-utils d-flex align-items-center" >}} + + + +
+{{< /example >}} + +{{< bootstrap-compatibility >}} + +{{< callout info >}} +Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6. +{{< /callout >}} + +{{< example class="bd-example-border-utils" >}} +{{< border.inline >}} +{{- range (index $.Site.Data "theme-colors") }} + + +{{- end -}} +{{< /border.inline >}} + + +{{< /example >}} + +Or modify the default `border-color` of a component: + +{{< example >}} +
+ + +
+ +
+ Dangerous heading +
+ +
+ Changing border color and width +
+{{< /example >}} + +{{< /bootstrap-compatibility >}} @@ -182,7 +227,7 @@ Border semantic tokens are defined as Sass variables. {{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}} - -
- Marker // TODO: reinsert hyphens +
+ Marker
-