@expressivecss/expressive 0.7.0-rc.0 → 0.8.0

package/src/sass/components/_buttons.scss

@@ -1,39 +1,75 @@
+@use "sass:map";
 @use "../abstracts" as *;
 
 // Common buttons and FABs.
 //
 // Anatomy is the HTML. A <button> (or <a class="button">) is a filled
 // common button. Put an <i> first or last for a leading/trailing icon.
-// Icon-only is a 40dp icon button. Helpers switch the M3 variant
-// (tonal, outlined, elevated, text) or the size.
+// Icon-only is a 40dp icon button. Two independent modifier axes dress it:
+// a style (filled, tonal, outlined, elevated, text) and a size (xsmall …
+// xlarge).
 //
-// 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)
+// Nine classes, not twenty-five. The size rules set tokens and the style
+// rules set colours, so every combination falls out of the cascade and no
+// rule names both. `tests/buttons.test.js` fails if one starts to.
+//
+// Tokens follow M3 Expressive, md.comp.button.* (DSP 34.0.21):
+//   the size ladder in abstracts, corner.full at every size
 //   state layer 8% hover / 10% focus+press
 //   FAB 56dp (extra/large icon-only), primary-container, 16dp corners
+//   FAB sizes 40dp small / 56dp default / 80dp medium / 96dp large,
+//     24 / 24 / 26 / 36dp icon, 12 / 16 / 20 / 28dp corners
+
+// The size axis is `$button-sizes` in abstracts, and `button-size()` sets its
+// tokens. Both moved there when button groups grew a size ladder of their own:
+// a group sizes its items from the group, so it needs the same table, and a
+// partial may not @use another partial.
 
