@redvars/peacock 3.1.1 → 3.1.3

package/src/button/button.scss

@@ -0,0 +1,430 @@
+@use '../../scss/mixin';
+
+/**
+ * @prop --pc-button-color: Button filling color.
+ * @prop --pc-button-color-light: Button filling color for light variant.
+ * @prop --pc-button-color-hover: Button filling color on hover.
+ * @prop --pc-button-color-active: Button filling color on active.
+ * @prop --pc-button-support-contrast-color: Button support color (text or border). Should be white or black based on weight of button filling color.
+ */
+:host {
+  display: inline-flex;
+  --z-index-button: 0;
+
+  --pc-button-border-width: var(--goat-theme-button-border-width);
+
+  /**
+   * @prop --pc-button-border-radius: Button border radius.
+   * @prop --goat-theme-button-border-radius: Theme level button border radius. (applies to all buttons)
+   */
+  --pc-button-border-radius: var(--goat-theme-button-border-radius, var(--border-radius));
+
+  /**
+   * @prop --pc-button-border-style: Button border style.
+   * @prop --goat-theme-button-border-style: Theme level button border style. (applies to all buttons)
+   */
+  --pc-button-border-style: var(--goat-theme-button-border-style, solid);
+
+  /**
+    * @prop --pc-button-padding: Button padding.
+   */
+  --pc-button-padding: unset;
+
+  --button-height: unset;
+  --button-icon-size: unset;
+  --button-container-shape: unset;
+
+  --filled-button-container-color: var(--color-primary);
+  --filled-button-label-text-color: var(--color-on-primary);
+
+  --tonal-button-container-color: var(--color-secondary-container);
+  --tonal-button-label-text-color: var(--color-on-secondary-container);
+
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-primary);
+}
+
+/**
+  * Private CSS Variables
+  * These variables are used internally within the button component
+  */
+.button {
+  --_container-padding: 0.0625rem;
+}
+
+slot::slotted(*) {
+  --icon-size: var(--button-icon-size, var(--_button-icon-size));
+}
+
+/*
+  * Reset native button/link styles
+  */
+.button.button-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+}
+
+.button {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: var(--button-height, var(--_button-height));
+  padding: 0 var(--_container-padding);
+  cursor: pointer;
+
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+
+  .button-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--_button-icon-label-spacing);
+    z-index: var(--z-index-button);
+    width: 100%;
+
+    color: var(--_label-text-color);
+    opacity: var(--_label-text-opacity, 1);
+    --icon-color: currentColor;
+
+    .slot-container {
+      display: none;
+    }
+
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  /*
+    Background layers
+   */
+  .focus-ring {
+    --focus-ring-shape-start-start: var(--_container-shape-start-start);
+    --focus-ring-shape-start-end: var(--_container-shape-start-end);
+    --focus-ring-shape-end-start: var(--_container-shape-end-start);
+    --focus-ring-shape-end-end: var(--_container-shape-end-end);
+  }
+
+  .ripple {
+    border-radius: inherit;
+  }
+
+  .background {
+    display: block;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--_container-color);
+    opacity: var(--_container-opacity, 1);
+    box-sizing: border-box;
+
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  .ripple {
+    --ripple-state-opacity: var(--_container-state-opacity, 0);
+    --ripple-pressed-color: var(--_container-state-color);
+  }
+
+  .elevation {
+    --elevation-level: var(--_container-elevation-level);
+    transition-duration: 280ms;
+    border-radius: inherit;
+  }
+
+  .neo-background {
+    display: none;
+    position: absolute;
+    background: var(--color-inverse-surface);
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    transform: translateX(0.25rem) translateY(0.25rem);
+
+    &:before {
+      content: "";
+      position: absolute;
+      pointer-events: none;
+      border-radius: inherit;
+      width: 100%;
+      height: 100%;
+      background: white;
+      left: 0;
+      transform: translateX(-0.25rem) translateY(-0.25rem);
+    }
+  }
+
+  .outline {
+    z-index: 1;
+    display: none;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    box-sizing: border-box;
+    border: var(--_outline-width) solid var(--_outline-color);
+    border-radius: inherit;
+  }
+
+
+  &.has-content {
+    .slot-container {
+      display: flex;
+      flex: none;
+      justify-content: center;
+    }
+  }
+
+}
+
+@import "button-sizes";
+
+/**
+ * Button variant definitions
+ */
+.button.variant-filled {
+
+  --_container-shape-start-start: var(--filled-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--filled-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--filled-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--filled-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-color: var(--filled-button-container-color);
+  --_label-text-color: var(--filled-button-label-text-color);
+
+  --_container-state-color: var(--_label-text-color);
+
+
+  &:hover:not(.disabled) {
+    --_container-elevation-level: 1;
+    --_container-state-opacity: 0.08;
+
+  }
+
+  &.pressed:not(.disabled) {
+    --_container-elevation-level: 0;
+    --_container-state-opacity: 0.1;
+  }
+
+  &.disabled {
+    --_container-color: var(--color-on-surface);
+    --_container-opacity: 0.1;
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+.button.variant-elevated {
+
+  --_container-shape-start-start: var(--elevated-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--elevated-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--elevated-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--elevated-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-color: var(--elevated-button-container-color);
+  --_label-text-color: var(--elevated-button-label-text-color);
+  --_container-elevation-level: 1;
+
+  --_container-state-color: var(--_label-text-color);
+
+  &:hover:not(.disabled) {
+    --_container-elevation-level: 2;
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(.disabled) {
+    --_container-elevation-level: 1;
+    --_container-state-opacity: 0.12;
+  }
+
+  &.disabled {
+    --_container-color: var(--color-on-surface);
+    --_container-opacity: 0.1;
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+
+.button.variant-tonal {
+
+  --_container-shape-start-start: var(--tonal-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--tonal-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--tonal-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--tonal-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+
+  --_container-color: var(--tonal-button-container-color);
+  --_label-text-color: var(--tonal-button-label-text-color);
+
+  --_container-state-color: var(--_label-text-color);
+
+  &:hover:not(.disabled) {
+    --_container-elevation-level: 1;
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(.disabled) {
+    --_container-elevation-level: 0;
+    --_container-state-opacity: 0.12;
+  }
+
+  &.disabled {
+    --_container-color: var(--color-on-surface);
+    --_container-opacity: 0.1;
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+
+.button.variant-outlined {
+
+  --_container-shape-start-start: var(--outlined-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--outlined-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--outlined-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--outlined-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+
+  --_outline-width: var(--outlined-button-outline-width, 0.125rem);
+  --_outline-color: var(--outlined-button-outline-color, var(--color-outline));
+  --_label-text-color: var(--color-on-surface-variant);
+
+  --_container-state-color: var(--color-on-surface-variant);
+
+  .outline {
+    display: block;
+  }
+
+  &:hover:not(.disabled) {
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(.disabled) {
+    --_container-state-opacity: 0.12;
+  }
+
+  &.disabled {
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+    --_outline-color: var(--color-on-surface);
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+
+.button.variant-text {
+
+  --_container-shape-start-start: var(--text-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--text-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--text-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--text-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+
+  --_label-text-color: var(--color-primary);
+
+  --_container-state-color: var(--color-primary);
+
+  &:hover:not(.disabled) {
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(.disabled) {
+    --_container-state-opacity: 0.12;
+  }
+
+  &.disabled {
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+.button.variant-neo {
+
+
+  --_container-shape-start-start: var(--outlined-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--outlined-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--outlined-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--outlined-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+
+  --_container-color: var(--color-primary);
+  --_label-text-color: var(--filled-button-label-text-color);
+
+  --_outline-width: var(--outlined-button-outline-width, 0.125rem);
+  --_outline-color: var(--color-inverse-surface);
+
+  .outline {
+    display: block;
+  }
+
+  .neo-background {
+    display: block;
+  }
+
+  .ripple {
+    display: none;
+  }
+
+  &.pressed:not(.disabled) {
+    .background, .button-content, .outline {
+      transform: translateX(0.25rem) translateY(0.25rem);
+    }
+  }
+
+  &.disabled {
+    --_container-color: var(--color-on-surface);
+    --_container-opacity: 0.1;
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+    --_outline-color: var(--color-on-surface);
+
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+@keyframes outward-grow {
+  from {
+    outline-width: 0
+  }
+
+  to {
+    outline-width: var(--focus-ring-active-width, 8px)
+  }
+}
+
+@keyframes outward-shrink {
+  from {
+    outline-width: var(--focus-ring-active-width, 8px)
+  }
+}