@nobak/design-system 1.0.0

package/lib/tokens/semantic.js

@@ -0,0 +1,367 @@
+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 - Semantic Tokens
+ *
+ * Semantic color tokens map raw color scales to meaningful, context-aware names.
+ *
+ * Instead of: bg-primary-500, text-gray-900
+ * Use: bg-interactive-primary, text-content-primary
+ *
+ * Benefits:
+ * - Clear intent and meaning
+ * - Easy to change globally
+ * - Theme-switching support
+ * - Better developer experience
+ */
+
+import { colors } from "./colors";
+
+/**
+ * Semantic Color System
+ * Following a contextual naming convention based on usage, not appearance
+ */
+export var semantic = {
+  /**
+   * Background Colors
+   * Used for page backgrounds and large surface areas
+   */
+  background: {
+    "default": colors.gray[50],
+    // Main page background
+    subtle: colors.gray[100],
+    // Subtle backgrounds (cards, sections)
+    elevated: '#FFFFFF',
+    // Raised surfaces (modals, popovers)
+    inverse: colors.gray[900] // Dark backgrounds for contrast
+  },
+  /**
+   * Surface Colors
+   * Used for component backgrounds (cards, panels, containers)
+   */
+  surface: {
+    "default": '#FFFFFF',
+    // Default surface (white cards)
+    subtle: colors.gray[50],
+    // Subtle surface variation
+    hover: colors.gray[100],
+    // Hover state for interactive surfaces
+    pressed: colors.gray[200],
+    // Active/pressed state
+    disabled: colors.gray[100],
+    // Disabled surface
+    inverse: colors.gray[900] // Dark surface for contrast
+  },
+  /**
+   * Content/Text Colors
+   * Used for all text content
+   */
+  content: {
+    primary: colors.gray[900],
+    // Primary text (headings, body)
+    secondary: colors.gray[600],
+    // Secondary text (subheadings, labels)
+    tertiary: colors.gray[500],
+    // Tertiary text (metadata, captions)
+    disabled: colors.gray[400],
+    // Disabled text
+    inverse: '#FFFFFF',
+    // Text on dark backgrounds
+    placeholder: colors.gray[400] // Input placeholders
+  },
+  /**
+   * Border Colors
+   * Used for component borders and dividers
+   */
+  border: {
+    "default": colors.gray[200],
+    // Default borders
+    subtle: colors.gray[100],
+    // Subtle dividers
+    strong: colors.gray[300],
+    // Emphasized borders
+    disabled: colors.gray[200],
+    // Disabled borders
+    focus: colors.blue[500],
+    // Focus rings
+    error: colors.red[500],
+    // Error states
+    success: colors.green[500],
+    // Success states
+    warning: colors.orange[500] // Warning states
+  },
+  /**
+   * Interactive Colors
+   * Used for buttons, links, and interactive elements
+   */
+  interactive: {
+    // Primary actions (main brand color)
+    primary: colors.primary[500],
+    // #FF3B2D - Rebellion Red
+    primaryHover: colors.primary[600],
+    // Hover state
+    primaryActive: colors.primary[700],
+    // Active/pressed state
+    primaryDisabled: colors.primary[200],
+    // Disabled state
+    primarySubtle: colors.primary[50],
+    // Subtle backgrounds
+
+    // Secondary actions (neutral)
+    secondary: colors.gray[900],
+    // Secondary button
+    secondaryHover: colors.gray[800],
+    // Hover state
+    secondaryActive: colors.gray[700],
+    // Active state
+    secondaryDisabled: colors.gray[300],
+    // Disabled state
+    secondarySubtle: colors.gray[100],
+    // Subtle backgrounds
+
+    // Tertiary actions (minimal)
+    tertiary: 'transparent',
+    // Ghost buttons
+    tertiaryHover: colors.gray[100],
+    // Hover state
+    tertiaryActive: colors.gray[200],
+    // Active state
+
+    // Links
+    link: colors.blue[500],
+    // Link color
+    linkHover: colors.blue[600],
+    // Link hover
+    linkVisited: colors.blue[700],
+    // Visited links
+
+    // Focus
+    focus: colors.blue[500],
+    // Focus indicator
+    focusRing: 'rgba(59, 130, 246, 0.5)' // Focus ring with opacity
+  },
+  /**
+   * Feedback Colors
+   * Used for status messages, alerts, and validation states
+   */
+  feedback: {
+    // Success
+    success: colors.green[500],
+    // Success state
+    successHover: colors.green[600],
+    // Success hover
+    successSubtle: colors.green[50],
+    // Success background
+    successBorder: colors.green[200],
+    // Success border
+
+    // Warning
+    warning: colors.orange[500],
+    // Warning state
+    warningHover: colors.orange[600],
+    // Warning hover
+    warningSubtle: colors.orange[50],
+    // Warning background
+    warningBorder: colors.orange[200],
+    // Warning border
+
+    // Error
+    error: colors.red[500],
+    // Error state
+    errorHover: colors.red[600],
+    // Error hover
+    errorSubtle: colors.red[50],
+    // Error background
+    errorBorder: colors.red[200],
+    // Error border
+
+    // Info
+    info: colors.blue[500],
+    // Info state
+    infoHover: colors.blue[600],
+    // Info hover
+    infoSubtle: colors.blue[50],
+    // Info background
+    infoBorder: colors.blue[200] // Info border
+  },
+  /**
+   * Brand Colors
+   * Direct brand color usage (use sparingly, prefer semantic colors)
+   */
+  brand: {
+    rebellion: colors.primary[500],
+    // #ff95a9 - Rebellion Red
+    concrete: colors.gray[950],
+    // #3d3d3d - Concrete Gray
+    blockchain: colors.blue[500],
+    // #64bdf9 - Blockchain Blue
+    growth: colors.green[500],
+    // #71d98b - Growth Green
+    caution: colors.orange[500],
+    // #ffa675 - Caution Orange
+    earth: colors.beige[500] // #c8bda9 - Earth Beige
+  },
+  /**
+   * Overlay Colors
+   * Used for modals, dropdowns, tooltips
+   */
+  overlay: {
+    backdrop: 'rgba(0, 0, 0, 0.5)',
+    // Modal backdrop
+    backdropLight: 'rgba(0, 0, 0, 0.25)',
+    // Light backdrop
+    backdropHeavy: 'rgba(0, 0, 0, 0.75)',
+    // Heavy backdrop
+    scrim: 'rgba(0, 0, 0, 0.1)' // Light overlay
+  },
+  /**
+   * Special Colors
+   * Context-specific colors
+   */
+  special: {
+    // Blockchain/Crypto specific
+    profit: colors.green[500],
+    // Positive price movement
+    loss: colors.red[500],
+    // Negative price movement
+
+    // Highlights
+    highlight: colors.orange[200],
+    // Text highlighting
+    selection: colors.blue[100],
+    // Text selection background
+
+    // Skeleton loaders
+    skeleton: colors.gray[200],
+    // Skeleton background
+    skeletonShimmer: colors.gray[100] // Skeleton shimmer effect
+  }
+};
+
+/**
+ * Type Exports
+ */
+
+/**
+ * CSS Custom Properties Generator
+ * Generates CSS variables from semantic tokens
+ */
+export var generateSemanticCSSVariables = function generateSemanticCSSVariables() {
+  var vars = {};
+
+  // Background colors
+  Object.entries(semantic.background).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    vars["--color-background-".concat(key)] = value;
+  });
+
+  // Surface colors
+  Object.entries(semantic.surface).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    vars["--color-surface-".concat(key)] = value;
+  });
+
+  // Content colors
+  Object.entries(semantic.content).forEach(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      key = _ref6[0],
+      value = _ref6[1];
+    vars["--color-content-".concat(key)] = value;
+  });
+
+  // Border colors
+  Object.entries(semantic.border).forEach(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+      key = _ref8[0],
+      value = _ref8[1];
+    vars["--color-border-".concat(key)] = value;
+  });
+
+  // Interactive colors
+  Object.entries(semantic.interactive).forEach(function (_ref9) {
+    var _ref0 = _slicedToArray(_ref9, 2),
+      key = _ref0[0],
+      value = _ref0[1];
+    vars["--color-interactive-".concat(key)] = value;
+  });
+
+  // Feedback colors
+  Object.entries(semantic.feedback).forEach(function (_ref1) {
+    var _ref10 = _slicedToArray(_ref1, 2),
+      key = _ref10[0],
+      value = _ref10[1];
+    vars["--color-feedback-".concat(key)] = value;
+  });
+
+  // Brand colors
+  Object.entries(semantic.brand).forEach(function (_ref11) {
+    var _ref12 = _slicedToArray(_ref11, 2),
+      key = _ref12[0],
+      value = _ref12[1];
+    vars["--color-brand-".concat(key)] = value;
+  });
+
+  // Overlay colors
+  Object.entries(semantic.overlay).forEach(function (_ref13) {
+    var _ref14 = _slicedToArray(_ref13, 2),
+      key = _ref14[0],
+      value = _ref14[1];
+    vars["--color-overlay-".concat(key)] = value;
+  });
+
+  // Special colors
+  Object.entries(semantic.special).forEach(function (_ref15) {
+    var _ref16 = _slicedToArray(_ref15, 2),
+      key = _ref16[0],
+      value = _ref16[1];
+    vars["--color-special-".concat(key)] = value;
+  });
+  return vars;
+};
+
+/**
+ * Tailwind Config Export
+ * Exports semantic colors for Tailwind configuration
+ */
+export var tailwindSemantic = {
+  // Background
+  'background-default': semantic.background["default"],
+  'background-subtle': semantic.background.subtle,
+  'background-elevated': semantic.background.elevated,
+  'background-inverse': semantic.background.inverse,
+  // Surface
+  'surface-default': semantic.surface["default"],
+  'surface-subtle': semantic.surface.subtle,
+  'surface-hover': semantic.surface.hover,
+  'surface-pressed': semantic.surface.pressed,
+  'surface-disabled': semantic.surface.disabled,
+  'surface-inverse': semantic.surface.inverse,
+  // Content
+  'content-primary': semantic.content.primary,
+  'content-secondary': semantic.content.secondary,
+  'content-tertiary': semantic.content.tertiary,
+  'content-disabled': semantic.content.disabled,
+  'content-inverse': semantic.content.inverse,
+  // Interactive
+  'interactive-primary': semantic.interactive.primary,
+  'interactive-primary-hover': semantic.interactive.primaryHover,
+  'interactive-secondary': semantic.interactive.secondary,
+  'interactive-link': semantic.interactive.link,
+  // Feedback
+  'feedback-success': semantic.feedback.success,
+  'feedback-warning': semantic.feedback.warning,
+  'feedback-error': semantic.feedback.error,
+  'feedback-info': semantic.feedback.info,
+  // Brand
+  'brand-rebellion': semantic.brand.rebellion,
+  'brand-concrete': semantic.brand.concrete,
+  'brand-blockchain': semantic.brand.blockchain
+};

