@ukic/web-components 3.0.0-alpha.4 → 3.0.0-alpha.6

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

@@ -450,11 +450,6 @@ video {
   display: inline-block;
   position: relative;
 
-  --button-default: var(--ic-action-default);
-  --button-default-hover: var(--ic-action-default-hover);
-  --button-default-active: var(--ic-action-default-pressed);
-  --button-default-background-hover: var(--ic-action-default-bg-hover);
-  --button-default-background-active: var(--ic-action-default-bg-active);
   --icon-width: 100%;
   --icon-height: 100%;
 }
@@ -498,56 +493,6 @@ video {
   outline: var(--ic-hc-focus-outline);
 }
 
-:host(.ic-button-dark) .button,
-:host(.ic-button-dark) ::slotted(a) {
-  --button-default: var(--ic-color-border-neutral-black);
-  --button-default-hover: var(--ic-action-dark-hover);
-  --button-default-active: var(--ic-action-dark-pressed);
-  --button-default-background-hover: var(--ic-action-dark-bg-hover);
-  --button-default-background-active: var(--ic-action-dark-bg-pressed);
-}
-
-:host(.ic-button-light) .button,
-:host(.ic-button-light) ::slotted(a) {
-  --button-default: var(--ic-color-border-neutral-white);
-  --button-default-hover: var(--ic-action-light-hover);
-  --button-default-active: var(--ic-action-light-pressed);
-  --button-default-background-hover: var(--ic-action-light-bg-hover);
-  --button-default-background-active: var(--ic-action-light-bg-pressed);
-}
-
-:host(.white-background) .button,
-:host(.white-background) ::slotted(a) {
-  --button-default-background-hover: var(--ic-action-default-bg-hover-no-alpha);
-  --button-default-background-active: var(
-    --ic-action-default-bg-active-no-alpha
-  );
-
-  background-color: var(--ic-architectural-white);
-}
-
-:host(.white-background.ic-button-dark) .button,
-:host(.white-background.ic-button-dark) ::slotted(a) {
-  --button-default-background-hover: var(--ic-action-dark-bg-hover-no-alpha);
-  --button-default-background-active: var(--ic-action-dark-bg-active-no-alpha);
-}
-
-:host(.ic-button-variant-primary.ic-button-light) .button,
-:host(.ic-button-variant-primary.ic-button-light) ::slotted(a) {
-  color: var(--ic-color-text-primary-light);
-
-  --button-default-hover: var(--ic-action-light-hover);
-  --button-default-active: var(--ic-action-light-pressed);
-}
-
-:host(.ic-button-variant-primary.ic-button-dark) .button,
-:host(.ic-button-variant-primary.ic-button-dark) ::slotted(a) {
-  color: var(--ic-color-text-primary-dark);
-
-  --button-default-hover: var(--ic-action-dark-hover);
-  --button-default-active: var(--ic-action-dark-pressed);
-}
-
 :host(.ic-button-disabled),
 :host(.ic-button-disabled) .button,
 :host(.ic-button-disabled) ::slotted(a),
@@ -571,136 +516,544 @@ video {
 /* Primary */
 
 :host(.ic-button-variant-primary) .button,
-:host(.ic-button-variant-primary) ::slotted(a) {
-  color: var(--ic-color-white-text);
-  background-color: var(--button-default);
+:host(.ic-button-variant-icon-primary) .button {
+  color: var(--ic-button-primary-text);
+  background-color: var(--ic-button-primary-background);
+}
+
+:host(.ic-button-variant-primary) ::slotted(a),
+:host(.ic-button-variant-icon-primary) ::slotted(a) {
+  color: var(--ic-button-primary-text);
+  background-color: var(--ic-button-primary-background) !important;
 }
 
-:host(.ic-button-variant-primary) .button:hover {
-  background-color: var(--button-default-hover);
+:host(.ic-button-variant-primary) .button:hover,
+:host(.ic-button-variant-icon-primary) .button:hover {
+  background-color: var(--ic-button-primary-background-hover);
+}
+
+:host(.ic-button-variant-primary) ::slotted(a:hover),
+:host(.ic-button-variant-icon-primary) ::slotted(a:hover) {
+  background-color: var(--ic-button-primary-background-hover) !important;
 }
 
 :host(.ic-button-variant-primary.ic-button-loading) .button,
-:host(.ic-button-variant-primary) .button:active {
-  background-color: var(--button-default-active);
+: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);
+}
+
+:host(.ic-button-variant-primary) ::slotted(a:active),
+:host(.ic-button-variant-icon-primary) ::slotted(a:active) {
+  background-color: var(--ic-button-primary-background-pressed) !important;
 }
 
 :host(.ic-button-variant-primary.ic-button-disabled) .button,
-:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a) {
-  background: var(--ic-architectural-200);
-  color: var(--ic-architectural-300);
+:host(.ic-button-variant-icon-primary.ic-button-disabled) .button {
+  background: var(--ic-button-primary-background-disabled);
+  color: var(--ic-button-primary-text-disabled);
+}
+
+: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;
+  color: var(--ic-button-primary-text-disabled) !important;
+}
+
+/* Primary - monochrome */
+
+:host(.ic-button-variant-primary.monochrome) .button,
+:host(.ic-button-variant-icon-primary.monochrome) .button {
+  color: var(--ic-button-primary-text-monochrome);
+  background-color: var(--ic-button-primary-background-monochrome);
+}
+
+:host(.ic-button-variant-primary.monochrome) ::slotted(a),
+:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a) {
+  background-color: var(--ic-button-primary-background-monochrome) !important;
+}
+
+:host(.ic-button-variant-primary.monochrome) .button:hover,
+:host(.ic-button-variant-icon-primary.monochrome) .button:hover {
+  background-color: var(--ic-button-primary-background-hover-monochrome);
+}
+
+:host(.ic-button-variant-primary.monochrome) ::slotted(a:hover),
+:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:hover) {
+  background-color: var(
+    --ic-button-primary-background-hover-monochrome
+  ) !important;
 }
 
-:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled) .button,
-:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled)
+:host(.ic-button-variant-primary.ic-button-loading.monochrome) .button,
+:host(.ic-button-variant-primary.monochrome) .button:active,
+: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);
+}
+
+:host(.ic-button-variant-primary.monochrome) ::slotted(a:active),
+:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:active) {
+  background-color: var(
+    --ic-button-primary-background-pressed-monochrome
+  ) !important;
+}
+
+:host(.ic-button-variant-primary.ic-button-disabled.monochrome) .button,
+:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome) .button {
+  background-color: var(--ic-button-primary-background-disabled-monochrome);
+  color: var(--ic-button-primary-text-disabled-monochrome);
+}
+
+:host(.ic-button-variant-primary.ic-button-disabled.monochrome) ::slotted(a),
+:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome)
   ::slotted(a) {
-  background: var(--ic-architectural-600);
-  color: var(--ic-architectural-500);
+  background-color: var(
+    --ic-button-primary-background-disabled-monochrome
+  ) !important;
 }
 
 /* Secondary  */
 
 :host(.ic-button-variant-secondary) .button,
-:host(.ic-button-variant-secondary) ::slotted(a) {
-  border: var(--ic-border-width) solid var(--button-default);
-  color: var(--button-default);
+:host(.ic-button-variant-icon-secondary) .button {
+  border: var(--ic-border-width) solid var(--ic-button-secondary-border);
+  color: var(--ic-button-secondary-text);
+}
+
+:host(.ic-button-variant-secondary) ::slotted(a),
+: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;
 }
 
 :host(.ic-button-variant-secondary) .button:hover,
-:host(.ic-button-variant-secondary) ::slotted(a:hover) {
-  background-color: var(--button-default-background-hover);
-  border-color: var(--button-default-hover);
-  color: var(--button-default-hover);
+:host(.ic-button-variant-icon-secondary) .button:hover {
+  background-color: var(--ic-button-secondary-background-hover-active);
+  border-color: var(--ic-button-secondary-border-hover);
+  color: var(--ic-button-secondary-text-hover-active);
+}
+
+:host(.ic-button-variant-secondary) ::slotted(a:hover),
+:host(.ic-button-variant-icon-secondary) ::slotted(a:hover) {
+  background-color: var(
+    --ic-button-secondary-background-hover-active
+  ) !important;
 }
 
 :host(.ic-button-variant-secondary) .button:active,
-:host(.ic-button-variant-secondary) ::slotted(a:active) {
-  border-color: var(--button-default-active);
-  background-color: var(--button-default-background-active);
-  color: var(--button-default-active);
+:host(.ic-button-variant-icon-secondary) .button:active {
+  border-color: var(--ic-button-secondary-border-pressed);
+  background-color: var(--ic-button-secondary-background-pressed-active);
+  color: var(--ic-button-secondary-text-pressed-active);
 }
 
-:host(.ic-button-variant-secondary.ic-button-loading) .button {
-  border-color: var(--button-default);
-  background-color: var(--button-default-background-active);
-  color: var(--button-default-active);
+:host(.ic-button-variant-secondary) ::slotted(a:active),
+:host(.ic-button-variant-icon-secondary) ::slotted(a:active) {
+  background-color: var(
+    --ic-button-secondary-background-pressed-active
+  ) !important;
+}
+
+:host(.ic-button-variant-secondary.ic-button-loading) .button,
+:host(.ic-button-variant-icon-secondary.ic-button-loading) .button {
+  border-color: var(--ic-button-secondary-border-pressed);
+  background-color: var(
+    --loading-button-background,
+    var(--ic-button-secondary-background-pressed-active)
+  ) !important;
+  color: var(--ic-button-secondary-text-pressed-active);
+  --button-loading-inner-color: var(--ic-button-secondary-text-pressed-active);
+  --button-loading-outer-color: var(--ic-button-secondary-background-pressed);
 }
 
 :host(.ic-button-variant-secondary.ic-button-disabled) .button,
-:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a) {
-  border-color: var(--ic-architectural-300);
-  color: var(--ic-architectural-300);
+:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button {
+  border-color: var(--ic-button-secondary-border-disabled);
+  color: var(--ic-button-secondary-text-disabled);
+  background: none;
+}
+
+:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),
+:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a) {
+  background: none !important;
+}
+
+/* Secondary - non-transparent background */
+
+:host(.ic-button-variant-secondary.background) .button,
+:host(.ic-button-variant-icon-secondary.background) .button {
+  background-color: var(--ic-button-secondary-background-non-transparent);
+}
+
+: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;
+}
+
+: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);
+}
+
+:host(.ic-button-variant-secondary.background) ::slotted(a:hover),
+:host(.ic-button-variant-icon-secondary.background) ::slotted(a:hover) {
+  background-color: 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(
+    --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(
+    --ic-button-secondary-background-non-transparent-active
+  ) !important;
+}
+
+/* Secondary - monochrome */
+
+:host(.ic-button-variant-secondary.monochrome) .button,
+:host(.ic-button-variant-icon-secondary.monochrome) .button {
+  background-color: none;
+  border: var(--ic-border-width) solid
+    var(--ic-button-secondary-border-monochrome);
+  color: var(--ic-button-secondary-text-monochrome);
+}
+
+:host(.ic-button-variant-secondary.monochrome) ::slotted(a),
+:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a) {
+  background-color: none !important;
+}
+
+:host(.ic-button-variant-secondary.monochrome) .button:hover,
+:host(.ic-button-variant-icon-secondary.monochrome) .button:hover {
+  background-color: var(--ic-button-secondary-background-hover-monochrome);
+  border-color: var(--ic-button-secondary-border-hover-monochrome);
+  color: var(--ic-button-secondary-text-hover-monochrome);
+}
+
+:host(.ic-button-variant-secondary.monochrome) ::slotted(a:hover),
+:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:hover) {
+  background-color: var(
+    --ic-button-secondary-background-hover-monochrome
+  ) !important;
+}
+
+:host(.ic-button-variant-secondary.monochrome) .button:active,
+:host(.ic-button-variant-icon-secondary.monochrome) .button:active {
+  background-color: var(--ic-button-secondary-background-pressed-monochrome);
+  border-color: var(--ic-button-secondary-border-pressed-monochrome);
+  color: var(--ic-button-secondary-text-pressed-monochrome);
+}
+
+:host(.ic-button-variant-secondary.monochrome) ::slotted(a:active),
+:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:active) {
+  background-color: var(
+    --ic-button-secondary-background-pressed-monochrome
+  ) !important;
+}
+
+:host(.ic-button-variant-secondary.ic-button-loading.monochrome) .button,
+:host(.ic-button-variant-icon-secondary.ic-button-loading.monochrome) .button {
+  background-color: var(
+    --ic-button-secondary-background-pressed-monochrome
+  ) !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
+  );
+  --button-loading-outer-color: var(
+    --ic-button-secondary-background-pressed-monochrome
+  );
+}
+
+:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) .button,
+:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome) .button {
   background: none;
+  border-color: var(--ic-button-secondary-border-disabled-monochrome);
+  color: var(--ic-button-secondary-text-disabled-monochrome);
 }
 
-:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) .button,
-:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled)
+:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) ::slotted(a),
+:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome)
+  ::slotted(a) {
+  background: none !important;
+}
+
+/* Secondary - non-transparent background - monochrome */
+
+: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);
+}
+
+: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) {
-  border-color: var(--ic-architectural-500);
-  color: var(--ic-architectural-500);
+  background-color: var(
+    --ic-button-secondary-background-non-transparent-monochrome-disabled
+  ) !important;
+}
+
+:host(.ic-button-variant-secondary.background.monochrome) .button:hover,
+:host(.ic-button-variant-icon-secondary.background.monochrome) .button:hover {
+  background-color: var(
+    --ic-button-secondary-background-non-transparent-monochrome-hover
+  );
+}
+
+:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:hover),
+:host(.ic-button-variant-icon-secondary.background.monochrome)
+  ::slotted(a:hover) {
+  background-color: 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(
+    --ic-button-secondary-background-non-transparent-monochrome-active
+  );
+}
+
+:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:active),
+:host(.ic-button-variant-icon-secondary.background.monochrome)
+  ::slotted(a:active) {
+  background-color: var(
+    --ic-button-secondary-background-non-transparent-monochrome-active
+  ) !important;
 }
 
 /* Tertiary */
 
 :host(.ic-button-variant-tertiary) .button,
-:host(.ic-button-variant-tertiary) ::slotted(a) {
-  color: var(--button-default);
+:host(.ic-button-variant-icon-tertiary) .button,
+:host(.ic-button-variant-tertiary) ::slotted(a),
+:host(.ic-button-variant-icon-tertiary) ::slotted(a) {
+  color: var(--ic-button-tertiary-text-active);
 }
 
 :host(.ic-button-variant-tertiary) .button:hover,
-:host(.ic-button-variant-tertiary) ::slotted(a:hover) {
-  background-color: var(--button-default-background-hover);
-  color: var(--button-default-hover);
+:host(.ic-button-variant-icon-tertiary) .button:hover {
+  background-color: var(--ic-button-tertiary-background-hover-active);
+  color: var(--ic-button-tertiary-text-hover-active);
+}
+
+:host(.ic-button-variant-tertiary) ::slotted(a:hover),
+:host(.ic-button-variant-icon-tertiary) ::slotted(a:hover) {
+  background-color: var(
+    --ic-button-tertiary-background-hover-active
+  ) !important;
 }
 
 :host(.ic-button-variant-tertiary) .button:active,
+:host(.ic-button-variant-tertiary.ic-button-loading) .button,
+:host(.ic-button-variant-icon-tertiary) .button:active,
+: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);
+}
+
 :host(.ic-button-variant-tertiary) ::slotted(a:active),
