💄(react) improve DX when converting px to rem values

It can be tricky, while integrating the figma design file,
to map some small px values to their rem equivalent. Thus,
this PR proposes a new util function converting pixel to rem.
It would ensure that all size values can scale base on the
font-size base, while keeping a good developer experience.

.changeset/rotten-bears-raise.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add pixel-to-rem sass util function

packages/react/src/components/Forms/Select/index.scss

@@ -1,3 +1,5 @@
+@use 'src/utils';
+
 .c__select {
   position: relative;
 
@@ -116,9 +118,8 @@
 
     ul {
       list-style-type: none;
-      padding: 0;
+      padding: px-to-rem(3px) 0 0;
       margin: 0;
-      padding-top: 3px;
     }
 
     &__item {

packages/react/src/index.scss

@@ -1,5 +1,6 @@
 @import "cunningham-tokens";
 @import '@openfun/cunningham-tokens/default-tokens';
+@import './utils';
 @import './components/Accessibility';
 @import './components/Button';
 @import './components/DataGrid';
@@ -12,7 +13,6 @@
 @import './components/Forms/Switch';
 @import './components/Loader';
 @import './components/Pagination';
-@import './utils';
 
 * {
   font-family: var(--c--theme--font--families--base);

packages/react/src/utils/index.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .c__offscreen {
   position: absolute;
   width: 1px;
@@ -10,3 +12,20 @@
   white-space: nowrap;
   border: 0;
 }
+
+
+@function strip-unit($number) {
+  // Divide $number by its own unit to get a unitless number.
+  // According to math.div documentation, "Any units shared by both numbers will be canceled out."
+  // while different unit between numerator and denominator would be kept.
+  // More to read here https://sass-lang.com/documentation/modules/math#div.
+  // i.e. 16px / 1px = 16
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return math.div($number, ($number * 0 + 1));
+  }
+  @return $number;
+}
+
+@function px-to-rem($size, $base-font-size:16px) {
+  @return math.div(strip-unit($size), strip-unit($base-font-size)) * 1rem;
+}