@mastorscdn/core 1.0.0

package/scss/tokens/_borders.scss

@@ -0,0 +1,26 @@
+// =============================================================================
+// Mastors-Core | Tokens: Borders & Aspect Ratios
+// NOTE: Aspect ratio values use math.div() — the / operator for division
+// is deprecated outside calc() in Dart Sass 2.0.0.
+// =============================================================================
+
+@use 'sass:math';
+
+$mastors-border-widths: (
+  '0':    0,
+  '1':    1px,
+  '2':    2px,
+  '4':    4px,
+  '8':    8px,
+) !default;
+
+$mastors-aspect-ratios: (
+  'square':    math.div(1, 1),
+  'video':     math.div(16, 9),
+  'cinema':    math.div(21, 9),
+  'portrait':  math.div(3, 4),
+  'landscape': math.div(4, 3),
+  'golden':    math.div(1.618, 1),
+  'wide':      math.div(2, 1),
+  'tall':      math.div(1, 2),
+) !default;

package/scss/tokens/_breakpoints.scss

@@ -0,0 +1,24 @@
+// =============================================================================
+// Mastors-Core | Tokens: Breakpoints & Containers
+// =============================================================================
+
+$mastors-breakpoints: (
+  'xs':   0,
+  'sm':   576px,
+  'md':   768px,
+  'lg':   992px,
+  'xl':   1200px,
+  '2xl':  1400px,
+  '3xl':  1600px,
+) !default;
+
+$mastors-containers: (
+  'xs':   100%,
+  'sm':   540px,
+  'md':   720px,
+  'lg':   960px,
+  'xl':   1140px,
+  '2xl':  1320px,
+  '3xl':  1520px,
+  'fluid': 100%,
+) !default;

package/scss/tokens/_colors.scss

@@ -0,0 +1,83 @@
+// =============================================================================
+// Mastors-Core | Tokens: Colors
+// Complete color palette — primitive + extended
+// =============================================================================
+
+$mastors-colors: (
+  // --- Brand ---
+  'primary':          #2563eb,
+  'primary-light':    #60a5fa,
+  'primary-dark':     #1d4ed8,
+
+  'secondary':        #7c3aed,
+  'secondary-light':  #a78bfa,
+  'secondary-dark':   #5b21b6,
+
+  'accent':           #0ea5e9,
+  'accent-light':     #38bdf8,
+  'accent-dark':      #0284c7,
+
+  // --- Status ---
+  'success':          #16a34a,
+  'success-light':    #4ade80,
+  'success-dark':     #15803d,
+
+  'warning':          #d97706,
+  'warning-light':    #fbbf24,
+  'warning-dark':     #b45309,
+
+  'danger':           #dc2626,
+  'danger-light':     #f87171,
+  'danger-dark':      #b91c1c,
+
+  'info':             #0891b2,
+  'info-light':       #22d3ee,
+  'info-dark':        #0e7490,
+
+  // --- Neutrals ---
+  'white':            #ffffff,
+  'black':            #000000,
+
+  'neutral-50':       #f9fafb,
+  'neutral-100':      #f3f4f6,
+  'neutral-200':      #e5e7eb,
+  'neutral-300':      #d1d5db,
+  'neutral-400':      #9ca3af,
+  'neutral-500':      #6b7280,
+  'neutral-600':      #4b5563,
+  'neutral-700':      #374151,
+  'neutral-800':      #1f2937,
+  'neutral-900':      #111827,
+  'neutral-950':      #030712,
+
+  // --- Surface ---
+  'surface':          #ffffff,
+  'surface-raised':   #f9fafb,
+  'surface-overlay':  #f3f4f6,
+  'surface-sunken':   #e5e7eb,
+
+  // --- Transparent ---
+  'transparent':      transparent,
+) !default;
+
+// --- Semantic Color Map ---
+$mastors-semantic: (
+  'text-primary':       #111827,
+  'text-secondary':     #374151,
+  'text-muted':         #6b7280,
+  'text-disabled':      #9ca3af,
+  'text-inverse':       #ffffff,
+
+  'bg-body':            #ffffff,
+  'bg-subtle':          #f9fafb,
+  'bg-muted':           #f3f4f6,
+  'bg-inverse':         #111827,
+
+  'border-default':     #e5e7eb,
+  'border-strong':      #d1d5db,
+  'border-focus':       #2563eb,
+
+  'link':               #2563eb,
+  'link-hover':         #1d4ed8,
+  'link-visited':       #7c3aed,
+) !default;

