@ethlete/components 1.0.0-next.69 → 1.0.0-next.71

package/src/lib/button/button-properties-styles.component.css

@@ -0,0 +1,143 @@
+@layer components {
+  @property --et-button-border-radius {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 4px;
+  }
+
+  @property --et-button-padding {
+    syntax: '*';
+    inherits: false;
+    initial-value: 8px 16px;
+  }
+
+  @property --et-button-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-button-font-weight {
+    syntax: '<number>';
+    inherits: false;
+    initial-value: 500;
+  }
+
+  @property --et-button-cursor {
+    syntax: '*';
+    inherits: false;
+    initial-value: pointer;
+  }
+
+  @property --et-button-opacity-disabled {
+    syntax: '<number>';
+    inherits: false;
+    initial-value: 0.4;
+  }
+
+  @property --et-button-variant-opacity-hover-delta {
+    syntax: '<number>';
+    inherits: false;
+    initial-value: 0.08;
+  }
+
+  @property --et-button-variant-opacity-focus-delta {
+    syntax: '<number>';
+    inherits: false;
+    initial-value: 0.12;
+  }
+
+  @property --et-button-variant-opacity-active-delta {
+    syntax: '<number>';
+    inherits: false;
+    initial-value: 0.16;
+  }
+
+  @property --et-button-gap {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 8px;
+  }
+
+  @property --et-button-line-height {
+    syntax: '<number>';
+    inherits: false;
+    initial-value: 1.5;
+  }
+
+  @property --et-button-border-width {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 1px;
+  }
+
+  :is(.et-button, .et-fab, .et-icon-button):where([data-variant='outline'], [data-variant='transparent']) {
+    --et-theme-color-primary-opacity: 0;
+
+    @media (hover: hover) {
+      &:hover {
+        --et-theme-color-primary-opacity: var(--et-button-variant-opacity-hover-delta);
+      }
+    }
+
+    &:focus-visible {
+      --et-theme-color-primary-opacity: var(--et-button-variant-opacity-focus-delta);
+    }
+
+    &:active {
+      --et-theme-color-primary-opacity: var(--et-button-variant-opacity-active-delta);
+    }
+  }
+
+  :is(.et-button, .et-fab, .et-icon-button):where([data-variant='tonal']) {
+    --et-theme-color-primary-opacity: 0.16;
+
+    @media (hover: hover) {
+      &:hover {
+        --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-hover-delta));
+      }
+    }
+
+    &:focus-visible {
+      --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-focus-delta));
+    }
+
+    &:active {
+      --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-active-delta));
+    }
+  }
+
+  :is(.et-button, .et-icon-button)[data-pressed='true']:where([data-pressed-variant='tonal']),
+  .et-icon-button[data-pressed='true']:where([data-pressed-variant='transparent']) {
+    --et-theme-color-primary-opacity: 0.16;
+
+    @media (hover: hover) {
+      &:hover {
+        --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-hover-delta));
+      }
+    }
+
+    &:focus-visible {
+      --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-focus-delta));
+    }
+
+    &:active {
+      --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-active-delta));
+    }
+  }
+
+  .et-button-loader {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 120ms ease;
+
+    .et-button-loader-spinner {
+      --et-spinner-color: currentColor;
+      --et-spinner-duration: 700ms;
+    }
+  }
+}

package/src/lib/button/button.component.css

