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

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

@@ -443,28 +443,93 @@ video {
 
 /* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */
 :host {
-  --button-border: var(
-    --toggle-button-border,
-    var(--ic-border-width) solid var(--ic-action-default)
+  --toggle-button-border: var(--ic-toggle-button-unselected-border);
+  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text);
+  --toggle-button-border-hover: var(--ic-toggle-button-unselected-border-hover);
+  --toggle-button-text-colour-hover: var(
+    --ic-toggle-button-unselected-text-hover
+  );
+  --toggle-button-border-active: var(
+    --ic-toggle-button-unselected-border-pressed
+  );
+  --toggle-button-text-colour-active: var(
+    --ic-toggle-button-unselected-text-pressed
   );
 }
 
-:host(.dark) {
-  --button-border: var(
-    --toggle-button-border,
-    var(--ic-border-width) solid var(--ic-action-dark)
+:host(.ic-toggle-button-checked) {
+  --toggle-button-border: var(--ic-toggle-button-selected-border);
+  --toggle-button-text-colour: var(--ic-toggle-button-selected-text);
+  --toggle-button-border-hover: var(--ic-toggle-button-selected-border-hover);
+  --toggle-button-text-colour-hover: var(--ic-toggle-button-selected-text);
+  --toggle-button-border-active: var(
+    --ic-toggle-button-selected-border-pressed
+  );
+  --toggle-button-text-colour-active: var(--ic-toggle-button-selected-text);
+}
+
+:host(.ic-toggle-button-monochrome) {
+  --toggle-button-border: var(--ic-toggle-button-unselected-border-monochrome);
+  --toggle-button-text-colour: var(
+    --ic-toggle-button-unselected-text-monochrome
+  );
+  --toggle-button-border-hover: var(
+    --ic-toggle-button-unselected-border-hover-monochrome
+  );
+  --toggle-button-text-colour-hover: var(
+    --ic-toggle-button-unselected-text-monochrome
+  );
+  --toggle-button-border-active: var(
+    --ic-toggle-button-unselected-border-pressed-monochrome
+  );
+  --toggle-button-text-colour-active: var(
+    --ic-toggle-button-unselected-text-monochrome
+  );
+}
+
+:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) {
+  --toggle-button-border: var(--ic-toggle-button-selected-border-monochrome);
+  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-monochrome);
+  --toggle-button-border-hover: var(
+    --ic-toggle-button-selected-border-hover-monochrome
+  );
+  --toggle-button-text-colour-hover: var(
+    --ic-toggle-button-selected-text-monochrome
   );
+  --toggle-button-border-active: var(
+    --ic-toggle-button-selected-border-pressed-monochrome
+  );
+  --toggle-button-text-colour-active: var(
+    --ic-toggle-button-selected-text-monochrome
+  );
+}
+
+:host(.ic-toggle-button-disabled) {
+  --toggle-button-border: var(--ic-toggle-button-unselected-border-disabled);
+  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text-disabled);
 }
 
-:host(.light) {
-  --button-border: var(
-    --toggle-button-border,
-    var(--ic-border-width) solid var(--ic-action-light)
+:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome) {
+  --toggle-button-border: var(
+    --ic-toggle-button-unselected-border-disabled-monochrome
+  );
+  --toggle-button-text-colour: var(
+    --ic-toggle-button-unselected-text-disabled-monochrome
   );
 }
 
-:host(.disabled) {
-  --button-border: var(--toggle-button-border, var(--ic-border-disabled));
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked) {
+  --toggle-button-border: var(--ic-toggle-button-selected-border-disabled);
+  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);
+}
+
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) {
+  --toggle-button-border: var(
+    --ic-toggle-button-selected-border-disabled-monochrome
+  );
+  --toggle-button-text-colour: var(
+    --ic-toggle-button-selected-text-disabled-monochrome
+  );
 }
 
 :host(.expand-toggle-group-child) ::part(button) {
@@ -487,13 +552,14 @@ video {
 }
 
 :host(.expand-toggle-group-child) ::part(button):focus,
-:host(.expand-toggle-group-child.checked) ::part(button):focus {
+:host(.expand-toggle-group-child.ic-toggle-button-checked)
+  ::part(button):focus {
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),
     var(--ic-border-focus);
 }
 
-:host(.expand-toggle-group-child.light) ::part(button):focus,
-:host(.expand-toggle-group-child.dark) ::part(button):focus {
+:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,
+:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),
     var(--ic-border-focus);
 }
