@mastorscdn/core 1.0.0

package/scss/base/_reset.scss

@@ -0,0 +1,178 @@
+// =============================================================================
+// Mastors-Core | Base: Reset
+// Modern CSS reset + normalize, box-sizing, and sensible defaults
+// =============================================================================
+
+@use '../config/settings' as cfg;
+
+// --- Box Sizing ---
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// --- Document ---
+html {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  scroll-behavior: smooth;
+
+  @if cfg.$enable-reduced-motion {
+    @media (prefers-reduced-motion: reduce) {
+      scroll-behavior: auto;
+    }
+  }
+}
+
+// --- Body ---
+body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: var(--mastors-bg-body, #ffffff);
+  color: var(--mastors-text-primary, #111827);
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// --- Headings ---
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+  margin: 0;
+}
+
+// --- Paragraphs ---
+p { margin: 0; }
+
+// --- Links ---
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+// --- Lists ---
+ol, ul, menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+// --- Media ---
+img, svg, video, canvas, audio, iframe, embed, object {
+  display: block;
+  vertical-align: middle;
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+
+// --- Forms ---
+button, input, optgroup, select, textarea {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button, select { text-transform: none; }
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+  cursor: pointer;
+  border: 0;
+}
+
+[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  opacity: 1;
+  color: var(--mastors-text-muted, #6b7280);
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: var(--mastors-text-muted, #6b7280);
+}
+
+textarea { resize: vertical; }
+
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+// --- Tables ---
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+th {
+  font-weight: inherit;
+  text-align: left;
+}
+
+td, th {
+  padding: 0;
+}
+
+// --- HR ---
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+  border-color: var(--mastors-border-default, #e5e7eb);
+  margin: 0;
+}
+
+// --- Code ---
+pre, code, kbd, samp {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+  font-size: 1em;
+}
+
+// --- Summary ---
+summary { display: list-item; }
+
+// --- Hidden ---
+[hidden] { display: none !important; }
+
+// --- SVG ---
+svg {
+  fill: currentColor;
+}
+
+// --- Selection ---
+::selection {
+  background-color: var(--mastors-color-primary, #2563eb);
+  color: #ffffff;
+}

package/scss/config/_index.scss

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

package/scss/config/_settings.scss

@@ -0,0 +1,29 @@
+// =============================================================================
+// Mastors-Core | Config: Settings
+// Global feature flags and configuration switches
+// =============================================================================
+
+// --- Feature Flags ---
+$enable-dark-theme:        true  !default;
+$enable-light-theme:       true  !default;
+$enable-css-variables:     true  !default;
+$enable-utilities:         true  !default;
+$enable-reset:             true  !default;
+$enable-base:              true  !default;
+$enable-accessibility:     true  !default;
+$enable-reduced-motion:    true  !default;
+$enable-focus-visible:     true  !default;
+$enable-smooth-scroll:     true  !default;
+$enable-print-styles:      false !default;
+
+// --- Prefix ---
+$mastors-prefix:           'mastors' !default;
+
+// --- Root Element ---
+$mastors-root-selector:    ':root' !default;
+
+// --- Theme Attribute ---
+$mastors-theme-attr:       'data-theme' !default;
+
+// --- Debug Mode ---
+$mastors-debug:            false !default;

package/scss/functions/_index.scss

@@ -0,0 +1,7 @@
+// =============================================================================
+// Mastors-Core | Functions: Index
+// =============================================================================
+
+@forward 'map-helpers';
+@forward 'token-accessors';
+@forward 'math';

package/scss/functions/_map-helpers.scss

@@ -0,0 +1,30 @@
+// =============================================================================
+// Mastors-Core | Functions: Map Helpers
+// Safe map access with validation and warnings
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+// --- Safe map.get with error warning ---
+@function mastors-map-get($map, $key, $fallback: null, $context: 'mastors') {
+  @if not meta.type-of($map) == 'map' {
+    @warn '[#{$context}] Expected a map, got #{meta.type-of($map)}.';
+    @return $fallback;
+  }
+
+  @if not map.has-key($map, $key) {
+    @if $fallback != null {
+      @return $fallback;
+    }
+    @warn '[#{$context}] Key "#{$key}" not found in map. Available keys: #{map.keys($map)}';
+    @return null;
+  }
+
+  @return map.get($map, $key);
+}
+
+// --- Merge maps deeply ---
+@function mastors-map-merge($map1, $map2) {
+  @return map.merge($map1, $map2);
+}

package/scss/functions/_math.scss

@@ -0,0 +1,35 @@
+// =============================================================================
+// Mastors-Core | Functions: Math & Unit Helpers
+// =============================================================================
+
+@use 'sass:math';
+@use 'sass:string';
+
+// --- px to rem ---
+@function rem($px, $base: 16) {
+  @return math.div($px, $base) * 1rem;
+}
+
+// --- px to em ---
+@function em($px, $base: 16) {
+  @return math.div($px, $base) * 1em;
+}
+
+// --- Strip unit ---
+@function strip-unit($value) {
+  @return math.div($value, ($value * 0 + 1));
+}
+
+// --- Clamp utility ---
+@function fluid($min, $max, $min-vw: 320px, $max-vw: 1440px) {
+  $min-rem: rem(strip-unit($min));
+  $max-rem: rem(strip-unit($max));
+  $slope: math.div(strip-unit($max) - strip-unit($min), strip-unit($max-vw) - strip-unit($min-vw));
+  $intercept: strip-unit($min) - $slope * strip-unit($min-vw);
+  @return clamp(#{$min-rem}, #{$intercept * 0.0625rem} + #{$slope * 100vw}, #{$max-rem});
+}
+
+// --- Percentage helper ---
+@function percent($value, $total: 100) {
+  @return math.percentage(math.div($value, $total));
+}

package/scss/functions/_token-accessors.scss

@@ -0,0 +1,85 @@
+// =============================================================================
+// Mastors-Core | Functions: Token Accessors
+// Public API functions for reading design tokens
+// =============================================================================
+
+@use 'sass:map';
+@use '../tokens/colors' as t-colors;
+@use '../tokens/shadows' as t-shadows;
+@use '../tokens/radius' as t-radius;
+@use '../tokens/zindex' as t-z;
+@use '../tokens/opacity' as t-opacity;
+@use '../tokens/breakpoints' as t-bp;
+@use '../tokens/motion' as t-motion;
+@use '../tokens/borders' as t-borders;
+@use 'map-helpers' as helpers;
+
+// --- color($key, $fallback) ---
+@function color($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-colors.$mastors-colors, $key, $fallback, 'color()');
+}
+
+// --- semantic($key, $fallback) ---
+@function semantic($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-colors.$mastors-semantic, $key, $fallback, 'semantic()');
+}
+
+// --- shadow($key, $fallback) ---
+@function shadow($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-shadows.$mastors-shadows, $key, $fallback, 'shadow()');
+}
+
+// --- radius($key, $fallback) ---
+@function radius($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-radius.$mastors-radius, $key, $fallback, 'radius()');
+}
+
+// --- z($key, $fallback) ---
+@function z($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-z.$mastors-z-index, $key, $fallback, 'z()');
+}
+
+// --- layer($key, $fallback) ---
+@function layer($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-z.$mastors-layers, $key, $fallback, 'layer()');
+}
+
+// --- opacity($key, $fallback) ---
+@function opacity($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-opacity.$mastors-opacity, $key, $fallback, 'opacity()');
+}
+
+// --- breakpoint($key, $fallback) ---
+@function breakpoint($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-bp.$mastors-breakpoints, $key, $fallback, 'breakpoint()');
+}
+
+// --- container($key, $fallback) ---
+@function container($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-bp.$mastors-containers, $key, $fallback, 'container()');
+}
+
+// --- duration($key, $fallback) ---
+@function duration($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-motion.$mastors-durations, $key, $fallback, 'duration()');
+}
+
+// --- easing($key, $fallback) ---
+@function easing($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-motion.$mastors-easings, $key, $fallback, 'easing()');
+}
+
+// --- transition($key, $fallback) ---
+@function transition($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-motion.$mastors-transitions, $key, $fallback, 'transition()');
+}
+
+// --- border-width($key, $fallback) ---
+@function border-width($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-borders.$mastors-border-widths, $key, $fallback, 'border-width()');
+}
+
+// --- aspect-ratio($key, $fallback) ---
+@function aspect-ratio($key, $fallback: null) {
+  @return helpers.mastors-map-get(t-borders.$mastors-aspect-ratios, $key, $fallback, 'aspect-ratio()');
+}

