@mastors/core 1.1.0 → 2.0.0

package/scss/utilities/_layout.scss

@@ -1,162 +0,0 @@
-// 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/_typography.scss

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