@mastors/core 1.1.0

package/scss/utilities/_position.scss

@@ -0,0 +1,32 @@
+// utilities/_position.scss
+// Position utility classes.
+// ─────────────────────────────────────────────────────────────
+
+@use "../generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "position": (
+    property: position,
+    values: (
+      "static":   static,
+      "relative": relative,
+      "absolute": absolute,
+      "fixed":    fixed,
+      "sticky":   sticky,
+    ),
+    responsive: true,
+  ),
+));
+
+// Inset utilities
+$-inset-values: ("0": 0px, "auto": auto, "full": 100%, "1\\/2": 50%);
+
+@each $key, $val in $-inset-values {
+  .inset-#{$key}        { inset: $val; }
+  .inset-x-#{$key}      { left: $val; right: $val; }
+  .inset-y-#{$key}      { top: $val; bottom: $val; }
+  .top-#{$key}          { top: $val; }
+  .right-#{$key}        { right: $val; }
+  .bottom-#{$key}       { bottom: $val; }
+  .left-#{$key}         { left: $val; }
+}

package/scss/utilities/_shadows.scss

@@ -0,0 +1,11 @@
+// utilities/_shadows.scss
+// Box-shadow utility classes from shadow tokens.
+// ─────────────────────────────────────────────────────────────
+
+@use "../tokens/shadows" as sh;
+
+@each $key, $val in sh.$shadow-tokens {
+  .shadow-#{$key} { box-shadow: $val; }
+}
+// Shorthand
+.shadow { box-shadow: sh.shadow("md"); }

package/scss/utilities/_sizing.scss

@@ -0,0 +1,40 @@
+// utilities/_sizing.scss
+// Width and height utility classes from sizing tokens.
+// ─────────────────────────────────────────────────────────────
+
+@use "../tokens/sizing" as sz;
+
+// Width utilities
+@each $key, $val in sz.$sizing-tokens {
+  .w-#{$key} { width: $val; }
+}
+
+// Height utilities
+@each $key, $val in sz.$sizing-tokens {
+  .h-#{$key} { height: $val; }
+}
+
+// Min / max width
+.min-w-0    { min-width: 0; }
+.min-w-full { min-width: 100%; }
+.min-w-min  { min-width: min-content; }
+.min-w-max  { min-width: max-content; }
+.min-w-fit  { min-width: fit-content; }
+
+.max-w-none { max-width: none; }
+.max-w-full { max-width: 100%; }
+.max-w-min  { max-width: min-content; }
+.max-w-max  { max-width: max-content; }
+.max-w-fit  { max-width: fit-content; }
+.max-w-prose { max-width: 65ch; }
+
+// Min / max height
+.min-h-0      { min-height: 0; }
+.min-h-full   { min-height: 100%; }
+.min-h-screen { min-height: 100vh; }
+.min-h-svh    { min-height: 100svh; }
+.min-h-dvh    { min-height: 100dvh; }
+
+.max-h-none   { max-height: none; }
+.max-h-full   { max-height: 100%; }
+.max-h-screen { max-height: 100vh; }

package/scss/utilities/_spacing.scss

@@ -0,0 +1,42 @@
+// utilities/_spacing.scss
+// Margin and padding utility classes from spacing tokens.
+// ─────────────────────────────────────────────────────────────
+
+@use "sass:map";
+@use "../tokens/spacing"  as sp;
+@use "../generators/class-generator" as gen;
+
+// Margin utilities
+$-margin-values: map.merge(sp.$spacing-tokens, ("auto": auto));
+
+@each $key, $val in $-margin-values {
+  .m-#{$key}  { margin: $val; }
+  .mx-#{$key} { margin-left: $val; margin-right: $val; }
+  .my-#{$key} { margin-top: $val; margin-bottom: $val; }
+  .mt-#{$key} { margin-top: $val; }
+  .mr-#{$key} { margin-right: $val; }
+  .mb-#{$key} { margin-bottom: $val; }
+  .ml-#{$key} { margin-left: $val; }
+  .ms-#{$key} { margin-inline-start: $val; }
+  .me-#{$key} { margin-inline-end: $val; }
+}
+
+// Padding utilities
+@each $key, $val in sp.$spacing-tokens {
+  .p-#{$key}  { padding: $val; }
+  .px-#{$key} { padding-left: $val; padding-right: $val; }
+  .py-#{$key} { padding-top: $val; padding-bottom: $val; }
+  .pt-#{$key} { padding-top: $val; }
+  .pr-#{$key} { padding-right: $val; }
+  .pb-#{$key} { padding-bottom: $val; }
+  .pl-#{$key} { padding-left: $val; }
+  .ps-#{$key} { padding-inline-start: $val; }
+  .pe-#{$key} { padding-inline-end: $val; }
+}
+
+// Gap utilities
+@each $key, $val in sp.$spacing-tokens {
+  .gap-#{$key}   { gap: $val; }
+  .gap-x-#{$key} { column-gap: $val; }
+  .gap-y-#{$key} { row-gap: $val; }
+}

