@redvars/peacock 3.6.3 → 3.8.0

package/src/button/button/button-layers.scss

@@ -0,0 +1,124 @@
+@use '../../../scss/mixin';
+
+// Mixin for the shared transition logic
+@mixin button-transition {
+  transition-property: inset, width, height, transform, border-radius, opacity;
+  transition-duration: 200ms;
+  transition-timing-function: var(--easing-standard);
+  will-change: inset, transform, border-radius, opacity;
+}
+
+.button {
+  @include button-transition;
+}
+
+.background {
+  display: block;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  background-color: var(--private-button-container-color);
+  opacity: var(--private-button-container-opacity, 1);
+
+  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  corner-shape: var(--private-button-container-shape-variant);
+  @include button-transition;
+}
+
+.neo-background {
+  display: block;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  background: var(--color-inverse-surface);
+  transform: translateX(0.25rem) translateY(0.25rem);
+
+  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  corner-shape: var(--private-button-container-shape-variant);
+  @include button-transition;
+}
+
+.focus-ring {
+  z-index: 2;
+  pointer-events: none;
+
+  --focus-ring-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  --focus-ring-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  --focus-ring-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  --focus-ring-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  --focus-ring-container-shape-variant: var(--private-button-container-shape-variant);
+}
+
+.ripple {
+  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  corner-shape: var(--private-button-container-shape-variant);
+  pointer-events: none;
+
+  --ripple-state-opacity: var(--private-button-state-opacity, 0);
+  --ripple-pressed-color: var(--private-button-state-color);
+}
+
+
+.skeleton {
+  display: block;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  z-index: 2;
+
+  --skeleton-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  --skeleton-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  --skeleton-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  --skeleton-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  --skeleton-container-shape-variant: var(--private-button-container-shape-variant);
+}
+
+
+.elevation {
+  pointer-events: none;
+  transition-duration: 280ms;
+  --elevation-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  --elevation-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  --elevation-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  --elevation-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  --elevation-container-shape-variant: var(--private-button-container-shape-variant);
+
+  --elevation-level: var(--private-button-container-elevation-level);
+}
+
+
+
+.outline {
+  display: block;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  z-index: 0;
+
+  border: var(--private-button-outline-width) solid var(--private-button-outline-color);
+  opacity: var(--private-button-outline-opacity, 1);
+  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  corner-shape: var(--private-button-container-shape-variant);
+
+  @include button-transition;
+}
+
+.tooltip {
+  z-index: 1;
+}

package/src/button/button/button-sizes.scss

@@ -1,84 +1,62 @@
 @use '../../../scss/mixin';
 
-
 :host([size='xs']),
 :host([size='extra-small']) {
   --button-height: 2rem;
-}
-
-:host([size='xs']) .button,
-:host([size='extra-small']) .button {
   --private-button-icon-size: 1rem;
   --private-button-container-padding: 0.75rem;
 
-  font-size:  0.875rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.25rem !important;
-  letter-spacing: 0.1px !important;
+  --private-button-font-size: 0.875rem !important;
+  --private-button-font-weight: var(--font-weight-medium) !important;
+  --private-button-line-height: 1.25rem !important;
+  --private-button-letter-spacing: 0.1px !important;
 }
 
-
 :host([size='sm']),
 :host([size='small']) {
   --button-height: 2.5rem;
-}
-
-:host([size='sm']) .button,
-:host([size='small']) .button {
   --private-button-icon-size: 1.25rem;
   --private-button-container-padding: 1rem;
   --private-button-icon-label-spacing: 0.5rem;
 
-  font-size:  0.875rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.25rem !important;
-  letter-spacing: 0.1px !important;
+  --private-button-font-size: 0.875rem !important;
+  --private-button-font-weight: var(--font-weight-medium) !important;
+  --private-button-line-height: 1.25rem !important;
+  --private-button-letter-spacing: 0.1px !important;
 }
 
 :host([size='md']),
 :host([size='medium']) {
   --button-height: 3.5rem;
-}
-
-:host([size='md']) .button,
-:host([size='medium']) .button {
   --private-button-icon-size: 1.5rem;
   --private-button-container-padding: 1.5rem;
 
-  font-size:  1rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.5rem !important;
-  letter-spacing: 0.15px !important;
+  --private-button-font-size: 1rem !important;
+  --private-button-font-weight: var(--font-weight-medium) !important;
+  --private-button-line-height: 1.5rem !important;
+  --private-button-letter-spacing: 0.15px !important;
 }
 
 :host([size='lg']),
 :host([size='large']) {
   --button-height: 6rem;
-}
-
-:host([size='lg']) .button,
-:host([size='large']) .button {
   --private-button-icon-size: 2rem;
   --private-button-container-padding: 3rem;
 
-  font-size:  1.5rem !important;
-  font-weight: var(--font-weight-regular) !important;
-  line-height: 2rem !important;
-  letter-spacing: 0 !important;
+  --private-button-font-size: 1.5rem !important;
+  --private-button-font-weight: var(--font-weight-regular) !important;
+  --private-button-line-height: 2rem !important;
+  --private-button-letter-spacing: 0 !important;
 }
 
 :host([size='xl']),
 :host([size='extra-large']) {
   --button-height: 8.5rem;
-}
-
-:host([size='xl']) .button,
-:host([size='extra-large']) .button {
   --private-button-icon-size: 2.5rem;
   --private-button-container-padding: 4rem;
 
-  font-size:  2rem !important;
-  font-weight: var(--font-weight-regular) !important;
-  line-height: 2.5rem !important;
-  letter-spacing: 0 !important;
+  --private-button-font-size: 2rem !important;
+  --private-button-font-weight: var(--font-weight-regular) !important;
+  --private-button-line-height: 2.5rem !important;
+  --private-button-letter-spacing: 0 !important;
 }

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,13 +14,16 @@
   --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(--private-button-icon-size));
