@mastors/core 1.1.0

package/scss/utilities/_animation.scss

@@ -0,0 +1,125 @@
+// utilities/_animation.scss
+// Transition and animation utility classes.
+// ─────────────────────────────────────────────────────────────
+
+@use "../tokens/transitions" as tr;
+@use "../generators/class-generator" as gen;
+
+// ── Transition property ───────────────────────────────────────────────────────
+
+.transition-none     { transition-property: none; }
+.transition-all      { transition-property: all; }
+.transition          { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; }
+.transition-colors   { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
+.transition-opacity  { transition-property: opacity; }
+.transition-shadow   { transition-property: box-shadow; }
+.transition-transform { transition-property: transform; }
+
+// ── Transition duration ───────────────────────────────────────────────────────
+
+@each $key, $val in tr.$duration-tokens {
+  .duration-#{$key} { transition-duration: $val; }
+}
+
+// ── Transition timing function ────────────────────────────────────────────────
+
+@each $key, $val in tr.$easing-tokens {
+  .ease-#{$key} { transition-timing-function: $val; }
+}
+
+// ── Transition delay ──────────────────────────────────────────────────────────
+
+@each $key, $val in tr.$duration-tokens {
+  .delay-#{$key} { transition-delay: $val; }
+}
+
+// ── Animation ────────────────────────────────────────────────────────────────
+
+.animate-none    { animation: none; }
+.animate-spin    { animation: mastors-spin    1s linear infinite; }
+.animate-ping    { animation: mastors-ping    1s cubic-bezier(0, 0, 0.2, 1) infinite; }
+.animate-pulse   { animation: mastors-pulse   2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+.animate-bounce  { animation: mastors-bounce  1s infinite; }
+.animate-fade-in { animation: mastors-fade-in 0.3s ease-out both; }
+.animate-fade-out{ animation: mastors-fade-out 0.3s ease-in both; }
+.animate-slide-up   { animation: mastors-slide-up   0.3s ease-out both; }
+.animate-slide-down { animation: mastors-slide-down 0.3s ease-out both; }
+.animate-scale-in   { animation: mastors-scale-in   0.2s ease-out both; }
+
+// ── Keyframe definitions ─────────────────────────────────────────────────────
+
+@keyframes mastors-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes mastors-ping {
+  75%, 100% { transform: scale(2); opacity: 0%; }
+}
+
+@keyframes mastors-pulse {
+  0%, 100% { opacity: 100%; }
+  50%       { opacity: 50%; }
+}
+
+@keyframes mastors-bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50%       { transform: translateY(0);   animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}
+
+@keyframes mastors-fade-in {
+  from { opacity: 0%; }
+  to   { opacity: 100%; }
+}
+
+@keyframes mastors-fade-out {
+  from { opacity: 100%; }
+  to   { opacity: 0%; }
+}
+
+@keyframes mastors-slide-up {
+  from { opacity: 0%; transform: translateY(0.5rem); }
+  to   { opacity: 100%; transform: translateY(0); }
+}
+
+@keyframes mastors-slide-down {
+  from { opacity: 0%; transform: translateY(-0.5rem); }
+  to   { opacity: 100%; transform: translateY(0); }
+}
+
+@keyframes mastors-scale-in {
+  from { opacity: 0%; transform: scale(0.95); }
+  to   { opacity: 100%; transform: scale(1); }
+}
+
+// ── Animation control utilities ───────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "animation-fill-mode": (
+    property: animation-fill-mode,
+    prefix: "fill",
+    values: (
+      "none":      none,
+      "forwards":  forwards,
+      "backwards": backwards,
+      "both":      both,
+    ),
+  ),
+  "animation-play-state": (
+    property: animation-play-state,
+    prefix: "animation",
+    values: (
+      "running": running,
+      "paused":  paused,
+    ),
+  ),
+  "animation-iteration": (
+    property: animation-iteration-count,
+    prefix: "animate-repeat",
+    values: (
+      "0":        0,
+      "1":        1,
+      "infinite": infinite,
+    ),
+  ),
+));

package/scss/utilities/_borders.scss