@@ -0,0 +1,196 @@
+@layer components {
+  .et-button {
+    --_et-button-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));
+    --_et-button-color: var(--et-theme-color-on-primary);
+    --_et-button-border-color: transparent;
+    --_et-button-gap: var(--et-button-gap);
+
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    gap: var(--et-button-gap);
+    background: var(--_et-button-background);
+    color: var(--_et-button-color);
+    border-radius: var(--et-button-border-radius);
+    padding: var(--et-button-padding);
+    font-size: var(--et-button-font-size);
+    font-weight: var(--et-button-font-weight);
+    border: var(--et-button-border-width, 0.1rem) solid var(--_et-button-border-color);
+    box-shadow: var(--et-button-shadow, 0 0 #0000);
+    cursor: var(--et-button-cursor);
+    text-decoration: none;
+    appearance: none;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    user-select: none;
+    /* no double-tap-zoom wait on touch — taps activate immediately */
+    touch-action: manipulation;
+    /* the grey WebKit/Blink flash duplicates our own :active state, and it is inherited, so setting
+     it here also covers the icons and labels inside */
+    -webkit-tap-highlight-color: transparent;
+    line-height: var(--et-button-line-height);
+    white-space: nowrap;
+
+    &[data-can-animate] {
+      transition:
+        background 120ms ease,
+        color 120ms ease,
+        border-color 120ms ease,
+        box-shadow 120ms ease,
+        outline-color 120ms ease,
+        opacity 120ms ease;
+    }
+
+    &:where([data-size='xs']) {
+      --et-button-padding: 0.2rem 0.8rem;
+      --et-button-font-size: 1.2rem;
+      --et-button-border-radius: 0.3rem;
+      --et-button-gap: 0.4rem;
+    }
+
+    &:where([data-size='sm']) {
+      --et-button-padding: 0.4rem 1.2rem;
+      --et-button-font-size: 1.4rem;
+      --et-button-border-radius: 0.4rem;
+      --et-button-gap: 0.5rem;
+    }
+
+    &:where([data-size='md']) {
+      --et-button-padding: 0.8rem 1.6rem;
+      --et-button-font-size: 1.4rem;
+      --et-button-border-radius: 0.4rem;
+      --et-button-gap: 0.6rem;
+    }
+
+    &:where([data-size='lg']) {
+      --et-button-padding: 1rem 2rem;
+      --et-button-font-size: 1.6rem;
+      --et-button-border-radius: 0.6rem;
+      --et-button-gap: 0.7rem;
+    }
+
+    &:where([data-size='xl']) {
+      --et-button-padding: 1.4rem 2.8rem;
+      --et-button-font-size: 1.8rem;
+      --et-button-border-radius: 0.8rem;
+      --et-button-gap: 0.8rem;
+    }
+
+    &:where([disabled]),
+    &:where([aria-disabled='true']) {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    &:where([disabled], [aria-disabled='true']):where([data-variant='outline']),
+    &:where([disabled], [aria-disabled='true']):where([data-variant='tonal']),
+    &:where([disabled], [aria-disabled='true']):where([data-variant='transparent']),
+    &:where([disabled], [aria-disabled='true'])[data-pressed='true'] {
+      opacity: var(--et-button-opacity-disabled);
+    }
+
+    &:where([data-variant='outline']) {
+      --_et-button-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));
+      --_et-button-color: var(--et-theme-color-ink-solid);
+      --_et-button-border-color: var(--et-theme-color-ink-solid);
+    }
+
+    &[data-pressed='true']:where([data-pressed-variant='outline']) {
+      --et-theme-color-primary-opacity: 0;
+      --_et-button-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));
+      --_et-button-color: var(--et-theme-color-ink-solid);
+      --_et-button-border-color: var(--et-theme-color-ink-solid);
+
+      @media (hover: hover) {
+        &:hover {
+          --et-theme-color-primary-opacity: var(--et-button-variant-opacity-hover-delta);
+        }
+      }
+
+      &:focus-visible {
+        --et-theme-color-primary-opacity: var(--et-button-variant-opacity-focus-delta);
+      }
+
+      &:active {
+        --et-theme-color-primary-opacity: var(--et-button-variant-opacity-active-delta);
+      }
+
+      &[data-loading='true']:not([disabled], [aria-disabled='true']) {
+        --_et-button-color: var(--et-theme-color-primary-solid);
+        --_et-button-border-color: var(--et-theme-color-primary-solid);
+      }
+    }
+
+    &:where([data-variant='tonal']),
+    &[data-pressed='true']:where([data-pressed-variant='tonal']) {
+      --_et-button-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));
+      --_et-button-color: var(--et-theme-color-ink-solid);
+      --_et-button-border-color: transparent;
+    }
+
+    &:where([data-variant='transparent']) {
+      --_et-button-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));
+      --_et-button-color: var(--et-theme-color-ink-solid);
+      --_et-button-border-color: transparent;
+    }
+
+    &[data-pressed='true']:where([data-pressed-variant='filled']) {
+      --et-theme-color-primary-opacity: 1;
+      --_et-button-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));
+      --_et-button-color: var(--et-theme-color-on-primary);
+      --_et-button-border-color: transparent;
+
+      @media (hover: hover) {
+        &:hover {
+          --et-theme-color-primary-opacity: 1;
+        }
+      }
+
+      &:focus-visible {
+        --et-theme-color-primary-opacity: 1;
+      }
+
+      &:active {
+        --et-theme-color-primary-opacity: 1;
+      }
+    }
+
+    .et-button-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      font-size: var(--et-button-icon-size, 1em);
+      transition: opacity 120ms ease;
+
+      &:empty {
+        display: none;
+      }
+
+      .et-icon {
+        width: 1em;
+        height: 1em;
+      }
+    }
+
+    .et-button-contents {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--_et-button-gap);
+      min-width: 0;
+      transition: opacity 120ms ease;
+    }
+
+    &[data-loading='true'] {
+      .et-button-icon,
+      .et-button-contents {
+        opacity: 0;
+      }
+
+      .et-button-loader {
+        opacity: 1;
+      }
+    }
+  }
+}