@@ -503,139 +569,211 @@ video {
 }
 
 :host ::part(button) {
-  border: var(--button-border);
+  border: var(--ic-border-width) solid var(--toggle-button-border);
+  color: var(--toggle-button-text-colour);
+}
+
+:host ::part(button):hover {
+  border: var(--ic-border-width) solid var(--toggle-button-border-hover);
+  color: var(--toggle-button-text-colour-hover);
+}
+
+:host ::part(button):active {
+  border: var(--ic-border-width) solid var(--toggle-button-border-active);
+  color: var(--toggle-button-text-colour-active);
 }
 
-:host(.checked) ::part(button) {
-  background-color: var(--ic-action-default);
-  color: var(--ic-architectural-white);
-  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white);
+:host(.ic-toggle-button-disabled) ::part(button) {
+  border: var(--ic-space-1px) dashed var(--toggle-button-border);
+  color: var(--toggle-button-text-colour);
 }
 
-:host(.checked) ::part(button):focus {
+:host(.ic-toggle-button-checked) ::part(button) {
+  background-color: var(--ic-toggle-button-selected-background);
+  box-shadow: inset 0 0 0 var(--ic-space-xxxs)
+    var(--ic-toggle-button-selected-text);
+}
+
+:host(.ic-toggle-button-checked) ::part(button):focus {
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),
     var(--ic-border-focus);
 }
 
-:host(.checked) ::part(button):hover {
-  background-color: var(--button-default-hover);
+:host ::part(button):hover {
+  background-color: var(--ic-toggle-button-unselected-background-hover);
 }
 
-:host(.checked) ::part(button):active,
-:host(.icon.checked) ::part(button):active {
-  background-color: var(--ic-action-default-active);
+:host ::part(button):active {
+  background-color: var(--ic-toggle-button-unselected-background-pressed);
 }
 
-:host(.dark.checked) ::part(button) {
-  background-color: var(--ic-action-dark);
+:host(.ic-toggle-button-checked) ::part(button):hover {
+  background-color: var(--ic-toggle-button-selected-background-hover);
 }
 
-:host(.dark.checked) ::part(button):hover {
-  background-color: var(--ic-action-dark-hover);
+:host(.ic-toggle-button-checked) ::part(button):active,
+:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {
+  background-color: var(--ic-toggle-button-selected-background-pressed);
 }
 
-:host(.dark.checked) ::part(button):active,
-:host(.icon.dark.checked) ::part(button):active {
-  background-color: var(--ic-action-dark-active);
+:host(.ic-toggle-button-monochrome) ::part(button):hover {
+  background-color: var(
+    --ic-toggle-button-unselected-background-hover-monochrome
+  );
 }
 
-:host(.light.checked) ::part(button) {
-  background-color: var(--ic-action-light);
-  color: var(--ic-color-primary-text);
-  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black);
+:host(.ic-toggle-button-monochrome) ::part(button):active {
+  background-color: var(
+    --ic-toggle-button-unselected-background-pressed-monochrome
+  );
 }
 
-:host(.light.checked) ::part(button):hover {
-  background-color: var(--ic-action-light-hover);
+:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button) {
+  background-color: var(--ic-toggle-button-selected-background-monochrome);
 }
 
-:host(.light.checked) ::part(button):active,
-:host(.icon.light.checked) ::part(button):active {
-  background-color: var(--ic-action-light-active);
+:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)
+  ::part(button):hover {
+  background-color: var(
+    --ic-toggle-button-selected-background-hover-monochrome
+  );
 }
 
-:host(.light.checked) ::part(button):focus {
-  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black),
-    var(--ic-border-focus);
+:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)
+  ::part(button):active,
+:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked)
+  ::part(button):active {
+  background-color: var(
+    --ic-toggle-button-selected-background-pressed-monochrome
+  );
 }
 
-:host(.disabled) ::part(button),
-:host(.icon.disabled) ::part(button) {
-  border: var(--button-border);
+:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)
+  ::part(button):focus {
+  box-shadow: inset 0 0 0 var(--ic-space-xxxs)
+      var(--ic-toggle-button-selected-text),
+    var(--ic-border-focus);
 }
 
-:host(.disabled.checked) ::part(button),
-:host(.icon.disabled.checked) ::part(button) {
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),
+:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)
+  ::part(button) {
   background-color: transparent;
 }
 
-:host(.disabled.checked) ::part(button),
-:host(.icon.disabled.checked) ::part(button)::before {
-  background-image: radial-gradient(var(--ic-architectural-400) 95%, white 20%);
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),
+:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)
+  ::part(button)::before {
+  background-image: radial-gradient(
+    var(--ic-toggle-button-selected-background-disabled) 95%,
+    white 20%
+  );
+  background-repeat: no-repeat;
+}
+
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)
+  ::part(button),
+:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)
+  ::part(button)::before {
+  background-image: radial-gradient(
+    var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,
+    white 20%
+  );
   background-repeat: no-repeat;
 }
 