-  --icon-color: var(--private-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);
 }
 
 /*
@@ -38,181 +37,99 @@ slot::slotted(*) {
 }
 
 .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(--private-button-container-padding));
   width: 100%;
-  font-family: var(--font-family-sans) !important;
-  cursor: pointer;
+  z-index: 0;
 
-  --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);
+  cursor: pointer;
 
 
-  .button-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    gap: var(--private-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);
-    opacity: var(--private-button-label-text-opacity, 1);
+
     --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;
-
-    @include mixin.copy-container-shape(private-button, focus-ring);
-  }
-
-  .ripple {
-    @include mixin.apply-container-shape(private-button);
-
-    --ripple-state-opacity: var(--private-button-state-opacity, 0);
-    --ripple-pressed-color: var(--private-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(--private-button-container-color);
-    opacity: var(--private-button-container-opacity, 1);
-    @include mixin.apply-container-shape(private-button);
-    pointer-events: none;
-  }
-
-  .skeleton {
-    display: none;
     width: 100%;
-    height: 100%;
-    z-index: 2;
-    position: absolute;
-    top: 0;
+    top: auto;
     left: 0;
-
-    @include mixin.copy-container-shape(private-button, skeleton);
   }
 
-  .elevation {
-    transition-duration: 280ms;
-    @include mixin.copy-container-shape(private-button, elevation);
-
-    --elevation-level: var(--private-button-container-elevation-level);
-  }
-
-  .neo-background {
-    display: none;
-    position: absolute;
-    background: var(--color-inverse-surface);
-    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);
-
-    @include mixin.apply-container-shape(private-button);
   }
 
-  .outline {
-    z-index: 0;
-    display: none;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    border: var(--private-button-outline-width) solid var(--private-button-outline-color);
-    opacity: var(--private-button-outline-opacity, 1);
-    @include mixin.apply-container-shape(private-button);
+  .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
  */
-
-.button.variant-elevated {
+: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;
 
   --private-button-state-color: var(--private-button-label-text-color);
 
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &: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)) {
+  &:host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
     --private-button-container-elevation-level: 1;
     --private-button-state-opacity: 0.12;
   }
 
-  &.disabled {
+  &: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);
@@ -225,23 +142,23 @@ slot::slotted(*) {
 }
 
 
-.button.variant-filled {
+: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)) {
+  &: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)) {
+  &:host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
     --private-button-container-elevation-level: 0;
     --private-button-state-opacity: 0.1;
   }
 
-  &.disabled {
+  &: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);
@@ -253,24 +170,23 @@ slot::slotted(*) {
   }
 }
 
-
-.button.variant-tonal {
+:host([variant=tonal]) {
   --private-button-container-color: var(--tonal-button-container-color);
   --private-button-label-text-color: var(--tonal-button-label-text-color);
 
   --private-button-state-color: var(--private-button-label-text-color);
 
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &: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)) {
+  &:host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
     --private-button-container-elevation-level: 0;
     --private-button-state-opacity: 0.12;
   }
 
-  &.disabled {
+  &: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);
@@ -282,27 +198,22 @@ slot::slotted(*) {
   }
 }
 
-
-.button.variant-outlined {
+: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);
 
   --private-button-state-color: var(--private-button-label-text-color);
 
-  .outline {
-    display: block;
-  }
-
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
     --private-button-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &:host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
     --private-button-state-opacity: 0.12;
   }
 
-  &.disabled {
+  &: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;
@@ -314,21 +225,20 @@ slot::slotted(*) {
   }
 }
 
-
-.button.variant-text {
+:host([variant=text]) {
 
   --private-button-label-text-color: var(--text-button-label-text-color);
   --private-button-state-color: var(--private-button-label-text-color);
 
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
     --private-button-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &:host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
     --private-button-state-opacity: 0.12;
   }
 
-  &.disabled {
+  &:host([disabled]) {
     --private-button-label-text-color: var(--color-on-surface);
     --private-button-label-text-opacity: 0.38;
 
@@ -338,7 +248,7 @@ slot::slotted(*) {
   }
 }
 
-.button.variant-neo {
+:host([variant=neo]) {
 
   --private-button-container-color: var(--neo-button-container-color);
   --private-button-label-text-color: var(--neo-button-label-text-color);
@@ -346,14 +256,6 @@ slot::slotted(*) {
   --private-button-outline-width: var(--outlined-button-outline-width, 0.125rem);
   --private-button-outline-color: var(--color-inverse-surface);
 
-  .outline {
-    display: block;
-  }
-
-  .neo-background {
-    display: block;
-  }
-
   .focus-ring {
     --focus-ring-color: var(--color-primary-container);
     --focus-ring-inset: -2px;
@@ -363,13 +265,13 @@ 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 {
+  &: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);