@moon-inferno/core 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,181 @@
+/**
+ * Moon-Inferno Core Design Tokens
+ * Framework-independent token definitions for colors, typography, spacing, shadows, and retro visual effects.
+ */
+declare const colors: {
+    readonly inferno: {
+        readonly 50: "#FFF5F0";
+        readonly 100: "#FFE6D9";
+        readonly 200: "#FFBF9B";
+        readonly 300: "#FF975E";
+        readonly 400: "#FF7026";
+        readonly 500: "#FF4D00";
+        readonly 600: "#FF2E00";
+        readonly 700: "#CC1F00";
+        readonly 800: "#991200";
+        readonly 900: "#660900";
+        readonly 950: "#3D0300";
+    };
+    readonly moon: {
+        readonly 50: "#F8FAFC";
+        readonly 100: "#F1F5F9";
+        readonly 200: "#E2E8F0";
+        readonly 300: "#CBD5E1";
+        readonly 400: "#94A3B8";
+        readonly 500: "#64748B";
+        readonly 600: "#475569";
+        readonly 700: "#334155";
+        readonly 800: "#1E293B";
+        readonly 900: "#0F172A";
+        readonly 950: "#020617";
+    };
+    readonly obsidian: {
+        readonly 900: "#120F16";
+        readonly 950: "#0A090D";
+    };
+    readonly status: {
+        readonly success: "#00FF66";
+        readonly warning: "#FFCC00";
+        readonly error: "#FF0033";
+        readonly info: "#00E5FF";
+    };
+};
+declare const typography: {
+    readonly fontFamily: {
+        readonly sans: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif";
+        readonly mono: "\"JetBrains Mono\", \"Fira Code\", \"Courier New\", Courier, monospace";
+        readonly pixel: "\"Press Start 2P\", \"VT323\", \"Courier New\", monospace";
+    };
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+    };
+    readonly fontWeight: {
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+    readonly lineHeight: {
+        readonly tight: "1.2";
+        readonly normal: "1.5";
+        readonly relaxed: "1.75";
+    };
+};
+declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "0.25rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 8: "2rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 16: "4rem";
+};
+declare const radii: {
+    readonly none: "0px";
+    readonly sm: "2px";
+    readonly base: "4px";
+    readonly md: "6px";
+    readonly lg: "8px";
+    readonly full: "9999px";
+};
+declare const shadows: {
+    readonly none: "none";
+    readonly infernoGlow: "0 0 12px rgba(255, 77, 0, 0.4), 0 0 24px rgba(255, 77, 0, 0.15)";
+    readonly cyanGlow: "0 0 12px rgba(0, 229, 255, 0.4), 0 0 24px rgba(0, 229, 255, 0.15)";
+    readonly pixelShadow: "3px 3px 0px #0A090D";
+    readonly retroBox: "4px 4px 0px rgba(0, 0, 0, 0.9), inset -2px -2px 0px rgba(255, 255, 255, 0.1)";
+};
+declare const retroEffects: {
+    readonly scanlineOpacity: "0.15";
+    readonly crtFlickerSpeed: "0.15s";
+    readonly pixelBorderWidth: "2px";
+};
+declare const zIndex: {
+    readonly hide: -1;
+    readonly auto: "auto";
+    readonly base: 0;
+    readonly docked: 10;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly banner: 1200;
+    readonly overlay: 1300;
+    readonly modal: 1400;
+    readonly popover: 1500;
+    readonly skipLink: 1600;
+    readonly toast: 1700;
+    readonly tooltip: 1800;
+};
+
+/**
+ * Generates Moon-Inferno CSS Custom Property key-value pairs.
+ */
+declare function getCSSVariableObject(): Record<string, string>;
+/**
+ * Converts CSS variable object to string format for CSS rules.
+ */
+declare function getCSSVariableString(): string;
+
+/**
+ * Accessibility Focus Utilities
+ * Provides helpers for focus containment (focus traps), focus restoration, and tabbable elements.
+ */
+/**
+ * Returns all focusable elements within a given container.
+ */
+declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+/**
+ * Traps focus within a given container element.
+ * Useful for modal dialogs, drawers, and overlay menus.
+ */
+declare function trapFocus(container: HTMLElement, event: KeyboardEvent): void;
+/**
+ * Stores the previously focused element and provides a restoration function.
+ */
+declare function createFocusStore(): {
+    save(): void;
+    restore(): void;
+};
+
+/**
+ * Reduced Motion Helper
+ * Utility to check if user prefers reduced motion.
+ */
+/**
+ * Returns true if user has enabled prefers-reduced-motion in OS settings.
+ */
+declare function isReducedMotionPreferred(): boolean;
+/**
+ * Subscribes to changes in reduced motion user preferences.
+ */
+declare function onReducedMotionChange(callback: (reduced: boolean) => void): () => void;
+
+/**
+ * Keyboard Key Constants & Event Helpers
+ */
+declare const KEYS: {
+    readonly ENTER: "Enter";
+    readonly SPACE: " ";
+    readonly ESCAPE: "Escape";
+    readonly TAB: "Tab";
+    readonly ARROW_UP: "ArrowUp";
+    readonly ARROW_DOWN: "ArrowDown";
+    readonly ARROW_LEFT: "ArrowLeft";
+    readonly ARROW_RIGHT: "ArrowRight";
+    readonly HOME: "Home";
+    readonly END: "End";
+};
+declare function isKey(event: KeyboardEvent, key: keyof typeof KEYS): boolean;
+declare function isActionKey(event: KeyboardEvent): boolean;
+
+export { KEYS, colors, createFocusStore, getCSSVariableObject, getCSSVariableString, getFocusableElements, isActionKey, isKey, isReducedMotionPreferred, onReducedMotionChange, radii, retroEffects, shadows, spacing, trapFocus, typography, zIndex };

