From 7b82c3fdd229eceb582543bf99bdc867de5775b8 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 9 Apr 2026 12:00:11 +0200
Subject: [PATCH 1/5] feat(lib): Remove useless mixin rfs and font-size +
 remove vendor

---
 packages/orange-compact/config.yml            |   1 -
 .../orange-compact/scss/ouds-web-grid.scss    |   2 -
 packages/orange/config.yml                    |   1 -
 packages/orange/scss/ouds-web-grid.scss       |   2 -
 packages/sosh/config.yml                      |   1 -
 packages/sosh/scss/ouds-web-grid.scss         |   2 -
 scss/_accordion.scss                          |   2 +-
 scss/_buttons.scss                            |   2 +-
 scss/_dropdown.scss                           |   6 +-
 scss/_images.scss                             |   2 +-
 scss/_mixins.scss                             |   3 -
 scss/_nav.scss                                |   4 +-
 scss/_navbar.scss                             |  10 +-
 scss/_pagination.scss                         |   4 +-
 scss/_popover.scss                            |   8 +-
 scss/_progress.scss                           |   4 +-
 scss/_reboot.scss                             |  36 +-
 scss/_root.scss                               |   2 +-
 scss/_toasts.scss                             |   4 +-
 scss/_tooltip.scss                            |   4 +-
 scss/_type.scss                               |   8 +-
 scss/_variables.scss                          |   1 -
 scss/forms/_form-control.scss                 |   6 +-
 scss/forms/_form-text.scss                    |   2 +-
 scss/forms/_input-group.scss                  |   6 +-
 scss/forms/_labels.scss                       |   8 +-
 scss/mixins/_buttons.scss                     |   2 +-
 scss/mixins/_forms.scss                       |   2 +-
 scss/mixins/_pagination.scss                  |   2 +-
 scss/mixins/_utilities.scss                   |  15 +-
 scss/tests/mixins/_utilities.test.scss        |  32 --
 scss/utilities/_api.scss                      |  18 -
 scss/vendor/_rfs.scss                         | 348 ------------------
 site/src/content/docs/foundation/options.mdx  |   1 -
 site/src/content/docs/utilities/api.mdx       |   1 -
 site/src/libs/config.ts                       |   3 +-
 site/src/libs/validation.ts                   |   1 -
 site/src/scss/_component-examples.scss        |   2 +-
 38 files changed, 65 insertions(+), 493 deletions(-)
 delete mode 100644 scss/vendor/_rfs.scss

diff --git a/packages/orange-compact/config.yml b/packages/orange-compact/config.yml
index e7e05d5278..f4b48926a4 100644
--- a/packages/orange-compact/config.yml
+++ b/packages/orange-compact/config.yml
@@ -12,7 +12,6 @@ authors:                          "Orange and OUDS Web Orange Compact contributo
 current_version:                  "1.1.0"
 current_ruby_version:             "1.1.0"
 docs_version:                     "1.1"
-rfs_version:                      "v10.0.0"
 bootstrap_current_version:        "5.3.6"
 bootstrap_docs_version:           "5.3"
 bootstrap_github_org:             "https://github.com/twbs"
diff --git a/packages/orange-compact/scss/ouds-web-grid.scss b/packages/orange-compact/scss/ouds-web-grid.scss
index f6c0cb5e29..c58ce8d1cf 100644
--- a/packages/orange-compact/scss/ouds-web-grid.scss
+++ b/packages/orange-compact/scss/ouds-web-grid.scss
@@ -15,8 +15,6 @@ $include-column-box-sizing: true !default;
 @import "@ouds/web-common/scss/mixins/grid";
 @import "@ouds/web-common/scss/mixins/utilities";
 
-@import "@ouds/web-common/scss/vendor/rfs";
-
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";
 
diff --git a/packages/orange/config.yml b/packages/orange/config.yml
index 8ed4d51b75..2a48b26384 100644
--- a/packages/orange/config.yml
+++ b/packages/orange/config.yml
@@ -12,7 +12,6 @@ authors:                          "Orange and OUDS Web contributors"
 current_version:                  "1.1.0"
 current_ruby_version:             "1.1.0"
 docs_version:                     "1.1"
-rfs_version:                      "v10.0.0"
 bootstrap_current_version:        "5.3.6"
 bootstrap_docs_version:           "5.3"
 bootstrap_github_org:             "https://github.com/twbs"
diff --git a/packages/orange/scss/ouds-web-grid.scss b/packages/orange/scss/ouds-web-grid.scss
index 22f2dd97bb..812980e92e 100644
--- a/packages/orange/scss/ouds-web-grid.scss
+++ b/packages/orange/scss/ouds-web-grid.scss
@@ -15,8 +15,6 @@ $include-column-box-sizing: true !default;
 @import "@ouds/web-common/scss/mixins/grid";
 @import "@ouds/web-common/scss/mixins/utilities";
 
-@import "@ouds/web-common/scss/vendor/rfs";
-
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";
 
diff --git a/packages/sosh/config.yml b/packages/sosh/config.yml
index 7017faaecb..056e978b43 100644
--- a/packages/sosh/config.yml
+++ b/packages/sosh/config.yml
@@ -12,7 +12,6 @@ authors:                          "Orange and OUDS Web Sosh contributors"
 current_version:                  "1.1.0"
 current_ruby_version:             "1.1.0"
 docs_version:                     "1.1"
-rfs_version:                      "v10.0.0"
 bootstrap_current_version:        "5.3.6"
 bootstrap_docs_version:           "5.3"
 bootstrap_github_org:             "https://github.com/twbs"
diff --git a/packages/sosh/scss/ouds-web-grid.scss b/packages/sosh/scss/ouds-web-grid.scss
index acfa3c8cdd..5123f0ad4e 100644
--- a/packages/sosh/scss/ouds-web-grid.scss
+++ b/packages/sosh/scss/ouds-web-grid.scss
@@ -15,8 +15,6 @@ $include-column-box-sizing: true !default;
 @import "@ouds/web-common/scss/mixins/grid";
 @import "@ouds/web-common/scss/mixins/utilities";
 
-@import "@ouds/web-common/scss/vendor/rfs";
-
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";
 
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 0707036bce..601fcea5c2 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -43,7 +43,7 @@
   align-items: center;
   width: 100%;
   padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
