@nobak/design-system 1.0.0

package/lib/styles/zIndex.js

@@ -0,0 +1,19 @@
+/**
+ * Z-index scale for layering
+ * Follows Spectrum's clear layer organization
+ */
+export var zIndex = {
+  hide: -1,
+  base: 0,
+  content: 1,
+  docked: 10,
+  dropdown: 1000,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  tooltip: 1600,
+  toast: 1700,
+  skipLink: 1800
+};

package/lib/tokens/borders.js

@@ -0,0 +1,161 @@
+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 - Border Tokens
+ * 
+ * Sharp, minimal borders
+ * Punk rock edges with Japanese precision
+ */
+
+export var borders = {
+  // Border Widths
+  width: {
+    0: '0px',
+    1: '1px',
+    2: '2px',
+    4: '4px',
+    8: '8px'
+  },
+  // Border Radius (Sharp, minimal - punk rock aesthetic)
+  radius: {
+    none: '0px',
+    // Punk rock sharp edges
+    sm: '2px',
+    // Subtle rounding
+    md: '4px',
+    // Standard rounding
+    lg: '8px',
+    // Card rounding
+    xl: '12px',
+    // Modal rounding
+    '2xl': '16px',
+    // Large containers
+    '3xl': '24px',
+    // Hero sections
+    full: '9999px' // Pills, avatars
+  },
+  // Border Styles
+  style: {
+    solid: 'solid',
+    dashed: 'dashed',
+    dotted: 'dotted',
+    none: 'none'
+  }
+};
+
+// Semantic Borders
+export var semanticBorders = {
+  // Component borders
+  "default": {
+    width: borders.width[1],
+    style: borders.style.solid,
+    color: '#E5E5E5' // gray-200
+  },
+  subtle: {
+    width: borders.width[1],
+    style: borders.style.solid,
+    color: '#F5F5F5' // gray-100
+  },
+  strong: {
+    width: borders.width[2],
+    style: borders.style.solid,
+    color: '#D4D4D4' // gray-300
+  },
+  // Interactive borders
+  input: {
+    width: borders.width[1],
+    style: borders.style.solid,
+    color: '#E5E5E5',
+    // gray-200
+    radius: borders.radius.md
+  },
+  inputFocus: {
+    width: borders.width[2],
+    style: borders.style.solid,
+    color: '#3B82F6',
+    // blue-500
+    radius: borders.radius.md
+  },
+  inputError: {
+    width: borders.width[1],
+    style: borders.style.solid,
+    color: '#EF4444',
+    // red-500
+    radius: borders.radius.md
+  },
+  // Button borders
+  button: {
+    width: borders.width[2],
+    style: borders.style.solid,
+    color: '#FF3B2D',
+    // primary-500
+    radius: borders.radius.md
+  },
+  buttonOutline: {
+    width: borders.width[2],
+    style: borders.style.solid,
+    color: '#E5E5E5',
+    // gray-200
+    radius: borders.radius.md
+  },
+  // Card borders
+  card: {
+    width: borders.width[1],
+    style: borders.style.solid,
+    color: '#E5E5E5',
+    // gray-200
+    radius: borders.radius.lg
+  },
+  // Modal borders
+  modal: {
+    width: borders.width[0],
+    style: borders.style.none,
+    color: 'transparent',
+    radius: borders.radius.xl
+  },
+  // Dividers
+  divider: {
+    width: borders.width[1],
+    style: borders.style.solid,
+    color: '#E5E5E5' // gray-200
+  },
+  dividerStrong: {
+    width: borders.width[2],
+    style: borders.style.solid,
+    color: '#D4D4D4' // gray-300
+  }
+};
+
+// Type exports
+
+// CSS Custom Properties Generator
+export var generateBorderVariables = function generateBorderVariables() {
+  var vars = {};
+
+  // Border widths
+  Object.entries(borders.width).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    vars["--border-width-".concat(key)] = value;
+  });
+
+  // Border radius
+  Object.entries(borders.radius).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    vars["--border-radius-".concat(key)] = value;
+  });
+  return vars;
+};
+
+// Tailwind Config Export
+export var tailwindBorders = {
+  borderWidth: borders.width,
+  borderRadius: borders.radius
+};

package/lib/tokens/colors.js