-:host(.ic-button-variant-tertiary.ic-button-loading) .button {
-  background-color: var(--button-default-background-active);
-  color: var(--button-default-active);
+:host(.ic-button-variant-icon-tertiary) ::slotted(a:active) {
+  background-color: var(
+    --ic-button-tertiary-background-pressed-active
+  ) !important;
 }
 
 :host(.ic-button-variant-tertiary.ic-button-disabled) .button,
-:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a) {
-  color: var(--ic-architectural-300);
+:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button {
+  color: var(--ic-button-tertiary-text-disabled);
+  background: none;
+}
+
+:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),
+:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a) {
+  background: none !important;
+}
+
+/* Tertiary - monochrome */
+
+:host(.ic-button-variant-tertiary.monochrome) .button,
+:host(.ic-button-variant-tertiary.monochrome) ::slotted(a),
+:host(.ic-button-variant-icon-tertiary.monochrome) .button,
+:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a) {
+  color: var(--ic-button-tertiary-text-monochrome);
+}
+
+:host(.ic-button-variant-tertiary.monochrome) .button:hover,
+:host(.ic-button-variant-icon-tertiary.monochrome) .button:hover {
+  background-color: var(--ic-button-tertiary-background-hover-monochrome);
+  color: var(--ic-button-tertiary-text-hover-monochrome);
+}
+
+:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:hover),
+:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:hover) {
+  background-color: var(
+    --ic-button-tertiary-background-hover-monochrome
+  ) !important;
+}
+
+:host(.ic-button-variant-tertiary.monochrome) .button:active,
+:host(.ic-button-variant-tertiary.ic-button-loading.monochrome) .button,
+:host(.ic-button-variant-icon-tertiary.monochrome) .button:active,
+: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
+  );
+  --button-loading-outer-color: var(
+    --ic-button-tertiary-background-pressed-monochrome
+  );
+}
+
+:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:active),
+:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:active) {
+  background-color: var(
+    --ic-button-tertiary-background-pressed-monochrome
+  ) !important;
+}
+
+:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) .button,
+:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome) .button {
+  color: var(--ic-button-tertiary-text-disabled-monochrome);
   background: none;
 }
 
-:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) .button,
-:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled)
+:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) ::slotted(a),
+:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome)
   ::slotted(a) {
-  color: var(--ic-architectural-500);
+  background: none !important;
 }
 
 /* Destructive */
 
 :host(.ic-button-variant-destructive) .button,
-:host(.ic-button-variant-destructive) ::slotted(a) {
-  color: var(--ic-color-white-text);
-  background-color: var(--ic-action-destructive);
+:host(.ic-button-variant-icon-destructive) .button {
+  color: var(--ic-button-destructive-text);
+  background-color: var(--ic-button-destructive-background);
   text-transform: uppercase;
 }
 
-:host(.ic-button-variant-destructive) .button:hover {
-  background-color: var(--ic-action-destructive-hover);
+:host(.ic-button-variant-destructive) ::slotted(a),
+:host(.ic-button-variant-icon-destructive) ::slotted(a) {
+  color: var(--ic-button-destructive-text) !important;
+  background-color: var(--ic-button-destructive-background) !important;
+  text-transform: uppercase !important;
+}
+
+:host(.ic-button-variant-destructive) .button:hover,
+:host(.ic-button-variant-icon-destructive) .button:hover {
+  background-color: var(--ic-button-destructive-background-hover);
+}
+
+:host(.ic-button-variant-destructive) ::slotted(a:hover),
+:host(.ic-button-variant-icon-destructive) ::slotted(a:hover) {
+  background-color: var(--ic-button-destructive-background-hover) !important;
 }
 
 :host(.ic-button-variant-destructive) .button:active,
-:host(.ic-button-variant-destructive.ic-button-loading) .button {
-  background-color: var(--ic-action-destructive-pressed);
+:host(.ic-button-variant-destructive.ic-button-loading) .button,
+: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);
+}
+
+:host(.ic-button-variant-destructive) ::slotted(a:active),
+:host(.ic-button-variant-icon-destructive) ::slotted(a:active) {
+  background-color: var(--ic-button-destructive-background-pressed) !important;
 }
 
 :host(.ic-button-variant-destructive.ic-button-disabled) .button,
-:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a) {
-  background: var(--ic-architectural-200);
-  color: var(--ic-architectural-300);
+:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button {
+  background-color: var(--ic-button-destructive-background-disabled);
+  color: var(--ic-button-destructive-text-disabled);
+}
+
+:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a),
+:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a) {
+  background-color: var(--ic-button-destructive-background-disabled) !important;
 }
 
+/***********************
+     Icon Variants
+ ***********************/
+
 /* Icon */
 
-:host(.ic-button-variant-icon) .button,
+:host(.ic-button-variant-icon) .button {
+  color: var(--ic-button-icon-color);
+  background-color: var(--ic-button-icon-color-background);
+  min-width: 0;
+  gap: var(--ic-space-xs);
+  margin: var(--ic-space-1px) 0;
+}
+
 :host(.ic-button-variant-icon) ::slotted(a) {
-  color: var(--button-default);
+  color: var(--ic-button-icon-color);
+  background-color: var(--ic-button-icon-color-background) !important;
   min-width: 0;
   gap: var(--ic-space-xs);
   margin: var(--ic-space-1px) 0;
@@ -711,35 +1064,41 @@ video {
   height: var(--ic-space-lg) !important;
 }
 
-:host(.ic-button-variant-icon) .button:hover,
+:host(.ic-button-variant-icon) .button:hover {
+  color: var(--ic-button-icon-color-hover);
+  background-color: var(--ic-button-icon-color-background-hover);
+}
+
 :host(.ic-button-variant-icon) ::slotted(a:hover) {
-  background-color: var(--button-default-background-hover);
-  color: var(--button-default-hover);
+  color: var(--ic-button-icon-color-hover);
+  background-color: var(--ic-button-icon-color-background-hover) !important;
 }
 
 :host(.ic-button-variant-icon) .button:active:not(:focus),
-:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)),
 :host(.ic-button-variant-icon.ic-button-loading) .button {
-  background-color: var(--button-default-background-active);
-  color: var(--button-default-active);
+  color: var(--ic-button-icon-color-active);
+  background-color: var(--ic-button-icon-color-background-acti);
 }
 
-:host(.ic-button-variant-icon.ic-button-disabled) .button,
-:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a) {
+:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)) {
+  color: var(--ic-button-icon-color-active);
+  background-color: var(--ic-button-icon-color-background-acti) !important;
+}
+
+:host(.ic-button-variant-icon.ic-button-disabled) .button {
   color: var(--ic-architectural-300);
   background: none;
 }
 