@@ -0,0 +1,55 @@
+// utilities/_borders.scss
+// Border width, style, and radius utility classes.
+// ─────────────────────────────────────────────────────────────
+
+@use "sass:list";
+@use "../tokens/color"  as ct;
+@use "../tokens/radii"  as ra;
+
+// Border width
+.border       { border-width: 1px; border-style: solid; }
+.border-0     { border-width: 0; }
+.border-2     { border-width: 2px; border-style: solid; }
+.border-4     { border-width: 4px; border-style: solid; }
+.border-8     { border-width: 8px; border-style: solid; }
+
+.border-t     { border-top-width: 1px; border-top-style: solid; }
+.border-r     { border-right-width: 1px; border-right-style: solid; }
+.border-b     { border-bottom-width: 1px; border-bottom-style: solid; }
+.border-l     { border-left-width: 1px; border-left-style: solid; }
+
+// Border style
+.border-solid  { border-style: solid; }
+.border-dashed { border-style: dashed; }
+.border-dotted { border-style: dotted; }
+.border-none   { border-style: none; }
+
+// Border color (semantic + key primitive steps)
+.border-transparent { border-color: transparent; }
+.border-current     { border-color: currentColor; }
+.border-default     { border-color: var(--mastors-border); }
+.border-strong      { border-color: var(--mastors-border-strong); }
+
+// Border radius — all scale steps from token map
+@each $key, $val in ra.$radius-tokens {
+  .rounded-#{$key} { border-radius: $val; }
+}
+// Shorthand: .rounded = base radius
+.rounded { border-radius: ra.radius("base"); }
+
+// Directional border radius
+$-radius-sides: (
+  "t": ("border-top-left-radius",    "border-top-right-radius"),
+  "b": ("border-bottom-left-radius", "border-bottom-right-radius"),
+  "l": ("border-top-left-radius",    "border-bottom-left-radius"),
+  "r": ("border-top-right-radius",   "border-bottom-right-radius"),
+);
+
+@each $side, $props in $-radius-sides {
+  @each $key, $val in ra.$radius-tokens {
+    .rounded-#{$side}-#{$key} {
+      #{list.nth($props, 1)}: $val;
+      #{list.nth($props, 2)}: $val;
+    }
+  }
+}

package/scss/utilities/_colors.scss

@@ -0,0 +1,42 @@
+// utilities/_colors.scss
+// Color utility classes (text, background, border color).
+// ─────────────────────────────────────────────────────────────
+
+@use "../tokens/color" as ct;
+
+// Text color utilities — semantic
+.text-default  { color: var(--mastors-text); }
+.text-muted    { color: var(--mastors-text-muted); }
+.text-subtle   { color: var(--mastors-text-subtle); }
+.text-inverse  { color: var(--mastors-text-inverse); }
+.text-accent   { color: var(--mastors-accent); }
+
+// Text color utilities — primitives (primary, neutral, success, warning, error, info)
+$-text-palettes: "primary", "neutral", "success", "warning", "error", "info";
+$-text-shades: "50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950";
+
+@each $palette in $-text-palettes {
+  @each $shade in $-text-shades {
+    .text-#{$palette}-#{$shade} { color: ct.color($palette, $shade); }
+  }
+}
+.text-white { color: ct.color("white"); }
+.text-black { color: ct.color("black"); }
+.text-current { color: currentColor; }
+.text-transparent { color: transparent; }
+
+// Background color utilities — semantic
+.bg-default  { background-color: var(--mastors-bg); }
+.bg-subtle   { background-color: var(--mastors-bg-subtle); }
+.bg-surface  { background-color: var(--mastors-surface); }
+.bg-accent   { background-color: var(--mastors-accent); }
+
+// Background color utilities — primitives
+@each $palette in $-text-palettes {
+  @each $shade in $-text-shades {
+    .bg-#{$palette}-#{$shade} { background-color: ct.color($palette, $shade); }
+  }
+}
+.bg-white { background-color: ct.color("white"); }
+.bg-black { background-color: ct.color("black"); }
+.bg-transparent { background-color: transparent; }

package/scss/utilities/_cursor.scss

