From 08b70042d230b58737c7c3071fde6e4d81cdafc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Thu, 3 Oct 2024 09:56:15 +0200
Subject: [PATCH] feat: introduce `$ouds-border-radius-9999` raw token and
 create a `px-to-rem` Sass function (#2751)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
---
 scss/_functions.scss                            | 11 +++++++++++
 scss/_ouds-maps.scss                            |  2 +-
 scss/_variables.scss                            |  2 +-
 scss/tokens/_raw.scss                           |  1 +
 scss/tokens/_semantic.scss                      |  2 +-
 site/content/docs/0.0/migration-from-boosted.md |  1 +
 site/content/docs/0.0/migration.md              |  1 +
 7 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/scss/_functions.scss b/scss/_functions.scss
index 1d8a232942..9958d18ecb 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 7f5c3d1000..fb72427ba7 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:
       <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
index 34dc52ba9c..9202473f37 100644
--- 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>