@nobak/design-system 1.0.0

package/lib/styles/theme/lightTheme.js

@@ -0,0 +1,480 @@
+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/lightTheme.ts
+// Light Theme Definition
+// Uses the global tokens and semantic tokens to define the light theme
+
+import { colors } from "../colors";
+
+// Import types from ./types
+
+// Import global tokens and utils
+
+var globalTokens = {
+  colors: colors.global
+};
+import { createThemeUtils } from "./themeUtils";
+// ===========================
+// LIGHT THEME SEMANTIC TOKENS
+// ===========================
+
+var lightSemanticTokens = {
+  background: {
+    "default": colors.global.neutral[100],
+    surface: colors.global["static"].white,
+    subtle: colors.global.neutral[200],
+    overlay: "".concat(colors.global["static"].black, "80"),
+    // 50% opacity
+    elevated: colors.global["static"].white,
+    inverse: colors.global.neutral[1400]
+  },
+  content: {
+    primary: colors.global.neutral[1400],
+    secondary: colors.global.neutral[1000],
+    tertiary: colors.global.neutral[800],
+    disabled: colors.global.neutral[500],
+    inverse: colors.global["static"].white,
+    link: colors.global.blue[600]
+  },
+  border: {
+    "default": colors.global.neutral[400],
+    subtle: colors.global.neutral[300],
+    strong: colors.global.neutral[600],
+    focus: colors.global.blue[600],
+    inverse: colors.global.neutral[800]
+  },
+  interactive: {
+    primary: {
+      "default": colors.global.blue[600],
+      hover: colors.global.blue[700],
+      pressed: colors.global.blue[800],
+      disabled: colors.global.neutral[300]
+    },
+    secondary: {
+      "default": colors.global.neutral[200],
+      hover: colors.global.neutral[300],
+      pressed: colors.global.neutral[400],
+      disabled: colors.global.neutral[200]
+    },
+    tertiary: {
+      "default": colors.global["static"].transparent,
+      hover: colors.global.neutral[100],
+      pressed: colors.global.neutral[200],
+      disabled: colors.global["static"].transparent
+    }
+  },
+  status: {
+    info: {
+      background: colors.global.blue[100],
+      border: colors.global.blue[300],
+      content: colors.global.blue[800],
+      icon: colors.global.blue[600]
+    },
+    success: {
+      background: colors.global.emerald[100],
+      border: colors.global.emerald[300],
+      content: colors.global.emerald[800],
+      icon: colors.global.emerald[600]
+    },
+    warning: {
+      background: colors.global.amber[100],
+      border: colors.global.amber[300],
+      content: colors.global.amber[800],
+      icon: colors.global.amber[600]
+    },
+    error: {
+      background: colors.global.red[100],
+      border: colors.global.red[300],
+      content: colors.global.red[800],
+      icon: colors.global.red[600]
+    }
+  }
+};
+
+// ===========================
+// LIGHT THEME FINTECH TOKENS
+// ===========================
+
+var lightFintechTokens = {
+  market: {
+    profit: {
+      primary: colors.global.emerald[600],
+      background: colors.global.emerald[100],
+      border: colors.global.emerald[300]
+    },
+    loss: {
+      primary: colors.global.red[600],
+      background: colors.global.red[100],
+      border: colors.global.red[300]
+    },
+    neutral: {
+      primary: colors.global.neutral[600],
+      background: colors.global.neutral[100],
+      border: colors.global.neutral[300]
+    }
+  },
+  transaction: {
+    pending: {
+      primary: colors.global.amber[600],
+      background: colors.global.amber[100],
+      border: colors.global.amber[300]
+    },
+    processing: {
+      primary: colors.global.blue[600],
+      background: colors.global.blue[100],
+      border: colors.global.blue[300]
+    },
+    completed: {
+      primary: colors.global.emerald[600],
+      background: colors.global.emerald[100],
+      border: colors.global.emerald[300]
+    },
+    failed: {
+      primary: colors.global.red[600],
+      background: colors.global.red[100],
+      border: colors.global.red[300]
+    }
+  },
+  risk: {
+    veryLow: colors.global.emerald[300],
+    low: colors.global.emerald[500],
+    medium: colors.global.amber[500],
+    high: colors.global.red[600],
+    veryHigh: colors.global.red[700],
+    critical: colors.global.red[900]
+  },
+  security: {
+    verified: {
+      primary: colors.global.emerald[600],
+      background: colors.global.emerald[100],
+      border: colors.global.emerald[300]
+    },
+    unverified: {
+      primary: colors.global.neutral[500],
+      background: colors.global.neutral[100],
+      border: colors.global.neutral[300]
+    },
+    secure: {
+      primary: colors.global.emerald[600],
+      background: colors.global.emerald[100],
+      border: colors.global.emerald[300]
+    },
+    warning: {
+      primary: colors.global.amber[600],
+      background: colors.global.amber[100],
+      border: colors.global.amber[300]
+    },
+    critical: {
+      primary: colors.global.red[700],
+      background: colors.global.red[100],
+      border: colors.global.red[300]
+    }
+  },
+  account: {
+    basic: colors.global.neutral[600],
+    premium: colors.global.violet[600],
+    vip: colors.global.amber[600]
+  },
+  chart: {
+    primary: [colors.global.blue[600], colors.global.emerald[600], colors.global.red[600], colors.global.amber[600], colors.global.violet[600]],
+    sequential: [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], colors.global.blue[900]],
+    categorical: [colors.global.blue[600], colors.global.emerald[600], colors.global.red[600], colors.global.amber[600], colors.global.violet[600], colors.global.neutral[600]]
+  }
+};
+
+// ===========================
+// LIGHT THEME COMPONENT TOKENS
+// ===========================
+
+var lightComponentTokens = {
+  button: {
+    primary: {
+      background: colors.global.blue[600],
+      backgroundHover: colors.global.blue[700],
+      backgroundPressed: colors.global.blue[800],
+      backgroundDisabled: colors.global.neutral[300],
+      content: colors.global["static"].white,
+      contentDisabled: colors.global.neutral[500],
+      border: colors.global.blue[600]
+    },
+    secondary: {
+      background: colors.global.neutral[200],
+      backgroundHover: colors.global.neutral[300],
+      backgroundPressed: colors.global.neutral[400],
+      backgroundDisabled: colors.global.neutral[100],
+      content: colors.global.neutral[900],
+      contentDisabled: colors.global.neutral[500],
+      border: colors.global.neutral[400]
+    },
+    destructive: {
+      background: colors.global.red[600],
+      backgroundHover: colors.global.red[700],
+      backgroundPressed: colors.global.red[800],
+      backgroundDisabled: colors.global.neutral[300],
+      content: colors.global["static"].white,
+      contentDisabled: colors.global.neutral[500],
+      border: colors.global.red[600]
+    },
+    tertiary: {
+      background: colors.global["static"].transparent,
+      backgroundHover: colors.global.neutral[100],
+      backgroundPressed: colors.global.neutral[200],
+      backgroundDisabled: colors.global["static"].transparent,
+      content: colors.global.blue[600],
+      contentDisabled: colors.global.neutral[400],
+      border: colors.global["static"].transparent
+    },
+    link: {
+      background: colors.global["static"].transparent,
+      backgroundHover: colors.global["static"].transparent,
+      backgroundPressed: colors.global["static"].transparent,
+      backgroundDisabled: colors.global["static"].transparent,
+      content: colors.global.blue[600],
+      contentDisabled: colors.global.neutral[400],
+      border: colors.global["static"].transparent
+    },
+    success: {
+      background: colors.global.emerald[500],
+      backgroundHover: colors.global.emerald[400],
+      backgroundPressed: colors.global.emerald[600],
+      backgroundDisabled: colors.global.neutral[300],
+      content: colors.global["static"].white,
+      contentDisabled: colors.global.neutral[500],
+      border: colors.global.emerald[500]
+    },
+    warning: {
+      background: colors.global.amber[500],
+      backgroundHover: colors.global.amber[400],
+      backgroundPressed: colors.global.amber[600],
+      backgroundDisabled: colors.global.neutral[300],
+      content: colors.global["static"].white,
+      contentDisabled: colors.global.neutral[500],
+      border: colors.global.amber[500]
+    },
+    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[600],
+      contentDisabled: colors.global.neutral[400],
+      border: colors.global["static"].transparent
+    }
+  },
+  input: {
+    background: colors.global["static"].white,
+    backgroundDisabled: colors.global.neutral[100],
+    content: colors.global.neutral[900],
+    contentPlaceholder: colors.global.neutral[500],
+    contentDisabled: colors.global.neutral[500],
+    border: colors.global.neutral[400],
+    borderFocus: colors.global.blue[600],
+    borderError: colors.global.red[600],
+    borderDisabled: colors.global.neutral[300]
+  },
+  card: {
+    background: colors.global["static"].white,
+    backgroundHover: colors.global.neutral[100],
+    backgroundPressed: colors.global.neutral[100],
+    content: colors.global.neutral[900],
+    border: colors.global.neutral[300]
+  },
+  navigation: {
+    background: colors.global["static"].white,
+    item: {
+      "default": colors.global.neutral[700],
+      hover: colors.global.neutral[900],
+      active: colors.global.blue[600],
+      disabled: colors.global.neutral[400]
+    },
+    border: colors.global.neutral[300]
+  },
+  modal: {
+    background: colors.global["static"].white,
+    overlay: "".concat(colors.global["static"].black, "80"),
+    content: colors.global.neutral[900],
+    border: colors.global.neutral[300]
+  },
+  toast: {
+    info: {
+      background: colors.global.blue[100],
+      content: colors.global.blue[900],
+      border: colors.global.blue[200]
+    },
+    success: {
+      background: colors.global.emerald[100],
+      content: colors.global.emerald[900],
+      border: colors.global.emerald[200]
+    },
+    warning: {
+      background: colors.global.amber[100],
+      content: colors.global.amber[900],
+      border: colors.global.amber[200]
+    },
+    error: {
+      background: colors.global.red[100],
+      content: colors.global.red[900],
+      border: colors.global.red[200]
+    }
+  },
+  "switch": {
+    trackBackground: colors.global.neutral[300],
+    trackBackgroundChecked: colors.global.blue[500],
+    trackBackgroundDisabled: colors.global.neutral[200],
+    thumbBackground: colors.global["static"].white,
+    thumbBackgroundDisabled: colors.global.neutral[100]
+  },
+  checkbox: {
+    background: colors.global["static"].white,
+    backgroundChecked: colors.global.blue[600],
+    backgroundDisabled: colors.global.neutral[200],
+    border: colors.global.neutral[400],
+    borderChecked: colors.global.blue[600],
+    borderDisabled: colors.global.neutral[400],
+    icon: colors.global["static"].white,
+    iconDisabled: colors.global.neutral[400]
+  },
+  radio: {
+    background: colors.global["static"].white,
+    backgroundChecked: colors.global.blue[600],
+    backgroundDisabled: colors.global.neutral[200],
+    border: colors.global.neutral[400],
+    borderChecked: colors.global.blue[600],
+    borderDisabled: colors.global.neutral[400],
+    dot: colors.global["static"].white,
+    dotDisabled: colors.global.neutral[400]
+  },
+  slider: {
+    trackBackground: colors.global.neutral[300],
+    trackBackgroundActive: colors.global.blue[500],
+    trackBackgroundDisabled: colors.global.neutral[200],
+    thumbBackground: colors.global["static"].white,
+    thumbBackgroundDisabled: colors.global.neutral[400]
+  },
+  tooltip: {
+    background: colors.global.neutral[900],
+    content: colors.global["static"].white
+  },
+  tag: {
+    "default": {
+      background: colors.global.neutral[100],
+      content: colors.global.neutral[900],
+      border: colors.global.neutral[300]
+    },
+    info: {
+      background: colors.global.blue[100],
+      content: colors.global.blue[900],
+      border: colors.global.blue[300]
+    },
+    success: {
+      background: colors.global.emerald[100],
+      content: colors.global.emerald[900],
+      border: colors.global.emerald[300]
+    },
+    warning: {
+      background: colors.global.amber[100],
+      content: colors.global.amber[900],
+      border: colors.global.amber[300]
+    },
+    error: {
+      background: colors.global.red[100],
+      content: colors.global.red[900],
+      border: colors.global.red[300]
+    }
+  },
+  avatar: {
+    background: colors.global.neutral[200],
+    content: colors.global.neutral[800],
+    border: colors.global.neutral[300]
+  },
+  badge: {
+    "default": {
+      background: colors.global.neutral[200],
+      content: colors.global.neutral[800]
+    },
+    primary: {
+      background: colors.global.blue[600],
+      content: colors.global["static"].white
+    },
+    success: {
+      background: colors.global.emerald[600],
+      content: colors.global["static"].white
+    },
+    warning: {
+      background: colors.global.amber[600],
+      content: colors.global["static"].white
+    },
+    error: {
+      background: colors.global.red[600],
+      content: colors.global["static"].white
+    }
+  },
+  alert: {
+    info: {
+      background: colors.global.blue[100],
+      content: colors.global.blue[900],
+      border: colors.global.blue[200],
+      icon: colors.global.blue[600]
+    },
+    success: {
+      background: colors.global.emerald[100],
+      content: colors.global.emerald[900],
+      border: colors.global.emerald[200],
+      icon: colors.global.emerald[600]
+    },
+    warning: {
+      background: colors.global.amber[100],
+      content: colors.global.amber[900],
+      border: colors.global.amber[200],
+      icon: colors.global.amber[600]
+    },
+    error: {
+      background: colors.global.red[100],
+      content: colors.global.red[900],
+      border: colors.global.red[200],
+      icon: colors.global.red[600]
+    }
+  },
+  divider: {
+    "default": colors.global.neutral[200],
+    subtle: colors.global.neutral[100]
+  },
+  progress: {
+    trackBackground: colors.global.neutral[200],
+    indicatorBackground: colors.global.blue[600]
+  },
+  spinner: {
+    primary: colors.global.blue[600],
+    secondary: colors.global.neutral[400]
+  },
+  skeleton: {
+    background: colors.global.neutral[100],
+    highlight: colors.global.neutral[200]
+  }
+};
+
+// Create the base theme object without utils
+var baseTheme = {
+  name: 'light',
+  mode: 'light',
+  global: globalTokens,
+  semantic: lightSemanticTokens,
+  fintech: lightFintechTokens,
+  component: lightComponentTokens
+};
+
+// Function to create the light theme with utils
+var createLightTheme = function createLightTheme() {
+  var themeWithUtils = _objectSpread(_objectSpread({}, baseTheme), {}, {
+    utils: createThemeUtils(baseTheme)
+  });
+  return themeWithUtils;
+};
+
+// Finally, define the lightTheme with utils included
+export var lightTheme = createLightTheme();
+export default lightTheme;

