From 1fecab5789132f0f7dbe0cdaf74dec3f30444c83 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Tue, 18 Jul 2023 13:30:43 -0500 Subject: [PATCH 1/2] fix: make sure all var properties exist on one line Re: EDS-1061 --- .../WireframeDemo/GlobalStyles.module.css | 156 +++++------------- README.md | 4 +- src/components/Badge/Badge.module.css | 4 +- .../ClickableStyle/ClickableStyle.module.css | 92 +++-------- src/components/DataBar/DataBar.module.css | 5 +- .../DataBarSegment/DataBarSegment.module.css | 4 +- src/components/Menu/Menu.module.css | 4 +- .../NumberIcon/NumberIcon.module.css | 6 +- src/components/Skeleton/Skeleton.module.css | 3 +- src/components/Slider/Slider.module.css | 17 +- src/components/Tag/Tag.module.css | 4 +- src/design-tokens/mixins.css | 20 +-- 12 files changed, 84 insertions(+), 235 deletions(-) diff --git a/.storybook/pages/WireframeDemo/GlobalStyles.module.css b/.storybook/pages/WireframeDemo/GlobalStyles.module.css index a3c843212..1e62ce646 100644 --- 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,12 +151,8 @@ --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); @@ -182,12 +160,8 @@ --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); @@ -195,19 +169,11 @@ --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); @@ -215,19 +181,11 @@ --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); @@ -235,76 +193,40 @@ --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 index 4870eccd7..59dbda126 100644 --- 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 index e7f4ecee1..ef818aa44 100644 --- 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); diff --git a/src/components/ClickableStyle/ClickableStyle.module.css b/src/components/ClickableStyle/ClickableStyle.module.css index bcc61a5da..e7bdc5271 100644 --- a/src/components/ClickableStyle/ClickableStyle.module.css +++ b/src/components/ClickableStyle/ClickableStyle.module.css @@ -68,17 +68,13 @@ &:hover { border-color: var(--eds-theme-color-button-primary-brand-border-hover); - background-color: var( - --eds-theme-color-button-primary-brand-background-hover - ); + background-color: var(--eds-theme-color-button-primary-brand-background-hover); color: var(--eds-theme-color-button-primary-brand-text-hover); } &:active { border-color: var(--eds-theme-color-button-primary-brand-border-active); - background-color: var( - --eds-theme-color-button-primary-brand-background-active - ); + background-color: var(--eds-theme-color-button-primary-brand-background-active); color: var(--eds-theme-color-button-primary-brand-text-active); } } @@ -93,17 +89,13 @@ &:hover { border-color: var(--eds-theme-color-button-primary-error-border-hover); - background-color: var( - --eds-theme-color-button-primary-error-background-hover - ); + background-color: var(--eds-theme-color-button-primary-error-background-hover); color: var(--eds-theme-color-button-primary-error-text-hover); } &:active { border-color: var(--eds-theme-color-button-primary-error-border-active); - background-color: var( - --eds-theme-color-button-primary-error-background-active - ); + background-color: var(--eds-theme-color-button-primary-error-background-active); color: var(--eds-theme-color-button-primary-error-text-active); } } @@ -122,9 +114,7 @@ &:hover { border-color: var(--eds-theme-color-button-secondary-brand-border-hover); - background-color: var( - --eds-theme-color-button-secondary-brand-background-hover - ); + background-color: var(--eds-theme-color-button-secondary-brand-background-hover); color: var(--eds-theme-color-button-secondary-brand-text-hover); :where(svg) { color: var(--eds-theme-color-button-secondary-brand-icon-hover); @@ -133,9 +123,7 @@ &:active { border-color: var(--eds-theme-color-button-secondary-brand-border-active); - background-color: var( - --eds-theme-color-button-secondary-brand-background-active - ); + background-color: var(--eds-theme-color-button-secondary-brand-background-active); color: var(--eds-theme-color-button-secondary-brand-text-active); :where(svg) { color: var(--eds-theme-color-button-secondary-brand-icon-focus); @@ -157,9 +145,7 @@ &:hover { border-color: var(--eds-theme-color-button-secondary-neutral-border-hover); - background-color: var( - --eds-theme-color-button-secondary-neutral-background-hover - ); + background-color: var(--eds-theme-color-button-secondary-neutral-background-hover); color: var(--eds-theme-color-button-secondary-neutral-text-hover); :where(svg) { color: var(--eds-theme-color-button-secondary-neutral-icon-hover); @@ -168,9 +154,7 @@ &:active { border-color: var(--eds-theme-color-button-secondary-neutral-border-active); - background-color: var( - --eds-theme-color-button-secondary-neutral-background-active - ); + background-color: var(--eds-theme-color-button-secondary-neutral-background-active); color: var(--eds-theme-color-button-secondary-neutral-text-active); :where(svg) { color: var(--eds-theme-color-button-secondary-neutral-icon-active); @@ -192,9 +176,7 @@ &:hover { border-color: var(--eds-theme-color-button-secondary-success-border-hover); - background-color: var( - --eds-theme-color-button-secondary-success-background-hover - ); + background-color: var(--eds-theme-color-button-secondary-success-background-hover); color: var(--eds-theme-color-button-secondary-success-text-hover); :where(svg) { color: var(--eds-theme-color-button-secondary-success-icon-hover); @@ -203,9 +185,7 @@ &:active { border-color: var(--eds-theme-color-button-secondary-success-border-active); - background-color: var( - --eds-theme-color-button-secondary-success-background-active - ); + background-color: var(--eds-theme-color-button-secondary-success-background-active); color: var(--eds-theme-color-button-secondary-success-text-active); :where(svg) { color: var(--eds-theme-color-button-secondary-success-icon-active); @@ -227,9 +207,7 @@ &:hover { border-color: var(--eds-theme-color-button-secondary-warning-border-hover); - background-color: var( - --eds-theme-color-button-secondary-warning-background-hover - ); + background-color: var(--eds-theme-color-button-secondary-warning-background-hover); color: var(--eds-theme-color-button-secondary-warning-text-hover); :where(svg) { color: var(--eds-theme-color-button-secondary-warning-icon-hover); @@ -238,9 +216,7 @@ &:active { border-color: var(--eds-theme-color-button-secondary-warning-border-active); - background-color: var( - --eds-theme-color-button-secondary-warning-background-active - ); + background-color: var(--eds-theme-color-button-secondary-warning-background-active); color: var(--eds-theme-color-button-secondary-warning-text-active); :where(svg) { color: var(--eds-theme-color-button-secondary-warning-icon-active); @@ -262,9 +238,7 @@ &:hover { border-color: var(--eds-theme-color-button-secondary-error-border-hover); - background-color: var( - --eds-theme-color-button-secondary-error-background-hover - ); + background-color: var(--eds-theme-color-button-secondary-error-background-hover); color: var(--eds-theme-color-button-secondary-error-text-hover); :where(svg) { color: var(--eds-theme-color-button-secondary-error-icon-hover); @@ -273,9 +247,7 @@ &:active { border-color: var(--eds-theme-color-button-secondary-error-border-active); - background-color: var( - --eds-theme-color-button-secondary-error-background-active - ); + background-color: var(--eds-theme-color-button-secondary-error-background-active); color: var(--eds-theme-color-button-secondary-error-text-active); :where(svg) { color: var(--eds-theme-color-button-secondary-error-icon-active); @@ -310,9 +282,7 @@ &:active { border-color: var(--eds-theme-color-button-icon-brand-border-active); - background-color: var( - --eds-theme-color-button-icon-brand-background-active - ); + background-color: var(--eds-theme-color-button-icon-brand-background-active); color: var(--eds-theme-color-button-icon-brand-text-active); :where(svg) { color: var(--eds-theme-color-button-icon-brand-active); @@ -338,9 +308,7 @@ &:hover { border-color: var(--eds-theme-color-button-icon-neutral-border-hover); - background-color: var( - --eds-theme-color-button-icon-neutral-background-hover - ); + background-color: var(--eds-theme-color-button-icon-neutral-background-hover); color: var(--eds-theme-color-button-icon-neutral-text-hover); :where(svg) { color: var(--eds-theme-color-button-icon-neutral-hover); @@ -349,9 +317,7 @@ &:active { border-color: var(--eds-theme-color-button-icon-neutral-border-active); - background-color: var( - --eds-theme-color-button-icon-neutral-background-active - ); + background-color: var(--eds-theme-color-button-icon-neutral-background-active); color: var(--eds-theme-color-button-icon-neutral-text-active); :where(svg) { color: var(--eds-theme-color-button-icon-neutral-active); @@ -377,9 +343,7 @@ &:hover { border-color: var(--eds-theme-color-button-icon-success-border-hover); - background-color: var( - --eds-theme-color-button-icon-success-background-hover - ); + background-color: var(--eds-theme-color-button-icon-success-background-hover); color: var(--eds-theme-color-button-icon-success-text-hover); :where(svg) { color: var(--eds-theme-color-button-icon-success-hover); @@ -388,9 +352,7 @@ &:active { border-color: var(--eds-theme-color-button-icon-success-border-active); - background-color: var( - --eds-theme-color-button-icon-success-background-active - ); + background-color: var(--eds-theme-color-button-icon-success-background-active); color: var(--eds-theme-color-button-icon-success-text-active); :where(svg) { color: var(--eds-theme-color-button-icon-success-active); @@ -416,9 +378,7 @@ &:hover { border-color: var(--eds-theme-color-button-icon-warning-border-hover); - background-color: var( - --eds-theme-color-button-icon-warning-background-hover - ); + background-color: var(--eds-theme-color-button-icon-warning-background-hover); color: var(--eds-theme-color-button-icon-warning-text-hover); :where(svg) { color: var(--eds-theme-color-button-icon-warning-hover); @@ -427,9 +387,7 @@ &:active { border-color: var(--eds-theme-color-button-icon-warning-border-active); - background-color: var( - --eds-theme-color-button-icon-warning-background-active - ); + background-color: var(--eds-theme-color-button-icon-warning-background-active); color: var(--eds-theme-color-button-icon-warning-text-active); :where(svg) { color: var(--eds-theme-color-button-icon-warning-active); @@ -464,9 +422,7 @@ &:active { border-color: var(--eds-theme-color-button-icon-error-border-active); - background-color: var( - --eds-theme-color-button-icon-error-background-active - ); + background-color: var(--eds-theme-color-button-icon-error-background-active); color: var(--eds-theme-color-button-icon-error-text-active); :where(svg) { color: var(--eds-theme-color-button-icon-error-active); @@ -514,9 +470,7 @@ button:where(.clickable-style--link) { text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration); &:hover { - text-decoration-color: var( - --eds-theme-color-link-neutral-text-decoration-hover - ); + text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration-hover); } &:focus-visible { diff --git a/src/components/DataBar/DataBar.module.css b/src/components/DataBar/DataBar.module.css index 1b050871d..c6148304d 100644 --- a/src/components/DataBar/DataBar.module.css +++ b/src/components/DataBar/DataBar.module.css @@ -62,8 +62,7 @@ * Results in an empty space that visually indicates incompleteness of the relevant task. * Required due to disproportionately larger spacing given to small segments to make them visible. */ +/* prettier-ignore */ .data-bar__segment-space--incomplete { - width: calc( - 100% + 2 * var(--eds-theme-border-width) - 0.5 * var(--data-bar-height) - ); + width: calc(100% + 2 * var(--eds-theme-border-width) - 0.5 * var(--data-bar-height)); } diff --git a/src/components/DataBarSegment/DataBarSegment.module.css b/src/components/DataBarSegment/DataBarSegment.module.css index d65b9959e..af475d338 100644 --- a/src/components/DataBarSegment/DataBarSegment.module.css +++ b/src/components/DataBarSegment/DataBarSegment.module.css @@ -24,9 +24,7 @@ background-color: var(--eds-theme-color-background-brand-primary-strong); } .data-bar-segment--brand.data-bar-segment--hoverable:hover { - background-color: var( - --eds-theme-color-background-brand-primary-strong-hover - ); + background-color: var(--eds-theme-color-background-brand-primary-strong-hover); } .data-bar-segment--success { diff --git a/src/components/Menu/Menu.module.css b/src/components/Menu/Menu.module.css index ed03fba1f..f6fa22203 100644 --- a/src/components/Menu/Menu.module.css +++ b/src/components/Menu/Menu.module.css @@ -32,9 +32,7 @@ border-radius: var(--eds-border-radius-md); } .menu__plain-button:hover { - background-color: var( - --eds-theme-color-button-secondary-neutral-background-hover - ); + background-color: var(--eds-theme-color-button-secondary-neutral-background-hover); } .menu__plain-button:focus-visible { @mixin focus; diff --git a/src/components/NumberIcon/NumberIcon.module.css b/src/components/NumberIcon/NumberIcon.module.css index e436b1fc8..e886294a7 100644 --- a/src/components/NumberIcon/NumberIcon.module.css +++ b/src/components/NumberIcon/NumberIcon.module.css @@ -25,12 +25,10 @@ border-radius: var(--eds-border-radius-round); } +/* prettier-ignore */ .number-icon--incomplete { border: none; - fill: var( - --number-icon-incomplete-fill, - var(--eds-theme-color-icon-neutral-subtle) - ); + fill: var(--number-icon-incomplete-fill, var(--eds-theme-color-icon-neutral-subtle)); } /** diff --git a/src/components/Skeleton/Skeleton.module.css b/src/components/Skeleton/Skeleton.module.css index 71fee68ec..a9faddd16 100644 --- a/src/components/Skeleton/Skeleton.module.css +++ b/src/components/Skeleton/Skeleton.module.css @@ -21,8 +21,7 @@ to right, var(--eds-theme-color-background-neutral-medium) 50%, var(--eds-theme-color-background-neutral-subtle) 65%, - var(--eds-theme-color-background-neutral-medium) 80% - ); + var(--eds-theme-color-background-neutral-medium) 80%); background-size: 500% 100%; } diff --git a/src/components/Slider/Slider.module.css b/src/components/Slider/Slider.module.css index 0ea17f220..67b5893b1 100644 --- a/src/components/Slider/Slider.module.css +++ b/src/components/Slider/Slider.module.css @@ -47,8 +47,8 @@ .slider__input:disabled { --slider-track-background: linear-gradient( /* fill from left to right */ to right, - /* fill color */ var(--eds-theme-color-background-disabled) - /* percent to fill */ calc(var(--ratio) * 100%), + /* fill color */ var(--eds-theme-color-background-disabled) /* percent to fill */ + calc(var(--ratio) * 100%), /* unfilled color */ var(--eds-theme-color-background-neutral-medium) /* don't blend the colors */ 0 ); @@ -81,14 +81,12 @@ height: var(--eds-theme-size-slider-thumb); width: var(--eds-theme-size-slider-thumb); background: var(--eds-theme-color-text-neutral-default-inverse); - border: var(--eds-border-width-md) solid - var(--eds-theme-color-border-neutral-default); + border: var(--eds-border-width-md) solid var(--eds-theme-color-border-neutral-default); border-radius: var(--eds-border-radius-full); - margin-top: calc( - var(--eds-theme-size-slider-track-height) / 2 - - var(--eds-theme-size-slider-thumb) / 2 - ); /* Centers thumb on the track */ + /* Centers thumb on the track */ + /* prettier-ignore */ + margin-top: calc(var(--eds-theme-size-slider-track-height) / 2 - var(--eds-theme-size-slider-thumb) / 2); } .slider__input:not(:disabled)::-webkit-slider-thumb { cursor: grab; @@ -116,8 +114,7 @@ height: var(--eds-theme-size-slider-thumb); width: var(--eds-theme-size-slider-thumb); background: var(--eds-theme-color-text-neutral-default-inverse); - border: var(--eds-border-width-md) solid - var(--eds-theme-color-border-neutral-default); + border: var(--eds-border-width-md) solid var(--eds-theme-color-border-neutral-default); border-radius: var(--eds-border-radius-full); } .slider__input:not(:disabled)::-moz-range-thumb { diff --git a/src/components/Tag/Tag.module.css b/src/components/Tag/Tag.module.css index 688ad9f2a..788eef82f 100644 --- a/src/components/Tag/Tag.module.css +++ b/src/components/Tag/Tag.module.css @@ -81,9 +81,7 @@ :where(.tag--brand) { --tag-primary-color: var(--eds-theme-color-text-brand-default); - --tag-secondary-color: var( - --eds-theme-color-background-brand-primary-default - ); + --tag-secondary-color: var(--eds-theme-color-background-brand-primary-default); --tag-outline-color: var(--eds-theme-color-border-brand-primary-default); } diff --git a/src/design-tokens/mixins.css b/src/design-tokens/mixins.css index 5e5271a53..c7c70bdbd 100644 --- a/src/design-tokens/mixins.css +++ b/src/design-tokens/mixins.css @@ -21,9 +21,7 @@ &:hover { color: var(--eds-theme-color-link-brand-text-hover); - text-decoration-color: var( - --eds-theme-color-link-brand-text-decoration-hover - ); + text-decoration-color: var(--eds-theme-color-link-brand-text-decoration-hover); } &:focus-visible { @@ -33,9 +31,7 @@ */ outline: 1px solid transparent; color: var(--eds-theme-color-link-brand-text-focus) !important; - text-decoration-color: var( - --eds-theme-color-link-brand-text-decoration-focus - ) !important; + text-decoration-color: var(--eds-theme-color-link-brand-text-decoration-focus) !important; background-color: var(--eds-theme-color-link-brand-background-focus); } @@ -47,9 +43,7 @@ */ outline: 1px solid transparent; color: var(--eds-theme-color-link-brand-text-focus) !important; - text-decoration-color: var( - --eds-theme-color-link-brand-text-decoration-focus - ) !important; + text-decoration-color: var(--eds-theme-color-link-brand-text-decoration-focus) !important; background-color: var(--eds-theme-color-link-brand-background-focus); } } @@ -178,9 +172,7 @@ } @define-mixin messagingSuccess { - --messaging-border-color: var( - --eds-theme-color-border-utility-success-subtle - ); + --messaging-border-color: var(--eds-theme-color-border-utility-success-subtle); --messaging-icon-color: var(--eds-theme-color-icon-utility-success); background: var(--eds-theme-color-background-utility-success); @@ -188,9 +180,7 @@ } @define-mixin messagingWarning { - --messaging-border-color: var( - --eds-theme-color-border-utility-warning-subtle - ); + --messaging-border-color: var(--eds-theme-color-border-utility-warning-subtle); --messaging-icon-color: var(--eds-theme-color-icon-utility-warning); background: var(--eds-theme-color-background-utility-warning); From 35707dab510f86f87f8a2a3fff57522d62293e64 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Tue, 18 Jul 2023 17:10:02 -0500 Subject: [PATCH 2/2] chore(release): 12.4.1 --- CHANGELOG.md | 7 +++++++ package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b2c28bbb..5f9575c77 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/package.json b/package.json index 7d8824f36..0aa239206 100644 --- a/package.json +++ b/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 ", "homepage": "https://github.com/chanzuckerberg/edu-design-system",