feat(core-theming): tag element styles

CB-190

webapp/packages/core-theming/src/styles/_mixins.scss

@@ -17,6 +17,7 @@
 @import 'theme-ripple';
 @import 'ripple';
 @import 'color';
+@import 'tag';
 @import 'button';
 @import 'radio';
 @import 'tabs';

webapp/packages/core-theming/src/styles/_tag.scss

@@ -0,0 +1,27 @@
+/*
+ * cloudbeaver - Cloud Database Manager
+ * Copyright (C) 2020 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+ @mixin tag($query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  tag {
+    padding: 2px 6px;
+    border-radius: 5px;
+    display: inline-block;
+  }
+
+  // CSS rules for using primary and secondary (plus light/dark variants) as background colors.
+  @each $style in ("primary", "secondary", "positive") {
+    tag[use|mod=#{$style}] {
+      @include mdc-feature-targets($feat-color) {
+        @include mdc-theme-prop(background-color, $style);
+        @include mdc-theme-prop(color, on-#{$style});
+      }
+    }
+  }
+}

webapp/packages/core-theming/src/styles/_theme-dark.scss

@@ -16,6 +16,7 @@ $mdc-theme-background: #474551;
 $mdc-theme-error: #e94948;
 
 $color-positive: #01cca3;
+$color-on-positive: #fff;
 $color-negative: #fd1d48;
 $input-border-color: #585958;
 

webapp/packages/core-theming/src/styles/_theme-light.scss

@@ -15,6 +15,7 @@ $mdc-theme-on-surface: #6d6d6d;
 $mdc-theme-background: #dedede;
 
 $color-positive: #01cca3;
+$color-on-positive: #fff;
 $color-negative: #fd1d48;
 $input-border-color: #dedede;
 

webapp/packages/core-theming/src/styles/_variables.scss

@@ -7,8 +7,9 @@
  */
 
 $mdc-theme-extra-property-values: (
-  color-positive: $color-positive,
-  color-negative: $color-negative,
+  positive: $color-positive,
+  on-positive: $color-on-positive,
+  negative: $color-negative,
   input-border-color: $input-border-color,
 );
 

webapp/packages/core-theming/src/styles/theme-dark.module.scss

@@ -9,6 +9,7 @@
 @import 'theme-dark';
 
 @include colors;
+@include tag;
 @include ripple-core-styles;
 @include theme-ripple;
 @include theme-tabs;

webapp/packages/core-theming/src/styles/theme-light.module.scss

@@ -9,6 +9,7 @@
 @import 'theme-light';
 
 @include colors;
+@include tag;
 @include ripple-core-styles;
 @include theme-ripple;
 @include theme-tabs;

webapp/packages/core-theming/src/useStyles.ts

@@ -26,7 +26,7 @@ export type Style = BaseStyles | ThemeSelector
  * @param componentStyles styles array
  */
 export function useStyles(
-  ...componentStyles: Style[]
+  ...componentStyles: Array<Style | boolean>
 ) {
 
   // todo do you understand that we store ALL STYLES in each component that uses this hook?
@@ -38,8 +38,8 @@ export function useStyles(
   useMemo(() => {
     Promise
       .all(
-        componentStyles.map(
-          style => ((typeof style === 'object' || style instanceof Composes) ? style : style(currentThemeId))
+        componentStyles.filter(Boolean).map(
+          style => ((typeof style === 'object' || style instanceof Composes) ? style : (style as ThemeSelector)(currentThemeId))
         )
       )
       .then(styles => setLoadedStyles(flat(styles)));