-/***********************
- * Icon Variants
- ***********************/
+:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a) {
+  color: var(--ic-architectural-300);
+  background: none !important;
+}
 
 /* Icon-primary */
 
 :host(.ic-button-variant-icon-primary) .button,
 :host(.ic-button-variant-icon-primary) ::slotted(a) {
-  color: var(--ic-color-white-text);
-  background-color: var(--button-default);
   min-width: 0;
   gap: var(--ic-space-xs);
   margin: var(--ic-space-1px) 0;
@@ -750,61 +1109,15 @@ video {
   height: var(--ic-space-lg) !important;
 }
 
-:host(.ic-button-variant-icon-primary) .button:hover,
-:host(.ic-button-variant-icon-primary) ::slotted(a:hover) {
-  background-color: var(--button-default-hover);
-}
-
-:host(.ic-button-variant-icon-primary) .button:active,
-:host(.ic-button-variant-icon-primary) ::slotted(a:active),
-:host(.ic-button-variant-icon-primary.ic-button-loading) .button {
-  background: var(--button-default-active);
-}
-
-:host(.ic-button-variant-icon-primary.ic-button-disabled) .button,
-:host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a) {
-  color: var(--ic-architectural-300);
-  background: var(--ic-architectural-200);
-}
-
-:host(.ic-button-variant-icon-primary.ic-button-light) .button,
-:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a) {
-  color: var(--ic-color-text-primary-light);
-}
-
-:host(.ic-button-variant-icon-primary.ic-button-light) .button:hover,
-:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a:hover) {
-  background: var(--ic-action-light-hover);
-}
-
-:host(.ic-button-variant-icon-primary.ic-button-light) .button:active,
-:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a:active),
-:host(.ic-button-variant-icon-primary.ic-button-light.ic-button-loading)
-  .button,
-:host(.ic-button-variant-icon-primary.ic-button-light.ic-button-loading)
-  ::slotted(a) {
-  background: var(--ic-action-light-pressed);
-}
-
-:host(.ic-button-variant-icon-primary.ic-button-dark) .button:hover,
-:host(.ic-button-variant-icon-primary.ic-button-dark) ::slotted(a:hover) {
-  background: var(--ic-action-dark-hover);
-}
-
-:host(.ic-button-variant-icon-primary.ic-button-dark) .button:active,
-:host(.ic-button-variant-icon-primary.ic-button-dark) ::slotted(a:active),
-:host(.ic-button-variant-icon-primary.ic-button-dark.ic-button-loading) .button,
-:host(.ic-button-variant-icon-primary.ic-button-dark.ic-button-loading)
-  ::slotted(a) {
-  background: var(--ic-action-dark-pressed);
+:host(.ic-button-variant-icon.monochrome) ::slotted(a),
+:host(.ic-button-variant-icon.monochrome) ::slotted(svg) {
+  color: var(--ic-button-icon-monochrome);
 }
 
 /* Icon-secondary */
 
 :host(.ic-button-variant-icon-secondary) .button,
 :host(.ic-button-variant-icon-secondary) ::slotted(a) {
-  border: var(--ic-border-width) solid var(--button-default);
-  color: var(--button-default);
   min-width: 0;
   gap: var(--ic-space-xs);
   margin: var(--ic-space-1px) 0;
@@ -815,54 +1128,10 @@ video {
   height: var(--ic-space-lg) !important;
 }
 
-:host(.ic-button-variant-icon-secondary) .button:hover,
-:host(.ic-button-variant-icon-secondary) ::slotted(a:hover) {
-  background-color: var(--button-default-background-hover);
-  border-color: var(--button-default-hover);
-  color: var(--button-default-hover);
-}
-
-:host(.ic-button-variant-icon-secondary) .button:active,
-:host(.ic-button-variant-icon-secondary) ::slotted(a:active),
-:host(.ic-button-variant-icon-secondary.ic-button-loading) .button {
-  border-color: var(--button-default-active);
-  background-color: var(--button-default-background-active);
-  color: var(--button-default-active);
-}
-
-:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button,
-:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button:hover,
-:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button:active,
-:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a),
-:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a:hover),
-:host(.ic-button-variant-icon-secondary.ic-button-disabled)
-  ::slotted(a:active) {
-  border-color: var(--ic-architectural-300);
-  color: var(--ic-architectural-300);
-  background: none;
-}
-
-:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled)
-  .button,
-:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled)
-  .button:hover,
-:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled)
-  .button:active,
-:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled)
-  ::slotted(a),
-:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled)
-  ::slotted(a:hover),
-:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled)
-  ::slotted(a:active) {
-  border-color: var(--ic-architectural-500);
-  color: var(--ic-architectural-500);
-}
-
 /* Icon-tertiary */
 
 :host(.ic-button-variant-icon-tertiary) .button,
 :host(.ic-button-variant-icon-tertiary) ::slotted(a) {
-  color: var(--button-default);
   min-width: 0;
   gap: var(--ic-space-xs);
   margin: var(--ic-space-1px) 0;
@@ -873,35 +1142,10 @@ video {
   height: var(--ic-space-lg) !important;
 }
 
-:host(.ic-button-variant-icon-tertiary) .button:hover,
-:host(.ic-button-variant-icon-tertiary) ::slotted(a:hover) {
-  background-color: var(--button-default-background-hover);
-  color: var(--button-default-hover);
-}
-
-:host(.ic-button-variant-icon-tertiary) .button:active,
-:host(.ic-button-variant-icon-tertiary) ::slotted(a:active),
-:host(.ic-button-variant-icon-tertiary.ic-button-loading) .button {
-  background-color: var(--button-default-background-active);
-  color: var(--button-default-active);
-}
-
-:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button,
-:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button:hover,
-:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button:active,
-:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a),
-:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a:hover),
-:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a:active) {
-  color: var(--ic-architectural-300);
-  background: none;
-}
-
 /* Icon-destructive */
 
 :host(.ic-button-variant-icon-destructive) .button,
 :host(.ic-button-variant-icon-destructive) ::slotted(a) {
-  color: var(--ic-color-white-text);
-  background-color: var(--ic-action-destructive);
   min-width: 0;
   gap: var(--ic-space-xs);
   margin: var(--ic-space-1px) 0;
@@ -912,29 +1156,6 @@ video {
   height: var(--ic-space-lg) !important;
 }
 
-:host(.ic-button-variant-icon-destructive) .button:hover,
-:host(.ic-button-variant-icon-destructive) ::slotted(a:hover) {
-  background-color: var(--ic-action-destructive-hover);
-}
-
-:host(.ic-button-variant-icon-destructive) .button:active,
-:host(.ic-button-variant-icon-destructive) ::slotted(a:active),
-:host(.ic-button-variant-icon-destructive.ic-button-loading) .button {
-  background-color: var(--ic-action-destructive-pressed);
-}
-
-:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button,
-:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button:hover,
-:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button:active,
-:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a),
-:host(.ic-button-variant-icon-destructive.ic-button-disabled)
-  ::slotted(a:hover),
-:host(.ic-button-variant-icon-destructive.ic-button-disabled)
-  ::slotted(a:active) {
-  background: var(--ic-architectural-200);
-  color: var(--ic-architectural-300);
-}
-
 /* Sizing */
 
 :host(.ic-button-size-medium) .button {
@@ -942,68 +1163,101 @@ video {
   padding: var(--ic-space-xs) var(--ic-space-md);
 }
 
+:host(.ic-button-size-medium) ::slotted(a) {
+  height: var(--height, 2.5rem) !important;
+  padding: var(--ic-space-xs) var(--ic-space-md) !important;
+}
+
 :host(.ic-button-size-small) .button {
   height: var(--height, var(--ic-space-xl));
   padding: var(--ic-space-xxs) var(--ic-space-md);
 }
 
+:host(.ic-button-size-small) ::slotted(a) {
+  height: var(--height, var(--ic-space-xl)) !important;
+  padding: var(--ic-space-xxs) var(--ic-space-md) !important;
+}
+
 :host(.ic-button-size-large) .button {
   height: var(--height, var(--ic-space-xxl));
   padding: var(--ic-space-sm) var(--ic-space-md);
 }
 
+:host(.ic-button-size-large) ::slotted(a) {
+  height: var(--height, var(--ic-space-xxl)) !important;
+  padding: var(--ic-space-sm) var(--ic-space-md) !important;
+}
+
 :host(.ic-button-size-medium.ic-button-variant-icon) .button,
 :host(.ic-button-size-medium.ic-button-variant-icon-primary) .button,
 :host(.ic-button-size-medium.ic-button-variant-icon-secondary) .button,
 :host(.ic-button-size-medium.ic-button-variant-icon-tertiary) .button,
-:host(.ic-button-size-medium.ic-button-variant-icon-destructive) .button,
-:host(.ic-button-size-medium.ic-button-variant-icon-primary) ::slotted(a),
-:host(.ic-button-size-medium.ic-button-variant-icon-secondary) ::slotted(a),
-:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) ::slotted(a),
-:host(.ic-button-size-medium.ic-button-variant-icon-destructive) ::slotted(a),
-:host(.ic-button-size-medium.ic-button-variant-icon) ::slotted(a) {
+:host(.ic-button-size-medium.ic-button-variant-icon-destructive) .button {
   height: var(--height, var(--ic-space-xl));
   width: var(--ic-space-xl);
   padding: 0.375rem;
 }
 
+:host(.ic-button-size-medium.ic-button-variant-icon-primary) ::slotted(a),
+:host(.ic-button-size-medium.ic-button-variant-icon-secondary) ::slotted(a),
+:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) ::slotted(a),
+:host(.ic-button-size-medium.ic-button-variant-icon-destructive) ::slotted(a) {
+  height: var(--height, var(--ic-space-xl)) !important;
+  width: var(--ic-space-xl) !important;
+  padding: 0.375rem !important;
+}
+
 :host(.ic-button-size-small.ic-button-variant-icon) .button,
 :host(.ic-button-size-small.ic-button-variant-icon-primary) .button,
 :host(.ic-button-size-small.ic-button-variant-icon-secondary) .button,
 :host(.ic-button-size-small.ic-button-variant-icon-tertiary) .button,