package/scss/generators/_colors.scss

@@ -0,0 +1,30 @@
+// =============================================================================
+// Mastors-Core | Generators: Color Utilities
+// Generates .text-*, .bg-*, .border-color-* utility classes
+// =============================================================================
+
+@use 'sass:map';
+@use '../tokens/colors' as t;
+@use '../config/settings' as cfg;
+
+@if cfg.$enable-utilities {
+  // --- Text Colors ---
+  @each $key, $value in t.$mastors-colors {
+    .text-#{$key} { color: $value !important; }
+  }
+
+  // --- Background Colors ---
+  @each $key, $value in t.$mastors-colors {
+    .bg-#{$key} { background-color: $value !important; }
+  }
+
+  // --- Border Colors ---
+  @each $key, $value in t.$mastors-colors {
+    .border-color-#{$key} { border-color: $value !important; }
+  }
+
+  // --- Semantic text ---
+  @each $key, $value in t.$mastors-semantic {
+    .text-#{$key} { color: $value !important; }
+  }
+}

package/scss/generators/_display.scss

@@ -0,0 +1,78 @@
+// =============================================================================
+// Mastors-Core | Generators: Display Utilities
+// =============================================================================
+
+@use '../config/settings' as cfg;
+
+@if cfg.$enable-utilities {
+  .d-none        { display: none !important; }
+  .d-block       { display: block !important; }
+  .d-inline      { display: inline !important; }
+  .d-inline-block { display: inline-block !important; }
+  .d-contents    { display: contents !important; }
+  .d-table       { display: table !important; }
+  .d-table-cell  { display: table-cell !important; }
+  .d-table-row   { display: table-row !important; }
+
+  // Visibility
+  .visible       { visibility: visible !important; }
+  .invisible     { visibility: hidden !important; }
+
+  // Overflow
+  .overflow-auto    { overflow: auto !important; }
+  .overflow-hidden  { overflow: hidden !important; }
+  .overflow-visible { overflow: visible !important; }
+  .overflow-scroll  { overflow: scroll !important; }
+  .overflow-x-auto  { overflow-x: auto !important; }
+  .overflow-x-hidden { overflow-x: hidden !important; }
+  .overflow-y-auto  { overflow-y: auto !important; }
+  .overflow-y-hidden { overflow-y: hidden !important; }
+
+  // Positioning
+  .position-static   { position: static !important; }
+  .position-relative { position: relative !important; }
+  .position-absolute { position: absolute !important; }
+  .position-fixed    { position: fixed !important; }
+  .position-sticky   { position: sticky !important; }
+
+  .top-0    { top: 0 !important; }
+  .right-0  { right: 0 !important; }
+  .bottom-0 { bottom: 0 !important; }
+  .left-0   { left: 0 !important; }
+  .inset-0  { inset: 0 !important; }
+
+  // Cursor
+  .cursor-auto      { cursor: auto !important; }
+  .cursor-default   { cursor: default !important; }
+  .cursor-pointer   { cursor: pointer !important; }
+  .cursor-wait      { cursor: wait !important; }
+  .cursor-text      { cursor: text !important; }
+  .cursor-move      { cursor: move !important; }
+  .cursor-not-allowed { cursor: not-allowed !important; }
+  .cursor-grab      { cursor: grab !important; }
+  .cursor-grabbing  { cursor: grabbing !important; }
+
+  // Object Fit
+  .object-contain   { object-fit: contain !important; }
+  .object-cover     { object-fit: cover !important; }
+  .object-fill      { object-fit: fill !important; }
+  .object-none      { object-fit: none !important; }
+  .object-scale-down { object-fit: scale-down !important; }
+
+  // Aspect Ratios
+  .aspect-square    { aspect-ratio: 1 / 1 !important; }
+  .aspect-video     { aspect-ratio: 16 / 9 !important; }
+  .aspect-cinema    { aspect-ratio: 21 / 9 !important; }
+  .aspect-portrait  { aspect-ratio: 3 / 4 !important; }
+  .aspect-landscape { aspect-ratio: 4 / 3 !important; }
+
+  // Pointer events
+  .pointer-events-none { pointer-events: none !important; }
+  .pointer-events-auto { pointer-events: auto !important; }
+
+  // User select
+  .select-none { user-select: none !important; }
+  .select-text { user-select: text !important; }
+  .select-all  { user-select: all !important; }
+  .select-auto { user-select: auto !important; }
+}

