@ukic/web-components 3.2.0 → 3.4.0

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

@@ -521,6 +521,10 @@ 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);
@@ -543,7 +547,6 @@ 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);
@@ -701,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;
 }
@@ -828,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
   );
 }
@@ -870,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
   );
 }
@@ -885,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;
 }
@@ -943,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,
@@ -1001,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,
@@ -1118,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 {
@@ -1431,34 +1478,27 @@ div.right-icon {
   box-shadow: none;
 }
 
-:host(.dismiss-icon) .button,
 :host(.clear-button) .button,
-:host(.dismiss-icon) ::slotted(a),
 :host(.clear-button) ::slotted(a) {
   background-color: inherit;
   color: var(--ic-atoms-input-clear-button);
 }
 
-:host(.dismiss-icon) .button:hover,
 :host(.clear-button) .button:hover,
-:host(.dismiss-icon) ::slotted(a:hover),
 :host(.clear-button) ::slotted(a:hover) {
   color: var(--ic-atoms-input-clear-button);
 }
 
-:host(.dismiss-icon),
 :host(.clear-button) {
   color: var(--ic-atoms-input-clear-button);
   margin: 0 var(--ic-space-xxs);
 }
 
-:host(.dismiss-icon) .button:focus,
 :host(.clear-button) .button:focus,
 :host(.calendar-button) .button:focus {
   box-shadow: none;
 }
 
-:host(.dismiss-icon) .button:not(:active):focus ::slotted(svg),
 :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);
@@ -1592,11 +1632,14 @@ slot[name="router-item"]::slotted(a) {
     color: white;
   }
 
-  :host(.dismiss-icon) .button:not(:active):focus ::slotted(svg),
   :host(.clear-button) .button:not(:active):focus ::slotted(svg) {
     color: white !important;
     background-color: inherit;
   }
+
+  :host(.ic-button-variant-primary:not(.ic-button-disabled)) ::slotted(svg) {
+    color: currentcolor !important;
+  }
 }
 
 /** Pagination **/