diff --git a/src/tag/main.scss b/src/tag/main.scss index 2924862fa8..cba08ff9db 100644 --- a/src/tag/main.scss +++ b/src/tag/main.scss @@ -117,7 +117,7 @@ } &.#{$css-prefix}tag-level-primary { - @extend %tag-statement-fill; + @extend %tag-statement-primary; } } @@ -155,7 +155,7 @@ } &.#{$css-prefix}tag-level-primary { - @extend %tag-statement-fill; + @extend %tag-statement-closable-primary; } } @@ -213,13 +213,13 @@ @extend %tag-statement-checkable-fill; &.checked { - @extend %tag-statement-checkable-primary; + @extend %tag-statement-checkable-fill-checked; } &[disabled], &.disabled { - color: $tag-text-color-disabled; /* $tag-text-color-disabled; */ - border-color: $tag-fill-bg-color-disabled; - background-color: $tag-fill-bg-color-disabled; + color: $tag-checkable-primary-text-color-disabled; + border-color: $tag-checkable-primary-border-color-disabled; + background-color: $tag-checkable-primary-bg-color-disabled; } } diff --git a/src/tag/scss/placeholder.scss b/src/tag/scss/placeholder.scss index 02221590c2..6e11d69036 100644 --- a/src/tag/scss/placeholder.scss +++ b/src/tag/scss/placeholder.scss @@ -20,13 +20,13 @@ ); } -%tag-statement-fill { +%tag-statement-primary { @include tag-statement( $tag-fill-text-color, - $tag-fill-bg-color, + $tag-fill-border-color, $tag-fill-bg-color, $tag-fill-text-color-hover, - $tag-fill-bg-color-hover, + $tag-fill-border-color-hover, $tag-fill-bg-color-hover, $tag-fill-tail-color, $tag-fill-tail-color-hover, @@ -37,13 +37,30 @@ ); } +%tag-statement-closable-primary { + @include tag-statement( + $tag-closable-primary-text-color, + $tag-closable-primary-border-color, + $tag-closable-primary-bg-color, + $tag-closable-primary-text-color-hover, + $tag-closable-primary-border-color-hover, + $tag-closable-primary-bg-color-hover, + $tag-closable-primary-tail-color, + $tag-closable-primary-tail-color-hover, + $tag-closable-primary-tail-color-disabled, + $tag-closable-primary-text-color-disabled, + $tag-closable-primary-border-color-disabled, + $tag-closable-primary-bg-color-disabled + ); +} + %tag-statement-checkable-fill { @include tag-statement( $tag-checkable-fill-text-color, - $tag-checkable-fill-bg-color, + $tag-checkable-fill-border-color, $tag-checkable-fill-bg-color, $tag-checkable-fill-text-color-hover, - $tag-checkable-fill-bg-color-hover, + $tag-checkable-fill-border-color-hover, $tag-checkable-fill-bg-color-hover, $tag-checkable-fill-tail-color, $tag-checkable-fill-tail-color-hover, @@ -54,26 +71,13 @@ ); } -%tag-statement-primary { - @include tag-statement( - $tag-primary-text-color, - $tag-primary-bg-color, - $tag-primary-bg-color, - $tag-primary-text-color-hover, - $tag-primary-bg-color-hover, - $tag-primary-bg-color-hover, - $tag-primary-tail-color, - $tag-primary-tail-color-hover - ); -} - -%tag-statement-checkable-primary { +%tag-statement-checkable-fill-checked { @include tag-statement( $tag-checkable-primary-text-color, - $tag-checkable-primary-bg-color, + $tag-checkable-primary-border-color, $tag-checkable-primary-bg-color, $tag-checkable-primary-text-color-hover, - $tag-checkable-primary-bg-color-hover, + $tag-checkable-primary-border-color-hover, $tag-checkable-primary-bg-color-hover, $tag-checkable-primary-tail-color, $tag-checkable-primary-tail-color-hover diff --git a/src/tag/scss/variable.scss b/src/tag/scss/variable.scss index 3ec972a031..8d250bee0d 100644 --- a/src/tag/scss/variable.scss +++ b/src/tag/scss/variable.scss @@ -212,37 +212,81 @@ $tag-closable-bordered-text-color-disabled: $color-text1-1 !default; /// @namespace statement/disabled/bounding $tag-closable-bordered-bg-disabled: $color-transparent !default; +/// text +/// @namespace statement/normal/bounding +$tag-closable-primary-text-color: $color-text1-3 !default; + /// text /// @namespace statement/normal/tail -$tag-fill-tail-color: $color-text1-3 !default; +$tag-closable-primary-tail-color: $color-text1-3 !default; /// text /// @namespace statement/disabled/bounding -$tag-fill-text-color-disabled: $color-text1-1 !default; +$tag-closable-primary-text-color-disabled: $color-text1-1 !default; /// border /// @namespace statement/disabled/bounding -$tag-fill-border-color-disabled: $color-fill1-1 !default; +$tag-closable-primary-border-color-disabled: $color-fill1-1 !default; /// background /// @namespace statement/disabled/bounding -$tag-fill-bg-color-disabled: $color-fill1-1 !default; +$tag-closable-primary-bg-color-disabled: $color-fill1-1 !default; /// text /// @namespace statement/disabled/tail -$tag-fill-tail-color-disabled: $color-text1-1 !default; +$tag-closable-primary-tail-color-disabled: $color-text1-1 !default; /// text -/// @namespace statement/normal/bounding -$tag-primary-text-color: $color-white !default; +/// @namespace statement/hover/bounding +$tag-closable-primary-text-color-hover: $color-text1-4 !default; + +/// text +/// @namespace statement/hover/tail +$tag-closable-primary-tail-color-hover: $color-text1-4 !default; /// background /// @namespace statement/normal/bounding -$tag-primary-bg-color: $color-brand1-6 !default; +$tag-closable-primary-bg-color: $color-fill1-3 !default; + +/// border +/// @namespace statement/normal/bounding +$tag-closable-primary-border-color: $color-fill1-3 !default; + +/// background +/// @namespace statement/hover/bounding +$tag-closable-primary-bg-color-hover: $color-fill1-4 !default; + +/// border +/// @namespace statement/hover/bounding +$tag-closable-primary-border-color-hover: $color-fill1-4 !default; /// text /// @namespace statement/normal/tail -$tag-primary-tail-color: $color-white !default; +$tag-fill-tail-color: $color-text1-3 !default; + +/// border +/// @namespace statement/normal/bounding +$tag-fill-border-color: $color-fill1-3 !default; + +/// border +/// @namespace statement/hover/bounding +$tag-fill-border-color-hover: $color-fill1-4 !default; + +/// text +/// @namespace statement/disabled/bounding +$tag-fill-text-color-disabled: $color-text1-1 !default; + +/// border +/// @namespace statement/disabled/bounding +$tag-fill-border-color-disabled: $color-fill1-1 !default; + +/// background +/// @namespace statement/disabled/bounding +$tag-fill-bg-color-disabled: $color-fill1-1 !default; + +/// text +/// @namespace statement/disabled/tail +$tag-fill-tail-color-disabled: $color-text1-1 !default; /// text /// @namespace statement/normal/bounding @@ -268,14 +312,6 @@ $tag-fill-text-color-hover: $color-text1-4 !default; /// @namespace statement/hover/tail $tag-fill-tail-color-hover: $color-text1-4 !default; -/// text -/// @namespace statement/hover/bounding -$tag-primary-text-color-hover: $color-white !default; - -/// text -/// @namespace statement/hover/tail -$tag-primary-tail-color-hover: $color-white !default; - /// text /// @namespace statement/hover/bounding $tag-bordered-text-color-hover: $color-text1-4 !default; @@ -356,10 +392,6 @@ $tag-secondary-bg: $color-transparent !default; /// @namespace statement/hover/bounding $tag-fill-bg-color-hover: $color-fill1-4 !default; -/// background -/// @namespace statement/hover/bounding -$tag-primary-bg-color-hover: $color-brand1-9 !default; - /// background /// @namespace statement/hover/bounding $tag-bordered-bg-hover: $color-transparent !default; @@ -384,6 +416,10 @@ $tag-checkable-fill-text-color: $color-text1-3 !default; /// @namespace statement/normal/bounding $tag-checkable-fill-bg-color: $color-fill1-3 !default; +/// border +/// @namespace statement/normal/bounding +$tag-checkable-fill-border-color: $color-fill1-3 !default; + /// text /// @namespace statement/hover/bounding $tag-checkable-fill-text-color-hover: $color-text1-4 !default; @@ -392,6 +428,10 @@ $tag-checkable-fill-text-color-hover: $color-text1-4 !default; /// @namespace statement/hover/bounding $tag-checkable-fill-bg-color-hover: $color-fill1-4 !default; +/// border +/// @namespace statement/hover/bounding +$tag-checkable-fill-border-color-hover: $color-fill1-4 !default; + /// text /// @namespace statement/normal/tail $tag-checkable-fill-tail-color: $color-text1-3 !default; @@ -464,6 +504,14 @@ $tag-checkable-primary-text-color: $color-white !default; /// @namespace statement/normal/bounding $tag-checkable-primary-bg-color: $color-brand1-6 !default; +/// border +/// @namespace statement/normal/bounding +$tag-checkable-primary-border-color: $color-brand1-6 !default; + +/// text +/// @namespace statement/disabled/bounding +$tag-checkable-primary-text-color-disabled: $color-text1-1 !default; + /// text /// @namespace statement/hover/bounding $tag-checkable-primary-text-color-hover: $color-white !default; @@ -472,6 +520,18 @@ $tag-checkable-primary-text-color-hover: $color-white !default; /// @namespace statement/hover/bounding $tag-checkable-primary-bg-color-hover: $color-brand1-9 !default; +/// border +/// @namespace statement/hover/bounding +$tag-checkable-primary-border-color-hover: $color-brand1-9 !default; + +/// border +/// @namespace statement/disabled/bounding +$tag-checkable-primary-border-color-disabled: $color-fill1-1 !default; + +/// background +/// @namespace statement/disabled/bounding +$tag-checkable-primary-bg-color-disabled: $color-fill1-1 !default; + /// text /// @namespace statement/normal/tail $tag-checkable-primary-tail-color: $color-white !default; @@ -484,10 +544,6 @@ $tag-checkable-primary-tail-color-hover: $color-white !default; /// @namespace statement/selected-disabled/tick $tag-checkable-secondary-bg-selected-disabled: $color-line1-1 !default; -/// background -/// @namespace statement/disabled/bounding -$tag-primary-bg-color-disabled: $color-brand1-1 !default; - /// text /// @namespace statement/selected/tick $tag-checkable-normal-icon-color-selected: $color-white !default;