@stackific/md3 0.1.1 → 0.1.2

package/src/styles/_config.scss

@@ -1,142 +0,0 @@
-// 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

@@ -1,80 +0,0 @@
-// 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

@@ -1,65 +0,0 @@
-// .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

@@ -1,83 +0,0 @@
-// <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

@@ -1,119 +0,0 @@
-// .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

@@ -1,32 +0,0 @@
-// <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

@@ -1,46 +0,0 @@
-// .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)};
-  }
-}