@nobak/design-system 1.0.0

package/lib/tokens/lighting.js

@@ -0,0 +1,384 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+/**
+ * Nobak Design System - Surface Lighting & Depth
+ *
+ * Creates professional depth through varied surface treatments and shadow layers.
+ * Each surface level combines multiple shadows for ambient depth and visual hierarchy.
+ *
+ * Philosophy:
+ * - Surfaces receive light differently based on position and purpose
+ * - Multiple layered shadows create realistic depth
+ * - Short shadows + long ambient shadows = professional look
+ * - Lighting adapts to context and function
+ */
+
+import { colors } from "./colors";
+
+/**
+ * Surface Treatments
+ * Different surface levels with varying shadow depth
+ */
+export var lighting = {
+  /**
+   * TOP LIT - Bright surface, maximum contrast
+   * Use: Hero sections, primary cards, headers
+   */
+  topLit: {
+    surface: colors.gray[50],
+    // Bright surface
+    border: colors.gray[200],
+    // Soft edge
+    text: colors.gray[900],
+    // Maximum contrast
+    accent: colors.primary[500],
+    // Bold accent
+    shadow: 'rgba(0, 0, 0, 0.05)' // Minimal shadow
+  },
+  /**
+   * FRONT LIT - Primary surface treatment
+   * Use: Buttons, inputs, main controls
+   */
+  frontLit: {
+    surface: '#FFFFFF',
+    // Clean white surface
+    border: colors.gray[300],
+    // Defined edge
+    text: colors.gray[900],
+    // Strong contrast
+    accent: colors.primary[500],
+    // Primary accent
+    shadow: 'rgba(0, 0, 0, 0.08)' // Light shadow
+  },
+  /**
+   * SIDE LIT - Subtle surface
+   * Use: Secondary controls, metadata, labels
+   */
+  sideLit: {
+    surface: colors.gray[100],
+    // Subtle surface
+    border: colors.gray[300],
+    // Soft edge
+    text: colors.gray[700],
+    // Reduced contrast
+    accent: colors.gray[600],
+    // Muted accent
+    shadow: 'rgba(0, 0, 0, 0.04)' // Very light shadow
+  },
+  /**
+   * RECESSED - Inset surface, inverted colors
+   * Use: Display panels, data tables, dark mode sections
+   */
+  recessed: {
+    surface: colors.gray[900],
+    // Dark background
+    border: colors.gray[700],
+    // Dark edge
+    text: colors.gray[50],
+    // Light text (inverted)
+    accent: colors.blue[400],
+    // Cool accent
+    shadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.3)',
+    // Inset shadow
+    glow: 'rgba(59, 130, 246, 0.3)' // Optional glow
+  },
+  /**
+   * ELEVATED - Raised surface with layered shadows
+   * Use: Prominent buttons, cards, important controls
+   */
+  elevated: {
+    surface: colors.gray[50],
+    // Light surface
+    border: colors.gray[400],
+    // Defined edge
+    text: colors.gray[900],
+    // High contrast
+    accent: colors.primary[600],
+    // Rich accent
+    shadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+    // Layered shadow
+    rimLight: colors.gray[100] // Subtle highlight
+  },
+  /**
+   * BACKLIT - Glowing surface
+   * Use: Active states, indicators, notifications, primary actions
+   */
+  backlit: {
+    surface: colors.primary[500],
+    // Bold surface
+    border: colors.primary[600],
+    // Defined edge
+    text: '#FFFFFF',
+    // High contrast
+    accent: '#FFFFFF',
+    // White accent
+    glow: 'rgba(255, 59, 45, 0.4)',
+    // Glow effect
+    shadow: '0 0 12px rgba(255, 59, 45, 0.3)' // Glow shadow
+  },
+  /**
+   * SHADOWED - De-emphasized surface
+   * Use: Footer, disabled states, background content
+   */
+  shadowed: {
+    surface: colors.gray[200],
+    // Muted surface
+    border: colors.gray[300],
+    // Subtle edge
+    text: colors.gray[600],
+    // Lower contrast
+    accent: colors.gray[500],
+    // Muted accent
+    shadow: 'none' // No shadow
+  },
+  /**
+   * GLOSSY - Translucent, glass-like surface
+   * Use: Premium features, overlays, modal backgrounds
+   */
+  glossy: {
+    surface: 'linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%)',
+    border: 'rgba(255, 255, 255, 0.3)',
+    text: colors.gray[900],
+    accent: colors.primary[500],
+    shadow: '0 8px 32px rgba(0, 0, 0, 0.12)',
+    reflection: 'linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%)',
+    backdrop: 'blur(12px)'
+  },
+  /**
+   * MATTE - Non-reflective, textured surface
+   * Use: Professional tools, technical interfaces, subtle backgrounds
+   */
+  matte: {
+    surface: colors.gray[100],
+    border: colors.gray[400],
+    text: colors.gray[800],
+    accent: colors.gray[700],
+    shadow: '0 1px 2px rgba(0, 0, 0, 0.06)',
+    texture: 'repeating-linear-gradient(90deg, transparent 0px, rgba(0,0,0,0.02) 1px, transparent 2px)'
+  }
+};
+
+/**
+ * Component Contexts
+ * Pre-configured surface treatments for specific components
+ */
+export var lightingContexts = {
+  /**
+   * HERO SECTION
+   * Bright, prominent surface
+   */
+  hero: {
+    background: lighting.topLit.surface,
+    text: lighting.topLit.text,
+    border: lighting.topLit.border,
+    shadow: lighting.topLit.shadow
+  },
+  /**
+   * PRIMARY BUTTON
+   * Elevated with strong shadow
+   */
+  buttonPrimary: {
+    "default": {
+      background: lighting.backlit.surface,
+      text: lighting.backlit.text,
+      border: lighting.backlit.border,
+      shadow: lighting.elevated.shadow
+    },
+    hover: {
+      background: colors.primary[600],
+      glow: lighting.backlit.glow,
+      shadow: lighting.backlit.shadow
+    },
+    active: {
+      background: colors.primary[700],
+      shadow: '0 1px 2px rgba(0, 0, 0, 0.2)' // Pressed in
+    }
+  },
+  /**
+   * SECONDARY BUTTON
+   * Front-lit, less prominent
+   */
+  buttonSecondary: {
+    "default": {
+      background: lighting.frontLit.surface,
+      text: lighting.frontLit.text,
+      border: lighting.frontLit.border,
+      shadow: lighting.frontLit.shadow
+    },
+    hover: {
+      background: colors.gray[50],
+      border: colors.gray[400]
+    }
+  },
+  /**
+   * INPUT FIELD
+   * Recessed - text entry area
+   */
+  input: {
+    "default": {
+      background: lighting.frontLit.surface,
+      text: lighting.frontLit.text,
+      border: lighting.sideLit.border,
+      shadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.05)' // Slight recess
+    },
+    focus: {
+      border: lighting.backlit.surface,
+      shadow: "0 0 0 3px ".concat(lighting.backlit.glow) // Glow on focus
+    }
+  },
+  /**
+   * DATA TABLE
+   * Recessed display - like an LCD panel
+   */
+  table: {
+    background: lighting.recessed.surface,
+    text: lighting.recessed.text,
+    border: lighting.recessed.border,
+    shadow: lighting.recessed.shadow,
+    header: {
+      background: 'rgba(255, 255, 255, 0.05)',
+      // Subtle separation
+      text: lighting.recessed.accent
+    },
+    row: {
+      hover: 'rgba(255, 255, 255, 0.03)' // Subtle highlight
+    }
+  },
+  /**
+   * CARD
+   * Elevated surface - component in the stack
+   */
+  card: {
+    "default": {
+      background: lighting.frontLit.surface,
+      text: lighting.frontLit.text,
+      border: lighting.frontLit.border,
+      shadow: lighting.elevated.shadow
+    },
+    hover: {
+      shadow: '0 6px 12px rgba(0, 0, 0, 0.15)',
+      // Lift on hover
+      rimLight: lighting.elevated.rimLight
+    }
+  },
+  /**
+   * MODAL / DIALOG
+   * Floating, highly elevated
+   */
+  modal: {
+    background: lighting.frontLit.surface,
+    text: lighting.frontLit.text,
+    border: lighting.frontLit.border,
+    shadow: '0 20px 40px rgba(0, 0, 0, 0.25)',
+    // Strong elevation
+    backdrop: 'rgba(0, 0, 0, 0.5)' // Darkened background
+  },
+  /**
+   * NOTIFICATION / TOAST
+   * Backlit indicator - demands attention
+   */
+  notification: {
+    success: {
+      background: colors.green[500],
+      text: '#FFFFFF',
+      shadow: '0 4px 12px rgba(16, 185, 129, 0.3)',
+      glow: 'rgba(16, 185, 129, 0.2)'
+    },
+    error: {
+      background: colors.red[500],
+      text: '#FFFFFF',
+      shadow: '0 4px 12px rgba(239, 68, 68, 0.3)',
+      glow: 'rgba(239, 68, 68, 0.2)'
+    },
+    warning: {
+      background: colors.orange[500],
+      text: colors.gray[900],
+      shadow: '0 4px 12px rgba(255, 166, 117, 0.3)',
+      glow: 'rgba(255, 166, 117, 0.2)'
+    }
+  },
+  /**
+   * VU METER / PROGRESS
+   * Backlit indicator with glow
+   */
+  indicator: {
+    background: lighting.recessed.surface,
+    fill: lighting.backlit.surface,
+    glow: lighting.backlit.glow,
+    border: lighting.recessed.border
+  },
+  /**
+   * LABEL / METADATA
+   * Side-lit, de-emphasized
+   */
+  label: {
+    background: 'transparent',
+    text: lighting.sideLit.text,
+    accent: lighting.sideLit.accent
+  },
+  /**
+   * FOOTER
+   * Shadowed, bottom of stack
+   */
+  footer: {
+    background: lighting.shadowed.surface,
+    text: lighting.shadowed.text,
+    border: lighting.shadowed.border
+  },
+  /**
+   * GLASS PANEL
+   * Glossy, translucent overlay
+   */
+  glass: {
+    background: lighting.glossy.surface,
+    border: lighting.glossy.border,
+    text: lighting.glossy.text,
+    shadow: lighting.glossy.shadow,
+    backdrop: lighting.glossy.backdrop,
+    reflection: lighting.glossy.reflection
+  }
+};
+
+/**
+ * Helper: Apply lighting to component
+ *
+ * Usage:
+ * const buttonStyles = applyLighting('buttonPrimary', 'default');
+ */
+export function applyLighting(context) {
+  var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+  var contextStyles = lightingContexts[context];
+
+  // @ts-ignore - Dynamic key access
+  return _typeof(contextStyles) === 'object' && state in contextStyles ? contextStyles[state] : contextStyles;
+}
+
+/**
+ * CSS Custom Properties Generator
+ */
+export var generateLightingCSSVariables = function generateLightingCSSVariables() {
+  var vars = {};
+
+  // Generate lighting level variables
+  Object.entries(lighting).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      level = _ref2[0],
+      properties = _ref2[1];
+    Object.entries(properties).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        property = _ref4[0],
+        value = _ref4[1];
+      vars["--lighting-".concat(level, "-").concat(property)] = value;
+    });
+  });
+  return vars;
+};
+
+/**
+ * Type Exports
+ */