package/scss/tokens/_index.scss

@@ -0,0 +1,13 @@
+// =============================================================================
+// Mastors-Core | Tokens: Index
+// Forwards all token partials
+// =============================================================================
+
+@forward 'colors';
+@forward 'shadows';
+@forward 'radius';
+@forward 'zindex';
+@forward 'opacity';
+@forward 'breakpoints';
+@forward 'motion';
+@forward 'borders';

package/scss/tokens/_motion.scss

@@ -0,0 +1,46 @@
+// =============================================================================
+// Mastors-Core | Tokens: Motion (Durations, Easings, Transitions)
+// NOTE: Any value containing a comma must be quoted so Sass does not
+// interpret it as a map-entry separator.
+// =============================================================================
+
+$mastors-durations: (
+  'instant':    0ms,
+  'fast':       100ms,
+  'normal':     200ms,
+  'moderate':   300ms,
+  'slow':       500ms,
+  'slower':     700ms,
+  'slowest':    1000ms,
+) !default;
+
+$mastors-easings: (
+  'linear':         'cubic-bezier(0, 0, 1, 1)',
+  'ease':           'cubic-bezier(0.25, 0.1, 0.25, 1)',
+  'ease-in':        'cubic-bezier(0.4, 0, 1, 1)',
+  'ease-out':       'cubic-bezier(0, 0, 0.2, 1)',
+  'ease-in-out':    'cubic-bezier(0.4, 0, 0.2, 1)',
+  'spring':         'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  'bounce':         'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+  'smooth':         'cubic-bezier(0.23, 1, 0.32, 1)',
+  'sharp':          'cubic-bezier(0.4, 0, 0.6, 1)',
+) !default;
+
+$mastors-transitions: (
+  'none':      none,
+  'all':       'all 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+  'fast':      'all 100ms cubic-bezier(0.4, 0, 0.2, 1)',
+  'colors':    'color 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+  'opacity':   'opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+  'shadow':    'box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+  'transform': 'transform 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+) !default;
+
+// Motion tokens
+$mastors-motion: (
+  'scale-hover':    scale(1.02),
+  'scale-active':   scale(0.98),
+  'scale-press':    scale(0.96),
+  'translate-up':   translateY(-4px),
+  'translate-down': translateY(4px),
+) !default;

package/scss/tokens/_opacity.scss

@@ -0,0 +1,22 @@
+// =============================================================================
+// Mastors-Core | Tokens: Opacity
+// =============================================================================
+
+$mastors-opacity: (
+  '0':    0,
+  '5':    0.05,
+  '10':   0.10,
+  '15':   0.15,
+  '20':   0.20,
+  '25':   0.25,
+  '30':   0.30,
+  '40':   0.40,
+  '50':   0.50,
+  '60':   0.60,
+  '70':   0.70,
+  '75':   0.75,
+  '80':   0.80,
+  '90':   0.90,
+  '95':   0.95,
+  '100':  1,
+) !default;

package/scss/tokens/_radius.scss

@@ -0,0 +1,15 @@
+// =============================================================================
+// Mastors-Core | Tokens: Radius
+// =============================================================================
+
+$mastors-radius: (
+  'none':   0,
+  'xs':     2px,
+  'sm':     4px,
+  'md':     8px,
+  'lg':     12px,
+  'xl':     16px,
+  '2xl':    24px,
+  '3xl':    32px,
+  'full':   9999px,
+) !default;

package/scss/tokens/_shadows.scss