package/scss/utilities/_transform.scss

@@ -0,0 +1,43 @@
+// utilities/_transform.scss
+// Transform utility classes.
+// ─────────────────────────────────────────────────────────────
+
+@use "sass:list";
+
+// Transform utilities
+
+// GPU compositing layer
+.transform-gpu    { transform: translateZ(0); }
+.transform-none   { transform: none; }
+
+// Translate
+$-translate-values: ("0": 0px, "1": 0.25rem, "2": 0.5rem, "4": 1rem, "8": 2rem,
+                     "full": 100%, "1\\/2": 50%, "-full": -100%, "-1\\/2": -50%);
+
+@each $key, $val in $-translate-values {
+  .translate-x-#{$key} { transform: translateX($val); }
+  .translate-y-#{$key} { transform: translateY($val); }
+}
+
+// Rotate
+@each $deg in 0, 1, 2, 3, 6, 12, 45, 90, 180 {
+  .rotate-#{$deg}  { transform: rotate(#{$deg}deg); }
+  .-rotate-#{$deg} { transform: rotate(-#{$deg}deg); }
+}
+
+// Scale
+$-scale-values: ("0": 0, "50": .5, "75": .75, "90": .9, "95": .95,
+                 "100": 1, "105": 1.05, "110": 1.1, "125": 1.25, "150": 1.5);
+
+@each $key, $val in $-scale-values {
+  .scale-#{$key}   { transform: scale($val); }
+  .scale-x-#{$key} { transform: scaleX($val); }
+  .scale-y-#{$key} { transform: scaleY($val); }
+}
+
+// Transform origin
+.origin-center  { transform-origin: center; }
+.origin-top     { transform-origin: top; }
+.origin-right   { transform-origin: right; }
+.origin-bottom  { transform-origin: bottom; }
+.origin-left    { transform-origin: left; }

package/scss/utilities/_typography.scss

@@ -0,0 +1,163 @@
+// utilities/_typography.scss
+// Typography utility classes — text-align, size, weight, leading, tracking,
+// decoration, transform, whitespace, overflow, font-family, font-style.
+// ─────────────────────────────────────────────────────────────
+
+@use "sass:map";
+@use "../tokens/typography" as ty;
+@use "../generators/class-generator" as gen;
+
+// ── Text align ───────────────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "text-align": (
+    property: text-align,
+    prefix: "text",
+    values: (
+      "left":    left,
+      "center":  center,
+      "right":   right,
+      "justify": justify,
+      "start":   start,
+      "end":     end,
+    ),
+    responsive: true,
+  ),
+));
+
+// ── Font size ────────────────────────────────────────────────────────────────
+
+@each $key, $val in ty.$font-size-tokens {
+  .text-#{$key} { font-size: $val; }
+}
+
+// ── Font weight ──────────────────────────────────────────────────────────────
+
+@each $key, $val in ty.$font-weight-tokens {
+  .font-#{$key} { font-weight: $val; }
+}
+
+// ── Font family ──────────────────────────────────────────────────────────────
+
+@each $key, $val in ty.$font-family-tokens {
+  .font-#{$key} { font-family: $val; }
+}
+
+// ── Font style ───────────────────────────────────────────────────────────────
+
+.italic     { font-style: italic; }
+.not-italic { font-style: normal; }
+
+// ── Line height (leading) ────────────────────────────────────────────────────
+
+@each $key, $val in ty.$line-height-tokens {
+  .leading-#{$key} { line-height: $val; }
+}
+
+// ── Letter spacing (tracking) ────────────────────────────────────────────────
+
+@each $key, $val in ty.$letter-spacing-tokens {
+  .tracking-#{$key} { letter-spacing: $val; }
+}
+
+// ── Text decoration ──────────────────────────────────────────────────────────
+
+.underline      { text-decoration-line: underline; }
+.overline       { text-decoration-line: overline; }
+.line-through   { text-decoration-line: line-through; }
+.no-underline   { text-decoration-line: none; }
+
+// Decoration style
+.decoration-solid  { text-decoration-style: solid; }
+.decoration-dashed { text-decoration-style: dashed; }
+.decoration-dotted { text-decoration-style: dotted; }
+.decoration-double { text-decoration-style: double; }
+.decoration-wavy   { text-decoration-style: wavy; }
+
+// Decoration thickness
+.decoration-auto  { text-decoration-thickness: auto; }
+.decoration-1     { text-decoration-thickness: 1px; }
+.decoration-2     { text-decoration-thickness: 2px; }
+.decoration-4     { text-decoration-thickness: 4px; }
+.decoration-8     { text-decoration-thickness: 8px; }
+
+// ── Text transform ───────────────────────────────────────────────────────────
+
+.uppercase    { text-transform: uppercase; }
+.lowercase    { text-transform: lowercase; }
+.capitalize   { text-transform: capitalize; }
+.normal-case  { text-transform: none; }
+
+// ── Text overflow ────────────────────────────────────────────────────────────
+
+.text-ellipsis { text-overflow: ellipsis; }
+.text-clip     { text-overflow: clip; }
+
+// ── Whitespace ───────────────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "whitespace": (
+    property: white-space,
+    prefix: "whitespace",
+    values: (
+      "normal":   normal,
+      "nowrap":   nowrap,
+      "pre":      pre,
+      "pre-line": pre-line,
+      "pre-wrap": pre-wrap,
+      "break-spaces": break-spaces,
+    ),
+  ),
+));
+
+// ── Word break ───────────────────────────────────────────────────────────────
+
+.break-normal { overflow-wrap: normal;     word-break: normal; }
+.break-words  { overflow-wrap: break-word; }
+.break-all    { word-break: break-all; }
+.break-keep   { word-break: keep-all; }
+
+// ── Text indent ──────────────────────────────────────────────────────────────
+
+.indent-0  { text-indent: 0; }
+.indent-4  { text-indent: 1rem; }
+.indent-8  { text-indent: 2rem; }
+
+// ── Vertical align ───────────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "align": (
+    property: vertical-align,
+    prefix: "align",
+    values: (
+      "baseline":    baseline,
+      "top":         top,
+      "middle":      middle,
+      "bottom":      bottom,
+      "text-top":    text-top,
+      "text-bottom": text-bottom,
+      "sub":         sub,
+      "super":       super,
+    ),
+  ),
+));
+
+// ── List style ───────────────────────────────────────────────────────────────
+
+.list-none     { list-style-type: none; }
+.list-disc     { list-style-type: disc; }
+.list-decimal  { list-style-type: decimal; }
+.list-inside   { list-style-position: inside; }
+.list-outside  { list-style-position: outside; }
+
+// ── Smooth font rendering ────────────────────────────────────────────────────
+
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}

