@stackific/md3 0.1.1 → 0.1.2

package/src/styles/helpers/_colors.scss

@@ -1,39 +0,0 @@
-// Material Design 2 palette utilities, generated from the $material-palette map.
-// Each palette entry yields:
-//   .name             → bg = shade-6 (the base), color !important
-//   .name6            → same as .name (alias for the base shade)
-//   .name-text        → text color
-//   .name-border      → border color
-//   .name1 ... .name10 → bg only, per tonal shade
-//
-// One Sass loop generates the full palette.
-
-@use "sass:list";
-@use "sass:map";
-@use "../config" as *;
-
-@each $name, $shades in $material-palette {
-  $base: list.nth($shades, 1);
-
-  .#{$name},
-  .#{$name}6 {
-    background-color: $base !important;
-  }
-
-  .#{$name}-border {
-    border-color: $base !important;
-  }
-
-  .#{$name}-text {
-    color: $base !important;
-  }
-
-  // Shades 1-10 from positions 2-11 in the shade list (skipping the duplicate base).
-  @for $i from 1 through 10 {
-    @if $i != 6 {
-      .#{$name}#{$i} {
-        background-color: list.nth($shades, $i + 1) !important;
-      }
-    }
-  }
-}

package/src/styles/helpers/_directions.scss

@@ -1,30 +0,0 @@
-// Horizontal / vertical flow helpers.
-
-.horizontal {
-  display: inline-flex;
-  flex-direction: row !important;
-  gap: 1rem;
-  inline-size: auto !important;
-  max-inline-size: none !important;
-
-  > * {
-    margin-block: 0 !important;
-  }
-}
-
-.vertical {
-  display: flex;
-  flex-direction: column !important;
-
-  > * {
-    margin-inline: 0 !important;
-  }
-}
-
-:is(a, button, .button, .chip).vertical {
-  display: inline-flex;
-  gap: 0.25rem;
-  block-size: auto !important;
-  max-block-size: none !important;
-  padding-block: 0.5rem;
-}

package/src/styles/helpers/_elevates.scss

@@ -1,20 +0,0 @@
-// Box-shadow elevation tiers driven by global --elevateN tokens.
-
-.no-elevate {
-  box-shadow: none !important;
-}
-
-$-elevations: (
-  "small": var(--elevate1),
-  "": var(--elevate1),
-  "medium": var(--elevate2),
-  "large": var(--elevate3),
-);
-
-@each $name, $value in $-elevations {
-  @if $name == "" {
-    .elevate { box-shadow: $value !important; }
-  } @else {
-    .#{$name}-elevate { box-shadow: $value !important; }
-  }
-}

package/src/styles/helpers/_forms.scss

@@ -1,76 +0,0 @@
-// Border-radius variants + .border / .circle / .square shape helpers.
-
-@use "sass:list";
-
-.round,
-[class*="-round"] {
-  --_round: 2rem;
-  border-radius: var(--_round) !important;
-}
-
-$-round-sizes: (
-  "small": 0.5rem,
-  "large": 3.5rem,
-);
-
-@each $name, $value in $-round-sizes {
-  .#{$name}-round {
-    --_round: #{$value};
-  }
-}
-
-.no-round,
-.square,
-.top-round,
-.bottom-round,
-.left-round,
-.right-round {
-  border-radius: 0.5rem !important;
-}
-
-$-sides: (
-  "top": (start-start, start-end),
-  "bottom": (end-end, end-start),
-  "left": (start-start, end-start),
-  "right": (start-end, end-end),
-);
-
-@each $side, $corners in $-sides {
-  .#{$side}-round {
-    border-#{list.nth($corners, 1)}-radius: var(--_round) !important;
-    border-#{list.nth($corners, 2)}-radius: var(--_round) !important;
-  }
-}
-
-.circle {
-  border-radius: 50%;
-}
-
-.circle:is(button, .button, .chip) {
-  border-radius: var(--_size);
-}
-
-:is(.circle, .square):is(button, .button, .chip) {
-  padding: 0;
-  block-size: var(--_size);
-  inline-size: var(--_size);
-}
-
-:is(.circle, .square) > span:not([class]) {
-  display: none;
-}
-
-:is(.circle, .square).round {
-  border-radius: 1rem !important;
-}
-
-.border:not(table, .field, .list, menu, article) {
-  box-sizing: border-box;
-  border: 0.0625rem solid var(--outline);
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.no-border {
-  border-color: transparent !important;
-}

package/src/styles/helpers/_margins.scss

@@ -1,39 +0,0 @@
-// Margin scale + directional variants.
-// .margin / .tiny-margin / .small-margin / .large-margin / .no-margin / .auto-margin
-// and .left-/.right-/.top-/.bottom-/.horizontal-/.vertical-margin
-
-@use "sass:list";
-@use "../config" as *;
-
-.margin,
-[class*="-margin"]:not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
-  margin: var(--_margin) !important;
-}
-
-.margin,
-[class*="-margin"] {
-  --_margin: 1rem;
-}
-
-.no-margin { --_margin: 0; }
-.auto-margin { --_margin: auto; }
-.tiny-margin { --_margin: 0.25rem; }
-.small-margin { --_margin: 0.5rem; }
-.large-margin { --_margin: 1.5rem; }
-
-$-margin-sides: (
-  ("left", "horizontal"):  margin-inline-start,
-  ("right", "horizontal"): margin-inline-end,
-  ("top", "vertical"):     margin-block-start,
-  ("bottom", "vertical"):  margin-block-end,
-);
-
-@each $names, $prop in $-margin-sides {
-  $a: list.nth($names, 1);
-  $b: list.nth($names, 2);
-
-  .#{$a}-margin,
-  .#{$b}-margin {
-    #{$prop}: var(--_margin) !important;
-  }
-}

