Mastors Core

npm install @mastors/core
# or
yarn add @mastors/core

<link rel="stylesheet" href="dist/mastors-core.css" />

// Zero CSS output — only functions, mixins, tokens
@use '@mastorscdn/core' as mc;

@use '@mastorscdn/core' as mc;

.my-card {
  background-color: mc.color('surface');
  border-radius: mc.radius('lg');
  box-shadow: mc.shadow('md');
  color: mc.semantic('text-primary');
  padding: mc.rem(24);

  @include mc.up('md') {
    padding: mc.rem(32);
  }
}

// Glassmorphism card
.glass-card {
  @include mc.glassmorphism(20px, rgba(255,255,255,0.12), rgba(255,255,255,0.2));
}

// Hover lift
.interactive-card {
  @include mc.hover-lift;
}

@use '@mastorscdn/core' with (
  $enable-dark-theme:    true,
  $enable-utilities:     true,
  $enable-accessibility: true,
  $mastors-prefix:       'mc'
);

mastors-core.scss  ← Compile entry (full CSS output)
│
├── config/           Feature flags, prefix, debug ($enable-*)
├── tokens/           Token maps (colors, shadows, radius, z, opacity, bp, motion, borders)
│
├── functions/        Token accessor functions + math helpers
│   ├── color($key)   shadow($key)   radius($key)   z($key)
│   ├── duration($k)  easing($k)     breakpoint($k) container($k)
│   └── rem($px)      em($px)        fluid($min,$max)
│
├── mixins/           Responsive engine + helper mixins + CSS var generator
│   ├── up() down() between() only()
│   └── glassmorphism() neumorphism() hover-lift() skeleton-loading()…
│
├── themes/           Light + dark + custom theme CSS var output
├── base/             CSS reset + motion defaults
├── accessibility/    sr-only, skip-links, focus-visible
├── helpers/          .mastors-container, state classes
├── generators/       Utility class output (colors, shadows, radius, display…)
└── utilities/        Spacing, sizing, border utilities

@use '@mastorscdn/core' as mc;

.element {
  color:            mc.color('primary');        // #2563eb
  background:       mc.color('neutral-100');    // #f3f4f6
  border-color:     mc.color('danger');         // #dc2626
  // Semantic
  color:            mc.semantic('text-muted');  // #6b7280
  background:       mc.semantic('bg-body');     // #ffffff
}

// SCSS token function
.card { box-shadow: mc.shadow('md'); }
.btn  { box-shadow: mc.shadow('primary'); }

// CSS custom property
.card { box-shadow: var(--mastors-shadow-lg); }

// Utility class
<div class="shadow-xl">

border-radius: mc.radius('lg');   // 12px
border-radius: mc.radius('full'); // 9999px (pill)
border-radius: mc.radius('xl');   // 16px

transition: mc.transition('colors');    // color + bg + border transitions
transition: mc.transition('all');       // all 200ms ease-in-out
transition-duration: mc.duration('moderate'); // 300ms
transition-timing-function: mc.easing('spring');

z-index: mc.z('modal');      // 500
z-index: mc.z('tooltip');   // 700
z-index: mc.layer('dialog'); // layer map accessor

@use '@mastorscdn/core' as mc;

// ── Colors ───────────────────────────────────────────────────
color:            mc.color('primary');             // #2563eb
color:            mc.color('neutral-700');          // #374151
color:            mc.semantic('text-muted');        // #6b7280

// ── Shadows ──────────────────────────────────────────────────
box-shadow:       mc.shadow('lg');                 // multi-layer shadow
box-shadow:       mc.shadow('primary');            // brand colored shadow

// ── Radius ───────────────────────────────────────────────────
border-radius:    mc.radius('xl');                 // 16px
border-radius:    mc.radius('full');               // 9999px

// ── Z-Index ──────────────────────────────────────────────────
z-index:          mc.z('modal');                   // 500
z-index:          mc.layer('dialog');              // layer map

// ── Opacity ──────────────────────────────────────────────────
opacity:          mc.opacity('50');                // 0.5

// ── Motion ───────────────────────────────────────────────────
transition-duration:        mc.duration('normal');     // 200ms
transition-timing-function: mc.easing('spring');
transition:                 mc.transition('colors');

// ── Breakpoints ──────────────────────────────────────────────
$bp:              mc.breakpoint('md');             // 768px
max-width:        mc.container('xl');              // 1140px

// ── Math Helpers ─────────────────────────────────────────────
font-size:        mc.rem(18);                      // 1.125rem
font-size:        mc.em(14);                       // 0.875em
font-size:        mc.fluid(16px, 24px);            // clamp() fluid scale
$raw:             mc.strip-unit(16px);             // 16
$pct:             mc.percent(3, 12);               // 25%

@use '@mastorscdn/core' as mc;

.glass-card {
  @include mc.glassmorphism(
    $blur:   20px,
    $bg:     rgba(255, 255, 255, 0.12),
    $border: rgba(255, 255, 255, 0.20)
  );
  border-radius: mc.radius('xl');
  padding: mc.rem(24);
}

