@stackific/md3 0.1.0

package/src/styles/_config.scss

@@ -0,0 +1,142 @@
+// Shared Sass variables, maps, and mixins consumed across the framework.
+// Token values that vary by theme stay as CSS custom properties (see settings/_themes.scss).
+// Static structural tokens live here as Sass vars for compile-time loops.
+
+@use "sass:map";
+@use "sass:list";
+
+// ────────────────────────────── spacing scale ──────────────────────────────
+$spaces: (
+  "tiny": 0.25rem,
+  "small": 0.5rem,
+  "": 1rem,
+  "large": 1.5rem,
+);
+
+$space-blocks: (
+  "tiny": 0.5rem,
+  "": 1rem,
+  "small": 1rem,
+  "medium": 2rem,
+  "large": 3rem,
+  "extra": 4rem,
+);
+
+// ────────────────────────────── breakpoints ─────────────────────────────────
+$breakpoints: (
+  "s": 600px,
+  "m": 993px,
+  "l": 1240px,
+);
+
+// ─────────────────────────── material palette (legacy) ──────────────────────
+// Reused by helpers/_colors.scss. Each entry: name → (base, 1..10 shades).
+$material-palette: (
+  "red":           (#F44336, #FFEBEE, #FFCDD2, #EF9A9A, #E57373, #EF5350, #F44336, #E53935, #D32F2F, #C62828, #B71C1C),
+  "pink":          (#E91E63, #FCE4EC, #F8BBD0, #F48FB1, #F06292, #EC407A, #E91E63, #D81B60, #C2185B, #AD1457, #880E4F),
+  "purple":        (#9C27B0, #F3E5F5, #E1BEE7, #CE93D8, #BA68C8, #AB47BC, #9C27B0, #8E24AA, #7B1FA2, #6A1B9A, #4A148C),
+  "deep-purple":   (#673AB7, #EDE7F6, #D1C4E9, #B39DDB, #9575CD, #7E57C2, #673AB7, #5E35B1, #512DA8, #4527A0, #311B92),
+  "blue":          (#2196F3, #E3F2FD, #BBDEFB, #90CAF9, #64B5F6, #42A5F5, #2196F3, #1E88E5, #1976D2, #1565C0, #0D47A1),
+  "light-blue":    (#03A9F4, #E1F5FE, #B3E5FC, #81D4FA, #4FC3F7, #29B6F6, #03A9F4, #039BE5, #0288D1, #0277BD, #01579B),
+  "cyan":          (#00BCD4, #E0F7FA, #B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1, #0097A7, #00838F, #006064),
+  "green":         (#4CAF50, #E8F5E9, #C8E6C9, #A5D6A7, #81C784, #66BB6A, #4CAF50, #43A047, #388E3C, #2E7D32, #1B5E20),
+  "light-green":   (#8BC34A, #F1F8E9, #DCEDC8, #C5E1A5, #AED581, #9CCC65, #8BC34A, #7CB342, #689F38, #558B2F, #33691E),
+  "lime":          (#CDDC39, #F9FBE7, #F0F4C3, #E6EE9C, #DCE775, #D4E157, #CDDC39, #C0CA33, #AFB42B, #9E9D24, #827717),
+  "yellow":        (#FFEB3B, #FFFDE7, #FFF9C4, #FFF59D, #FFF176, #FFEE58, #FFEB3B, #FDD835, #FBC02D, #F9A825, #F57F17),
+  "amber":         (#FFC107, #FFF8E1, #FFECB3, #FFE082, #FFD54F, #FFCA28, #FFC107, #FFB300, #FFA000, #FF8F00, #FF6F00),
+  "orange":        (#FF9800, #FFF3E0, #FFE0B2, #FFCC80, #FFB74D, #FFA726, #FF9800, #FB8C00, #F57C00, #EF6C00, #E65100),
+  "deep-orange":   (#FF5722, #FBE9E7, #FFCCBC, #FFAB91, #FF8A65, #FF7043, #FF5722, #F4511E, #E64A19, #D84315, #BF360C),
+  "brown":         (#795548, #EFEBE9, #D7CCC8, #BCAAA4, #A1887F, #8D6E63, #795548, #6D4C41, #5D4037, #4E342E, #3E2723),
+  "blue-grey":     (#607D8B, #ECEFF1, #CFD8DC, #B0BEC5, #90A4AE, #78909C, #607D8B, #546E7A, #455A64, #37474F, #263238),
+  "stackific":           (#1447e6, #e8edfd, #c7d3fa, #98aff6, #698af2, #3a66ee, #1448eb, #113dc5, #0d2e96, #092067, #051138),
+  "hello-pumpkin":           (#ff8f00, #fff4e5, #ffe4c2, #ffce8f, #ffb75c, #ffa129, #ff8f00, #d67800, #a35c00, #703f00, #3d2200),
+  "sea-lettuce":           (#63a002, #f5ffe6, #e7fec3, #d3fe90, #c0fd5e, #acfc2b, #9cfc03, #83d403, #64a102, #456f01, #253c01),
+  "olive":           (#7c7c67, #f7f7ed, #ededd4, #ddddb0, #cece8d, #bfbf69, #b2b34d, #969640, #727231, #4f4f22, #2b2b12),
+  "nord":           (#5e81ac, #edf2f7, #d4dfed, #b0c5dd, #8daace, #6990bf, #4d7ab3, #406796, #314e72, #22364f, #121d2b),
+  "vega-violet":           (#ad46ff, #f4e5ff, #e4c2ff, #cd8fff, #b75cff, #a029ff, #8e00ff, #7700d6, #5b00a3, #3e0070, #22003d),
+  "wild-strawberry":           (#f6339a, #fee7f3, #fcc4e2, #fa94ca, #f863b2, #f63299, #f40b86, #cd0971, #9c0756, #6b053b, #3b0320),
+  "heliotrope-magenta":           (#e12afb, #fbe6ff, #f7c3fe, #ef91fd, #e85ffc, #e12dfb, #dc05fa, #b904d2, #8d03a0, #61026e, #35013c),
+  "voodoo-violet":           (#804792, #f5edf7, #e7d4ed, #d3b0dd, #be8dce, #aa69bf, #9a4db3, #814096, #633172, #44224f, #25122b),
+  "red-orchid":           (#c0001c, #ffe5e9, #ffc2cb, #ff8f9f, #ff5c74, #ff2948, #ff0025, #d6001f, #a30018, #700010, #3d0009),
+  "green-brown":           (#6e5d00, #fffbe5, #fff6c2, #ffee8f, #ffe65c, #ffde29, #ffd800, #d6b500, #a38a00, #705f00, #3d3400),
+  "shakshuka":           (#ab350f, #fdede8, #fad3c7, #f6af98, #f28a69, #ee663a, #ea4915, #c53d11, #962f0d, #672009, #381105),
+  "purple-honeycreeper":           (#8e51ff, #eee5ff, #d7c2ff, #b68fff, #955cff, #7429ff, #5900ff, #4b00d6, #3900a3, #270070, #15003d),
+  "maldives":           (#00b8db, #e5fbff, #c2f5ff, #8fedff, #5ce5ff, #29ddff, #00d6ff, #00b4d6, #0089a3, #005e70, #00333d),
+  "verditer":           (#00bba7, #e5fffc, #c2fff8, #8ffff3, #5cffee, #29ffe8, #00ffe4, #00d6bf, #00a392, #007064, #003d37),
+  "fennel":           (#00bc7d, #e5fff6, #c2ffea, #8fffd9, #5cffc8, #29ffb7, #00ffaa, #00d68e, #00a36d, #00704b, #003d29),
+  "gold":           (#efb100, #fff8e5, #ffefc2, #ffe28f, #ffd55c, #ffc729, #ffbd00, #d69f00, #a37900, #705300, #3d2d00),
+  "vitamin-c":           (#fd9a00, #fff5e5, #ffe7c2, #ffd38f, #ffbf5c, #ffab29, #ff9b00, #d68200, #a36300, #704400, #3d2500),
+  "burtuqali":           (#ff6900, #fff0e5, #ffdbc2, #ffbd8f, #ff9f5c, #ff8129, #ff6900, #d65800, #a34300, #702e00, #3d1900),
+);
+
+// ───────────────────────── M3 semantic color roles ──────────────────────────
+// Roles whose `.foo` utility paints both bg + on-foreground text.
+$theme-roles-paired: (
+  "primary",
+  "secondary",
+  "tertiary",
+  "error",
+  "background",
+);
+
+// Subset of paired roles that also get -text and -border utilities.
+// Upstream skips `.background-text` / `.background-border` — keep parity.
+$theme-roles-with-edges: (
+  "primary",
+  "secondary",
+  "tertiary",
+  "error",
+);
+
+// Container variants (paint container bg + on-container text).
+$theme-roles-container: (
+  "primary",
+  "secondary",
+  "tertiary",
+  "error",
+);
+
+// Roles whose nav/menu active-state recoloring is emitted. Upstream stops
+// at tertiary (error is excluded), so we mirror that to avoid extra rules.
+$theme-roles-nav-active: (
+  "primary",
+  "secondary",
+  "tertiary",
+);
+
+// Surface tonal stops (background only; on-surface inherited).
+$surface-stops: (
+  "surface-dim",
+  "surface-bright",
+  "surface-container-lowest",
+  "surface-container-low",
+  "surface-container",
+  "surface-container-high",
+  "surface-container-highest",
+);
+
+// ───────────────────────────── mixins ────────────────────────────────────────
+@mixin paired-color($role) {
+  background-color: var(--#{$role}) !important;
+  color: var(--on-#{$role}) !important;
+}
+
+@mixin text-color($role) {
+  color: var(--#{$role}) !important;
+}
+
+@mixin border-color($role) {
+  border-color: var(--#{$role}) !important;
+}
+
+@mixin breakpoint-up($name) {
+  @media (min-width: #{map.get($breakpoints, $name)}) {
+    @content;
+  }
+}
+
+@mixin breakpoint-down($name) {
+  @media (max-width: #{map.get($breakpoints, $name) - 1px}) {
+    @content;
+  }
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,80 @@
+// Reusable SCSS mixins extracted from the framework's helper rules. Vanilla's
+// own elements still get these effects via the global helper selectors
+// (waves, ripples, focus rings); this file exists for component libraries
+// (@stackific/md3-svelte, @stackific/md3-webcomp) that scope styles per
+// component and can't rely on document-wide selectors.
+
+// Material radial-gradient wave on hover / focus, retracting on press.
+// Apply inside a positioned host. Vanilla's equivalent is the giant
+// :is(.wave, .chip, .button, button, ...)::after rule in helpers/_waves.scss.
+@mixin wave-overlay() {
+  &::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;
+  }
+
+  &:is(:focus-visible, :hover)::after {
+    background-size: 22500%;
+    opacity: 0.1;
+    transition: background-size var(--speed2) linear;
+  }
+
+  &:active::after {
+    background-size: 0%;
+    opacity: 0;
+    transition: none;
+  }
+}
+
+// Hover/focus tint overlay used by [class*="ripple"] elements.
+@mixin ripple-hover-overlay() {
+  &:is(:hover, :focus-visible)::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: currentColor;
+    opacity: 0.1;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+}
+
+// JS-driven expanding-circle ripple container injected on mousedown.
+// Component shadow stylesheets only need this if they host the .ripple-js node.
+@mixin ripple-js-container() {
+  > .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, 600ms) linear;
+    }
+  }
+}
+
+// Standard focus ring used on interactive surfaces. Vanilla applies this via
+// :is(a, button, .button, .chip, summary):focus-visible — replicate inside
+// a component's own root selector.
+@mixin focus-ring() {
+  &:focus-visible {
+    outline: 0.125rem solid var(--primary);
+    outline-offset: 0.25rem;
+  }
+}

package/src/styles/elements/_badges.scss

@@ -0,0 +1,65 @@
+// .badge — corner indicator. Position via .top/.bottom/.left/.right modifiers.
+
+.badge {
+  --_x: 0;
+  --_y: -100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  font-size: 0.6875rem;
+  z-index: 2;
+  padding: 0 0.25rem;
+  min-block-size: 1rem;
+  min-inline-size: 1rem;
+  background-color: var(--error);
+  color: var(--on-error);
+  line-height: normal;
+  border-radius: 1rem;
+  inset: 50% auto auto 50%;
+  transform: translate(var(--_x, 50%), var(--_y, -50%));
+  font-family: var(--font);
+
+  &.top    { --_y: -100%; }
+  &.bottom { --_y: 0; }
+  &.left   { --_x: -100%; }
+  &.right  { --_x: 0; }
+
+  &.border {
+    border-color: var(--error);
+    color: var(--error);
+    background-color: var(--surface);
+  }
+
+  &:is(.circle, .square) {
+    text-align: center;
+    inline-size: auto;
+    block-size: auto;
+    padding: 0 0.25rem;
+    border-radius: 1rem;
+  }
+
+  &.square {
+    border-radius: 0;
+  }
+
+  &.min {
+    clip-path: circle(18.75% at 50% 50%);
+
+    > * {
+      display: none;
+    }
+  }
+
+  &.none {
+    inset: auto !important;
+    transform: none;
+    position: relative;
+    margin: 0 0.125rem;
+  }
+}
+
+nav:is(.left, .right, .top, .bottom) > a > .badge,
+nav:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class="active"]) > a > .badge {
+  inset: 1rem auto auto 50%;
+}

package/src/styles/elements/_bars.scss

@@ -0,0 +1,83 @@
+// <header> and <footer> top/bottom bars + .fixed sticky behavior.
+
+header,
+footer {
+  display: grid;
+  align-content: center;
+  border-radius: 0;
+  padding: 0 1rem;
+}
+
+:is(dialog, article) > :is(header, footer) {
+  padding-inline: 0;
+  inset: 0;
+}
+
+header { min-block-size: 4rem; }
+footer { min-block-size: 5rem; }
+
+:is(header, footer, menu > *).fixed {
+  position: sticky;
+  inset: 0;
+  z-index: 11;
+  background-color: inherit;
+}
+
+header.fixed {
+  inset: calc(-1 * var(--_padding, 0)) 0 0 0;
+  margin-block-start: calc(-1 * var(--_padding, 0));
+}
+
+footer.fixed {
+  inset: 0 0 calc(-1 * var(--_padding, 0)) 0;
+  margin-block-end: calc(-1 * var(--_padding, 0));
+}
+
+:is(header, footer).fixed.min {
+  margin-inline: auto;
+}
+
+dialog > :is(header, footer) {
+  background: none;
+}
+
+dialog > :is(header, footer).fixed {
+  background-color: inherit;
+}
+
+:is(main, header, footer, section).responsive {
+  max-inline-size: min(100vw, 75rem);
+  margin: 0 auto;
+
+  &.max {
+    max-inline-size: none;
+  }
+}
+
+:has(> main) > :is(header, footer).fixed {
+  transform: none;
+  box-sizing: content-box;
+  position: sticky;
+  inset: 0;
+  z-index: 12;
+}
+
+:has(> main) > header { padding-block-start: var(--top, 0); }
+:has(> main) > footer { padding-block-end: var(--bottom, 0); }
+
+nav.top ~ header,
+nav.bottom ~ footer {
+  padding-block: 0;
+}
+
+nav.top ~ header.fixed {
+  inset-block: calc(var(--top, 0) + 4.5rem) 0;
+}
+
+nav.bottom ~ footer.fixed {
+  inset-block: 0 calc(var(--bottom, 0) + 4.5rem);
+}
+
+:is(nav, .row) > header {
+  background-color: inherit;
+}

package/src/styles/elements/_buttons.scss

@@ -0,0 +1,119 @@
+// .button / <button> baseline + size/shape/state variants.
+
+@use "sass:map";
+
+.button,
+button {
+  --_padding: 1rem;
+  --_size: 2.5rem;
+  --_round: calc(var(--_size) / 2) !important;
+  box-sizing: content-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--_size);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--on-primary);
+  padding: 0 var(--_padding);
+  background-color: var(--primary);
+  border-radius: 1.25rem;
+  transition:
+    transform var(--speed3),
+    border-radius var(--speed2),
+    padding var(--speed3);
+  user-select: none;
+  gap: 0.5rem;
+  line-height: normal;
+}
+
+$-button-sizes: (
+  "small": (size: 2rem,   padding: 0.75rem),
+  "large": (size: 3rem,   padding: 1.25rem),
+);
+
+@each $name, $values in $-button-sizes {
+  :is(button, .button).#{$name} {
+    --_size: #{map.get($values, size)};
+    --_padding: #{map.get($values, padding)};
+  }
+}
+
+:is(.button, button):is(.extra, .extend) {
+  --_size: 3.5rem;
+  font-size: 1rem;
+  --_padding: 1.5rem;
+}
+
+:is(button, .button):is(.square, .circle) {
+  --_padding: 0;
+}
+
+:is(button, .button).border {
+  border-color: var(--outline-variant);
+  color: var(--primary);
+}
+
+.extend {
+  > span:not([class]) {
+    display: none;
+  }
+
+  &:is(:hover, .active) {
+    inline-size: auto;
+    --_padding: 1.5rem;
+    padding: 0 var(--_padding);
+
+    > i + span {
+      display: inherit;
+      margin-inline-start: var(--_padding);
+    }
+
+    > :is(img, svg) + span {
+      display: inherit;
+      margin-inline-start: calc(1rem + var(--_padding, 0));
+    }
+  }
+}
+
+:is(.button, button)[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.button[disabled] {
+  pointer-events: none;
+}
+
+:is(.button, button)[disabled]::before,
+:is(.button, button)[disabled]::after {
+  display: none;
+}
+
+:is(.button, button):not(.chip, .extend) {
+  &.fill {
+    background-color: var(--secondary-container) !important;
+    color: var(--on-secondary-container) !important;
+  }
+
+  &.active {
+    background-color: var(--primary-container);
+    color: var(--on-primary-container);
+  }
+
+  &.fill.active {
+    background-color: var(--secondary) !important;
+    color: var(--on-secondary) !important;
+  }
+
+  &.border.active {
+    background-color: var(--inverse-surface) !important;
+    color: var(--inverse-on-surface) !important;
+    border-color: var(--inverse-surface) !important;
+  }
+}
+
+:is(.button, button):not(.chip):active,
+:is(.button, button):not(.chip).active {
+  border-radius: 0.5rem !important;
+}

package/src/styles/elements/_cards.scss

@@ -0,0 +1,32 @@
+// <article> = card surface. Sizes loop over a small map.
+
+article {
+  --_padding: 1rem;
+  box-shadow: var(--elevate1);
+  background-color: var(--surface-container-low);
+  color: var(--on-surface);
+  padding: var(--_padding);
+  border-radius: 0.75rem;
+  display: block;
+  transition:
+    transform var(--speed3),
+    border-radius var(--speed3),
+    padding var(--speed3);
+
+  &.border {
+    box-shadow: none;
+    border: 0.0625rem solid var(--outline-variant);
+  }
+}
+
+$-card-sizes: (
+  "small": 12rem,
+  "medium": 20rem,
+  "large": 32rem,
+);
+
+@each $name, $value in $-card-sizes {
+  article.#{$name} {
+    block-size: $value;
+  }
+}

package/src/styles/elements/_chips.scss

@@ -0,0 +1,46 @@
+// .chip — pill-shaped action element with three size tiers.
+
+@use "sass:map";
+
+.chip {
+  --_padding: 0.75rem;
+  --_size: 2rem;
+  --_round: calc(var(--_size) / 2) !important;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--_size);
+  min-inline-size: var(--_size);
+  font-size: 0.875rem;
+  font-weight: 500;
+  background-color: transparent;
+  border: 0.0625rem solid var(--outline-variant);
+  color: var(--on-surface-variant);
+  padding: 0 var(--_padding);
+  border-radius: 0.5rem;
+  transition:
+    transform var(--speed3),
+    border-radius var(--speed3),
+    padding var(--speed3);
+  user-select: none;
+  gap: 0.5rem;
+  line-height: normal;
+  letter-spacing: normal;
+
+  &.fill {
+    border: none;
+  }
+}
+
+$-chip-sizes: (
+  "medium": (size: 2.5rem, padding: 1rem),
+  "large":  (size: 3rem,   padding: 1.25rem),
+);
+
+@each $name, $values in $-chip-sizes {
+  .chip.#{$name} {
+    --_size: #{map.get($values, size)};
+    --_padding: #{map.get($values, padding)};
+  }
+}