package/scss/generators/_index.scss

@@ -0,0 +1,18 @@
+// =============================================================================
+// Mastors-Core | Generators: Index
+// Conditionally outputs utility generator classes based on config flags.
+// Guard lives here so mastors-core.scss can @use 'generators' unconditionally.
+// =============================================================================
+
+@use '../config/settings' as cfg;
+@use 'sass:meta';
+
+@if cfg.$enable-utilities {
+  @include meta.load-css('colors');
+  @include meta.load-css('shadows');
+  @include meta.load-css('radius');
+  @include meta.load-css('opacity');
+  @include meta.load-css('transitions');
+  @include meta.load-css('zindex');
+  @include meta.load-css('display');
+}

package/scss/generators/_opacity.scss

@@ -0,0 +1,13 @@
+// =============================================================================
+// Mastors-Core | Generators: Opacity Utilities
+// =============================================================================
+
+@use 'sass:map';
+@use '../tokens/opacity' as t;
+@use '../config/settings' as cfg;
+
+@if cfg.$enable-utilities {
+  @each $key, $value in t.$mastors-opacity {
+    .opacity-#{$key} { opacity: $value !important; }
+  }
+}

package/scss/generators/_radius.scss

@@ -0,0 +1,33 @@
+// =============================================================================
+// Mastors-Core | Generators: Border Radius Utilities
+// =============================================================================
+
+@use 'sass:map';
+@use '../tokens/radius' as t;
+@use '../config/settings' as cfg;
+
+@if cfg.$enable-utilities {
+  @each $key, $value in t.$mastors-radius {
+    .rounded-#{$key} { border-radius: $value !important; }
+  }
+
+  // Directional
+  @each $key, $value in t.$mastors-radius {
+    .rounded-t-#{$key} {
+      border-top-left-radius: $value !important;
+      border-top-right-radius: $value !important;
+    }
+    .rounded-b-#{$key} {
+      border-bottom-left-radius: $value !important;
+      border-bottom-right-radius: $value !important;
+    }
+    .rounded-l-#{$key} {
+      border-top-left-radius: $value !important;
+      border-bottom-left-radius: $value !important;
+    }
+    .rounded-r-#{$key} {
+      border-top-right-radius: $value !important;
+      border-bottom-right-radius: $value !important;
+    }
+  }
+}