@@ -0,0 +1,27 @@
+// =============================================================================
+// Mastors-Core | Tokens: Shadows
+// NOTE: Multi-layer shadow values must be quoted strings so Sass does not
+// interpret the comma as a map-entry separator.
+// =============================================================================
+
+$mastors-shadows: (
+  'none':   none,
+  'xs':     '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  'sm':     '0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10)',
+  'md':     '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10)',
+  'lg':     '0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10)',
+  'xl':     '0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10)',
+  '2xl':    '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+  'inner':  'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+
+  // Colored shadows
+  'primary': '0 4px 14px 0 rgba(37, 99, 235, 0.35)',
+  'success': '0 4px 14px 0 rgba(22, 163, 74, 0.35)',
+  'danger':  '0 4px 14px 0 rgba(220, 38, 38, 0.35)',
+  'warning': '0 4px 14px 0 rgba(217, 119, 6, 0.35)',
+
+  // Dark mode ready
+  'dark-sm': '0 1px 3px 0 rgba(0, 0, 0, 0.40)',
+  'dark-md': '0 4px 6px -1px rgba(0, 0, 0, 0.40)',
+  'dark-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.50)',
+) !default;

package/scss/tokens/_zindex.scss

@@ -0,0 +1,27 @@
+// =============================================================================
+// Mastors-Core | Tokens: Z-Index & Layers
+// =============================================================================
+
+$mastors-z-index: (
+  'base':       0,
+  'raised':     10,
+  'dropdown':   100,
+  'sticky':     200,
+  'fixed':      300,
+  'overlay':    400,
+  'modal':      500,
+  'popover':    600,
+  'tooltip':    700,
+  'toast':      800,
+  'spinner':    900,
+  'max':        9999,
+) !default;
+
+$mastors-layers: (
+  'page':       0,
+  'ui':         1,
+  'nav':        2,
+  'panel':      3,
+  'dialog':     4,
+  'critical':   5,
+) !default;

package/scss/utilities/_borders.scss

@@ -0,0 +1,35 @@
+// =============================================================================
+// Mastors-Core | Utilities: Borders
+// =============================================================================
+
+@use 'sass:map';
+@use '../tokens/borders' as t;
+@use '../config/settings' as cfg;
+
+@if cfg.$enable-utilities {
+  // Border width
+  @each $key, $value in t.$mastors-border-widths {
+    .border-#{$key} { border-width: $value !important; }
+    .border-t-#{$key} { border-top-width: $value !important; }
+    .border-r-#{$key} { border-right-width: $value !important; }
+    .border-b-#{$key} { border-bottom-width: $value !important; }
+    .border-l-#{$key} { border-left-width: $value !important; }
+  }
+
+  // Border styles
+  .border-solid   { border-style: solid !important; }
+  .border-dashed  { border-style: dashed !important; }
+  .border-dotted  { border-style: dotted !important; }
+  .border-none    { border-style: none !important; }
+
+  // Shorthand
+  .border { border: 1px solid var(--mastors-border-default) !important; }
+  .border-t { border-top: 1px solid var(--mastors-border-default) !important; }
+  .border-r { border-right: 1px solid var(--mastors-border-default) !important; }
+  .border-b { border-bottom: 1px solid var(--mastors-border-default) !important; }
+  .border-l { border-left: 1px solid var(--mastors-border-default) !important; }
+
+  // Outline
+  .outline-none   { outline: none !important; }
+  .outline        { outline: 2px solid var(--mastors-border-focus) !important; }
+}

package/scss/utilities/_index.scss

@@ -0,0 +1,14 @@
+// =============================================================================
+// Mastors-Core | Utilities: Index
+// Conditionally outputs utility classes based on config flags.
+// Guard lives here so mastors-core.scss can @use 'utilities' unconditionally.
+// =============================================================================
+
+@use '../config/settings' as cfg;
+@use 'sass:meta';
+
+@if cfg.$enable-utilities {
+  @include meta.load-css('spacing');
+  @include meta.load-css('sizing');
+  @include meta.load-css('borders');
+}

package/scss/utilities/_sizing.scss

