Chore: Migrate _widths SCSS to global emotion styles (#92863)

* migrate widths to global styles

* only calculate width once per loop

packages/grafana-ui/src/themes/GlobalStyles/utilityClasses.ts

@@ -1,3 +1,4 @@
+import { CSSInterpolation } from '@emotion/css';
 import { css } from '@emotion/react';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -33,6 +34,27 @@ function buttonSizeMixin(paddingY: string, paddingX: string, fontSize: string, b
   };
 }
 
+function widthMixin(theme: GrafanaTheme2, max: number) {
+  let result: CSSInterpolation = {};
+  for (let i = 1; i <= max; i++) {
+    const width = `${theme.spacing(2 * i)} !important`;
+    result[`.width-${i}`] = {
+      width,
+    };
+    result[`.max-width-${i}`] = {
+      maxWidth: width,
+      flexGrow: 1,
+    };
+    result[`.min-width-${i}`] = {
+      minWidth: width,
+    };
+    result[`.offset-width-${i}`] = {
+      marginLeft: width,
+    };
+  }
+  return result;
+}
+
 export function getUtilityClassStyles(theme: GrafanaTheme2) {
   return css({
     '.highlight-word': {
@@ -140,5 +162,6 @@ export function getUtilityClassStyles(theme: GrafanaTheme2) {
     '.typeahead': {
       zIndex: theme.zIndex.typeahead,
     },
+    ...widthMixin(theme, 30),
   });
 }

public/sass/_angular.scss

@@ -2602,3 +2602,7 @@ label.cr1 {
 input[type='checkbox'].cr1:checked + label {
   background: url($checkboxImageUrl) 0px -18px no-repeat;
 }
+
+.max-width {
+  width: 100%;
+}

public/sass/_grafana.scss

@@ -3,8 +3,5 @@
 @import 'base/grid';
 @import 'base/font_awesome';
 
-// UTILS
-@import 'utils/widths';
-
 // ANGULAR
 @import 'angular';

public/sass/utils/_widths.scss

@@ -1,32 +0,0 @@
-.max-width {
-  width: 100%;
-}
-.width-auto {
-  width: auto;
-}
-
-// widths
-@for $i from 1 through 30 {
-  .width-#{$i} {
-    width: ($spacer * $i) !important;
-  }
-}
-
-@for $i from 1 through 30 {
-  .max-width-#{$i} {
-    max-width: ($spacer * $i) !important;
-    flex-grow: 1;
-  }
-}
-
-@for $i from 1 through 30 {
-  .min-width-#{$i} {
-    min-width: ($spacer * $i) !important;
-  }
-}
-
-@for $i from 1 through 30 {
-  .offset-width-#{$i} {
-    margin-left: ($spacer * $i) !important;
-  }
-}