@stackific/md3 0.1.0

package/src/styles/settings/_fonts.scss

@@ -0,0 +1,42 @@
+// Material Symbols font faces. Each declaration tries the local copy first
+// (resolves against Vite's publicDir for the consuming project), then falls
+// back to a public CDN so the same SCSS works whether it runs inside this
+// repo's demo or inside any consumer's project.
+
+$-cdn: "https://cdn.jsdelivr.net/npm/beercss@4.0.21/dist/cdn";
+
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/material-symbols-outlined.woff2") format("woff2"),
+       url("#{$-cdn}/material-symbols-outlined.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Material Symbols Rounded";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/material-symbols-rounded.woff2") format("woff2"),
+       url("#{$-cdn}/material-symbols-rounded.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Material Symbols Sharp";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/material-symbols-sharp.woff2") format("woff2"),
+       url("#{$-cdn}/material-symbols-sharp.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Material Symbols Subset";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/material-symbols-subset.woff2") format("woff2"),
+       url("#{$-cdn}/material-symbols-subset.woff2") format("woff2");
+}

package/src/styles/settings/_globals.scss

@@ -0,0 +1,104 @@
+// Root custom-properties, base typography, scrollbar, keyframes.
+
+:root {
+  --size: 1rem;
+  --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Noto Sans", Arial, sans-serif;
+  --font-icon: "Material Symbols Outlined";
+  --speed1: 0.1s;
+  --speed2: 0.2s;
+  --speed3: 0.3s;
+  --speed4: 0.4s;
+  --active: rgb(128 128 128 / 0.192);
+  --overlay: rgb(0 0 0 / 0.5);
+  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
+  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
+  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
+  --top: env(safe-area-inset-top);
+  --bottom: env(safe-area-inset-bottom);
+  --left: env(safe-area-inset-left);
+  --right: env(safe-area-inset-right);
+  --image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWJiYGAQBgAAAP//ZyYa+wAAAAZJREFUAwAAIgAWeX9MsQAAAABJRU5ErkJggg==);
+}
+
+:root[data-mode="dark"] {
+  --image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWL6//+/FAAAAP//qSv5QwAAAAZJREFUAwAJIAMaJWjIvQAAAABJRU5ErkJggg==);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-mode="auto"] {
+    --image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWL6//+/FAAAAP//qSv5QwAAAAZJREFUAwAJIAMaJWjIvQAAAABJRU5ErkJggg==);
+  }
+}
+
+html {
+  font-size: var(--size);
+}
+
+body {
+  color: var(--on-surface);
+  background-color: var(--surface);
+  overflow-x: hidden;
+  font-family: var(--font);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  letter-spacing: 0.0313rem;
+}
+
+@media (pointer: fine) {
+  body ::-webkit-scrollbar,
+  body ::-webkit-scrollbar-thumb,
+  body ::-webkit-scrollbar-button {
+    background: none;
+    inline-size: 0.4rem;
+    block-size: 0.4rem;
+  }
+
+  body :is(:focus, :hover)::-webkit-scrollbar-thumb,
+  body :has(:focus, :hover)::-webkit-scrollbar-thumb {
+    background: var(--outline);
+    border-radius: 1rem;
+  }
+}
+
+@media (pointer: coarse) {
+  body:has(dialog[open], dialog.active),
+  body:has(input[type="range"]:focus) {
+    overflow: hidden;
+  }
+}
+
+@keyframes to-page {
+  from {
+    opacity: 0;
+    transform: var(--_transform);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes to-linear-progress {
+  0% { margin: 0 0 0 -100%; }
+  50% { margin: 0 0 0 0; }
+  100% { margin: 0 0 0 100%; }
+}
+
+@keyframes to-indeterminate-progress {
+  0% { padding: 0 100% 0 0; }
+  50% { padding: 0 0 0 0; }
+  100% { padding: 0 0 0 100%; }
+}
+
+@keyframes to-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes to-ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}

package/src/styles/settings/_reset.scss

@@ -0,0 +1,82 @@
+// Tag-level resets and shared focus / cursor behavior.
+
+* {
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  vertical-align: middle;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  border-radius: inherit;
+  box-sizing: border-box;
+}
+
+*::after,
+*::before {
+  all: unset;
+}
+
+label {
+  font-size: 0.75rem;
+  vertical-align: baseline;
+}
+
+a,
+b,
+i,
+span,
+strong,
+em,
+code {
+  vertical-align: baseline;
+}
+
+a,
+button,
+.button {
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  font-family: inherit;
+  outline: inherit;
+  justify-content: center;
+}
+
+:is(nav, .tabs, .field) > a,
+button,
+.button,
+.chip,
+i,
+label {
+  user-select: none;
+}
+
+:not(.grid, nav, .row) > :not(progress.max) + :is(
+  address, article, blockquote, code, .field, fieldset, form, .grid,
+  h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul
+):not([class*="margin"], .right, .left, .top, .bottom) {
+  margin-block-start: 1rem;
+}
+
+:has(> [class*="margin"]) {
+  padding: 0.1px;
+}
+
+:is(a, button, .button, .chip, summary):focus-visible {
+  outline: 0.125rem solid var(--primary);
+  outline-offset: 0.25rem;
+}
+
+:is(nav, .row, li).group > :focus-visible {
+  z-index: 1;
+}
+
+:is(button, .button, .chip) > :is(span, i, img, svg) {
+  pointer-events: none;
+}
+
+:is(div:not([class]), div[class="active"]):has(> :not(.responsive) ~ :is(menu, .tooltip, input)) {
+  display: inline-flex;
+}

package/src/styles/settings/_theme.scss

@@ -0,0 +1,126 @@
+// Semantic colour utilities driven by M3 roles. Looped so the
+// six paired roles, four container variants, and seven surface tonal
+// stops share one definition each.
+
+@use "sass:list";
+@use "../config" as *;
+
+.transparent {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  color: inherit !important;
+}
+
+// .primary, .secondary, .tertiary, .error, .background → bg + on-bg text
+@each $role in $theme-roles-paired {
+  .#{$role} { @include paired-color($role); }
+}
+
+// -text and -border emitted only for primary/secondary/tertiary/error
+// (upstream omits .background-text / .background-border).
+@each $role in $theme-roles-with-edges {
+  .#{$role}-text { @include text-color($role); }
+  .#{$role}-border { @include border-color($role); }
+}
+
+// .primary-container, .secondary-container, .tertiary-container, .error-container
+@each $role in $theme-roles-container {
+  .#{$role}-container {
+    background-color: var(--#{$role}-container) !important;
+    color: var(--on-#{$role}-container) !important;
+  }
+}
+
+// Surface umbrella — every tonal stop falls back to surface/on-surface text.
+$-surface-umbrella: ".surface";
+@each $stop in $surface-stops {
+  $-surface-umbrella: "#{$-surface-umbrella}, .#{$stop}" !global;
+}
+
+#{$-surface-umbrella} {
+  background-color: var(--surface) !important;
+  color: var(--on-surface) !important;
+}
+
+.surface-variant {
+  background-color: var(--surface-variant) !important;
+  color: var(--on-surface-variant) !important;
+}
+
+.inverse-surface {
+  background-color: var(--inverse-surface);
+  color: var(--inverse-on-surface);
+}
+
+.inverse-primary {
+  background-color: var(--inverse-primary);
+  color: var(--primary);
+}
+
+.inverse-primary-text {
+  color: var(--inverse-primary) !important;
+}
+
+.inverse-primary-border {
+  border-color: var(--inverse-primary) !important;
+}
+
+// Tonal stops re-bind background (text stays on-surface from the umbrella above).
+@each $stop in $surface-stops {
+  .#{$stop} {
+    background-color: var(--#{$stop}) !important;
+  }
+}
+
+.black {
+  background-color: #000 !important;
+}
+
+.black-border {
+  border-color: #000 !important;
+}
+
+.black-text {
+  color: #000 !important;
+}
+
+.white {
+  background-color: #fff !important;
+}
+
+.white-border {
+  border-color: #fff !important;
+}
+
+.white-text {
+  color: #fff !important;
+}
+
+.transparent-border {
+  border-color: transparent !important;
+}
+
+.transparent-text {
+  color: transparent !important;
+}
+
+.fill:not(i) {
+  background-color: var(--surface-variant) !important;
+  color: var(--on-surface-variant) !important;
+}
+
+// nav/menu active-state recoloring per container/base role.
+// Upstream emits these only for primary/secondary/tertiary (no error).
+@each $role in $theme-roles-nav-active {
+  nav.#{$role}-container > button,
+  :is(nav, menu).#{$role} > :is(button, a, li).active {
+    background-color: var(--#{$role}-container) !important;
+    color: var(--on-#{$role}-container) !important;
+  }
+
+  nav.#{$role} > button,
+  :is(nav, menu).#{$role}-container > :is(button, a, li).active {
+    background-color: var(--#{$role}) !important;
+    color: var(--on-#{$role}) !important;
+  }
+}