diff --git a/src/Components/Button/Button.scss b/src/Components/Button/Button.scss index 12a9298a5..6a5d64f28 100644 --- a/src/Components/Button/Button.scss +++ b/src/Components/Button/Button.scss @@ -222,7 +222,7 @@ .cf-button-primary, .cf-button-success { - @include buttonColorModifier($c-pool, $c-pulsar, $cf-white, $cf-white); + @include buttonColorModifier($cf-turquoise, $cf-turquoise, $cf-grey-1, $cf-grey-1); } .cf-button-tertiary { @@ -237,7 +237,11 @@ .cf-button-warning, .cf-button-danger { - @include buttonColorModifier($c-ruby, $c-topaz, $cf-white, $cf-white); + @include buttonColorModifier($cf-carnation, $cf-carnation, $cf-grey-1, $cf-grey-1); + + &:focus{ + @include focus-shadow($cf-carnation) + } } .cf-button-colorless { diff --git a/src/Components/Button/Composed/DismissButton.scss b/src/Components/Button/Composed/DismissButton.scss index 6bba74b62..707c20934 100644 --- a/src/Components/Button/Composed/DismissButton.scss +++ b/src/Components/Button/Composed/DismissButton.scss @@ -27,7 +27,7 @@ button.cf-dismiss-button { display: block; width: $cf-space-xs; height: $cf-border; - background-color: $g20-white; + background-color: $cf-grey-1; border-radius: $cf-border * 1.5 * 0.5; top: 50%; left: 50%; diff --git a/src/Components/Button/Composed/LinkButton.scss b/src/Components/Button/Composed/LinkButton.scss index e24872d25..326b8cce1 100644 --- a/src/Components/Button/Composed/LinkButton.scss +++ b/src/Components/Button/Composed/LinkButton.scss @@ -12,4 +12,9 @@ a:active { &.cf-button { color: $cf-white; } + &.cf-button-success, + &.cf-button-danger, + &.cf-button-primary { + color: $cf-grey-1; + } } diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss index 990840a39..7bea2a951 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -289,7 +289,7 @@ $cf-form-lg-font: #{var(--step-1)}; ----------------------------------------------------------------------------- */ -$cf-button-default-bg: $cf-grey-25; +$cf-button-default-bg: $cf-grey-3; /* Empty State @@ -630,11 +630,11 @@ $cf-scrollbar-offset: 3px; @mixin panel-shadow { box-shadow: 0 1px 4px 1px rgba($g0-obsidian, 0.2); } -@mixin focus-shadow($color: $c-pool) { +@mixin focus-shadow($color: $cf-turquoise) { box-shadow: inset 0 0 0 $cf-border rgba($color, 0.75), 0px 0px ($cf-border * 2) $color; } -@mixin focus-glow($color: $c-pool) { +@mixin focus-glow($color: $cf-turquoise) { box-shadow: 0px 0px ($cf-border * 2) $color; }