TagLabel support dark mode.

Author: kevzlou7979

src/main/java/gwt/material/design/incubator/client/dark/IncubatorDarkThemeLoader.java

@@ -22,13 +22,15 @@
 import gwt.material.design.client.theme.dark.DarkThemeLoader;
 import gwt.material.design.incubator.client.placeholder.PlaceholderDarkTheme;
 import gwt.material.design.incubator.client.progress.ProgressLineBarDarkTheme;
+import gwt.material.design.incubator.client.tag.TagLabelDarkTheme;
 import gwt.material.design.incubator.client.toggle.GroupToggleDarkTheme;
 
 public class IncubatorDarkThemeLoader extends DarkThemeLoader {
 
     public IncubatorDarkThemeLoader() {
         super(new GroupToggleDarkTheme(),
             new PlaceholderDarkTheme(),
-            new ProgressLineBarDarkTheme());
+            new ProgressLineBarDarkTheme(),
+            new TagLabelDarkTheme());
     }
 }

src/main/java/gwt/material/design/incubator/client/tag/TagClientBundle.java

@@ -28,4 +28,7 @@ public interface TagClientBundle extends ClientBundle {
 
     @Source("resources/css/tag.min.css")
     TextResource tagCss();
+
+    @Source("resources/css/tag-dark.min.css")
+    TextResource tagDarkCss();
 }

src/main/java/gwt/material/design/incubator/client/tag/TagDebugClientBundle.java

@@ -28,4 +28,7 @@ public interface TagDebugClientBundle extends ClientBundle {
 
     @Source("resources/css/tag.css")
     TextResource tagDebugCss();
+
+    @Source("resources/css/tag-dark.css")
+    TextResource tagDarkCss();
 }

src/main/java/gwt/material/design/incubator/client/tag/TagLabel.java

@@ -25,6 +25,7 @@
 import gwt.material.design.client.constants.Size;
 import gwt.material.design.client.ui.MaterialLabel;
 import gwt.material.design.incubator.client.AddinsIncubator;
+import gwt.material.design.incubator.client.dark.IncubatorDarkThemeReloader;
 
 public class TagLabel extends MaterialLabel implements HasSize {
 
@@ -46,6 +47,13 @@ public TagLabel() {
         setPosition(TagPosition.LEFT);
     }
 
+    @Override
+    protected void onLoad() {
+        super.onLoad();
+
+        IncubatorDarkThemeReloader.get().reload(TagLabelDarkTheme.class);
+    }
+
     @Override
     public void setSize(Size size) {
         getSizeMixin().setStyle(size.getCssName());

src/main/java/gwt/material/design/incubator/client/tag/TagLabelDarkTheme.java

@@ -0,0 +1,13 @@
+package gwt.material.design.incubator.client.tag;
+
+import gwt.material.design.addins.client.dark.AddinsWidgetDarkTheme;
+import gwt.material.design.incubator.client.AddinsIncubator;
+import gwt.material.design.incubator.client.progress.ProgressLineBarClientBundle;
+import gwt.material.design.incubator.client.progress.ProgressLineBarDebugClientBundle;
+
+public class TagLabelDarkTheme extends AddinsWidgetDarkTheme {
+
+    public TagLabelDarkTheme() {
+        super(AddinsIncubator.isDebug() ? TagDebugClientBundle.INSTANCE.tagDarkCss() : TagClientBundle.INSTANCE.tagDarkCss());
+    }
+}

src/main/resources/gwt/material/design/incubator/client/tag/resources/css/tag-dark.css

@@ -0,0 +1,12 @@
+.tag-label {
+    background: #2f2f2f;
+    color: #ffffff;
+}
+
+.tag-label.arrow-left:before {
+    border-color: transparent #2f2f2f transparent
+}
+
+.tag-label.arrow-right:after {
+    border-color: transparent transparent transparent #2f2f2f !important;
+}

src/main/resources/gwt/material/design/incubator/client/tag/resources/css/tag-dark.min.css

@@ -94,13 +94,20 @@
 
 .tag-label.arrow-left.medium:before {
     border-width: 16px 16px 16px 0;
-    left: -15px;
+    left: -16px;
+}
+
+.tag-label.arrow-left.medium:after {
+    top: 12px;
+    width: 6px;
+    height: 6px;
+    border-radius: 3px;
 }
 
 /** Right - Medium **/
 .tag-label.arrow-right.medium:after {
     border-width: 16px 0px 16px 16px !important;
-    right: -15px;
+    right: -16px;
 }
 
 .tag-label.arrow-right.medium:before {
@@ -111,8 +118,32 @@
 }
 
 /** Left - Large **/
-
 .tag-label.large {
     height: 40px;
     line-height: 40px;
+}
+
+.tag-label.arrow-left.large:before {
+    border-width: 20px 20px 20px 0;
+    left: -20px;
+}
+
+.tag-label.arrow-left.large:after {
+    top: 16px;
+    width: 6px;
+    height: 6px;
+    border-radius: 3px;
+}
+
+/** Right Large **/
+.tag-label.arrow-right.large:after {
+    border-width: 20px 0px 20px 20px !important;
+    right: -20px;
+}
+
+.tag-label.arrow-right.large:before {
+    top: 16px;
+    width: 6px;
+    height: 6px;
+    border-radius: 3px;
 }