From 954caa03b0f0cd3ad3a35499d48ba3e067d903f0 Mon Sep 17 00:00:00 2001 From: katetaylormoz Date: Mon, 29 Jul 2024 15:08:35 -0400 Subject: [PATCH 1/4] Updating colors - alt to pos for clearer usage --- .../ActionButton/ActionButton.module.scss | 46 +++++++++---------- src/styles/core/variables.scss | 38 ++++++++------- src/styles/theme.scss | 28 +++++------ 3 files changed, 55 insertions(+), 57 deletions(-) diff --git a/src/components/ActionButton/ActionButton.module.scss b/src/components/ActionButton/ActionButton.module.scss index cf0511c..db18888 100644 --- a/src/components/ActionButton/ActionButton.module.scss +++ b/src/components/ActionButton/ActionButton.module.scss @@ -256,33 +256,33 @@ } /****************************** - ALT BUTTONS + POS BUTTONS ******************************/ /*------------------------------- SOLID BUTTON -------------------------------*/ -.button_alt_solid { +.button_pos_solid { @include rect_button_base(); - background-color: $color-interaction-alt; - border: solid $button-border-stroke $color-interaction-alt; - color: $color-interaction-alt-alt; + background-color: $color-interaction-pos; + border: solid $button-border-stroke $color-interaction-pos; + color: $color-interaction-pos-alt; &:hover { - background-color: $color-interaction-alt-hover; - border: solid $button-border-stroke $color-interaction-alt-hover; + background-color: $color-interaction-pos-hover; + border: solid $button-border-stroke $color-interaction-pos-hover; } &_active, &:focus { - border: solid $button-border-stroke $color-interaction-alt-active; - background-color: $color-interaction-alt-active; + border: solid $button-border-stroke $color-interaction-pos-active; + background-color: $color-interaction-pos-active; } &:disabled, &[disabled] { - background-color: $color-interaction-alt-disabled; - border: solid $button-border-stroke $color-interaction-alt-disabled; + background-color: $color-interaction-pos-disabled; + border: solid $button-border-stroke $color-interaction-pos; color: $color-text-disabled; } } @@ -290,27 +290,27 @@ /*------------------------------- OUTLINE BUTTON -------------------------------*/ -.button_alt_outline { +.button_pos_outline { @include rect_button_base(); background-color: transparent; - border: solid $button-border-stroke $color-interaction-alt; - color: $color-interaction-alt; + border: solid $button-border-stroke $color-interaction-pos; + color: $color-interaction-pos; &:hover { - border: solid $button-border-stroke $color-interaction-alt-hover; - color: $color-interaction-alt-hover; + border: solid $button-border-stroke $color-interaction-pos-hover; + color: $color-interaction-pos-hover; } &_active, &:focus { - border: solid $button-border-stroke $color-interaction-alt-active; - color: $color-interaction-alt-hover; + border: solid $button-border-stroke $color-interaction-pos-active; + color: $color-interaction-pos-hover; } &:disabled, &[disabled] { background-color: transparent; - border: solid $button-border-stroke $color-interaction-alt-disabled; + border: solid $button-border-stroke $color-interaction-pos; color: $color-text-disabled; } } @@ -318,20 +318,20 @@ /*------------------------------- CLEAR BUTTON -------------------------------*/ -.button_alt_clear { +.button_pos_clear { @include rect_button_base(); background-color: transparent; border: solid $button-border-stroke transparent; - color: $color-interaction-alt; + color: $color-interaction-pos; box-shadow: none; &:hover { - color: $color-interaction-alt-hover; + color: $color-interaction-pos-hover; } &_active, &:focus { - color: $color-interaction-alt-hover; + color: $color-interaction-pos-hover; } &:disabled, diff --git a/src/styles/core/variables.scss b/src/styles/core/variables.scss index ecd6e6c..0bc87d9 100644 --- a/src/styles/core/variables.scss +++ b/src/styles/core/variables.scss @@ -50,28 +50,26 @@ $color-interaction-secondary-alt-disabled: var( ); /** - DELETE INTERACTION - **/ -$color-interaction-delete: var(--color-interaction-delete); -$color-interaction-delete-hover: var(--color-interaction-delete-hover); -$color-interaction-delete-active: var(--color-interaction-delete-active); -$color-interaction-delete-disabled: var(--color-interaction-delete-disabled); -$color-interaction-delete-alt-disabled: var( - --color-interaction-delete-alt-disabled -); -$color-interaction-delete-alt: var(--color-interaction-delete-alt); +DELETE INTERACTION +**/ +$color-interaction-delete: var(--color-semantic-critical); +$color-interaction-delete-alt: var(--color-semantic-critical-bg-alt); +$color-interaction-delete-hover: var(--color-semantic-critical-hover); +$color-interaction-delete-active: var(--color-semantic-critical-active); +$color-interaction-delete-disabled: var(--color-semantic-critical-disabled); +$color-interaction-delete-alt-disabled: var(--color-semantic-critical-disabled); /** - ALT INTERACTION - **/ -$color-interaction-alt: var(--color-interaction-alt); -$color-interaction-alt-hover: var(--color-interaction-alt-hover); -$color-interaction-alt-active: var(--color-interaction-alt-active); -$color-interaction-alt-disabled: var(--color-interaction-alt-disabled); -$color-interaction-alt-alt: var(--color-interaction-alt-alt); -$color-interaction-alt-alt-hover: var(--color-interaction-alt-alt-hover); -$color-interaction-alt-alt-active: var(--color-interaction-alt-alt-active); -$color-interaction-alt-alt-disabled: var(--color-interaction-alt-alt-disabled); +ALT INTERACTION +**/ +$color-interaction-pos: var(--color-semantic-success); +$color-interaction-pos-hover: var(--color-semantic-success-hover); +$color-interaction-pos-active: var(--color-semantic-success-active); +$color-interaction-pos-disabled: var(--color-semantic-success-disabled); +$color-interaction-pos-alt: var(--color-semantic-success); +$color-interaction-pos-alt-hover: var(--color-semantic-success-hover); +$color-interaction-pos-alt-active: var(--color-semantic-success-disabled); +$color-interaction-pos-alt-disabled: var(--color-semantic-success-disabled); /** SEMANTIC diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 0e825e6..3985fe1 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -112,24 +112,24 @@ /** DELETE INTERACTION **/ - --color-interaction-delete: #e32727; - --color-interaction-delete-alt: #ffffff; - --color-interaction-delete-hover: #db4d4d; - --color-interaction-delete-active: #db4d4d; - --color-interaction-delete-disabled: #666; - --color-interaction-delete-alt-disabled: #777; + --color-interaction-delete: var(--color-semantic-critical); + --color-interaction-delete-alt: var(--color-semantic-critical-bg-alt); + --color-interaction-delete-hover: var(--color-semantic-critical-hover); + --color-interaction-delete-active: var(--color-semantic-critical-active); + --color-interaction-delete-disabled: var(--color-semantic-critical-disabled); + --color-interaction-delete-alt-disabled: var(--color-semantic-critical-disabled); /** ALT INTERACTION **/ - --color-interaction-alt: #027640; - --color-interaction-alt-hover: #055133; - --color-interaction-alt-active: #06964e; - --color-interaction-alt-disabled: rgba(176, 176, 176, 0.5); - --color-interaction-alt-alt: #ffffff; - --color-interaction-alt-alt-hover: #e8effd; - --color-interaction-alt-alt-active: #cbd8f0; - --color-interaction-alt-alt-disabled: #e7e7e7; + --color-interaction-pos: var(--color-semantic-success); + --color-interaction-pos-hover: var(--color-semantic-success-hover); + --color-interaction-pos-active: var(--color-semantic-success-active); + --color-interaction-pos-disabled: var(--color-semantic-success-disabled); + --color-interaction-pos-alt: var(--color-semantic-success); + --color-interaction-pos-alt-hover: var(--color-semantic-success-hover); + --color-interaction-pos-alt-active: var(--color-semantic-success-disabled); + --color-interaction-pos-alt-disabled: var(--color-semantic-success-disabled); /** SEMANTIC From c750b9ab240e9e835411f86ed1bfb439130a5441 Mon Sep 17 00:00:00 2001 From: katetaylormoz Date: Mon, 29 Jul 2024 15:16:30 -0400 Subject: [PATCH 2/4] Fixing storybook's positive button view --- src/components/ActionButton/ActionButton.module.scss | 12 ++++++++---- src/components/ActionButton/ActionButton.tsx | 4 ++-- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/ActionButton/ActionButton.module.scss b/src/components/ActionButton/ActionButton.module.scss index db18888..9532521 100644 --- a/src/components/ActionButton/ActionButton.module.scss +++ b/src/components/ActionButton/ActionButton.module.scss @@ -122,16 +122,19 @@ background-color: $color-interaction-secondary; border: solid $button-border-stroke $color-interaction-secondary; color: $color-interaction-primary; + box-shadow: 0; &:hover { background-color: $color-interaction-secondary-hover; border: solid $button-border-stroke $color-interaction-secondary-hover; + box-shadow: 0; } &_active, &:focus { border: solid $button-border-stroke $color-interaction-secondary-active; background-color: $color-interaction-secondary-active; + box-shadow: 0; } &:disabled, @@ -139,6 +142,7 @@ background-color: $color-interaction-secondary-disabled; border: solid $button-border-stroke $color-interaction-secondary-disabled; color: $color-text-disabled; + box-shadow: 0; } } @@ -148,17 +152,17 @@ .button_secondary_outline { @include rect_button_base(); background-color: transparent; - border: solid $button-border-stroke $color-interaction-secondary; - color: $color-interaction-secondary; + border: solid $button-border-stroke $color-interaction-primary; + color: $color-interaction-primary; &:hover { - border: solid $button-border-stroke $color-interaction-secondary-hover; + border: solid $button-border-stroke $color-interaction-primary-hover; color: $color-interaction-secondary-hover; } &_active, &:focus { - border: solid $button-border-stroke $color-interaction-secondary-active; + border: solid $button-border-stroke $color-interaction-primary-active; color: $color-interaction-secondary-hover; } diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx index 0c9aa86..40d3915 100644 --- a/src/components/ActionButton/ActionButton.tsx +++ b/src/components/ActionButton/ActionButton.tsx @@ -17,7 +17,7 @@ export type ButtonCategoriesT = | 'secondary_clear' export type ButtonVariantT = 'solid' | 'outline' | 'clear' -export type ButtonColorT = 'primary' | 'secondary' | 'delete' | 'alt' +export type ButtonColorT = 'primary' | 'secondary' | 'delete' | 'pos' export type ButtonSizesT = 'small' | 'medium' | 'large' export type LinkComponentT = React.ComponentType<{ @@ -127,7 +127,7 @@ const ActionButton = ({ * Configure CSS Class */ const buttonStyle = ` - ${styles['button_' + color + '_' + variant]} + ${styles['button_' + color + '_' + variant]} ${styles[size]} ${!text && styles[size + '_round']} ${className} From 8a316520939b3f659990529f51668f988e926e8b Mon Sep 17 00:00:00 2001 From: katetaylormoz Date: Mon, 29 Jul 2024 15:29:46 -0400 Subject: [PATCH 3/4] Color application --- .../ActionButton/ActionButton.module.scss | 33 ++++++++++++++++--- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/src/components/ActionButton/ActionButton.module.scss b/src/components/ActionButton/ActionButton.module.scss index 9532521..b23bccc 100644 --- a/src/components/ActionButton/ActionButton.module.scss +++ b/src/components/ActionButton/ActionButton.module.scss @@ -152,17 +152,17 @@ .button_secondary_outline { @include rect_button_base(); background-color: transparent; - border: solid $button-border-stroke $color-interaction-primary; - color: $color-interaction-primary; + border: solid $button-border-stroke $color-interaction-secondary; + color: $color-interaction-secondary; &:hover { - border: solid $button-border-stroke $color-interaction-primary-hover; + border: solid $button-border-stroke $color-interaction-secondary-hover; color: $color-interaction-secondary-hover; } &_active, &:focus { - border: solid $button-border-stroke $color-interaction-primary-active; + border: solid $button-border-stroke $color-interaction-secondary-active; color: $color-interaction-secondary-hover; } @@ -174,6 +174,31 @@ } } +/*------------------------------- + CLEAR BUTTON +-------------------------------*/ +.button_secondary_clear { + @include rect_button_base(); + background-color: transparent; + border: solid $button-border-stroke transparent; + color: $color-interaction-secondary; + box-shadow: none; + + &:hover { + color: $color-interaction-secondary-hover; + } + + &_active, + &:focus { + color: $color-interaction-secondary-active; + } + + &:disabled, + &[disabled] { + color: $color-text-disabled; + } +} + /****************************** DELETE BUTTONS ******************************/ From 4b4dcd4441b3ffd05353e5f71ac06775befdd981 Mon Sep 17 00:00:00 2001 From: katetaylormoz Date: Tue, 30 Jul 2024 08:58:01 -0400 Subject: [PATCH 4/4] Color updates --- src/styles/theme.scss | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 3985fe1..9eee99b 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -135,26 +135,26 @@ SEMANTIC **/ --color-semantic-info: #0073bd; - --color-semantic-info-hover: #1c84cc; - --color-semantic-info-active: #3895d8; - --color-semantic-disabled: #6f6f6f; + --color-semantic-info-hover: #0068AA; + --color-semantic-info-active: #005C97; + --color-semantic-disabled: #A6A6A6; --color-semantic-success: #0c884c; - --color-semantic-success-hover: #229a60; - --color-semantic-success-active: #39ab74; - --color-semantic-success-disabled: #767676; + --color-semantic-success-hover: #0B7A44; + --color-semantic-success-active: #0A6D3D; + --color-semantic-success-disabled: #A6A6A6; --color-semantic-warning: #e9a949; - --color-semantic-warning-hover: #b8771c; - --color-semantic-warning-active: #c78938; - --color-semantic-warning-disabled: #747474; + --color-semantic-warning-hover: #D29842; + --color-semantic-warning-active: #A37633; + --color-semantic-warning-disabled: #A6A6A6; --color-semantic-critical: #d32947; - --color-semantic-critical-hover: #de3a57; - --color-semantic-critical-active: #e84d68; - --color-semantic-critical-disabled: #6e6e6e; + --color-semantic-critical-hover: #BE2540; + --color-semantic-critical-active: #A92139; + --color-semantic-critical-disabled: #A6A6A6; --color-semantic-critical-bg-alt: #f9e1e5; --color-semantic-neutral: #b8b8b8; - --color-semantic-neutral-hover: #a8a8a8; - --color-semantic-neutral-active: #535353; - --color-semantic-neutral-inactive: #6e6e6e; + --color-semantic-neutral-hover: #A6A6A6; + --color-semantic-neutral-active: #939393; + --color-semantic-neutral-inactive: #A6A6A6; /** TEXT @@ -164,10 +164,10 @@ --color-text-reverse: #ffffff; --color-text-reverse-subtle: #e7e7e7; --color-text-disabled: #b0b0b0; - --color-text-info: #000000; - --color-text-success: #000000; - --color-text-warning: #000000; - --color-text-critical: #000000; + --color-text-info: #0073BD; + --color-text-success: #0C884C; + --color-text-warning: #E9A949; + --color-text-critical: #D32947; /** BORDER