-:host(.icon) ::part(button) {
-  border: var(--button-border);
+:host(.ic-toggle-button-icon) ::part(button) {
   height: calc(var(--ic-space-xl) + var(--ic-space-xs));
   width: calc(var(--ic-space-xl) + var(--ic-space-xs));
 }
 
-:host(.icon) ::part(button):active {
-  background-color: var(--ic-action-default-bg-active);
+:host(.ic-toggle-button-icon) ::part(button):active {
+  background-color: var(--ic-action-default-bg-pressed);
 }
 
-:host(.icon.dark) ::part(button):active {
-  background-color: var(--ic-action-dark-bg-active);
+:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {
+  background-color: var(--ic-action-dark-bg-pressed);
 }
 
-:host(.icon.light) ::part(button):active {
-  background-color: var(--ic-action-light-bg-active);
+:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {
+  background-color: var(--ic-action-light-bg-pressed);
 }
 
-:host(.icon.small) ::part(button) {
+:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {
   height: var(--ic-space-xl);
   width: var(--ic-space-xl);
 }
 
-:host(.icon.large) ::part(button) {
+:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {
   height: var(--ic-space-xxl);
   width: var(--ic-space-xxl);
 }
 
-:host(.checked.loading) ::part(button) {
-  background-color: var(--button-default-active);
+:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {
+  --loading-button-background: var(
+    --ic-toggle-button-selected-background-pressed
+  );
+  background-color: var(--ic-toggle-button-selected-background-pressed);
+}
+
+:host(.ic-toggle-button-loading) ::part(button) {
+  --loading-button-background: var(
+    --ic-toggle-button-unselected-background-pressed
+  );
+  background-color: var(--ic-toggle-button-unselected-background-pressed);
+}
+
+:host(.ic-toggle-button-checked.ic-toggle-button-loading)
+  ::part(ic-loading-container) {
+  --inner-color: var(--ic-toggle-button-loading-bar);
 }
 
-:host(.loading) ::part(ic-loading-container) {
-  --inner-color: var(--ic-architectural-white);
+:host(.ic-toggle-button-loading) ::part(ic-loading-container) {
+  --inner-color: var(--ic-toggle-button-selected-loading-bar);
 }
 
-:host(.checked.loading.light) ::part(button) {
-  background-color: var(--ic-action-light-active);
+:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome)
+  ::part(button) {
+  --loading-button-background: var(
+    --ic-toggle-button-selected-background-pressed-monochrome
+  );
+  background-color: var(
+    --ic-toggle-button-selected-background-pressed-monochrome
+  );
 }
 
-:host(.checked.loading.dark) ::part(button) {
-  background-color: var(--ic-action-dark-active);
+:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button) {
+  --loading-button-background: var(
+    --ic-toggle-button-unselected-background-pressed-monochrome
+  );
+  background-color: var(
+    --ic-toggle-button-unselected-background-pressed-monochrome
+  );
 }
 
 @media (forced-colors: active) {
-  :host(.checked) ::part(button),
-  :host(.checked) ::part(button):hover {
+  :host(.ic-toggle-button-checked) ::part(button),
+  :host(.ic-toggle-button-checked) ::part(button):hover {
     background-color: Highlight;
   }
 
-  :host(.checked.light) ::part(button),
-  :host(.checked.light) ::part(button):hover {
+  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),
+  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {
     background-color: Highlight;
   }
 
-  :host(.checked.dark) ::part(button),
-  :host(.checked.dark) ::part(button):hover {
+  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),
+  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {
     background-color: Highlight;
   }
 
-  :host(.checked.disabled) ::part(button) {
+  :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {
     background-color: GrayText;
   }
+
+  :host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button),
+  :host(.ic-toggle-button-checked.ic-toggle-button-loading)
+    ::part(button):hover {
+    --loading-button-background: Highlight;
+  }
 }