Merge pull request #1698 from chanzuckerberg/hotfix-v12.4.0

### [12.4.1](v12.4.0...v12.4.1) (2023-07-18)


### Bug Fixes

* make sure all var properties exist on one line ([1fecab5](1fecab5))

.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);

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [12.4.1](https://github.com/chanzuckerberg/edu-design-system/compare/v12.4.0...v12.4.1) (2023-07-18)
+
+
+### Bug Fixes
+
+* make sure all var properties exist on one line ([1fecab5](https://github.com/chanzuckerberg/edu-design-system/commit/1fecab5789132f0f7dbe0cdaf74dec3f30444c83))
+
 ## [12.4.0](https://github.com/chanzuckerberg/edu-design-system/compare/v12.3.0...v12.4.0) (2023-07-06)
 
 

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 */
 }
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "12.4.0",
+  "version": "12.4.1",
   "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
   "author": "CZI <[email protected]>",
   "homepage": "https://github.com/chanzuckerberg/edu-design-system",

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);