-  @include font-size(var(--#{$prefix}accordion-btn-font-size)); // OUDS mod
+  font-size: var(--#{$prefix}accordion-btn-font-size); // OUDS mod
   font-weight: var(--#{$prefix}accordion-btn-font-weight); // OUDS mod
   line-height: var(--#{$prefix}accordion-btn-line-height); // OUDS mod
   color: var(--#{$prefix}accordion-btn-color);
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 35d3a02337..c3864ad892 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -31,7 +31,7 @@
   // OUDS mod: no --#{$prefix}btn-padding-x
   --#{$prefix}btn-padding-y: #{$btn-padding-y};
   // OUDS mod: no --#{$prefix}btn-font-family
-  // OUDS mod: no `@include rfs($btn-font-size, --#{$prefix}btn-font-size)`
+  // OUDS mod: no --#{$prefix}btn-font-size
   --#{$prefix}btn-font-weight: #{$btn-font-weight};
   // OUDS mod: no `--#{$prefix}btn-line-height`
   --#{$prefix}btn-color: #{$btn-color};
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 8785059561..e6d2eccac3 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -24,7 +24,7 @@
   // OUDS mod: no --#{$prefix}dropdown-padding-x
   --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
   --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
-  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
+  --#{$prefix}dropdown-font-size: #{$dropdown-font-size};
   --#{$prefix}dropdown-line-height: #{$dropdown-line-height}; // OUDS mod
   --#{$prefix}dropdown-color: #{$dropdown-color};
   --#{$prefix}dropdown-bg: #{$dropdown-bg};
@@ -55,7 +55,7 @@
   min-width: var(--#{$prefix}dropdown-min-width);
   padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-y);
   margin: 0; // Override default margin of ul
-  @include font-size(var(--#{$prefix}dropdown-font-size));
+  font-size: var(--#{$prefix}dropdown-font-size);
   line-height: var(--#{$prefix}dropdown-line-height); // OUDS mod
   color: var(--#{$prefix}dropdown-color);
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
@@ -224,7 +224,7 @@
   display: block;
   padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
   margin-bottom: 0; // for use with heading elements
-  @include font-size($font-size-sm);
+  font-size: $font-size-sm;
   color: var(--#{$prefix}dropdown-header-color);
   white-space: nowrap; // as with > li > a
 }
diff --git a/scss/_images.scss b/scss/_images.scss
index 9d4b43e94c..e9ef93e740 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -37,6 +37,6 @@
 }
 
 .figure-caption {
-  @include font-size($figure-caption-font-size);
+  font-size: $figure-caption-font-size;
   color: $figure-caption-color;
 }
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index aaf11695f0..36ce47ae4d 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -2,9 +2,6 @@
 //
 // Used in conjunction with global variables to enable certain theme features.
 
-// Vendor
-@import "vendor/rfs";
-
 // Deprecate
 @import "mixins/deprecate";
 
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 4a90c326cd..63a6d7bbfe 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -7,7 +7,7 @@
   // scss-docs-start nav-css-vars
   --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
   --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
-  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+  --#{$prefix}nav-link-font-size: #{$nav-link-font-size};
   --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
   --#{$prefix}nav-link-color: #{$nav-link-color};
   --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
@@ -26,7 +26,7 @@
   display: flex; // OUDS mod: instead of `block`
   align-items: center; // OUDS mod
   padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
-  @include font-size(var(--#{$prefix}nav-link-font-size));
+  font-size: var(--#{$prefix}nav-link-font-size);
   font-weight: var(--#{$prefix}nav-link-font-weight);
   color: var(--#{$prefix}nav-link-color);
   text-decoration: if($link-decoration == none, null, none);
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 1b3ef6909a..873a03bad3 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -122,7 +122,7 @@
       --bs-dropdown-min-width: 8.75rem;
 
       @include media-breakpoint-down(lg) {
-        @include rfs($font-size-sm, --bs-dropdown-font-size);
+        --bs-dropdown-font-size: #{$font-size-sm};
         --bs-dropdown-line-height: #{$line-height-sm};
         --bs-dropdown-item-padding-y: #{$dropdown-item-padding-y + .0625rem};
       }
@@ -147,7 +147,7 @@
   margin-top: var(--#{$prefix}navbar-brand-margin-y);
   margin-right: var(--#{$prefix}navbar-brand-margin-end);
   margin-bottom: var(--#{$prefix}navbar-brand-margin-y);
-  @include font-size(var(--#{$prefix}navbar-brand-font-size));
+  font-size: var(--#{$prefix}navbar-brand-font-size);
   line-height: 1;
   color: var(--#{$prefix}navbar-brand-color);
   text-decoration: if($link-decoration == none, null, none);
@@ -195,7 +195,7 @@
   // scss-docs-start navbar-nav-css-vars
   --#{$prefix}nav-link-padding-x: var(--#{$prefix}navbar-nav-link-padding-x); // OUDS mod
   --#{$prefix}nav-link-padding-y: var(--#{$prefix}navbar-nav-link-padding-y); // OUDS mod
-  @include rfs(var(--#{$prefix}navbar-nav-font-size, $font-size-base), --#{$prefix}nav-link-font-size); // OUDS mod
+  --#{$prefix}nav-link-font-size: var(--#{$prefix}navbar-nav-font-size, $font-size-base); // OUDS mod
   --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
   --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
   --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
@@ -207,7 +207,7 @@
   flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
   padding: var(--#{$prefix}navbar-nav-padding-top) var(--#{$prefix}navbar-nav-padding-x) var(--#{$prefix}navbar-nav-padding-bottom); // OUDS mod
   margin-bottom: 0;
-  @include font-size(var(--#{$prefix}navbar-nav-font-size)); // OUDS mod
+  font-size: var(--#{$prefix}navbar-nav-font-size); // OUDS mod
   line-height: var(--#{$prefix}navbar-nav-line-height, $line-height-base); // OUDS mod
   letter-spacing: var(--#{$prefix}navbar-nav-letter-spacing, $letter-spacing-base); // OUDS mod
   // OUDS mod: Handle .nav-link and .nav-icon slightly differently than Bs
@@ -326,7 +326,7 @@
 .navbar-toggler {
   padding: var(--#{$prefix}navbar-toggler-padding-y) calc(var(--#{$prefix}navbar-toggler-padding-x) / 2) var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x); // OUDS mod
   margin-right: calc(-.5 * var(--#{$prefix}navbar-toggler-padding-x)); // OUDS mod
-  @include font-size(var(--#{$prefix}navbar-toggler-font-size));
+  font-size: var(--#{$prefix}navbar-toggler-font-size);
   line-height: 1;
   color: var(--#{$prefix}navbar-color);
   background-color: transparent; // remove default button style
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 60a56d441b..60389fe0a8 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -5,7 +5,7 @@
   --#{$prefix}pagination-padding-end: #{$pagination-padding-end}; // OUDS mod
   --#{$prefix}pagination-margin-y: #{$pagination-margin-y}; // OUDS mod
   --#{$prefix}pagination-margin-x-first-last: #{$pagination-margin-x-first-last}; // OUDS mod
-  @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
+  --#{$prefix}pagination-font-size: #{$pagination-font-size};
   --#{$prefix}pagination-font-weight: #{$font-weight-bold}; // OUDS mod
   --#{$prefix}pagination-color: #{$pagination-color};
   --#{$prefix}pagination-bg: #{$pagination-bg};
@@ -47,7 +47,7 @@
   align-items: center; // OUDS mod
   justify-content: center; // OUDS mod
   padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
-  @include font-size(var(--#{$prefix}pagination-font-size));
+  font-size: var(--#{$prefix}pagination-font-size);
   font-weight: var(--#{$prefix}pagination-font-weight); // OUDS mod
   color: var(--#{$prefix}pagination-color);
   text-decoration: if($link-decoration == none, null, none);
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 187cd6b322..3c926b1493 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -2,7 +2,7 @@
   // scss-docs-start popover-css-vars
   --#{$prefix}popover-zindex: #{$zindex-popover};
   --#{$prefix}popover-max-width: #{$popover-max-width};
-  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+  --#{$prefix}popover-font-size: #{$popover-font-size};
   --#{$prefix}popover-line-height: #{$popover-line-height}; // OUDS mod
   --#{$prefix}popover-font-weight: #{$popover-font-weight}; // OUDS mod
   --#{$prefix}popover-bg: #{$popover-bg};
@@ -15,7 +15,7 @@
   --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
   --#{$prefix}popover-header-padding-top: #{$popover-header-padding-top}; // OUDS mod
   --#{$prefix}popover-header-padding-bottom: #{$popover-header-padding-bottom}; // OUDS mod
-  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
+  --#{$prefix}popover-header-font-size: #{$popover-header-font-size};
   --#{$prefix}popover-header-line-height: #{$popover-header-line-height}; // OUDS mod
   --#{$prefix}popover-header-color: #{$popover-header-color};
   --#{$prefix}popover-header-bg: #{$popover-header-bg};
@@ -35,7 +35,7 @@
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  @include font-size(var(--#{$prefix}popover-font-size));
+  font-size: var(--#{$prefix}popover-font-size);
   line-height: var(--#{$prefix}popover-line-height); // OUDS mod
   // Allow breaking very long words so they don't overflow the popover's bounds
   word-wrap: break-word;
@@ -189,7 +189,7 @@
   margin-bottom: 0; // Reset the default from Reboot
   font-weight: var(--#{$prefix}popover-font-weight); // OUDS mod
   line-height: var(--#{$prefix}popover-header-line-height); // OUDS mod
-  @include font-size(var(--#{$prefix}popover-header-font-size));
+  font-size: var(--#{$prefix}popover-header-font-size);
   color: var(--#{$prefix}popover-header-color);
 
   /* rtl:remove */
diff --git a/scss/_progress.scss b/scss/_progress.scss
index d5466e8f6b..2c2457a761 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -12,7 +12,7 @@
 .progress-stacked {
   // scss-docs-start progress-css-vars
   --#{$prefix}progress-height: #{$progress-height};
-  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
+  --#{$prefix}progress-font-size: #{$progress-font-size};
   --#{$prefix}progress-bg: #{$progress-bg};
   --#{$prefix}progress-border-radius: #{$progress-border-radius};
   --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
@@ -26,7 +26,7 @@
   display: flex;
   height: var(--#{$prefix}progress-height);
   overflow: hidden; // force rounded corners by cropping it
-  @include font-size(var(--#{$prefix}progress-font-size));
+  font-size: var(--#{$prefix}progress-font-size);
   background-color: var(--#{$prefix}progress-bg);
   @include border-radius(var(--#{$prefix}progress-border-radius));
   @include box-shadow(var(--#{$prefix}progress-box-shadow));
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index e6b7f73c32..e11384ea37 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -27,7 +27,7 @@
 
 #{$ouds-root-selector} { // OUDS mod: instead of `:root`
   @if $font-size-root != null {
-    @include font-size(var(--#{$prefix}root-font-size));
+    font-size: var(--#{$prefix}root-font-size);
   }
 
   // OUDS mod: Improve focus visibility when fixed/sticky header is used
@@ -66,7 +66,7 @@
   margin: 0; // 1
   font-family: var(--#{$prefix}body-font-family);
   font-synthesis: none; // OUDS mod // 5
-  @include font-size(var(--#{$prefix}body-font-size));
+  font-size: var(--#{$prefix}body-font-size);
   font-weight: var(--#{$prefix}body-font-weight);
   line-height: var(--#{$prefix}body-line-height);
   color: var(--#{$prefix}color-content-default); // OUDS mod: instead of `var(--#{$prefix}body-color)`
@@ -129,32 +129,32 @@ hr {
 
 h1 {
   @extend %heading;
-  @include get-font-size("heading-xlarge"); // OUDS mod: instead of `@include font-size($h1-font-size)`
+  @include get-font-size("heading-xlarge"); // OUDS mod: instead of `font-size: $h1-font-size`
 }
 
 h2 {
   @extend %heading;
-  @include get-font-size("heading-large"); // OUDS mod: instead of `@include font-size($h2-font-size)`
+  @include get-font-size("heading-large"); // OUDS mod: instead of `font-size: $h2-font-size`
 }
 
 h3 {
   @extend %heading;
-  @include get-font-size("heading-medium"); // OUDS mod: instead of `@include font-size($h3-font-size)`
+  @include get-font-size("heading-medium"); // OUDS mod: instead of `font-size: $h3-font-size`
 }
 
 h4 {
   @extend %heading;
-  @include get-font-size("heading-small"); // OUDS mod: instead of `@include font-size($h4-font-size)`
+  @include get-font-size("heading-small"); // OUDS mod: instead of `font-size: $h4-font-size`
 }
 
 h5 {
   @extend %heading;
-  @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($h5-font-size)`
+  @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $h5-font-size`
 }
 
 h6 {
   @extend %heading;
-  @include get-font-size("body-medium"); // OUDS mod: instead of `@include font-size($h6-font-size)`
+  @include get-font-size("body-medium"); // OUDS mod: instead of `font-size: $h6-font-size`
 }
 // scss-docs-end ouds-font-implementation
 
@@ -289,7 +289,7 @@ strong {
 // Add the correct font size in all browsers
 
 small {
-  @include get-font-size("body-small"); // OUDS mod: instead of `@include font-size($small-font-size)`
+  @include get-font-size("body-small"); // OUDS mod: instead of `font-size: $small-font-size`
 }
 
 
@@ -310,7 +310,7 @@ mark {
 sub,
 sup {
   position: relative;
-  @include font-size($sub-sup-font-size);
+  font-size: $sub-sup-font-size;
   line-height: 0;
   vertical-align: baseline;
 }
@@ -391,7 +391,7 @@ code,
 kbd,
 samp {
   font-family: $font-family-code;
-  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
 }
 
 // 1. Remove browser default top margin
@@ -403,12 +403,12 @@ pre {
   margin-top: 0; // 1
   margin-bottom: $ouds-space-fixed-medium; // 2 // OUDS mod: instead of `1rem`
   overflow: auto; // 3
-  @include get-font-size("code-medium"); // OUDS mod: instead of `@include font-size($code-font-size)`
+  @include get-font-size("code-medium"); // OUDS mod: instead of `font-size: $code-font-size`
   color: $pre-color;
 
   // Account for some code outputs that place code tags in pre tags
   code {
-    @include font-size(inherit);
+    font-size: inherit;
     color: inherit;
     word-break: normal;
   }
@@ -416,7 +416,7 @@ pre {
 
 var, // OUDS mod
 code {
-  @include font-size($code-font-size);
+  font-size: $code-font-size;
   font-style: normal; // OUDS mod: <var> is italic in all browsers
   color: var(--#{$prefix}color-content-muted);
   word-wrap: break-word;
@@ -429,14 +429,14 @@ a > :is(var, code) {
 
 kbd {
   padding: $kbd-padding-y $kbd-padding-x;
-  @include font-size($kbd-font-size);
+  font-size: $kbd-font-size;
   color: $kbd-color;
   background-color: $kbd-bg;
   @include border-radius($border-radius-sm, $border-radius-sm); // OUDS mod: instead of `@include border-radius($border-radius-sm)`
 
   kbd {
     padding: 0;
-    @include font-size(1em);
+    font-size: 1em;
     font-weight: $nested-kbd-font-weight;
   }
 }
@@ -547,7 +547,7 @@ optgroup,
 textarea {
   margin: 0; // 1
   font-family: inherit;
-  @include font-size(inherit);
+  font-size: inherit;
   line-height: inherit;
 
   /* rtl:remove */
@@ -641,7 +641,7 @@ legend {
   margin-bottom: $legend-margin-bottom;
   font-weight: $legend-font-weight;
   // OUDS mod: no line-height
-  @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($legend-font-size)`
+  @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $legend-font-size`
 
   + * {
     clear: left; // 2
diff --git a/scss/_root.scss b/scss/_root.scss
index 7d54879514..70bb597bf9 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -245,7 +245,7 @@
     --#{$prefix}root-font-size: #{$font-size-root};
   }
   --#{$prefix}body-font-family: #{inspect($font-family-base)};
-  @include rfs($font-size-base, --#{$prefix}body-font-size);
+  --#{$prefix}body-font-size: #{$font-size-base};
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
   --#{$prefix}body-letter-spacing: #{$letter-spacing-base}; // OUDS mod
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 8f6996d357..59d8ccc6b5 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -5,7 +5,7 @@
   --#{$prefix}toast-padding-y: #{$toast-padding-y};
   --#{$prefix}toast-spacing: #{$toast-spacing};
   --#{$prefix}toast-max-width: #{$toast-max-width};
-  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
+  --#{$prefix}toast-font-size: #{$toast-font-size};
   --#{$prefix}toast-color: #{$toast-color};
   --#{$prefix}toast-bg: #{$toast-background-color};
   --#{$prefix}toast-border-width: #{$toast-border-width};
@@ -19,7 +19,7 @@
 
   width: var(--#{$prefix}toast-max-width);
   max-width: 100%;
-  @include font-size(var(--#{$prefix}toast-font-size));
+  font-size: var(--#{$prefix}toast-font-size);
   color: var(--#{$prefix}toast-color);
   pointer-events: auto;
   background-color: var(--#{$prefix}toast-bg);
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 9cde52e154..5166ebbacb 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -6,7 +6,7 @@
   --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
   --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
   --#{$prefix}tooltip-margin: #{$tooltip-margin};
-  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+  --#{$prefix}tooltip-font-size: #{$tooltip-font-size};
   --#{$prefix}tooltip-font-weight: #{$tooltip-font-weight}; // OUDS mod: extra CSS variable
   --#{$prefix}tooltip-line-height: #{$tooltip-line-height}; // OUDS mod
   --#{$prefix}tooltip-color: #{$tooltip-color};
@@ -27,7 +27,7 @@
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  @include font-size(var(--#{$prefix}tooltip-font-size));
+  font-size: var(--#{$prefix}tooltip-font-size);
   font-weight: var(--#{$prefix}tooltip-font-weight); // OUDS mod
   line-height: var(--#{$prefix}tooltip-line-height); // OUDS mod
   // Allow breaking very long words so they don't overflow the tooltip's bounds
diff --git a/scss/_type.scss b/scss/_type.scss
index c1d1415238..f9eca36bf8 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -27,7 +27,7 @@
 
 
 .lead {
-  @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($lead-font-size)`
+  @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $lead-font-size`
   font-weight: $lead-font-weight;
 }
 
@@ -39,7 +39,7 @@
     font-weight: $display-font-weight;
     line-height: $display-line-height;
     @extend %heading; // OUDS mod
-    @include get-font-size($font-size); // OUDS mod: instead of `@include font-size($font-size)`
+    @include get-font-size($font-size); // OUDS mod: instead of `font-size: $font-size`
   }
 }
 
@@ -86,7 +86,7 @@
   margin-bottom: $blockquote-margin-y;
 
   > p {
-    @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($blockquote-font-size)` in `.blockquote`
+    @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $blockquote-font-size` in `.blockquote`
   }
 
   > :last-child {
@@ -97,7 +97,7 @@
 .blockquote-footer {
   margin-top: -$blockquote-margin-y;
   margin-bottom: $blockquote-margin-y;
-  @include get-font-size("body-small"); // OUDS mod: instead of `@include font-size($blockquote-footer-font-size)`
+  @include get-font-size("body-small"); // OUDS mod: instead of `font-size: $blockquote-footer-font-size`
   color: $blockquote-footer-color;
 
   &::before {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8a248d7bbd..53c12ee5dd 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -378,7 +378,6 @@ $enable-grid-classes:             true !default;
 $enable-container-classes:        true !default;
 $enable-cssgrid:                  false !default;
 $enable-button-pointers:          true !default;
-$enable-rfs:                      false !default;
 $enable-validation-icons:         true !default;
 $enable-negative-margins:         false !default;
 $enable-deprecation-messages:     false !default;
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index be814d8494..13a68181df 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -7,7 +7,7 @@
   width: 100%;
   padding: calc($input-padding-y - 1px) $input-padding-x calc($input-padding-y + 1px); // OUDS mod
   font-family: $input-font-family;
-  @include font-size($input-font-size);
+  font-size: $input-font-size;
   font-weight: $input-font-weight;
   line-height: $input-line-height;
   color: $input-color;
@@ -160,7 +160,7 @@
   min-height: $input-height-sm;
   padding: $input-padding-y-sm $input-padding-x-sm calc($input-padding-y-sm + 1px); // OUDS mod
   line-height: $line-height-sm; // OUDS mod
-  @include font-size($input-font-size-sm);
+  font-size: $input-font-size-sm;
   @include border-radius($input-border-radius-sm);
 
   &::file-selector-button {
@@ -173,7 +173,7 @@
 .form-control-lg {
   min-height: $input-height-lg;
   line-height: $input-line-height-lg; // OUDS mod
-  @include font-size($input-font-size-lg);
+  font-size: $input-font-size-lg;
   @include border-radius($input-border-radius-lg);
 
   &::file-selector-button {
diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss
index 08940ef09f..dd2f810226 100644
--- a/scss/forms/_form-text.scss
+++ b/scss/forms/_form-text.scss
@@ -4,7 +4,7 @@
 
 .form-text {
   margin-top: $form-text-margin-top;
-  @include get-font-size("label-medium"); // OUDS mod: instead of @include font-size($form-text-font-size);
+  @include get-font-size("label-medium"); // OUDS mod: instead of font-size: $form-text-font-size;
   // OUDS mod: no font-style
   // OUDS mod: no font-weight
   color: $form-text-color;
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index af6ecda37c..7849cb8394 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -49,7 +49,7 @@
   display: flex;
   align-items: center;
   padding: $input-group-addon-padding-y $input-group-addon-padding-x;
-  @include font-size($input-font-size); // Match inputs
+  font-size: $input-font-size; // Match inputs
   font-weight: $input-group-addon-font-weight;
   line-height: $input-line-height;
   color: $input-group-addon-color;
@@ -72,7 +72,7 @@
 .input-group-lg > .btn {
   padding: $input-padding-y-lg $input-padding-x-lg;
   line-height: var(--#{$prefix}font-line-height-body-large); // OUDS mod
-  @include font-size($input-font-size-lg);
+  font-size: $input-font-size-lg;
   @include border-radius($input-border-radius-lg);
 }
 
@@ -82,7 +82,7 @@
 .input-group-sm > .btn {
   padding: $input-padding-y-sm $input-padding-x-sm;
   line-height: $line-height-sm; // OUDS mod
-  @include font-size($input-font-size-sm);
+  font-size: $input-font-size-sm;
   @include border-radius($input-border-radius-sm);
 }
 
diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index 7a761ac3bb..084cf9d3ad 100644
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -4,7 +4,7 @@
 
 .form-label {
   margin-bottom: $form-label-margin-bottom;
-  @include font-size($form-label-font-size);
+  font-size: $form-label-font-size;
   font-style: $form-label-font-style;
   font-weight: $form-label-font-weight;
   color: $form-label-color;
@@ -69,7 +69,7 @@
   padding-top: calc($input-padding-y + $input-border-width);
   padding-bottom: calc($input-padding-y + $input-border-width);
   margin-bottom: 0; // Override the `<legend>` default
-  @include font-size(inherit); // Override the `<legend>` default
+  font-size: inherit; // Override the `<legend>` default
   font-style: $form-label-font-style;
   font-weight: $form-label-font-weight;
   line-height: $input-line-height;
@@ -79,11 +79,11 @@
 .col-form-label-lg {
   padding-top: calc($input-padding-y-lg + $input-border-width);
   padding-bottom: calc($input-padding-y-lg + $input-border-width);
-  @include font-size($input-font-size-lg);
+  font-size: $input-font-size-lg;
 }
 
 .col-form-label-sm {
   padding-top: calc($input-padding-y-sm + $input-border-width);
   padding-bottom: calc($input-padding-y-sm + $input-border-width);
-  @include font-size($input-font-size-sm);
+  font-size: $input-font-size-sm;
 }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 212deb077b..871f73b8eb 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -77,7 +77,7 @@
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   --#{$prefix}btn-padding-y: #{$padding-y};
   --#{$prefix}btn-padding-x: #{$padding-x};
-  @include rfs($font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-font-size: #{$font-size};
   --#{$prefix}btn-border-radius: #{$border-radius};
 }
 // scss-docs-end btn-size-mixin
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 7628e5ccdd..f1ebd5d88e 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -58,7 +58,7 @@
       display: none;
       width: 100%;
       margin-top: $form-feedback-margin-top;
-      @include font-size($form-feedback-font-size);
+      font-size: $form-feedback-font-size;
       font-style: $form-feedback-font-style;
       font-weight: $font-weight-bold; // OUDS mod
       line-height: $form-feedback-line-height; // OUDS mod
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index 754c444dce..889910c3a2 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -4,7 +4,7 @@
 @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
   --#{$prefix}pagination-padding-x: #{$padding-x};
   --#{$prefix}pagination-padding-y: #{$padding-y};
-  @include rfs($font-size, --#{$prefix}pagination-font-size);
+  --#{$prefix}pagination-font-size: #{$font-size};
   --#{$prefix}pagination-border-radius: #{$border-radius};
 }
 // scss-docs-end pagination-mixin
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index 22172f76b8..0382f39b34 100644
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -1,6 +1,6 @@
 // Utility generator
 // Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
+@mixin generate-utility($utility, $infix: "") {
   $values: map-get($utility, values);
   $bootstrap-compatibility: map-get($utility, bootstrap-compatibility); // OUDS mod
 
@@ -33,19 +33,6 @@
       // Don't prefix if value key is null (e.g. with shadow class)
       $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
-      @if map-get($utility, rfs) {
-        // Inside the media query
-        @if $is-rfs-media-query {
-          $val: rfs-value($value);
-
-          // Do not render anything if fluid and non fluid values are the same
-          $value: if($val == rfs-fluid-value($value), null, $val);
-        }
-        @else {
-          $value: rfs-fluid-value($value);
-        }
-      }
-
       $is-css-var: map-get($utility, css-var);
       $is-local-vars: map-get($utility, local-vars);
       $is-rtl: map-get($utility, rtl);
diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss
index 2ac331c96a..bf1a9a42ea 100644
--- a/scss/tests/mixins/_utilities.test.scss
+++ b/scss/tests/mixins/_utilities.test.scss
@@ -1,7 +1,6 @@
 $prefix: bs-;
 $enable-important-utilities: false;
 
-// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
 // OUDS mod
 @import "../../config";
 @import "../../functions"; // Added because needed by "variables"
@@ -318,37 +317,6 @@ $enable-important-utilities: false;
         }
       }
     }
-
-    @include describe("rfs") {
-      @include it("sets the fluid value when not inside media query") {
-        @include test-generate-utility(
-          (
-            property: padding,
-            values: 1rem,
-            rfs: true
-          )
-        ) {
-          .padding-1rem {
-            padding: rfs-fluid-value(1rem);
-          }
-        }
-      }
-
-      @include it("sets the value when inside the media query") {
-        @include test-generate-utility(
-          (
-            property: padding,
-            values: 1rem,
-            rfs: true
-          ),
-          $is-rfs-media-query: true
-        ) {
-          .padding-1rem {
-            padding: rfs-value(1rem);
-          }
-        }
-      }
-    }
   }
 
   @include describe("$infix") {
diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss
index 62e1d398e3..5b9b6651cb 100644
--- a/scss/utilities/_api.scss
+++ b/scss/utilities/_api.scss
@@ -16,24 +16,6 @@
   }
 }
 
-// RFS rescaling
-@media (min-width: $rfs-mq-value) {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
-      // Loop over each utility property
-      @each $key, $utility in $utilities {
-        // The utility can be disabled with `false`, thus check if the utility is a map first
-        // Only proceed if responsive media queries are enabled or if it's the base media query
-        @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
-          @include generate-utility($utility, $infix, true);
-        }
-      }
-    }
-  }
-}
-
 
 // Print utilities
 @media print {
diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss
deleted file mode 100644
index aa1f82b961..0000000000
--- a/scss/vendor/_rfs.scss
+++ /dev/null
@@ -1,348 +0,0 @@
-// stylelint-disable scss/dimension-no-non-numeric-values
-
-// SCSS RFS mixin
-//
-// Automated responsive values for font sizes, paddings, margins and much more
-//
-// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
-
-// Configuration
-
-// Base value
-$rfs-base-value: 1.25rem !default;
-$rfs-unit: rem !default;
-
-@if $rfs-unit != rem and $rfs-unit != px {
-  @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.";
-}
-
-// Breakpoint at where values start decreasing if screen width is smaller
-$rfs-breakpoint: 1200px !default;
-$rfs-breakpoint-unit: px !default;
-
-@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
-  @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
-}
-
-// Resize values based on screen height and width
-$rfs-two-dimensional: false !default;
-
-// Factor of decrease
-$rfs-factor: 10 !default;
-
-@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
-  @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
-}
-
-// Mode. Possibilities: "min-media-query", "max-media-query"
-$rfs-mode: min-media-query !default;
-
-// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
-$rfs-class: false !default;
-
-// 1 rem = $rfs-rem-value px
-$rfs-rem-value: 16 !default;
-
-// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
-$rfs-safari-iframe-resize-bug-fix: false !default;
-
-// Disable RFS by setting $enable-rfs to false
-$enable-rfs: true !default;
-
-// Cache $rfs-base-value unit
-$rfs-base-value-unit: unit($rfs-base-value);
-
-@function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-  $remainder: $dividend;
-  $result: 0;
-  $factor: 10;
-  @while ($remainder > 0 and $precision >= 0) {
-    $quotient: 0;
-    @while ($remainder >= $divisor) {
-      $remainder: $remainder - $divisor;
-      $quotient: $quotient + 1;
-    }
-    $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
-    $remainder: $remainder * 10;
-    $precision: $precision - 1;
-    @if ($precision < 0 and $remainder >= $divisor * 5) {
-      $result: $result + 1;
-    }
-  }
-  $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
-  $unit-map: (
-    "px": 1px,
-    "rem": 1rem,
-    "em": 1em,
-    "%": 1%
-  );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
-    $result: $result * map-get($unit-map, $dividend-unit);
-  }
-  @return $result;
-}
-
-// Remove px-unit from $rfs-base-value for calculations
-@if $rfs-base-value-unit == px {
-  $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
-}
-@else if $rfs-base-value-unit == rem {
-  $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
-}
-
-// Cache $rfs-breakpoint unit to prevent multiple calls
-$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
-
-// Remove unit from $rfs-breakpoint for calculations
-@if $rfs-breakpoint-unit-cache == px {
-  $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
-}
-@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
-  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
-}
-
-// Calculate the media query value
-$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
-$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
-$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
-
-// Internal mixin used to determine which media query needs to be used
-@mixin _rfs-media-query {
-  @if $rfs-two-dimensional {
-    @if $rfs-mode == max-media-query {
-      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
-        @content;
-      }
-    }
-    @else {
-      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
-        @content;
-      }
-    }
-  }
-  @else {
-    @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
-      @content;
-    }
-  }
-}
-
-// Internal mixin that adds disable classes to the selector if needed.
-@mixin _rfs-rule {
-  @if $rfs-class == disable and $rfs-mode == max-media-query {
-    // Adding an extra class increases specificity, which prevents the media query to override the property
-    &,
-    .disable-rfs &,
-    &.disable-rfs {
-      @content;
-    }
-  }
-  @else if $rfs-class == enable and $rfs-mode == min-media-query {
-    .enable-rfs &,
-    &.enable-rfs {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-// Internal mixin that adds enable classes to the selector if needed.
-@mixin _rfs-media-query-rule {
-
-  @if $rfs-class == enable {
-    @if $rfs-mode == min-media-query {
-      @content;
-    }
-
-    @include _rfs-media-query () {
-      .enable-rfs &,
-      &.enable-rfs {
-        @content;
-      }
-    }
-  }
-  @else {
-    @if $rfs-class == disable and $rfs-mode == min-media-query {
-      .disable-rfs &,
-      &.disable-rfs {
-        @content;
-      }
-    }
-    @include _rfs-media-query () {
-      @content;
-    }
-  }
-}
-
-// Helper function to get the formatted non-responsive value
-@function rfs-value($values) {
-  // Convert to list
-  $values: if(type-of($values) != list, ($values,), $values);
-
-  $val: "";
-
-  // Loop over each value and calculate value
-  @each $value in $values {
-    @if $value == 0 {
-      $val: $val + " 0";
-    }
-    @else {
-      // Cache $value unit
-      $unit: if(type-of($value) == "number", unit($value), false);
-
-      @if $unit == px {
-        // Convert to rem if needed
-        $val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
-      }
-      @else if $unit == rem {
-        // Convert to px if needed
-        $val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
-      } @else {
-        // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
-        $val: $val + " " + $value;
-      }
-    }
-  }
-
-  // Remove first space
-  @return unquote(str-slice($val, 2));
-}
-
-// Helper function to get the responsive value calculated by RFS
-@function rfs-fluid-value($values) {
-  // Convert to list
-  $values: if(type-of($values) != list, ($values,), $values);
-
-  $val: "";
-
-  // Loop over each value and calculate value
-  @each $value in $values {
-    @if $value == 0 {
-      $val: $val + " 0";
-    } @else {
-      // Cache $value unit
-      $unit: if(type-of($value) == "number", unit($value), false);
-
-      // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
-      @if not $unit or $unit != px and $unit != rem {
-        $val: $val + " " + $value;
-      } @else {
-        // Remove unit from $value for calculations
-        $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
-
-        // Only add the media query if the value is greater than the minimum value
-        @if abs($value) <= $rfs-base-value or not $enable-rfs {
-          $val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
-        }
-        @else {
-          // Calculate the minimum value
-          $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
-
-          // Calculate difference between $value and the minimum value
-          $value-diff: abs($value) - $value-min;
-
-          // Base value formatting
-          $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
-
-          // Use negative value if needed
-          $min-width: if($value < 0, -$min-width, $min-width);
-
-          // Use `vmin` if two-dimensional is enabled
-          $variable-unit: if($rfs-two-dimensional, vmin, vw);
-
-          // Calculate the variable width between 0 and $rfs-breakpoint
-          $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
-
-          // Return the calculated value
-          $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
-        }
-      }
-    }
-  }
-
-  // Remove first space
-  @return unquote(str-slice($val, 2));
-}
-
-// RFS mixin
-@mixin rfs($values, $property: font-size) {
-  @if $values != null {
-    $val: rfs-value($values);
-    $fluid-val: rfs-fluid-value($values);
-
-    // Do not print the media query if responsive & non-responsive values are the same
-    @if $val == $fluid-val {
-      #{$property}: $val;
-    }
-    @else {
-      @include _rfs-rule () {
-        #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);
-
-        // Include safari iframe resize fix if needed
-        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
-      }
-
-      @include _rfs-media-query-rule () {
-        #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);
-      }
-    }
-  }
-}
-
-// Shorthand helper mixins
-@mixin font-size($value) {
-  @include rfs($value);
-}
-
-@mixin padding($value) {
-  @include rfs($value, padding);
-}
-
-@mixin padding-top($value) {
-  @include rfs($value, padding-top);
-}
-
-@mixin padding-right($value) {
-  @include rfs($value, padding-right);
-}
-
-@mixin padding-bottom($value) {
-  @include rfs($value, padding-bottom);
-}
-
-@mixin padding-left($value) {
-  @include rfs($value, padding-left);
-}
-
-@mixin margin($value) {
-  @include rfs($value, margin);
-}
-
-@mixin margin-top($value) {
-  @include rfs($value, margin-top);
-}
-
-@mixin margin-right($value) {
-  @include rfs($value, margin-right);
-}
-
-@mixin margin-bottom($value) {
-  @include rfs($value, margin-bottom);
-}
-
-@mixin margin-left($value) {
-  @include rfs($value, margin-left);
-}
diff --git a/site/src/content/docs/foundation/options.mdx b/site/src/content/docs/foundation/options.mdx
index 47696d032b..7f34f78041 100644
--- a/site/src/content/docs/foundation/options.mdx
+++ b/site/src/content/docs/foundation/options.mdx
@@ -33,7 +33,6 @@ You can find and customize these variables for key global options in OUDS Web’
 | `$enable-transitions`          | `true` (default) or `false`           | Enables predefined `transition`s on various components. |
 | `$enable-reduced-motion`       | `true` (default) or `false`           | Enables the [`prefers-reduced-motion` media query]([[docsref:/getting-started/accessibility#reduced-motion]]), which suppresses certain animations/transitions based on the users’ browser/operating system preferences. |
 | `$enable-caret`                | `true` (default) or `false`           | Enables pseudo element caret on `.dropdown-toggle`. |
-| `$enable-rfs`                  | `true` or `false` (default)           | Globally enables [RFS]([[docsref:/getting-started/rfs]]). |
 | `$enable-validation-icons`     | `true` (default) or `false`           | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
 | `$enable-smooth-scroll`        | `true` (default) or `false`           | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]([[docsref:/getting-started/accessibility#reduced-motion]]) |
 | `$enable-fixed-header`         | `true` (default) or `false`           | Set `scroll-padding-top` rule to root element, preventing focus from being hidden under a fixed header. | */}
diff --git a/site/src/content/docs/utilities/api.mdx b/site/src/content/docs/utilities/api.mdx
index 17d6576b56..adbaf720f8 100644
--- a/site/src/content/docs/utilities/api.mdx
+++ b/site/src/content/docs/utilities/api.mdx
@@ -26,7 +26,6 @@ The `$utilities` map contains all our utilities and is later merged with your cu
 | [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |
 | [`print`](#print) | Optional | `false` | Boolean indicating if print classes need to be generated. |
 | `rtl` | Optional | `true` | Boolean indicating if utility should be kept in RTL. |
-{/* | `rfs` | Optional | `false` | Boolean to enable [fluid rescaling with RFS]([[docsref:/getting-started/rfs]]). | */}
 </BsTable>
 
 ## API explained
diff --git a/site/src/libs/config.ts b/site/src/libs/config.ts
index fb72c0494e..38e7d916e3 100644
--- a/site/src/libs/config.ts
+++ b/site/src/libs/config.ts
@@ -2,7 +2,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import yaml from 'js-yaml'
 import { z } from 'zod'
-import { zPrefixedVersionSemver, zVersionMajorMinor, zVersionSemver } from './validation'
+import { zVersionMajorMinor, zVersionSemver } from './validation'
 
 // The config schema used to validate the config file content and ensure all values required by the site are valid.
 const configSchema = z.object({
@@ -60,7 +60,6 @@ const configSchema = z.object({
     web: z.string().url()
   }),
   repo: z.string().url(),
-  rfs_version: zPrefixedVersionSemver,
   subtitle: z.string(),
   title: z.string(),
   toc: z.object({
diff --git a/site/src/libs/validation.ts b/site/src/libs/validation.ts
index 1a360bba62..73ec40f330 100644
--- a/site/src/libs/validation.ts
+++ b/site/src/libs/validation.ts
@@ -7,7 +7,6 @@ const unboundSemverRegex =
   /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?/
 
 export const zVersionSemver = z.string().regex(new RegExp(`^${unboundSemverRegex.source}$`))
-export const zPrefixedVersionSemver = z.string().regex(new RegExp(`^v${unboundSemverRegex.source}$`))
 
 export const zHexColor = z.string().regex(/^#(?:[0-9a-fA-F]{3}){1,2}$/) // TODO: Tried something with `/^(?:#(?:[0-9a-fA-F]{3}){1,2})|(?:rgba\(\d{1,3}, \d{1,3}, \d{1,3}, \d(?:\.\d{1,2})?\))$/`, but didn't worked for our opacity colors, see data.ts, l:84
 export const zNamedHexColors = (count: number) => {
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index 541fb3fbff..b952142feb 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -398,7 +398,7 @@
   }
 
   pre code {
-    @include font-size(inherit);
+    font-size: inherit;
     color: var(--#{$prefix}color-content-default); // OUDS mod: instead of `var(--bs-body-color)`
     word-wrap: normal;
   }

From cba159fcbf44f0213c5630e8509e5d26511820a3 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 9 Apr 2026 15:35:03 +0200
Subject: [PATCH 2/5] fix ci + migrations

---
 scss/_popover.scss                                          | 2 +-
 scss/forms/_form-control.scss                               | 4 ++--
 scss/forms/_input-group.scss                                | 4 ++--
 .../content/docs/getting-started/migration-from-boosted.mdx | 4 ++++
 site/src/content/docs/getting-started/migration.mdx         | 6 ++++++
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 3c926b1493..b32e7a4c67 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -187,9 +187,9 @@
 .popover-header {
   padding: var(--#{$prefix}popover-header-padding-y, var(--#{$prefix}popover-header-padding-top)) var(--#{$prefix}popover-header-padding-x) var(--#{$prefix}popover-header-padding-y, var(--#{$prefix}popover-header-padding-bottom)); // OUDS mod: instead of `var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x)`
   margin-bottom: 0; // Reset the default from Reboot
+  font-size: var(--#{$prefix}popover-header-font-size);
   font-weight: var(--#{$prefix}popover-font-weight); // OUDS mod
   line-height: var(--#{$prefix}popover-header-line-height); // OUDS mod
-  font-size: var(--#{$prefix}popover-header-font-size);
   color: var(--#{$prefix}popover-header-color);
 
   /* rtl:remove */
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 13a68181df..26014e489d 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -159,8 +159,8 @@
 .form-control-sm {
   min-height: $input-height-sm;
   padding: $input-padding-y-sm $input-padding-x-sm calc($input-padding-y-sm + 1px); // OUDS mod
-  line-height: $line-height-sm; // OUDS mod
   font-size: $input-font-size-sm;
+  line-height: $line-height-sm; // OUDS mod
   @include border-radius($input-border-radius-sm);
 
   &::file-selector-button {
@@ -172,8 +172,8 @@
 
 .form-control-lg {
   min-height: $input-height-lg;
-  line-height: $input-line-height-lg; // OUDS mod
   font-size: $input-font-size-lg;
+  line-height: $input-line-height-lg; // OUDS mod
   @include border-radius($input-border-radius-lg);
 
   &::file-selector-button {
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 7849cb8394..15cf27671f 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -71,8 +71,8 @@
 .input-group-lg > .input-group-text,
 .input-group-lg > .btn {
   padding: $input-padding-y-lg $input-padding-x-lg;
-  line-height: var(--#{$prefix}font-line-height-body-large); // OUDS mod
   font-size: $input-font-size-lg;
+  line-height: var(--#{$prefix}font-line-height-body-large); // OUDS mod
   @include border-radius($input-border-radius-lg);
 }
 
@@ -81,8 +81,8 @@
 .input-group-sm > .input-group-text,
 .input-group-sm > .btn {
   padding: $input-padding-y-sm $input-padding-x-sm;
-  line-height: $line-height-sm; // OUDS mod
   font-size: $input-font-size-sm;
+  line-height: $line-height-sm; // OUDS mod
   @include border-radius($input-border-radius-sm);
 }
 
diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index 9b1dae6b7c..eaf716508c 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -785,6 +785,10 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
 
 - <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/mixins/_alert.scss` doesn’t exist anymore. If you were importing it in your project, please make sure to remove it.
 
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/vendor/rfs.scss` doesn’t exist anymore. You shouldn’t have used it anyway, but we removed it.
+
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> `font-size()` mixin doesn’t exist anymore. You should refer to `get-font-size()` mixin instead.
+
 - <span class="tag tag-small rounded-none tag-positive">New</span> OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
 
   <details class="mb-large">
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index fa567797b1..cd2c50d7e3 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -31,6 +31,12 @@ toc: true
 
 - <span class="tag tag-small rounded-none tag-positive">New</span> Skeleton component has been implemented. Read more in our [skeleton page]([[docsref:/components/skeleton]]). We also added a skeleton state on every component that supports it.
 
+### CSS and Sass variables
+
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/vendor/rfs.scss` doesn’t exist anymore. You shouldn’t have used it anyway, but we removed it.
+
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> `font-size()` mixin doesn’t exist anymore. You should refer to `get-font-size()` mixin instead.
+
 ### Dual mode
 
 1. Update `@ouds/web-common` and `@ouds/web-[theme]` to v1.2.0.

From 38becd8be5d35a7a90ba0f9605b210339d404d2f Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Thu, 16 Apr 2026 11:33:28 +0200
Subject: [PATCH 3/5] fix review copilot

---
 site/src/content/docs/dual-mode.mdx                           | 2 +-
 .../content/docs/getting-started/migration-from-boosted.mdx   | 4 ++--
 site/src/content/docs/getting-started/migration.mdx           | 3 ++-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/site/src/content/docs/dual-mode.mdx b/site/src/content/docs/dual-mode.mdx
index 5e07d864e0..b64f12dab9 100644
--- a/site/src/content/docs/dual-mode.mdx
+++ b/site/src/content/docs/dual-mode.mdx
@@ -141,7 +141,7 @@ In this scenario, you will have access to all the components available in OUDS W
           --#{$prefix}root-font-size: #{$font-size-root};
         }
         --#{$prefix}body-font-family: #{inspect($font-family-base)};
-        @include rfs($font-size-base, --#{$prefix}body-font-size);
+        --#{$prefix}body-font-size: #{$font-size-base};
         --#{$prefix}body-font-weight: #{$font-weight-base};
         --#{$prefix}body-line-height: #{$line-height-base};
         @if $body-text-align != null {
diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index eaf716508c..1ea9092d9b 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -785,9 +785,9 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
 
 - <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/mixins/_alert.scss` doesn’t exist anymore. If you were importing it in your project, please make sure to remove it.
 
-- <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/vendor/rfs.scss` doesn’t exist anymore. You shouldn’t have used it anyway, but we removed it.
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/vendor/_rfs.scss` doesn’t exist anymore. You shouldn’t have used it anyway, but we removed it.
 
-- <span class="tag tag-small rounded-none tag-warning">Warning</span> `font-size()` mixin doesn’t exist anymore. You should refer to `get-font-size()` mixin instead.
+- <span class="tag tag-small rounded-none tag-negative">Breaking</span> `font-size()` mixin doesn’t exist anymore. You should refer to `get-font-size()` mixin instead.
 
 - <span class="tag tag-small rounded-none tag-positive">New</span> OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
 
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index cd2c50d7e3..b12e6ff0c5 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -33,7 +33,7 @@ toc: true
 
 ### CSS and Sass variables
 
-- <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/vendor/rfs.scss` doesn’t exist anymore. You shouldn’t have used it anyway, but we removed it.
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/vendor/_rfs.scss` doesn’t exist anymore. You shouldn’t have used it anyway, but we removed it.
 
 - <span class="tag tag-small rounded-none tag-warning">Warning</span> `font-size()` mixin doesn’t exist anymore. You should refer to `get-font-size()` mixin instead.
 
@@ -41,6 +41,7 @@ toc: true
 
 1. Update `@ouds/web-common` and `@ouds/web-[theme]` to v1.2.0.
 2. Remove `@import "boosted/scss/nav";`, `@import "boosted/scss/navbar";`, `@import "boosted/scss/footer";`, and `@import "boosted/scss/orange-navbar";` from the Boosted custom import stack.
+3. Change the `@include rfs($font-size-base, --#{$prefix}body-font-size);` into `--#{$prefix}body-font-size: #{$font-size-base};`.
 
 
 ## v1.1.0

From 36018d630649bee7bd308fcf56634099aad1a856 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 27 Apr 2026 10:32:33 +0200
Subject: [PATCH 4/5] fix review

Co-authored-by: Maxime Lardenois <maxime.lardenois@orange.com>
---
 .../content/docs/getting-started/migration-from-boosted.mdx   | 4 ++--
 site/src/content/docs/getting-started/migration.mdx           | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index 1ea9092d9b..85feb557fc 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -785,9 +785,9 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
 
 - <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/mixins/_alert.scss` doesn’t exist anymore. If you were importing it in your project, please make sure to remove it.
 
-- <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/vendor/_rfs.scss` doesn’t exist anymore. You shouldn’t have used it anyway, but we removed it.
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/vendor/_rfs.scss` has been removed. It was deprecated and should not have been used.
 
-- <span class="tag tag-small rounded-none tag-negative">Breaking</span> `font-size()` mixin doesn’t exist anymore. You should refer to `get-font-size()` mixin instead.
+- <span class="tag tag-small rounded-none tag-negative">Breaking</span> `font-size()` mixin has been removed. Please refer to `get-font-size()` mixin instead.
 
 - <span class="tag tag-small rounded-none tag-positive">New</span> OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
 
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index b12e6ff0c5..5d27faedb6 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -33,9 +33,9 @@ toc: true
 
 ### CSS and Sass variables
 
-- <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/vendor/_rfs.scss` doesn’t exist anymore. You shouldn’t have used it anyway, but we removed it.
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/vendor/_rfs.scss` has been removed. It was deprecated and should not have been used.
 
-- <span class="tag tag-small rounded-none tag-warning">Warning</span> `font-size()` mixin doesn’t exist anymore. You should refer to `get-font-size()` mixin instead.
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> `font-size()` mixin has been removed. Please refer to `get-font-size()` mixin instead.
 
 ### Dual mode
 

From e729c3864181db236e16fd67cd31c14cdae162f3 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 27 Apr 2026 10:40:11 +0200
Subject: [PATCH 5/5] .

---
 .../migration-from-boosted.mdx                |  6 ++---
 .../docs/getting-started/migration.mdx        | 22 +++++++++++++------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index 40ed765082..be5e57d8ac 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -785,11 +785,11 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
 
 - <span class="tag tag-small tag-warning"><span class="tag-status-icon"></span>Warning</span> `scss/mixins/_alert.scss` doesn’t exist anymore. If you were importing it in your project, please make sure to remove it.
 
-- <span class="tag tag-small tag-warning">Warning</span> `scss/vendor/_rfs.scss` has been removed. It was deprecated and should not have been used.
+- <span class="tag tag-small tag-warning"><span class="tag-status-icon"></span>Warning</span> `scss/vendor/_rfs.scss` has been removed. It was deprecated and should not have been used.
 
-- <span class="tag tag-small tag-negative">Breaking</span> `font-size()` mixin has been removed. Please refer to `get-font-size()` mixin instead.
+- <span class="tag tag-small tag-negative"><span class="tag-status-icon"></span>Breaking</span> `font-size()` mixin has been removed. Please refer to `get-font-size()` mixin instead.
 
-- <span class="tag tag-small tag-positive">New</span> OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
+- <span class="tag tag-small tag-positive"><span class="tag-status-icon"></span>New</span> OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
 
   <details class="mb-large">
   <summary>See the new import stack</summary>
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index 1756b9ebe5..e2a40d67e6 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -9,6 +9,20 @@ aliases:
 toc: true
 ---
 
+## v1.3.0
+
+<hr />
+
+### CSS and Sass variables
+
+- <span class="tag tag-small tag-warning"><span class="tag-status-icon"></span>Warning</span> `scss/vendor/_rfs.scss` has been removed. It was deprecated and should not have been used.
+
+- <span class="tag tag-small tag-warning"><span class="tag-status-icon"></span>Warning</span> `font-size()` mixin has been removed. Please refer to `get-font-size()` mixin instead.
+
+### Dual mode
+
+1. Change the `@include rfs($font-size-base, --#{$prefix}body-font-size);` into `--#{$prefix}body-font-size: #{$font-size-base};`.
+
 ## v1.2.0
 
 <hr />
@@ -35,13 +49,7 @@ toc: true
 
 #### Colors
 
-- <span class="tag tag-small tag-positive">New</span> We replaced the color palette page with a new and improved colors page, it lists all existing semantic colors available in OUDS Web. Read more in our [colors page]([[docsref:/foundation/colors]]).
-
-### CSS and Sass variables
-
-- <span class="tag tag-small rounded-none tag-warning">Warning</span> `scss/vendor/_rfs.scss` has been removed. It was deprecated and should not have been used.
-
-- <span class="tag tag-small rounded-none tag-warning">Warning</span> `font-size()` mixin has been removed. Please refer to `get-font-size()` mixin instead.
+- <span class="tag tag-small tag-positive"><span class="tag-status-icon"></span>New</span> We replaced the color palette page with a new and improved colors page, it lists all existing semantic colors available in OUDS Web. Read more in our [colors page]([[docsref:/foundation/colors]]).
 
 ### Dual mode