@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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-active);
-  --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,498 +493,767 @@ video {
   outline: var(--ic-hc-focus-outline);
 }
 
-:host(.dark) .button,
-:host(.dark) ::slotted(a) {
-  --button-default: var(--ic-action-dark);
-  --button-default-hover: var(--ic-action-dark);
-  --button-default-active: var(--ic-action-dark);
-  --button-default-background-hover: var(--ic-action-dark-bg-hover);
-  --button-default-background-active: var(--ic-action-dark-bg-active);
+:host(.ic-button-disabled),
+:host(.ic-button-disabled) .button,
+:host(.ic-button-disabled) ::slotted(a),
+:host(.ic-button-loading),
+:host(.ic-button-loading) .button {
+  pointer-events: none;
 }
 
-:host(.light) .button,
-:host(.light) ::slotted(a) {
-  --button-default: var(--ic-action-light);
-  --button-default-hover: var(--ic-action-light);
-  --button-default-active: var(--ic-action-light);
-  --button-default-background-hover: var(--ic-action-light-bg-hover);
-  --button-default-background-active: var(--ic-action-light-bg-active);
+:host(.top-icon) .button {
+  flex-direction: column;
+
+  --height: fit-content;
 }
 
-: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
-  );
+:host(.top-icon) .button .icon-container {
+  margin-right: 0;
+}
+
+/* Variants */
+
+/* Primary */
 
-  background-color: var(--ic-architectural-white);
+:host(.ic-button-variant-primary) .button,
+:host(.ic-button-variant-icon-primary) .button {
+  color: var(--ic-button-primary-text);
+  background-color: var(--ic-button-primary-background);
 }
 
-:host(.white-background.dark) .button,
-:host(.white-background.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) ::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(.button-variant-primary.light) .button,
-:host(.button-variant-primary.light) ::slotted(a) {
-  color: var(--ic-color-primary-text);
+:host(.ic-button-variant-primary) .button:hover,
+:host(.ic-button-variant-icon-primary) .button:hover {
+  background-color: var(--ic-button-primary-background-hover);
+}
 
-  --button-default-hover: var(--ic-action-light-hover);
-  --button-default-active: var(--ic-action-light-active);
+: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(.button-variant-primary.dark) .button,
-:host(.button-variant-primary.dark) ::slotted(a) {
-  --button-default-hover: var(--ic-action-dark-hover);
-  --button-default-active: var(--ic-action-dark-active);
+:host(.ic-button-variant-primary.ic-button-loading) .button,
+: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(.disabled),
-:host(.disabled) .button,
-:host(.disabled) ::slotted(a),
-:host(.loading),
-:host(.loading) .button {
-  pointer-events: none;
+: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(.top-icon) .button {
-  flex-direction: column;
+:host(.ic-button-variant-primary.ic-button-disabled) .button,
+:host(.ic-button-variant-icon-primary.ic-button-disabled) .button {
+  background: var(--ic-button-primary-background-disabled);
+  color: var(--ic-button-primary-text-disabled);
+}
 
-  --height: fit-content;
+: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;
 }
 
-:host(.top-icon) .button .icon-container {
-  margin-right: 0;
+/* 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);
 }
 
-/* Variants */
+: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;
+}
 
-/* Primary */
+: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(.button-variant-primary) .button,
-:host(.button-variant-primary) ::slotted(a) {
-  color: var(--ic-color-white-text);
-  background-color: var(--button-default);
+: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(.button-variant-primary) .button:hover {
-  background-color: var(--button-default-hover);
+: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(.button-variant-primary.loading) .button,
-:host(.button-variant-primary) .button:active {
-  background-color: var(--button-default-active);
+: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(.button-variant-primary.disabled) .button,
-:host(.button-variant-primary.disabled) ::slotted(a) {
-  background: var(--ic-architectural-200);
-  color: var(--ic-architectural-300);
+: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(.button-variant-primary.light.disabled) .button,
-:host(.button-variant-primary.light.disabled) ::slotted(a) {
-  background: var(--ic-architectural-600);
-  color: var(--ic-architectural-500);
+:host(.ic-button-variant-primary.ic-button-disabled.monochrome) ::slotted(a),
+:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome)
+  ::slotted(a) {
+  background-color: var(
+    --ic-button-primary-background-disabled-monochrome
+  ) !important;
 }
 
 /* Secondary  */
 
-:host(.button-variant-secondary) .button,
-:host(.button-variant-secondary) ::slotted(a) {
-  border: var(--ic-border-width) solid var(--button-default);
-  color: var(--button-default);
+:host(.ic-button-variant-secondary) .button,
+: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(.button-variant-secondary) .button:hover,
-:host(.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-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(.button-variant-secondary) .button:active,
-:host(.button-variant-secondary) ::slotted(a:active),
-:host(.button-variant-secondary.loading) .button {
-  border-color: var(--button-default-active);
-  background-color: var(--button-default-background-active);
-  color: var(--button-default-active);
+:host(.ic-button-variant-secondary) .button: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(.button-variant-secondary.disabled) .button,
-:host(.button-variant-secondary.disabled) ::slotted(a) {
-  border-color: var(--ic-architectural-300);
-  color: var(--ic-architectural-300);
+: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-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) ::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-icon-secondary.ic-button-disabled) .button {
+  border-color: var(--ic-button-secondary-border-disabled);
+  color: var(--ic-button-secondary-text-disabled);
   background: none;
 }
 
-:host(.button-variant-secondary.light.disabled) .button,
-:host(.button-variant-secondary.light.disabled) ::slotted(a) {
-  border-color: var(--ic-architectural-500);
-  color: var(--ic-architectural-500);
+:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),
+:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a) {
+  background: none !important;
 }
 
-/* Tertiary */
+/* Secondary - non-transparent background */
 
-:host(.button-variant-tertiary) .button,
-:host(.button-variant-tertiary) ::slotted(a) {
-  color: var(--button-default);
+: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(.button-variant-tertiary) .button:hover,
-:host(.button-variant-tertiary) ::slotted(a:hover) {
-  background-color: var(--button-default-background-hover);
-  color: var(--button-default-hover);
+: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(.button-variant-tertiary) .button:active,
-:host(.button-variant-tertiary) ::slotted(a:active),
-:host(.button-variant-tertiary.loading) .button {
-  background-color: var(--button-default-background-active);
-  color: var(--button-default-active);
+: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(.button-variant-tertiary.disabled) .button,
-:host(.button-variant-tertiary.disabled) ::slotted(a) {
-  color: var(--ic-architectural-300);
+: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(.button-variant-tertiary.light.disabled) .button,
-:host(.button-variant-tertiary.light.disabled) ::slotted(a) {
-  color: var(--ic-architectural-500);
+: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;
 }
 
-/* Destructive */
+/* Secondary - non-transparent background - monochrome */
 
-:host(.button-variant-destructive) .button,
-:host(.button-variant-destructive) ::slotted(a) {
-  color: var(--ic-color-white-text);
-  background-color: var(--ic-action-destructive);
-  text-transform: uppercase;
+: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(.button-variant-destructive) .button:hover {
-  background-color: var(--ic-action-destructive-hover);
+: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(.button-variant-destructive) .button:active,
-:host(.button-variant-destructive.loading) .button {
-  background-color: var(--ic-action-destructive-active);
+: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(.button-variant-destructive.disabled) .button,
-:host(.button-variant-destructive.disabled) ::slotted(a) {
-  background: var(--ic-architectural-200);
-  color: var(--ic-architectural-300);
+: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;
 }
 
-/* Icon */
+: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(.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(.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(.button-variant-icon) .icon-container {
-  width: var(--ic-space-lg) !important;
-  height: var(--ic-space-lg) !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(.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(.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;
 }
 
-: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);
+/* Tertiary */
+
+:host(.ic-button-variant-tertiary) .button,
+: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(.button-variant-icon.disabled) .button,
-:host(.button-variant-icon.disabled) ::slotted(a) {
-  color: var(--ic-architectural-300);
+:host(.ic-button-variant-tertiary) .button: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-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-icon-tertiary.ic-button-disabled) .button {
+  color: var(--ic-button-tertiary-text-disabled);
   background: none;
 }
 
-/***********************
- * Icon Variants
- ***********************/
+:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),
+:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a) {
+  background: none !important;
+}
 
-/* Icon-primary */
+/* Tertiary - monochrome */
 
-:host(.button-variant-icon-primary) .button,
-:host(.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;
+: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(.button-variant-icon-primary) .icon-container {
-  width: var(--ic-space-lg) !important;
-  height: var(--ic-space-lg) !important;
+: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(.button-variant-icon-primary) .button:hover,
-:host(.button-variant-icon-primary) ::slotted(a:hover) {
-  background-color: var(--button-default-hover);
+: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(.button-variant-icon-primary) .button:active,
-:host(.button-variant-icon-primary) ::slotted(a:active),
-:host(.button-variant-icon-primary.loading) .button {
-  background: var(--button-default-active);
+: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(.button-variant-icon-primary.loading) .button ic-loading-indicator {
-  --inner-color: var(--ic-architectural-white);
+: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(.button-variant-icon-primary.disabled) .button,
-:host(.button-variant-icon-primary.disabled) ::slotted(a) {
-  color: var(--ic-architectural-300);
-  background: var(--ic-architectural-200);
+: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(.button-variant-icon-primary.light) .button,
-:host(.button-variant-icon-primary.light) ::slotted(a) {
-  color: var(--ic-color-primary-text);
+:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) ::slotted(a),
+:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome)
+  ::slotted(a) {
+  background: none !important;
 }
 
-:host(.button-variant-icon-primary.light) .button:hover,
-:host(.button-variant-icon-primary.light) ::slotted(a:hover) {
-  background: var(--ic-action-light-hover);
+/* Destructive */
+
+:host(.ic-button-variant-destructive) .button,
+:host(.ic-button-variant-icon-destructive) .button {
+  color: var(--ic-button-destructive-text);
+  background-color: var(--ic-button-destructive-background);
+  text-transform: uppercase;
 }
 
-:host(.button-variant-icon-primary.light) .button:active,
-:host(.button-variant-icon-primary.light) ::slotted(a:active),
-:host(.button-variant-icon-primary.light.loading) .button,
-:host(.button-variant-icon-primary.light.loading) ::slotted(a) {
-  background: var(--ic-action-light-active);
+: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(.button-variant-icon-primary.dark) .button:hover,
-:host(.button-variant-icon-primary.dark) ::slotted(a:hover) {
-  background: var(--ic-action-dark-hover);
+:host(.ic-button-variant-destructive) .button:hover,
+:host(.ic-button-variant-icon-destructive) .button:hover {
+  background-color: var(--ic-button-destructive-background-hover);
 }
 
-:host(.button-variant-icon-primary.dark) .button:active,
-:host(.button-variant-icon-primary.dark) ::slotted(a:active),
-:host(.button-variant-icon-primary.dark.loading) .button,
-:host(.button-variant-icon-primary.dark.loading) ::slotted(a) {
-  background: var(--ic-action-dark-active);
+: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;
 }
 
-/* Icon-secondary */
+:host(.ic-button-variant-destructive) .button:active,
+: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(.button-variant-icon-secondary) .button,
-:host(.button-variant-icon-secondary) ::slotted(a) {
-  border: var(--ic-border-width) solid var(--button-default);
-  color: var(--button-default);
+: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-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 {
+  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(.button-variant-icon-secondary) .icon-container {
+:host(.ic-button-variant-icon) ::slotted(a) {
+  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;
+}
+
+:host(.ic-button-variant-icon) .icon-container {
   width: var(--ic-space-lg) !important;
   height: var(--ic-space-lg) !important;
 }
 
-:host(.button-variant-icon-secondary) .button:hover,
-:host(.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) .button:hover {
+  color: var(--ic-button-icon-color-hover);
+  background-color: var(--ic-button-icon-color-background-hover);
 }
 
-:host(.button-variant-icon-secondary) .button:active,
-:host(.button-variant-icon-secondary) ::slotted(a:active),
-:host(.button-variant-icon-secondary.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) ::slotted(a: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.ic-button-loading) .button {
+  color: var(--ic-button-icon-color-active);
+  background-color: var(--ic-button-icon-color-background-acti);
+}
+
+: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(.button-variant-icon-secondary.disabled) .button,
-:host(.button-variant-icon-secondary.disabled) .button:hover,
-:host(.button-variant-icon-secondary.disabled) .button:active,
-:host(.button-variant-icon-secondary.disabled) ::slotted(a),
-:host(.button-variant-icon-secondary.disabled) ::slotted(a:hover),
-:host(.button-variant-icon-secondary.disabled) ::slotted(a:active) {
-  border-color: var(--ic-architectural-300);
+:host(.ic-button-variant-icon.ic-button-disabled) .button {
   color: var(--ic-architectural-300);
   background: none;
 }
 
-:host(.button-variant-icon-secondary.light.disabled) .button,
-:host(.button-variant-icon-secondary.light.disabled) .button:hover,
-:host(.button-variant-icon-secondary.light.disabled) .button:active,
-:host(.button-variant-icon-secondary.light.disabled) ::slotted(a),
-:host(.button-variant-icon-secondary.light.disabled) ::slotted(a:hover),
-:host(.button-variant-icon-secondary.light.disabled) ::slotted(a:active) {
-  border-color: var(--ic-architectural-500);
-  color: var(--ic-architectural-500);
+:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a) {
+  color: var(--ic-architectural-300);
+  background: none !important;
 }
 
-/* Icon-tertiary */
+/* Icon-primary */
 
-:host(.button-variant-icon-tertiary) .button,
-:host(.button-variant-icon-tertiary) ::slotted(a) {
-  color: var(--button-default);
+:host(.ic-button-variant-icon-primary) .button,
+:host(.ic-button-variant-icon-primary) ::slotted(a) {
   min-width: 0;
   gap: var(--ic-space-xs);
   margin: var(--ic-space-1px) 0;
 }
 
-:host(.button-variant-icon-tertiary) .icon-container {
+:host(.ic-button-variant-icon-primary) .icon-container {
   width: var(--ic-space-lg) !important;
   height: var(--ic-space-lg) !important;
 }
 
-:host(.button-variant-icon-tertiary) .button:hover,
-:host(.button-variant-icon-tertiary) ::slotted(a:hover) {
-  background-color: var(--button-default-background-hover);
-  color: var(--button-default-hover);
+:host(.ic-button-variant-icon.monochrome) ::slotted(a),
+:host(.ic-button-variant-icon.monochrome) ::slotted(svg) {
+  color: var(--ic-button-icon-monochrome);
 }
 
-:host(.button-variant-icon-tertiary) .button:active,
-:host(.button-variant-icon-tertiary) ::slotted(a:active),
-:host(.button-variant-icon-tertiary.loading) .button {
-  background-color: var(--button-default-background-active);
-  color: var(--button-default-active);
+/* Icon-secondary */
+
+:host(.ic-button-variant-icon-secondary) .button,
+:host(.ic-button-variant-icon-secondary) ::slotted(a) {
+  min-width: 0;
+  gap: var(--ic-space-xs);
+  margin: var(--ic-space-1px) 0;
 }
 
-:host(.button-variant-icon-tertiary.disabled) .button,
-:host(.button-variant-icon-tertiary.disabled) .button:hover,
-:host(.button-variant-icon-tertiary.disabled) .button:active,
-:host(.button-variant-icon-tertiary.disabled) ::slotted(a),
-:host(.button-variant-icon-tertiary.disabled) ::slotted(a:hover),
-:host(.button-variant-icon-tertiary.disabled) ::slotted(a:active) {
-  color: var(--ic-architectural-300);
-  background: none;
+:host(.ic-button-variant-icon-secondary) .icon-container {
+  width: var(--ic-space-lg) !important;
+  height: var(--ic-space-lg) !important;
 }
 
-/* Icon-destructive */
+/* Icon-tertiary */
 
-:host(.button-variant-icon-destructive) .button,
-:host(.button-variant-icon-destructive) ::slotted(a) {
-  color: var(--ic-color-white-text);
-  background-color: var(--ic-action-destructive);
+:host(.ic-button-variant-icon-tertiary) .button,
+:host(.ic-button-variant-icon-tertiary) ::slotted(a) {
   min-width: 0;
   gap: var(--ic-space-xs);
   margin: var(--ic-space-1px) 0;
 }
 
-:host(.button-variant-icon-destructive) .icon-container {
+:host(.ic-button-variant-icon-tertiary) .icon-container {
   width: var(--ic-space-lg) !important;
   height: var(--ic-space-lg) !important;
 }
 
-:host(.button-variant-icon-destructive) .button:hover,
-:host(.button-variant-icon-destructive) ::slotted(a:hover) {
-  background-color: var(--ic-action-destructive-hover);
-}
-
-:host(.button-variant-icon-destructive) .button:active,
-:host(.button-variant-icon-destructive) ::slotted(a:active),
-:host(.button-variant-icon-destructive.loading) .button {
-  background-color: var(--ic-action-destructive-active);
-}
+/* Icon-destructive */
 
-:host(.button-variant-icon-destructive.loading) .button ic-loading-indicator {
-  --inner-color: var(--ic-architectural-white);
+:host(.ic-button-variant-icon-destructive) .button,
+:host(.ic-button-variant-icon-destructive) ::slotted(a) {
+  min-width: 0;
+  gap: var(--ic-space-xs);
+  margin: var(--ic-space-1px) 0;
 }
 
-:host(.button-variant-icon-destructive.disabled) .button,
-:host(.button-variant-icon-destructive.disabled) .button:hover,
-:host(.button-variant-icon-destructive.disabled) .button:active,
-:host(.button-variant-icon-destructive.disabled) ::slotted(a),
-:host(.button-variant-icon-destructive.disabled) ::slotted(a:hover),
-:host(.button-variant-icon-destructive.disabled) ::slotted(a:active) {
-  background: var(--ic-architectural-200);
-  color: var(--ic-architectural-300);
+:host(.ic-button-variant-icon-destructive) .icon-container {
+  width: var(--ic-space-lg) !important;
+  height: var(--ic-space-lg) !important;
 }
 
 /* Sizing */
 
-:host(.button-size-default) .button {
+:host(.ic-button-size-medium) .button {
   height: var(--height, 2.5rem);
   padding: var(--ic-space-xs) var(--ic-space-md);
 }
 
-:host(.button-size-small) .button {
+: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(.button-size-large) .button {
+: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(.button-size-default.button-variant-icon) .button,
-:host(.button-size-default.button-variant-icon-primary) .button,
-:host(.button-size-default.button-variant-icon-secondary) .button,
-:host(.button-size-default.button-variant-icon-tertiary) .button,
-:host(.button-size-default.button-variant-icon-destructive) .button,
-:host(.button-size-default.button-variant-icon-primary) ::slotted(a),
-:host(.button-size-default.button-variant-icon-secondary) ::slotted(a),
-:host(.button-size-default.button-variant-icon-tertiary) ::slotted(a),
-:host(.button-size-default.button-variant-icon-destructive) ::slotted(a),
-:host(.button-size-default.button-variant-icon) ::slotted(a) {
+: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 {
   height: var(--height, var(--ic-space-xl));
   width: var(--ic-space-xl);
   padding: 0.375rem;
 }
 
-:host(.button-size-small.button-variant-icon) .button,
-:host(.button-size-small.button-variant-icon-primary) .button,
-:host(.button-size-small.button-variant-icon-secondary) .button,
-:host(.button-size-small.button-variant-icon-tertiary) .button,
-:host(.button-size-small.button-variant-icon-destructive) .button,
-:host(.button-size-small.button-variant-icon-primary) ::slotted(a),
-:host(.button-size-small.button-variant-icon-secondary) ::slotted(a),
-:host(.button-size-small.button-variant-icon-tertiary) ::slotted(a),
-:host(.button-size-small.button-variant-icon-destructive) ::slotted(a),
-:host(.button-size-small.button-variant-icon) ::slotted(a) {
+: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 {
   height: var(--height, var(--ic-space-lg));
   width: var(--ic-space-lg);
   padding: var(--ic-space-xxs);
 }
 
-:host(.button-size-large.button-variant-icon) .button,
-:host(.button-size-large.button-variant-icon-primary) .button,
-:host(.button-size-large.button-variant-icon-secondary) .button,
-:host(.button-size-large.button-variant-icon-tertiary) .button,
-:host(.button-size-large.button-variant-icon-destructive) .button,
-:host(.button-size-large.button-variant-icon-primary) ::slotted(a),
-:host(.button-size-large.button-variant-icon-secondary) ::slotted(a),
-:host(.button-size-large.button-variant-icon-tertiary) ::slotted(a),
-:host(.button-size-large.button-variant-icon-destructive) ::slotted(a),
-:host(.button-size-large.button-variant-icon) ::slotted(a) {
+: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)) !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) !important;
+  width: 2.5rem !important;
+  padding: var(--ic-space-xs) !important;
+}
+
 /* Width */
-:host(.full-width),
-:host(.full-width) .button,
-:host(.full-width) ::slotted(a) {
+:host(.ic-button-full-width),
+:host(.ic-button-full-width) .button {
   width: 100%;
 }
 
+:host(.ic-button-full-width) ::slotted(a) {
+  width: 100% !important;
+}
+
 /* Loading */
 
 div.loading-container {
@@ -999,7 +1263,8 @@ div.loading-container {
 }
 
 ic-loading-indicator {
-  --outer-color: transparent;
+  --inner-color: var(--button-loading-inner-color);
+  --outer-color: var(--button-loading-outer-color), transparent;
 }
 
 @keyframes loading-animation {
@@ -1049,7 +1314,7 @@ div.right-icon {
   margin-left: var(--ic-space-xs);
 }
 
-:host(.full-width) .right-icon {
+:host(.ic-button-full-width) .right-icon {
   margin-right: var(--ic-space-xs);
 }
 
@@ -1060,7 +1325,7 @@ div.right-icon {
   pointer-events: none;
 }
 
-:host(.button-variant-icon) .button .icon-container {
+:host(.ic-button-variant-icon) .button .icon-container {
   margin: 0;
   pointer-events: none;
 }
@@ -1070,20 +1335,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 {
@@ -1095,15 +1355,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 {
@@ -1132,6 +1487,7 @@ div.right-icon {
 }
 
 /** Dropdown **/
+
 :host .arrow-dropdown {
   margin-top: auto;
 }
@@ -1146,6 +1502,7 @@ div.right-icon {
 }
 
 /** Slotted router item **/
+
 slot[name="router-item"]::slotted(a) {
   pointer-events: all;
 }
@@ -1156,120 +1513,42 @@ slot[name="router-item"]::slotted(a) {
   vertical-align: middle !important;
 }
 
-:host(.white-background) ::slotted(a) {
-  background-color: var(--ic-architectural-white) !important;
-}
-
-:host(.button-variant-primary) ::slotted(a) {
-  background-color: var(--button-default) !important;
-}
-
-:host(.button-variant-primary) ::slotted(a:hover) {
-  background-color: var(--button-default-hover) !important;
-}
-
-:host(.button-variant-primary) ::slotted(a:active) {
-  background-color: var(--button-default-active) !important;
-}
+/** menu button on top navigation\side navigation 
+  * uses secondary monochrome tokens which are duplicated here to avoid multiple copies in each component
+  */
 
-:host(.button-variant-primary.disabled) ::slotted(a),
-:host(.button-variant-destructive.disabled) ::slotted(a) {
-  background: var(--ic-architectural-200) !important;
-}
-
-:host(.button-variant-primary.light.disabled) ::slotted(a) {
-  background: var(--ic-architectural-600) !important;
-}
-
-:host(.button-variant-secondary) ::slotted(a) {
-  border: var(--ic-border-width) solid var(--button-default) !important;
-}
-
-:host(.button-variant-secondary) ::slotted(a:hover) {
-  background-color: var(--button-default-background-hover) !important;
-  border-color: var(--button-default-hover) !important;
-}
-
-:host(.button-variant-secondary) ::slotted(a:active) {
-  border-color: var(--button-default-active) !important;
-  background-color: var(--button-default-background-active) !important;
-}
-
-:host(.button-variant-secondary.disabled) ::slotted(a),
-:host(.button-variant-secondary.disabled) ::slotted(a:hover),
-:host(.button-variant-secondary.disabled) ::slotted(a:active),
-:host(.button-variant-tertiary.disabled) ::slotted(a),
-:host(.button-variant-tertiary.disabled) ::slotted(a:hover),
-:host(.button-variant-tertiary.disabled) ::slotted(a:active) {
-  border-color: var(--ic-architectural-300) !important;
-  background: none !important;
-}
-
-:host(.button-variant-secondary.light.disabled) ::slotted(a),
-:host(.button-variant-secondary.light.disabled) ::slotted(a:hover),
-:host(.button-variant-secondary.light.disabled) ::slotted(a:active),
-:host(.button-variant-tertiary.light.disabled) ::slotted(a),
-:host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),
-:host(.button-variant-tertiary.light.disabled) ::slotted(a:active) {
-  border-color: var(--ic-architectural-500) !important;
-}
-
-:host(.button-variant-tertiary) ::slotted(a:hover),
-:host(.button-variant-icon) ::slotted(a:hover) {
-  background-color: var(--button-default-background-hover) !important;
-}
-
-:host(.button-variant-tertiary) ::slotted(a:active:not(:focus)),
-:host(.button-variant-tertiary) ::slotted(a:active:focus),
-:host(.button-variant-tertiary) ::slotted(a:active),
-:host(.button-variant-icon) ::slotted(a:active:not(:focus)) {
-  background-color: var(--button-default-background-active) !important;
-}
-
-:host(.button-variant-icon.disabled) ::slotted(a),
-:host(.button-variant-icon.disabled) ::slotted(a:hover),
-:host(.button-variant-icon.disabled) ::slotted(a:active) {
-  background: none !important;
-}
-
-:host(.button-variant-destructive) ::slotted(a) {
-  background-color: var(--ic-action-destructive) !important;
-}
-
-:host(.button-variant-destructive) ::slotted(a:hover) {
-  background-color: var(--ic-action-destructive-hover) !important;
-}
-
-:host(.button-variant-destructive) ::slotted(a:active) {
-  background-color: var(--ic-action-destructive-active) !important;
-}
-
-:host(.button-size-default) ::slotted(a) {
-  height: var(--height, 2.5rem) !important;
-  padding: var(--ic-space-xs) var(--ic-space-md) !important;
-}
-
-:host(.button-size-small) ::slotted(a) {
-  height: var(--height, var(--ic-space-xl)) !important;
-  padding: var(--ic-space-xxs) var(--ic-space-md) !important;
-}
-
-:host(.button-size-large) ::slotted(a) {
-  height: var(--height, var(--ic-space-xxl)) !important;
-  padding: var(--ic-space-sm) var(--ic-space-md) !important;
-}
-
-:host(.button-size-default.button-variant-icon) ::slotted(a) {
-  height: var(--height, var(--ic-space-xl)) !important;
-  padding: 0.375rem !important;
-}
-
-:host(.button-size-small.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(.button-size-large.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 **/
@@ -1278,6 +1557,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 **/