@expressivecss/expressive 0.1.0-alpha.3

package/src/scss/components/_buttons.scss

@@ -0,0 +1,412 @@
+@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

@@ -0,0 +1,267 @@
+@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;
+}