@axinom/mosaic-ui 0.34.0-rc.21 → 0.34.0-rc.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.34.0-rc.21",
+  "version": "0.34.0-rc.22",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.7-rc.21",
+    "@axinom/mosaic-core": "^0.4.7-rc.22",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "df13367a88d317969e5b2c3960268938fa07c41f"
+  "gitHead": "7528c5c18d3ae99249a3eca2edf18b0143c5ef0f"
 }

package/src/components/FormElements/CustomTags/CustomTags.scss

@@ -127,7 +127,10 @@
           stroke: white;
         }
 
-        background-color: $blue;
+        background-color: var(
+          --tag-plus-button-bg-color,
+          $tag-plus-button-bg-color
+        );
         position: absolute;
         right: 1px;
         top: 1px;
@@ -146,8 +149,16 @@
 
         &:enabled {
           &:hover {
-            border: 1px solid $blue;
-            box-shadow: 0 0 0 2px $blue;
+            border: 1px solid
+              var(
+                --tag-plus-button-hover-stroke-color,
+                $tag-plus-button-hover-stroke-color
+              );
+            box-shadow: 0 0 0 2px
+              var(
+                --tag-plus-button-hover-stroke-color,
+                $tag-plus-button-hover-stroke-color
+              );
 
             &.hasError {
               border: 1px solid
@@ -164,7 +175,7 @@
 
 .customTagEnter {
   opacity: 0;
-  background-color: rgba($blue, 0.25) !important;
+  background-color: var(--tag-enter-color, $tag-enter-color) !important;
 }
 
 .customTagEnterActive {

package/src/components/FormElements/Tags/Tags.scss

@@ -119,7 +119,7 @@
 
 .tagEnter {
   opacity: 0;
-  background-color: rgba($blue, 0.25) !important;
+  background-color: var(--tag-enter-color, $tag-enter-color) !important;
 }
 
 .tagEnterActive {

package/src/components/FormElements/ToggleButton/ToggleButton.scss

@@ -18,7 +18,8 @@
 
     &:hover:enabled {
       transition: box-shadow 0.15s ease-in-out 0s;
-      box-shadow: 0 0 0 2px $blue;
+      box-shadow: 0 0 0 2px
+        var(--toggle-button-stroke-color, $toggle-button-stroke-color);
     }
 
     div {
@@ -44,25 +45,35 @@
         }
       }
       &.off {
-        border-top: 1px solid $blue;
-        border-bottom: 1px solid $blue;
-        border-left: 1px solid $blue;
+        border-top: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
+        border-bottom: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
+        border-left: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
       }
       &.on {
-        border: 1px solid $blue;
+        border: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
       }
     }
 
     div.active.off {
       svg {
         .svgText {
-          fill: $blue;
+          fill: var(
+            --toggle-button-off-text-color,
+            $toggle-button-off-text-color
+          );
         }
       }
     }
 
     div.active.on {
-      background-color: $blue !important;
+      background-color: var(
+        --toggle-button-on-bg-color,
+        $toggle-button-on-bg-color
+      ) !important;
     }
 
     &:disabled {

package/src/components/InlineMenu/InlineMenu.scss

@@ -85,10 +85,16 @@ $pop-up-arrow-extrusion: -7px;
 .buttonDefault {
   background-color: transparent !important;
   svg * {
-    stroke: $blue !important;
+    stroke: var(
+      --inline-menu-button-stroke-color,
+      $inline-menu-button-stroke-color
+    ) !important;
   }
   &:hover {
-    background-color: $blue !important;
+    background-color: var(
+      --inline-menu-button-hover-bg-color,
+      $inline-menu-button-hover-bg-color
+    ) !important;
     svg * {
       stroke: white !important;
     }
@@ -98,10 +104,16 @@ $pop-up-arrow-extrusion: -7px;
 .buttonDefaultOpacity {
   background-color: rgba(white, 0.7) !important;
   svg * {
-    stroke: $blue !important;
+    stroke: var(
+      --inline-menu-button-stroke-color,
+      $inline-menu-button-stroke-color
+    ) !important;
   }
   &:hover {
-    background-color: $blue !important;
+    background-color: var(
+      --inline-menu-button-hover-bg-color,
+      $inline-menu-button-hover-bg-color
+    ) !important;
     svg * {
       stroke: white !important;
     }
@@ -109,7 +121,10 @@ $pop-up-arrow-extrusion: -7px;
 }
 
 .buttonSelected {
-  background-color: $blue !important;
+  background-color: var(
+    --inline-menu-button-selected-bg-color,
+    $inline-menu-button-selected-bg-color
+  ) !important;
   svg * {
     stroke: white !important;
   }

package/src/styles/variables.scss

@@ -183,6 +183,9 @@ $tag-border-color-2: $blue;
 $tag-icon-color: $blue;
 $tag-font-color: $dark-gray;
 $tag-background-color: $light-gray-2;
+$tag-enter-color: rgba($blue, 0.25);
+$tag-plus-button-bg-color: $blue;
+$tag-plus-button-hover-stroke-color: $blue;
 $form-error-color: $red;
 $select-arrow-color: $blue;
 $select-disabled-arrow-color: $gray;
@@ -201,6 +204,14 @@ $select-background-color: white;
 $form-indicator-color: $green;
 $radio-hover-stroke-color: $blue;
 $radio-checked-fill-color: $blue;
+$toggle-button-stroke-color: $blue;
+$toggle-button-off-text-color: $blue;
+$toggle-button-on-bg-color: $blue;
+
+/* Inline Menu */
+$inline-menu-button-stroke-color: $blue;
+$inline-menu-button-hover-bg-color: $blue;
+$inline-menu-button-selected-bg-color: $blue;
 
 /* Date Time Picker*/
 $calendar-tile-active: $blue;