@@ -0,0 +1,131 @@
+// =============================================================================
+// Mastors-Core | Utilities: Sizing
+// Width, height, min/max utilities
+//
+// NOTE: Fractional keys use '-' as separator (e.g. '1-2' → .w-1-2) because
+// '/' is not valid unescaped in CSS selectors and sass:string has no
+// replace() function. sass:selector escape is used for the class name.
+// =============================================================================
+
+@use 'sass:string';
+@use '../config/settings' as cfg;
+
+$size-scale: (
+  '0':    0,
+  'px':   1px,
+  '1':    0.25rem,
+  '2':    0.5rem,
+  '3':    0.75rem,
+  '4':    1rem,
+  '5':    1.25rem,
+  '6':    1.5rem,
+  '8':    2rem,
+  '10':   2.5rem,
+  '12':   3rem,
+  '16':   4rem,
+  '20':   5rem,
+  '24':   6rem,
+  '32':   8rem,
+  '40':   10rem,
+  '48':   12rem,
+  '56':   14rem,
+  '64':   16rem,
+  '72':   18rem,
+  '80':   20rem,
+  '96':   24rem,
+  '1-2':  50%,
+  '1-3':  33.333333%,
+  '2-3':  66.666667%,
+  '1-4':  25%,
+  '3-4':  75%,
+  '1-5':  20%,
+  '4-5':  80%,
+  'full': 100%,
+  'screen': 100vw,
+  'svw':  100svw,
+  'dvw':  100dvw,
+  'auto': auto,
+  'fit':  fit-content,
+  'min':  min-content,
+  'max':  max-content,
+) !default;
+
+$height-scale: (
+  '0':      0,
+  'px':     1px,
+  '1':      0.25rem,
+  '2':      0.5rem,
+  '3':      0.75rem,
+  '4':      1rem,
+  '5':      1.25rem,
+  '6':      1.5rem,
+  '8':      2rem,
+  '10':     2.5rem,
+  '12':     3rem,
+  '16':     4rem,
+  '20':     5rem,
+  '24':     6rem,
+  '32':     8rem,
+  '40':     10rem,
+  '48':     12rem,
+  '56':     14rem,
+  '64':     16rem,
+  '72':     18rem,
+  '80':     20rem,
+  '96':     24rem,
+  '1-2':    50%,
+  '1-3':    33.333333%,
+  '2-3':    66.666667%,
+  '1-4':    25%,
+  '3-4':    75%,
+  'full':   100%,
+  'screen': 100vh,
+  'svh':    100svh,
+  'dvh':    100dvh,
+  'auto':   auto,
+  'fit':    fit-content,
+  'min':    min-content,
+  'max':    max-content,
+) !default;
+
+@if cfg.$enable-utilities {
+  // Width
+  @each $key, $value in $size-scale {
+    .w-#{$key} { width: $value !important; }
+  }
+
+  // Height
+  @each $key, $value in $height-scale {
+    .h-#{$key} { height: $value !important; }
+  }
+
+  // Min/Max Width
+  .min-w-0      { min-width: 0 !important; }
+  .min-w-full   { min-width: 100% !important; }
+  .min-w-min    { min-width: min-content !important; }
+  .min-w-max    { min-width: max-content !important; }
+  .max-w-none   { max-width: none !important; }
+  .max-w-xs     { max-width: 20rem !important; }
+  .max-w-sm     { max-width: 24rem !important; }
+  .max-w-md     { max-width: 28rem !important; }
+  .max-w-lg     { max-width: 32rem !important; }
+  .max-w-xl     { max-width: 36rem !important; }
+  .max-w-2xl    { max-width: 42rem !important; }
+  .max-w-3xl    { max-width: 48rem !important; }
+  .max-w-4xl    { max-width: 56rem !important; }
+  .max-w-5xl    { max-width: 64rem !important; }
+  .max-w-6xl    { max-width: 72rem !important; }
+  .max-w-7xl    { max-width: 80rem !important; }
+  .max-w-full   { max-width: 100% !important; }
+  .max-w-screen { max-width: 100vw !important; }
+
+  // Min/Max Height
+  .min-h-0      { min-height: 0 !important; }
+  .min-h-full   { min-height: 100% !important; }
+  .min-h-screen { min-height: 100vh !important; }
+  .min-h-svh    { min-height: 100svh !important; }
+  .min-h-dvh    { min-height: 100dvh !important; }
+  .max-h-none   { max-height: none !important; }
+  .max-h-full   { max-height: 100% !important; }
+  .max-h-screen { max-height: 100vh !important; }
+}

