@ukic/web-components 3.1.0 → 3.3.0

package/dist/collection/components/ic-button/ic-button.css

@@ -521,9 +521,14 @@ video {
   background-color: var(--ic-button-primary-background);
 }
 
+:host(.ic-button-variant-primary:not(.ic-button-disabled)) ::slotted(svg) {
+  color: var(--ic-button-primary-icon);
+}
+
 :host(.ic-button-variant-primary) ::slotted(a),
 :host(.ic-button-variant-icon-primary) ::slotted(a) {
   --ic-typography-color: var(--ic-button-primary-text);
+
   color: var(--ic-button-primary-text);
   background-color: var(--ic-button-primary-background) !important;
 }
@@ -542,8 +547,8 @@ video {
 :host(.ic-button-variant-primary) .button:active,
 :host(.ic-button-variant-icon-primary.ic-button-loading) .button,
 :host(.ic-button-variant-icon-primary) .button:active {
-  color: var(--ic-button-primary-text);
   background-color: var(--ic-button-primary-background-pressed);
+
   --button-loading-inner-color: var(--ic-button-primary-text);
   --button-loading-outer-color: var(--ic-button-primary-background-pressed);
 }
@@ -562,7 +567,9 @@ video {
 :host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),
 :host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a) {
   background: var(--ic-button-primary-background-disabled) !important;
+
   --ic-typography-color: var(--ic-button-primary-text-disabled) !important;
+
   color: var(--ic-button-primary-text-disabled) !important;
 }
 