package/lib/styles/theme/themeTypes.js

@@ -0,0 +1 @@
+export {};

package/lib/styles/theme/themeUtils.js

@@ -0,0 +1,63 @@
+/**
+ * Creates theme utility functions
+ */
+export var createThemeUtils = function createThemeUtils(theme) {
+  return {
+    // Get contrasting color (black or white) based on background color
+    getContrastingColor: function getContrastingColor(backgroundColor) {
+      // Convert hex to RGB
+      var hex = backgroundColor.replace('#', '');
+      var r = parseInt(hex.substring(0, 2), 16);
+      var g = parseInt(hex.substring(2, 4), 16);
+      var b = parseInt(hex.substring(4, 6), 16);
+
+      // Calculate relative luminance (perceived brightness)
+      var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+      // Return black for light colors, white for dark colors
+      return luminance > 0.5 ? '#000000' : '#FFFFFF';
+    },
+    // Get financial color based on value (emerald for positive, red for negative)
+    getFinancialColor: function getFinancialColor(value, context) {
+      if (context === 'profit') return theme.global.colors.emerald[500];
+      if (context === 'loss') return theme.global.colors.red[500];
+      if (context === 'neutral') return theme.global.colors.gray[500];
+      return value >= 0 ? theme.global.colors.emerald[500] : theme.global.colors.red[500];
+    },
+    // Get risk color based on level (1-5)
+    getRiskColor: function getRiskColor(riskLevel) {
+      var colors = [theme.global.colors.emerald[500],
+      // Low risk
+      theme.global.colors.amber[500],
+      // Low-medium risk
+      theme.global.colors.amber[500],
+      // Medium risk
+      theme.global.colors.amber[1100],
+      // Medium-high risk
+      theme.global.colors.red[500] // High risk
+      ];
+      var index = Math.min(Math.max(0, riskLevel - 1), colors.length - 1);
+      return colors[index];
+    },
+    // Add opacity to a color
+    withOpacity: function withOpacity(color, opacity) {
+      // If color is already in rgba format
+      if (color.startsWith('rgba')) {
+        return color.replace(/[^,]+(?=\s*\)$)/, opacity.toString());
+      }
+
+      // If color is in hex format
+      if (color.startsWith('#')) {
+        // Convert hex to RGB
+        var hex = color.replace('#', '');
+        var r = parseInt(hex.substring(0, 2), 16);
+        var g = parseInt(hex.substring(2, 4), 16);
+        var b = parseInt(hex.substring(4, 6), 16);
+        return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+      }
+
+      // Default return if format is not recognized
+      return color;
+    }
+  };
+};