feat: add new utility classes, sort existing classes (#7515)

vaadin · Jul 11, 2024 · b071047 · b071047
1 parent 99863ea
commit b071047
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 102 deletions.
diff --git a/packages/vaadin-lumo-styles/utilities/background.js b/packages/vaadin-lumo-styles/utilities/background.js
@@ -15,106 +15,106 @@ export const background = css`
     background-color: transparent;
   }
 
-  .bg-tint-5 {
-    background-color: var(--lumo-tint-5pct);
+  .bg-tint {
+    background-color: var(--lumo-tint);
   }
-  .bg-tint-10 {
-    background-color: var(--lumo-tint-10pct);
+  .bg-tint-90 {
+    background-color: var(--lumo-tint-90pct);
   }
-  .bg-tint-20 {
-    background-color: var(--lumo-tint-20pct);
+  .bg-tint-80 {
+    background-color: var(--lumo-tint-80pct);
   }
-  .bg-tint-30 {
-    background-color: var(--lumo-tint-30pct);
+  .bg-tint-70 {
+    background-color: var(--lumo-tint-70pct);
   }
-  .bg-tint-40 {
-    background-color: var(--lumo-tint-40pct);
+  .bg-tint-60 {
+    background-color: var(--lumo-tint-60pct);
   }
   .bg-tint-50 {
     background-color: var(--lumo-tint-50pct);
   }
-  .bg-tint-60 {
-    background-color: var(--lumo-tint-60pct);
+  .bg-tint-40 {
+    background-color: var(--lumo-tint-40pct);
   }
-  .bg-tint-70 {
-    background-color: var(--lumo-tint-70pct);
+  .bg-tint-30 {
+    background-color: var(--lumo-tint-30pct);
   }
-  .bg-tint-80 {
-    background-color: var(--lumo-tint-80pct);
+  .bg-tint-20 {
+    background-color: var(--lumo-tint-20pct);
   }
-  .bg-tint-90 {
-    background-color: var(--lumo-tint-90pct);
+  .bg-tint-10 {
+    background-color: var(--lumo-tint-10pct);
   }
-  .bg-tint {
-    background-color: var(--lumo-tint);
+  .bg-tint-5 {
+    background-color: var(--lumo-tint-5pct);
   }
 
-  .bg-shade-5 {
-    background-color: var(--lumo-shade-5pct);
+  .bg-shade {
+    background-color: var(--lumo-shade);
   }
-  .bg-shade-10 {
-    background-color: var(--lumo-shade-10pct);
+  .bg-shade-90 {
+    background-color: var(--lumo-shade-90pct);
   }
-  .bg-shade-20 {
-    background-color: var(--lumo-shade-20pct);
+  .bg-shade-80 {
+    background-color: var(--lumo-shade-80pct);
   }
-  .bg-shade-30 {
-    background-color: var(--lumo-shade-30pct);
+  .bg-shade-70 {
+    background-color: var(--lumo-shade-70pct);
   }
-  .bg-shade-40 {
-    background-color: var(--lumo-shade-40pct);
+  .bg-shade-60 {
+    background-color: var(--lumo-shade-60pct);
   }
   .bg-shade-50 {
     background-color: var(--lumo-shade-50pct);
   }
-  .bg-shade-60 {
-    background-color: var(--lumo-shade-60pct);
+  .bg-shade-40 {
+    background-color: var(--lumo-shade-40pct);
   }
-  .bg-shade-70 {
-    background-color: var(--lumo-shade-70pct);
+  .bg-shade-30 {
+    background-color: var(--lumo-shade-30pct);
   }
-  .bg-shade-80 {
-    background-color: var(--lumo-shade-80pct);
+  .bg-shade-20 {
+    background-color: var(--lumo-shade-20pct);
   }
-  .bg-shade-90 {
-    background-color: var(--lumo-shade-90pct);
+  .bg-shade-10 {
+    background-color: var(--lumo-shade-10pct);
   }
-  .bg-shade {
-    background-color: var(--lumo-shade);
+  .bg-shade-5 {
+    background-color: var(--lumo-shade-5pct);
   }
 
-  .bg-contrast-5 {
-    background-color: var(--lumo-contrast-5pct);
+  .bg-contrast {
+    background-color: var(--lumo-contrast);
   }
-  .bg-contrast-10 {
-    background-color: var(--lumo-contrast-10pct);
+  .bg-contrast-90 {
+    background-color: var(--lumo-contrast-90pct);
   }
-  .bg-contrast-20 {
-    background-color: var(--lumo-contrast-20pct);
+  .bg-contrast-80 {
+    background-color: var(--lumo-contrast-80pct);
   }
-  .bg-contrast-30 {
-    background-color: var(--lumo-contrast-30pct);
+  .bg-contrast-70 {
+    background-color: var(--lumo-contrast-70pct);
   }
-  .bg-contrast-40 {
-    background-color: var(--lumo-contrast-40pct);
+  .bg-contrast-60 {
+    background-color: var(--lumo-contrast-60pct);
   }
   .bg-contrast-50 {
     background-color: var(--lumo-contrast-50pct);
   }
-  .bg-contrast-60 {
-    background-color: var(--lumo-contrast-60pct);
+  .bg-contrast-40 {
+    background-color: var(--lumo-contrast-40pct);
   }
-  .bg-contrast-70 {
-    background-color: var(--lumo-contrast-70pct);
+  .bg-contrast-30 {
+    background-color: var(--lumo-contrast-30pct);
   }
-  .bg-contrast-80 {
-    background-color: var(--lumo-contrast-80pct);
+  .bg-contrast-20 {
+    background-color: var(--lumo-contrast-20pct);
   }
-  .bg-contrast-90 {
-    background-color: var(--lumo-contrast-90pct);
+  .bg-contrast-10 {
+    background-color: var(--lumo-contrast-10pct);
   }
-  .bg-contrast {
-    background-color: var(--lumo-contrast);
+  .bg-contrast-5 {
+    background-color: var(--lumo-contrast-5pct);
   }
 
   .bg-primary {

diff --git a/packages/vaadin-lumo-styles/utilities/border.js b/packages/vaadin-lumo-styles/utilities/border.js
@@ -10,6 +10,12 @@ export const border = css`
   .border-0 {
     border: none;
   }
+  .border-dashed {
+    --lumo-utility-border-style: dashed;
+  }
+  .border-dotted {
+    --lumo-utility-border-style: dotted;
+  }
   .border {
     border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
   }
@@ -36,46 +42,40 @@ export const border = css`
   .border-t {
     border-top: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
   }
-  .border-dashed {
-    --lumo-utility-border-style: dashed;
-  }
-  .border-dotted {
-    --lumo-utility-border-style: dotted;
-  }
 
   /* === Border color === */
-  .border-contrast-5 {
-    --lumo-utility-border-color: var(--lumo-contrast-5pct);
+  .border-contrast {
+    --lumo-utility-border-color: var(--lumo-contrast);
   }
-  .border-contrast-10 {
-    --lumo-utility-border-color: var(--lumo-contrast-10pct);
+  .border-contrast-90 {
+    --lumo-utility-border-color: var(--lumo-contrast-90pct);
   }
-  .border-contrast-20 {
-    --lumo-utility-border-color: var(--lumo-contrast-20pct);
+  .border-contrast-80 {
+    --lumo-utility-border-color: var(--lumo-contrast-80pct);
   }
-  .border-contrast-30 {
-    --lumo-utility-border-color: var(--lumo-contrast-30pct);
+  .border-contrast-70 {
+    --lumo-utility-border-color: var(--lumo-contrast-70pct);
   }
-  .border-contrast-40 {
-    --lumo-utility-border-color: var(--lumo-contrast-40pct);
+  .border-contrast-60 {
+    --lumo-utility-border-color: var(--lumo-contrast-60pct);
   }
   .border-contrast-50 {
     --lumo-utility-border-color: var(--lumo-contrast-50pct);
   }
-  .border-contrast-60 {
-    --lumo-utility-border-color: var(--lumo-contrast-60pct);
+  .border-contrast-40 {
+    --lumo-utility-border-color: var(--lumo-contrast-40pct);
   }
-  .border-contrast-70 {
-    --lumo-utility-border-color: var(--lumo-contrast-70pct);
+  .border-contrast-30 {
+    --lumo-utility-border-color: var(--lumo-contrast-30pct);
   }
-  .border-contrast-80 {
-    --lumo-utility-border-color: var(--lumo-contrast-80pct);
+  .border-contrast-20 {
+    --lumo-utility-border-color: var(--lumo-contrast-20pct);
   }
-  .border-contrast-90 {
-    --lumo-utility-border-color: var(--lumo-contrast-90pct);
+  .border-contrast-10 {
+    --lumo-utility-border-color: var(--lumo-contrast-10pct);
   }
-  .border-contrast {
-    --lumo-utility-border-color: var(--lumo-contrast);
+  .border-contrast-5 {
+    --lumo-utility-border-color: var(--lumo-contrast-5pct);
   }
 
   .border-primary {
@@ -111,12 +111,12 @@ export const border = css`
   .border-warning {
     --lumo-utility-border-color: var(--lumo-warning-color);
   }
-  .border-warning-10 {
-    --lumo-utility-border-color: var(--lumo-warning-color-10pct);
-  }
   .border-warning-strong {
     --lumo-utility-border-color: var(--lumo-warning-text-color);
   }
+  .border-warning-10 {
+    --lumo-utility-border-color: var(--lumo-warning-color-10pct);
+  }
 
   /* === Border radius === */
   .rounded-none {