-:root {
+:root, :host {
   --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;
+  --md-comp-filled-button-container-shape: 9999px;
+  @include button-size("small");
 }
 
 // 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";
+//
+// `.chip` earns its place here now that assist and suggestion chips are real
+// buttons. The base rules were harmless (`.chip` and `:where(…):not(…)` are
+// both one class, and chips is forwarded after buttons, so the chip won), but
+// the state rules are not: `:where(…):not(…):hover` is *two* — a class from
+// the `:not()` and the pseudo-class — so hovering, focusing or pressing a chip
+// repainted it with the filled-button background while it kept the chip's own
+// text colour.
+//
+// `.icon-button` is here because it is its own component (M3 gives it its own
+// token families, size ladder and colours), not a common button in a round
+// shape. Without the exclusion it would inherit 40dp geometry and a filled
+// primary container before its own partial ever ran.
+//
+// Every entry stays a single class so the `:not()` keeps its one-class
+// specificity; `.chip .close` would make it two and shift every button rule.
+// The delete button needs no entry: `.chip .close` is already two classes, so
+// it ties the state rules and wins on order.
+$_not-btn: ".datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button";
+
+// `label.button` is here for the file input: the control has to be a <label>
+// so that clicking it reaches the <input type="file"> it wraps, but it is a
+// button to look at and to use. Without it the label fell through to the
+// floating-label rule in forms/_input-fields and rendered as invisible,
+// unclickable field furniture.
+// `.btn` is the pre-1.0 name and is deliberately NOT in this list. A
+// <button class="btn"> is styled because it is a <button>; an <a class="btn">
+// is not, and making it so means adding `.btn` to the twenty-odd `:not()`
+// lists that let hosts (footer, drawer, app bar, rail, list, snackbar) step
+// aside for a button - an invariant with no test behind it, for markup that
+// has a working spelling. `a.button` is that spelling, and the docs say so.
+$_btn: "button:not(#{$_not-btn}), a.button, label.button";
 
 :where(#{$_btn}) {
   @include btn;
 
-  > i {
+  > #{$icon} {
     flex: 0 0 auto;
     font-size: var(--md-comp-filled-button-icon-size);
     width: var(--md-comp-filled-button-icon-size);
@@ -42,34 +78,31 @@ $_btn: "button:not(#{$_not-btn}), a.button";
     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.
+  //
+  // Shape only. The glyph is the size rule's, like every other button's: a
+  // `.circle` is a common button wearing a round shape, and `.icon-button` is
+  // the component that carries the icon *button* ladder. It used to pin 24px
+  // here - `md.comp.icon-button.small.icon-size`, right for the 40dp default
+  // and wrong for every other rung, most visibly a 24px glyph adrift in an
+  // `xlarge` 136dp disc. The FAB overrides both, further down.
   &.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, .elevated, .text) {
+// The style axis. Filled is the default, so it is both the styleless case and
+// a class of its own - the two are one rule, because a second `@include
+// btn-filled` would duplicate every state layer in it.
+//
+// They are separate selectors rather than `:is(.filled, :not(…))` on purpose:
+// `:is()` takes the specificity of its heaviest argument, which would lift the
+// default case to one class and let it outrank rules that legitimately beat it
+// today. A selector list keeps each half its own weight.
+:where(#{$_btn}):not(.tonal, .outlined, .elevated, .text),
+:where(#{$_btn}).filled {
   @include btn-filled;
 }
 
@@ -89,48 +122,90 @@ $_btn: "button:not(#{$_not-btn}), a.button";
   @include btn-flat;
 }
 
-// Sizes. small = 32dp, large/extra = 56dp (M3 extra-large / FAB height).
-:where(#{$_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);
+// The size classes. Every one of them sets tokens and a type role and nothing
+// else - the geometry is already written once, in `btn`, against those tokens.
+// A size that declared `height` itself would have to be restated by anything
+// that overrides it, which is how the per-combination rules start.
+@each $name, $s in $button-sizes {
+  :where(#{$_btn}).#{$name} {
+    @include button-size($name);
+    @include typescale(map.get($s, label));
+  }
 }
 
-:where(#{$_btn}).large,
+// `.extra` is the pre-1.0 name for the 56dp button, which is now `.medium`.
+// It aliases the geometry and not the type role, because it never carried
+// one: a rail's FAB is `a.button.extra`, its label is label-large, and
+// `.medium`'s title-medium would grow it. Size, not size-and-label.
+//
+// It is also the FAB's marker class - `circle extra` is a FAB, and the rules
+// below reset this geometry entirely.
 :where(#{$_btn}).extra {
-  --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;
+  @include button-size("medium");
 }
 
+// Every size is corner.full already, so this only bites when a consumer has
+// themed the shape token to something squarer and wants one button back.
 :where(#{$_btn}).rounded {
   border-radius: 9999px;
 }
 
-// Extended FAB: 56dp, large corners, primary-container, icon + label.
+// Extended FAB: an icon plus a label, on its own size and colour axes.
+//
+// Tokens (M3 md.comp.extended-fab.*, DSP 34.0.21). The sizeless case is the
+// base family; the three named sizes are `md.comp.extended-fab.{size}.*`:
+//
+//   size      height  shape  icon  lead  gap  trail  label
+//   (none)      56      16    24    16     8    20   label-large
+//   small       56      16    24    16     8    16   title-medium
+//   medium      80      20    28    26    12    26   title-large
+//   large       96      28    36    28    16    28   headline-small
+//
+// Leading and trailing space are equal at every named size, so the map states
+// one `space`; only the base family keeps M3's older 16/20 asymmetry.
+//
+// The colour axis is M3's three container roles, and it runs through two
+// tokens rather than a background per variant: the state layers mix the label
+// colour into the container colour, so a role that only sets the two tokens
+// gets its own hover and focus for free.
+//
+// `font-size` is restated because the size classes are the same one class
+// this rule is: `.small` sets label-large from the common-button ladder and
+// would otherwise decide the label of an `extend small`.
+$_extend-sizes: (
+  "small": (height: 56px, shape: 16px, icon: 24px, space: 16px, gap: 8px, label: "title-medium"),
+  "medium": (height: 80px, shape: 20px, icon: 28px, space: 26px, gap: 12px, label: "title-large"),
+  "large": (height: 96px, shape: 28px, icon: 36px, space: 28px, gap: 16px, label: "headline-small"),
+);
+
 :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);
+  --md-comp-extended-fab-container-height: 56px;
+  --md-comp-extended-fab-container-shape: 16px;
+  --md-comp-extended-fab-icon-size: 24px;
+  --md-comp-extended-fab-leading-space: 16px;
+  --md-comp-extended-fab-icon-label-space: 8px;
+  --md-comp-extended-fab-trailing-space: 20px;
+  --md-comp-extended-fab-container-color: var(--md-sys-color-primary-container);
+  --md-comp-extended-fab-label-text-color: var(
+    --md-sys-color-on-primary-container
+  );
+
+  gap: var(--md-comp-extended-fab-icon-label-space);
+  height: var(--md-comp-extended-fab-container-height);
+  padding-inline: var(--md-comp-extended-fab-leading-space)
+    var(--md-comp-extended-fab-trailing-space);
+  border-radius: var(--md-comp-extended-fab-container-shape);
+  font-size: var(--md-sys-typescale-label-large-font-size);
+  color: var(--md-comp-extended-fab-label-text-color);
+  background-color: var(--md-comp-extended-fab-container-color);
   @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)
+      var(--md-comp-extended-fab-label-text-color) state-opacity("hover"),
+      var(--md-comp-extended-fab-container-color)
     );
   }
 
@@ -138,33 +213,74 @@ $_btn: "button:not(#{$_not-btn}), a.button";
   &:focus {
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-primary-container) 10%,
-      var(--md-sys-color-primary-container)
+      var(--md-comp-extended-fab-label-text-color) state-opacity("focus"),
+      var(--md-comp-extended-fab-container-color)
     );
   }
 
   @include focus-visible;
 