package/src/lib/button/fab.component.css

@@ -0,0 +1,252 @@
+@layer components {
+  @property --et-fab-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 39px;
+  }
+
+  @property --et-fab-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-fab-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  @property --et-fab-contents-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  .et-fab {
+    --_et-fab-expand-duration: 380ms;
+    --_et-fab-expand-easing: cubic-bezier(0.22, 0.9, 0.3, 1);
+    --_et-fab-collapse-duration: 220ms;
+    --_et-fab-collapse-easing: cubic-bezier(0.4, 0, 0.2, 1);
+    --_et-fab-label-fade-duration: 180ms;
+    --_et-fab-label-fade-expand-delay: 40ms;
+    --_et-fab-contents-padding: 0 var(--et-fab-contents-gap) 0 0;
+
+    --et-button-shadow:
+      0 0.3rem 0.8rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.2),
+      0 0.1rem 0.3rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.12);
+
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+
+    background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));
+    color: var(--et-theme-color-on-primary);
+    border: none;
+    border-radius: 9999px;
+    padding: 0;
+    overflow: hidden;
+    height: var(--et-fab-size);
+    font-size: var(--et-button-font-size);
+    font-weight: var(--et-button-font-weight);
+    box-shadow: var(--et-button-shadow);
+    cursor: var(--et-button-cursor);
+    text-decoration: none;
+    appearance: none;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    line-height: var(--et-button-line-height);
+    white-space: nowrap;
+    flex-shrink: 0;
+
+    &[data-can-animate] {
+      transition:
+        background 120ms ease,
+        color 120ms ease,
+        box-shadow 120ms ease,
+        outline-color 120ms ease;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      box-sizing: border-box;
+      border: 0 solid transparent;
+      border-radius: inherit;
+      pointer-events: none;
+      transition: background 120ms ease;
+    }
+
+    &:where([data-variant='filled']) {
+      @media (hover: hover) {
+        &:hover::after {
+          background: rgb(var(--et-theme-color-on-primary-rgb) / 0.08);
+        }
+      }
+
+      &:focus-visible::after {
+        background: rgb(var(--et-theme-color-on-primary-rgb) / 0.12);
+      }
+
+      &:active::after {
+        background: rgb(var(--et-theme-color-on-primary-rgb) / 0.16);
+      }
+
+      &:focus-visible:active::after {
+        background: rgb(var(--et-theme-color-on-primary-rgb) / 0.16);
+      }
+    }
+
+    &:where([data-size='xs']) {
+      --et-fab-size: 2.4rem;
+      --et-fab-label-font-size: 1.2rem;
+      --et-fab-icon-size: 1.4rem;
+      --et-fab-contents-gap: 0.5rem;
+    }
+
+    &:where([data-size='sm']) {
+      --et-fab-size: 3.1rem;
+      --et-fab-label-font-size: 1.2rem;
+      --et-fab-icon-size: 1.8rem;
+      --et-fab-contents-gap: 0.6rem;
+    }
+
+    &:where([data-size='md']) {
+      --et-fab-size: 3.9rem;
+      --et-fab-label-font-size: 1.3rem;
+      --et-fab-icon-size: 2rem;
+      --et-fab-contents-gap: 0.8rem;
+    }
+
+    &:where([data-size='lg']) {
+      --et-fab-size: 4.6rem;
+      --et-fab-label-font-size: 1.4rem;
+      --et-fab-icon-size: 2.4rem;
+      --et-fab-contents-gap: 1rem;
+    }
+
+    &:where([data-size='xl']) {
+      --et-fab-size: 5.7rem;
+      --et-fab-label-font-size: 1.6rem;
+      --et-fab-icon-size: 2.8rem;
+      --et-fab-contents-gap: 1.2rem;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        --et-button-shadow:
+          0 0.6rem 1.2rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.22),
+          0 0.2rem 0.4rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.14);
+      }
+    }
+
+    &:active {
+      --et-button-shadow:
+        0 0.2rem 0.6rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.18),
+        0 0.1rem 0.2rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.1);
+    }
+
+    &:focus-visible:active {
+      --et-button-shadow:
+        0 0.2rem 0.6rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.18),
+        0 0.1rem 0.2rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.1);
+    }
+
+    &:where([disabled]),
+    &:where([aria-disabled='true']) {
+      opacity: var(--et-button-opacity-disabled);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    &:where([data-variant='outline'], [data-variant='tonal'], [data-variant='transparent']) {
+      --et-button-shadow: none;
+      background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));
+      color: var(--et-theme-color-ink-solid);
+
+      @media (hover: hover) {
+        &:hover {
+          --et-button-shadow: none;
+        }
+      }
+
+      &:active,
+      &:focus-visible:active {
+        --et-button-shadow: none;
+      }
+    }
+
+    &:where([data-variant='outline'])::after {
+      border-width: var(--et-button-border-width, 0.1rem);
+      border-color: var(--et-theme-color-ink-solid);
+    }
+
+    &[data-icon-alignment='end'] {
+      --_et-fab-contents-padding: 0 0 0 var(--et-fab-contents-gap);
+    }
+
+    .et-fab-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: var(--et-fab-size);
+      height: var(--et-fab-size);
+      transition: opacity 120ms ease;
+
+      .et-icon {
+        width: var(--et-fab-icon-size);
+        height: var(--et-fab-icon-size);
+      }
+    }
+
+    .et-fab-contents {
+      display: inline-grid;
+      grid-template-columns: 1fr;
+      padding: var(--_et-fab-contents-padding);
+      transition:
+        opacity 120ms ease,
+        grid-template-columns var(--_et-fab-expand-duration) var(--_et-fab-expand-easing),
+        padding var(--_et-fab-expand-duration) var(--_et-fab-expand-easing);
+
+      .et-fab-contents-inner {
+        min-width: 0;
+        opacity: 1;
+        white-space: nowrap;
+        font-size: var(--et-fab-label-font-size);
+        transition: opacity var(--_et-fab-label-fade-duration) var(--_et-fab-expand-easing);
+      }
+    }
+
+    &:not([data-expanded='true']) {
+      .et-fab-contents {
+        grid-template-columns: 0fr;
+        padding: 0;
+        pointer-events: none;
+        transition:
+          opacity 120ms ease,
+          grid-template-columns var(--_et-fab-collapse-duration) var(--_et-fab-collapse-easing),
+          padding var(--_et-fab-collapse-duration) var(--_et-fab-collapse-easing);
+      }
+
+      .et-fab-contents-inner {
+        opacity: 0;
+        transition: opacity var(--_et-fab-label-fade-duration) var(--_et-fab-collapse-easing);
+      }
+    }
+
+    &[data-loading='true'] {
+      .et-fab-icon,
+      .et-fab-contents {
+        opacity: 0;
+      }
+
+      .et-button-loader {
+        opacity: 1;
+      }
+    }
+  }
+}