fix: make sure all var properties exist on one line

Re: EDS-1061
chanzuckerberg · Jul 18, 2023 · 1fecab5 · 1fecab5
1 parent 682c029
commit 1fecab5
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 235 deletions.
diff --git a/.storybook/pages/WireframeDemo/GlobalStyles.module.css b/.storybook/pages/WireframeDemo/GlobalStyles.module.css
@@ -45,9 +45,7 @@
   --eds-font-family-primary: var(--wireframe-font-family-primary);
   --eds-font-family-secondary: var(--wireframe-font-family-secondary);
   --eds-theme-color-background-brand-primary-default: var(--wireframe-white);
-  --eds-theme-color-background-brand-primary-strong-hover: var(
-    --wireframe-gray-e
-  );
+  --eds-theme-color-background-brand-primary-strong-hover: var(--wireframe-gray-e);
   --eds-theme-color-background-brand-primary-strong: var(--wireframe-gray-b);
   --eds-theme-color-background-disabled: var(--wireframe-gray-b);
   --eds-theme-color-background-grade-complete-default: var(--wireframe-gray-c);
@@ -94,9 +92,7 @@
   --eds-theme-color-border-utility-warning-strong: var(--wireframe-gray-b);
   --eds-theme-color-border-utility-warning-subtle: var(--wireframe-gray-a);
   --eds-theme-color-button-icon-brand-active: var(--wireframe-white);
-  --eds-theme-color-button-icon-brand-background-active: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-icon-brand-background-active: var(--wireframe-gray-d);
   --eds-theme-color-button-icon-brand-background-hover: var(--wireframe-gray-a);
   --eds-theme-color-button-icon-brand-background: transparent;
   --eds-theme-color-button-icon-brand-border-active: var(--wireframe-gray-d);
@@ -108,9 +104,7 @@
   --eds-theme-color-button-icon-brand-text: var(--wireframe-gray-d);
   --eds-theme-color-button-icon-brand: var(--wireframe-gray-c);
   --eds-theme-color-button-icon-error-active: var(--wireframe-white);
-  --eds-theme-color-button-icon-error-background-active: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-icon-error-background-active: var(--wireframe-gray-d);
   --eds-theme-color-button-icon-error-background-hover: var(--wireframe-gray-a);
   --eds-theme-color-button-icon-error-background: transparent;
   --eds-theme-color-button-icon-error-border-active: var(--wireframe-gray-d);
@@ -122,12 +116,8 @@
   --eds-theme-color-button-icon-error-text: var(--wireframe-gray-d);
   --eds-theme-color-button-icon-error: var(--wireframe-gray-c);
   --eds-theme-color-button-icon-neutral-active: var(--wireframe-white);
-  --eds-theme-color-button-icon-neutral-background-active: var(
-    --wireframe-gray-d
-  );
-  --eds-theme-color-button-icon-neutral-background-hover: var(
-    --wireframe-gray-a
-  );
+  --eds-theme-color-button-icon-neutral-background-active: var(--wireframe-gray-d);
+  --eds-theme-color-button-icon-neutral-background-hover: var(--wireframe-gray-a);
   --eds-theme-color-button-icon-neutral-background: transparent;
   --eds-theme-color-button-icon-neutral-border-active: var(--wireframe-gray-d);
   --eds-theme-color-button-icon-neutral-border-hover: var(--wireframe-gray-a);
@@ -138,12 +128,8 @@
   --eds-theme-color-button-icon-neutral-text: var(--wireframe-gray-d);
   --eds-theme-color-button-icon-neutral: var(--wireframe-gray-c);
   --eds-theme-color-button-icon-success-active: var(--wireframe-white);
-  --eds-theme-color-button-icon-success-background-active: var(
-    --wireframe-gray-d
-  );
-  --eds-theme-color-button-icon-success-background-hover: var(
-    --wireframe-gray-a
-  );
+  --eds-theme-color-button-icon-success-background-active: var(--wireframe-gray-d);
+  --eds-theme-color-button-icon-success-background-hover: var(--wireframe-gray-a);
   --eds-theme-color-button-icon-success-background: transparent;
   --eds-theme-color-button-icon-success-border-active: var(--wireframe-gray-d);
   --eds-theme-color-button-icon-success-border-hover: var(--wireframe-gray-a);
