From 71c490b3a6a52beaa44f56932a89f875375d810f Mon Sep 17 00:00:00 2001 From: dcoblentz-eightfold <119535119+dcoblentz-eightfold@users.noreply.github.com> Date: Tue, 30 May 2023 10:34:46 -0400 Subject: [PATCH] feat: rename background-color to background (#628) * feat: rename background-color to background * Use background for button css so that we can have more flexible customizations * fix: remove changes * remove changes --- src/components/Button/button.module.scss | 50 +++++++++---------- .../LinkButton/linkbutton.module.scss | 48 ++++++++---------- 2 files changed, 45 insertions(+), 53 deletions(-) diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss index e6f984fbc..abf77838f 100644 --- a/src/components/Button/button.module.scss +++ b/src/components/Button/button.module.scss @@ -491,7 +491,7 @@ --button-counter-active-background-color: var(--accent-background1-color); color: var(--button-primary-text-color); - background-color: var(--button-primary-background-color); + background: var(--button-primary-background-color); border-width: var(--button-primary-border-width); border-style: var(--button-primary-border-style); border-color: var(--button-primary-border-color); @@ -512,7 +512,7 @@ &:hover:not([disabled]) { color: var(--button-primary-hover-text-color); - background-color: var(--button-primary-hover-background-color); + background: var(--button-primary-hover-background-color); border-width: var(--button-primary-hover-border-width); border-style: var(--button-primary-hover-border-style); border-color: var(--button-primary-hover-border-color); @@ -520,7 +520,7 @@ &:active:not([disabled]) { color: var(--button-primary-active-text-color); - background-color: var(--button-primary-active-background-color); + background: var(--button-primary-active-background-color); border-width: var(--button-primary-active-border-width); border-style: var(--button-primary-active-border-style); border-color: var(--button-primary-active-border-color); @@ -535,14 +535,14 @@ --button-counter-active-background-color: var(--primary-background1-color); color: var(--button-secondary-text-color); - background-color: var(--button-secondary-background-color); + background: var(--button-secondary-background-color); border-width: var(--button-secondary-border-width); border-style: var(--button-secondary-border-style); border-color: var(--button-secondary-border-color); &:hover:not([disabled]) { color: var(--button-secondary-hover-text-color); - background-color: var(--button-secondary-hover-background-color); + background: var(--button-secondary-hover-background-color); border-width: var(--button-secondary-hover-border-width); border-style: var(--button-secondary-hover-border-style); border-color: var(--button-secondary-hover-border-color); @@ -550,7 +550,7 @@ &:active:not([disabled]) { color: var(--button-secondary-active-text-color); - background-color: var(--button-secondary-active-background-color); + background: var(--button-secondary-active-background-color); border-width: var(--button-secondary-active-border-width); border-style: var(--button-secondary-active-border-style); border-color: var(--button-secondary-active-border-color); @@ -618,14 +618,14 @@ --button-counter-default-text-color: var(--disruptive-color); color: var(--button-primary-disruptive-text-color); - background-color: var(--button-primary-disruptive-background-color); + background: var(--button-primary-disruptive-background-color); border-width: var(--button-primary-disruptive-border-width); border-style: var(--button-primary-disruptive-border-style); border-color: var(--button-primary-disruptive-border-color); &:hover:not([disabled]) { color: var(--button-primary-disruptive-hover-text-color); - background-color: var(--button-primary-disruptive-hover-background-color); + background: var(--button-primary-disruptive-hover-background-color); border-width: var(--button-primary-disruptive-hover-border-width); border-style: var(--button-primary-disruptive-hover-border-style); border-color: var(--button-primary-disruptive-hover-border-color); @@ -633,7 +633,7 @@ &:active:not([disabled]) { color: var(--button-primary-disruptive-active-text-color); - background-color: var(--button-primary-disruptive-active-background-color); + background: var(--button-primary-disruptive-active-background-color); border-width: var(--button-primary-disruptive-active-border-width); border-style: var(--button-primary-disruptive-active-border-style); border-color: var(--button-primary-disruptive-active-border-color); @@ -653,14 +653,14 @@ --button-counter-default-text-color: var(--disruptive-color); color: var(--button-secondary-disruptive-text-color); - background-color: var(--button-secondary-disruptive-background-color); + background: var(--button-secondary-disruptive-background-color); border-width: var(--button-secondary-disruptive-border-width); border-style: var(--button-secondary-disruptive-border-style); border-color: var(--button-secondary-disruptive-border-color); &:hover:not([disabled]) { color: var(--button-secondary-disruptive-hover-text-color); - background-color: var(--button-secondary-disruptive-hover-background-color); + background: var(--button-secondary-disruptive-hover-background-color); border-width: var(--button-secondary-disruptive-hover-border-width); border-style: var(--button-secondary-disruptive-hover-border-style); border-color: var(--button-secondary-disruptive-hover-border-color); @@ -668,9 +668,7 @@ &:active:not([disabled]) { color: var(--button-secondary-disruptive-active-text-color); - background-color: var( - --button-secondary-disruptive-active-background-color - ); + background: var(--button-secondary-disruptive-active-background-color); border-width: var(--button-secondary-disruptive-active-border-width); border-style: var(--button-secondary-disruptive-active-border-style); border-color: var(--button-secondary-disruptive-active-border-color); @@ -685,7 +683,7 @@ --button-counter-active-background-color: var(--primary-background1-color); color: var(--button-default-text-color); - background-color: var(--button-default-background-color); + background: var(--button-default-background-color); border-width: var(--button-default-border-width); border-style: var(--button-default-border-style); border-color: var(--button-default-border-color); @@ -706,7 +704,7 @@ &:hover:not([disabled]) { color: var(--button-default-hover-text-color); - background-color: var(--button-default-hover-background-color); + background: var(--button-default-hover-background-color); border-width: var(--button-default-hover-border-width); border-style: var(--button-default-hover-border-style); border-color: var(--button-default-hover-border-color); @@ -714,7 +712,7 @@ &:active:not([disabled]) { color: var(--button-default-active-text-color); - background-color: var(--button-default-active-background-color); + background: var(--button-default-active-background-color); border-width: var(--button-default-active-border-width); border-style: var(--button-default-active-border-style); border-color: var(--button-default-active-border-color); @@ -734,14 +732,14 @@ --button-counter-default-text-color: var(--disruptive-color); color: var(--button-default-disruptive-text-color); - background-color: var(--button-default-disruptive-background-color); + background: var(--button-default-disruptive-background-color); border-width: var(--button-default-disruptive-border-width); border-style: var(--button-default-disruptive-border-style); border-color: var(--button-default-disruptive-border-color); &:hover:not([disabled]) { color: var(--button-default-disruptive-hover-text-color); - background-color: var(--button-default-disruptive-hover-background-color); + background: var(--button-default-disruptive-hover-background-color); border-width: var(--button-default-disruptive-hover-border-width); border-style: var(--button-default-disruptive-hover-border-style); border-color: var(--button-default-disruptive-hover-border-color); @@ -749,7 +747,7 @@ &:active:not([disabled]) { color: var(--button-default-disruptive-active-text-color); - background-color: var(--button-default-disruptive-active-background-color); + background: var(--button-default-disruptive-active-background-color); border-width: var(--button-default-disruptive-active-border-width); border-style: var(--button-default-disruptive-active-border-style); border-color: var(--button-default-disruptive-active-border-color); @@ -764,7 +762,7 @@ --bg: var(--button-neutral-background-color); --color: var(--button-neutral-text-color); color: var(--color); - background-color: var(--bg); + background: var(--bg); &:hover:not([disabled]) { --bg: var(--button-neutral-hover-background-color); @@ -811,7 +809,7 @@ } &:not(.transparent) { - background-color: var(--bg); + background: var(--bg); } &:not(.transparent):not([disabled]):hover { @@ -1308,7 +1306,7 @@ &.button-disruptive { &.focus-visible, &:focus-visible { - background-color: var(--disruptive-background1-color); + background: var(--disruptive-background1-color); color: var(--disruptive-color); } } @@ -1316,7 +1314,7 @@ &.button-neutral { &.focus-visible, &:focus-visible { - background-color: var(--button-neutral-focus-visible-background-color); + background: var(--button-neutral-focus-visible-background-color); &.drop-shadow { box-shadow: var(--focus-visible-box-shadow), $shadow-object-s; @@ -1327,9 +1325,7 @@ &.button-system-ui { &.focus-visible, &:focus-visible { - background-color: var( - --button-system-ui-focus-visible-background-color - ); + background: var(--button-system-ui-focus-visible-background-color); &.drop-shadow { box-shadow: var(--focus-visible-box-shadow), $shadow-object-s; diff --git a/src/components/LinkButton/linkbutton.module.scss b/src/components/LinkButton/linkbutton.module.scss index 7602fe5ec..5242610ef 100644 --- a/src/components/LinkButton/linkbutton.module.scss +++ b/src/components/LinkButton/linkbutton.module.scss @@ -440,7 +440,7 @@ --button-counter-active-background-color: var(--accent-background1-color); color: var(--button-primary-text-color); - background-color: var(--button-primary-background-color); + background: var(--button-primary-background-color); border-width: var(--button-primary-border-width); border-style: var(--button-primary-border-style); border-color: var(--button-primary-border-color); @@ -461,7 +461,7 @@ &:hover:not([disabled]) { color: var(--button-primary-hover-text-color); - background-color: var(--button-primary-hover-background-color); + background: var(--button-primary-hover-background-color); border-width: var(--button-primary-hover-border-width); border-style: var(--button-primary-hover-border-style); border-color: var(--button-primary-hover-border-color); @@ -469,7 +469,7 @@ &:active:not([disabled]) { color: var(--button-primary-active-text-color); - background-color: var(--button-primary-active-background-color); + background: var(--button-primary-active-background-color); border-width: var(--button-primary-active-border-width); border-style: var(--button-primary-active-border-style); border-color: var(--button-primary-active-border-color); @@ -484,14 +484,14 @@ --button-counter-active-background-color: var(--primary-background1-color); color: var(--button-secondary-text-color); - background-color: var(--button-secondary-background-color); + background: var(--button-secondary-background-color); border-width: var(--button-secondary-border-width); border-style: var(--button-secondary-border-style); border-color: var(--button-secondary-border-color); &:hover:not([disabled]) { color: var(--button-secondary-hover-text-color); - background-color: var(--button-secondary-hover-background-color); + background: var(--button-secondary-hover-background-color); border-width: var(--button-secondary-hover-border-width); border-style: var(--button-secondary-hover-border-style); border-color: var(--button-secondary-hover-border-color); @@ -499,7 +499,7 @@ &:active:not([disabled]) { color: var(--button-secondary-active-text-color); - background-color: var(--button-secondary-active-background-color); + background: var(--button-secondary-active-background-color); border-width: var(--button-secondary-active-border-width); border-style: var(--button-secondary-active-border-style); border-color: var(--button-secondary-active-border-color); @@ -567,14 +567,14 @@ --button-counter-default-text-color: var(--disruptive-color); color: var(--button-primary-disruptive-text-color); - background-color: var(--button-primary-disruptive-background-color); + background: var(--button-primary-disruptive-background-color); border-width: var(--button-primary-disruptive-border-width); border-style: var(--button-primary-disruptive-border-style); border-color: var(--button-primary-disruptive-border-color); &:hover:not([disabled]) { color: var(--button-primary-disruptive-hover-text-color); - background-color: var(--button-primary-disruptive-hover-background-color); + background: var(--button-primary-disruptive-hover-background-color); border-width: var(--button-primary-disruptive-hover-border-width); border-style: var(--button-primary-disruptive-hover-border-style); border-color: var(--button-primary-disruptive-hover-border-color); @@ -582,7 +582,7 @@ &:active:not([disabled]) { color: var(--button-primary-disruptive-active-text-color); - background-color: var(--button-primary-disruptive-active-background-color); + background: var(--button-primary-disruptive-active-background-color); border-width: var(--button-primary-disruptive-active-border-width); border-style: var(--button-primary-disruptive-active-border-style); border-color: var(--button-primary-disruptive-active-border-color); @@ -602,14 +602,14 @@ --button-counter-default-text-color: var(--disruptive-color); color: var(--button-secondary-disruptive-text-color); - background-color: var(--button-secondary-disruptive-background-color); + background: var(--button-secondary-disruptive-background-color); border-width: var(--button-secondary-disruptive-border-width); border-style: var(--button-secondary-disruptive-border-style); border-color: var(--button-secondary-disruptive-border-color); &:hover:not([disabled]) { color: var(--button-secondary-disruptive-hover-text-color); - background-color: var(--button-secondary-disruptive-hover-background-color); + background: var(--button-secondary-disruptive-hover-background-color); border-width: var(--button-secondary-disruptive-hover-border-width); border-style: var(--button-secondary-disruptive-hover-border-style); border-color: var(--button-secondary-disruptive-hover-border-color); @@ -617,9 +617,7 @@ &:active:not([disabled]) { color: var(--button-secondary-disruptive-active-text-color); - background-color: var( - --button-secondary-disruptive-active-background-color - ); + background: var(--button-secondary-disruptive-active-background-color); border-width: var(--button-secondary-disruptive-active-border-width); border-style: var(--button-secondary-disruptive-active-border-style); border-color: var(--button-secondary-disruptive-active-border-color); @@ -634,7 +632,7 @@ --button-counter-active-background-color: var(--primary-background1-color); color: var(--button-default-text-color); - background-color: var(--button-default-background-color); + background: var(--button-default-background-color); border-width: var(--button-default-border-width); border-style: var(--button-default-border-style); border-color: var(--button-default-border-color); @@ -655,7 +653,7 @@ &:hover:not([disabled]) { color: var(--button-default-hover-text-color); - background-color: var(--button-default-hover-background-color); + background: var(--button-default-hover-background-color); border-width: var(--button-default-hover-border-width); border-style: var(--button-default-hover-border-style); border-color: var(--button-default-hover-border-color); @@ -663,7 +661,7 @@ &:active:not([disabled]) { color: var(--button-default-active-text-color); - background-color: var(--button-default-active-background-color); + background: var(--button-default-active-background-color); border-width: var(--button-default-active-border-width); border-style: var(--button-default-active-border-style); border-color: var(--button-default-active-border-color); @@ -683,14 +681,14 @@ --button-counter-default-text-color: var(--disruptive-color); color: var(--button-default-disruptive-text-color); - background-color: var(--button-default-disruptive-background-color); + background: var(--button-default-disruptive-background-color); border-width: var(--button-default-disruptive-border-width); border-style: var(--button-default-disruptive-border-style); border-color: var(--button-default-disruptive-border-color); &:hover:not([disabled]) { color: var(--button-default-disruptive-hover-text-color); - background-color: var(--button-default-disruptive-hover-background-color); + background: var(--button-default-disruptive-hover-background-color); border-width: var(--button-default-disruptive-hover-border-width); border-style: var(--button-default-disruptive-hover-border-style); border-color: var(--button-default-disruptive-hover-border-color); @@ -698,7 +696,7 @@ &:active:not([disabled]) { color: var(--button-default-disruptive-active-text-color); - background-color: var(--button-default-disruptive-active-background-color); + background: var(--button-default-disruptive-active-background-color); border-width: var(--button-default-disruptive-active-border-width); border-style: var(--button-default-disruptive-active-border-style); border-color: var(--button-default-disruptive-active-border-color); @@ -713,7 +711,7 @@ --bg: var(--button-neutral-background-color); --color: var(--button-neutral-text-color); color: var(--color); - background-color: var(--bg); + background: var(--bg); &:hover:not([disabled]) { --bg: var(--button-neutral-hover-background-color); @@ -760,7 +758,7 @@ } &:not(.transparent) { - background-color: var(--bg); + background: var(--bg); } &:not(.transparent):not([disabled]):hover { @@ -965,7 +963,7 @@ &.link-button-neutral { &.focus-visible, &:focus-visible { - background-color: var(--button-neutral-focus-visible-background-color); + background: var(--button-neutral-focus-visible-background-color); &.drop-shadow { box-shadow: var(--focus-visible-box-shadow), $shadow-object-s; @@ -976,9 +974,7 @@ &.link-button-system-ui { &.focus-visible, &:focus-visible { - background-color: var( - --button-system-ui-focus-visible-background-color - ); + background: var(--button-system-ui-focus-visible-background-color); &.drop-shadow { box-shadow: var(--focus-visible-box-shadow), $shadow-object-s;