@@ -0,0 +1,28 @@
+// utilities/_cursor.scss
+// Cursor utility classes.
+// ─────────────────────────────────────────────────────────────
+
+@use "../generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "cursor": (
+    property: cursor,
+    prefix: "cursor",
+    values: (
+      "auto":         auto,
+      "default":      default,
+      "pointer":      pointer,
+      "wait":         wait,
+      "text":         text,
+      "move":         move,
+      "help":         help,
+      "not-allowed":  not-allowed,
+      "none":         none,
+      "grab":         grab,
+      "grabbing":     grabbing,
+      "crosshair":    crosshair,
+      "zoom-in":      zoom-in,
+      "zoom-out":     zoom-out,
+    ),
+  ),
+));

package/scss/utilities/_display.scss

@@ -0,0 +1,26 @@
+// utilities/_display.scss
+// Display utility classes.
+// ─────────────────────────────────────────────────────────────
+
+@use "../generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "display": (
+    property: display,
+    values: (
+      "block":        block,
+      "inline-block": inline-block,
+      "inline":       inline,
+      "flex":         flex,
+      "inline-flex":  inline-flex,
+      "grid":         grid,
+      "inline-grid":  inline-grid,
+      "table":        table,
+      "table-cell":   table-cell,
+      "table-row":    table-row,
+      "contents":     contents,
+      "hidden":       none,
+    ),
+    responsive: true,
+  ),
+));

package/scss/utilities/_index.scss

@@ -0,0 +1,20 @@
+// utilities/_index.scss
+// ─────────────────────────────────────────────────────────────
+
+@forward "display";
+@forward "position";
+@forward "overflow";
+@forward "spacing";
+@forward "sizing";
+@forward "colors";
+@forward "borders";
+@forward "shadows";
+@forward "opacity";
+@forward "cursor";
+@forward "pointer-events";
+@forward "z-index";
+@forward "transform";
+@forward "typography";
+@forward "layout";
+@forward "interaction";
+@forward "animation";

package/scss/utilities/_interaction.scss