@@ -154,12 +140,8 @@
   --eds-theme-color-button-icon-success-text: var(--wireframe-gray-d);
   --eds-theme-color-button-icon-success: var(--wireframe-gray-c);
   --eds-theme-color-button-icon-warning-active: var(--wireframe-white);
-  --eds-theme-color-button-icon-warning-background-active: var(
-    --wireframe-gray-d
-  );
-  --eds-theme-color-button-icon-warning-background-hover: var(
-    --wireframe-gray-a
-  );
+  --eds-theme-color-button-icon-warning-background-active: var(--wireframe-gray-d);
+  --eds-theme-color-button-icon-warning-background-hover: var(--wireframe-gray-a);
   --eds-theme-color-button-icon-warning-background: transparent;
   --eds-theme-color-button-icon-warning-border-active: var(--wireframe-gray-d);
   --eds-theme-color-button-icon-warning-border-hover: var(--wireframe-gray-a);
@@ -169,142 +151,82 @@
   --eds-theme-color-button-icon-warning-text-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-icon-warning-text: var(--wireframe-gray-d);
   --eds-theme-color-button-icon-warning: var(--wireframe-gray-c);
-  --eds-theme-color-button-primary-brand-background-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-primary-brand-background-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-primary-brand-background-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-primary-brand-background-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-primary-brand-background: var(--wireframe-gray-c);
   --eds-theme-color-button-primary-brand-border-active: var(--wireframe-gray-e);
   --eds-theme-color-button-primary-brand-border-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-primary-brand-border: var(--wireframe-gray-c);
   --eds-theme-color-button-primary-brand-text-active: var(--wireframe-white);
   --eds-theme-color-button-primary-brand-text-hover: var(--wireframe-white);
   --eds-theme-color-button-primary-brand-text: var(--wireframe-white);
-  --eds-theme-color-button-primary-error-background-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-primary-error-background-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-primary-error-background-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-primary-error-background-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-primary-error-background: var(--wireframe-gray-c);
   --eds-theme-color-button-primary-error-border-active: var(--wireframe-gray-e);
   --eds-theme-color-button-primary-error-border-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-primary-error-border: var(--wireframe-gray-c);
   --eds-theme-color-button-primary-error-text-active: var(--wireframe-white);
   --eds-theme-color-button-primary-error-text-hover: var(--wireframe-white);
   --eds-theme-color-button-primary-error-text: var(--wireframe-white);
-  --eds-theme-color-button-secondary-brand-background-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-secondary-brand-background-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-secondary-brand-background-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-secondary-brand-background-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-secondary-brand-background: transparent;
-  --eds-theme-color-button-secondary-brand-border-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-secondary-brand-border-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-secondary-brand-border-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-secondary-brand-border-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-secondary-brand-border: var(--wireframe-gray-c);
   --eds-theme-color-button-secondary-brand-icon-active: var(--wireframe-white);
   --eds-theme-color-button-secondary-brand-icon-hover: var(--wireframe-white);
   --eds-theme-color-button-secondary-brand-icon: var(--wireframe-gray-c);
   --eds-theme-color-button-secondary-brand-text-active: var(--wireframe-white);
   --eds-theme-color-button-secondary-brand-text-hover: var(--wireframe-white);
   --eds-theme-color-button-secondary-brand-text: var(--wireframe-gray-c);
-  --eds-theme-color-button-secondary-error-background-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-secondary-error-background-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-secondary-error-background-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-secondary-error-background-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-secondary-error-background: transparent;
-  --eds-theme-color-button-secondary-error-border-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-secondary-error-border-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-secondary-error-border-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-secondary-error-border-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-secondary-error-border: var(--wireframe-gray-c);
   --eds-theme-color-button-secondary-error-icon-active: var(--wireframe-white);
   --eds-theme-color-button-secondary-error-icon-hover: var(--wireframe-white);
   --eds-theme-color-button-secondary-error-icon: var(--wireframe-gray-c);
   --eds-theme-color-button-secondary-error-text-active: var(--wireframe-white);
   --eds-theme-color-button-secondary-error-text-hover: var(--wireframe-white);
   --eds-theme-color-button-secondary-error-text: var(--wireframe-gray-c);