-:host(.ic-button-size-small.ic-button-variant-icon-destructive) .button,
+:host(.ic-button-size-small.ic-button-variant-icon-destructive) .button {
+  height: var(--height, var(--ic-space-lg));
+  width: var(--ic-space-lg);
+  padding: var(--ic-space-xxs);
+}
+
 :host(.ic-button-size-small.ic-button-variant-icon-primary) ::slotted(a),
 :host(.ic-button-size-small.ic-button-variant-icon-secondary) ::slotted(a),
 :host(.ic-button-size-small.ic-button-variant-icon-tertiary) ::slotted(a),
 :host(.ic-button-size-small.ic-button-variant-icon-destructive) ::slotted(a),
 :host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a) {
-  height: var(--height, var(--ic-space-lg));
-  width: var(--ic-space-lg);
-  padding: var(--ic-space-xxs);
+  height: var(--height, var(--ic-space-lg)) !important;
+  width: var(--ic-space-lg) !important;
+  padding: var(--ic-space-xxs) !important;
 }
 
 :host(.ic-button-size-large.ic-button-variant-icon) .button,
 :host(.ic-button-size-large.ic-button-variant-icon-primary) .button,
 :host(.ic-button-size-large.ic-button-variant-icon-secondary) .button,
 :host(.ic-button-size-large.ic-button-variant-icon-tertiary) .button,
+:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button {
+  height: var(--height, 2.5rem);
+  width: 2.5rem;
+  padding: var(--ic-space-xs);
+}
+
 :host(.ic-button-size-large.ic-button-variant-icon-destructive) .button,
 :host(.ic-button-size-large.ic-button-variant-icon-primary) ::slotted(a),
 :host(.ic-button-size-large.ic-button-variant-icon-secondary) ::slotted(a),
 :host(.ic-button-size-large.ic-button-variant-icon-tertiary) ::slotted(a),
 :host(.ic-button-size-large.ic-button-variant-icon-destructive) ::slotted(a),
 :host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a) {
-  height: var(--height, 2.5rem);
-  width: 2.5rem;
-  padding: var(--ic-space-xs);
+  height: var(--height, 2.5rem) !important;
+  width: 2.5rem !important;
+  padding: var(--ic-space-xs) !important;
 }
 
 /* Width */
 :host(.ic-button-full-width),
-:host(.ic-button-full-width) .button,
-:host(.ic-button-full-width) ::slotted(a) {
+:host(.ic-button-full-width) .button {
   width: 100%;
 }
 
+:host(.ic-button-full-width) ::slotted(a) {
+  width: 100% !important;
+}
+
 /* Loading */
 
 div.loading-container {
@@ -1013,11 +1267,8 @@ div.loading-container {
 }
 
 ic-loading-indicator {
-  --outer-color: transparent;
-}
-
-ic-loading-indicator.ic-theme-dark.ic-loading-indicator-monochrome {
-  --inner-color: var(--ic-action-light);
+  --inner-color: var(--button-loading-inner-color);
+  --outer-color: var(--button-loading-outer-color), transparent;
 }
 
 @keyframes loading-animation {
@@ -1088,20 +1339,15 @@ div.right-icon {
 :host(.search-submit-button) ::slotted(svg) {
   --icon-height: 1.25rem;
   --icon-width: 1.25rem;
+
+  color: var(--ic-atoms-input-search-button);
 }
 
 :host(.search-submit-button-small) ::slotted(svg) {
   --icon-height: 1rem;
   --icon-width: 1rem;
-}
-
-:host(.clear-button) {
-  margin: 0 var(--ic-space-xxs);
-}
 
-:host(.clear-button) .button:focus,
-:host(.calendar-button) .button:focus {
-  box-shadow: none;
+  color: var(--ic-atoms-input-search-button);
 }
 
 :host(.search-submit-button) .button:focus {
@@ -1113,15 +1359,110 @@ div.right-icon {
   background-color: var(--ic-action-default-bg-hover);
 }
 
+:host(.search-submit-button) .button:not(:active):focus ::slotted(svg) {
+  color: var(--ic-button-primary-text);
+}
+
 :host(.search-submit-button) {
   display: flex;
   align-items: center;
   margin: 0 var(--ic-space-xxs);
 }
 
+/** CLEAR & DISMISS **/
+
+:host(.ic-button-variant-icon) .button,
+:host(.ic-button-variant-icon) ::slotted(a) {
+  background-color: inherit;
+  min-width: 0;
+  gap: var(--ic-space-xs);
+  margin: var(--ic-space-1px) 0;
+}
+
+: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);
+  min-width: 0;
+  gap: var(--ic-space-xs);
+  margin: var(--ic-space-1px) 0;
+}
+
+:host(.button-variant-icon) .icon-container {
+  width: var(--ic-space-lg) !important;
+  height: var(--ic-space-lg) !important;
+}
+
+:host(.button-variant-icon) .button:hover,
+:host(.button-variant-icon) ::slotted(a:hover) {
+  background-color: var(--button-default-background-hover);
+  color: var(--button-default-hover);
+}
+
+:host(.button-variant-icon) .button:active:not(:focus),
+:host(.button-variant-icon) ::slotted(a:active:not(:focus)),
+:host(.button-variant-icon.loading) .button {
+  background-color: var(--button-default-background-active);
+  color: var(--button-default-active);
+}
+
+:host(.button-variant-icon.disabled) .button,
+:host(.button-variant-icon.disabled) ::slotted(a) {
+  color: var(--ic-architectural-300);
+  background: none;
+}
+
+:host(.clear-button) {
+  margin: 0 var(--ic-space-xxs);
+}
+
+:host(.clear-button) .button:focus,
+:host(.calendar-button) .button:focus {
+  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);
+  /* 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);
 }
 
 :host(.popout-menu-button) .button {
@@ -1150,6 +1491,7 @@ div.right-icon {
 }
 
 /** Dropdown **/
+
 :host .arrow-dropdown {
   margin-top: auto;
 }
@@ -1164,6 +1506,7 @@ div.right-icon {
 }
 
 /** Slotted router item **/
+
 slot[name="router-item"]::slotted(a) {
   pointer-events: all;
 }
@@ -1174,127 +1517,42 @@ slot[name="router-item"]::slotted(a) {
   vertical-align: middle !important;
 }
 
-:host(.white-background) ::slotted(a) {
-  background-color: var(--ic-architectural-white) !important;
-}
-
-:host(.ic-button-variant-primary) ::slotted(a) {
-  background-color: var(--button-default) !important;
-}
-
-:host(.ic-button-variant-primary) ::slotted(a:hover) {
-  background-color: var(--button-default-hover) !important;
-}
-
-:host(.ic-button-variant-primary) ::slotted(a:active) {
-  background-color: var(--button-default-active) !important;
-}
-
-:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),
-:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a) {
-  background: var(--ic-architectural-200) !important;
-}
-
-:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled)
-  ::slotted(a) {
-  background: var(--ic-architectural-600) !important;
-}
-
-:host(.ic-button-variant-secondary) ::slotted(a) {
-  border: var(--ic-border-width) solid var(--button-default) !important;
-}
+/** menu button on top navigation\side navigation 
+  * uses secondary monochrome tokens which are duplicated here to avoid multiple copies in each component
+  */
 