package/dist/index.js

@@ -0,0 +1,321 @@
+// src/tokens.ts
+var colors = {
+  // Infernal Palette (Solar Fire / Lava / Amber)
+  inferno: {
+    50: "#FFF5F0",
+    100: "#FFE6D9",
+    200: "#FFBF9B",
+    300: "#FF975E",
+    400: "#FF7026",
+    500: "#FF4D00",
+    // Primary Inferno Orange
+    600: "#FF2E00",
+    // Crimson Fire
+    700: "#CC1F00",
+    800: "#991200",
+    900: "#660900",
+    950: "#3D0300"
+  },
+  // Lunar Palette (Platinum / Silver / Ethereal Cyan)
+  moon: {
+    50: "#F8FAFC",
+    100: "#F1F5F9",
+    // Primary Text Light
+    200: "#E2E8F0",
+    300: "#CBD5E1",
+    400: "#94A3B8",
+    500: "#64748B",
+    600: "#475569",
+    700: "#334155",
+    800: "#1E293B",
+    900: "#0F172A",
+    950: "#020617"
+  },
+  // Obsidian Palette (Deep Space / CRT Backlight / Magma Shadow)
+  obsidian: {
+    900: "#120F16",
+    950: "#0A090D"
+    // Primary Dark Background
+  },
+  // Retro CRT Status Colors
+  status: {
+    success: "#00FF66",
+    // Neon Terminal Green
+    warning: "#FFCC00",
+    // Amber Warning
+    error: "#FF0033",
+    // Cyber Red
+    info: "#00E5FF"
+    // Neon Cyan
+  }
+};
+var typography = {
+  fontFamily: {
+    sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: '"JetBrains Mono", "Fira Code", "Courier New", Courier, monospace',
+    pixel: '"Press Start 2P", "VT323", "Courier New", monospace'
+  },
+  fontSize: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem",
+    // 18px
+    xl: "1.25rem",
+    // 20px
+    "2xl": "1.5rem",
+    // 24px
+    "3xl": "1.875rem",
+    // 30px
+    "4xl": "2.25rem"
+    // 36px
+  },
+  fontWeight: {
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700"
+  },
+  lineHeight: {
+    tight: "1.2",
+    normal: "1.5",
+    relaxed: "1.75"
+  }
+};
+var spacing = {
+  0: "0px",
+  1: "0.25rem",
+  // 4px
+  2: "0.5rem",
+  // 8px
+  3: "0.75rem",
+  // 12px
+  4: "1rem",
+  // 16px
+  5: "1.25rem",
+  // 20px
+  6: "1.5rem",
+  // 24px
+  8: "2rem",
+  // 32px
+  10: "2.5rem",
+  // 40px
+  12: "3rem",
+  // 48px
+  16: "4rem"
+  // 64px
+};
+var radii = {
+  none: "0px",
+  sm: "2px",
+  base: "4px",
+  md: "6px",
+  lg: "8px",
+  full: "9999px"
+};
+var shadows = {
+  none: "none",
+  infernoGlow: "0 0 12px rgba(255, 77, 0, 0.4), 0 0 24px rgba(255, 77, 0, 0.15)",
+  cyanGlow: "0 0 12px rgba(0, 229, 255, 0.4), 0 0 24px rgba(0, 229, 255, 0.15)",
+  pixelShadow: "3px 3px 0px #0A090D",
+  retroBox: "4px 4px 0px rgba(0, 0, 0, 0.9), inset -2px -2px 0px rgba(255, 255, 255, 0.1)"
+};
+var retroEffects = {
+  scanlineOpacity: "0.15",
+  crtFlickerSpeed: "0.15s",
+  pixelBorderWidth: "2px"
+};
+var zIndex = {
+  hide: -1,
+  auto: "auto",
+  base: 0,
+  docked: 10,
+  dropdown: 1e3,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800
+};
+
+// src/css-variables.ts
+function getCSSVariableObject() {
+  return {
+    // Colors - Inferno
+    "--mi-color-inferno-50": colors.inferno[50],
+    "--mi-color-inferno-100": colors.inferno[100],
+    "--mi-color-inferno-500": colors.inferno[500],
+    "--mi-color-inferno-600": colors.inferno[600],
+    "--mi-color-inferno-900": colors.inferno[900],
+    // Colors - Moon & Obsidian
+    "--mi-color-moon-50": colors.moon[50],
+    "--mi-color-moon-100": colors.moon[100],
+    "--mi-color-moon-400": colors.moon[400],
+    "--mi-color-moon-900": colors.moon[900],
+    "--mi-color-obsidian-900": colors.obsidian[900],
+    "--mi-color-obsidian-950": colors.obsidian[950],
+    // Status
+    "--mi-color-success": colors.status.success,
+    "--mi-color-warning": colors.status.warning,
+    "--mi-color-error": colors.status.error,
+    "--mi-color-info": colors.status.info,
+    // Typography
+    "--mi-font-sans": typography.fontFamily.sans,
+    "--mi-font-mono": typography.fontFamily.mono,
+    "--mi-font-pixel": typography.fontFamily.pixel,
+    // Spacing
+    "--mi-space-1": spacing[1],
+    "--mi-space-2": spacing[2],
+    "--mi-space-3": spacing[3],
+    "--mi-space-4": spacing[4],
+    "--mi-space-6": spacing[6],
+    "--mi-space-8": spacing[8],
+    // Radii
+    "--mi-radius-sm": radii.sm,
+    "--mi-radius-base": radii.base,
+    "--mi-radius-md": radii.md,
+    "--mi-radius-full": radii.full,
+    // Shadows & Glows
+    "--mi-shadow-glow": shadows.infernoGlow,
+    "--mi-shadow-pixel": shadows.pixelShadow,
+    // Focus Ring
+    "--mi-focus-ring-color": colors.inferno[500],
+    "--mi-focus-ring-width": "2px",
+    "--mi-focus-ring-offset": "2px",
+    // Z-Indices
+    "--mi-z-modal": String(zIndex.modal),
+    "--mi-z-toast": String(zIndex.toast),
+    "--mi-z-tooltip": String(zIndex.tooltip)
+  };
+}
+function getCSSVariableString() {
+  const vars = getCSSVariableObject();
+  return Object.entries(vars).map(([key, val]) => `${key}: ${val};`).join("\n  ");
+}
+
+// src/a11y/focus.ts
+var TABBABLE_SELECTOR = `
+  a[href],
+  button:not([disabled]),
+  area[href],
+  input:not([disabled]):not([type="hidden"]),
+  select:not([disabled]),
+  textarea:not([disabled]),
+  iframe,
+  object,
+  embed,
+  [tabindex]:not([tabindex="-1"]),
+  [contenteditable]
+`;
+function getFocusableElements(container) {
+  const elements = Array.from(container.querySelectorAll(TABBABLE_SELECTOR));
+  return elements.filter((el) => {
+    return (el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0) && getComputedStyle(el).visibility !== "hidden";
+  });
+}
+function trapFocus(container, event) {
+  if (event.key !== "Tab") return;
+  const focusables = getFocusableElements(container);
+  if (focusables.length === 0) {
+    event.preventDefault();
+    return;
+  }
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  const active = document.activeElement;
+  if (event.shiftKey) {
+    if (active === first || !container.contains(active)) {
+      last?.focus();
+      event.preventDefault();
+    }
+  } else {
+    if (active === last || !container.contains(active)) {
+      first?.focus();
+      event.preventDefault();
+    }
+  }
+}
+function createFocusStore() {
+  let previousElement = null;
+  return {
+    save() {
+      if (document.activeElement instanceof HTMLElement) {
+        previousElement = document.activeElement;
+      }
+    },
+    restore() {
+      if (previousElement && typeof previousElement.focus === "function") {
+        previousElement.focus();
+        previousElement = null;
+      }
+    }
+  };
+}
+
+// src/a11y/motion.ts
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function isReducedMotionPreferred() {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return false;
+  }
+  return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+function onReducedMotionChange(callback) {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return () => {
+    };
+  }
+  const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY);
+  const listener = (event) => callback(event.matches);
+  if (mediaQuery.addEventListener) {
+    mediaQuery.addEventListener("change", listener);
+    return () => mediaQuery.removeEventListener("change", listener);
+  }
+  return () => {
+  };
+}
+
+// src/a11y/keys.ts
+var KEYS = {
+  ENTER: "Enter",
+  SPACE: " ",
+  ESCAPE: "Escape",
+  TAB: "Tab",
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight",
+  HOME: "Home",
+  END: "End"
+};
+function isKey(event, key) {
+  return event.key === KEYS[key];
+}
+function isActionKey(event) {
+  return event.key === KEYS.ENTER || event.key === KEYS.SPACE;
+}
+export {
+  KEYS,
+  colors,
+  createFocusStore,
+  getCSSVariableObject,
+  getCSSVariableString,
+  getFocusableElements,
+  isActionKey,
+  isKey,
+  isReducedMotionPreferred,
+  onReducedMotionChange,
+  radii,
+  retroEffects,
+  shadows,
+  spacing,
+  trapFocus,
+  typography,
+  zIndex
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@moon-inferno/core",
+  "version": "0.1.0",
+  "description": "Framework-independent design tokens, CSS variables, responsive primitives, and accessibility utilities for Moon-Inferno.",
+  "license": "MIT",
+  "author": "Biagio Scaglia",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/biagio-scaglia/moon-inferno.git",
+    "directory": "packages/core"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "css",
+    "design-tokens",
+    "accessibility",
+    "wcag",
+    "retro",
+    "cyberpunk",
+    "moon-inferno"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/a11y/focus.ts

@@ -0,0 +1,83 @@
+/**
+ * Accessibility Focus Utilities
+ * Provides helpers for focus containment (focus traps), focus restoration, and tabbable elements.
+ */
+
+const TABBABLE_SELECTOR = `
+  a[href],
+  button:not([disabled]),
+  area[href],
+  input:not([disabled]):not([type="hidden"]),
+  select:not([disabled]),
+  textarea:not([disabled]),
+  iframe,
+  object,
+  embed,
+  [tabindex]:not([tabindex="-1"]),
+  [contenteditable]
+`;
+
+/**
+ * Returns all focusable elements within a given container.
+ */
+export function getFocusableElements(container: HTMLElement): HTMLElement[] {
+  const elements = Array.from(container.querySelectorAll<HTMLElement>(TABBABLE_SELECTOR));
+  return elements.filter((el) => {
+    return (
+      el.offsetWidth > 0 ||
+      el.offsetHeight > 0 ||
+      el.getClientRects().length > 0
+    ) && getComputedStyle(el).visibility !== 'hidden';
+  });
+}
+
+/**
+ * Traps focus within a given container element.
+ * Useful for modal dialogs, drawers, and overlay menus.
+ */
+export function trapFocus(container: HTMLElement, event: KeyboardEvent): void {
+  if (event.key !== 'Tab') return;
+
+  const focusables = getFocusableElements(container);
+  if (focusables.length === 0) {
+    event.preventDefault();
+    return;
+  }
+
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  const active = document.activeElement as HTMLElement | null;
+
+  if (event.shiftKey) {
+    if (active === first || !container.contains(active)) {
+      last?.focus();
+      event.preventDefault();
+    }
+  } else {
+    if (active === last || !container.contains(active)) {
+      first?.focus();
+      event.preventDefault();
+    }
+  }
+}
+
+/**
+ * Stores the previously focused element and provides a restoration function.
+ */
+export function createFocusStore() {
+  let previousElement: HTMLElement | null = null;
+
+  return {
+    save() {
+      if (document.activeElement instanceof HTMLElement) {
+        previousElement = document.activeElement;
+      }
+    },
+    restore() {
+      if (previousElement && typeof previousElement.focus === 'function') {
+        previousElement.focus();
+        previousElement = null;
+      }
+    },
+  };
+}

package/src/a11y/keys.ts

@@ -0,0 +1,24 @@
+/**
+ * Keyboard Key Constants & Event Helpers
+ */
+
+export const KEYS = {
+  ENTER: 'Enter',
+  SPACE: ' ',
+  ESCAPE: 'Escape',
+  TAB: 'Tab',
+  ARROW_UP: 'ArrowUp',
+  ARROW_DOWN: 'ArrowDown',
+  ARROW_LEFT: 'ArrowLeft',
+  ARROW_RIGHT: 'ArrowRight',
+  HOME: 'Home',
+  END: 'End',
+} as const;
+
+export function isKey(event: KeyboardEvent, key: keyof typeof KEYS): boolean {
+  return event.key === KEYS[key];
+}
+
+export function isActionKey(event: KeyboardEvent): boolean {
+  return event.key === KEYS.ENTER || event.key === KEYS.SPACE;
+}

package/src/a11y/motion.ts

@@ -0,0 +1,35 @@
+/**
+ * Reduced Motion Helper
+ * Utility to check if user prefers reduced motion.
+ */
+
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+
+/**
+ * Returns true if user has enabled prefers-reduced-motion in OS settings.
+ */
+export function isReducedMotionPreferred(): boolean {
+  if (typeof window === 'undefined' || !window.matchMedia) {
+    return false;
+  }
+  return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+
+/**
+ * Subscribes to changes in reduced motion user preferences.
+ */
+export function onReducedMotionChange(callback: (reduced: boolean) => void): () => void {
+  if (typeof window === 'undefined' || !window.matchMedia) {
+    return () => {};
+  }
+
+  const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY);
+  const listener = (event: MediaQueryListEvent) => callback(event.matches);
+
+  if (mediaQuery.addEventListener) {
+    mediaQuery.addEventListener('change', listener);
+    return () => mediaQuery.removeEventListener('change', listener);
+  }
+
+  return () => {};
+}