@expressivecss/expressive 0.12.0 → 0.14.1

package/src/sass/components/_message.scss

@@ -0,0 +1,202 @@
+@use "../abstracts" as *;
+
+// Message. One message in a conversation: an optional avatar, header and
+// footer around a single surface. The surface is every other child, normally
+// one .message-bubble; wrap several elements in a <div> to keep them on one
+// surface. `.end` moves the row to the sender's side.
+//
+// The parts are divs, not <header>/<footer>: outside sectioning content those
+// elements become banner and contentinfo landmarks, one per message.
+//
+// The grid puts the avatar in the surface row, so it lines up with the bottom
+// of the bubble and a footer below never pushes it down.
+//
+// Tokens:
+//   --md-comp-message-avatar-size              32px
+//   --md-comp-message-gap                      8px (avatar to surface)
+//   --md-comp-message-surface-max-width        80%
+//   --md-comp-message-bubble-shape             20px
+//   --md-comp-message-bubble-grouped-shape     4px (joined corners in a group)
+//   --md-comp-message-bubble-container-color   surface-container-high / end: primary-container
+//   --md-comp-message-bubble-color             on-surface / end: on-primary-container
+//   --md-comp-message-group-gap                2px
+
+.message {
+  --md-comp-message-avatar-size: 32px;
+  --md-comp-message-gap: 8px;
+  --md-comp-message-surface-max-width: 80%;
+  --md-comp-message-bubble-shape: 20px;
+  --md-comp-message-bubble-grouped-shape: 4px;
+  --md-comp-message-bubble-container-color: var(--md-sys-color-surface-container-high);
+  --md-comp-message-bubble-color: var(--md-sys-color-on-surface);
+
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas:
+    ". header"
+    "avatar surface"
+    ". footer";
+  align-items: end;
+  justify-items: start;
+  color: var(--md-sys-color-on-surface);
+
+  > .message-avatar {
+    grid-area: avatar;
+    margin-inline-end: var(--md-comp-message-gap);
+  }
+
+  > .message-header {
+    grid-area: header;
+  }
+
+  > .message-footer {
+    grid-area: footer;
+  }
+
+  > :not(.message-avatar, .message-header, .message-footer) {
+    grid-area: surface;
+    min-width: 0;
+    max-width: var(--md-comp-message-surface-max-width);
+  }
+
+  &.end {
+    --md-comp-message-bubble-container-color: var(--md-sys-color-primary-container);
+    --md-comp-message-bubble-color: var(--md-sys-color-on-primary-container);
+
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "header ."
+      "surface avatar"
+      "footer .";
+    justify-items: end;
+
+    > .message-avatar {
+      margin-inline: var(--md-comp-message-gap) 0;
+    }
+  }
+}
+
+// An <img>, or a box holding initials, an icon or an <img>. An empty one is a
+// spacer that keeps earlier messages in a group in line with the last.
+.message-avatar {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--md-comp-message-avatar-size);
+  height: var(--md-comp-message-avatar-size);
+  border-radius: 50%;
+  overflow: hidden;
+  object-fit: cover;
+  @include typescale("label-medium");
+
+  &:not(img):not(:empty) {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  > #{$icon} {
+    font-size: 20px;
+  }
+}
+
+.message-header,
+.message-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding-inline: 12px;
+  color: var(--md-sys-color-on-surface-variant);
+  @include typescale("label-medium");
+}
+
+.message-header {
+  margin-block-end: 4px;
+}
+
+.message-footer {
+  margin-block-start: 4px;
+
+  // Icon buttons carry their own inset; drop the text inset so the first
+  // icon sits under the bubble edge rather than past it.
+  &:has(> .icon-button:first-child) {
+    padding-inline: 0;
+  }
+}
+
+.message-bubble {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 10px 16px;
+  border-radius: var(--md-comp-message-bubble-shape);
+  background-color: var(--md-comp-message-bubble-container-color);
+  color: var(--md-comp-message-bubble-color);
+  overflow-wrap: anywhere;
+  @include typescale("body-large");
+
+  > * {
+    margin-block: 0;
+  }
+
+  > * + * {
+    margin-block-start: 8px;
+  }
+
+  // Attachments and rich content: no fill, an outline-variant border.
+  &.outlined {
+    --md-comp-message-bubble-container-color: transparent;
+    --md-comp-message-bubble-color: var(--md-sys-color-on-surface);
+
+    border: 1px solid var(--md-sys-color-outline-variant);
+  }
+
+  // A bubble holding only an image or video frames it with a thin inset.
+  &:has(> :is(img, video, picture):only-child) {
+    padding: 4px;
+  }
+
+  > :is(img, video),
+  > picture > img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    border-radius: calc(var(--md-comp-message-bubble-shape) - 4px);
+  }
+}
+
+// Consecutive messages from one sender. The bubbles join on the sender's
+// side: inner corners shrink to the grouped shape.
+.message-group {
+  --md-comp-message-group-gap: 2px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--md-comp-message-group-gap);
+
+  > .message:not(.end) {
+    &:not(:first-child) .message-bubble {
+      border-start-start-radius: var(--md-comp-message-bubble-grouped-shape);
+    }
+
+    &:not(:last-child) .message-bubble {
+      border-end-start-radius: var(--md-comp-message-bubble-grouped-shape);
+    }
+  }
+
+  > .message.end {
+    &:not(:first-child) .message-bubble {
+      border-start-end-radius: var(--md-comp-message-bubble-grouped-shape);
+    }
+
+    &:not(:last-child) .message-bubble {
+      border-end-end-radius: var(--md-comp-message-bubble-grouped-shape);
+    }
+  }
+}

