@expressivecss/expressive 0.13.1 → 0.15.0

package/src/sass/components/_navbar.scss

@@ -107,11 +107,7 @@ header:has(> #{$_bar}) {
   > #{$_bar} > hgroup > #{$_heading} {
     margin: 0;
     color: inherit;
-    font-family: var(--md-sys-typescale-title-large-font-family-name);
-    font-size: var(--md-sys-typescale-title-large-font-size);
-    font-weight: var(--md-sys-typescale-title-large-font-weight);
-    line-height: var(--md-sys-typescale-title-large-line-height);
-    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+    @include typescale("title-large");
   }
 
   > #{$_bar} > hgroup {
@@ -126,11 +122,7 @@ header:has(> #{$_bar}) {
   > #{$_bar} > hgroup > p {
     margin: 0;
     color: inherit;
-    font-family: var(--md-sys-typescale-label-medium-font-family-name);
-    font-size: var(--md-sys-typescale-label-medium-font-size);
-    font-weight: var(--md-sys-typescale-label-medium-font-weight);
-    line-height: var(--md-sys-typescale-label-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+    @include typescale("label-medium");
   }
 
   // Icon-only actions — 48dp target, 24dp glyph, 4dp from the container edge.
@@ -281,11 +273,7 @@ header:has(> #{$_bar}) {
   padding: 0 12px;
   color: inherit;
   text-decoration: none;
-  font-family: var(--md-sys-typescale-label-large-font-family-name);
-  font-size: var(--md-sys-typescale-label-large-font-size);
-  font-weight: var(--md-sys-typescale-label-large-font-weight);
-  line-height: var(--md-sys-typescale-label-large-line-height);
-  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  @include typescale("label-large");
   @include focus-visible;
 
   &:hover:not(.active) {
@@ -378,19 +366,11 @@ header.medium:has(> #{$_bar}) > #{$_bar} {
 
   > #{$_heading},
   > hgroup > #{$_heading} {
-    font-family: var(--md-sys-typescale-headline-medium-font-family-name);
-    font-size: var(--md-sys-typescale-headline-medium-font-size);
-    font-weight: var(--md-sys-typescale-headline-medium-font-weight);
-    line-height: var(--md-sys-typescale-headline-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
+    @include typescale("headline-medium");
   }
 
   > hgroup > p {
-    font-family: var(--md-sys-typescale-label-large-font-family-name);
-    font-size: var(--md-sys-typescale-label-large-font-size);
-    font-weight: var(--md-sys-typescale-label-large-font-weight);
-    line-height: var(--md-sys-typescale-label-large-line-height);
-    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+    @include typescale("label-large");
   }
 }
 
@@ -408,19 +388,11 @@ header.large:has(> #{$_bar}) > #{$_bar} {
 
   > #{$_heading},
   > hgroup > #{$_heading} {
-    font-family: var(--md-sys-typescale-display-small-font-family-name);
-    font-size: var(--md-sys-typescale-display-small-font-size);
-    font-weight: var(--md-sys-typescale-display-small-font-weight);
-    line-height: var(--md-sys-typescale-display-small-line-height);
-    letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
+    @include typescale("display-small");
   }
 
   > hgroup > p {
-    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);
+    @include typescale("title-medium");
   }
 }
 
@@ -473,20 +445,12 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-family: var(--md-sys-typescale-title-large-font-family-name);
-    font-size: var(--md-sys-typescale-title-large-font-size);
-    font-weight: var(--md-sys-typescale-title-large-font-weight);
-    line-height: var(--md-sys-typescale-title-large-line-height);
-    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+    @include typescale("title-large");
   }
 
   > hgroup > p {
     padding: 0;
-    font-family: var(--md-sys-typescale-label-medium-font-family-name);
-    font-size: var(--md-sys-typescale-label-medium-font-size);
-    font-weight: var(--md-sys-typescale-label-medium-font-weight);
-    line-height: var(--md-sys-typescale-label-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+    @include typescale("label-medium");
   }
 }
 

package/src/sass/components/_navigation-rail.scss

@@ -29,6 +29,27 @@
   --md-comp-nav-rail-expanded-width: 280px;
 }
 
