@mastorscdn/core 1.0.0 → 1.0.2

package/index.js

@@ -0,0 +1,39 @@
+// =============================================================================
+// @mastorscdn/core | index.js
+// JavaScript entry point — exposes helpers for tooling integrations.
+//
+// What this gives you:
+//   const mc = require('@mastorscdn/core');
+//   mc.sassLoadPaths   → pass to Vite / Next sassOptions.loadPaths
+//   mc.importer        → pass to sass.compile({ importers: [mc.importer] })
+//   mc.scssEntry       → absolute path to scss/_index.scss
+// =============================================================================
+
+'use strict';
+
+const path = require('path');
+const { importer, getLoadPath, getNodeModulesPath } = require('./importer');
+
+const PKG_ROOT     = path.resolve(__dirname);
+const SCSS_ENTRY   = path.join(PKG_ROOT, 'scss', '_index.scss');
+const SCSS_COMPILE = path.join(PKG_ROOT, 'scss', 'mastors-core.scss');
+
+module.exports = {
+  /** Sass FileImporter for programmatic sass.compile() */
+  importer,
+
+  /** Absolute path to this package's root (for --load-path) */
+  getLoadPath,
+
+  /** Absolute path to node_modules containing this package */
+  getNodeModulesPath,
+
+  /** Ready-to-use array for Vite / Next.js sassOptions.loadPaths */
+  get sassLoadPaths() { return [getNodeModulesPath()]; },
+
+  /** scss/_index.scss — use for @use API (no CSS output) */
+  scssEntry: SCSS_ENTRY,
+
+  /** scss/mastors-core.scss — compile this for the full CSS bundle */
+  scssCompileEntry: SCSS_COMPILE,
+};

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@mastorscdn/core",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Mastors-Core — foundational SCSS architecture for the Mastors CDN ecosystem",
-  "main": "scss/_index.scss",
-  "sass": "scss/_index.scss",
+  "main":  "index.js",
+  "types": "index.d.ts",
+  "sass":  "scss/_index.scss",
   "style": "dist/mastors-core.css",
   "keywords": [
     "scss",
@@ -36,34 +37,46 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "sass": "./scss/_index.scss",
-      "style": "./dist/mastors-core.css"
+      "sass":    "./scss/_index.scss",
+      "scss":    "./scss/_index.scss",
+      "style":   "./dist/mastors-core.css",
+      "require": "./index.js",
+      "import":  "./index.js",
+      "default": "./dist/mastors-core.css"
     },
-    "./dist/mastors-core.css": "./dist/mastors-core.css",
+    "./importer":                  "./importer.js",
+    "./scss":                      "./scss/_index.scss",
+    "./scss/*":                    "./scss/*",
+    "./dist/mastors-core.css":     "./dist/mastors-core.css",
     "./dist/mastors-core.min.css": "./dist/mastors-core.min.css"
   },
   "files": [
     "dist/",
     "scss/",
+    "scripts/",
+    "index.js",
+    "index.d.ts",
+    "importer.js",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "build": "vite build",
-    "dev": "vite",
-    "sass:build": "sass scss/mastors-core.scss dist/mastors-core.css --style expanded --source-map",
-    "sass:min": "sass scss/mastors-core.scss dist/mastors-core.min.css --style compressed --no-source-map",
-    "sass:watch": "sass --watch scss/mastors-core.scss:dist/mastors-core.css --style expanded --source-map",
-    "sass:all": "npm run sass:build && npm run sass:min",
-    "build:all": "npm run sass:all && npm run build",
-    "clean": "rimraf dist",
-    "prebuild": "npm run clean",
+    "postinstall":    "node scripts/postinstall.js",
+    "build":          "vite build",
+    "dev":            "vite",
+    "sass:build":     "sass scss/mastors-core.scss dist/mastors-core.css --style expanded --source-map --load-path=node_modules",
+    "sass:min":       "sass scss/mastors-core.scss dist/mastors-core.min.css --style compressed --no-source-map --load-path=node_modules",
+    "sass:watch":     "sass --watch scss/mastors-core.scss:dist/mastors-core.css --style expanded --source-map --load-path=node_modules",
+    "sass:all":       "npm run sass:build && npm run sass:min",
+    "build:all":      "npm run sass:all && npm run build",
+    "clean":          "rimraf dist",
+    "prebuild":       "npm run clean",
     "prepublishOnly": "npm run sass:all"
   },
   "devDependencies": {
-    "sass": "^1.77.0",
-    "vite": "^5.3.0",
-    "rimraf": "^5.0.0"
+    "rimraf": "^5.0.0",
+    "sass":   "^1.77.0",
+    "vite":   "^5.3.0"
   },
   "peerDependencies": {
     "sass": ">=1.70.0"
@@ -73,10 +86,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/KEHEM-IT/Mastors-Core.git"
+    "url":  "git+https://github.com/KEHEM-IT/Mastors-Core.git"
   },
   "bugs": {
     "url": "https://github.com/KEHEM-IT/Mastors-Core/issues"
   },