package/src/sass/components/_mixed-chart.scss

@@ -0,0 +1,157 @@
+@use "../abstracts" as *;
+
+// Mixed chart. The same <figure>, <figcaption> and <table> as a line
+// chart; MixedChart draws each series by its header cell's class: `column`
+// as columns from zero, `area` as a line over a fading fill, and anything
+// else as a line. `dashed` dashes a line. A series with `end` is drawn
+// against a second scale, set by data-end-min and data-end-max on the
+// figure. The plot, tooltip, labels and legend come from chart().
+//
+// Columns are full-height spans clipped to their value, as in the column
+// chart, behind an SVG of the lines and areas, as in the line chart.
+// Points on the cursor mark each line; the cursor bands the whole row.
+//
+// Tokens:
+//   --md-comp-mixed-chart-height         240px (sparkline 48px)
+//   --md-comp-mixed-chart-column-width   50% of each row's width
+//   --md-comp-mixed-chart-shape          4px, the column's end radius
+//   --md-comp-mixed-chart-line-width     3px (sparkline 2px)
+//   --md-comp-mixed-chart-grid-color     outline-variant
+//   --md-comp-mixed-chart-color-1..4     primary, tertiary, secondary,
+//                                        on-surface-variant
+
+@include chart("mixed-chart");
+
+.mixed-chart {
+  --md-comp-mixed-chart-column-width: 50%;
+  --md-comp-mixed-chart-shape: 4px;
+  --md-comp-mixed-chart-line-width: 3px;
+
+  &.sparkline {
+    --md-comp-mixed-chart-line-width: 2px;
+  }
+}
+
+.mixed-chart-plot {
+  isolation: isolate;
+}
+
+.mixed-chart-marks,
+.mixed-chart-marks > * {
+  position: absolute;
+  inset: 0;
+}
+
+.mixed-chart-marks > svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.mixed-chart-columns {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+
+  // A row: its columns side by side.
+  > div {
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    gap: 2px;
+    justify-self: center;
+    width: var(--md-comp-mixed-chart-column-width);
+  }
+
+  > div > span {
+    --mixed-chart-ends: var(--md-comp-mixed-chart-shape) var(--md-comp-mixed-chart-shape) 0 0;
+
+    background-color: var(--mixed-chart-color);
+    clip-path: inset(var(--top, 100%) 0 var(--bottom, 0%) round var(--mixed-chart-ends));
+
+    // A column below zero has its tip at the bottom.
+    &.negative {
+      --mixed-chart-ends: 0 0 var(--md-comp-mixed-chart-shape) var(--md-comp-mixed-chart-shape);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    > div > span {
+      transition: clip-path 400ms cubic-bezier(0.2, 0, 0, 1);
+
+      @starting-style {
+        clip-path: inset(var(--zero, 100%) 0 calc(100% - var(--zero, 100%)) round var(--mixed-chart-ends));
+      }
+    }
+  }
+}
+
+.mixed-chart-line {
+  fill: none;
+  stroke: var(--mixed-chart-color);
+  stroke-width: var(--md-comp-mixed-chart-line-width);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.mixed-chart-series.dashed .mixed-chart-line {
+  stroke-dasharray: 2 8;
+}
+
+.mixed-chart-series:not(.area) .mixed-chart-area {
+  display: none;
+}
+
+.mixed-chart-series stop {
+  stop-color: var(--mixed-chart-color);
+  stop-opacity: 0;
+
+  &:first-child {
+    stop-opacity: 0.24;
+  }
+}
+
+// A band behind the highlighted row, with a point over each line. The
+// cursor makes no stacking context, so the band can go behind the marks
+// and the points in front of them.
+.mixed-chart-cursor {
+  width: calc(100% / var(--rows, 1));
+  margin-left: calc(-50% / var(--rows, 1));
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: var(--md-comp-mixed-chart-shape);
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+  }
+
+  > span {
+    position: absolute;
+    left: 50%;
+    z-index: 1;
+    width: 10px;
+    height: 10px;
+    border: 2px solid var(--md-sys-color-surface);
+    border-radius: 50%;
+    background-color: var(--mixed-chart-color);
+    translate: -50% -50%;
+  }
+
+  > .column {
+    display: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .mixed-chart-columns > div > span,
+  .mixed-chart-cursor > span {
+    forced-color-adjust: none;
+  }
+
+  .mixed-chart-cursor::before {
+    outline: 1px solid CanvasText;
+  }
+}

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

@@ -47,6 +47,7 @@
   padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
   background-color: var(--md-comp-nav-bar-container-color);
   color: var(--md-sys-color-on-surface);
+  @include glass(var(--md-comp-nav-bar-container-color));
 
   > :is(a, button) {
     position: relative;

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

@@ -57,6 +57,7 @@
   transition: width var(--md-comp-nav-rail-duration) ease,
     min-width var(--md-comp-nav-rail-duration) ease,
     padding var(--md-comp-nav-rail-duration) ease;
+  @include glass(var(--md-sys-color-surface-container));
 
   // Menu toggle.
   > button:not(.button, .icon-button):first-child {
@@ -282,6 +283,11 @@
     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;
@@ -298,6 +304,9 @@
       z-index: 998;
       @include z-depth("1");
 
+      background-color: var(--md-sys-color-surface-container);
+      backdrop-filter: none;
+
       &::before {
         content: "";
         position: fixed;

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/_pie-chart.scss

@@ -0,0 +1,203 @@
+@use "../abstracts" as *;
+
+// Pie chart. The same <figure>, <figcaption> and <table> as a line chart;
+// PieChart draws the first value column as slices of the whole, clockwise
+// from the top, with a legend of every row, its cell and its share. The
+// plot, tooltip and legend swatches come from chart(); the plot is a square
+// as wide as --md-comp-pie-chart-height.
+//
+// The slices are SVG in a -50 to 50 box with a radius of 46, under a mask
+// whose lines cut the gaps and whose circle, scaled here, cuts the donut's
+// hole. The value labels and the tooltip sit on a slice's middle from the
+// --turn PieChart sets, a fraction of a turn clockwise from the top.
+//
+// Modifiers: .donut cuts a hole and shows a <tfoot> total in it, .values
+// writes each slice's share on it, .sparkline is a small pie with no
+// legend or tooltip.
+//
+// Tokens:
+//   --md-comp-pie-chart-height       240px, the pie's diameter (sparkline 48px)
+//   --md-comp-pie-chart-hole         0.6, the donut hole's share of the diameter
+//   --md-comp-pie-chart-gap          1.5, the gap between slices in hundredths
+//                                    of the plot's width
+//   --md-comp-pie-chart-color-1..6   primary, tertiary, secondary,
+//                                    on-surface-variant, primary-container,
+//                                    tertiary-container
+//   --md-comp-pie-chart-on-color-1..6  on-primary, on-tertiary, on-secondary,
+//                                      surface, on-primary-container,
+//                                      on-tertiary-container; .values text
+
+@include chart("pie-chart");
+
+.pie-chart {
+  --md-comp-pie-chart-hole: 0.6;
+  --md-comp-pie-chart-gap: 1.5;
+  --md-comp-pie-chart-color-5: var(--md-sys-color-primary-container);
+  --md-comp-pie-chart-color-6: var(--md-sys-color-tertiary-container);
+  --md-comp-pie-chart-on-color-1: var(--md-sys-color-on-primary);
+  --md-comp-pie-chart-on-color-2: var(--md-sys-color-on-tertiary);
+  --md-comp-pie-chart-on-color-3: var(--md-sys-color-on-secondary);
+  --md-comp-pie-chart-on-color-4: var(--md-sys-color-surface);
+  --md-comp-pie-chart-on-color-5: var(--md-sys-color-on-primary-container);
+  --md-comp-pie-chart-on-color-6: var(--md-sys-color-on-tertiary-container);
+  // Where labels and the tooltip sit, as a share of the radius.
+  --pie-chart-label-at: 0.62;
+
+  gap: 16px;
+
+  &.donut {
+    // The middle of the ring.
+    --pie-chart-label-at: calc((1 + var(--md-comp-pie-chart-hole)) / 2);
+  }
+}
+
+@for $i from 1 through 6 {
+  .pie-chart [data-series="#{$i}"] {
+    --pie-chart-color: var(--md-comp-pie-chart-color-#{$i});
+    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-#{$i});
+  }
+}
+
+.pie-chart-plot {
+  width: min(100%, var(--md-comp-pie-chart-height));
+  height: auto;
+  aspect-ratio: 1;
+  margin-inline: auto;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+}
+
+.pie-chart-pie {
+  position: absolute;
+  inset: 0;
+
+  > svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// The origin of an SVG transform is the box's middle, (0, 0).
+.pie-chart-hole {
+  transform: scale(0);
+}
+
+.pie-chart.donut .pie-chart-hole {
+  transform: scale(var(--md-comp-pie-chart-hole));
+}
+
+.pie-chart-gaps {
+  stroke-width: var(--md-comp-pie-chart-gap);
+}
+
+.pie-chart-slice {
+  fill: var(--pie-chart-color);
+
+  // GROWN in pieChart.ts.
+  &.active {
+    transform: scale(1.06);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 400ms cubic-bezier(0.2, 0, 0, 1);
+
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+}
+
+.pie-chart-values > span,
+.pie-chart-tooltip {
+  --pie-chart-angle: calc(var(--turn, 0) * 1turn);
+
+  position: absolute;
+  left: calc(50% + sin(var(--pie-chart-angle)) * var(--pie-chart-label-at) * 46%);
+  top: calc(50% - cos(var(--pie-chart-angle)) * var(--pie-chart-label-at) * 46%);
+}
+
+.pie-chart-values > span {
+  translate: -50% -50%;
+  color: var(--pie-chart-on-color);
+  @include typescale("label-medium");
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.pie-chart-tooltip {
+  translate: 12px -50%;
+
+  &.end {
+    translate: calc(-100% - 12px) -50%;
+  }
+}
+
+.pie-chart-total {
+  position: absolute;
+  inset: 0;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  > * {
+    max-width: calc(80% * var(--md-comp-pie-chart-hole));
+    overflow-wrap: anywhere;
+  }
+
+  > strong {
+    color: var(--md-sys-color-on-surface);
+    @include typescale("headline-small");
+  }
+
+  > span {
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-small");
+  }
+}
+
+.pie-chart.donut .pie-chart-total {
+  display: flex;
+}
+
+// One row per slice: swatch, name, cell and share in aligned columns.
+.pie-chart-legend {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 8px;
+
+  > li {
+    display: contents;
+  }
+
+  > li > span:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  > li > span:not(:first-child) {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  > li > span:nth-child(2) {
+    color: var(--md-sys-color-on-surface);
+    font-weight: 500;
+  }
+}
+
+.pie-chart.sparkline .pie-chart-plot {
+  margin-inline: 0;
+}
+
+@media (forced-colors: active) {
+  .pie-chart-pie {
+    forced-color-adjust: none;
+  }
+}