package/scss/utilities/_z-index.scss

@@ -0,0 +1,9 @@
+// utilities/_z-index.scss
+// Z-index utility classes from z-index tokens.
+// ─────────────────────────────────────────────────────────────
+
+@use "../tokens/z-index" as zi;
+
+@each $key, $val in zi.$z-index-tokens {
+  .z-#{$key} { z-index: $val; }
+}

package/scss/variables/_breakpoints.scss

@@ -0,0 +1,14 @@
+// variables/_breakpoints.scss
+// Named breakpoint map used by the responsive engine.
+// ─────────────────────────────────────────────────────────────
+
+@use "sass:map";
+
+$breakpoints: (
+  "xs":  0px,
+  "sm":  640px,
+  "md":  768px,
+  "lg":  1024px,
+  "xl":  1280px,
+  "2xl": 1536px,
+) !default;

package/scss/variables/_container.scss

@@ -0,0 +1,13 @@
+// variables/_container.scss
+// Container width constraints per breakpoint.
+// ─────────────────────────────────────────────────────────────
+
+$container-max-widths: (
+  "sm":  640px,
+  "md":  768px,
+  "lg":  1024px,
+  "xl":  1280px,
+  "2xl": 1400px,
+) !default;
+
+$container-padding-x: 1rem !default;

package/scss/variables/_global.scss

@@ -0,0 +1,8 @@
+// variables/_global.scss
+// Top-level global SCSS variables (prefix, base font size, etc.)
+// ─────────────────────────────────────────────────────────────
+
+$mastors-prefix: "" !default; // e.g. "m-" → .m-flex
+$base-font-size: 16px !default;
+$base-line-height: 1.5 !default;
+$base-font-family: system-ui, -apple-system, sans-serif !default;

package/scss/variables/_grid.scss

@@ -0,0 +1,7 @@
+// variables/_grid.scss
+// Grid system configuration variables.
+// ─────────────────────────────────────────────────────────────
+
+$grid-columns: 12 !default;
+$grid-gutter: 1.5rem !default;
+$grid-row-gap: 1.5rem !default;

package/scss/variables/_index.scss

@@ -0,0 +1,7 @@
+// variables/_index.scss
+// ─────────────────────────────────────────────────────────────
+
+@forward "breakpoints";
+@forward "grid";
+@forward "container";
+@forward "global";

package/scss/vendors/_index.scss

@@ -0,0 +1,15 @@
+// vendors/_index.scss
+// Third-party CSS/SCSS integrations and overrides.
+// ─────────────────────────────────────────────────────────────
+
+// INTENTIONAL STUB — reserved for third-party CSS overrides.
+// It is deliberately empty at v1.0.
+// How to add a vendor override:
+//   1. Create a partial: vendors/_<vendor-name>-overrides.scss
+//   2. Forward it here: @forward "<vendor-name>-overrides";
+//   3. Keep overrides scoped and minimal — prefer custom properties over
+//      re-declarations wherever the vendor library supports them.
+// Example future entries:
+//   @forward "normalize-overrides";
+//   @forward "floating-ui-overrides";
+