@mastors/core 1.1.0 → 2.0.0

package/scss/tokens/_typography.scss

@@ -21,9 +21,9 @@ $font-size-tokens: (
 ) !default;
 
 $font-family-tokens: (
-  "sans":  (system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", sans-serif),
-  "serif": ("Georgia", "Cambria", "Times New Roman", "Times", serif),
-  "mono":  (ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace),
+  "sans":  (system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif),
+  "serif": (Georgia, Cambria, "Times New Roman", Times, serif),
+  "mono":  (ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace),
 ) !default;
 
 $font-weight-tokens: (
@@ -50,14 +50,15 @@ $line-height-tokens: (
 $letter-spacing-tokens: (
   "tighter": -0.05em,
   "tight":   -0.025em,
-  "normal":   0,
+  "normal":   0em,
   "wide":     0.025em,
   "wider":    0.05em,
   "widest":   0.1em,
 ) !default;
 
-@function font-size($key) { @return map.get($font-size-tokens, $key); }
-@function font-family($key) { @return map.get($font-family-tokens, $key); }
-@function font-weight($key) { @return map.get($font-weight-tokens, $key); }
-@function line-height($key) { @return map.get($line-height-tokens, $key); }
-@function letter-spacing($key) { @return map.get($letter-spacing-tokens, $key); }
+// Accessors
+@function font-size($key)        { @return map.get($font-size-tokens, $key); }
+@function font-family($key)      { @return map.get($font-family-tokens, $key); }
+@function font-weight($key)      { @return map.get($font-weight-tokens, $key); }
+@function line-height($key)      { @return map.get($line-height-tokens, $key); }
+@function letter-spacing($key)   { @return map.get($letter-spacing-tokens, $key); }

package/scss/utilities/_borders.scss

@@ -2,7 +2,6 @@
 // Border width, style, and radius utility classes.
 // ─────────────────────────────────────────────────────────────
 
-@use "sass:list";
 @use "../tokens/color"  as ct;
 @use "../tokens/radii"  as ra;
 
@@ -37,7 +36,10 @@
 // Shorthand: .rounded = base radius
 .rounded { border-radius: ra.radius("base"); }
 
-// Directional border radius
+// Directional border radius — all sides, full token scale
+// Generates: .rounded-t-{key}, .rounded-b-{key}, .rounded-l-{key}, .rounded-r-{key}
+// (no border-radius shorthand here — directional rules must not have corner rounding
+//  on the unaffected corners, so border-radius is applied per-corner only)
 $-radius-sides: (
   "t": ("border-top-left-radius",    "border-top-right-radius"),
   "b": ("border-bottom-left-radius", "border-bottom-right-radius"),
@@ -48,8 +50,8 @@ $-radius-sides: (
 @each $side, $props in $-radius-sides {
   @each $key, $val in ra.$radius-tokens {
     .rounded-#{$side}-#{$key} {
-      #{list.nth($props, 1)}: $val;
-      #{list.nth($props, 2)}: $val;
+      #{nth($props, 1)}: $val;
+      #{nth($props, 2)}: $val;
     }
   }
 }

package/scss/utilities/_colors.scss

@@ -13,7 +13,7 @@
 
 // Text color utilities — primitives (primary, neutral, success, warning, error, info)
 $-text-palettes: "primary", "neutral", "success", "warning", "error", "info";
-$-text-shades: "50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950";
+$-text-shades:   "50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950";
 
 @each $palette in $-text-palettes {
   @each $shade in $-text-shades {

package/scss/utilities/_index.scss

@@ -14,7 +14,3 @@
 @forward "pointer-events";
 @forward "z-index";
 @forward "transform";
-@forward "typography";
-@forward "layout";
-@forward "interaction";
-@forward "animation";

package/scss/utilities/_sizing.scss

@@ -15,7 +15,7 @@
 }
 
 // Min / max width
-.min-w-0    { min-width: 0; }
+.min-w-0    { min-width: 0px; }
 .min-w-full { min-width: 100%; }
 .min-w-min  { min-width: min-content; }
 .min-w-max  { min-width: max-content; }
@@ -29,7 +29,7 @@
 .max-w-prose { max-width: 65ch; }
 
 // Min / max height
-.min-h-0      { min-height: 0; }
+.min-h-0      { min-height: 0px; }
 .min-h-full   { min-height: 100%; }
 .min-h-screen { min-height: 100vh; }
 .min-h-svh    { min-height: 100svh; }

package/scss/variables/_global.scss

@@ -2,7 +2,7 @@
 // Top-level global SCSS variables (prefix, base font size, etc.)
 // ─────────────────────────────────────────────────────────────
 
-$mastors-prefix: "" !default; // e.g. "m-" → .m-flex
-$base-font-size: 16px !default;
-$base-line-height: 1.5 !default;
-$base-font-family: system-ui, -apple-system, sans-serif !default;
+$mastors-prefix:      ""      !default; // e.g. "m-" → .m-flex
+$base-font-size:      16px    !default;
+$base-line-height:    1.5     !default;
+$base-font-family:    system-ui, -apple-system, sans-serif !default;

package/scss/variables/_grid.scss

@@ -2,6 +2,6 @@
 // Grid system configuration variables.
 // ─────────────────────────────────────────────────────────────
 
-$grid-columns: 12 !default;
-$grid-gutter: 1.5rem !default;
-$grid-row-gap: 1.5rem !default;
+$grid-columns:   12   !default;
+$grid-gutter:    1.5rem !default;
+$grid-row-gap:   1.5rem !default;

package/scss/vendors/_index.scss

@@ -4,11 +4,13 @@
 
 // INTENTIONAL STUB — reserved for third-party CSS overrides.
 // It is deliberately empty at v1.0.
+//
 // How to add a vendor override:
 //   1. Create a partial: vendors/_<vendor-name>-overrides.scss
 //   2. Forward it here: @forward "<vendor-name>-overrides";
 //   3. Keep overrides scoped and minimal — prefer custom properties over
 //      re-declarations wherever the vendor library supports them.
+//
 // Example future entries:
 //   @forward "normalize-overrides";
 //   @forward "floating-ui-overrides";

package/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @mastors/core — src/index.ts
+ * JavaScript/TypeScript entry point.
+ *
+ * Exports runtime token values and TypeScript types for
+ * CSS-in-JS consumers, design tooling, and runtime token access.
+ * SCSS is imported separately via the scss/ directory.
+ */
+
+export * from './types'
+export * from './tokens'

package/src/tokens.ts

@@ -0,0 +1,314 @@
+/**
+ * @mastors/core — src/tokens.ts
+ * JavaScript/TypeScript mirror of the SCSS design token maps.
+ *
+ * These values are the single source of truth for CSS-in-JS consumers,
+ * design tooling integrations, and runtime token access.
+ *
+ * Keep in sync with packages/core/scss/tokens/ when token values change.
+ * Future: a build-time extractor will auto-generate this from the SCSS maps.
+ */
+
+// ─── Color ───────────────────────────────────────────────────────────────────
+
+const colorTokens = {
+  primary: {
+    '50':  '#eff6ff',
+    '100': '#dbeafe',
+    '200': '#bfdbfe',
+    '300': '#93c5fd',
+    '400': '#60a5fa',
+    '500': '#3b82f6',
+    '600': '#2563eb',
+    '700': '#1d4ed8',
+    '800': '#1e40af',
+    '900': '#1e3a8a',
+    '950': '#172554',
+  },
+  neutral: {
+    '50':  '#f9fafb',
+    '100': '#f3f4f6',
+    '200': '#e5e7eb',
+    '300': '#d1d5db',
+    '400': '#9ca3af',
+    '500': '#6b7280',
+    '600': '#4b5563',
+    '700': '#374151',
+    '800': '#1f2937',
+    '900': '#111827',
+    '950': '#030712',
+  },
+  success: {
+    '50':  '#f0fdf4',
+    '100': '#dcfce7',
+    '200': '#bbf7d0',
+    '300': '#86efac',
+    '400': '#4ade80',
+    '500': '#22c55e',
+    '600': '#16a34a',
+    '700': '#15803d',
+    '800': '#166534',
+    '900': '#14532d',
+    '950': '#052e16',
+  },
+  warning: {
+    '50':  '#fffbeb',
+    '100': '#fef3c7',
+    '200': '#fde68a',
+    '300': '#fcd34d',
+    '400': '#fbbf24',
+    '500': '#f59e0b',
+    '600': '#d97706',
+    '700': '#b45309',
+    '800': '#92400e',
+    '900': '#78350f',
+    '950': '#451a03',
+  },
+  error: {
+    '50':  '#fef2f2',
+    '100': '#fee2e2',
+    '200': '#fecaca',
+    '300': '#fca5a5',
+    '400': '#f87171',
+    '500': '#ef4444',
+    '600': '#dc2626',
+    '700': '#b91c1c',
+    '800': '#991b1b',
+    '900': '#7f1d1d',
+    '950': '#450a0a',
+  },
+  info: {
+    '50':  '#ecfeff',
+    '100': '#cffafe',
+    '200': '#a5f3fc',
+    '300': '#67e8f9',
+    '400': '#22d3ee',
+    '500': '#06b6d4',
+    '600': '#0891b2',
+    '700': '#0e7490',
+    '800': '#155e75',
+    '900': '#164e63',
+    '950': '#083344',
+  },
+  white:       '#ffffff',
+  black:       '#000000',
+  transparent: 'transparent',
+} as const
+
+// ─── Spacing ─────────────────────────────────────────────────────────────────
+
+const spacingTokens = {
+  '0':    '0px',
+  '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',
+} as const
+
+// ─── Typography ──────────────────────────────────────────────────────────────
+
+const fontSizeTokens = {
+  'xs':   '0.75rem',
+  'sm':   '0.875rem',
+  'base': '1rem',
+  'lg':   '1.125rem',
+  'xl':   '1.25rem',
+  '2xl':  '1.5rem',
+  '3xl':  '1.875rem',
+  '4xl':  '2.25rem',
+  '5xl':  '3rem',
+  '6xl':  '3.75rem',
+  '7xl':  '4.5rem',
+  '8xl':  '6rem',
+  '9xl':  '8rem',
+} as const
+
+const fontFamilyTokens = {
+  sans:  'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
+  mono:  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+} as const
+
+const fontWeightTokens = {
+  thin:       '100',
+  extralight: '200',
+  light:      '300',
+  normal:     '400',
+  medium:     '500',
+  semibold:   '600',
+  bold:       '700',
+  extrabold:  '800',
+  black:      '900',
+} as const
+
+const lineHeightTokens = {
+  none:    '1',
+  tight:   '1.25',
+  snug:    '1.375',
+  normal:  '1.5',
+  relaxed: '1.625',
+  loose:   '2',
+} as const
+
+const letterSpacingTokens = {
+  tighter: '-0.05em',
+  tight:   '-0.025em',
+  normal:  '0em',
+  wide:    '0.025em',
+  wider:   '0.05em',
+  widest:  '0.1em',
+} as const
+
+// ─── Border radius ───────────────────────────────────────────────────────────
+
+const radiusTokens = {
+  none:  '0px',
+  sm:    '0.125rem',
+  base:  '0.25rem',
+  md:    '0.375rem',
+  lg:    '0.5rem',
+  xl:    '0.75rem',
+  '2xl': '1rem',
+  '3xl': '1.5rem',
+  full:  '9999px',
+} as const
+
+// ─── Shadows ─────────────────────────────────────────────────────────────────
+
+const shadowTokens = {
+  xs:    '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  sm:    '0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10)',
+  md:    '0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)',
+  lg:    '0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)',
+  xl:    '0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)',
+  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+  none:  'none',
+} as const
+
+// ─── Duration & easing ───────────────────────────────────────────────────────
+
+const durationTokens = {
+  '75':   '75ms',
+  '100':  '100ms',
+  '150':  '150ms',
+  '200':  '200ms',
+  '300':  '300ms',
+  '500':  '500ms',
+  '700':  '700ms',
+  '1000': '1000ms',
+} as const
+
+const easingTokens = {
+  linear:  'linear',
+  in:      'cubic-bezier(0.4, 0, 1, 1)',
+  out:     'cubic-bezier(0, 0, 0.2, 1)',
+  'in-out':'cubic-bezier(0.4, 0, 0.2, 1)',
+  bounce:  'cubic-bezier(0.34, 1.56, 0.64, 1)',
+} as const
+
+// ─── Z-index ─────────────────────────────────────────────────────────────────
+
+const zIndexTokens = {
+  base:     0,
+  raised:   10,
+  dropdown: 100,
+  sticky:   200,
+  overlay:  300,
+  modal:    400,
+  toast:    500,
+  tooltip:  600,
+  max:      9999,
+} as const
+
+// ─── Opacity ─────────────────────────────────────────────────────────────────
+
+const opacityTokens = {
+  '0':   0,
+  '5':   0.05,
+  '10':  0.1,
+  '15':  0.15,
+  '20':  0.2,
+  '25':  0.25,
+  '30':  0.3,
+  '40':  0.4,
+  '50':  0.5,
+  '60':  0.6,
+  '70':  0.7,
+  '75':  0.75,
+  '80':  0.8,
+  '90':  0.9,
+  '95':  0.95,
+  '100': 1,
+} as const
+
+// ─── Exported tokens object ───────────────────────────────────────────────────
+
+export const tokens = {
+  color:         colorTokens,
+  spacing:       spacingTokens,
+  fontSize:      fontSizeTokens,
+  fontFamily:    fontFamilyTokens,
+  fontWeight:    fontWeightTokens,
+  lineHeight:    lineHeightTokens,
+  letterSpacing: letterSpacingTokens,
+  radius:        radiusTokens,
+  shadow:        shadowTokens,
+  duration:      durationTokens,
+  easing:        easingTokens,
+  zIndex:        zIndexTokens,
+  opacity:       opacityTokens,
+} as const
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export type Tokens         = typeof tokens
+export type ColorPalette   = keyof typeof colorTokens
+export type SpacingKey     = keyof typeof spacingTokens
+export type FontSizeKey    = keyof typeof fontSizeTokens
+export type FontFamilyKey  = keyof typeof fontFamilyTokens
+export type FontWeightKey  = keyof typeof fontWeightTokens
+export type LineHeightKey  = keyof typeof lineHeightTokens
+export type LetterSpacingKey = keyof typeof letterSpacingTokens
+export type RadiusKey      = keyof typeof radiusTokens
+export type ShadowKey      = keyof typeof shadowTokens
+export type DurationKey    = keyof typeof durationTokens
+export type EasingKey      = keyof typeof easingTokens
+export type ZIndexKey      = keyof typeof zIndexTokens
+export type OpacityKey     = keyof typeof opacityTokens
+
+// Convenience: extract all shade keys from a palette (e.g. '50' | '100' | ...)
+export type ColorShade<P extends ColorPalette> =
+  typeof colorTokens[P] extends Record<string, string>
+    ? keyof typeof colorTokens[P]
+    : never

package/src/types.ts

@@ -0,0 +1,52 @@
+/**
+ * @mastors/core — src/types.ts
+ * Shared TypeScript type definitions for the Mastors ecosystem.
+ */
+
+export type MastorsConfig = {
+  prefix?: string
+  important?: boolean
+  darkMode?: 'class' | 'media'
+  rtl?: boolean
+}
+
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+
+export type ThemeMode = 'light' | 'dark' | 'system'
+
+export type ColorPaletteName = 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'info'
+export type ColorShadeValue  = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950'
+
+export type SpacingScale =
+  | '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4'
+  | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16'
+  | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '52'
+  | '56' | '60' | '64' | '72' | '80' | '96'
+
+export type RadiusScale = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+
+export type ShadowScale = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none'
+
+export type ZIndexScale = 'base' | 'raised' | 'dropdown' | 'sticky' | 'overlay' | 'modal' | 'toast' | 'tooltip' | 'max'
+
+export type DurationScale = '75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000'
+
+export type EasingScale = 'linear' | 'in' | 'out' | 'in-out' | 'bounce'
+
+export type FontSizeScale =
+  | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
+  | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'
+
+export type FontFamilyScale = 'sans' | 'serif' | 'mono'
+
+export type FontWeightScale =
+  | 'thin' | 'extralight' | 'light' | 'normal' | 'medium'
+  | 'semibold' | 'bold' | 'extrabold' | 'black'
+
+export type LineHeightScale = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose'
+
+export type LetterSpacingScale = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest'
+
+export type OpacityScale =
+  | '0' | '5' | '10' | '15' | '20' | '25' | '30' | '40'
+  | '50' | '60' | '70' | '75' | '80' | '90' | '95' | '100'

package/postinstall.js

@@ -1,41 +0,0 @@
-#!/usr/bin/env node
-// postinstall.js — Mastors ecosystem welcome script
-// Runs automatically after: npm install @mastors/core
-
-'use strict'
-
-const RESET  = '\x1b[0m'
-const BOLD   = '\x1b[1m'
-const DIM    = '\x1b[2m'
-const GREEN  = '\x1b[32m'
-const CYAN   = '\x1b[36m'
-const YELLOW = '\x1b[33m'
-const WHITE  = '\x1b[37m'
-const GRAY   = '\x1b[90m'
-
-function line(char = '─', len = 52) {
-  return GRAY + char.repeat(len) + RESET
-}
-
-const message = `
-${line()}
-${BOLD}${WHITE}  ✦  Thanks for installing Mastors!${RESET}
-${line()}
-
-${BOLD}  Installed:${RESET}
-  ${GREEN}✔${RESET} @mastors/core
-
-${BOLD}  Optional packages:${RESET}
-  ${GREEN}✔${RESET} @mastors/flexer      ${DIM}npm install @mastors/flexer${RESET}
-  ${GREEN}✔${RESET} @mastors/gridder     ${DIM}npm install @mastors/gridder${RESET}
-  ${CYAN}◌${RESET} @mastors/typography  ${GRAY}coming soon${RESET}
-  ${CYAN}◌${RESET} @mastors/themes      ${GRAY}coming soon${RESET}
-  ${CYAN}◌${RESET} @mastors/animator    ${GRAY}coming soon${RESET}
-
-${BOLD}  Documentation:${RESET}
-  ${YELLOW}https://mastorscdn.kehem.com${RESET}
-
-${line()}
-`
-
-process.stdout.write(message)