.soft-button {
  @include mc.neumorphism(#e0e5ec);
  border-radius: mc.radius('md');
}

.card {
  @include mc.hover-lift($y: -6px);
}

.excerpt {
  @include mc.line-clamp(3);
}

@use '@mastorscdn/core' as mc;

.element {
  font-size: 1rem;                          // mobile base

  // up($bp) — min-width, mobile first
  @include mc.up('md') { font-size: 1.25rem; }   // ≥ 768px
  @include mc.up('xl') { font-size: 1.5rem; }    // ≥ 1200px

  // down($bp) — max-width
  @include mc.down('lg') { display: none; }      // < 992px

  // between($lower, $upper) — range
  @include mc.between('sm', 'xl') { padding: 2rem; } // 576px–1199px

  // only($bp) — single breakpoint slot
  @include mc.only('md') { padding: 1.5rem; }    // 768px–991px

  // Media helpers
  @include mc.hover { color: red; }              // (hover:hover) and (pointer:fine)
  @include mc.prefers-dark { color: white; }     // OS dark mode
  @include mc.prefers-reduced-motion { animation: none; }
  @include mc.print { display: none; }
  @include mc.portrait { padding-top: 2rem; }
  @include mc.landscape { padding-top: 1rem; }
}

@include mc.up(900px)   { ... }
@include mc.down(1100px) { ... }

<!-- Light (default) -->
<html data-theme="light">

<!-- Dark -->
<html data-theme="dark">

<!-- Custom brand theme -->
<html data-theme="enterprise">

class MastorsTheme {
  static set(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('mastors-theme', theme);
  }

  static get() {
    return localStorage.getItem('mastors-theme')
      || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  }

  static init() { this.set(this.get()); }

  static toggle() {
    const current = document.documentElement.getAttribute('data-theme');
    this.set(current === 'dark' ? 'light' : 'dark');
  }
}

MastorsTheme.init();

@use '@mastorscdn/core/themes/custom' with (
  $theme-name: 'enterprise',
  $custom-tokens: (
    '--mastors-color-primary':   #0f4c75,
    '--mastors-color-secondary': #1b4332,
    '--mastors-bg-body':         #1b262c,
    '--mastors-bg-subtle':       #16213e,
    '--mastors-text-primary':    #e2e8f0,
    '--mastors-surface':         #16213e,
  )
);

/* ── Semantic (theme-aware) ────────────────────────── */
var(--mastors-text-primary)
var(--mastors-text-secondary)
var(--mastors-text-muted)
var(--mastors-text-disabled)
var(--mastors-text-inverse)
var(--mastors-bg-body)
var(--mastors-bg-subtle)
var(--mastors-bg-muted)
var(--mastors-surface)
var(--mastors-border-default)
var(--mastors-border-strong)
var(--mastors-border-focus)

/* ── Brand Colors ──────────────────────────────────── */
var(--mastors-color-primary)
var(--mastors-color-secondary)
var(--mastors-color-accent)
var(--mastors-color-success)
var(--mastors-color-warning)
var(--mastors-color-danger)
var(--mastors-color-info)

/* ── Shadows ───────────────────────────────────────── */
var(--mastors-shadow-sm)
var(--mastors-shadow-md)
var(--mastors-shadow-lg)
var(--mastors-shadow-xl)
var(--mastors-shadow-primary)

/* ── Radius ────────────────────────────────────────── */
var(--mastors-radius-sm)    /* 4px  */
var(--mastors-radius-md)    /* 8px  */
var(--mastors-radius-lg)    /* 12px */
var(--mastors-radius-xl)    /* 16px */
var(--mastors-radius-full)  /* 9999px */

/* ── Motion ────────────────────────────────────────── */
var(--mastors-duration-fast)
var(--mastors-duration-normal)
var(--mastors-easing-ease-in-out)
var(--mastors-easing-spring)

/* ── Z-Index ───────────────────────────────────────── */
var(--mastors-z-dropdown)   /* 100 */
var(--mastors-z-modal)      /* 500 */
var(--mastors-z-tooltip)    /* 700 */
var(--mastors-z-toast)      /* 800 */

<!-- Skip to content link -->
<a href="#main" class="mastors-skip-link">Skip to content</a>

<!-- Screen reader only (visually hidden) -->
<span class="mastors-sr-only">Loading...</span>

<!-- Skeleton loading placeholder -->
<div class="mastors-skeleton w-full h-4 rounded-md"></div>
<div class="mastors-skeleton w-1-2 h-4 rounded-md mt-2"></div>

<!-- Responsive container (auto max-width by breakpoint) -->
<div class="mastors-container">
  Content auto-clamps at 540 / 720 / 960 / 1140 / 1320 / 1520px
</div>

<!-- Full-width fluid container with consistent padding -->
<div class="mastors-container-fluid">
  Always 100% width with padding-left/right: 1rem
</div>

// In mastors-flexer/_index.scss
@use '@mastorscdn/core' as mc;

.mastors-flex-container {
  @include mc.up('md') { display: flex; }
}

.mastors-flex-gap {
  gap: mc.rem(16);
}