package/src/styles/helpers/_opacities.scss

@@ -1,18 +0,0 @@
-// Opacity utilities.
-
-$-opacities: (
-  "no": 0,
-  "small": 0.25,
-  "medium": 0.5,
-  "large": 0.75,
-);
-
-@each $name, $value in $-opacities {
-  .#{$name}-opacity {
-    opacity: $value !important;
-  }
-}
-
-.opacity {
-  opacity: 1 !important;
-}

package/src/styles/helpers/_paddings.scss

@@ -1,35 +0,0 @@
-// Padding scale + directional variants. Mirrors _margins.scss.
-
-@use "sass:list";
-
-.padding,
-[class*="-padding"]:not(.left-padding, .right-padding, .top-padding, .bottom-padding, .horizontal-padding, .vertical-padding) {
-  padding: var(--_padding) !important;
-}
-
-.padding,
-[class*="-padding"] {
-  --_padding: 1rem;
-}
-
-.no-padding { --_padding: 0 !important; }
-.tiny-padding { --_padding: 0.25rem !important; }
-.small-padding { --_padding: 0.5rem !important; }
-.large-padding { --_padding: 1.5rem !important; }
-
-$-padding-sides: (
-  ("left", "horizontal"):  padding-inline-start,
-  ("right", "horizontal"): padding-inline-end,
-  ("top", "vertical"):     padding-block-start,
-  ("bottom", "vertical"):  padding-block-end,
-);
-
-@each $names, $prop in $-padding-sides {
-  $a: list.nth($names, 1);
-  $b: list.nth($names, 2);
-
-  .#{$a}-padding,
-  .#{$b}-padding {
-    #{$prop}: var(--_padding) !important;
-  }
-}

package/src/styles/helpers/_positions.scss

@@ -1,44 +0,0 @@
-// z-index, edge-pin, and center helpers (logical-property based).
-
-.front {
-  z-index: 10 !important;
-}
-
-.back {
-  z-index: -10 !important;
-}
-
-$-edges: (
-  "left": inset-inline-start,
-  "right": inset-inline-end,
-  "top": inset-block-start,
-  "bottom": inset-block-end,
-);
-
-@each $name, $prop in $-edges {
-  .#{$name} {
-    #{$prop}: 0;
-  }
-}
-
-.center {
-  inset-inline-start: 50%;
-  transform: translateX(-50%);
-}
-
-[dir="rtl"] .center {
-  transform: translateX(50%);
-}
-
-.middle {
-  inset-block-start: 50%;
-  transform: translateY(-50%);
-}
-
-.middle.center {
-  transform: translate(-50%, -50%);
-}
-
-[dir="rtl"] .middle.center {
-  transform: translate(50%, -50%);
-}

package/src/styles/helpers/_responsive.scss

@@ -1,24 +0,0 @@
-// Per-breakpoint show/hide and -webkit-fill-available shim.
-
-.responsive {
-  inline-size: -webkit-fill-available;
-  inline-size: -moz-available;
-}
-
-@media only screen and (max-width: 600px) {
-  :is(.m, .l):not(.s) {
-    display: none !important;
-  }
-}
-
-@media only screen and (min-width: 601px) and (max-width: 992px) {
-  :is(.s, .l):not(.m) {
-    display: none !important;
-  }
-}
-
-@media only screen and (min-width: 993px) {
-  :is(.m, .s):not(.l) {
-    display: none !important;
-  }
-}

package/src/styles/helpers/_ripples.scss