-  "homepage": "https://mastorscdn.kehem.com/mastors-core"
-}
+  "homepage": "https://mastorscdn.kehem.com/"
+}

package/scripts/postinstall.js

@@ -0,0 +1,325 @@
+#!/usr/bin/env node
+// =============================================================================
+// Mastors-Core | postinstall.js
+// Runs after `npm install @mastorscdn/core`
+// Auto-detects the user's framework and prints the exact setup guide.
+// =============================================================================
+
+'use strict';
+
+const fs   = require('fs');
+const path = require('path');
+
+// ── ANSI colours ─────────────────────────────────────────────────────────────
+const C = {
+  reset:   '\x1b[0m',
+  bold:    '\x1b[1m',
+  cyan:    '\x1b[36m',
+  green:   '\x1b[32m',
+  yellow:  '\x1b[33m',
+  magenta: '\x1b[35m',
+  gray:    '\x1b[90m',
+};
+
+const b  = (s) => `${C.bold}${s}${C.reset}`;
+const c  = (s) => `${C.cyan}${s}${C.reset}`;
+const g  = (s) => `${C.green}${s}${C.reset}`;
+const y  = (s) => `${C.yellow}${s}${C.reset}`;
+const m  = (s) => `${C.magenta}${s}${C.reset}`;
+const gr = (s) => `${C.gray}${s}${C.reset}`;
+
+// ── Resolve user's project root ───────────────────────────────────────────────
+// When installed as a dep, __dirname = .../node_modules/@mastorscdn/core/scripts
+// So root is several levels up from here.
+function findProjectRoot() {
+  let dir = __dirname;
+  for (let i = 0; i < 6; i++) {
+    const pkg = path.join(dir, 'package.json');
+    if (fs.existsSync(pkg)) {
+      try {
+        const p = JSON.parse(fs.readFileSync(pkg, 'utf8'));
+        if (p.name !== '@mastorscdn/core') return dir;
+      } catch (_) {}
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return process.cwd();
+}
+
+const ROOT = findProjectRoot();
+
+function getUserPkg() {
+  try {
+    return JSON.parse(fs.readFileSync(path.join(ROOT, 'package.json'), 'utf8'));
+  } catch (_) {
+    return {};
+  }
+}
+
+// ── Framework detection ───────────────────────────────────────────────────────
+function detectFramework(pkg) {
+  const all = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies,
+    ...pkg.peerDependencies,
+  };
+  const has = (name) => Boolean(all[name]);
+
+  if (has('next'))                                        return 'next';
+  if (has('nuxt') || has('@nuxt/ui'))                     return 'nuxt';
+  if (has('astro') || has('@astrojs/react'))              return 'astro';
+  if (has('@sveltejs/kit'))                               return 'sveltekit';
+  if (has('svelte'))                                      return 'svelte';
+  if (has('@remix-run/react') || has('@remix-run/node'))  return 'remix';
+  if (has('vite') && has('vue'))                          return 'vite-vue';
+  if (has('vite') && has('react'))                        return 'vite-react';
+  if (has('vite'))                                        return 'vite';
+  if (has('vue'))                                         return 'vue-cli';
+  if (has('@angular/core'))                               return 'angular';
+  if (has('react'))                                       return 'react';
+  return 'node';
+}
+
+// ── Banner ────────────────────────────────────────────────────────────────────
+function banner() {
+  console.log('');
+  console.log(b(c('  ╔══════════════════════════════════════════╗')));
+  console.log(b(c('  ║        @mastorscdn/core installed!       ║')));
+  console.log(b(c('  ╚══════════════════════════════════════════╝')));
+  console.log('');
+}
+
+// ── Guides ────────────────────────────────────────────────────────────────────
+
+function guideNode() {
+  console.log(b(g('  ✔  Plain Node + Sass')));
+  console.log('');
+  console.log('  Run sass with --load-path:');
+  console.log('');
+  console.log(c('    sass --watch src/main.scss:dist/main.css --load-path=node_modules'));
+  console.log('');
+  console.log('  Or add to your package.json scripts:');
+  console.log('');
+  console.log(gr('    "sass:watch": "sass --watch src/main.scss:dist/main.css --load-path=node_modules"'));
+  console.log('');
+  console.log('  Then in your SCSS:');
+  console.log(m("    @use '@mastorscdn/core' as mc;"));
+  console.log('');
+}
+
+function guideNext() {
+  console.log(b(g('  ✔  Next.js detected')));
+  console.log('');
+  console.log('  Add to ' + c('next.config.mjs') + ':');
+  console.log('');
+  console.log(gr("    const nextConfig = {"));
+  console.log(gr("      sassOptions: { loadPaths: ['./node_modules'] },"));
+  console.log(gr("    };"));
+  console.log(gr("    export default nextConfig;"));
+  console.log('');
+  console.log('  Import in ' + c('app/layout.tsx') + ' or ' + c('pages/_app.js') + ':');
+  console.log(gr("    import '../styles/globals.scss';"));
+  console.log('');
+  console.log('  In globals.scss:');
+  console.log(m("    @use '@mastorscdn/core' as mc;"));
+  console.log('');
+}
+
+function guideVite(flavour) {
+  const label = { 'vite-vue': 'Vite + Vue', 'vite-react': 'Vite + React', 'vite': 'Vite' }[flavour] || 'Vite';
+  console.log(b(g(`  ✔  ${label} detected`)));
+  console.log('');
+  console.log('  Add to ' + c('vite.config.js') + ':');
+  console.log('');
+  console.log(gr("    import path from 'path';"));
+  console.log(gr("    export default defineConfig({"));
+  console.log(gr("      css: {"));
+  console.log(gr("        preprocessorOptions: {"));
+  console.log(gr("          scss: {"));
+  console.log(gr("            api: 'modern-compiler',"));
+  console.log(gr("            loadPaths: [path.resolve(__dirname, 'node_modules')],"));
+  console.log(gr("          },"));
+  console.log(gr("        },"));
+  console.log(gr("      },"));
+  console.log(gr("    });"));
+  console.log('');
+  console.log(m("    @use '@mastorscdn/core' as mc;"));
+  console.log('');
+}
+
+function guideNuxt() {
+  console.log(b(g('  ✔  Nuxt detected')));
+  console.log('');
+  console.log('  Add to ' + c('nuxt.config.ts') + ':');
+  console.log('');
+  console.log(gr("    export default defineNuxtConfig({"));
+  console.log(gr("      vite: {"));
+  console.log(gr("        css: {"));
+  console.log(gr("          preprocessorOptions: {"));
+  console.log(gr("            scss: {"));
+  console.log(gr("              api: 'modern-compiler',"));
+  console.log(gr("              loadPaths: ['./node_modules'],"));
+  console.log(gr("            },"));
+  console.log(gr("          },"));
+  console.log(gr("        },"));
+  console.log(gr("      },"));
+  console.log(gr("    });"));
+  console.log('');
+  console.log(m("    @use '@mastorscdn/core' as mc;"));
+  console.log('');
+}
+
+function guideAstro() {
+  console.log(b(g('  ✔  Astro detected')));
+  console.log('');
+  console.log('  Add to ' + c('astro.config.mjs') + ':');
+  console.log('');
+  console.log(gr("    import path from 'path';"));
+  console.log(gr("    export default defineConfig({"));
+  console.log(gr("      vite: {"));
+  console.log(gr("        css: { preprocessorOptions: { scss: {"));
+  console.log(gr("          api: 'modern-compiler',"));
+  console.log(gr("          loadPaths: [path.resolve('./node_modules')],"));
+  console.log(gr("        } } },"));
+  console.log(gr("      },"));
+  console.log(gr("    });"));
+  console.log('');
+  console.log(m("    @use '@mastorscdn/core' as mc;"));
+  console.log('');
+}
+
+function guideSvelteKit() {
+  console.log(b(g('  ✔  SvelteKit detected')));
+  console.log('');
+  console.log('  Add to ' + c('vite.config.js') + ':');
+  console.log('');
+  console.log(gr("    import path from 'path';"));
+  console.log(gr("    export default { plugins: [sveltekit()],"));
+  console.log(gr("      css: { preprocessorOptions: { scss: {"));
+  console.log(gr("        api: 'modern-compiler',"));
+  console.log(gr("        loadPaths: [path.resolve('./node_modules')],"));
+  console.log(gr("      } } },"));
+  console.log(gr("    };"));
+  console.log('');
+  console.log(m("    @use '@mastorscdn/core' as mc;"));
+  console.log('');
+}
+
+function guideRemix() {
+  console.log(b(g('  ✔  Remix detected')));
+  console.log('');
+  console.log('  Add to ' + c('vite.config.ts') + ' css section:');
+  console.log('');
+  console.log(gr("    css: { preprocessorOptions: { scss: {"));
+  console.log(gr("      api: 'modern-compiler',"));
+  console.log(gr("      loadPaths: ['./node_modules'],"));
+  console.log(gr("    } } },"));
+  console.log('');
+  console.log(m("    @use '@mastorscdn/core' as mc;"));
+  console.log('');
+}
+
+function guideAngular() {
+  console.log(b(g('  ✔  Angular detected')));
+  console.log('');
+  console.log('  In ' + c('angular.json') + ' under build > options:');
+  console.log('');
+  console.log(gr('    "stylePreprocessorOptions": {'));
+  console.log(gr('      "includePaths": ["node_modules"]'));
+  console.log(gr('    }'));
+  console.log('');
+  console.log(m("    @use '@mastorscdn/core' as mc;"));
+  console.log('');
+}
+
+// ── Write mc.config.js ────────────────────────────────────────────────────────
+function writeMcConfig(framework) {
+  const configPath = path.join(ROOT, 'mc.config.js');
+  if (fs.existsSync(configPath)) return;
+
+  const content = `// =============================================================================
+// mc.config.js — Mastors Core Configuration Reference
+// Auto-generated by @mastorscdn/core on install
+// Detected framework: ${framework}
+//
+// Copy the relevant snippet from this file into your bundler config.
+// Full docs: https://mastorscdn.kehem.com/
+// =============================================================================
+
+/** @type {import('@mastorscdn/core').McConfig} */
+const mcConfig = {
+  // Add to your bundler's scss preprocessorOptions:
+  loadPaths: ['./node_modules'],
+
+  // Override Mastors tokens in SCSS:
+  //   @use '@mastorscdn/core' with (
+  //     $enable-dark-theme:   true,
+  //     $enable-utilities:    true,
+  //     $mastors-prefix:      'mc',
+  //   );
+};
+
+module.exports = mcConfig;
+`;
+
+  try { fs.writeFileSync(configPath, content, 'utf8'); } catch (_) {}
+}
+
+// ── Footer ────────────────────────────────────────────────────────────────────
+function footer(framework) {
+  console.log(b('  ─────────────────────────────────────────────'));
+  console.log('');
+  console.log('  ' + b('In any .scss file:'));
+  console.log('');
+  console.log(m("    @use '@mastorscdn/core' as mc;"));
+  console.log('');
+  console.log(gr('    .card {'));
+  console.log(gr("      color: mc.color('primary');"));
+  console.log(gr("      border-radius: mc.radius('lg');"));
+  console.log(gr("      box-shadow: mc.shadow('md');"));
+  console.log(gr("      @include mc.up('md') { padding: 2rem; }"));
+  console.log(gr('    }'));
+  console.log('');
+  console.log('  ' + b('Docs:') + ' ' + c('https://mastorscdn.kehem.com/'));
+  console.log('  ' + b('npm:')  + ' ' + c('https://www.npmjs.com/package/@mastorscdn/core'));
+  console.log('');
+  if (framework !== 'node') {
+    console.log('  ' + y('📄 mc.config.js written to your project root.'));
+    console.log('');
+  }
+  console.log(b(c('  Happy styling with Mastors Core! 🚀')));
+  console.log('');
+}
+
+// ── Main ──────────────────────────────────────────────────────────────────────
+function main() {
+  if (process.env.CI && process.env.MASTORS_SILENT) return;
+
+  const pkg       = getUserPkg();
+  const framework = detectFramework(pkg);
+
+  banner();
+  console.log(`  ${b('Detected environment:')} ${g(framework)}`);
+  console.log('');
+
+  switch (framework) {
+    case 'next':        guideNext();             break;
+    case 'nuxt':        guideNuxt();             break;
+    case 'astro':       guideAstro();            break;
+    case 'sveltekit':
+    case 'svelte':      guideSvelteKit();        break;
+    case 'remix':       guideRemix();            break;
+    case 'vite-vue':    guideVite('vite-vue');   break;
+    case 'vite-react':  guideVite('vite-react'); break;
+    case 'vite':        guideVite('vite');       break;
+    case 'angular':     guideAngular();          break;
+    default:            guideNode();             break;
+  }
+
+  if (framework !== 'node') writeMcConfig(framework);
+  footer(framework);
+}
+
+main();

package/scss/_index.scss

@@ -107,3 +107,17 @@
 
 // --- Abstracts ---
 @forward 'abstracts';
+
+// --- CSS Output Modules ---
+// These are forwarded so that `@use '@mastorscdn/core' with (...)` emits
+// actual CSS (themes, variables, reset, utilities, etc.).
+// Without these forwards the _index.scss barrel is a Sass-API-only file
+// and no CSS variables or theme tokens are written to the stylesheet.
+@forward 'vendors';
+@forward 'base';
+@forward 'themes';
+@forward 'accessibility';
+@forward 'helpers';
+@forward 'generators';
+@forward 'utilities';
+@forward 'mixins/css-vars';

package/scss/accessibility/_a11y.scss

@@ -41,7 +41,7 @@
   left: 1rem;
   z-index: 9999;
   padding: 0.5rem 1rem;
-  background: var(--mastors-color-primary, #2563eb);
+  background: var(--#{cfg.$mastors-prefix}-color-primary, #2563eb);
   color: #ffffff;
   border-radius: 0 0 8px 8px;
   font-weight: 600;
@@ -58,7 +58,7 @@
 // --- Focus Visible: global keyboard nav ---
 @if cfg.$enable-focus-visible {
   :focus-visible {
-    outline: 3px solid var(--mastors-border-focus, #2563eb);
+    outline: 3px solid var(--#{cfg.$mastors-prefix}-border-focus, #2563eb);
     outline-offset: 2px;
     border-radius: 2px;
   }
@@ -92,6 +92,6 @@
 
 // --- Keyboard navigation indicator ---
 .mastors-keyboard-nav *:focus {
-  outline: 3px solid var(--mastors-border-focus, #2563eb);
+  outline: 3px solid var(--#{cfg.$mastors-prefix}-border-focus, #2563eb);
   outline-offset: 2px;
 }

package/scss/base/_reset.scss

@@ -34,8 +34,8 @@ html {
 body {
   margin: 0;
   min-height: 100vh;
-  background-color: var(--mastors-bg-body, #ffffff);
-  color: var(--mastors-text-primary, #111827);
+  background-color: var(--#{cfg.$mastors-prefix}-bg-body, #ffffff);
+  color: var(--#{cfg.$mastors-prefix}-text-primary, #111827);
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -107,13 +107,13 @@ button,
 input::-moz-placeholder,
 textarea::-moz-placeholder {
   opacity: 1;
-  color: var(--mastors-text-muted, #6b7280);
+  color: var(--#{cfg.$mastors-prefix}-text-muted, #6b7280);
 }
 
 input::placeholder,
 textarea::placeholder {
   opacity: 1;
-  color: var(--mastors-text-muted, #6b7280);
+  color: var(--#{cfg.$mastors-prefix}-text-muted, #6b7280);
 }
 
 textarea { resize: vertical; }
@@ -149,7 +149,7 @@ hr {
   height: 0;
   color: inherit;
   border-top-width: 1px;
-  border-color: var(--mastors-border-default, #e5e7eb);
+  border-color: var(--#{cfg.$mastors-prefix}-border-default, #e5e7eb);
   margin: 0;
 }
 
@@ -173,6 +173,6 @@ svg {
 
 // --- Selection ---
 ::selection {
-  background-color: var(--mastors-color-primary, #2563eb);
+  background-color: var(--#{cfg.$mastors-prefix}-color-primary, #2563eb);
   color: #ffffff;
 }

package/scss/helpers/_states.scss

@@ -3,6 +3,8 @@
 // Reusable state classes for hover, focus, active, disabled
 // =============================================================================
 
+@use '../config/settings' as cfg;
+
 // --- Interactive base ---
 .mastors-interactive {
   cursor: pointer;
@@ -65,7 +67,7 @@
     100% { background-position: -200% 0; }
   }
 
-  [data-theme='dark'] & {
+  [#{cfg.$mastors-theme-attr}='dark'] & {
     background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
     background-size: 200% 100%;
   }

package/scss/mixins/_css-vars.scss

@@ -75,3 +75,10 @@
     @include generate-all-vars;
   }
 }
+
+// --- Auto-emit when this module is @forwarded from _index.scss ---
+// When a consumer does `@use '@mastorscdn/core' with (...)`, this top-level
+// block ensures CSS variables are written without needing a separate @include.
+@if cfg.$enable-css-variables {
+  @include generate-all-vars;
+}

package/scss/themes/_dark.scss

@@ -5,37 +5,37 @@
 @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;
+  --#{cfg.$mastors-prefix}-text-primary:     #f9fafb;
+  --#{cfg.$mastors-prefix}-text-secondary:   #e5e7eb;
+  --#{cfg.$mastors-prefix}-text-muted:       #9ca3af;
+  --#{cfg.$mastors-prefix}-text-disabled:    #6b7280;
+  --#{cfg.$mastors-prefix}-text-inverse:     #111827;
+
+  --#{cfg.$mastors-prefix}-bg-body:          #0f172a;
+  --#{cfg.$mastors-prefix}-bg-subtle:        #1e293b;
+  --#{cfg.$mastors-prefix}-bg-muted:         #334155;
+  --#{cfg.$mastors-prefix}-bg-inverse:       #f9fafb;
+
+  --#{cfg.$mastors-prefix}-border-default:   #334155;
+  --#{cfg.$mastors-prefix}-border-strong:    #475569;
+  --#{cfg.$mastors-prefix}-border-focus:     #60a5fa;
+
+  --#{cfg.$mastors-prefix}-surface:          #1e293b;
+  --#{cfg.$mastors-prefix}-surface-raised:   #334155;
+  --#{cfg.$mastors-prefix}-surface-overlay:  rgba(15, 23, 42, 0.95);
+
+  --#{cfg.$mastors-prefix}-shadow-ambient:   0 1px 3px rgba(0, 0, 0, 0.50);
+
+  --#{cfg.$mastors-prefix}-color-primary:    #60a5fa;
+  --#{cfg.$mastors-prefix}-color-secondary:  #a78bfa;
+  --#{cfg.$mastors-prefix}-color-accent:     #38bdf8;
+  --#{cfg.$mastors-prefix}-color-success:    #4ade80;
+  --#{cfg.$mastors-prefix}-color-warning:    #fbbf24;
+  --#{cfg.$mastors-prefix}-color-danger:     #f87171;
+  --#{cfg.$mastors-prefix}-color-info:       #22d3ee;
+
+  --#{cfg.$mastors-prefix}-scrollbar-thumb:  rgba(255, 255, 255, 0.2);
+  --#{cfg.$mastors-prefix}-scrollbar-track:  transparent;
 }
 
 // Attribute-based dark mode