fix: 🐛 Deprecate Slash as division operator

Deprecation of slash as division operator as we were getting warnings in
the terminal about it. More info
[here](https://sass-lang.com/documentation/breaking-changes/slash-div)

addons/rose/addon/styles/rose/components/dropdown/_button.scss

@@ -1,5 +1,6 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
+@use 'sass:math';
 
 .rose-dropdown-button {
   @include type.type(s);
@@ -11,7 +12,7 @@
   padding: 0 sizing.rems(s);
   text-decoration: none;
   text-align: left;
-  $line-height: 36 / 14;
+  $line-height: math.div(36, 14);
   line-height: $line-height;
 
   --background-color: transparent;

addons/rose/addon/styles/rose/components/dropdown/_item.scss

@@ -1,12 +1,13 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
+@use 'sass:math';
 
 $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'></path></svg>");
 
 .rose-dropdown-item {
   @include type.type(s);
   min-width: (sizing.rems(m)) * 20;
-  $line-height: 36 / 14;
+  $line-height: math.div(36, 14);
   line-height: $line-height;
 
   --color: var(--stark);

addons/rose/addon/styles/rose/components/dropdown/_link.scss

@@ -1,5 +1,6 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
+@use 'sass:math';
 
 .rose-dropdown-link {
   @include type.type(s);
@@ -11,7 +12,7 @@
   padding: 0 sizing.rems(s);
   text-decoration: none;
   text-align: left;
-  $line-height: 36 / 14;
+  $line-height: math.div(36, 14);
   line-height: $line-height;
 
   --background-color: transparent;

addons/rose/addon/styles/rose/components/dropdown/_section.scss

@@ -1,5 +1,6 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
+@use 'sass:math';
 
 .rose-dropdown-section {
   .rose-dropdown-section-title {
@@ -7,7 +8,7 @@
     text-transform: uppercase;
     padding: 0 sizing.rems(s);
     margin: 0;
-    $line-height: 36 / 14;
+    $line-height: math.div(36, 14);
     line-height: $line-height;
     color: var(--ui-gray);
   }

addons/rose/addon/styles/rose/components/header/_link.scss

@@ -1,11 +1,12 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
+@use 'sass:math';
 
 .rose-header-nav-link {
   @include type.type(s, semibold);
 
   // target line height is 16, which is not a standard line height
-  $lineHeight: 16 / 14;
+  $lineHeight: math.div(16, 14);
   line-height: $lineHeight;
   text-decoration: none;
 

addons/rose/addon/styles/rose/components/list/_key-value.scss

@@ -1,6 +1,7 @@
 @use '../../variables/sizing';
 @use '../../variables/typography';
 @use '../../utilities/type';
+@use 'sass:math';
 
 .rose-list-key-value {
   margin-bottom: sizing.rems(m);
@@ -10,9 +11,9 @@
   display: flex;
   border-bottom: 1px solid var(--ui-gray-subtler-3);
   @include type.type(s);
-  $lineHeight: 36 / 14;
+  $lineHeight: math.div(36, 14);
   line-height: $lineHeight;
-  padding: (sizing.rems(s) / 2) 0;
+  padding: math.div(sizing.rems(s), 2) 0;
 
   .rose-list-key-value-item-cell {
     display: flex;

addons/rose/addon/styles/rose/components/nav/_sidebar.scss

@@ -1,5 +1,6 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
+@use 'sass:math';
 
 .rose-nav-sidebar {
   $threePX: sizing.rems(xxxs) + sizing.rems(xxxxs);
@@ -19,7 +20,7 @@
     display: none;
     color: var(--ui-gray);
     text-transform: uppercase;
-    $lineHeight: 20 / 12;
+    $lineHeight: math.div(20, 12);
     line-height: $lineHeight;
     padding: 0 sizing.rems(m);
     margin-bottom: $threePX;
@@ -30,7 +31,7 @@
     @include type.type(s);
     display: block;
     color: var(--stark);
-    $lineHeight: 36 / 14;
+    $lineHeight: math.div(36, 14);
     line-height: $lineHeight;
     text-decoration: none;
     padding: 0 sizing.rems(m);

addons/rose/addon/styles/rose/components/table/_table.scss

@@ -1,5 +1,6 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
+@use 'sass:math';
 
 .rose-table {
   @include type.type(s, normal);
@@ -62,9 +63,9 @@
   &.rose-table-condensed {
     .rose-table-cell {
       @include type.type(s);
-      $lineHeight: 36 / 14;
+      $lineHeight: math.div(36, 14);
       line-height: $lineHeight;
-      padding: (sizing.rems(s) / 2) sizing.rems(s);
+      padding: math.div(sizing.rems(s), 2) sizing.rems(s);
     }
   }
 

addons/rose/addon/styles/rose/variables/_typography.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'sizing';
+@use 'sass:math';
 
 /**
  * SASS variables defining typography.
@@ -46,15 +47,15 @@ $font-sizes: (
 
 // Line height expressed as ratio.
 $line-heights: (
-  xl: 36 / 28,
-  l: 24 / 20,
-  m: 20 / 16,
-  s: 18 / 14,
-  xs: 16 / 12,
-  h1: 48 / 28,
-  h2: 36 / 20,
-  h3: 24 / 16,
-  button: 24 / 13,
+  xl: math.div(36, 28),
+  l: math.div(24, 20),
+  m: math.div(20, 16),
+  s: math.div(18, 14),
+  xs: math.div(16, 12),
+  h1: math.div(48, 28),
+  h2: math.div(36, 20),
+  h3: math.div(24, 16),
+  button: math.div(24, 13),
 );
 
 /**