+// Expanded rail as an overlay with a scrim.
+@mixin _modal-rail {
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 998;
+  @include z-depth("1");
+
+  // A blurred rail would become the containing block of the fixed scrim
+  // below and clip it to the rail, so a modal rail stays solid.
+  background-color: var(--md-sys-color-surface-container);
+  backdrop-filter: none;
+
+  &::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-color: var(--md-comp-scrim-color);
+    z-index: -1;
+  }
+}
+
 .navigation-rail {
   --md-comp-nav-rail-icon-size: 24px;
   --md-comp-nav-rail-indicator-width: 56px;
@@ -278,42 +299,12 @@
   }
 
   &.expanded.modal {
-    position: fixed;
-    inset: 0 auto 0 0;
-    z-index: 998;
-    @include z-depth("1");
-
-    // A blurred rail would become the containing block of the fixed scrim
-    // below and clip it to the rail, so a modal rail stays solid.
-    background-color: var(--md-sys-color-surface-container);
-    backdrop-filter: none;
-
-    &::before {
-      content: "";
-      position: fixed;
-      inset: 0;
-      background-color: var(--md-comp-scrim-color);
-      z-index: -1;
-    }
+    @include _modal-rail;
   }
 
   @include bp-down("medium") {
     &.expanded:not(.modal) {
-      position: fixed;
-      inset: 0 auto 0 0;
-      z-index: 998;
-      @include z-depth("1");
-
-      background-color: var(--md-sys-color-surface-container);
-      backdrop-filter: none;
-
-      &::before {
-        content: "";
-        position: fixed;
-        inset: 0;
-        background-color: var(--md-comp-scrim-color);
-        z-index: -1;
-      }
+      @include _modal-rail;
     }
   }
 }

package/src/sass/components/_page-footer.scss

@@ -17,7 +17,10 @@
 // Unfilled by default (dashed hairline). .filled uses surface-container.
 // There is no JavaScript.
 
-footer:not(:has(> .navigation-bar:only-child)) {
+// Any footer except one wrapping a lone navigation bar.
+$_footer: "footer:not(:has(> .navigation-bar:only-child))";
+
+#{$_footer} {
   --md-comp-footer-padding-block: 3rem;
   --md-comp-footer-padding-inline: 1rem;
   --md-comp-footer-gap: 2rem;
@@ -54,16 +57,16 @@ footer:not(:has(> .navigation-bar:only-child)) {
   }
 }
 
-footer:not(:has(> nav:only-child)).filled,
-footer:not(:has(> nav:only-child)).surface {
+#{$_footer}.filled,
+#{$_footer}.surface {
   background-color: var(--md-sys-color-surface-container);
   border-top: 1px solid var(--md-sys-color-outline-variant);
 }
 
 // Columns: direct <nav> children. A wrapping .container is the grid
 // when the author uses one. Legacy .row still spans the full measure.
-footer:not(:has(> nav:only-child)) > .container,
-footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+#{$_footer} > .container,
+#{$_footer}:not(:has(> .container)) {
   display: grid;
   gap: var(--md-comp-footer-gap);
   grid-template-columns: 1fr;
@@ -85,14 +88,14 @@ footer:not(:has(> nav:only-child)):not(:has(> .container)) {
   }
 }
 
-footer:not(:has(> nav:only-child)) > .container > .row,
-footer:not(:has(> nav:only-child)) > .row {
+#{$_footer} > .container > .row,
+#{$_footer} > .row {
   grid-column: 1 / -1;
 }
 
 // A column with no links is a <section>, not a <nav> - see rule 4. Both are
 // columns to look at.
-footer:not(:has(> nav:only-child)) :is(nav, section) {
+#{$_footer} :is(nav, section) {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -100,8 +103,8 @@ footer:not(:has(> nav:only-child)) :is(nav, section) {
   min-width: 0;
 }
 