@@ -0,0 +1,426 @@
+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 - Color Tokens (OKLCH-based)
+ *
+ * Punk Rock Minimal Japanese Aesthetic
+ * - OKLCH color space for perceptually uniform colors
+ * - 6 color palettes: red, orange, green, blue, neutral, beige
+ * - Neomorphism-specific shadow and lighting colors
+ */
+
+export var colors = {
+  // Red Palette (OKLCH-based - 27 shades)
+  red: {
+    50: '#ffe1e6',
+    100: '#ffdde2',
+    150: '#ffd5db',
+    200: '#ffcdd5',
+    250: '#ffc5ce',
+    300: '#ffbdc8',
+    350: '#ffb3c0',
+    400: '#ffa9b9',
+    450: '#ff9fb1',
+    500: '#ff95a9',
+    550: '#ff89a0',
+    600: '#ff7d96',
+    650: '#ff6f8b',
+    700: '#ff5f80',
+    750: '#ff4d72',
+    800: '#ff3162',
+    850: '#ff1f50',
+    900: '#ff0037',
+    925: '#eb0032',
+    950: '#d10028',
+    975: '#b5001f'
+  },
+  // Orange Palette (OKLCH-based - 27 shades)
+  orange: {
+    50: '#ffe7d6',
+    100: '#ffe3d1',
+    150: '#ffddca',
+    200: '#ffd6be',
+    250: '#ffd0b2',
+    300: '#ffc9aa',
+    350: '#ffc1a0',
+    400: '#ffb891',
+    450: '#ffaf83',
+    500: '#ffa675',
+    550: '#ff9d63',
+    600: '#ff9152',
+    650: '#ff843b',
+    700: '#ff771f',
+    750: '#f66a00',
+    800: '#e55800',
+    850: '#cd4f00',
+    900: '#b44400',
+    925: '#9f3c00',
+    950: '#8a3600',
+    975: '#762e00'
+  },
+  // Green Palette (OKLCH-based - 27 shades)
+  green: {
+    50: '#d4f4dd',
+    100: '#cef2d8',
+    150: '#c6efd2',
+    200: '#bdedc9',
+    250: '#b3eabf',
+    300: '#a9e7b9',
+    350: '#9de3af',
+    400: '#90e0a4',
+    450: '#81dd97',
+    500: '#71d98b',
+    550: '#5ed67b',
+    600: '#48d06d',
+    650: '#2bcb59',
+    700: '#00c740',
+    750: '#00b637',
+    800: '#00a032',
+    850: '#008e2b',
+    900: '#007d26',
+    925: '#006f22',
+    950: '#00611d',
+    975: '#005519'
+  },
+  // Blue Palette (OKLCH-based - 27 shades)
+  blue: {
+    50: '#d3e9fd',
+    100: '#cde6fd',
+    150: '#c4e1fc',
+    200: '#bbddfc',
+    250: '#b0d8fb',
+    300: '#a5d4fb',
+    350: '#97cefa',
+    400: '#89c9fa',
+    450: '#77c3f9',
+    500: '#64bdf9',
+    550: '#4ab5f8',
+    600: '#2caff8',
+    650: '#00a6f7',
+    700: '#009ef7',
+    750: '#008ddc',
+    800: '#007fc7',
+    850: '#0071b0',
+    900: '#00649b',
+    925: '#005a8b',
+    950: '#004d78',
+    975: '#004266'
+  },
+  // Neutral Palette (OKLCH-based - 27 shades)
+  neutral: {
+    50: '#f2f2f2',
+    100: '#ededed',
+    150: '#e8e8e8',
+    200: '#e3e3e3',
+    250: '#dedede',
+    300: '#d9d9d9',
+    350: '#d3d3d3',
+    400: '#cccccc',
+    450: '#c5c5c5',
+    500: '#bdbdbd',
+    550: '#b4b4b4',
+    600: '#ababab',
+    650: '#a1a1a1',
+    700: '#969696',
+    750: '#898989',
+    800: '#7c7c7c',
+    850: '#6c6c6c',
+    900: '#5c5c5c',
+    925: '#4f4f4f',
+    950: '#3d3d3d',
+    975: '#2e2e2e'
+  },
+  // Beige Palette (OKLCH-based - 27 shades)
+  beige: {
+    50: '#f4f1ed',
+    100: '#f1ede8',
+    150: '#ede8e2',
+    200: '#e9e3db',
+    250: '#e5ded4',
+    300: '#e0d9ce',
+    350: '#dbd3c6',
+    400: '#d5ccbd',
+    450: '#cfc5b3',
+    500: '#c8bda9',
+    550: '#c0b49c',
+    600: '#b9ac91',
+    650: '#b0a282',
+    700: '#a79872',
+    750: '#9b8b5f',
+    800: '#8f7f4e',
+    850: '#7f6e3d',
+    900: '#706328',
+    925: '#635721',
+    950: '#564c1c',
+    975: '#4a4117'
+  },
+  // Primary: Rebellion Red (using red palette - 27 shades)
+  primary: {
+    50: '#ffe1e6',
+    100: '#ffdde2',
+    150: '#ffd5db',
+    200: '#ffcdd5',
+    250: '#ffc5ce',
+    300: '#ffbdc8',
+    350: '#ffb3c0',
+    400: '#ffa9b9',
+    450: '#ff9fb1',
+    500: '#ff95a9',
+    // Main brand color
+    550: '#ff89a0',
+    600: '#ff7d96',
+    650: '#ff6f8b',
+    700: '#ff5f80',
+    750: '#ff4d72',
+    800: '#ff3162',
+    850: '#ff1f50',
+    900: '#ff0037',
+    925: '#eb0032',
+    950: '#d10028',
+    975: '#b5001f'
+  },
+  // Gray: Concrete Gray (using neutral palette - 27 shades)
+  gray: {
+    50: '#f2f2f2',
+    // Background
+    100: '#ededed',
+    // Subtle background
+    150: '#e8e8e8',
+    200: '#e3e3e3',
+    // Borders
+    250: '#dedede',
+    300: '#d9d9d9',
+    // Disabled
+    350: '#d3d3d3',
+    400: '#cccccc',
+    // Placeholder
+    450: '#c5c5c5',
+    500: '#bdbdbd',
+    // Secondary text
+    550: '#b4b4b4',
+    600: '#ababab',
+    // Body text
+    650: '#a1a1a1',
+    700: '#969696',
+    // Emphasis
+    750: '#898989',
+    800: '#7c7c7c',
+    // Headings
+    850: '#6c6c6c',
+    900: '#5c5c5c',
+    // Primary text
+    925: '#4f4f4f',
+    950: '#3d3d3d',
+    // Maximum contrast
+    975: '#2e2e2e'
+  },
+  // Neomorphism Colors (for shadow and lighting effects)
+  neomorphic: {
+    // Base surface color (light mode)
+    base: '#e0e5ec',
+    baseLight: '#ecf0f3',
+    baseDark: '#d1d9e6',
+    // Shadow colors
+    shadowDark: 'rgba(163, 177, 198, 0.7)',
+    shadowDarkStrong: 'rgba(163, 177, 198, 0.9)',
+    shadowLight: 'rgba(255, 255, 255, 0.8)',
+    shadowLightStrong: 'rgba(255, 255, 255, 0.95)',
+    // Directional bevel borders
+    borderLight: 'rgba(255, 255, 255, 0.85)',
+    // Top/Left edges (light-facing)
+    borderLightBright: 'rgba(255, 255, 255, 0.9)',
+    // Brightest highlight
+    borderDark: 'rgba(120, 135, 155, 0.65)',
+    // Bottom/Right edges (shadow-facing)
+    borderDarkStrong: 'rgba(130, 145, 165, 0.6)',
+    // Deeper shadow edge
+
+    // Background lighting gradients
+    lightSpotPrimary: 'rgba(255, 255, 255, 0.4)',
+    lightSpotSecondary: 'rgba(120, 140, 160, 0.2)',
+    lightSpotAmbient: 'rgba(255, 255, 255, 0.15)',
+    // Gradient stops for realistic backgrounds
+    gradientLight1: '#d8dde5',
+    gradientLight2: '#e0e5ec',
+    gradientLight3: '#e3e8ef',
+    gradientLight4: '#dfe4eb',
+    gradientLight5: '#d9dee7'
+  },
+  // Semantic Colors
+  semantic: {
+    // Backgrounds
+    background: '#f2f2f2',
+    backgroundSubtle: '#ededed',
+    backgroundElevated: '#ffffff',
+    // Surfaces
+    surface: '#ffffff',
+    surfaceSubtle: '#ededed',
+    surfaceHover: '#e3e3e3',
+    // Borders
+    border: '#e3e3e3',
+    borderSubtle: '#ededed',
+    borderStrong: '#d9d9d9',
+    // Text
+    text: '#3d3d3d',
+    textSubtle: '#7c7c7c',
+    textMuted: '#ababab',
+    textDisabled: '#cccccc',
+    textInverse: '#ffffff',
+    // Interactive (using red palette for primary)
+    primary: '#ff95a9',
+    primaryHover: '#ff7d96',
+    primaryActive: '#ff5f80',
+    primaryDisabled: '#ffbdc8',
+    // States
+    success: '#71d98b',
+    successSubtle: '#d4f4dd',
+    successHover: '#48d06d',
+    warning: '#ffa675',
+    warningSubtle: '#ffe7d6',
+    warningHover: '#ff9152',
+    error: '#ff3162',
+    errorSubtle: '#ffe1e6',
+    errorHover: '#ff0037',
+    info: '#64bdf9',
+    infoSubtle: '#d3e9fd',
+    infoHover: '#2caff8',
+    // Focus
+    focus: '#64bdf9',
+    focusRing: 'rgba(100, 189, 249, 0.5)'
+  },
+  // Brand Colors
+  brand: {
+    rebellion: '#ff95a9',
+    // Primary brand (red-500)
+    concrete: '#3d3d3d',
+    // Text/emphasis (neutral-950)
+    blockchain: '#64bdf9',
+    // Technology (blue-500)
+    growth: '#71d98b',
+    // Success (green-500)
+    caution: '#ffa675',
+    // Warning (orange-500)
+    earth: '#c8bda9' // Beige accent (beige-500)
+  }
+};
+
+// Type exports
+
+// CSS Custom Properties Generator
+export var generateCSSVariables = function generateCSSVariables() {
+  var vars = {};
+
+  // Red colors
+  Object.entries(colors.red).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    vars["--color-red-".concat(key)] = value;
+  });
+
+  // Orange colors
+  Object.entries(colors.orange).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    vars["--color-orange-".concat(key)] = value;
+  });
+
+  // Green colors
+  Object.entries(colors.green).forEach(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      key = _ref6[0],
+      value = _ref6[1];
+    vars["--color-green-".concat(key)] = value;
+  });
+
+  // Blue colors
+  Object.entries(colors.blue).forEach(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+      key = _ref8[0],
+      value = _ref8[1];
+    vars["--color-blue-".concat(key)] = value;
+  });
+
+  // Neutral colors
+  Object.entries(colors.neutral).forEach(function (_ref9) {
+    var _ref0 = _slicedToArray(_ref9, 2),
+      key = _ref0[0],
+      value = _ref0[1];
+    vars["--color-neutral-".concat(key)] = value;
+  });
+
+  // Beige colors
+  Object.entries(colors.beige).forEach(function (_ref1) {
+    var _ref10 = _slicedToArray(_ref1, 2),
+      key = _ref10[0],
+      value = _ref10[1];
+    vars["--color-beige-".concat(key)] = value;
+  });
+
+  // Primary colors (red-based)
+  Object.entries(colors.primary).forEach(function (_ref11) {
+    var _ref12 = _slicedToArray(_ref11, 2),
+      key = _ref12[0],
+      value = _ref12[1];
+    vars["--color-primary-".concat(key)] = value;
+  });
+
+  // Gray colors (neutral-based)
+  Object.entries(colors.gray).forEach(function (_ref13) {
+    var _ref14 = _slicedToArray(_ref13, 2),
+      key = _ref14[0],
+      value = _ref14[1];
+    vars["--color-gray-".concat(key)] = value;
+  });
+
+  // Neomorphic colors
+  Object.entries(colors.neomorphic).forEach(function (_ref15) {
+    var _ref16 = _slicedToArray(_ref15, 2),
+      key = _ref16[0],
+      value = _ref16[1];
+    vars["--color-neomorphic-".concat(key)] = value;
+  });
+
+  // Semantic colors
+  Object.entries(colors.semantic).forEach(function (_ref17) {
+    var _ref18 = _slicedToArray(_ref17, 2),
+      key = _ref18[0],
+      value = _ref18[1];
+    vars["--color-".concat(key)] = value;
+  });
+
+  // Brand colors
+  Object.entries(colors.brand).forEach(function (_ref19) {
+    var _ref20 = _slicedToArray(_ref19, 2),
+      key = _ref20[0],
+      value = _ref20[1];
+    vars["--color-brand-".concat(key)] = value;
+  });
+  return vars;
+};
+
+// Tailwind Config Export
+export var tailwindColors = {
+  red: colors.red,
+  orange: colors.orange,
+  green: colors.green,
+  blue: colors.blue,
+  neutral: colors.neutral,
+  beige: colors.beige,
+  primary: colors.primary,
+  gray: colors.gray,
+  // Neomorphic colors
+  neomorphic: colors.neomorphic,
+  // Semantic aliases
+  rebellion: colors.primary[500],
+  concrete: colors.gray[950],
+  blockchain: colors.blue[500],
+  growth: colors.green[500],
+  caution: colors.orange[500],
+  earth: colors.beige[500]
+};