-  > i {
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
+  > #{$icon} {
+    font-size: var(--md-comp-extended-fab-icon-size);
+    width: var(--md-comp-extended-fab-icon-size);
+    height: var(--md-comp-extended-fab-icon-size);
+    line-height: var(--md-comp-extended-fab-icon-size);
+  }
+
+  // The size axis. Every size sets the same six tokens and its type role -
+  // the geometry is written once, above, against those tokens.
+  @each $name, $s in $_extend-sizes {
+    &.#{$name} {
+      --md-comp-extended-fab-container-height: #{map.get($s, height)};
+      --md-comp-extended-fab-container-shape: #{map.get($s, shape)};
+      --md-comp-extended-fab-icon-size: #{map.get($s, icon)};
+      --md-comp-extended-fab-leading-space: #{map.get($s, space)};
+      --md-comp-extended-fab-icon-label-space: #{map.get($s, gap)};
+      --md-comp-extended-fab-trailing-space: #{map.get($s, space)};
+      @include typescale(map.get($s, label));
+    }
+  }
+
+  // The colour axis. `.primary-container` is the default and is named anyway,
+  // so all three roles are a class a page can be written with.
+  @each $role in ("primary", "secondary", "tertiary") {
+    &.#{$role}-container {
+      --md-comp-extended-fab-container-color: var(
+        --md-sys-color-#{$role}-container
+      );
+      --md-comp-extended-fab-label-text-color: var(
+        --md-sys-color-on-#{$role}-container
+      );
+    }
   }
 }
 
 // FAB. Icon-only .extra / .large is the 56dp regular FAB. Add .small for
-// the 40dp small FAB. The speed-dial host is .fixed-action-btn.
+// the 40dp small FAB. The speed-dial host is .fab.
+//
+// Tokens (M3 md.comp.fab.*):
+//   --md-comp-fab-container-height  56dp
+//   --md-comp-fab-container-width   56dp
+//   --md-comp-fab-container-shape   16dp, corner.large - rounded, not a pill
+//   --md-comp-fab-icon-size         24dp
+// .small, .medium and .extra.large reset those four; nothing else varies
+// by size.
 :where(#{$_btn}).extra.circle,
 :where(#{$_btn}).large.circle {
+  --md-comp-fab-container-height: 56px;
+  --md-comp-fab-container-width: 56px;
+  --md-comp-fab-container-shape: 16px;
+  --md-comp-fab-icon-size: 24px;
+
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
-  width: 56px;
-  height: 56px;
+  width: var(--md-comp-fab-container-width);
+  height: var(--md-comp-fab-container-height);
   padding: 0;
   border: none;
-  border-radius: 16px;
+  border-radius: var(--md-comp-fab-container-shape);
   color: var(--md-sys-color-on-primary-container);
   background-color: var(--md-sys-color-primary-container);
   text-decoration: none;
@@ -174,11 +290,11 @@ $_btn: "button:not(#{$_not-btn}), a.button";
   @include z-depth("3");
   @include focus-visible;
 
-  > i {
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
+  > #{$icon} {
+    font-size: var(--md-comp-fab-icon-size);
+    width: var(--md-comp-fab-icon-size);
+    height: var(--md-comp-fab-icon-size);
+    line-height: var(--md-comp-fab-icon-size);
     color: inherit;
   }
 
@@ -186,7 +302,7 @@ $_btn: "button:not(#{$_not-btn}), a.button";
     @include z-depth("4");
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-primary-container) 8%,
+      var(--md-sys-color-on-primary-container) state-opacity("hover"),
       var(--md-sys-color-primary-container)
     );
   }
