diff --git a/src/components/ActionButton/ActionButton.module.scss b/src/components/ActionButton/ActionButton.module.scss index cf0511c..b23bccc 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; } } @@ -170,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 ******************************/ @@ -256,33 +285,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 +319,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 +347,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/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} 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..9eee99b 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -112,49 +112,49 @@ /** 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 **/ --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