feat(Tag): primary theme customization

- add new variables for primary types - remove unused variables
alibaba-fusion · Apr 17, 2019 · b82e7b1 · b82e7b1
1 parent 2755477
commit b82e7b1
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 52 deletions.
diff --git 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
@@ -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
@@ -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;