@nobak/design-system 1.0.0

package/lib/styles/sizing.js

@@ -0,0 +1,35 @@
+/**
+ * Component size scales with consistent naming
+ */
+export var sizing = {
+  // Height scales
+  height: {
+    small: 32,
+    medium: 40,
+    large: 48,
+    extraLarge: 56
+  },
+  // Width scales  
+  width: {
+    small: 120,
+    medium: 200,
+    large: 280,
+    extraLarge: 360,
+    full: '100%'
+  },
+  // Icon sizes
+  icon: {
+    small: 16,
+    medium: 24,
+    large: 32,
+    extraLarge: 40
+  },
+  // Avatar sizes
+  avatar: {
+    small: 24,
+    medium: 32,
+    large: 40,
+    extraLarge: 48,
+    jumbo: 64
+  }
+};

package/lib/styles/space.js

@@ -0,0 +1,24 @@
+/**
+ * space scale following predictable numerical pattern
+ * Uses flat naming structure with consistent scale increments
+ */
+export var space = {
+  0: 0,
+  25: 2,
+  50: 4,
+  75: 6,
+  100: 8,
+  200: 16,
+  300: 24,
+  400: 32,
+  500: 40,
+  600: 48,
+  700: 56,
+  800: 64,
+  1000: 80,
+  1200: 96,
+  1600: 128,
+  2000: 160,
+  2400: 192,
+  3200: 256
+};

package/lib/styles/theme/darkTheme.js