@@ -195,19 +311,25 @@ $_btn: "button:not(#{$_not-btn}), a.button";
   &:focus {
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-primary-container) 10%,
+      var(--md-sys-color-on-primary-container) state-opacity("focus"),
       var(--md-sys-color-primary-container)
     );
   }
 
+  // Small FAB: 40dp container, corner.medium, icon stays 24dp.
   &.small {
-    width: 40px;
-    height: 40px;
-    border-radius: 12px;
+    --md-comp-fab-container-height: 40px;
+    --md-comp-fab-container-width: 40px;
+    --md-comp-fab-container-shape: 12px;
+  }
 
-    > i {
-      font-size: 24px;
-    }
+  // Medium FAB: 80dp container, 26dp icon. The corner continues the size
+  // ladder - 12dp small, 16dp default, 20dp here (corner.large-increased).
+  &.medium {
+    --md-comp-fab-container-height: 80px;
+    --md-comp-fab-container-width: 80px;
+    --md-comp-fab-container-shape: 20px;
+    --md-comp-fab-icon-size: 26px;
   }
 
   &.halfway-fab {
@@ -222,15 +344,34 @@ $_btn: "button:not(#{$_not-btn}), a.button";
   }
 }
 
+// Large FAB: 96dp container, corner.extra-large, 36dp icon.
+//
+// `.large` is *also* the alias for the default FAB - `circle large` is
+// `circle extra` - so the size only applies next to `.extra`, and the markup
+// is `circle extra large`. Nesting it as `&.large` inside the block above
+// would compile `.large.circle.large` as well, and every aliased 56dp FAB on
+// a page would silently grow to 96dp.
+:where(#{$_btn}).extra.circle.large {
+  --md-comp-fab-container-height: 96px;
+  --md-comp-fab-container-width: 96px;
+  --md-comp-fab-container-shape: 28px;
+  --md-comp-fab-icon-size: 36px;
+}
+
 :where(#{$_btn}):disabled,
 :where(#{$_btn})[disabled],
 :where(#{$_btn}).disabled {
   @include btn-disabled;
 }
 
+// The FAB host. M3 names this component "FAB"; `.fixed-action-btn` is the
+// Materialize name and stays as an alias. Interpolate inside :is() - a bare
+// comma list breaks out of its context (see $_bar in _navbar).
+$_fab: ":is(.fab, .fixed-action-btn)";
+
 // Speed dial. .active (and :hover when the pointer can hover) opens the
 // menu. Motion is CSS. .click-to-toggle is the markup switch for click
-// mode. .fixed-action-btn stays the public class.
+// mode. `.fab` is the public class; .fixed-action-btn is the old alias.
 //
 // Tokens:
 //   --md-comp-fab-offset            16px from the corner
@@ -241,7 +382,7 @@ $_btn: "button:not(#{$_not-btn}), a.button";
 //   --md-comp-fab-easing            soft ease-in-out
 //   --md-comp-fab-travel            center-to-center step into the main disc
 //   --md-comp-fab-hidden-transform  toward / into the main button
-.fixed-action-btn {
+#{$_fab} {
   --md-comp-fab-offset: 16px;
   --md-comp-fab-z: 997;
   --md-comp-fab-menu-gap: 16px;
@@ -409,7 +550,7 @@ $_btn: "button:not(#{$_not-btn}), a.button";
       width: 100%;
       height: 56px;
 
-      > :is(a, button) > i {
+      > :is(a, button) > #{$icon} {
         opacity: 0;
       }
 
@@ -437,6 +578,18 @@ $_btn: "button:not(#{$_not-btn}), a.button";
         background: transparent;
         box-shadow: none;
         color: var(--md-sys-color-on-primary-container);
+
+        &:hover {
+          background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) state-opacity("hover"), transparent);
+        }
+
+        &:focus-visible {
+          background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) state-opacity("focus"), transparent);
+        }
+
+        &:active {
+          background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) state-opacity("pressed"), transparent);
+        }
       }
     }
   }
@@ -454,7 +607,7 @@ $_btn: "button:not(#{$_not-btn}), a.button";
 }
 
 @media (hover: hover) {
-  .fixed-action-btn:not(.click-to-toggle):hover :is(ul, menu) {
+  #{$_fab}:not(.click-to-toggle):hover :is(ul, menu) {
     visibility: visible;
     transition-delay: 0s;
 
@@ -467,7 +620,7 @@ $_btn: "button:not(#{$_not-btn}), a.button";
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .fixed-action-btn {
+  #{$_fab} {
     --md-comp-fab-duration: 0s;
     --md-comp-fab-stagger: 0s;
   }