package/lib/tokens/motion.js

@@ -0,0 +1,284 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * Nobak Design System - Motion Tokens
+ * 
+ * Snappy, purposeful animations
+ * Punk rock energy with Japanese restraint
+ */
+
+export var motion = {
+  // Duration (in milliseconds)
+  duration: {
+    instant: '0ms',
+    fast: '150ms',
+    // Micro-interactions
+    normal: '250ms',
+    // Standard transitions
+    slow: '350ms',
+    // Complex animations
+    slower: '500ms',
+    // Page transitions
+    slowest: '750ms' // Dramatic reveals
+  },
+  // Easing Functions
+  easing: {
+    // Standard easing
+    linear: 'linear',
+    // Ease out (UI entering)
+    easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
+    easeOutQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+    easeOutCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    // Ease in (UI exiting)
+    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+    easeInQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+    easeInCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+    // Ease in-out (State changes)
+    easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    easeInOutQuad: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+    easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+    // Bounce (Playful interactions)
+    bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+    // Sharp (Punk rock snappy)
+    sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
+  },
+  // Transition Presets
+  transition: {
+    // Default
+    "default": 'all 250ms cubic-bezier(0.4, 0, 0.2, 1)',
+    // Fast interactions
+    fast: 'all 150ms cubic-bezier(0, 0, 0.2, 1)',
+    // Slow animations
+    slow: 'all 350ms cubic-bezier(0.4, 0, 0.2, 1)',
+    // Color transitions
+    colors: 'color 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)',
+    // Opacity transitions
+    opacity: 'opacity 250ms cubic-bezier(0.4, 0, 0.2, 1)',
+    // Transform transitions
+    transform: 'transform 250ms cubic-bezier(0.4, 0, 0.2, 1)',
+    // Shadow transitions
+    shadow: 'box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)',
+    // All properties
+    all: 'all 250ms cubic-bezier(0.4, 0, 0.2, 1)'
+  }
+};
+
+// Semantic Motion
+export var semanticMotion = {
+  // Component animations
+  button: {
+    duration: motion.duration.fast,
+    easing: motion.easing.easeOut,
+    transition: "all ".concat(motion.duration.fast, " ").concat(motion.easing.easeOut)
+  },
+  input: {
+    duration: motion.duration.fast,
+    easing: motion.easing.easeOut,
+    transition: "border-color ".concat(motion.duration.fast, " ").concat(motion.easing.easeOut, ", box-shadow ").concat(motion.duration.fast, " ").concat(motion.easing.easeOut)
+  },
+  modal: {
+    duration: motion.duration.normal,
+    easing: motion.easing.easeInOut,
+    transition: "opacity ".concat(motion.duration.normal, " ").concat(motion.easing.easeInOut, ", transform ").concat(motion.duration.normal, " ").concat(motion.easing.easeInOut)
+  },
+  dropdown: {
+    duration: motion.duration.fast,
+    easing: motion.easing.easeOut,
+    transition: "opacity ".concat(motion.duration.fast, " ").concat(motion.easing.easeOut, ", transform ").concat(motion.duration.fast, " ").concat(motion.easing.easeOut)
+  },
+  tooltip: {
+    duration: motion.duration.fast,
+    easing: motion.easing.easeOut,
+    transition: "opacity ".concat(motion.duration.fast, " ").concat(motion.easing.easeOut)
+  },
+  // Page transitions
+  pageEnter: {
+    duration: motion.duration.slow,
+    easing: motion.easing.easeOut,
+    transition: "opacity ".concat(motion.duration.slow, " ").concat(motion.easing.easeOut, ", transform ").concat(motion.duration.slow, " ").concat(motion.easing.easeOut)
+  },
+  pageExit: {
+    duration: motion.duration.fast,
+    easing: motion.easing.easeIn,
+    transition: "opacity ".concat(motion.duration.fast, " ").concat(motion.easing.easeIn)
+  },
+  // Hover states
+  hover: {
+    duration: motion.duration.fast,
+    easing: motion.easing.easeOut,
+    transition: "all ".concat(motion.duration.fast, " ").concat(motion.easing.easeOut)
+  },
+  // Focus states
+  focus: {
+    duration: motion.duration.fast,
+    easing: motion.easing.sharp,
+    transition: "box-shadow ".concat(motion.duration.fast, " ").concat(motion.easing.sharp)
+  }
+};
+
+// Animation Keyframes
+export var keyframes = {
+  // Fade animations
+  fadeIn: {
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    }
+  },
+  fadeOut: {
+    from: {
+      opacity: 1
+    },
+    to: {
+      opacity: 0
+    }
+  },
+  // Slide animations
+  slideInUp: {
+    from: {
+      transform: 'translateY(100%)',
+      opacity: 0
+    },
+    to: {
+      transform: 'translateY(0)',
+      opacity: 1
+    }
+  },
+  slideInDown: {
+    from: {
+      transform: 'translateY(-100%)',
+      opacity: 0
+    },
+    to: {
+      transform: 'translateY(0)',
+      opacity: 1
+    }
+  },
+  slideInLeft: {
+    from: {
+      transform: 'translateX(-100%)',
+      opacity: 0
+    },
+    to: {
+      transform: 'translateX(0)',
+      opacity: 1
+    }
+  },
+  slideInRight: {
+    from: {
+      transform: 'translateX(100%)',
+      opacity: 0
+    },
+    to: {
+      transform: 'translateX(0)',
+      opacity: 1
+    }
+  },
+  // Scale animations
+  scaleIn: {
+    from: {
+      transform: 'scale(0.95)',
+      opacity: 0
+    },
+    to: {
+      transform: 'scale(1)',
+      opacity: 1
+    }
+  },
+  scaleOut: {
+    from: {
+      transform: 'scale(1)',
+      opacity: 1
+    },
+    to: {
+      transform: 'scale(0.95)',
+      opacity: 0
+    }
+  },
+  // Spin animation
+  spin: {
+    from: {
+      transform: 'rotate(0deg)'
+    },
+    to: {
+      transform: 'rotate(360deg)'
+    }
+  },
+  // Pulse animation
+  pulse: {
+    '0%, 100%': {
+      opacity: 1
+    },
+    '50%': {
+      opacity: 0.5
+    }
+  },
+  // Bounce animation
+  bounce: {
+    '0%, 100%': {
+      transform: 'translateY(0)'
+    },
+    '50%': {
+      transform: 'translateY(-25%)'
+    }
+  }
+};
+
+// Type exports
+
+// CSS Custom Properties Generator
+export var generateMotionVariables = function generateMotionVariables() {
+  var vars = {};
+
+  // Durations
+  Object.entries(motion.duration).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    vars["--duration-".concat(key)] = value;
+  });
+
+  // Easing
+  Object.entries(motion.easing).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    vars["--easing-".concat(key)] = value;
+  });
+
+  // Transitions
+  Object.entries(motion.transition).forEach(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      key = _ref6[0],
+      value = _ref6[1];
+    vars["--transition-".concat(key)] = value;
+  });
+  return vars;
+};
+
+// Tailwind Config Export
+export var tailwindMotion = {
+  transitionDuration: {
+    instant: '0ms',
+    fast: '150ms',
+    DEFAULT: '250ms',
+    slow: '350ms',
+    slower: '500ms',
+    slowest: '750ms'
+  },
+  transitionTimingFunction: {
+    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.68, -0.55, 0.265, 1.55)',
+    sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
+  },
+  keyframes: keyframes
+};