-:host(.ic-button-variant-secondary) ::slotted(a:hover) {
-  background-color: var(--button-default-background-hover) !important;
-  border-color: var(--button-default-hover) !important;
-}
-
-:host(.ic-button-variant-secondary) ::slotted(a:active) {
-  border-color: var(--button-default-active) !important;
-  background-color: var(--button-default-background-active) !important;
-}
-
-:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),
-:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a:hover),
-:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a:active),
-:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),
-:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a:hover),
-:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a:active) {
-  border-color: var(--ic-architectural-300) !important;
-  background: none !important;
-}
-
-:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled)
-  ::slotted(a),
-:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled)
-  ::slotted(a:hover),
-:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled)
-  ::slotted(a:active),
-:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled)
-  ::slotted(a),
-:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled)
-  ::slotted(a:hover),
-:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled)
-  ::slotted(a:active) {
-  border-color: var(--ic-architectural-500) !important;
-}
-
-:host(.ic-button-variant-tertiary) ::slotted(a:hover),
-:host(.ic-button-variant-icon) ::slotted(a:hover) {
-  background-color: var(--button-default-background-hover) !important;
-}
-
-:host(.ic-button-variant-tertiary) ::slotted(a:active:not(:focus)),
-:host(.ic-button-variant-tertiary) ::slotted(a:active:focus),
-:host(.ic-button-variant-tertiary) ::slotted(a:active),
-:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)) {
-  background-color: var(--button-default-background-active) !important;
-}
-
-:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a),
-:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a:hover),
-:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a:active) {
-  background: none !important;
-}
-
-:host(.ic-button-variant-destructive) ::slotted(a) {
-  background-color: var(--ic-action-destructive) !important;
-}
-
-:host(.ic-button-variant-destructive) ::slotted(a:hover) {
-  background-color: var(--ic-action-destructive-hover) !important;
-}
-
-:host(.ic-button-variant-destructive) ::slotted(a:active) {
-  background-color: var(--ic-action-destructive-pressed) !important;
-}
-
-:host(.ic-button-size-medium) ::slotted(a) {
-  height: var(--height, 2.5rem) !important;
-  padding: var(--ic-space-xs) var(--ic-space-md) !important;
-}
-
-:host(.ic-button-size-small) ::slotted(a) {
-  height: var(--height, var(--ic-space-xl)) !important;
-  padding: var(--ic-space-xxs) var(--ic-space-md) !important;
-}
-
-:host(.ic-button-size-large) ::slotted(a) {
-  height: var(--height, var(--ic-space-xxl)) !important;
-  padding: var(--ic-space-sm) var(--ic-space-md) !important;
-}
-
-:host(.ic-button-size-medium.ic-button-variant-icon) ::slotted(a) {
-  height: var(--height, var(--ic-space-xl)) !important;
-  padding: 0.375rem !important;
-}
-
-:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a) {
-  padding: var(--ic-space-xxs) !important;
+:host(#menu-button.ic-theme-light) {
+  --ic-button-secondary-background-hover-monochrome: var(
+    --ic-action-dark-bg-hover
+  );
+  --ic-button-secondary-background-pressed-monochrome: var(
+    --ic-action-dark-bg-pressed
+  );
+  --ic-button-secondary-text-hover-monochrome: var(--ic-action-dark-hover);
+  --ic-button-secondary-text-pressed-monochrome: var(--ic-action-dark-pressed);
+  --ic-button-secondary-border-hover-monochrome: var(
+    --ic-color-border-neutral-hover-dark
+  );
+  --ic-button-secondary-border-pressed-monochrome: var(
+    --ic-color-border-neutral-pressed-dark
+  );
 }
 
-:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a) {
-  padding: var(--ic-space-xs) !important;
+:host(#menu-button.ic-theme-dark) {
+  --ic-button-secondary-background-hover-monochrome: var(
+    --ic-action-light-bg-hover
+  );
+  --ic-button-secondary-background-pressed-monochrome: var(
+    --ic-action-light-bg-pressed
+  );
+  --ic-button-secondary-text-hover-monochrome: var(--ic-action-light-hover);
+  --ic-button-secondary-text-pressed-monochrome: var(--ic-action-light-pressed);
+  --ic-button-secondary-border-hover-monochrome: var(
+    --ic-color-border-neutral-hover-light
+  );
+  --ic-button-secondary-border-pressed-monochrome: var(
+    --ic-color-border-neutral-default
+  );
 }
 
 /** High Contrast **/
@@ -1303,6 +1561,25 @@ 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),
+  .search-submit-button ::slotted(svg),
+  .ic-button-variant-icon ::slotted(svg),
+  .clear-button ::slotted(svg) {
+    color: HighlightText;
+  }
+
+  :host(.ic-button-variant-icon.monochrome) ::slotted(a),
+  :host(.ic-button-variant-icon.monochrome) ::slotted(svg) {
+    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;
+  }
 }
 
 /** Pagination **/