@@ -596,6 +603,7 @@ video {
 :host(.ic-button-variant-icon-primary.ic-button-loading.monochrome) .button,
 :host(.ic-button-variant-icon-primary.monochrome) .button:active {
   background-color: var(--ic-button-primary-background-pressed-monochrome);
+
   --button-loading-inner-color: var(--ic-button-primary-text-monochrome);
   --button-loading-outer-color: var(--ic-button-primary-background-monochrome);
 }
@@ -633,6 +641,7 @@ video {
 :host(.ic-button-variant-icon-secondary) ::slotted(a) {
   border: var(--ic-border-width) solid var(--ic-button-secondary-border) !important;
   color: var(--ic-button-secondary-text) !important;
+
   --ic-typography-color: var(--ic-button-secondary-text) !important;
 }
 
@@ -672,6 +681,7 @@ video {
     var(--ic-button-secondary-background-pressed-active)
   ) !important;
   color: var(--ic-button-secondary-text-pressed-active);
+
   --button-loading-inner-color: var(--ic-button-secondary-border-pressed);
   --button-loading-outer-color: var(
     --ic-button-secondary-background-pressed-active
@@ -694,53 +704,36 @@ video {
 
 :host(.ic-button-variant-secondary.background) .button,
 :host(.ic-button-variant-icon-secondary.background) .button {
-  background-color: var(--ic-button-secondary-background-non-transparent);
+  background-color: var(--ic-button-secondary-background);
 }
 
 :host(.ic-button-variant-secondary.background) ::slotted(a),
 :host(.ic-button-variant-icon-secondary.background) ::slotted(a) {
-  background-color: var(
-    --ic-button-secondary-background-non-transparent
-  ) !important;
-}
-
-:host(.ic-button-variant-secondary.background.ic-button-disabled) .button,
-:host(.ic-button-variant-icon-secondary.background.ic-button-disabled) .button {
-  background-color: var(
-    --ic-button-secondary-background-non-transparent-disabled
-  );
-}
-
-:host(.ic-button-variant-secondary.background.ic-button-disabled) ::slotted(a),
-:host(.ic-button-variant-icon-secondary.background.ic-button-disabled)
-  ::slotted(a) {
-  background-color: var(
-    --ic-button-secondary-background-non-transparent-disabled
-  ) !important;
+  background-color: var(--ic-button-secondary-background) !important;
 }
 
 :host(.ic-button-variant-secondary.background) .button:hover,
 :host(.ic-button-variant-icon-secondary.background) .button:hover {
-  background-color: var(--ic-button-secondary-background-non-transparent-hover);
+  background-image: var(--ic-button-secondary-background-non-transparent-hover);
 }
 
 :host(.ic-button-variant-secondary.background) ::slotted(a:hover),
 :host(.ic-button-variant-icon-secondary.background) ::slotted(a:hover) {
-  background-color: var(
+  background-image: var(
     --ic-button-secondary-background-non-transparent-hover
   ) !important;
 }
 
 :host(.ic-button-variant-secondary.background) .button:active,
 :host(.ic-button-variant-icon-secondary.background) .button:active {
-  background-color: var(
+  background-image: var(
     --ic-button-secondary-background-non-transparent-active
   );
 }
 
 :host(.ic-button-variant-secondary.background) ::slotted(a:active),
 :host(.ic-button-variant-icon-secondary.background) ::slotted(a:active) {
-  background-color: var(
+  background-image: var(
     --ic-button-secondary-background-non-transparent-active
   ) !important;
 }
@@ -795,6 +788,7 @@ video {
   ) !important;
   border-color: var(--ic-button-secondary-border-pressed-monochrome);
   color: var(--ic-button-secondary-text-pressed-monochrome);
+
   --button-loading-inner-color: var(
     --ic-button-secondary-text-pressed-monochrome
   );
@@ -820,41 +814,17 @@ video {
 
 :host(.ic-button-variant-secondary.background.monochrome) .button,
 :host(.ic-button-variant-icon-secondary.background.monochrome) .button {
-  background-color: var(
-    --ic-button-secondary-background-non-transparent-monochrome
-  );
-  color: var(--ic-button-primary-text);
+  background-color: var(--ic-button-secondary-background-monochrome);
 }
 
 :host(.ic-button-variant-secondary.background.monochrome) ::slotted(a),
 :host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a) {
-  background-color: var(
-    --ic-button-secondary-background-non-transparent-monochrome
-  ) !important;
-}
-
-:host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled)
-  .button,
-:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled)
-  .button {
-  background-color: var(
-    --ic-button-secondary-background-non-transparent-monochrome-disabled
-  );
-  color: var(--ic-button-secondary-text-disabled-monochrome);
-}
-
-:host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled)
-  ::slotted(a),
-:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled)
-  ::slotted(a) {
-  background-color: var(
-    --ic-button-secondary-background-non-transparent-monochrome-disabled
-  ) !important;
+  background-color: var(--ic-button-secondary-background-monochrome) !important;
 }
 
 :host(.ic-button-variant-secondary.background.monochrome) .button:hover,
 :host(.ic-button-variant-icon-secondary.background.monochrome) .button:hover {
-  background-color: var(
+  background-image: var(
     --ic-button-secondary-background-non-transparent-monochrome-hover
   );
 }
@@ -862,14 +832,14 @@ video {
 :host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:hover),
 :host(.ic-button-variant-icon-secondary.background.monochrome)
   ::slotted(a:hover) {
-  background-color: var(
+  background-image: var(
     --ic-button-secondary-background-non-transparent-monochrome-hover
   ) !important;
 }
 
 :host(.ic-button-variant-secondary.background.monochrome) .button:active,
 :host(.ic-button-variant-icon-secondary.background.monochrome) .button:active {
-  background-color: var(
+  background-image: var(
     --ic-button-secondary-background-non-transparent-monochrome-active
   );
 }
@@ -877,7 +847,7 @@ video {
 :host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:active),
 :host(.ic-button-variant-icon-secondary.background.monochrome)
   ::slotted(a:active) {
-  background-color: var(
+  background-image: var(
     --ic-button-secondary-background-non-transparent-monochrome-active
   ) !important;
 }
@@ -889,6 +859,7 @@ video {
 :host(.ic-button-variant-tertiary) ::slotted(a),
 :host(.ic-button-variant-icon-tertiary) ::slotted(a) {
   color: var(--ic-button-tertiary-text-active);
+
   --ic-typography-color: var(--ic-button-tertiary-text-active);
 }
 
@@ -911,6 +882,7 @@ video {
 :host(.ic-button-variant-icon-tertiary.ic-button-loading) .button {
   background-color: var(--ic-button-tertiary-background-pressed-active);
   color: var(--ic-button-tertiary-text-pressed-active);
+
   --button-loading-inner-color: var(--ic-button-tertiary-text-pressed-active);
   --button-loading-outer-color: var(--ic-button-tertiary-background-pressed);
 }
@@ -933,6 +905,42 @@ video {
   background: none !important;
 }
 
+/* Tertiary - non-transparent background */
+
+:host(.ic-button-variant-tertiary.background) .button,
+:host(.ic-button-variant-icon-tertiary.background) .button {
+  background-color: var(--ic-button-tertiary-background);
+}
+
+:host(.ic-button-variant-tertiary.background) ::slotted(a),
+:host(.ic-button-variant-icon-tertiary.background) ::slotted(a) {
+  background-color: var(--ic-button-tertiary-background) !important;
+}
+
+:host(.ic-button-variant-tertiary.background) .button:hover,
+:host(.ic-button-variant-icon-tertiary.background) .button:hover {
+  background-image: var(--ic-button-tertiary-background-non-transparent-hover);
+}
+
+:host(.ic-button-variant-tertiary.background) ::slotted(a:hover),
+:host(.ic-button-variant-icon-tertiary.background) ::slotted(a:hover) {
+  background-image: var(
+    --ic-button-tertiary-background-non-transparent-hover
+  ) !important;
+}
+
+:host(.ic-button-variant-tertiary.background) .button:active,
+:host(.ic-button-variant-icon-tertiary.background) .button:active {
+  background-image: var(--ic-button-tertiary-background-non-transparent-active);
+}
+
+:host(.ic-button-variant-tertiary.background) ::slotted(a:active),
+:host(.ic-button-variant-icon-tertiary.background) ::slotted(a:active) {
+  background-image: var(
+    --ic-button-tertiary-background-non-transparent-active
+  ) !important;
+}
+
 /* Tertiary - monochrome */
 
 :host(.ic-button-variant-tertiary.monochrome) .button,
@@ -940,6 +948,7 @@ video {
 :host(.ic-button-variant-icon-tertiary.monochrome) .button,
 :host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a) {
   color: var(--ic-button-tertiary-text-monochrome);
+
   --ic-typography-color: var(--ic-button-tertiary-text-monochrome);
 }
 
@@ -962,6 +971,7 @@ video {
 :host(.ic-button-variant-icon-tertiary.ic-button-loading.monochrome) .button {
   background-color: var(--ic-button-tertiary-background-pressed-monochrome);
   color: var(--ic-button-tertiary-text-pressed-monochrome);
+
   --button-loading-inner-color: var(
     --ic-button-tertiary-text-pressed-monochrome
   );
@@ -989,6 +999,48 @@ video {
   background: none !important;
 }
 
+/* Tertiary - non-transparent background - monochrome */
+
+:host(.ic-button-variant-tertiary.background.monochrome) .button,
+:host(.ic-button-variant-icon-tertiary.background.monochrome) .button {
+  background-color: var(--ic-button-tertiary-background-monochrome);
+}
+
+:host(.ic-button-variant-tertiary.background.monochrome) ::slotted(a),
+:host(.ic-button-variant-icon-tertiary.background.monochrome) ::slotted(a) {
+  background-color: var(--ic-button-tertiary-background-monochrome) !important;
+}
+
+:host(.ic-button-variant-tertiary.background.monochrome) .button:hover,
+:host(.ic-button-variant-icon-tertiary.background.monochrome) .button:hover {
+  background-image: var(
+    --ic-button-tertiary-background-non-transparent-monochrome-hover
+  );
+}
+
+:host(.ic-button-variant-tertiary.background.monochrome) ::slotted(a:hover),
+:host(.ic-button-variant-icon-tertiary.background.monochrome)
+  ::slotted(a:hover) {
+  background-image: var(
+    --ic-button-tertiary-background-non-transparent-monochrome-hover
+  ) !important;
+}
+
+:host(.ic-button-variant-tertiary.background.monochrome) .button:active,
+:host(.ic-button-variant-icon-tertiary.background.monochrome) .button:active {
+  background-image: var(
+    --ic-button-tertiary-background-non-transparent-monochrome-active
+  );
+}
+
+:host(.ic-button-variant-tertiary.background.monochrome) ::slotted(a:active),
+:host(.ic-button-variant-icon-tertiary.background.monochrome)
+  ::slotted(a:active) {
+  background-image: var(
+    --ic-button-tertiary-background-non-transparent-monochrome-active
+  ) !important;
+}
+
 /* Destructive */
 
 :host(.ic-button-variant-destructive) .button,
@@ -1001,7 +1053,9 @@ video {
 :host(.ic-button-variant-destructive) ::slotted(a),
 :host(.ic-button-variant-icon-destructive) ::slotted(a) {
   color: var(--ic-button-destructive-text) !important;
+
   --ic-typography-color: var(--ic-button-destructive-text) !important;
+
   background-color: var(--ic-button-destructive-background) !important;
   text-transform: uppercase !important;
 }
@@ -1021,6 +1075,7 @@ video {
 :host(.ic-button-variant-icon-destructive.ic-button-loading) .button {
   color: var(--ic-button-primary-text);
   background-color: var(--ic-button-destructive-background-pressed);
+
   --button-loading-inner-color: var(--ic-button-primary-text);
   --button-loading-outer-color: var(--ic-button-destructive-background-pressed);
 }
@@ -1103,6 +1158,13 @@ video {
 :host(.ic-button-variant-icon-primary) ::slotted(a) {
   min-width: 0;
   gap: var(--ic-space-xs);
+  color: var(--ic-button-primary-icon);
+}
+
+:host(.ic-button-variant-icon-primary.monochrome) .button,
+:host(.ic-button-variant-primary.monochrome:not(.ic-button-disabled))
+  ::slotted(svg) {
+  color: var(--ic-button-primary-icon-monochrome);
 }
 
 :host(.ic-button-variant-icon-primary) .icon-container {
@@ -1376,11 +1438,6 @@ div.right-icon {
   gap: var(--ic-space-xs);
 }
 
-:host(.ic-button-variant-icon) .icon-container {
-  width: var(--ic-space-lg) !important;
-  height: var(--ic-space-lg) !important;
-}
-
 :host(.button-variant-icon) .button,
 :host(.button-variant-icon) ::slotted(a) {
   color: var(--button-default);
@@ -1452,12 +1509,14 @@ div.right-icon {
 :host(.clear-button) .button:not(:active):focus ::slotted(svg) {
   background-color: var(--ic-atoms-input-clear-button-focus-inner);
   color: var(--ic-button-primary-text);
+
   /* border: var(--ic-atoms-input-clear-button-focus-outer); */
 }
 
 :host(.menu-close-button) ::slotted(svg) {
   --icon-height: 0.875rem;
   --icon-width: 0.875rem;
+
   color: var(--ic-top-navigation-icon-active);
 }
 
@@ -1565,6 +1624,7 @@ slot[name="router-item"]::slotted(a) {
   ::slotted(a) {
     border: 0.125rem solid transparent !important;
   }
+
   .search-submit-button ::slotted(a),
   .ic-button-variant-icon ::slotted(a),
   .clear-button ::slotted(a),
@@ -1584,6 +1644,10 @@ slot[name="router-item"]::slotted(a) {
     color: white !important;
     background-color: inherit;
   }
+
+  :host(.ic-button-variant-primary:not(.ic-button-disabled)) ::slotted(svg) {
+    color: currentcolor !important;
+  }
 }
 
 /** Pagination **/