diff --git a/scss/_functions.scss b/scss/_functions.scss index dda742dd82..0335b78532 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -301,3 +301,14 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 } @return $result; } + +// OUDS mod +@function strip-units($value) { + @return divide($value, $value * 0 + 1); +} + +@function px-to-rem($value) { + $rem-value: strip-units($value) * .0625; // Assumes the browser default, typically `16px` + @return #{$rem-value}rem; +} +// End mod diff --git a/scss/_ouds-maps.scss b/scss/_ouds-maps.scss index 69c905a545..40851401fe 100644 --- a/scss/_ouds-maps.scss +++ b/scss/_ouds-maps.scss @@ -6,7 +6,7 @@ $ouds-border-radiuses: ( "short": $ouds-border-radius-short, "medium": $ouds-border-radius-medium, "tall": $ouds-border-radius-tall, - "pill": $ouds-border-radius-pill, + "pill": px-to-rem($ouds-border-radius-pill), "circle": 50% ) !default; diff --git a/scss/_variables.scss b/scss/_variables.scss index 587ddc9853..1a739de610 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -631,7 +631,7 @@ $border-radius-sm: $ouds-border-radius-short !default; // OUDS mod: i $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` +$border-radius-pill: px-to-rem($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/tokens/_raw.scss b/scss/tokens/_raw.scss index 3656c6c525..036b6591ac 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -20,6 +20,7 @@ $ouds-border-radius-300: $ouds-border-base * 3 !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-radius-9999: 2000px !default; // $ouds-border-style-none: none !default; $ouds-border-style-solid: solid !default; diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index 8da69b1404..7427accebd 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -9,7 +9,7 @@ $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-radius-pill: $ouds-border-radius-9999 !default; $ouds-border-style-default: $ouds-border-style-solid !default; $ouds-border-style-drag: $ouds-border-style-dashed !default; diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index dd93d3d7b0..537e90d4c9 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -122,6 +122,7 @@ Technically, it means that you can get rid of the following things:
$ouds-border-radius-75
$ouds-border-radius-150
$ouds-border-radius-300
$ouds-border-radius-9999
$ouds-border-radius-default
$ouds-border-radius-medium
$ouds-border-radius-none
$ouds-border-radius-75
$ouds-border-radius-150
$ouds-border-radius-300
$ouds-border-radius-9999
$ouds-border-radius-default
$ouds-border-radius-medium
$ouds-border-radius-none