package/scss/utilities/_spacing.scss

@@ -0,0 +1,68 @@
+// =============================================================================
+// Mastors-Core | Utilities: Spacing
+// Margin and padding utility classes (non-flex, non-grid)
+// =============================================================================
+
+@use '../config/settings' as cfg;
+
+// Spacing scale (rem-based)
+$spacing-scale: (
+  '0':    0,
+  'px':   1px,
+  '0-5':  0.125rem,
+  '1':    0.25rem,
+  '1-5':  0.375rem,
+  '2':    0.5rem,
+  '2-5':  0.625rem,
+  '3':    0.75rem,
+  '3-5':  0.875rem,
+  '4':    1rem,
+  '5':    1.25rem,
+  '6':    1.5rem,
+  '7':    1.75rem,
+  '8':    2rem,
+  '9':    2.25rem,
+  '10':   2.5rem,
+  '11':   2.75rem,
+  '12':   3rem,
+  '14':   3.5rem,
+  '16':   4rem,
+  '20':   5rem,
+  '24':   6rem,
+  '28':   7rem,
+  '32':   8rem,
+  '36':   9rem,
+  '40':   10rem,
+  '44':   11rem,
+  '48':   12rem,
+  '52':   13rem,
+  '56':   14rem,
+  '60':   15rem,
+  '64':   16rem,
+  '72':   18rem,
+  '80':   20rem,
+  '96':   24rem,
+  'auto': auto,
+) !default;
+
+@if cfg.$enable-utilities {
+  @each $key, $value in $spacing-scale {
+    // Margin all
+    .m-#{$key}  { margin: $value !important; }
+    .mt-#{$key} { margin-top: $value !important; }
+    .mr-#{$key} { margin-right: $value !important; }
+    .mb-#{$key} { margin-bottom: $value !important; }
+    .ml-#{$key} { margin-left: $value !important; }
+    .mx-#{$key} { margin-left: $value !important; margin-right: $value !important; }
+    .my-#{$key} { margin-top: $value !important; margin-bottom: $value !important; }
+
+    // Padding all
+    .p-#{$key}  { padding: $value !important; }
+    .pt-#{$key} { padding-top: $value !important; }
+    .pr-#{$key} { padding-right: $value !important; }
+    .pb-#{$key} { padding-bottom: $value !important; }
+    .pl-#{$key} { padding-left: $value !important; }
+    .px-#{$key} { padding-left: $value !important; padding-right: $value !important; }
+    .py-#{$key} { padding-top: $value !important; padding-bottom: $value !important; }
+  }
+}

package/scss/vendors/_index.scss

@@ -0,0 +1,5 @@
+// =============================================================================
+// Mastors-Core | Vendors: Index
+// =============================================================================
+
+@forward 'normalize';

package/scss/vendors/_normalize.scss

@@ -0,0 +1,69 @@
+// =============================================================================
+// Mastors-Core | Vendors: Normalize Supplement
+// Fills gaps between Mastors reset and browser quirks
+// =============================================================================
+
+// --- Firefox button quirks ---
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+// --- Number inputs: remove arrows ---
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+// --- Search inputs ---
+[type='search'] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+// --- File input ---
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+// --- Details / Summary ---
+details { display: block; }
+summary { display: list-item; }
+
+// --- Template ---
+template { display: none; }
+
+// --- Sub / Sup ---
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub { bottom: -0.25em; }
+sup { top: -0.5em; }
+
+// --- Abbr ---
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: none;
+}
+
+// --- Address ---
+address { font-style: normal; }
+
+// --- Blockquote ---
+blockquote,
+figure {
+  margin: 0;
+}