build: cssnano optimizations

adobe · Apr 24, 2024 · 6aad672 · 6aad672
1 parent 719c170
commit 6aad672
Show file tree

Hide file tree

Showing 135 changed files with 6,137 additions and 9,165 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,12 @@
 {
 	"tabWidth": 2,
-	"useTabs": true
+	"useTabs": true,
+	"overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "printWidth": 500
+      }
+    }
+  ]
 }
diff --git a/components/accordion/index.css b/components/accordion/index.css
diff --git a/components/actionbar/index.css b/components/actionbar/index.css
@@ -19,9 +19,7 @@ governing permissions and limitations under the License.
   --spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default);
 
   /* cjk language support for item counter */
-  &:lang(ja),
-  &:lang(zh),
-  &:lang(ko) {
+  &:lang(ja), &:lang(zh), &:lang(ko) {
     --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
   }
 
@@ -139,9 +137,7 @@ governing permissions and limitations under the License.
     line-height: var(--mod-actionbar-item-counter-line-height, var(--spectrum-actionbar-item-counter-line-height));
 
     /* cjk language support */
-    &:lang(ja),
-    &:lang(zh),
-    &:lang(ko) {
+    &:lang(ja), &:lang(zh), &:lang(ko) {
       line-height: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk));
     }
   }
@@ -178,7 +174,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-ActionBar--fixed {
-   position: fixed;
+  position: fixed;
 }
 
 /* flexible width */

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
@@ -28,9 +28,9 @@ governing permissions and limitations under the License.
   --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
   --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
 
-	&:dir(rtl) {
-		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-	}
+  &:dir(rtl) {
+    --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+  }
 
   &.is-selected {
     --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
@@ -151,9 +151,7 @@ governing permissions and limitations under the License.
       --highcontrast-actionbutton-content-color-down: HighlightText;
       --highcontrast-actionbutton-content-color-disabled: GrayText;
 
-      .spectrum-ActionButton-icon,
-      .spectrum-ActionButton-hold,
-      .spectrum-ActionButton-label {
+      .spectrum-ActionButton-icon, .spectrum-ActionButton-hold, .spectrum-ActionButton-label {
         /* ensure custom text colors from above get applied */
         /* it seems like this shouldn't have to be done, but colors are wrong without it */
         forced-color-adjust: none;
@@ -199,8 +197,7 @@ governing permissions and limitations under the License.
     color: var(--highcontrast-actionbutton-content-color-down, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down)));
   }
 
-  &:disabled,
-  &.is-disabled {
+  &:disabled, &.is-disabled {
     background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)));
     border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled)));
     color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled)));
@@ -218,25 +215,16 @@ a.spectrum-ActionButton {
   block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
 
   /* adjust icon positioning to match UI kit */
-  margin-inline-start: calc(
-    var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) -
-        var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text))
-  );
-  margin-inline-end: calc(
-      var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) -
-          var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text))
-  );
+  margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
+  margin-inline-end: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
 
   color: inherit;
 }
 
 .spectrum-ActionButton-hold + .spectrum-ActionButton-icon,
 .spectrum-ActionButton-icon:only-child {
   /* Augment the margin correction for the icon only scenario */
-  margin-inline-start: calc(
-      var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) -
-          var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text))
-  );
+  margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
 }
 
 .spectrum-ActionButton-label {
@@ -276,7 +264,7 @@ a.spectrum-ActionButton {
     transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
 
     pointer-events: none;
-    content: '';
+    content: "";
   }
 
   &:focus-visible {

diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css
@@ -13,47 +13,47 @@ governing permissions and limitations under the License.
 @import "./spectrum.css";
 
 @container (--system: express) {
-  .spectrum-ActionButton {
-    --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200);
-    --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
-    --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
-    --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
-
-    --spectrum-actionbutton-border-color-default: transparent;
-    --spectrum-actionbutton-border-color-hover: transparent;
-    --spectrum-actionbutton-border-color-down: transparent;
-    --spectrum-actionbutton-border-color-focus: transparent;
-
-    --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
-    --spectrum-actionbutton-border-color-disabled: transparent;
-
-    &.spectrum-ActionButton--quiet {
-      --spectrum-actionbutton-background-color-default: transparent;
-      --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
-      --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
-      --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
-    }
-
-    &.spectrum-ActionButton--staticBlack,
-    &.spectrum-ActionButton--staticWhite {
-      --spectrum-actionbutton-border-color-default: transparent;
-      --spectrum-actionbutton-border-color-hover: transparent;
-      --spectrum-actionbutton-border-color-down: transparent;
-      --spectrum-actionbutton-border-color-focus: transparent;
-    }
-
-    &.spectrum-ActionButton--staticBlack {
-      --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200);
-      --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
-      --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
-      --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
-    }
-
-    &.spectrum-ActionButton--staticWhite {
-      --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200);
-      --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
-      --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
-      --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
-    }
-  }
+	.spectrum-ActionButton {
+		--spectrum-actionbutton-background-color-default: var(--spectrum-gray-200);
+		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
+		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
+		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
+
+		--spectrum-actionbutton-border-color-default: transparent;
+		--spectrum-actionbutton-border-color-hover: transparent;
+		--spectrum-actionbutton-border-color-down: transparent;
+		--spectrum-actionbutton-border-color-focus: transparent;
+
+		--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
+		--spectrum-actionbutton-border-color-disabled: transparent;
+
+		&.spectrum-ActionButton--quiet {
+			--spectrum-actionbutton-background-color-default: transparent;
+			--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
+			--spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
+			--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
+		}
+
+		&.spectrum-ActionButton--staticBlack,
+		&.spectrum-ActionButton--staticWhite {
+			--spectrum-actionbutton-border-color-default: transparent;
+			--spectrum-actionbutton-border-color-hover: transparent;
+			--spectrum-actionbutton-border-color-down: transparent;
+			--spectrum-actionbutton-border-color-focus: transparent;
+		}
+
+		&.spectrum-ActionButton--staticBlack {
+			--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200);
+			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
+			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
+			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
+		}
+
+		&.spectrum-ActionButton--staticWhite {
+			--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200);
+			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
+			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
+			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
+		}
+	}
 }