@mastorscdn/core 1.0.0

package/scss/helpers/_states.scss

@@ -0,0 +1,120 @@
+// =============================================================================
+// Mastors-Core | Helpers: Interaction States
+// Reusable state classes for hover, focus, active, disabled
+// =============================================================================
+
+// --- Interactive base ---
+.mastors-interactive {
+  cursor: pointer;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none;
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover { opacity: 0.85; }
+  }
+
+  &:active { transform: scale(0.98); }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// --- Hover opacity ---
+.mastors-hover-opacity {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover { opacity: 0.8; }
+  }
+}
+
+// --- Hover lift ---
+.mastors-hover-lift {
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
+              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+
+// --- Hover scale ---
+.mastors-hover-scale {
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover { transform: scale(1.02); }
+  }
+  &:active { transform: scale(0.98); }
+}
+
+// --- Loading skeleton ---
+.mastors-skeleton {
+  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+  background-size: 200% 100%;
+  animation: mastors-skeleton-pulse 1.5s ease-in-out infinite;
+  border-radius: 4px;
+
+  @keyframes mastors-skeleton-pulse {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  [data-theme='dark'] & {
+    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
+    background-size: 200% 100%;
+  }
+}
+
+// --- Pulse animation ---
+.mastors-pulse {
+  animation: mastors-pulse-anim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+
+  @keyframes mastors-pulse-anim {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.5; }
+  }
+}
+
+// --- Spin animation ---
+.mastors-spin {
+  animation: mastors-spin-anim 1s linear infinite;
+
+  @keyframes mastors-spin-anim {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+  }
+}
+
+// --- Ping animation ---
+.mastors-ping {
+  animation: mastors-ping-anim 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+
+  @keyframes mastors-ping-anim {
+    75%, 100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+}
+
+// --- Bounce animation ---
+.mastors-bounce {
+  animation: mastors-bounce-anim 1s infinite;
+
+  @keyframes mastors-bounce-anim {
+    0%, 100% {
+      transform: translateY(-25%);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    50% {
+      transform: none;
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+}

package/scss/mastors-core.scss

@@ -0,0 +1,35 @@
+// =============================================================================
+// Mastors-Core | mastors-core.scss
+// Main compiled output entry — produces the full CSS bundle
+//
+// Compile this file to get mastors-core.css
+// All runtime CSS is generated here. _index.scss is for SCSS @use only.
+//
+// RULE: All @use statements must appear before any other rules.
+// Conditional output is handled inside each module's own _index.scss,
+// or via guard mixins called below after all @use declarations.
+// =============================================================================
+
+// ── All @use declarations (must be first, no exceptions) ────────────────────
+@use 'sass:meta';
+@use 'config'         as cfg;
+@use 'tokens';
+@use 'functions';
+@use 'mixins';
+@use 'mixins/css-vars' as cvars;
+@use 'abstracts';
+@use 'vendors';
+@use 'base';
+@use 'themes';
+@use 'accessibility';
+@use 'helpers';
+@use 'generators';
+@use 'utilities';
+
+// ── Output ───────────────────────────────────────────────────────────────────
+// All @use above produces no CSS on its own (modules guard their own output).
+// The only explicit CSS trigger needed here is the CSS variable engine.
+
+// ── 6. CSS Variable Engine ───────────────────────────────────────────────────
+// Guarded by cfg.$enable-css-variables inside the mixin itself.
+@include cvars.generate-all-vars-if-enabled;

package/scss/mixins/_css-vars.scss

@@ -0,0 +1,77 @@
+// =============================================================================
+// Mastors-Core | Mixins: CSS Variable Engine
+// Generates CSS custom properties from token maps
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:string';
+@use '../config/settings' as cfg;
+@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/motion' as t-motion;
+@use '../tokens/borders' as t-borders;
+
+// --- Generate CSS vars from any map ---
+@mixin generate-vars($map, $prefix, $root: ':root') {
+  #{$root} {
+    @each $key, $value in $map {
+      --#{cfg.$mastors-prefix}-#{$prefix}-#{$key}: #{$value};
+    }
+  }
+}
+
+// --- Generate all core CSS variables (unconditional) ---
+@mixin generate-all-vars {
+  :root {
+    // Colors
+    @each $key, $value in t-colors.$mastors-colors {
+      --#{cfg.$mastors-prefix}-color-#{$key}: #{$value};
+    }
+
+    // Semantic
+    @each $key, $value in t-colors.$mastors-semantic {
+      --#{cfg.$mastors-prefix}-#{$key}: #{$value};
+    }
+
+    // Shadows
+    @each $key, $value in t-shadows.$mastors-shadows {
+      --#{cfg.$mastors-prefix}-shadow-#{$key}: #{$value};
+    }
+
+    // Radius
+    @each $key, $value in t-radius.$mastors-radius {
+      --#{cfg.$mastors-prefix}-radius-#{$key}: #{$value};
+    }
+
+    // Z-Index
+    @each $key, $value in t-z.$mastors-z-index {
+      --#{cfg.$mastors-prefix}-z-#{$key}: #{$value};
+    }
+
+    // Opacity
+    @each $key, $value in t-opacity.$mastors-opacity {
+      --#{cfg.$mastors-prefix}-opacity-#{$key}: #{$value};
+    }
+
+    // Durations
+    @each $key, $value in t-motion.$mastors-durations {
+      --#{cfg.$mastors-prefix}-duration-#{$key}: #{$value};
+    }
+
+    // Easings
+    @each $key, $value in t-motion.$mastors-easings {
+      --#{cfg.$mastors-prefix}-easing-#{$key}: #{$value};
+    }
+  }
+}
+
+// --- Conditionally generate all CSS variables (checks $enable-css-variables) ---
+// Used by mastors-core.scss to avoid @use inside @if.
+@mixin generate-all-vars-if-enabled {
+  @if cfg.$enable-css-variables {
+    @include generate-all-vars;
+  }
+}

package/scss/mixins/_helpers.scss

@@ -0,0 +1,208 @@
+// =============================================================================
+// Mastors-Core | Mixins: Helpers
+// Reusable UI pattern mixins for enterprise components
+// =============================================================================
+
+@use 'sass:map';
+@use '../tokens/motion' as t-motion;
+@use '../tokens/radius' as t-radius;
+@use '../tokens/shadows' as t-shadows;
+@use '../tokens/colors' as t-colors;
+
+// --- Absolute Center ---
+@mixin absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+// --- Flex Center ---
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// --- Text Truncate (single line) ---
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// --- Line Clamp (multi-line) ---
+@mixin line-clamp($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// --- Aspect Ratio ---
+@mixin aspect-ratio($ratio: '16/9') {
+  aspect-ratio: #{$ratio};
+}
+
+// --- Glassmorphism ---
+@mixin glassmorphism(
+  $blur: 16px,
+  $bg: rgba(255, 255, 255, 0.12),
+  $border: rgba(255, 255, 255, 0.18),
+  $shadow: 0 8px 32px rgba(0, 0, 0, 0.15)
+) {
+  background: $bg;
+  backdrop-filter: blur($blur);
+  -webkit-backdrop-filter: blur($blur);
+  border: 1px solid $border;
+  box-shadow: $shadow;
+}
+
+// --- Neumorphism ---
+@mixin neumorphism(
+  $bg: #e0e5ec,
+  $light: rgba(255, 255, 255, 0.8),
+  $dark: rgba(163, 177, 198, 0.6),
+  $intensity: 6px
+) {
+  background: $bg;
+  box-shadow:
+    #{$intensity} #{$intensity} #{$intensity * 2} $dark,
+    #{-$intensity} #{-$intensity} #{$intensity * 2} $light;
+}
+
+// --- Custom Scrollbar ---
+@mixin custom-scrollbar(
+  $width: 6px,
+  $track: transparent,
+  $thumb: rgba(0, 0, 0, 0.2),
+  $thumb-hover: rgba(0, 0, 0, 0.4)
+) {
+  scrollbar-width: thin;
+  scrollbar-color: $thumb $track;
+
+  &::-webkit-scrollbar {
+    width: $width;
+    height: $width;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $track;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $thumb;
+    border-radius: 9999px;
+
+    &:hover {
+      background: $thumb-hover;
+    }
+  }
+}
+
+// --- Focus Ring ---
+@mixin focus-ring(
+  $color: #2563eb,
+  $width: 3px,
+  $offset: 2px,
+  $style: solid
+) {
+  outline: $width $style $color;
+  outline-offset: $offset;
+}
+
+// --- Focus Visible ---
+@mixin focus-visible {
+  &:focus { outline: none; }
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+// --- Smooth Transition ---
+@mixin smooth-transition($props: all, $dur: 200ms, $ease: cubic-bezier(0.4, 0, 0.2, 1)) {
+  transition: $props $dur $ease;
+}
+
+// --- Hover lift effect ---
+@mixin hover-lift($y: -4px, $shadow: 0 10px 20px rgba(0,0,0,0.15)) {
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
+              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      transform: translateY($y);
+      box-shadow: $shadow;
+    }
+  }
+}
+
+// --- Loading State ---
+@mixin loading-state {
+  pointer-events: none;
+  opacity: 0.7;
+  cursor: wait;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: inherit;
+  }
+}
+
+// --- Skeleton Loading ---
+@mixin skeleton-loading(
+  $bg-from: #e5e7eb,
+  $bg-to: #f3f4f6,
+  $duration: 1.5s
+) {
+  background: linear-gradient(
+    90deg,
+    $bg-from 25%,
+    $bg-to 50%,
+    $bg-from 75%
+  );
+  background-size: 200% 100%;
+  animation: mastors-skeleton $duration ease-in-out infinite;
+
+  @keyframes mastors-skeleton {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+}
+
+// --- Cover / Fill ---
+@mixin cover {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+// --- Visually Hidden (accessibility) ---
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+// --- Reset visually hidden ---
+@mixin visually-visible {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}

package/scss/mixins/_index.scss

@@ -0,0 +1,7 @@
+// =============================================================================
+// Mastors-Core | Mixins: Index
+// =============================================================================
+
+@forward 'responsive';
+@forward 'helpers';
+@forward 'css-vars';

package/scss/mixins/_responsive.scss

@@ -0,0 +1,112 @@
+// =============================================================================
+// Mastors-Core | Mixins: Responsive Engine
+// Modern media query system for Mastors CDN
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:list';
+@use '../tokens/breakpoints' as t;
+
+// --- up($bp) — min-width (mobile first) ---
+@mixin up($bp) {
+  @if map.has-key(t.$mastors-breakpoints, $bp) {
+    $value: map.get(t.$mastors-breakpoints, $bp);
+    @if $value == 0 {
+      @content;
+    } @else {
+      @media (min-width: #{$value}) {
+        @content;
+      }
+    }
+  } @else {
+    // Custom pixel value passed
+    @media (min-width: #{$bp}) {
+      @content;
+    }
+  }
+}
+
+// --- down($bp) — max-width ---
+@mixin down($bp) {
+  @if map.has-key(t.$mastors-breakpoints, $bp) {
+    $value: map.get(t.$mastors-breakpoints, $bp);
+    $max: $value - 0.02px;
+    @if $value == 0 {
+      @warn '[mastors] down(xs) targets nothing. Use up(sm) instead.';
+    } @else {
+      @media (max-width: #{$max}) {
+        @content;
+      }
+    }
+  } @else {
+    @media (max-width: #{$bp}) {
+      @content;
+    }
+  }
+}
+
+// --- between($lower, $upper) ---
+@mixin between($lower, $upper) {
+  $min: map.get(t.$mastors-breakpoints, $lower);
+  $max: map.get(t.$mastors-breakpoints, $upper);
+
+  @if $min == null or $max == null {
+    @warn '[mastors] between() requires valid breakpoint keys.';
+  } @else {
+    @media (min-width: #{$min}) and (max-width: #{$max - 0.02px}) {
+      @content;
+    }
+  }
+}
+
+// --- only($bp) — single breakpoint range ---
+@mixin only($bp) {
+  $keys: map.keys(t.$mastors-breakpoints);
+  $index: list.index($keys, $bp);
+
+  @if $index == null {
+    @warn '[mastors] only() requires a valid breakpoint key.';
+  } @else if $index == list.length($keys) {
+    @include up($bp) { @content; }
+  } @else {
+    $next: list.nth($keys, $index + 1);
+    @include between($bp, $next) { @content; }
+  }
+}
+
+// --- hover (pointer device check) ---
+@mixin hover {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover { @content; }
+  }
+}
+
+// --- dark media query ---
+@mixin prefers-dark {
+  @media (prefers-color-scheme: dark) {
+    @content;
+  }
+}
+
+// --- reduced motion ---
+@mixin prefers-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+// --- print ---
+@mixin print {
+  @media print {
+    @content;
+  }
+}
+
+// --- portrait / landscape ---
+@mixin portrait {
+  @media (orientation: portrait) { @content; }
+}
+
+@mixin landscape {
+  @media (orientation: landscape) { @content; }
+}

package/scss/themes/_custom.scss

@@ -0,0 +1,33 @@
+// =============================================================================
+// Mastors-Core | Themes: Custom Theme API
+// Allows building custom themes for ERP, eCommerce, SaaS products
+// =============================================================================
+
+// Usage:
+// @use 'mastors-core/themes/custom' with (
+//   $theme-name: 'enterprise',
+//   $custom-tokens: (
+//     '--mastors-color-primary': #0f4c75,
+//     '--mastors-bg-body': #1b262c,
+//   )
+// );
+
+@use 'sass:map';
+@use 'sass:list';
+@use '../config/settings' as cfg;
+
+$theme-name:    'custom' !default;
+$custom-tokens: () !default;
+
+@mixin apply-custom-theme($name: $theme-name, $tokens: $custom-tokens) {
+  [#{cfg.$mastors-theme-attr}='#{$name}'] {
+    @each $prop, $value in $tokens {
+      #{$prop}: #{$value};
+    }
+  }
+}
+
+// Auto-apply if custom tokens provided
+@if list.length(map.keys($custom-tokens)) > 0 {
+  @include apply-custom-theme;
+}

package/scss/themes/_dark.scss

@@ -0,0 +1,53 @@
+// =============================================================================
+// Mastors-Core | Themes: Dark Theme
+// =============================================================================
+
+@use '../config/settings' as cfg;
+
+@mixin dark-theme {
+  --mastors-text-primary:     #f9fafb;
+  --mastors-text-secondary:   #e5e7eb;
+  --mastors-text-muted:       #9ca3af;
+  --mastors-text-disabled:    #6b7280;
+  --mastors-text-inverse:     #111827;
+
+  --mastors-bg-body:          #0f172a;
+  --mastors-bg-subtle:        #1e293b;
+  --mastors-bg-muted:         #334155;
+  --mastors-bg-inverse:       #f9fafb;
+
+  --mastors-border-default:   #334155;
+  --mastors-border-strong:    #475569;
+  --mastors-border-focus:     #60a5fa;
+
+  --mastors-surface:          #1e293b;
+  --mastors-surface-raised:   #334155;
+  --mastors-surface-overlay:  rgba(15, 23, 42, 0.95);
+
+  --mastors-shadow-ambient:   0 1px 3px rgba(0, 0, 0, 0.50);
+
+  --mastors-color-primary:    #60a5fa;
+  --mastors-color-secondary:  #a78bfa;
+  --mastors-color-accent:     #38bdf8;
+  --mastors-color-success:    #4ade80;
+  --mastors-color-warning:    #fbbf24;
+  --mastors-color-danger:     #f87171;
+  --mastors-color-info:       #22d3ee;
+
+  --mastors-scrollbar-thumb:  rgba(255, 255, 255, 0.2);
+  --mastors-scrollbar-track:  transparent;
+}
+
+// Attribute-based dark mode
+@if cfg.$enable-dark-theme {
+  [#{cfg.$mastors-theme-attr}='dark'] {
+    @include dark-theme;
+  }
+
+  // OS-level dark mode
+  @media (prefers-color-scheme: dark) {
+    :root:not([#{cfg.$mastors-theme-attr}='light']) {
+      @include dark-theme;
+    }
+  }
+}

package/scss/themes/_index.scss

@@ -0,0 +1,7 @@
+// =============================================================================
+// Mastors-Core | Themes: Index
+// =============================================================================
+
+@forward 'light';
+@forward 'dark';
+@forward 'custom';

package/scss/themes/_light.scss

@@ -0,0 +1,49 @@
+// =============================================================================
+// Mastors-Core | Themes: Light Theme (default)
+// =============================================================================
+
+@use '../config/settings' as cfg;
+
+@mixin light-theme {
+  --mastors-text-primary:     #111827;
+  --mastors-text-secondary:   #374151;
+  --mastors-text-muted:       #6b7280;
+  --mastors-text-disabled:    #9ca3af;
+  --mastors-text-inverse:     #ffffff;
+
+  --mastors-bg-body:          #ffffff;
+  --mastors-bg-subtle:        #f9fafb;
+  --mastors-bg-muted:         #f3f4f6;
+  --mastors-bg-inverse:       #111827;
+
+  --mastors-border-default:   #e5e7eb;
+  --mastors-border-strong:    #d1d5db;
+  --mastors-border-focus:     #2563eb;
+
+  --mastors-surface:          #ffffff;
+  --mastors-surface-raised:   #f9fafb;
+  --mastors-surface-overlay:  rgba(255, 255, 255, 0.95);
+
+  --mastors-shadow-ambient:   0 1px 3px rgba(0, 0, 0, 0.10);
+
+  --mastors-color-primary:    #2563eb;
+  --mastors-color-secondary:  #7c3aed;
+  --mastors-color-accent:     #0ea5e9;
+  --mastors-color-success:    #16a34a;
+  --mastors-color-warning:    #d97706;
+  --mastors-color-danger:     #dc2626;
+  --mastors-color-info:       #0891b2;
+
+  --mastors-scrollbar-thumb:  rgba(0, 0, 0, 0.2);
+  --mastors-scrollbar-track:  transparent;
+}
+
+// Apply to :root
+:root {
+  @include light-theme;
+}
+
+// Explicit light attribute
+[#{cfg.$mastors-theme-attr}='light'] {
+  @include light-theme;
+}