@@ -1,40 +0,0 @@
-// Pointer-driven ripple overlay + JS-driven expanding circle.
-
-[class*="ripple"]:is(:hover, :focus-visible)::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: currentColor;
-  opacity: 0.1;
-  border-radius: inherit;
-}
-
-$-ripple-speeds: (
-  "": 600ms,
-  "fast": 200ms,
-  "slow": 1800ms,
-);
-
-@each $name, $value in $-ripple-speeds {
-  @if $name == "" {
-    .ripple { --_duration: #{$value}; }
-  } @else {
-    .#{$name}-ripple { --_duration: #{$value}; }
-  }
-}
-
-.ripple-js {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  overflow: hidden;
-
-  > div {
-    position: absolute;
-    border-radius: 50%;
-    background: currentColor;
-    opacity: 0.3;
-    transform: scale(0);
-    animation: to-ripple var(--_duration) linear;
-  }
-}

package/src/styles/helpers/_scrolls.scss

@@ -1,7 +0,0 @@
-.scroll {
-  overflow: auto;
-}
-
-.no-scroll {
-  overflow: hidden;
-}

package/src/styles/helpers/_shadows.scss

@@ -1,22 +0,0 @@
-// Inset / directional gradient shadows.
-
-.shadow {
-  background-color: #00000050;
-}
-
-:is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
-  background-color: transparent !important;
-}
-
-$-shadow-directions: (
-  "left": to right,
-  "right": to left,
-  "bottom": to top,
-  "top": to bottom,
-);
-
-@each $name, $direction in $-shadow-directions {
-  .#{$name}-shadow {
-    background-image: linear-gradient(#{$direction}, black, transparent) !important;
-  }
-}

package/src/styles/helpers/_sizes.scss

@@ -1,34 +0,0 @@
-// Width / height scale + wrap behavior.
-
-[class*="-width"] {
-  max-inline-size: 100%;
-}
-
-.auto-width { inline-size: auto; }
-.auto-height { block-size: auto; }
-
-$-size-scale: (
-  "small": 12rem,
-  "medium": 24rem,
-  "large": 36rem,
-);
-
-@each $name, $value in $-size-scale {
-  .#{$name}-width {
-    inline-size: $value !important;
-  }
-
-  .#{$name}-height {
-    block-size: $value !important;
-  }
-}
-
-.wrap {
-  display: block;
-  white-space: normal;
-}
-
-.no-wrap:not(menu) {
-  display: flex;
-  white-space: nowrap;
-}

package/src/styles/helpers/_spaces.scss

@@ -1,22 +0,0 @@
-// Vertical spacer blocks. Excludes a tight list of tags where height would clobber layout.
-
-$-not: ":not(nav, .row, .grid, table, .tooltip, .list, menu, .shape)";
-
-$-spaces: (
-  "tiny": 0.5rem,
-  "small": 1rem,
-  "medium": 2rem,
-  "large": 3rem,
-  "extra": 4rem,
-);
-
-@each $name, $value in $-spaces {
-  .#{$name}-space#{$-not} {
-    block-size: $value;
-  }
-}
-
-// .space defaults to small (1rem)
-:is(.space, .small-space)#{$-not} {
-  block-size: 1rem;
-}

package/src/styles/helpers/_typography.scss

