@expressivecss/expressive 0.1.0-alpha.3 → 0.1.0

package/src/scss/components/_buttons.scss

@@ -1,412 +0,0 @@
-@use '../foundation/mixins' as *;
-@use '../foundation/variables' as *;
-@use '../utilities/elevation' as *;
-
-// ===== Component Tokens =====
-
-:root {
-  --btn-height: 40px;
-  --btn-font-size-icon: 18px;
-  --btn-padding: 24px;
-  --btn-padding-icon: 16px;
-  --btn-gap-icon: 8px;
-  --btn-border-radius: var(--md-sys-shape-corner-full, 9999px);
-  --btn-font-size: 14px;
-
-  // FAB component tokens
-  --md-fab-container-height: 56px;
-  --md-fab-container-width: 56px;
-  --md-fab-container-shape: var(--md-sys-shape-corner-large, 16px);
-  --md-fab-container-color: var(--md-sys-color-primary-container);
-  --md-fab-icon-color: var(--md-sys-color-on-primary-container);
-  --md-fab-icon-size: 24px;
-  --md-fab-small-container-height: 40px;
-  --md-fab-small-container-width: 40px;
-  --md-fab-small-container-shape: var(--md-sys-shape-corner-medium, 12px);
-  --md-fab-large-container-height: 96px;
-  --md-fab-large-container-width: 96px;
-  --md-fab-large-container-shape: var(--md-sys-shape-corner-extra-large, 28px);
-  --md-fab-large-icon-size: 36px;
-}
-
-// ===== M3 Expressive Button Classes =====
-
-// Base for all button types
-.filled-button,
-.filled-tonal-button,
-.elevated-button,
-.outlined-button,
-.text-button,
-.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
-  @include btn(
-    var(--btn-height),
-    var(--btn-border-radius),
-    var(--btn-padding),
-    var(--btn-padding),
-    var(--btn-font-size)
-  );
-}
-
-// ===== Filled Button =====
-
-.filled-button {
-  @include btn-filled;
-}
-
-// ===== Filled Tonal Button =====
-
-.filled-tonal-button {
-  @include btn-tonal;
-}
-
-// ===== Elevated Button =====
-
-.elevated-button {
-  @include btn-elevated;
-}
-
-// ===== Outlined Button =====
-
-.outlined-button {
-  @include btn-outlined;
-}
-
-// ===== Text Button =====
-
-.text-button {
-  @include btn-flat;
-}
-
-// ===== Icon positioning (shared across button types) =====
-
-.filled-button,
-.filled-tonal-button,
-.elevated-button,
-.outlined-button,
-.text-button,
-.btn {
-  &.icon-left, &.icon-right {
-    position: relative;
-  }
-
-  &.icon-left {
-    padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
-
-    i {
-      left: var(--btn-padding-icon);
-    }
-  }
-
-  &.icon-right {
-    padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
-
-    i {
-      right: var(--btn-padding-icon);
-    }
-  }
-
-  &.icon-left i, &.icon-right i {
-    position: absolute;
-    font-size: var(--btn-font-size-icon);
-  }
-}
-
-// ===== Deprecated .btn variants (aliases) =====
-
-.btn {
-  &.filled {
-    @include btn-filled;
-  }
-
-  &.tonal {
-    @include btn-tonal;
-  }
-
-  &.elevated {
-    @include btn-elevated;
-  }
-
-  &.outlined {
-    @include btn-outlined;
-  }
-
-  &.text {
-    @include btn-flat;
-  }
-
-  &.rounded {
-    border-radius: var(--md-sys-shape-corner-full, 9999px);
-  }
-}
-
-.btn-flat {
-  @include btn-flat;
-}
-
-// ===== Disabled =====
-
-.filled-button,
-.filled-tonal-button,
-.elevated-button,
-.outlined-button,
-.text-button,
-.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
-  &.disabled, &:disabled, &[disabled] {
-    @include btn-disabled();
-  }
-}
-
-// ===== FAB (Floating Action Button) =====
-
-.fab,
-.btn-floating {
-  width: var(--md-fab-container-width);
-  height: var(--md-fab-container-height);
-  color: var(--md-fab-icon-color);
-  background-color: var(--md-fab-container-color);
-  border-radius: var(--md-fab-container-shape);
-  padding: 0;
-  display: grid;
-  place-items: center;
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
-  @extend .elevation-3;
-  transition: background-color var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
-    box-shadow var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-  cursor: pointer;
-  vertical-align: middle;
-  border: none;
-
-  &:hover {
-    @extend .elevation-4;
-    background-color: color-mix(in srgb, var(--md-fab-container-color), var(--md-fab-icon-color) 8%);
-  }
-
-  &:focus {
-    @extend .elevation-3;
-    background-color: color-mix(in srgb, var(--md-fab-container-color), var(--md-fab-icon-color) 10%);
-  }
-
-  &:active {
-    @extend .elevation-3;
-    background-color: color-mix(in srgb, var(--md-fab-container-color), var(--md-fab-icon-color) 10%);
-  }
-
-  @include focus-visible();
-
-  // Small FAB
-  &.fab-small,
-  &.btn-small {
-    width: var(--md-fab-small-container-width);
-    height: var(--md-fab-small-container-height);
-    border-radius: var(--md-fab-small-container-shape);
-  }
-
-  // Large FAB
-  &.fab-large,
-  &.btn-large {
-    width: var(--md-fab-large-container-width);
-    height: var(--md-fab-large-container-height);
-    border-radius: var(--md-fab-large-container-shape);
-    padding: 0;
-
-    i {
-      font-size: var(--md-fab-large-icon-size);
-    }
-
-    &.halfway-fab {
-      bottom: calc(var(--md-fab-large-container-height) * -0.5);
-    }
-  }
-
-  &.halfway-fab {
-    position: absolute;
-    right: 24px;
-    bottom: calc(var(--md-fab-container-height) * -0.5);
-
-    &.left {
-      right: auto;
-      left: 24px;
-    }
-  }
-
-  i {
-    font-size: var(--md-fab-icon-size);
-    width: inherit;
-    display: inline-block;
-    text-align: center;
-  }
-}
-
-// ===== Fixed FAB =====
-
-.fab-fixed,
-.fixed-action-btn {
-  position: fixed;
-  right: 23px;
-  bottom: 23px;
-  padding-top: 15px;
-  margin-bottom: 0;
-  z-index: 997;
-
-  &.active {
-    ul {
-      visibility: visible;
-      padding-left: 0;
-      list-style-type: none;
-    }
-  }
-
-  &.direction-left,
-  &.direction-right {
-    padding: 0 0 0 15px;
-
-    ul {
-      text-align: right;
-      right: 64px;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 100%;
-      left: auto;
-      width: 500px;
-
-      li {
-        display: inline-block;
-        margin: 7.5px 15px 0 0;
-      }
-    }
-  }
-
-  &.direction-right {
-    padding: 0 15px 0 0;
-
-    ul {
-      text-align: left;
-      direction: rtl;
-      left: 64px;
-      right: auto;
-
-      li {
-        margin: 7.5px 0 0 15px;
-      }
-    }
-  }
-
-  &.direction-bottom {
-    padding: 0 0 15px 0;
-
-    ul {
-      top: 64px;
-      bottom: auto;
-      display: flex;
-      flex-direction: column-reverse;
-
-      li {
-        margin: 15px 0 0 0;
-      }
-    }
-  }
-
-  &.toolbar {
-    padding: 0;
-    height: 56px;
-
-    &.active {
-      & > a i {
-        opacity: 0;
-      }
-    }
-
-    ul {
-      display: flex;
-      top: 0;
-      bottom: 0;
-      z-index: 1;
-
-      li {
-        flex: 1;
-        display: inline-block;
-        margin: 0;
-        height: 100%;
-        transition: none;
-
-        a {
-          display: block;
-          overflow: hidden;
-          position: relative;
-          width: 100%;
-          height: 100%;
-          background-color: transparent;
-          box-shadow: none;
-          color: var(--md-fab-icon-color);
-          line-height: 56px;
-          z-index: 1;
-
-          i {
-            line-height: inherit;
-          }
-        }
-      }
-    }
-  }
-
-  ul {
-    left: 0;
-    right: 0;
-    text-align: center;
-    position: absolute;
-    bottom: 64px;
-    margin: 0;
-    visibility: hidden;
-
-    li {
-      margin-bottom: 15px;
-    }
-
-    a.btn-floating,
-    a.fab {
-      opacity: 0;
-    }
-  }
-
-  .fab-backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: var(--md-fab-container-width);
-    height: var(--md-fab-container-height);
-    background-color: var(--md-fab-container-color);
-    border-radius: var(--md-fab-container-shape);
-    transform: scale(0);
-  }
-}
-
-// ===== Helper Classes =====
-
-.btn-large {
-  @extend .btn;
-  height: calc(1.5 * var(--btn-height));
-  font-size: 18px;
-  padding: 0 28px;
-
-  i {
-    font-size: 1.6rem;
-  }
-}
-
-.btn-small {
-  @extend .btn;
-  height: calc(0.75 * var(--btn-height));
-  font-size: 13px;
-
-  i {
-    font-size: 1.2rem;
-  }
-}
-
-.btn-block {
-  display: block;
-  width: 100%;
-}