-  --eds-theme-color-button-secondary-neutral-background-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-secondary-neutral-background-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-secondary-neutral-background-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-secondary-neutral-background-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-secondary-neutral-background: transparent;
-  --eds-theme-color-button-secondary-neutral-border-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-secondary-neutral-border-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-secondary-neutral-border-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-secondary-neutral-border-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-secondary-neutral-border: var(--wireframe-gray-c);
-  --eds-theme-color-button-secondary-neutral-icon-active: var(
-    --wireframe-white
-  );
+  --eds-theme-color-button-secondary-neutral-icon-active: var(--wireframe-white);
   --eds-theme-color-button-secondary-neutral-icon-hover: var(--wireframe-white);
   --eds-theme-color-button-secondary-neutral-icon: var(--wireframe-gray-c);
-  --eds-theme-color-button-secondary-neutral-text-active: var(
-    --wireframe-white
-  );
+  --eds-theme-color-button-secondary-neutral-text-active: var(--wireframe-white);
   --eds-theme-color-button-secondary-neutral-text-hover: var(--wireframe-white);
   --eds-theme-color-button-secondary-neutral-text: var(--wireframe-gray-c);
-  --eds-theme-color-button-secondary-success-background-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-secondary-success-background-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-secondary-success-background-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-secondary-success-background-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-secondary-success-background: transparent;
-  --eds-theme-color-button-secondary-success-border-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-secondary-success-border-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-secondary-success-border-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-secondary-success-border-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-secondary-success-border: var(--wireframe-gray-c);
-  --eds-theme-color-button-secondary-success-icon-active: var(
-    --wireframe-white
-  );
+  --eds-theme-color-button-secondary-success-icon-active: var(--wireframe-white);
   --eds-theme-color-button-secondary-success-icon-hover: var(--wireframe-white);
   --eds-theme-color-button-secondary-success-icon: var(--wireframe-gray-c);
-  --eds-theme-color-button-secondary-success-text-active: var(
-    --wireframe-white
-  );
+  --eds-theme-color-button-secondary-success-text-active: var(--wireframe-white);
   --eds-theme-color-button-secondary-success-text-hover: var(--wireframe-white);
   --eds-theme-color-button-secondary-success-text: var(--wireframe-gray-c);
-  --eds-theme-color-button-secondary-warning-background-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-secondary-warning-background-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-secondary-warning-background-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-secondary-warning-background-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-secondary-warning-background: transparent;
-  --eds-theme-color-button-secondary-warning-border-active: var(
-    --wireframe-gray-e
-  );
-  --eds-theme-color-button-secondary-warning-border-hover: var(
-    --wireframe-gray-d
-  );
+  --eds-theme-color-button-secondary-warning-border-active: var(--wireframe-gray-e);
+  --eds-theme-color-button-secondary-warning-border-hover: var(--wireframe-gray-d);
   --eds-theme-color-button-secondary-warning-border: var(--wireframe-gray-c);
-  --eds-theme-color-button-secondary-warning-icon-active: var(
-    --wireframe-white
-  );
+  --eds-theme-color-button-secondary-warning-icon-active: var(--wireframe-white);
   --eds-theme-color-button-secondary-warning-icon-hover: var(--wireframe-white);
   --eds-theme-color-button-secondary-warning-icon: var(--wireframe-gray-c);
-  --eds-theme-color-button-secondary-warning-text-active: var(
-    --wireframe-white
-  );
+  --eds-theme-color-button-secondary-warning-text-active: var(--wireframe-white);
   --eds-theme-color-button-secondary-warning-text-hover: var(--wireframe-white);
   --eds-theme-color-button-secondary-warning-text: var(--wireframe-gray-c);
   --eds-theme-color-focus-ring-inverted: var(--wireframe-white);

diff --git a/README.md b/README.md
@@ -30,9 +30,7 @@ We also surface an `--eds-font-size-base` property to set your base `rem` font s
 
 ```css
 html {
-  font-size: var(
-    --eds-font-size-base
-  ); /* Resets the default pixel-to-rem ratio */
+  font-size: var(--eds-font-size-base); /* Resets the default pixel-to-rem ratio */
 }
 ```
 

diff --git a/src/components/Badge/Badge.module.css b/src/components/Badge/Badge.module.css
@@ -20,9 +20,7 @@
    * Custom property allows for easy change of downstream size handling.
    * Kind of a source of truth for badge size related properties.
    */
-  --badge-height: calc(
-    var(--eds-size-2-and-half) + 2 * var(--eds-border-width-sm)
-  );
+  --badge-height: calc(var(--eds-size-2-and-half) + 2 * var(--eds-border-width-sm));
 
   z-index: var(--eds-z-index-100);