@stackific/md3 0.1.0

package/src/styles/elements/_selections.scss

@@ -0,0 +1,248 @@
+// .checkbox / .radio / .switch — all three share size-scaling and focus/hover ripples.
+
+.checkbox,
+.radio,
+.switch {
+  --_size: 1.5rem;
+  inline-size: auto;
+  block-size: auto;
+  line-height: normal;
+  white-space: nowrap;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
+
+.switch {
+  direction: ltr;
+}
+
+$-selection-sizes: (
+  "small": 1rem,
+  "large": 2rem,
+  "extra": 2.5rem,
+);
+
+@each $name, $value in $-selection-sizes {
+  :is(.checkbox, .radio, .switch).#{$name} {
+    --_size: #{$value};
+  }
+}
+
+:is(.checkbox, .radio) > input {
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  opacity: 0;
+}
+
+.switch > input {
+  inline-size: 3.25rem;
+  block-size: 2rem;
+  opacity: 0;
+}
+
+:is(.checkbox, .radio, .switch) > span {
+  display: inline-flex;
+  align-items: center;
+  color: var(--on-surface);
+  font-size: 0.875rem;
+}
+
+:is(.checkbox, .radio) > span:not(:empty) {
+  padding-inline-start: 0.25rem;
+}
+
+:is(.checkbox, .radio, .switch) > span::before,
+:is(.checkbox, .radio, .switch) > span > i,
+:is(.checkbox, .radio) > span::after {
+  --_size: inherit;
+  content: "";
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  box-sizing: border-box;
+  margin: 0 auto;
+  outline: none;
+  color: var(--primary);
+  position: absolute;
+  inset: auto auto auto calc(var(--_size, 0) * -1);
+  border-radius: 50%;
+  user-select: none;
+  z-index: 1;
+}
+
+[dir="rtl"] :is(.checkbox, .radio) > span::before,
+[dir="rtl"] :is(.checkbox, .radio) > span > i,
+[dir="rtl"] :is(.checkbox, .radio) > span::after {
+  --_size: inherit;
+  inset: auto calc(var(--_size, 0) * -1) auto auto;
+}
+
+.switch > span::before,
+.switch.icon > span > i {
+  position: absolute;
+  inset: 50% auto auto 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all var(--speed2);
+  font-size: calc(var(--_size, 0) - 0.5rem);
+  user-select: none;
+  min-inline-size: var(--_size);
+  min-block-size: var(--_size);
+  content: "";
+  color: var(--surface-variant);
+  background-color: var(--outline);
+}
+
+.switch > span::before,
+.switch.icon > span > i {
+  transform: translate(-3rem, -50%) scale(0.6);
+}
+
+.switch.icon > span > i {
+  transform: translate(-3rem, -50%) scale(1);
+}
+
+// icon glyphs per control
+.checkbox > span::before { content: "check_box_outline_blank"; }
+.checkbox > input:checked + span::before {
+  content: "check_box";
+  font-variation-settings: "FILL" 1;
+}
+.checkbox > input:indeterminate + span::before { content: "indeterminate_check_box"; }
+
+.radio > span::before { content: "radio_button_unchecked"; }
+.radio > input:checked + span::before { content: "radio_button_checked"; }
+
+:is(.radio, .checkbox, .switch).icon > span::before {
+  content: "" !important;
+  font-variation-settings: unset !important;
+}
+
+:is(.checkbox, .radio) > span::after {
+  transition: all var(--speed1);
+  background-color: currentColor;
+  box-shadow: 0 0 0 0 currentColor;
+  opacity: 0;
+}
+
+:is(.checkbox, .radio):is(:hover) > input:not(:disabled) + span::after,
+:is(.checkbox, .radio) > input:not(:disabled):is(:focus) + span::after {
+  box-shadow: 0 0 0 0.5rem currentColor;
+  opacity: 0.1;
+}
+
+.switch > input:not(:disabled):is(:focus, :hover) + span::before,
+.switch.icon > input:not(:disabled):is(:focus, :hover) + span > i {
+  box-shadow: 0 0 0 0.5rem var(--active);
+}
+
+:is(.checkbox, .radio) > input:checked + span::before,
+:is(.checkbox, .radio).icon > input:checked + span > i {
+  color: var(--primary);
+}
+
+.icon > input:checked + span > i:first-child,
+.icon > span > i:last-child {
+  opacity: 0;
+}
+
+.icon > input:checked + span > i:last-child,
+.icon > span > i:first-child {
+  opacity: 1;
+}
+
+.switch > input:checked + span::after {
+  border: none;
+  background-color: var(--primary);
+}
+
+.switch > input:checked + span::before,
+.switch.icon > input:checked + span > i {
+  content: "check";
+  color: var(--primary);
+  background-color: var(--on-primary);
+  transform: translate(-1.75rem, -50%) scale(1);
+}
+
+[dir="rtl"] .switch > input:checked + span::before,
+[dir="rtl"] .switch.icon > input:checked + span > i {
+  transform: translate(-1.75rem, -50%) scale(-1);
+}
+
+.switch > input:active:not(:disabled) + span::before,
+.switch.icon > input:active:not(:disabled) + span > i {
+  transform: translate(-3rem, -50%) scale(1.2);
+}
+
+[dir="rtl"] .switch > input:active:not(:disabled) + span::before,
+[dir="rtl"] .switch.icon > input:active:not(:disabled) + span > i {
+  transform: translate(-3rem, -50%) scale(-1.2);
+}
+
+.switch > input:active:checked:not(:disabled) + span::before,
+.switch.icon > input:active:checked:not(:disabled) + span > i {
+  transform: translate(-1.75rem, -50%) scale(1.2);
+}
+
+[dir="rtl"] .switch > input:active:checked:not(:disabled) + span::before,
+[dir="rtl"] .switch.icon > input:active:checked:not(:disabled) + span > i {
+  transform: translate(-1.75rem, -50%) scale(-1.2);
+}
+
+:is(.checkbox, .radio, .switch) > input:disabled + span {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.switch > span::after {
+  content: "";
+  position: absolute;
+  inset: 50% auto auto 0;
+  background-color: var(--active);
+  border: 0.125rem solid var(--outline);
+  box-sizing: border-box;
+  inline-size: 3.25rem;
+  block-size: 2rem;
+  border-radius: 2rem;
+  transform: translate(-3.25rem, -50%);
+}
+
+.field > :is(nav, .row) {
+  flex-grow: 1;
+  padding: 0 1rem;
+}
+
+.field.round > :is(nav, .row) {
+  flex-grow: 1;
+  padding: 0 1.5rem;
+}
+
+[dir="rtl"] .switch {
+  transform: scale(-1);
+}
+
+[dir="rtl"] .switch > span::before,
+[dir="rtl"] .switch.icon > span > i {
+  transform: translate(-3rem, -50%) scale(-0.6);
+}
+
+[dir="rtl"] .switch.icon > span > i {
+  transform: translate(-3rem, -50%) scale(-1);
+}
+
+[dir="rtl"] .switch > input:checked + span::before,
+[dir="rtl"] .switch.icon > input:checked + span > i {
+  transform: translate(-1.75rem, -50%) scale(-1);
+}
+
+.switch > :focus-visible + span::after {
+  outline: 0.125rem solid var(--primary);
+  outline-offset: 0.25rem;
+}
+
+:is(.checkbox, .radio) > :focus-visible + span::before {
+  outline: 0.125rem solid var(--primary);
+  outline-offset: 0.375rem;
+}

package/src/styles/elements/_shapes.scss

@@ -0,0 +1,151 @@
+// .shape — SVG-masked decorative shape. Each variant points at a public/shapes/*.svg.
+// One @each over $-shapes replaces ~40 hand-written mask-image rules in upstream.
+
+@use "sass:list";
+
+.shape {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--on-primary);
+  background-color: var(--primary);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  border-radius: 0;
+  block-size: 3.5rem;
+  inline-size: 3.5rem;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+}
+
+.transparent > .shape > i {
+  filter: invert(1);
+}
+
+$-shape-mask-sizes: (
+  "tiny-space":   90%,
+  "space":        80%,
+  "small-space":  80%,
+  "medium-space": 70%,
+  "large-space":  60%,
+  "extra-space":  50%,
+);
+
+@each $name, $value in $-shape-mask-sizes {
+  .shape.#{$name} { mask-size: $value; }
+}
+
+$-shape-sizes: (
+  "tiny":   2.5rem,
+  "medium": 4.5rem,
+  "large":  5.5rem,
+  "extra":  6.5rem,
+);
+
+@each $name, $value in $-shape-sizes {
+  .shape.#{$name} {
+    block-size: $value;
+    inline-size: $value;
+  }
+}
+
+.shape.max,
+.shape > .responsive,
+.shape > .responsive > .responsive {
+  position: absolute;
+  inset: 0;
+  block-size: 100%;
+  inline-size: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+}
+
+.shape > .responsive {
+  background: inherit;
+  color: inherit;
+}
+
+$-shape-rotations: (
+  "":      12s,
+  "fast":  6s,
+  "slow":  24s,
+);
+
+@each $name, $duration in $-shape-rotations {
+  @if $name == "" {
+    .shape.rotate {
+      animation: linear to-rotate infinite #{$duration};
+
+      > * {
+        animation: linear to-rotate infinite #{$duration} reverse;
+      }
+    }
+  } @else {
+    .shape.#{$name}-rotate {
+      animation: linear to-rotate infinite #{$duration};
+
+      > * {
+        animation: linear to-rotate infinite #{$duration} reverse;
+      }
+    }
+  }
+}
+
+:is(button, .button, .chip):has(> .shape) > .responsive {
+  border: none;
+}
+
+// All shape mask images. Note: `leaft-clover8` is a verbatim typo from upstream
+// (the file is `leaf-clover8.svg`) — preserved for 1:1 class-name parity.
+// Each entry is (class-name, file-stem). They diverge only for "leaft-clover8"
+// → leaf-clover8.svg (verbatim typo from upstream).
+$-shapes: (
+  ("arch", "arch"),
+  ("arrow", "arrow"),
+  ("boom", "boom"),
+  ("bun", "bun"),
+  ("burst", "burst"),
+  ("circle", "circle"),
+  ("clamshell", "clamshell"),
+  ("diamond", "diamond"),
+  ("fan", "fan"),
+  ("flower", "flower"),
+  ("gem", "gem"),
+  ("ghost-ish", "ghost-ish"),
+  ("heart", "heart"),
+  ("leaf-clover4", "leaf-clover4"),
+  ("leaft-clover8", "leaf-clover8"),
+  ("loading-indicator", "loading-indicator"),
+  ("oval", "oval"),
+  ("pentagon", "pentagon"),
+  ("pill", "pill"),
+  ("pixel-circle", "pixel-circle"),
+  ("pixel-triangle", "pixel-triangle"),
+  ("puffy", "puffy"),
+  ("puffy-diamond", "puffy-diamond"),
+  ("semicircle", "semicircle"),
+  ("sided-cookie4", "sided-cookie4"),
+  ("sided-cookie6", "sided-cookie6"),
+  ("sided-cookie7", "sided-cookie7"),
+  ("sided-cookie9", "sided-cookie9"),
+  ("sided-cookie12", "sided-cookie12"),
+  ("slanted", "slanted"),
+  ("soft-boom", "soft-boom"),
+  ("soft-burst", "soft-burst"),
+  ("square", "square"),
+  ("sunny", "sunny"),
+  ("triangle", "triangle"),
+  ("very-sunny", "very-sunny"),
+);
+
+@each $entry in $-shapes {
+  $class: list.nth($entry, 1);
+  $file:  list.nth($entry, 2);
+
+  .shape.#{$class} {
+    mask-image: url("/shapes/#{$file}.svg");
+  }
+}