package/src/scss/components/_cards.scss

@@ -1,267 +0,0 @@
-@use '../foundation/variables' as *;
-@use '../foundation/mixins' as *;
-@use '../utilities/elevation' as *;
-
-// ===== Card Component Tokens =====
-
-:root {
-  --md-card-container-shape: var(--md-sys-shape-corner-medium, 12px);
-}
-
-// ===== Shared Card Base =====
-
-%card-base {
-  position: relative;
-  transition: box-shadow var(--md-sys-motion-duration-medium1, 250ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-  border-radius: var(--md-card-container-shape);
-
-  .card-title {
-    font-size: 24px;
-    font-weight: 400;
-  }
-
-  // Card Sizes
-  &.small, &.medium, &.large {
-    position: relative;
-
-    .card-image {
-      max-height: 60%;
-      overflow: hidden;
-    }
-
-    .card-image + .card-content {
-      max-height: 40%;
-    }
-
-    .card-content {
-      max-height: 100%;
-      overflow: hidden;
-    }
-
-    .card-action {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-  }
-
-  &.small {
-    height: 300px;
-  }
-
-  &.medium {
-    height: 400px;
-  }
-
-  &.large {
-    height: 500px;
-  }
-
-  // Horizontal Cards
-  &.horizontal {
-    display: flex;
-
-    &.small, &.medium, &.large {
-      .card-image {
-        height: 100%;
-        max-height: none;
-        overflow: visible;
-
-        img {
-          height: 100%;
-        }
-      }
-    }
-
-    .card-image {
-      max-width: 50%;
-
-      img {
-        border-radius: var(--md-card-container-shape) 0 0 var(--md-card-container-shape);
-        max-width: 100%;
-        width: auto;
-      }
-    }
-
-    .card-stacked {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      position: relative;
-
-      .card-content {
-        flex-grow: 1;
-      }
-    }
-  }
-
-  // Sticky Action Section
-  &.sticky-action {
-    .card-action {
-      z-index: 2;
-    }
-
-    .card-reveal {
-      z-index: 1;
-      padding-bottom: 64px;
-    }
-  }
-
-  .card-image {
-    position: relative;
-
-    img {
-      display: block;
-      border-radius: var(--md-card-container-shape) var(--md-card-container-shape) 0 0;
-      position: relative;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      width: 100%;
-    }
-
-    .card-title {
-      color: var(--md-sys-color-surface);
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      max-width: 100%;
-      padding: 24px;
-    }
-
-    .activator {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      cursor: pointer;
-    }
-
-    img.activator {
-      position: relative;
-    }
-  }
-
-  .card-content {
-    padding: 24px;
-    border-radius: 0 0 var(--md-card-container-shape) var(--md-card-container-shape);
-
-    p {
-      margin: 0;
-    }
-
-    .card-title {
-      display: block;
-      line-height: 32px;
-      margin-bottom: 8px;
-
-      i {
-        line-height: 32px;
-      }
-
-      &.activator {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .card-action {
-    padding: 0 1.6rem;
-
-    &:last-child {
-      border-radius: 0 0 var(--md-card-container-shape) var(--md-card-container-shape);
-    }
-
-    a {
-      @include btn(
-        var(--btn-height),
-        var(--btn-border-radius),
-        var(--btn-padding),
-        var(--btn-padding),
-        var(--btn-font-size)
-      );
-
-      &:first-child {
-        margin-left: -1.6rem;
-      }
-
-      &:last-child {
-        margin-right: -1.6rem;
-      }
-    }
-
-    .btn,
-    .filled-button,
-    .filled-tonal-button,
-    .elevated-button,
-    .outlined-button {
-      margin: 0 .26rem 1.6rem 0;
-    }
-  }
-
-  .card-reveal {
-    padding: 24px;
-    position: absolute;
-    background-color: var(--md-sys-color-surface);
-    width: 100%;
-    overflow-y: auto;
-    left: 0;
-    top: 100%;
-    height: 100%;
-    z-index: 3;
-    display: none;
-
-    .card-title {
-      cursor: pointer;
-      display: block;
-    }
-  }
-}
-
-// ===== M3 Expressive Card Variants =====
-
-// Elevated Card (default .card behavior)
-.elevated-card {
-  @extend %card-base;
-  background-color: var(--md-sys-color-surface-container-low);
-  @extend .elevation-1;
-
-  &:hover {
-    @extend .elevation-2;
-  }
-}
-
-// Filled Card
-.filled-card {
-  @extend %card-base;
-  background-color: var(--md-sys-color-surface-container-highest);
-  @extend .elevation-0;
-}
-
-// Outlined Card
-.outlined-card {
-  @extend %card-base;
-  background-color: var(--md-sys-color-surface);
-  @extend .elevation-0;
-  border: 1px solid var(--md-sys-color-outline-variant);
-}
-
-// ===== Deprecated .card alias =====
-
-.card-panel {
-  transition: box-shadow var(--md-sys-motion-duration-medium1, 250ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-  padding: 24px;
-  margin: $element-top-margin 0 $element-bottom-margin 0;
-  border-radius: var(--md-card-container-shape);
-  @extend .elevation-1;
-  background-color: var(--md-sys-color-surface);
-}
-
-.card {
-  @extend %card-base;
-  background-color: var(--md-sys-color-surface-container-low);
-  @extend .elevation-1;
-}