-footer:not(:has(> nav:only-child)) nav > a:not(.button, .icon-button, .circle, .extra),
-footer:not(:has(> nav:only-child)) ul a:not(.button, .icon-button, .circle, .extra) {
+#{$_footer} nav > a:not(.button, .icon-button, .circle, .extra),
+#{$_footer} ul a:not(.button, .icon-button, .circle, .extra) {
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -119,8 +122,8 @@ footer:not(:has(> nav:only-child)) ul a:not(.button, .icon-button, .circle, .ext
 // The legal bar. `.container` is a supported columns wrapper - the rule above
 // already accounts for it - so the bar has to be found through it too, or a
 // footer written the documented way gets an unstyled copyright row.
-footer:not(:has(> nav:only-child)) > small:last-child,
-footer:not(:has(> nav:only-child)) > .container > small:last-child {
+#{$_footer} > small:last-child,
+#{$_footer} > .container > small:last-child {
   display: flex;
   flex-wrap: wrap;
   align-items: center;

package/src/sass/components/_panes.scss

@@ -169,7 +169,6 @@
     @include z-depth("0");
 
     &.elevated {
-      background-color: var(--md-sys-color-surface-container-low);
       @include z-depth("1");
     }
 
@@ -255,10 +254,7 @@
         background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
       }
 
-      &:focus-visible {
-        outline: 3px solid var(--md-sys-color-secondary);
-        outline-offset: 2px;
-      }
+      @include focus-visible;
     }
   }
 
@@ -281,7 +277,7 @@
   }
 
   // Footer / Action Bar