package/scss/generators/_shadows.scss

@@ -0,0 +1,13 @@
+// =============================================================================
+// Mastors-Core | Generators: Shadow Utilities
+// =============================================================================
+
+@use 'sass:map';
+@use '../tokens/shadows' as t;
+@use '../config/settings' as cfg;
+
+@if cfg.$enable-utilities {
+  @each $key, $value in t.$mastors-shadows {
+    .shadow-#{$key} { box-shadow: $value !important; }
+  }
+}

package/scss/generators/_transitions.scss

@@ -0,0 +1,13 @@
+// =============================================================================
+// Mastors-Core | Generators: Transition Utilities
+// =============================================================================
+
+@use 'sass:map';
+@use '../tokens/motion' as t;
+@use '../config/settings' as cfg;
+
+@if cfg.$enable-utilities {
+  @each $key, $value in t.$mastors-transitions {
+    .transition-#{$key} { transition: $value !important; }
+  }
+}

package/scss/generators/_zindex.scss

@@ -0,0 +1,13 @@
+// =============================================================================
+// Mastors-Core | Generators: Z-Index Utilities
+// =============================================================================
+
+@use 'sass:map';
+@use '../tokens/zindex' as t;
+@use '../config/settings' as cfg;
+
+@if cfg.$enable-utilities {
+  @each $key, $value in t.$mastors-z-index {
+    .z-#{$key} { z-index: $value !important; }
+  }
+}

package/scss/helpers/_container.scss

@@ -0,0 +1,34 @@
+// =============================================================================
+// Mastors-Core | Helpers: Container
+// Mastors container system — integrates with Mastors-Gridder
+// =============================================================================
+
+@use 'sass:map';
+@use '../tokens/breakpoints' as t;
+@use '../config/settings' as cfg;
+
+.mastors-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+  @each $bp, $width in t.$mastors-containers {
+    $min: map.get(t.$mastors-breakpoints, $bp);
+    @if $min and $min != 0 {
+      @media (min-width: #{$min}) {
+        max-width: $width;
+      }
+    }
+  }
+}
+
+// Fluid container
+.mastors-container-fluid {
+  width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+}

package/scss/helpers/_index.scss

@@ -0,0 +1,6 @@
+// =============================================================================
+// Mastors-Core | Helpers: Index
+// =============================================================================
+
+@forward 'container';
+@forward 'states';