@stackific/md3 0.1.1 → 0.1.2

package/src/styles/md3.scss

@@ -1,61 +0,0 @@
-// Single entry point. Order: settings → reset → helpers → elements →
-// theme overlays → colors.
-//
-// Use @forward for any consumer that wants to re-export; @use is sufficient
-// for the bundle since side-effect rules are emitted once per file.
-
-@use "settings/globals";
-@use "settings/themes";
-@use "settings/fonts";
-
-@use "settings/reset";
-
-@use "helpers/alignments";
-@use "helpers/blurs";
-@use "helpers/directions";
-@use "helpers/elevates";
-@use "helpers/forms";
-@use "helpers/margins";
-@use "helpers/opacities";
-@use "helpers/paddings";
-@use "helpers/positions";
-@use "helpers/ripples";
-@use "helpers/scrolls";
-@use "helpers/shadows";
-@use "helpers/sizes";
-@use "helpers/spaces";
-@use "helpers/responsive";
-@use "helpers/typography";
-@use "helpers/waves";
-@use "helpers/zoom";
-
-@use "elements/badges";
-@use "elements/bars";
-@use "elements/buttons";
-@use "elements/cards";
-@use "elements/chips";
-@use "elements/dialogs";
-@use "elements/dividers";
-@use "elements/expansions";
-@use "elements/fields";
-@use "elements/grids";
-@use "elements/icons";
-@use "elements/layouts";
-@use "elements/lists";
-@use "elements/main-layouts";
-@use "elements/media";
-@use "elements/menus";
-@use "elements/navigations";
-@use "elements/overlays";
-@use "elements/pages";
-@use "elements/progress";
-@use "elements/shapes";
-@use "elements/selections";
-@use "elements/sliders";
-@use "elements/snackbars";
-@use "elements/tables";
-@use "elements/tabs";
-@use "elements/tooltips";
-
-@use "settings/theme";
-@use "helpers/colors";

package/src/styles/settings/_fonts.scss

@@ -1,41 +0,0 @@
-// Material Symbols font faces. Each declaration ships the local copy first
-// (bundlers resolve the relative URL and fingerprint the woff2 into their own
-// assets pipeline), then falls back to a public CDN.
-
-$-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

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

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

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