✨ feat(round.scss): BREAKING Add round util classes and deprecated ol…

…d ones

- Add new round util classes, e.g. u-round-(xs|sm|md|lg|xl|full)
- Deprecated class with replacement: u-round => u-round-xs
- Deprecated class with replacement: u-circle => u-round-full

dist/cirrus.css

@@ -15094,6 +15094,106 @@ a.tag:hover {
 /*
     Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
 */
+.u-round-none {
+  border-radius: 0px;
+}
+
+.u-round-xs {
+  border-radius: 0.25rem;
+}
+
+.u-round-sm {
+  border-radius: 0.5rem;
+}
+
+.u-round-md {
+  border-radius: 0.75rem;
+}
+
+.u-round-lg {
+  border-radius: 1rem;
+}
+
+.u-round-xl {
+  border-radius: 1.25rem;
+}
+
+.u-round-full {
+  border-radius: 9001px;
+}
+/*
+  Functions
+  TODO Refactor to different categories
+*/
+/*
+    Converts a given hex value to RGB.
+*/
+/*
+    Generates delimited class name prefix.
+*/
+/*
+    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
+*/
+/*
+  Functions
+  TODO Refactor to different categories
+*/
+/*
+    Converts a given hex value to RGB.
+*/
+/*
+    Generates delimited class name prefix.
+*/
+/*
+    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
+*/
+/* Spacing */
+/* Breakpoints */
+/* Fonts */
+/* Grid Count (Columns + Grid) */
+/* Grid Percents */
+/* Media Queries */
+/* Smaller than the defined pixels are the dimensions for that range */
+/* Variant of mixin that takes in mapping of class name to value */
+/* v1 Color scheme for Cirrus */
+/* v2 Colors */
+/*
+    Global Mixins
+*/
+/*
+    Mixin that returns a property map as a series of CSS class properties.
+
+    E.g. $xs: (color: #fff, opacity: 0.5), $sm... =>
+
+    <class>--xs {
+        color: #fff;
+        opacity: 0.5;
+    }
+*/
+/*
+    Bring to front on focus.
+*/
+/* Spacing */
+/* Breakpoints */
+/* Fonts */
+/* Grid Count (Columns + Grid) */
+/* Grid Percents */
+/* Media Queries */
+/* Smaller than the defined pixels are the dimensions for that range */
+/* Variant of mixin that takes in mapping of class name to value */
+/*
+  Functions
+  TODO Refactor to different categories
+*/
+/*
+    Converts a given hex value to RGB.
+*/
+/*
+    Generates delimited class name prefix.
+*/
+/*
+    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
+*/
 .u-shadow-none {
   --cirrus-shadow: 0 0 #000;
   box-shadow: var(--cirrus-shadow);

internal/_config.scss

@@ -311,6 +311,15 @@ $default-config: (
         '90': 0.9,
         '100': 1,
     ),
+    round: (
+        'none': 0px,
+        $xs: .25rem,
+        $sm: .5rem,
+        $md: .75rem,
+        $lg: 1rem,
+        $xl: 1.25rem,
+        'full': 9001px,
+    ),
     shadows: (
         'none': (
             --cirrus-shadow: 0 0 #000,
@@ -392,5 +401,6 @@ $minmax-heights: map.get($default-config, minmax-heights);
 $minmax-widths: map.get($default-config, minmax-widths);
 
 $opacities: map.get($default-config, opacity);
+$round: map.get($default-config, round);
 $shadows: map.get($default-config, shadows);
 $z-indexes: map.get($default-config, z-index);

src/core/utils/misc.scss

@@ -68,16 +68,6 @@ $text-directions: (justify, left, right, center);
     user-select: none !important;
 }
 
-/* Round the corners of the element */
-.u-round {
-    border-radius: 0.25rem !important;
-}
-
-/* Turns element into a circle */
-.u-circle {
-    border-radius: 50% !important;
-}
-
 .u-no-outline {
     outline: 0px !important;
 }

src/core/utils/round.scss

@@ -0,0 +1,12 @@
+// Utility classes for round
+@import '../../../internal/_functions';
+@import '../../../internal/_mixins';
+@import '../../../internal/_config';
+
+@each $class, $value in $round {
+    .u-round-#{$class} {
+        border-radius: #{$value};
+    }
+}
+
+// TODO: Do we need corner specific variants?