@@ -0,0 +1,471 @@
+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 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); }
+// src/styles/theme/darkTheme.ts
+// Dark Theme Definition
+// Uses the global tokens and semantic tokens to define the dark theme
+
+import { colors } from "../colors";
+
+// Import types from ./types
+
+var globalTokens = {
+  colors: colors.global
+};
+import { createThemeUtils } from "./themeUtils";
+// ===========================
+// DARK THEME SEMANTIC TOKENS
+// ===========================
+
+var darkSemanticTokens = {
+  background: {
+    "default": colors.global.gray[1000],
+    surface: colors.global.gray[900],
+    subtle: colors.global.gray[800],
+    overlay: colors.global.gray[700],
+    elevated: colors.global.gray[600],
+    inverse: colors.global.gray[100]
+  },
+  content: {
+    primary: colors.global.blue[100],
+    secondary: colors.global.blue[200],
+    tertiary: colors.global.blue[300],
+    disabled: colors.global.blue[400],
+    inverse: colors.global.blue[500],
+    link: colors.global.blue[600]
+  },
+  border: {
+    "default": colors.global.blue[700],
+    subtle: colors.global.blue[800],
+    strong: colors.global.blue[900],
+    focus: colors.global.blue[1000],
+    inverse: colors.global.blue[100]
+  },
+  interactive: {
+    primary: {
+      "default": colors.global.blue[100],
+      hover: colors.global.blue[200],
+      pressed: colors.global.blue[300],
+      disabled: colors.global.blue[400]
+    },
+    secondary: {
+      "default": colors.global.blue[500],
+      hover: colors.global.blue[600],
+      pressed: colors.global.blue[700],
+      disabled: colors.global.blue[800]
+    },
+    tertiary: {
+      "default": colors.global.blue[900],
+      hover: colors.global.blue[1000],
+      pressed: colors.global.blue[1000],
+      disabled: colors.global.blue[1100]
+    }
+  },
+  status: {
+    info: {
+      background: colors.global.blue[100],
+      border: colors.global.blue[200],
+      content: colors.global.blue[300],
+      icon: colors.global.blue[400]
+    },
+    success: {
+      background: colors.global.emerald[100],
+      border: colors.global.emerald[200],
+      content: colors.global.emerald[300],
+      icon: colors.global.emerald[400]
+    },
+    warning: {
+      background: colors.global.amber[100],
+      border: colors.global.amber[200],
+      content: colors.global.amber[300],
+      icon: colors.global.amber[400]
+    },
+    error: {
+      background: colors.global.red[100],
+      border: colors.global.red[200],
+      content: colors.global.red[300],
+      icon: colors.global.red[400]
+    }
+  }
+};
+
+// ===========================
+// DARK THEME FINTECH TOKENS
+// ===========================
+
+var darkFintechTokens = {
+  market: {
+    profit: {
+      primary: colors.global.emerald[100],
+      background: colors.global.emerald[200],
+      border: colors.global.emerald[300]
+    },
+    loss: {
+      primary: colors.global.red[100],
+      background: colors.global.red[200],
+      border: colors.global.red[300]
+    },
+    neutral: {
+      primary: colors.global.blue[100],
+      background: colors.global.blue[200],
+      border: colors.global.blue[300]
+    }
+  },
+  transaction: {
+    pending: {
+      primary: colors.global.amber[100],
+      background: colors.global.amber[200],
+      border: colors.global.amber[300]
+    },
+    processing: {
+      primary: colors.global.blue[100],
+      background: colors.global.blue[200],
+      border: colors.global.blue[300]
+    },
+    completed: {
+      primary: colors.global.emerald[100],
+      background: colors.global.emerald[200],
+      border: colors.global.emerald[300]
+    },
+    failed: {
+      primary: colors.global.red[100],
+      background: colors.global.red[200],
+      border: colors.global.red[300]
+    }
+  },
+  risk: {
+    veryLow: colors.global.emerald[100],
+    low: colors.global.emerald[200],
+    medium: colors.global.emerald[300],
+    high: colors.global.orange[100],
+    veryHigh: colors.global.orange[200],
+    critical: colors.global.orange[300]
+  },
+  security: {
+    verified: {
+      primary: colors.global.emerald[100],
+      background: colors.global.emerald[200],
+      border: colors.global.emerald[300]
+    },
+    unverified: {
+      primary: colors.global.orange[100],
+      background: colors.global.orange[200],
+      border: colors.global.orange[300]
+    },
+    secure: {
+      primary: colors.global.emerald[100],
+      background: colors.global.emerald[200],
+      border: colors.global.emerald[300]
+    },
+    warning: {
+      primary: colors.global.orange[100],
+      background: colors.global.orange[200],
+      border: colors.global.orange[300]
+    },
+    critical: {
+      primary: colors.global.red[100],
+      background: colors.global.red[200],
+      border: colors.global.red[300]
+    }
+  },
+  account: {
+    basic: colors.global.blue[100],
+    premium: colors.global.blue[200],
+    vip: colors.global.blue[300]
+  },
+  chart: {
+    primary: [colors.global.blue[100], colors.global.blue[200], colors.global.blue[300], colors.global.blue[400], colors.global.blue[500]],
+    sequential: [colors.global.blue[100], colors.global.blue[200], colors.global.blue[300], colors.global.blue[400], colors.global.blue[500], colors.global.blue[600], colors.global.blue[700], colors.global.blue[800]],
+    categorical: [colors.global.blue[100], colors.global.blue[200], colors.global.blue[300], colors.global.blue[400], colors.global.blue[500], colors.global.blue[600], colors.global.blue[700], colors.global.blue[800]]
+  }
+};
+
+// ===========================
+// DARK THEME COMPONENT TOKENS
+// ===========================
+
+var darkComponentTokens = {
+  button: {
+    primary: {
+      background: colors.global.blue[100],
+      backgroundHover: colors.global.blue[200],
+      backgroundPressed: colors.global.blue[300],
+      backgroundDisabled: colors.global.blue[400],
+      content: colors.global.blue[500],
+      contentDisabled: colors.global.blue[600],
+      border: colors.global.blue[700]
+    },
+    secondary: {
+      background: colors.global.blue[800],
+      backgroundHover: colors.global.blue[900],
+      backgroundPressed: colors.global.blue[1000],
+      backgroundDisabled: colors.global.blue[1100],
+      content: colors.global.blue[1200],
+      contentDisabled: colors.global.blue[1300],
+      border: colors.global.blue[1400]
+    },
+    tertiary: {
+      background: colors.global.blue[1500],
+      backgroundHover: colors.global.blue[1600],
+      backgroundPressed: colors.global.blue[1700],
+      backgroundDisabled: colors.global.blue[1800],
+      content: colors.global.blue[100],
+      contentDisabled: colors.global.blue[200],
+      border: colors.global.blue[300]
+    },
+    destructive: {
+      background: colors.global.red[100],
+      backgroundHover: colors.global.red[200],
+      backgroundPressed: colors.global.red[300],
+      backgroundDisabled: colors.global.red[400],
+      content: colors.global.red[500],
+      contentDisabled: colors.global.red[600],
+      border: colors.global.red[700]
+    },
+    link: {
+      background: colors.global.blue[100],
+      backgroundHover: colors.global.blue[200],
+      backgroundPressed: colors.global.blue[300],
+      backgroundDisabled: colors.global.blue[400],
+      content: colors.global.blue[500],
+      contentDisabled: colors.global.blue[600],
+      border: colors.global.blue[700]
+    },
+    success: {
+      background: colors.global.emerald[100],
+      backgroundHover: colors.global.emerald[200],
+      backgroundPressed: colors.global.emerald[300],
+      backgroundDisabled: colors.global.emerald[400],
+      content: colors.global.emerald[500],
+      contentDisabled: colors.global.emerald[600],
+      border: colors.global.emerald[700]
+    },
+    warning: {
+      background: colors.global.amber[100],
+      backgroundHover: colors.global.amber[200],
+      backgroundPressed: colors.global.amber[300],
+      backgroundDisabled: colors.global.amber[400],
+      content: colors.global.amber[500],
+      contentDisabled: colors.global.amber[600],
+      border: colors.global.amber[700]
+    },
+    ghost: {
+      background: colors.global["static"].transparent,
+      backgroundHover: colors.global["static"].transparent,
+      backgroundPressed: colors.global["static"].transparent,
+      backgroundDisabled: colors.global["static"].transparent,
+      content: colors.global.blue[500],
+      contentDisabled: colors.global.gray[400],
+      border: colors.global["static"].transparent
+    }
+  },
+  input: {
+    background: colors.global.blue[100],
+    backgroundDisabled: colors.global.blue[200],
+    content: colors.global.blue[300],
+    contentPlaceholder: colors.global.blue[400],
+    contentDisabled: colors.global.blue[500],
+    border: colors.global.blue[600],
+    borderFocus: colors.global.blue[700],
+    borderError: colors.global.red[100],
+    borderDisabled: colors.global.blue[800]
+  },
+  card: {
+    background: colors.global.blue[100],
+    backgroundHover: colors.global.blue[200],
+    backgroundPressed: colors.global.blue[300],
+    content: colors.global.blue[400],
+    border: colors.global.blue[500]
+  },
+  navigation: {
+    background: colors.global.blue[100],
+    item: {
+      "default": colors.global.blue[200],
+      hover: colors.global.blue[300],
+      active: colors.global.blue[400],
+      disabled: colors.global.blue[500]
+    },
+    border: colors.global.blue[600]
+  },
+  modal: {
+    background: colors.global.blue[100],
+    overlay: colors.global.blue[200],
+    content: colors.global.blue[300],
+    border: colors.global.blue[400]
+  },
+  checkbox: {
+    background: colors.global.blue[100],
+    backgroundChecked: colors.global.blue[200],
+    backgroundDisabled: colors.global.blue[300],
+    border: colors.global.blue[400],
+    borderChecked: colors.global.blue[500],
+    borderDisabled: colors.global.blue[600],
+    icon: colors.global.blue[700],
+    iconDisabled: colors.global.blue[800]
+  },
+  radio: {
+    background: colors.global.blue[100],
+    backgroundChecked: colors.global.blue[200],
+    backgroundDisabled: colors.global.blue[300],
+    border: colors.global.blue[400],
+    borderChecked: colors.global.blue[500],
+    borderDisabled: colors.global.blue[600],
+    dot: colors.global.blue[700],
+    dotDisabled: colors.global.blue[800]
+  },
+  "switch": {
+    trackBackground: colors.global.blue[100],
+    trackBackgroundChecked: colors.global.blue[200],
+    trackBackgroundDisabled: colors.global.blue[300],
+    thumbBackground: colors.global.blue[400],
+    thumbBackgroundDisabled: colors.global.blue[500]
+  },
+  slider: {
+    trackBackground: colors.global.blue[100],
+    trackBackgroundActive: colors.global.blue[200],
+    trackBackgroundDisabled: colors.global.blue[300],
+    thumbBackground: colors.global.blue[400],
+    thumbBackgroundDisabled: colors.global.blue[500]
+  },
+  tooltip: {
+    background: colors.global.blue[100],
+    content: colors.global.blue[200]
+  },
+  tag: {
+    "default": {
+      background: colors.global.blue[100],
+      content: colors.global.blue[200],
+      border: colors.global.blue[300]
+    },
+    info: {
+      background: colors.global.blue[400],
+      content: colors.global.blue[500],
+      border: colors.global.blue[600]
+    },
+    success: {
+      background: colors.global.emerald[100],
+      content: colors.global.emerald[200],
+      border: colors.global.emerald[300]
+    },
+    warning: {
+      background: colors.global.amber[100],
+      content: colors.global.amber[200],
+      border: colors.global.amber[300]
+    },
+    error: {
+      background: colors.global.red[100],
+      content: colors.global.red[200],
+      border: colors.global.red[300]
+    }
+  },
+  avatar: {
+    background: colors.global.blue[100],
+    content: colors.global.blue[200],
+    border: colors.global.blue[300]
+  },
+  badge: {
+    "default": {
+      background: colors.global.blue[100],
+      content: colors.global.blue[200]
+    },
+    primary: {
+      background: colors.global.blue[400],
+      content: colors.global.blue[500]
+    },
+    success: {
+      background: colors.global.emerald[100],
+      content: colors.global.emerald[200]
+    },
+    warning: {
+      background: colors.global.amber[100],
+      content: colors.global.amber[200]
+    },
+    error: {
+      background: colors.global.red[100],
+      content: colors.global.red[200]
+    }
+  },
+  alert: {
+    info: {
+      background: colors.global.blue[100],
+      content: colors.global.blue[200],
+      border: colors.global.blue[300],
+      icon: colors.global.blue[400]
+    },
+    success: {
+      background: colors.global.emerald[100],
+      content: colors.global.emerald[200],
+      border: colors.global.emerald[300],
+      icon: colors.global.emerald[400]
+    },
+    warning: {
+      background: colors.global.amber[100],
+      content: colors.global.amber[200],
+      border: colors.global.amber[300],
+      icon: colors.global.amber[400]
+    },
+    error: {
+      background: colors.global.red[100],
+      content: colors.global.red[200],
+      border: colors.global.red[300],
+      icon: colors.global.red[400]
+    }
+  },
+  divider: {
+    "default": colors.global.blue[100],
+    subtle: colors.global.blue[200]
+  },
+  progress: {
+    trackBackground: colors.global.blue[100],
+    indicatorBackground: colors.global.blue[200]
+  },
+  spinner: {
+    primary: colors.global.blue[600],
+    secondary: colors.global.gray[400]
+  },
+  skeleton: {
+    background: colors.global.gray[100],
+    highlight: colors.global.gray[200]
+  },
+  toast: {
+    info: {
+      background: colors.global.blue[100],
+      content: colors.global.blue[200],
+      border: colors.global.blue[300]
+    },
+    success: {
+      background: colors.global.emerald[100],
+      content: colors.global.emerald[200],
+      border: colors.global.emerald[300]
+    },
+    warning: {
+      background: colors.global.amber[100],
+      content: colors.global.amber[200],
+      border: colors.global.amber[300]
+    },
+    error: {
+      background: colors.global.red[100],
+      content: colors.global.red[200],
+      border: colors.global.red[300]
+    }
+  }
+};
+
+// Construct the full theme object first
+var themeObject = {
+  name: 'dark',
+  mode: 'dark',
+  global: globalTokens,
+  semantic: darkSemanticTokens,
+  fintech: darkFintechTokens,
+  component: darkComponentTokens
+};
+
+// Create the dark theme with utils
+export var darkTheme = _objectSpread(_objectSpread({}, themeObject), {}, {
+  utils: createThemeUtils(themeObject)
+});
+export default darkTheme;

package/lib/styles/theme/index.js

@@ -0,0 +1,44 @@
+// src/styles/theme/index.ts
+// Theme system entry point - Minimal implementation
+
+// Import theme instances
+// import { globalTokens } from '../tokens';
+
+import { darkTheme } from "./darkTheme";
+import { lightTheme } from "./lightTheme";
+
+// Import utilities
+import { createThemeUtils } from "./themeUtils";
+// Types
+
+// Values
+export { lightTheme } from "./lightTheme";
+export { darkTheme } from "./darkTheme";
+
+// Theme instances
+export var themes = {
+  light: lightTheme,
+  dark: darkTheme
+};
+
+// Theme name type
+
+// Get theme by name
+export function getTheme(name) {
+  return themes[name] || lightTheme;
+}
+
+// Default theme
+export var defaultTheme = lightTheme;
+
+// Export theme utilities
+export { createThemeUtils };
+// export { globalTokens }
+// Default export
+var themeModule = {
+  light: lightTheme,
+  dark: darkTheme,
+  getTheme: getTheme,
+  createThemeUtils: createThemeUtils
+};
+export default themeModule;