-  > footer:not(:has(> nav:only-child)),
+  > footer:not(:has(> .navigation-bar:only-child)),
   > :is(footer, .pane-footer, nav:last-child) {
     display: flex;
     flex-wrap: wrap;

package/src/sass/components/_particles.scss

@@ -0,0 +1,14 @@
+@use "../abstracts" as *;
+
+// Particles. A <canvas class="particles"> covers its nearest positioned
+// ancestor and lets clicks through to what is under it. The Particles script
+// paints the dots in the canvas's `color`.
+
+canvas.particles {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  color: var(--md-sys-color-on-surface);
+  pointer-events: none;
+}

package/src/sass/components/_progress.scss

@@ -102,7 +102,9 @@ progress.progress {
 // `<span class="progress circular">` is not a <progress>, has no determinate
 // child, and so matched this too - drawing a linear fill on top of the conic
 // circular indicator.
-.progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)) {
+$_bare: ".progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate))";
+
+#{$_bare} {
   &::after {
     content: "";
     position: absolute;
@@ -219,7 +221,7 @@ progress.progress:indeterminate {
   .progress > .determinate,
   .progress > .indeterminate::before,
   .progress > .indeterminate::after,
-  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate))::after,
+  #{$_bare}::after,
   progress.progress:indeterminate::before,
   progress.progress:indeterminate::after {
     background-color: CanvasText;
@@ -253,7 +255,7 @@ progress.progress:indeterminate {
   .progress::after,
   progress.progress:indeterminate::before,
   progress.progress:indeterminate::after,
-  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after,
+  #{$_bare}:not([style*="--md-comp-progress-value"])::after,
   :is(.preloader, .progress.circular) {
     animation: none;
   }
@@ -262,7 +264,7 @@ progress.progress:indeterminate {
   .progress > .indeterminate::after,
   progress.progress:indeterminate::before,
   progress.progress:indeterminate::after,
-  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after {
+  #{$_bare}:not([style*="--md-comp-progress-value"])::after {
     width: 40%;
   }
 

package/src/sass/components/_side-sheet.scss

@@ -153,10 +153,7 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
       background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
 
-    &:focus-visible {
-      outline: 3px solid var(--md-sys-color-secondary);
-      outline-offset: 2px;
-    }
+    @include focus-visible;
   }
 
   > :is(form, nav):last-child {

package/src/sass/components/_stepper.scss

@@ -166,10 +166,6 @@ $_stepper-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
         margin-block: 4px;
       }
 
-      &:last-child::after {
-        content: none;
-      }
-
       > .stepper-content {
         grid-column: 2;
         grid-row: 3;

package/src/sass/components/_table_of_contents.scss

@@ -7,11 +7,13 @@
 //   --md-comp-toc-label-color
 //   --md-comp-toc-active-color
 //   --md-comp-toc-indicator
+//   --md-comp-toc-item-height   48px, the Material touch target
 
 .table-of-contents {
   --md-comp-toc-label-color: var(--md-sys-color-on-surface-variant);
   --md-comp-toc-active-color: var(--md-sys-color-primary);
   --md-comp-toc-indicator: 2px;
+  --md-comp-toc-item-height: 48px;
 
   list-style: none;
   margin: 0;
@@ -29,7 +31,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    min-height: 2rem;
+    min-height: var(--md-comp-toc-item-height);
     padding-inline-start: 16px;
     border-inline-start: var(--md-comp-toc-indicator) solid transparent;
     color: var(--md-comp-toc-label-color);

package/src/sass/components/_timepicker.scss

@@ -16,7 +16,6 @@
 :is(.timepicker-digital-display, .time-picker-digital-display) {
   width: auto;
   flex: 1 auto;
-  // background-color: var(--md-sys-color-surface);
   padding: 2rem .67rem .67rem .67rem;
   font-weight: 300;
 }
@@ -27,7 +26,6 @@
   text-align: left;
   color: var(--md-sys-color-on-surface-variant);
   font-weight: 400;
-  /*position: relative;*/
   user-select: none;
   padding: 1rem 1rem 1.3rem 1rem;
 
@@ -80,15 +78,8 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   text-align: center;
 }
 
-/*input[type=text].text-primary {
-  color: var(--md-sys-color-on-background);
-}*/
-
 :is(.timepicker-display-am-pm, .time-picker-display-am-pm) {
   font-size: 1.3rem;
-  /*position: absolute;
-  top: 1rem;
-  right: 1rem;*/
   font-weight: 400;
 }
 
@@ -109,7 +100,6 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   line-height: 2rem;
   vertical-align: middle;
   text-align: center;
-  // background-color: transparent;
   border: 1px solid var(--md-sys-color-outline);
 }
 
@@ -128,7 +118,6 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
 :is(.timepicker-analog-display, .time-picker-analog-display) {
   flex: 2.5 auto;
   padding: .67rem;
-  // background-color: var(--md-sys-color-surface);
 }
 
 :is(.timepicker-plate, .time-picker-plate) {
@@ -149,10 +138,7 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
 :is(.timepicker-canvas, .time-picker-canvas),
 :is(.timepicker-dial, .time-picker-dial) {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  inset: 0;
 }
 
 :is(.timepicker-minutes, .time-picker-minutes) {
@@ -206,11 +192,7 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   opacity: 0.25;
 }
 
-:is(.timepicker-canvas-bearing, .time-picker-canvas-bearing) {
-  stroke: none;
-  fill: var(--md-sys-color-primary);
-}
-
+:is(.timepicker-canvas-bearing, .time-picker-canvas-bearing),
 :is(.timepicker-canvas-bg, .time-picker-canvas-bg) {
   stroke: none;
   fill: var(--md-sys-color-primary);
@@ -243,9 +225,6 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   :is(.timepicker-container, .time-picker-container) {
     width: auto;
     max-width: 620px;
-  }
-
-  :is(.timepicker-container, .time-picker-container) {
     flex-direction: row;
   }
 
@@ -254,7 +233,6 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   }
 
   :is(.timepicker-text-container, .time-picker-text-container) {
-    /*top: 31%;*/
     flex-direction: column;
     margin-top: 4.8rem;
     text-align: center;
@@ -277,24 +255,14 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   :is(.timepicker-container, .time-picker-container) .am-btn,
   :is(.timepicker-container, .time-picker-container) .pm-btn {
     flex-grow: 1;
-    /*width: auto;*/
-    // Same two retired variables as above; both declarations
-    // rendered as 0. The corner rules that follow square off the inner
-    // edges, so the outer ones are the only radius in play.
-    padding-inline: 0;
+    // A retired variable that always rendered as 0. Squares all four
+    // corners of both buttons.
     border-radius: 0;
     border: 1px solid var(--md-sys-color-outline);
   }
 
-  :is(.timepicker-container, .time-picker-container) .am-btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
   :is(.timepicker-container, .time-picker-container) .pm-btn {
     border-left: 0;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
   }
 
   :is(.timepicker-plate, .time-picker-plate) {

package/src/sass/components/_toolbar.scss

@@ -51,10 +51,6 @@
 // (rule 4) - and not role="toolbar" either, because that is a composite role
 // promising arrow-key navigation nothing here implements (rule 2). The <nav>
 // form is the older markup and still works.
-//
-// Wrapped in :is() so it stays one compound selector: interpolating a bare
-// comma-separated list breaks out of its context. That mistake shipped once
-// already, in $_bar.
 $_toolbar: ".toolbar";
 
 // The two axes. `.max` is an alias for docked; `.filled` is the older