@@ -1,132 +0,0 @@
-// Headings (h1-h6), sizing modifiers, text-transform, line-height, code/pre/blockquote.
-
-@use "sass:list";
-@use "sass:map";
-
-$-headings: (h1, h2, h3, h4, h5, h6);
-$-class-headings: (".h1", ".h2", ".h3", ".h4", ".h5", ".h6");
-
-#{list.join($-headings, $-class-headings, $separator: comma)} {
-  font-weight: 400;
-  display: block;
-  align-items: center;
-  line-height: normal;
-}
-
-// Default sizes per heading level (h1 → 3.5625rem … h6 → 1.5rem).
-$-heading-sizes: (
-  "default": (3.5625rem, 2.8125rem, 2.25rem, 2rem, 1.75rem, 1.5rem),
-  "small":   (3.0625rem, 2.3125rem, 1.75rem, 1.5rem, 1.25rem, 1rem),
-  "large":   (4.0625rem, 3.3125rem, 2.75rem, 2.5rem, 2.25rem, 2rem),
-);
-
-@for $i from 1 through 6 {
-  $tag: list.nth($-headings, $i);
-  $cls: list.nth($-class-headings, $i);
-
-  #{$tag},
-  #{$cls} {
-    font-size: list.nth(map.get($-heading-sizes, "default"), $i);
-  }
-
-  :is(#{$tag}, #{$cls}).small {
-    font-size: list.nth(map.get($-heading-sizes, "small"), $i);
-  }
-
-  :is(#{$tag}, #{$cls}).large {
-    font-size: list.nth(map.get($-heading-sizes, "large"), $i);
-  }
-}
-
-.link {
-  color: var(--primary) !important;
-}
-
-.inverse-link {
-  color: var(--inverse-primary) !important;
-}
-
-.truncate {
-  overflow: hidden;
-  white-space: nowrap !important;
-  text-overflow: ellipsis;
-  flex: inherit;
-
-  > * {
-    white-space: nowrap !important;
-  }
-}
-
-$-text-sizes: (
-  "small": 0.75rem,
-  "medium": 0.875rem,
-  "large": 1rem,
-);
-
-@each $name, $value in $-text-sizes {
-  .#{$name}-text { font-size: $value; }
-}
-
-.upper { text-transform: uppercase; }
-.lower { text-transform: lowercase; }
-.capitalize { text-transform: capitalize; }
-.bold { font-weight: bold; }
-.overline { text-decoration: line-through; }
-.underline { text-decoration: underline; }
-.italic { font-style: italic; }
-
-p { margin: 0.5rem 0; }
-
-.no-line { line-height: normal; }
-
-$-line-heights: (
-  "tiny": 1.25rem,
-  "small": 1.5rem,
-  "medium": 1.75rem,
-  "large": 2rem,
-  "extra": 2.25rem,
-);
-
-@each $name, $value in $-line-heights {
-  .#{$name}-line { line-height: $value; }
-}
-
-pre {
-  border-radius: 0;
-  background-color: var(--surface-container);
-  white-space: pre-wrap;
-  padding: 1rem;
-  border-inline-start: 0.25rem solid var(--primary);
-  font-family: inherit;
-}
-
-blockquote {
-  border-radius: 0;
-  padding: 1rem;
-  border-inline-start: 0.25rem solid var(--primary);
-  font-family: inherit;
-}
-
-code {
-  border-radius: 0;
-  background-color: var(--surface-container);
-  white-space: pre-wrap;
-  padding: 0.25rem;
-}
-
-pre > code,
-blockquote > code {
-  padding: 0;
-}
-
-.scroll > code {
-  white-space: pre;
-}
-
-pre:has(> code) {
-  direction: ltr;
-  text-align: start;
-}
-
-sub { vertical-align: sub; }
-sup { vertical-align: super; }

package/src/styles/helpers/_waves.scss

@@ -1,52 +0,0 @@
-// Material radial-gradient wave overlay used on buttons / chips / nav items.
-// The selector lists are large by necessity (one shape, three states).
-
-$-wave-base: ":is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a):not([class*='ripple'])";
-$-nav-max-direct: "nav:is(.left, .right, .bottom, .top).max > a";
-$-nav-max-nested: "nav:is(.left, .right, .bottom, .top).max > :is(ol > li, ul > li, div:not([class]), div[class='active']) > a";
-$-nav-min-direct: "nav:is(.left, .right, .bottom, .top):not(.max) > a";
-$-nav-min-nested: "nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class='active']) a";
-
-#{$-wave-base}::after,
-#{$-nav-max-direct}::after,
-#{$-nav-max-nested}::after,
-#{$-nav-min-direct} > i::after,
-#{$-nav-min-nested} > i::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  border-radius: inherit;
-  inline-size: 100%;
-  block-size: 100%;
-  background-position: center;
-  background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
-  opacity: 0;
-  transition: none;
-  pointer-events: none;
-}
-
-#{$-wave-base}:is(:focus-visible, :hover)::after,
-#{$-nav-max-direct}:not(.button, .chip):is(:focus-visible, :hover)::after,
-#{$-nav-max-nested}:not(.button, .chip):is(:focus-visible, :hover)::after,
-#{$-nav-min-direct}:not(.button, .chip):is(:focus-visible, :hover) > i::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class="active"]) > a:not(.button, .chip):is(:focus-visible, :hover) > i::after {
-  background-size: 22500%;
-  opacity: 0.1;
-  transition: background-size var(--speed2) linear;
-}
-
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a, nav.max > a):not([class*="ripple"]):active::after,
-#{$-nav-max-direct}:active::after,
-#{$-nav-max-nested}:active::after,
-#{$-nav-min-direct}:active > i::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class="active"]) > a:active > i::after {
-  background-size: 0%;
-  opacity: 0;
-  transition: none;
-}
-
-.no-wave::after,
-.no-wave:is(:hover, :active)::after {
-  display: none;
-}

package/src/styles/helpers/_zoom.scss

@@ -1,18 +0,0 @@
-// CSS `zoom` scaling. Reuses spacing scale naming.
-
-$-zoom-scale: (
-  "": 2,
-  "tiny": 2,
-  "small": 3,
-  "medium": 4,
-  "large": 5,
-  "extra": 6,
-);
-
-@each $name, $value in $-zoom-scale {
-  @if $name == "" {
-    .zoom { zoom: $value; }
-  } @else {
-    .#{$name}-zoom { zoom: $value; }
-  }
-}