diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index ca15f19c1afb..8069f52d32bd 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -6203,6 +6203,7 @@ $ui-02: if( - **Type**: `{undefined}` - **Used by**: - [carbon--theme [mixin]](#carbon--theme-mixin) + - [button [mixin]](#button-mixin) - [button-theme [mixin]](#button-theme-mixin) - [snippet [mixin]](#snippet-mixin) - [loading [mixin]](#loading-mixin) @@ -12963,7 +12964,8 @@ Button styles $interactive-03, $hover-tertiary, currentColor, - $active-tertiary + $active-tertiary, + 1px ); &:hover { @@ -12991,6 +12993,19 @@ Button styles } } + .#{$prefix}--btn--tertiary, + .#{$prefix}--btn--tertiary.#{$prefix}--btn--field, + .#{$prefix}--btn--tertiary.#{$prefix}--btn--sm { + padding-right: rem(62px); + padding-left: rem(14px); + + &:focus { + border-width: rem(3px); + padding-right: rem(60px); + padding-left: rem(12px); + } + } + .#{$prefix}--btn--ghost { @include button-theme( transparent, @@ -13043,6 +13058,7 @@ Button styles .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus { border-color: $focus; + box-shadow: inset 0 0 0 $button-outline-width $ui-02; } .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus @@ -13060,8 +13076,8 @@ Button styles } .#{$prefix}--btn--icon-only { - padding-left: rem(15px); - padding-right: rem(15px); + padding-left: rem(13px); + padding-right: rem(13px); .#{$prefix}--btn__icon { position: static; @@ -13097,14 +13113,44 @@ Button styles display: none; } + .#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary { + padding-left: rem(15px); + padding-right: rem(15px); + + &:focus { + padding-left: rem(13px); + padding-right: rem(13px); + } + } + .#{$prefix}--btn--field.#{$prefix}--btn--icon-only { + padding-left: rem(9px); + padding-right: rem(9px); + } + + .#{$prefix}--btn--field.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary { padding-left: rem(11px); padding-right: rem(11px); + + &:focus { + padding-left: rem(9px); + padding-right: rem(9px); + } } .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only { + padding-left: rem(5px); + padding-right: rem(5px); + } + + .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary { padding-left: rem(7px); padding-right: rem(7px); + + &:focus { + padding-left: rem(5px); + padding-right: rem(5px); + } } .#{$prefix}--btn--danger { @@ -13119,6 +13165,7 @@ Button styles &:hover { color: $text-04; + border: $button-border-width solid transparent; } } @@ -13165,6 +13212,7 @@ Button styles - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable) - [hover-primary-text [variable]](#hover-primary-text-variable) - [focus [variable]](#focus-variable) + - [ui-02 [variable]](#ui-02-variable) - [icon-01 [variable]](#icon-01-variable) - [disabled-02 [variable]](#disabled-02-variable) - [danger [variable]](#danger-variable) @@ -13239,7 +13287,7 @@ Button variant styles ```scss @mixin button-theme() { background-color: $bg-color; - border-width: $button-outline-width; + border-width: $border-width; border-style: solid; border-color: $border-color; color: $font-color; @@ -13250,8 +13298,7 @@ Button variant styles &:focus { border-color: $focus; - box-shadow: inset 0 0 0 $button-border-width $focus, inset 0 0 0 - ($button-border-width + $button-outline-width) $ui-02; + box-shadow: inset 0 0 0 $button-outline-width $ui-02; } &:disabled:hover, diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss index e19c2c7d91ce..8b35494ac567 100644 --- a/packages/components/src/components/button/_button.scss +++ b/packages/components/src/components/button/_button.scss @@ -84,6 +84,7 @@ $hover-tertiary, currentColor, $active-tertiary, + 1px ); &:hover { @@ -111,6 +112,19 @@ } } + .#{$prefix}--btn--tertiary, + .#{$prefix}--btn--tertiary.#{$prefix}--btn--field, + .#{$prefix}--btn--tertiary.#{$prefix}--btn--sm { + padding-right: rem(62px); + padding-left: rem(14px); + + &:focus { + border-width: rem(3px); + padding-right: rem(60px); + padding-left: rem(12px); + } + } + .#{$prefix}--btn--ghost { @include button-theme( transparent, @@ -159,16 +173,11 @@ .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger { @include tooltip--trigger('icon', 'bottom'); - - svg, - &:hover svg, - &:focus svg { - fill: currentColor; - } } .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus { border-color: $focus; + box-shadow: inset 0 0 0 $button-outline-width $ui-02; } .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus @@ -186,8 +195,8 @@ } .#{$prefix}--btn--icon-only { - padding-left: rem(15px); - padding-right: rem(15px); + padding-left: rem(13px); + padding-right: rem(13px); .#{$prefix}--btn__icon { position: static; @@ -223,20 +232,50 @@ display: none; } + .#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary { + padding-left: rem(15px); + padding-right: rem(15px); + + &:focus { + padding-left: rem(13px); + padding-right: rem(13px); + } + } + .#{$prefix}--btn--field.#{$prefix}--btn--icon-only { + padding-left: rem(9px); + padding-right: rem(9px); + } + + .#{$prefix}--btn--field.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary { padding-left: rem(11px); padding-right: rem(11px); + + &:focus { + padding-left: rem(9px); + padding-right: rem(9px); + } } .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only { + padding-left: rem(5px); + padding-right: rem(5px); + } + + .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary { padding-left: rem(7px); padding-right: rem(7px); + + &:focus { + padding-left: rem(5px); + padding-right: rem(5px); + } } .#{$prefix}--btn--danger { @include button-theme( $danger, - transparent, + $danger, $text-04, $hover-danger, currentColor, @@ -245,6 +284,7 @@ &:hover { color: $text-04; + border: $button-border-width solid transparent; } } diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss index f6badb662162..c97aea4c4cec 100644 --- a/packages/components/src/components/button/_mixins.scss +++ b/packages/components/src/components/button/_mixins.scss @@ -59,9 +59,10 @@ $hover-bg-color, $icon-color, $active-color, + $border-width: $button-border-width ) { background-color: $bg-color; - border-width: $button-outline-width; + border-width: $border-width; border-style: solid; border-color: $border-color; color: $font-color; @@ -72,9 +73,7 @@ &:focus { border-color: $focus; - box-shadow: - inset 0 0 0 $button-border-width $focus, - inset 0 0 0 ($button-border-width + $button-outline-width) $ui-02; + box-shadow: inset 0 0 0 $button-outline-width $ui-02; } &:disabled:hover, diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss index b4fd144515ab..c55d70a1db97 100644 --- a/packages/components/src/globals/scss/_theme-tokens.scss +++ b/packages/components/src/globals/scss/_theme-tokens.scss @@ -131,7 +131,7 @@ $button-padding-ghost-sm: calc(0.375rem - 3px) 12px !default; /// @type Number /// @access public /// @group button -$button-border-width: 2px !default; +$button-border-width: 3px !default; /// @type Number /// @access public @@ -141,13 +141,11 @@ $button-outline-width: 1px !default; /// @type Number /// @access public /// @group button -/// @deprecated $button-outline-offset: -5px !default; /// @type Value /// @access public /// @group button -/// @deprecated $button-outline: 1px solid $ibm-color__white-0 !default; // Accordion