package/lib/tokens/shadows.js

@@ -0,0 +1,114 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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); }
+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 - Shadow Tokens
+ * 
+ * Minimal, sharp shadows
+ * Punk rock edge with Japanese restraint
+ */
+
+export var shadows = {
+  // No shadow
+  none: 'none',
+  // Subtle shadows (minimal elevation)
+  xs: '0 1px 2px rgba(0, 0, 0, 0.05)',
+  sm: '0 2px 4px rgba(0, 0, 0, 0.1)',
+  // Standard shadows
+  md: '0 4px 8px rgba(0, 0, 0, 0.1)',
+  lg: '0 8px 16px rgba(0, 0, 0, 0.15)',
+  xl: '0 12px 24px rgba(0, 0, 0, 0.2)',
+  // Dramatic shadows (punk rock energy)
+  '2xl': '0 16px 32px rgba(0, 0, 0, 0.25)',
+  '3xl': '0 24px 48px rgba(0, 0, 0, 0.3)',
+  // Inner shadows
+  inner: 'inset 0 2px 4px rgba(0, 0, 0, 0.1)',
+  innerLg: 'inset 0 4px 8px rgba(0, 0, 0, 0.15)',
+  // Colored shadows (for emphasis)
+  primarySm: '0 2px 4px rgba(255, 59, 45, 0.2)',
+  primaryMd: '0 4px 8px rgba(255, 59, 45, 0.25)',
+  primaryLg: '0 8px 16px rgba(255, 59, 45, 0.3)',
+  blueSm: '0 2px 4px rgba(59, 130, 246, 0.2)',
+  blueMd: '0 4px 8px rgba(59, 130, 246, 0.25)',
+  blueLg: '0 8px 16px rgba(59, 130, 246, 0.3)'
+};
+
+// Semantic Shadows
+export var semanticShadows = {
+  // Component shadows
+  card: shadows.sm,
+  cardHover: shadows.md,
+  // Interactive shadows
+  button: shadows.none,
+  buttonHover: shadows.sm,
+  buttonActive: shadows.inner,
+  // Overlay shadows
+  modal: shadows['2xl'],
+  popover: shadows.lg,
+  dropdown: shadows.md,
+  tooltip: shadows.sm,
+  // Input shadows
+  input: shadows.none,
+  inputFocus: shadows.primarySm,
+  inputError: '0 0 0 3px rgba(239, 68, 68, 0.1)',
+  // Navigation shadows
+  navbar: shadows.sm,
+  sidebar: shadows.md,
+  // Elevation levels
+  elevation: {
+    0: shadows.none,
+    1: shadows.xs,
+    2: shadows.sm,
+    3: shadows.md,
+    4: shadows.lg,
+    5: shadows.xl,
+    6: shadows['2xl'],
+    7: shadows['3xl']
+  }
+};
+
+// Type exports
+
+// CSS Custom Properties Generator
+export var generateShadowVariables = function generateShadowVariables() {
+  var vars = {};
+
+  // Base shadows
+  Object.entries(shadows).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    vars["--shadow-".concat(key)] = value;
+  });
+
+  // Semantic shadows (flatten nested objects)
+  var _flattenObject = function flattenObject(obj) {
+    var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    Object.entries(obj).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+      if (_typeof(value) === 'object' && !Array.isArray(value)) {
+        _flattenObject(value, "".concat(prefix).concat(key, "-"));
+      } else {
+        vars["--shadow-".concat(prefix).concat(key)] = String(value);
+      }
+    });
+  };
+  _flattenObject(semanticShadows);
+  return vars;
+};
+
+// Tailwind Config Export
+export var tailwindShadows = _objectSpread(_objectSpread({}, shadows), {}, {
+  DEFAULT: shadows.md
+});

