feat: introduce $ouds-border-radius-9999 raw token and create a `px…

…-to-rem` Sass function (#2751) Co-authored-by: louismaxime.piton <[email protected]>
Orange-OpenSource · Oct 3, 2024 · 08b7004 · 08b7004
1 parent ffe58d8
commit 08b7004
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -122,6 +122,7 @@ Technically, it means that you can get rid of the following things:
       <li><code>$ouds-border-radius-75</code></li>
       <li><code>$ouds-border-radius-150</code></li>
       <li><code>$ouds-border-radius-300</code></li>
+      <li><code>$ouds-border-radius-9999</code></li>
       <li><code>$ouds-border-radius-default</code></li>
       <li><code>$ouds-border-radius-medium</code></li>
       <li><code>$ouds-border-radius-none</code></li>

diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md
@@ -61,6 +61,7 @@ toc: true
       <li><code>$ouds-border-radius-75</code></li>
       <li><code>$ouds-border-radius-150</code></li>
       <li><code>$ouds-border-radius-300</code></li>
+      <li><code>$ouds-border-radius-9999</code></li>
       <li><code>$ouds-border-radius-default</code></li>
       <li><code>$ouds-border-radius-medium</code></li>
       <li><code>$ouds-border-radius-none</code></li>