@@ -0,0 +1,156 @@
+// utilities/_interaction.scss
+// Interaction and user-experience utilities:
+// user-select, resize, scroll-behavior, scroll-snap, touch-action,
+// and state-variant prefixes (hover:, focus:, active:, disabled:).
+// ─────────────────────────────────────────────────────────────
+
+@use "../generators/class-generator" as gen;
+
+// ── User select ───────────────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "select": (
+    property: user-select,
+    prefix: "select",
+    values: (
+      "none":  none,
+      "text":  text,
+      "all":   all,
+      "auto":  auto,
+    ),
+  ),
+));
+
+// ── Resize ────────────────────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "resize": (
+    property: resize,
+    prefix: "resize",
+    values: (
+      "none":  none,
+      "x":     horizontal,
+      "y":     vertical,
+      "":      both,        // .resize
+    ),
+  ),
+));
+
+// ── Scroll behavior ───────────────────────────────────────────────────────────
+
+.scroll-auto   { scroll-behavior: auto; }
+.scroll-smooth { scroll-behavior: smooth; }
+
+// ── Scroll snap ───────────────────────────────────────────────────────────────
+
+// Container
+@include gen.generate-utilities((
+  "snap-type": (
+    property: scroll-snap-type,
+    prefix: "snap",
+    values: (
+      "none":       none,
+      "x":          x var(--mastors-snap-strictness, mandatory),
+      "y":          y var(--mastors-snap-strictness, mandatory),
+      "both":       both var(--mastors-snap-strictness, mandatory),
+      "mandatory":  x mandatory,
+      "proximity":  x proximity,
+    ),
+  ),
+));
+
+// Item
+@include gen.generate-utilities((
+  "snap-align": (
+    property: scroll-snap-align,
+    prefix: "snap",
+    values: (
+      "start":  start,
+      "end":    end,
+      "center": center,
+      "align-none": none,
+    ),
+  ),
+));
+
+.snap-stop-always  { scroll-snap-stop: always; }
+.snap-stop-normal  { scroll-snap-stop: normal; }
+
+// ── Scroll margin/padding ─────────────────────────────────────────────────────
+
+$-scroll-values: ("0": 0px, "4": 1rem, "8": 2rem, "16": 4rem);
+
+@each $key, $val in $-scroll-values {
+  .scroll-m-#{$key}  { scroll-margin: $val; }
+  .scroll-mt-#{$key} { scroll-margin-top: $val; }
+  .scroll-mb-#{$key} { scroll-margin-bottom: $val; }
+  .scroll-p-#{$key}  { scroll-padding: $val; }
+  .scroll-pt-#{$key} { scroll-padding-top: $val; }
+  .scroll-pb-#{$key} { scroll-padding-bottom: $val; }
+}
+
+// ── Touch action ──────────────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "touch": (
+    property: touch-action,
+    prefix: "touch",
+    values: (
+      "auto":         auto,
+      "none":         none,
+      "pan-x":        pan-x,
+      "pan-y":        pan-y,
+      "pan-left":     pan-left,
+      "pan-right":    pan-right,
+      "pan-up":       pan-up,
+      "pan-down":     pan-down,
+      "pinch-zoom":   pinch-zoom,
+      "manipulation": manipulation,
+    ),
+  ),
+));
+
+// ── State-variant pseudo-class utilities ─────────────────────────────────────
+// Hover, focus, active, disabled, and group-hover variants.
+// Pattern: .hover\:{utility}:hover { ... }
+// These are the most commonly used interactive overrides. For full
+// state-variant coverage, use a PostCSS/Vite plugin or the responsive engine.
+
+// Hover: opacity
+@each $key, $val in ("0": 0, "50": 0.5, "75": 0.75, "100": 1) {
+  .hover\:opacity-#{$key}:hover { opacity: $val; }
+}
+
+// Hover: background accent
+.hover\:bg-accent:hover         { background-color: var(--mastors-accent-hover); }
+.hover\:text-accent:hover       { color: var(--mastors-accent-hover); }
+.hover\:underline:hover         { text-decoration-line: underline; }
+.hover\:no-underline:hover      { text-decoration-line: none; }
+.hover\:shadow-lg:hover         { box-shadow: var(--mastors-shadow-lg); }
+.hover\:scale-105:hover         { transform: scale(1.05); }
+.hover\:scale-110:hover         { transform: scale(1.1); }
+.hover\:-translate-y-1:hover    { transform: translateY(-0.25rem); }
+
+// Focus-visible: ring utilities
+.focus\:ring:focus-visible {
+  outline: 2px solid var(--mastors-accent);
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus-visible {
+  outline: 2px solid var(--mastors-accent);
+  outline-offset: 2px;
+}
+
+.focus\:ring-offset-2:focus-visible {
+  outline-offset: 4px;
+}
+
+.focus\:ring-none:focus-visible {
+  outline: none;
+}
+
+// Disabled: dim + block interaction
+.disabled\:opacity-50:disabled { opacity: 50%; }
+.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
+.disabled\:pointer-events-none:disabled { pointer-events: none; }

package/scss/utilities/_layout.scss

@@ -0,0 +1,162 @@
+// utilities/_layout.scss
+// Layout utilities — aspect-ratio, object-fit, object-position, float, clear,
+// isolation, mix-blend-mode, box-decoration, appearance.
+// ─────────────────────────────────────────────────────────────
+
+@use "../generators/class-generator" as gen;
+
+// ── Aspect ratio ──────────────────────────────────────────────────────────────
+// Use calc() for ratio values — bare slash division is deprecated in Sass 2+.
+$-aspect-ratios: (
+  "auto":    auto,
+  "square":  calc(1 / 1),
+  "video":   calc(16 / 9),
+  "4-3":     calc(4 / 3),
+  "3-2":     calc(3 / 2),
+  "21-9":    calc(21 / 9),
+  "9-16":    calc(9 / 16),
+  "golden":  1.618,
+) !default;
+
+@each $key, $value in $-aspect-ratios {
+  .aspect-#{$key} { aspect-ratio: $value; }
+}
+
+// ── Object fit ───────────────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "object-fit": (
+    property: object-fit,
+    prefix: "object",
+    values: (
+      "contain":    contain,
+      "cover":      cover,
+      "fill":       fill,
+      "none":       none,
+      "scale-down": scale-down,
+    ),
+  ),
+));
+
+// ── Object position ──────────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "object-position": (
+    property: object-position,
+    prefix: "object",
+    values: (
+      "bottom":       bottom,
+      "center":       center,
+      "left":         left,
+      "left-bottom":  left bottom,
+      "left-top":     left top,
+      "right":        right,
+      "right-bottom": right bottom,
+      "right-top":    right top,
+      "top":          top,
+    ),
+  ),
+));
+
+// ── Float ─────────────────────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "float": (
+    property: float,
+    prefix: "float",
+    values: (
+      "right":  right,
+      "left":   left,
+      "none":   none,
+      "start":  inline-start,
+      "end":    inline-end,
+    ),
+    responsive: true,
+  ),
+));
+
+// ── Clear ─────────────────────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "clear": (
+    property: clear,
+    prefix: "clear",
+    values: (
+      "left":  left,
+      "right": right,
+      "both":  both,
+      "none":  none,
+      "start": inline-start,
+      "end":   inline-end,
+    ),
+  ),
+));
+
+// ── Isolation ─────────────────────────────────────────────────────────────────
+
+.isolate        { isolation: isolate; }
+.isolation-auto { isolation: auto; }
+
+// ── Mix blend mode ────────────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "mix-blend": (
+    property: mix-blend-mode,
+    prefix: "mix-blend",
+    values: (
+      "normal":       normal,
+      "multiply":     multiply,
+      "screen":       screen,
+      "overlay":      overlay,
+      "darken":       darken,
+      "lighten":      lighten,
+      "hard-light":   hard-light,
+      "soft-light":   soft-light,
+      "difference":   difference,
+      "exclusion":    exclusion,
+      "hue":          hue,
+      "saturation":   saturation,
+      "color":        color,
+      "luminosity":   luminosity,
+      "plus-lighter": plus-lighter,
+    ),
+  ),
+));
+
+// ── Background blend mode ─────────────────────────────────────────────────────
+
+@include gen.generate-utilities((
+  "bg-blend": (
+    property: background-blend-mode,
+    prefix: "bg-blend",
+    values: (
+      "normal":     normal,
+      "multiply":   multiply,
+      "screen":     screen,
+      "overlay":    overlay,
+      "darken":     darken,
+      "lighten":    lighten,
+      "difference": difference,
+      "exclusion":  exclusion,
+      "color":      color,
+      "luminosity": luminosity,
+    ),
+  ),
+));
+
+// ── Box decoration break ──────────────────────────────────────────────────────
+
+.box-decoration-clone { box-decoration-break: clone; }
+.box-decoration-slice { box-decoration-break: slice; }
+
+// ── Appearance ───────────────────────────────────────────────────────────────
+
+.appearance-none { appearance: none; }
+.appearance-auto { appearance: auto; }
+
+// ── Will-change ──────────────────────────────────────────────────────────────
+
+.will-change-auto      { will-change: auto; }
+.will-change-scroll    { will-change: scroll-position; }
+.will-change-contents  { will-change: contents; }
+.will-change-transform { will-change: transform; }