package/lib/tokens/spacing.js

@@ -0,0 +1,189 @@
+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); }
+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 - Spacing Tokens
+ * 
+ * 8px Base Grid System
+ * Japanese Ma (間) - Negative space as a design element
+ */
+
+export var spacing = {
+  // Base unit: 8px
+  0: '0px',
+  px: '1px',
+  0.5: '2px',
+  // 0.25 * 8
+  1: '4px',
+  // 0.5 * 8
+  2: '8px',
+  // 1 * 8 (base)
+  3: '12px',
+  // 1.5 * 8
+  4: '16px',
+  // 2 * 8
+  5: '20px',
+  // 2.5 * 8
+  6: '24px',
+  // 3 * 8
+  7: '28px',
+  // 3.5 * 8
+  8: '32px',
+  // 4 * 8
+  9: '36px',
+  // 4.5 * 8
+  10: '40px',
+  // 5 * 8
+  11: '44px',
+  // 5.5 * 8
+  12: '48px',
+  // 6 * 8
+  14: '56px',
+  // 7 * 8
+  16: '64px',
+  // 8 * 8
+  20: '80px',
+  // 10 * 8
+  24: '96px',
+  // 12 * 8
+  28: '112px',
+  // 14 * 8
+  32: '128px',
+  // 16 * 8
+  36: '144px',
+  // 18 * 8
+  40: '160px',
+  // 20 * 8
+  44: '176px',
+  // 22 * 8
+  48: '192px',
+  // 24 * 8
+  52: '208px',
+  // 26 * 8
+  56: '224px',
+  // 28 * 8
+  60: '240px',
+  // 30 * 8
+  64: '256px',
+  // 32 * 8
+  72: '288px',
+  // 36 * 8
+  80: '320px',
+  // 40 * 8
+  96: '384px' // 48 * 8
+};
+
+// Semantic Spacing
+export var semanticSpacing = {
+  // Component spacing
+  componentGap: spacing[4],
+  // 16px - Gap between components
+  componentPadding: spacing[6],
+  // 24px - Internal component padding
+
+  // Layout spacing
+  sectionGap: spacing[12],
+  // 48px - Gap between sections
+  sectionPadding: spacing[16],
+  // 64px - Section padding
+
+  // Container spacing
+  containerPadding: spacing[6],
+  // 24px - Container horizontal padding
+  containerGap: spacing[8],
+  // 32px - Gap between containers
+
+  // Card spacing
+  cardPadding: spacing[6],
+  // 24px - Card internal padding
+  cardGap: spacing[4],
+  // 16px - Gap between cards
+
+  // Form spacing
+  formFieldGap: spacing[4],
+  // 16px - Gap between form fields
+  formSectionGap: spacing[8],
+  // 32px - Gap between form sections
+
+  // List spacing
+  listItemGap: spacing[2],
+  // 8px - Gap between list items
+  listSectionGap: spacing[6],
+  // 24px - Gap between list sections
+
+  // Button spacing
+  buttonPaddingX: spacing[6],
+  // 24px - Horizontal button padding
+  buttonPaddingY: spacing[3],
+  // 12px - Vertical button padding
+  buttonGap: spacing[2],
+  // 8px - Gap between buttons
+
+  // Input spacing
+  inputPaddingX: spacing[4],
+  // 16px - Horizontal input padding
+  inputPaddingY: spacing[3],
+  // 12px - Vertical input padding
+
+  // Modal spacing
+  modalPadding: spacing[8],
+  // 32px - Modal internal padding
+  modalGap: spacing[6],
+  // 24px - Gap between modal sections
+
+  // Navigation spacing
+  navItemGap: spacing[2],
+  // 8px - Gap between nav items
+  navSectionGap: spacing[6],
+  // 24px - Gap between nav sections
+
+  // Ma (間) - Japanese negative space
+  ma: {
+    tight: spacing[2],
+    // 8px - Minimal breathing room
+    comfortable: spacing[4],
+    // 16px - Standard breathing room
+    spacious: spacing[8],
+    // 32px - Generous breathing room
+    dramatic: spacing[16] // 64px - Dramatic negative space
+  }
+};
+
+// Type exports
+
+// CSS Custom Properties Generator
+export var generateSpacingVariables = function generateSpacingVariables() {
+  var vars = {};
+
+  // Base spacing
+  Object.entries(spacing).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    vars["--spacing-".concat(key)] = value;
+  });
+
+  // Semantic spacing (flatten nested objects)
+  var _flattenObject = function flattenObject(obj) {
+    var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    Object.entries(obj).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+      if (_typeof(value) === 'object' && !Array.isArray(value)) {
+        _flattenObject(value, "".concat(prefix).concat(key, "-"));
+      } else {
+        vars["--spacing-".concat(prefix).concat(key)] = String(value);
+      }
+    });
+  };
+  _flattenObject(semanticSpacing);
+  return vars;
+};
+
+// Tailwind Config Export
+export var tailwindSpacing = spacing;