@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/sass/components/_buttons.scss

@@ -0,0 +1,407 @@
+@use "../abstracts" as *;
+
+// Common buttons and FABs.
+//
+// Anatomy is the HTML. A <button> (or <a class="button"> / .btn) is a filled
+// common button. Put an <i> first or last for a leading/trailing icon — no
+// icon-left / icon-right required. Icon-only is a 40dp icon button. Helpers
+// switch the M3 variant (tonal, outlined, elevated, text) or the size.
+//
+// Tokens follow https://m3.material.io/components/buttons/specs
+//   height 40 / 32 small / 56 large, label-large, 20dp stadium
+//   icon 18dp, 8dp gap, 24dp inset (16dp next to an icon)
+//   state layer 8% hover / 10% focus+press
+//   FAB 56dp (extra/large icon-only), primary-container, 16dp corners
+
+:root {
+  --md-comp-filled-button-container-color: var(--md-sys-color-primary);
+  --md-comp-filled-button-label-text-color: var(--md-sys-color-on-primary);
+  --md-comp-filled-button-container-height: 40px;
+  --md-comp-filled-button-container-shape: 20px;
+  --md-comp-filled-button-leading-space: 24px;
+  --md-comp-filled-button-trailing-space: 24px;
+  --md-comp-filled-button-with-icon-leading-space: 16px;
+  --md-comp-filled-button-icon-size: 18px;
+  --md-comp-filled-button-icon-label-space: 8px;
+}
+
+// Widget chrome that happens to be a <button> — not a common button.
+$_not-btn: ".datepicker-day-button, .month-prev, .month-next, .indicator-item-btn";
+
+$_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-small";
+
+:where(#{$_btn}) {
+  @include btn;
+
+  > i {
+    flex: 0 0 auto;
+    font-size: var(--md-comp-filled-button-icon-size);
+    width: var(--md-comp-filled-button-icon-size);
+    height: var(--md-comp-filled-button-icon-size);
+    line-height: var(--md-comp-filled-button-icon-size);
+    overflow: hidden;
+  }
+
+  // :only-child ignores text nodes, so "<i>add</i>Create" would look like
+  // an icon button. Wrap the label in a <span> (BeerCSS) for the 16dp
+  // leading inset; otherwise the icon still sits on the flex gap.
+  &:has(> i + span) {
+    padding-inline-start: var(--md-comp-filled-button-with-icon-leading-space);
+  }
+
+  &:has(> span + i) {
+    padding-inline-end: var(--md-comp-filled-button-with-icon-leading-space);
+  }
+
+  // Icon button — opt in with .circle. Do not infer from :only-child.
+  &.circle {
+    width: var(--md-comp-filled-button-container-height);
+    padding: 0;
+    border-radius: 50%;
+
+    > i {
+      font-size: 24px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+    }
+  }
+}
+
+// Default variant is filled. :where() keeps specificity at zero so .tonal etc. win.
+:where(#{$_btn}):not(.tonal, .outlined, .border, .elevated, .text, .transparent, .btn-flat) {
+  @include btn-filled;
+}
+
+:where(#{$_btn}).tonal {
+  @include btn-tonal;
+}
+
+:where(#{$_btn}).outlined,
+:where(#{$_btn}).border {
+  @include btn-outlined;
+}
+
+:where(#{$_btn}).elevated {
+  @include btn-elevated;
+}
+
+:where(#{$_btn}).text,
+:where(#{$_btn}).transparent,
+.btn-flat {
+  @include btn-flat;
+}
+
+// icon-right is a compat alias: new markup puts the icon last in the DOM.
+:where(#{$_btn}).icon-right {
+  flex-direction: row-reverse;
+}
+
+// Sizes. small = 32dp, large/extra = 56dp (M3 extra-large / FAB height).
+:where(#{$_btn}).small,
+.btn-small {
+  --md-comp-filled-button-container-height: 32px;
+  --md-comp-filled-button-container-shape: 16px;
+  --md-comp-filled-button-leading-space: 16px;
+  --md-comp-filled-button-trailing-space: 16px;
+  --md-comp-filled-button-with-icon-leading-space: 12px;
+  --md-comp-filled-button-icon-size: 16px;
+  height: 32px;
+  font-size: var(--md-sys-typescale-label-medium-font-size);
+}
+
+:where(#{$_btn}).large,
+:where(#{$_btn}).extra,
+.btn-large {
+  --md-comp-filled-button-container-height: 56px;
+  --md-comp-filled-button-container-shape: 28px;
+  --md-comp-filled-button-leading-space: 24px;
+  --md-comp-filled-button-trailing-space: 24px;
+  --md-comp-filled-button-with-icon-leading-space: 16px;
+  --md-comp-filled-button-icon-size: 24px;
+  height: 56px;
+}
+
+:where(#{$_btn}).rounded {
+  border-radius: 9999px;
+}
+
+.btn-block {
+  display: flex;
+  width: 100%;
+}
+
+// Extended FAB: 56dp, large corners, primary-container, icon + label.
+:where(#{$_btn}).extend {
+  height: 56px;
+  padding-inline: 16px 20px;
+  border-radius: 16px;
+  color: var(--md-sys-color-on-primary-container);
+  background-color: var(--md-sys-color-primary-container);
+  @include z-depth("3");
+
+  &:hover {
+    @include z-depth("4");
+    background-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-primary-container) 8%,
+      var(--md-sys-color-primary-container)
+    );
+  }
+
+  &:active,
+  &:focus {
+    background-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-primary-container) 10%,
+      var(--md-sys-color-primary-container)
+    );
+  }
+
+  @include focus-visible;
+
+  > i {
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+  }
+}
+
+// FAB. .btn-floating is the JS contract (FloatingActionButton looks it up).
+// Icon-only .extra / .large is the same 56dp regular FAB. Bare .btn-floating
+// is the 40dp small FAB.
+.btn-floating,
+:where(#{$_btn}).extra.circle,
+:where(#{$_btn}).large.circle,
+:where(#{$_btn}).btn-large.circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  border: none;
+  border-radius: 16px;
+  color: var(--md-sys-color-on-primary-container);
+  background-color: var(--md-sys-color-primary-container);
+  text-decoration: none;
+  cursor: pointer;
+  appearance: none;
+  vertical-align: middle;
+  @include z-depth("3");
+  @include focus-visible;
+  transition: background-color .2s ease-out, box-shadow .2s ease-out;
+
+  > i {
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    color: inherit;
+  }
+
+  &:hover {
+    @include z-depth("4");
+    background-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-primary-container) 8%,
+      var(--md-sys-color-primary-container)
+    );
+  }
+
+  &:active,
+  &:focus {
+    background-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-primary-container) 10%,
+      var(--md-sys-color-primary-container)
+    );
+  }
+
+  &.small,
+  &.btn-small {
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+
+    > i {
+      font-size: 24px;
+    }
+  }
+
+  &.halfway-fab {
+    position: absolute;
+    right: 24px;
+    bottom: -28px;
+
+    &.left {
+      right: auto;
+      left: 24px;
+    }
+  }
+}
+
+// Small FAB alias: .btn-floating alone is 40dp (historical size + M3 small).
+.btn-floating:not(.large, .btn-large, .extra, .small, .btn-small) {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+
+  &.halfway-fab {
+    bottom: -20px;
+  }
+}
+
+:where(#{$_btn}):disabled,
+:where(#{$_btn})[disabled],
+:where(#{$_btn}).disabled,
+.btn-floating:disabled,
+.btn-floating[disabled],
+.btn-floating.disabled {
+  @include btn-disabled;
+}
+
+// Fixed Action Button — JS-driven menu around a FAB.
+.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,
+      & > button 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,
+        button {
+          display: block;
+          overflow: hidden;
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background-color: transparent;
+          box-shadow: none;
+          color: var(--md-sys-color-on-primary-container);
+          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,
+    button.btn-floating {
+      opacity: 0;
+    }
+  }
+
+  .fab-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 56px;
+    height: 56px;
+    background-color: var(--md-sys-color-primary-container);
+    border-radius: 16px;
+    transform: scale(0);
+  }
+}

package/src/sass/components/_cards.scss

@@ -0,0 +1,328 @@
+@use "../abstracts" as *;
+
+// Cards.
+//
+// Anatomy is the HTML. An <article> is an elevated card. A heading is the
+// headline, a <p> is supporting text, a direct <nav> is the action row,
+// <img> / <figure> is media. Helpers switch the M3 variant (filled, outlined)
+// or the layout (horizontal). .card and .card-panel stay as aliases.
+//
+// Tokens follow https://m3.material.io/components/cards/specs
+//   container  surface, 12dp corners
+//   elevated   level 1, hover level 2
+//   filled     surface-variant, level 0
+//   outlined   surface + 1dp outline, level 0
+//   headline   title-medium / on-surface
+//   body       body-medium / on-surface-variant
+//   padding    16dp
+
+$_card: "article, .card, .card-panel";
+
+:where(#{$_card}) {
+  --md-comp-elevated-card-container-color: var(--md-sys-color-surface);
+  --md-comp-elevated-card-container-shape: 12px;
+
+  position: relative;
+  box-sizing: border-box;
+  background-color: var(--md-comp-elevated-card-container-color);
+  color: var(--md-sys-color-on-surface);
+  border-radius: var(--md-comp-elevated-card-container-shape);
+  overflow: hidden;
+  transition: box-shadow .2s ease-out;
+}
+
+// Default is elevated. :where() keeps specificity at zero so .outlined wins.
+:where(#{$_card}):not(.filled, .outlined, .border) {
+  @include z-depth("1");
+
+  &:hover {
+    @include z-depth("2");
+  }
+}
+
+:where(#{$_card}).filled {
+  @include z-depth("0");
+  background-color: var(--md-sys-color-surface-variant);
+}
+
+:where(#{$_card}).outlined,
+:where(#{$_card}).border {
+  @include z-depth("0");
+  border: 1px solid var(--md-sys-color-outline-variant);
+}
+
+// --- Semantic children ----------------------------------------------------
+
+article > :is(h1, h2, h3, h4, h5, h6),
+article > header > :is(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+  padding: 16px 16px 0;
+  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-size: var(--md-sys-typescale-title-medium-font-size);
+  font-weight: var(--md-sys-typescale-title-medium-font-weight);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
+  color: var(--md-sys-color-on-surface);
+}
+
+article > p,
+article > header > p {
+  margin: 0;
+  padding: 8px 16px 16px;
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
+  color: color-mix(in oklab, currentColor 72%, transparent);
+}
+
+article > :is(h1, h2, h3, h4, h5, h6) + p,
+article > header > :is(h1, h2, h3, h4, h5, h6) + p {
+  padding-top: 0;
+}
+
+article > header {
+  padding: 0;
+  background: none;
+  color: inherit;
+}
+
+article > nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px 8px 8px;
+  margin: 0;
+}
+
+article > img,
+article > picture,
+article > figure {
+  display: block;
+  width: 100%;
+  margin: 0;
+}
+
+article > img,
+article > picture img,
+article > figure img {
+  display: block;
+  width: 100%;
+  object-fit: cover;
+}
+
+article > figure {
+  position: relative;
+}
+
+article > figure > figcaption {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 16px;
+  color: var(--md-sys-color-on-surface);
+  background: color-mix(in oklab, var(--md-sys-color-surface) 72%, transparent);
+  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-size: var(--md-sys-typescale-title-medium-font-size);
+  font-weight: var(--md-sys-typescale-title-medium-font-weight);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+}
+
+// Horizontal: media on the start, body stacked beside it.
+article.horizontal,
+.card.horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  overflow: hidden;
+
+  > img,
+  > picture,
+  > figure,
+  > .card-image {
+    flex: 0 0 40%;
+    max-width: 40%;
+    width: 40%;
+    align-self: stretch;
+  }
+
+  > img,
+  > picture img,
+  > figure img,
+  > .card-image img {
+    height: 100%;
+    object-fit: cover;
+  }
+
+  > div {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+// Fixed heights (Materialize sizes, still useful for uniform grids).
+article.small, .card.small { height: 300px; }
+article.medium, .card.medium { height: 400px; }
+article.large, .card.large { height: 500px; }
+
+article.small, article.medium, article.large,
+.card.small, .card.medium, .card.large {
+  display: flex;
+  flex-direction: column;
+
+  > img, > picture, > figure, > .card-image {
+    flex: 0 1 60%;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  > img, > figure img, > .card-image img {
+    height: 100%;
+  }
+
+  > p, > .card-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  > nav, > .card-action {
+    margin-top: auto;
+  }
+}
+
+article.horizontal.small,
+article.horizontal.medium,
+article.horizontal.large,
+.card.horizontal.small,
+.card.horizontal.medium,
+.card.horizontal.large {
+  flex-direction: row;
+
+  > img, > picture, > figure, > .card-image {
+    flex: 0 0 40%;
+    max-height: none;
+  }
+}
+
+// Reveal overlay. aside is the semantic name; .card-reveal is the JS alias.
+article > aside,
+.card-reveal {
+  display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  box-sizing: border-box;
+  padding: 16px;
+  overflow-y: auto;
+  background-color: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+}
+
+article.sticky > nav,
+.card.sticky-action > .card-action {
+  position: relative;
+  z-index: 4;
+  background-color: inherit;
+}
+
+article.sticky > aside,
+.card.sticky-action > .card-reveal {
+  bottom: auto;
+  height: calc(100% - 52px);
+}
+
+// Simple padded surface. Same tokens as a card with no slots.
+.card-panel {
+  padding: 16px;
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+}
+
+// --- Legacy slots (.card-*) so existing markup keeps working --------------
+
+.card-title {
+  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-size: var(--md-sys-typescale-title-medium-font-size);
+  font-weight: var(--md-sys-typescale-title-medium-font-weight);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
+}
+
+.card .card-image {
+  position: relative;
+
+  img {
+    display: block;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  .card-title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    max-width: 100%;
+    padding: 16px;
+    color: var(--md-sys-color-on-surface);
+    background: color-mix(in oklab, var(--md-sys-color-surface) 72%, transparent);
+  }
+
+  .activator {
+    position: absolute;
+    inset: 0;
+    cursor: pointer;
+  }
+
+  img.activator {
+    position: relative;
+  }
+}
+
+.card .card-content {
+  padding: 16px;
+  border-radius: 0;
+
+  p { margin: 0; }
+
+  .card-title {
+    display: block;
+    margin-bottom: 8px;
+
+    &.activator { cursor: pointer; }
+  }
+}
+
+.card .card-action {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px 8px;
+
+  a:not(.button):not(.btn):not(.btn-floating) {
+    @include btn-flat;
+    height: auto;
+    padding: 8px 12px;
+    min-height: 40px;
+  }
+}
+
+.card .card-stacked {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+
+  .card-content { flex-grow: 1; }
+}
+
+.card .card-image .activator {
+  cursor: pointer;
+}
+
+.no-padding { padding: 0 !important; }