package/scss/utilities/_opacity.scss

@@ -0,0 +1,9 @@
+// utilities/_opacity.scss
+// Opacity utility classes from opacity tokens.
+// ─────────────────────────────────────────────────────────────
+
+@use "../tokens/opacity" as op;
+
+@each $key, $val in op.$opacity-tokens {
+  .opacity-#{$key} { opacity: $val; }
+}

package/scss/utilities/_overflow.scss

@@ -0,0 +1,36 @@
+// utilities/_overflow.scss
+// Overflow utility classes.
+// ─────────────────────────────────────────────────────────────
+
+@use "../generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "overflow": (
+    property: overflow,
+    values: (
+      "auto":    auto,
+      "hidden":  hidden,
+      "scroll":  scroll,
+      "visible": visible,
+      "clip":    clip,
+    ),
+  ),
+  "overflow-x": (
+    property: overflow-x,
+    prefix: "overflow-x",
+    values: (
+      "auto":   auto,
+      "hidden": hidden,
+      "scroll": scroll,
+    ),
+  ),
+  "overflow-y": (
+    property: overflow-y,
+    prefix: "overflow-y",
+    values: (
+      "auto":   auto,
+      "hidden": hidden,
+      "scroll": scroll,
+    ),
+  ),
+));

package/scss/utilities/_pointer-events.scss

@@ -0,0 +1,6 @@
+// utilities/_pointer-events.scss
+// Pointer-events utility classes.
+// ─────────────────────────────────────────────────────────────
+
+.pointer-events-none { pointer-events: none; }
+.pointer-events-auto { pointer-events: auto; }