Map .rounded-* and --border-radius-* onto a numeric $radii scale (#3020)

Co-authored-by: codecalm <codecalm@gmail.com>

core/scss/_props.scss

@@ -87,13 +87,17 @@
 
   // Border radiuses
   --border-radius-scale: 1;
+  @each $name, $value in $radii {
+    --radius-#{$name}: calc(#{$value} * var(--border-radius-scale, 1));
+  }
   @each $name, $value in $border-radiuses {
     @if $name {
-      --border-radius-#{$name}: calc(#{$value} * var(--border-radius-scale, 1));
+      --border-radius-#{$name}: #{$value};
     } @else {
       --border-radius: #{$value};
     }
   }
+  --border-radius-2xl: var(--border-radius-xxl); // Deprecated in v5.3.0 for consistency
 
   // Buttons and form controls: one scale, in the names Bootstrap 6 uses
   // scss-docs-start btn-input-css-vars

core/scss/_utilities.scss

@@ -14,6 +14,18 @@ $border-values: (
   0: 0,
 ) !default;
 
+$rounded-values: (
+  null: var(--border-radius),
+  0: 0,
+  1: var(--border-radius-sm),
+  2: var(--border-radius),
+  3: var(--border-radius-lg),
+  4: var(--border-radius-xl),
+  5: var(--border-radius-xxl),
+  circle: 50%,
+  pill: var(--border-radius-pill),
+) !default;
+
 $utilities-border-colors: map-loop(
   (
     'red': red,
@@ -855,77 +867,27 @@ $utilities: map.merge(
     'rounded': (
       property: border-radius,
       class: rounded,
-      values: (
-        null: var(--border-radius),
-        0: 0,
-        1: var(--border-radius-sm),
-        2: var(--border-radius),
-        3: var(--border-radius-lg),
-        4: var(--border-radius-xl),
-        5: var(--border-radius-xxl),
-        circle: 50%,
-        pill: var(--border-radius-pill),
-      ),
+      values: $rounded-values,
     ),
     'rounded-top': (
       property: border-start-start-radius border-start-end-radius,
       class: rounded-top,
-      values: (
-        null: var(--border-radius),
-        0: 0,
-        1: var(--border-radius-sm),
-        2: var(--border-radius),
-        3: var(--border-radius-lg),
-        4: var(--border-radius-xl),
-        5: var(--border-radius-xxl),
-        circle: 50%,
-        pill: var(--border-radius-pill),
-      ),
+      values: $rounded-values,
     ),
     'rounded-end': (
       property: border-end-end-radius border-start-end-radius,
       class: rounded-end,
-      values: (
-        null: var(--border-radius),
-        0: 0,
-        1: var(--border-radius-sm),
-        2: var(--border-radius),
-        3: var(--border-radius-lg),
-        4: var(--border-radius-xl),
-        5: var(--border-radius-xxl),
-        circle: 50%,
-        pill: var(--border-radius-pill),
-      ),
+      values: $rounded-values,
     ),
     'rounded-bottom': (
       property: border-end-end-radius border-end-start-radius,
       class: rounded-bottom,
-      values: (
-        null: var(--border-radius),
-        0: 0,
-        1: var(--border-radius-sm),
-        2: var(--border-radius),
-        3: var(--border-radius-lg),
-        4: var(--border-radius-xl),
-        5: var(--border-radius-xxl),
-        circle: 50%,
-        pill: var(--border-radius-pill),
-      ),
+      values: $rounded-values,
     ),
     'rounded-start': (
       property: border-start-start-radius border-end-start-radius,
       class: rounded-start,
-      values: (
-        null: var(--border-radius),
-        0: 0,
-        1: var(--border-radius-sm),
-        2: var(--border-radius),
-        3: var(--border-radius-lg),
-        4: var(--border-radius-xl),
-        5: var(--border-radius-xxl),
-        circle: 50%,
-        pill: var(--border-radius-pill),
-      ),
+      values: $rounded-values,
     ),
     'visibility': (
       property: visibility,

core/scss/_variables.scss

@@ -723,16 +723,27 @@ $border-radius-xl: 1rem !default;
 $border-radius-xxl: 2rem !default;
 $border-radius-pill: 100rem !default;
 
-$border-radiuses: (
+$radii: (
   0: 0,
-  xs: $border-radius-xs,
-  sm: $border-radius-sm,
-  md: $border-radius,
-  lg: $border-radius-lg,
-  xl: $border-radius-xl,
-  xxl: $border-radius-xxl,
+  1: $border-radius-xs,
+  2: $border-radius-sm,
+  3: $border-radius,
+  4: $border-radius-lg,
+  5: $border-radius-xl,
+  6: $border-radius-xxl,
   pill: $border-radius-pill,
-  null: var(--border-radius-md),
+) !default;
+
+$border-radiuses: (
+  0: var(--radius-0),
+  xs: var(--radius-1),
+  sm: var(--radius-2),
+  md: var(--radius-3),
+  lg: var(--radius-4),
+  xl: var(--radius-5),
+  xxl: var(--radius-6),
+  pill: var(--radius-pill),
+  null: var(--radius-3),
 ) !default;
 
 $icon-color: var(--gray-400) !default;

core/scss/bootstrap/_root.scss

@@ -100,14 +100,6 @@
   --border-style: #{$border-style};
   --border-color: light-dark(#{$border-color}, #{$border-color-dark});
   --border-color-translucent: light-dark(#{$border-color-translucent}, #{$border-color-translucent-dark});
-
-  --border-radius: #{$border-radius};
-  --border-radius-sm: #{$border-radius-sm};
-  --border-radius-lg: #{$border-radius-lg};
-  --border-radius-xl: #{$border-radius-xl};
-  --border-radius-xxl: #{$border-radius-xxl};
-  --border-radius-2xl: var(--border-radius-xxl); // Deprecated in v5.3.0 for consistency
-  --border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-var
 
   --box-shadow: #{$box-shadow};