@redvars/peacock 3.6.2 → 3.7.0

package/src/button/button/button.scss

@@ -4,10 +4,6 @@
 
 
 :host {
-  display: inline-flex;
-
-
-  --button-height: unset;
   --button-icon-size: unset;
   --button-container-padding: unset;
   --button-container-shape: var(--shape-corner-medium);
@@ -18,231 +14,127 @@
   --button-container-shape-variant: squircle;
 }
 
-/**
-  * Private CSS Variables
-  * These variables are used internally within the button component
-  */
-slot::slotted(*) {
-  --icon-size: var(--button-icon-size, var(--_button-icon-size));
-  --icon-color: var(--_button_label-text-color);
+:host {
+  position: relative;
+  display: inline-flex;
+  min-height: var(--button-height);
+
+  --private-button-container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape));
+  --private-button-container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape));
+  --private-button-container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape));
+  --private-button-container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape));
+  --private-button-container-shape-variant: var(--button-container-shape-variant);
 }
 
 /*
   * Reset native button/link styles
   */
-.button-element {
-  background: transparent;
-  border: none;
-  appearance: none;
-  margin: 0;
-  outline: none;
-  text-decoration: none;
+.native-button {
+  @include mixin.reset-button-styles;
+}
+.native-link {
+  @include mixin.reset-link-styles;
 }
 
 .button {
-  position: relative;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   height: var(--button-height);
-  padding: 0 var(--button-container-padding, var(--_button_container-padding));
+  padding: 0 var(--button-container-padding, var(--private-button-container-padding));
   width: 100%;
-  font-family: var(--font-family-sans) !important;
+  z-index: 0;
+
   cursor: pointer;
 
-  --_button_container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape));
-  --_button_container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape));
-  --_button_container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape));
-  --_button_container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape));
-  --_button_container-corner-shape-variant: var(--button-container-shape-variant);
 
 
-  .button-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    gap: var(--_button-icon-label-spacing);
-    width: 100%;
-    height: 100%;
-    z-index: 0;
+  .label {
+    font-family: var(--font-family-sans) !important;
+    font-size: var(--private-button-font-size);
+    font-weight: var(--private-button-font-weight);
+    line-height: var(--private-button-line-height);
+    letter-spacing: var(--private-button-letter-spacing);
+    color: var(--private-button-label-text-color);
 
-    color: var(--_button_label-text-color);
-    opacity: var(--_button_label-text-opacity, 1);
-    --icon-size: var(--button-icon-size, var(--_button-icon-size));
-    --icon-color: var(--_button_label-text-color);
+    --icon-size: var(--button-icon-size, var(--private-button-icon-size));
+    --icon-color: var(--private-button-label-text-color);
 
-    .slot-container {
-      display: none;
-    }
-
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-
-  /*
-    Background layers
-   */
-  .focus-ring {
-    z-index: 2;
-    --focus-ring-container-shape-start-start: var(--_button_container-shape-start-start);
-    --focus-ring-container-shape-start-end: var(--_button_container-shape-start-end);
-    --focus-ring-container-shape-end-start: var(--_button_container-shape-end-start);
-    --focus-ring-container-shape-end-end: var(--_button_container-shape-end-end);
-    --focus-ring-container-shape-variant: var(--_button_container-corner-shape-variant);
-  }
-
-  .ripple {
-    border-start-start-radius: var(--_button_container-shape-start-start);
-    border-start-end-radius: var(--_button_container-shape-start-end);
-    border-end-start-radius: var(--_button_container-shape-end-start);
-    border-end-end-radius: var(--_button_container-shape-end-end);
-    corner-shape: var(--_button_container-corner-shape-variant);
-    --ripple-state-opacity: var(--_button_state-opacity, 0);
-    --ripple-pressed-color: var(--_button_state-color);
+    pointer-events: none;
   }
 
-  .background {
-    display: block;
+  .touch {
     position: absolute;
-    left: 0;
-    width: 100%;
+    min-height: 2.5rem;
     height: 100%;
-    background-color: var(--_button_container-color);
-    opacity: var(--_button_container-opacity, 1);
-
-    border-start-start-radius: var(--_button_container-shape-start-start);
-    border-start-end-radius: var(--_button_container-shape-start-end);
-    border-end-start-radius: var(--_button_container-shape-end-start);
-    border-end-end-radius: var(--_button_container-shape-end-end);
-    corner-shape: var(--_button_container-corner-shape-variant);
-    pointer-events: none;
-  }
-
-  .skeleton {
-    display: none;
     width: 100%;
-    height: 100%;
-    z-index: 2;
-    position: absolute;
-    top: 0;
+    top: auto;
     left: 0;
-    --skeleton-container-shape-start-start: var(--_button_container-shape-start-start);
-    --skeleton-container-shape-start-end: var(--_button_container-shape-start-end);
-    --skeleton-container-shape-end-start: var(--_button_container-shape-end-start);
-    --skeleton-container-shape-end-end: var(--_button_container-shape-end-end);
-    --skeleton-container-shape-variant: var(--_button_container-corner-shape-variant);
+    transform: translateY(-25%);
   }
 
-  .elevation {
-    --elevation-level: var(--_button_container-elevation-level);
-    transition-duration: 280ms;
-    --elevation-container-shape-start-start: var(--_button_container-shape-start-start);
-    --elevation-container-shape-start-end: var(--_button_container-shape-start-end);
-    --elevation-container-shape-end-start: var(--_button_container-shape-end-start);
-    --elevation-container-shape-end-end: var(--_button_container-shape-end-end);
-    --elevation-container-shape-variant: var(--_button_container-corner-shape-variant);
-  }
-
-  .neo-background {
-    display: none;
-    position: absolute;
-    background: var(--color-inverse-surface);
-    border-start-start-radius: var(--_button_container-shape-start-start);
-    border-start-end-radius: var(--_button_container-shape-start-end);
-    border-end-start-radius: var(--_button_container-shape-end-start);
-    border-end-end-radius: var(--_button_container-shape-end-end);
-    corner-shape: var(--_button_container-corner-shape-variant);
-    width: 100%;
-    height: 100%;
+  /* make the icon slot itself collapsible so removal animates smoothly */
+  .icon-slot {
+    display: inline-flex;
+    align-items: center;
+    overflow: hidden;
     pointer-events: none;
-    transform: translateX(0.25rem) translateY(0.25rem);
   }
 
-  .outline {
-    z-index: 0;
-    display: none;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    border: var(--_button_outline-width) solid var(--_button_outline-color);
-    opacity: var(--_button_outline-opacity, 1);
-    border-start-start-radius: var(--_button_container-shape-start-start);
-    border-start-end-radius: var(--_button_container-shape-start-end);
-    border-end-start-radius: var(--_button_container-shape-end-start);
-    border-end-end-radius: var(--_button_container-shape-end-end);
-    corner-shape: var(--_button_container-corner-shape-variant);
+  .icon-slot::slotted(*) {
+    --icon-size: var(--button-icon-size, var(--private-button-icon-size));
+    --icon-color: var(--private-button-label-text-color);
+    opacity: var(--private-button-label-text-opacity, 1);
   }
 
+}
 
-  &.has-content {
-    .slot-container {
-      display: flex;
-      flex: none;
-      justify-content: center;
-    }
-  }
-
-  &.show-skeleton {
-    .background {
-      display: none;
-    }
-    .neo-background {
-      display: none;
-      &:before {
-        display: none;
-      }
-    }
-    .ripple {
-      display: none;
-    }
-    .skeleton {
-      display: block;
-    }
-  }
 
-  &.icon-align-start .button-content {
-    flex-direction: row-reverse;
+:host([disabled]) , :host([soft-disabled]) {
+  cursor: not-allowed;
+}
 
+:host(:not([skeleton])) {
+  .skeleton {
+    display: none;
   }
+}
 
-  &.icon-align-end .button-content {
-    flex-direction: row;
+:host([skeleton]) {
+  .background {
+    display: none;
+  }
+  .ripple {
+    display: none;
   }
-
 }
 
+
 /**
  * Button variant definitions
  */
+:host([variant=elevated]) {
+  --private-button-container-color: var(--elevated-button-container-color);
+  --private-button-label-text-color: var(--elevated-button-label-text-color);
+  --private-button-container-elevation-level: 1;
 
-.button.variant-elevated {
-  --_button_container-color: var(--elevated-button-container-color);
-  --_button_label-text-color: var(--elevated-button-label-text-color);
-  --_button_container-elevation-level: 1;
+  --private-button-state-color: var(--private-button-label-text-color);
 
-  --_button_state-color: var(--_button_label-text-color);
-
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 2;
-    --_button_state-opacity: 0.08;
+  &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
+    --private-button-container-elevation-level: 2;
+    --private-button-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 1;
-    --_button_state-opacity: 0.12;
+  &:host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
+    --private-button-container-elevation-level: 1;
+    --private-button-state-opacity: 0.12;
   }
 
-  &.disabled {
-    --_button_container-color: var(--color-on-surface);
-    --_button_container-opacity: 0.1;
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
+  &:host([disabled]) {
+    --private-button-container-color: var(--color-on-surface);
+    --private-button-container-opacity: 0.1;
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -251,27 +143,27 @@ slot::slotted(*) {
 }
 
 
-.button.variant-filled {
-  --_button_container-color: var(--filled-button-container-color);
-  --_button_label-text-color: var(--filled-button-label-text-color);
-  --_button_state-color: var(--_button_label-text-color);
+:host([variant=filled]) {
+  --private-button-container-color: var(--filled-button-container-color);
+  --private-button-label-text-color: var(--filled-button-label-text-color);
+  --private-button-state-color: var(--private-button-label-text-color);
 
 
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 1;
-    --_button_state-opacity: 0.08;
+  &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
+    --private-button-container-elevation-level: 1;
+    --private-button-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 0;
-    --_button_state-opacity: 0.1;
+  &:host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
+    --private-button-container-elevation-level: 0;
+    --private-button-state-opacity: 0.1;
   }
 
-  &.disabled {
-    --_button_container-color: var(--color-on-surface);
-    --_button_container-opacity: 0.1;
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
+  &:host([disabled]) {
+    --private-button-container-color: var(--color-on-surface);
+    --private-button-container-opacity: 0.1;
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -279,28 +171,27 @@ slot::slotted(*) {
   }
 }
 
+:host([variant=tonal]) {
+  --private-button-container-color: var(--tonal-button-container-color);
+  --private-button-label-text-color: var(--tonal-button-label-text-color);
 
-.button.variant-tonal {
-  --_button_container-color: var(--tonal-button-container-color);
-  --_button_label-text-color: var(--tonal-button-label-text-color);
-
-  --_button_state-color: var(--_button_label-text-color);
+  --private-button-state-color: var(--private-button-label-text-color);
 
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 1;
-    --_button_state-opacity: 0.08;
+  &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
+    --private-button-container-elevation-level: 1;
+    --private-button-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 0;
-    --_button_state-opacity: 0.12;
+  &:host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
+    --private-button-container-elevation-level: 0;
+    --private-button-state-opacity: 0.12;
   }
 
-  &.disabled {
-    --_button_container-color: var(--color-on-surface);
-    --_button_container-opacity: 0.1;
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
+  &:host([disabled]) {
+    --private-button-container-color: var(--color-on-surface);
+    --private-button-container-opacity: 0.1;
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -308,31 +199,26 @@ slot::slotted(*) {
   }
 }
 
+:host([variant=outlined]) {
+  --private-button-outline-width: var(--outlined-button-outline-width, 0.0675rem);
+  --private-button-outline-color: var(--outlined-button-outline-color);
+  --private-button-label-text-color: var(--outlined-button-label-text-color);
 
-.button.variant-outlined {
-  --_button_outline-width: var(--outlined-button-outline-width, 0.0675rem);
-  --_button_outline-color: var(--outlined-button-outline-color);
-  --_button_label-text-color: var(--outlined-button-label-text-color);
-
-  --_button_state-color: var(--_button_label-text-color);
-
-  .outline {
-    display: block;
-  }
+  --private-button-state-color: var(--private-button-label-text-color);
 
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_state-opacity: 0.08;
+  &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
+    --private-button-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_state-opacity: 0.12;
+  &:host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
+    --private-button-state-opacity: 0.12;
   }
 
-  &.disabled {
-    --_button_outline-color: var(--color-on-surface);
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
-    --_button_outline-opacity: 0.12;
+  &:host([disabled]) {
+    --private-button-outline-color: var(--color-on-surface);
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
+    --private-button-outline-opacity: 0.12;
 
     .ripple {
       display: none;
@@ -340,23 +226,22 @@ slot::slotted(*) {
   }
 }
 
+:host([variant=text]) {
 
-.button.variant-text {
+  --private-button-label-text-color: var(--text-button-label-text-color);
+  --private-button-state-color: var(--private-button-label-text-color);
 
-  --_button_label-text-color: var(--text-button-label-text-color);
-  --_button_state-color: var(--_button_label-text-color);
-
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_state-opacity: 0.08;
+  &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
+    --private-button-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_state-opacity: 0.12;
+  &:host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
+    --private-button-state-opacity: 0.12;
   }
 
-  &.disabled {
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
+  &:host([disabled]) {
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -364,21 +249,13 @@ slot::slotted(*) {
   }
 }
 
-.button.variant-neo {
-
-  --_button_container-color: var(--neo-button-container-color);
-  --_button_label-text-color: var(--neo-button-label-text-color);
+:host([variant=neo]) {
 
-  --_button_outline-width: var(--outlined-button-outline-width, 0.125rem);
-  --_button_outline-color: var(--color-inverse-surface);
+  --private-button-container-color: var(--neo-button-container-color);
+  --private-button-label-text-color: var(--neo-button-label-text-color);
 
-  .outline {
-    display: block;
-  }
-
-  .neo-background {
-    display: block;
-  }
+  --private-button-outline-width: var(--outlined-button-outline-width, 0.125rem);
+  --private-button-outline-color: var(--color-inverse-surface);
 
   .focus-ring {
     --focus-ring-color: var(--color-primary-container);
@@ -389,18 +266,18 @@ slot::slotted(*) {
     display: none;
   }
 
-  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    .background, .button-content, .outline, .focus-ring {
+  &:host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
+    .background, .button, .outline, .focus-ring {
       transform: translateX(0.25rem) translateY(0.25rem);
     }
   }
 
-  &.disabled {
-    --_button_container-color: var(--color-on-surface);
-    --_button_container-opacity: 0.1;
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
-    --_button_outline-opacity: 0.12;
+  &:host([disabled]) {
+    --private-button-container-color: var(--color-on-surface);
+    --private-button-container-opacity: 0.1;
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
+    --private-button-outline-opacity: 0.12;
 
 
     .ripple {