@nobak/design-system 1.0.0

package/lib/styles/accessibilityTokens.js

@@ -0,0 +1,72 @@
+// src/styles/accessibilityTokens.ts
+
+/**
+ * Defines foundational accessibility tokens that are generally not theme-dependent.
+ * These values provide baseline measurements and constants for building accessible components.
+ */
+export var accessibility = {
+  /**
+   * Minimum touch target dimensions based on common platform guidelines (e.g., Apple HIG, Android Material Design).
+   * Values are typically in density-independent pixels (dp) or points.
+   */
+  touchTarget: {
+    minimum: {
+      width: 44,
+      height: 44
+    },
+    /** Recommended padding to add around a smaller visual element to meet minimum touch target size. */
+    paddingForSmallIcon: {
+      // Example: If an icon is 24x24, add 10 padding on each side ( (44-24)/2 = 10 )
+      // This is more of a guideline for component implementation.
+    }
+  },
+  /**
+   * Properties for focus indicators. Color should come from the theme (e.g., semantic.border.focus).
+   */
+  focusIndicator: {
+    outlineWidth: 2 // Common width for web focus outlines
+    // outlineStyle: 'solid', // Usually 'solid' or 'dotted'
+  },
+  /**
+   * Conceptual scaling factors for demonstrating large text adaptation.
+   * Actual large text support relies on OS settings and responsive typography.
+   */
+  fontScale: {
+    "default": 1,
+    large: 1.2,
+    // 20% larger
+    extraLarge: 1.5 // 50% larger
+  },
+  /**
+   * Common accessibility roles used in React Native.
+   * Providing them here can help maintain consistency if needed, though direct string usage is also common.
+   */
+  roles: {
+    button: 'button',
+    link: 'link',
+    header: 'header',
+    search: 'search',
+    image: 'image',
+    keyboardkey: 'keyboardkey',
+    text: 'text',
+    adjustable: 'adjustable',
+    summary: 'summary',
+    alert: 'alert',
+    checkbox: 'checkbox',
+    combobox: 'combobox',
+    menu: 'menu',
+    menubar: 'menubar',
+    menuitem: 'menuitem',
+    progressbar: 'progressbar',
+    radio: 'radio',
+    radiogroup: 'radiogroup',
+    scrollbar: 'scrollbar',
+    spinbutton: 'spinbutton',
+    "switch": 'switch',
+    tab: 'tab',
+    tablist: 'tablist',
+    timer: 'timer',
+    toolbar: 'toolbar',
+    none: 'none'
+  }
+};

package/lib/styles/borderWidth.js

@@ -0,0 +1,10 @@
+/**
+ * Border width scale with semantic naming
+ */
+export var borderWidth = {
+  none: 0,
+  thin: 1,
+  thick: 2,
+  thicker: 4,
+  thickest: 8
+};

package/lib/styles/colors.js

@@ -0,0 +1,303 @@
+// src/design-tokens/colors.ts
+// Fintech Color Design System with Semantic Token Architecture
+// Following Adobe Spectrum patterns: Global → Semantic → Component
+
+// ===========================
+// LAYER 1: GLOBAL COLOR TOKENS
+// Raw color values - the source of truth
+// ===========================
+
+export var globalColors = {
+  gray: {
+    100: '#fafafa',
+    200: '#f5f5f5',
+    300: '#eeeeee',
+    400: '#e0e0e0',
+    500: '#bdbdbd',
+    600: '#9e9e9e',
+    700: '#757575',
+    800: '#616161',
+    900: '#424242',
+    1000: '#373737',
+    1100: '#2c2c2c',
+    1200: '#212121',
+    1300: '#1a1a1a',
+    1400: '#141414',
+    1500: '#0f0f0f',
+    1600: '#0a0a0a',
+    1700: '#060606',
+    1800: '#030303'
+  },
+  neutral: {
+    100: '#fafafa',
+    200: '#f5f5f5',
+    300: '#eeeeee',
+    400: '#e0e0e0',
+    500: '#bdbdbd',
+    600: '#9e9e9e',
+    700: '#757575',
+    800: '#616161',
+    900: '#424242',
+    1000: '#373737',
+    1100: '#2c2c2c',
+    1200: '#212121',
+    1300: '#1a1a1a',
+    1400: '#141414',
+    1500: '#0f0f0f',
+    1600: '#0a0a0a',
+    1700: '#060606',
+    1800: '#030303'
+  },
+  blue: {
+    100: '#e3f2fd',
+    200: '#bbdefb',
+    300: '#90caf9',
+    400: '#64b5f6',
+    500: '#42a5f5',
+    600: '#2196f3',
+    700: '#1e88e5',
+    800: '#1976d2',
+    900: '#1565c0',
+    1000: '#1354a8',
+    1100: '#11458f',
+    1200: '#0f3777',
+    1300: '#0d2a5f',
+    1400: '#0b1e47',
+    1500: '#09142f',
+    1600: '#070b1f',
+    1700: '#050712',
+    1800: '#030408'
+  },
+  emerald: {
+    100: '#ecfdf5',
+    200: '#d1fae5',
+    300: '#a7f3d0',
+    400: '#6ee7b7',
+    500: '#34d399',
+    600: '#10b981',
+    700: '#059669',
+    800: '#047857',
+    900: '#065f46',
+    1000: '#064e3b',
+    1100: '#053d30',
+    1200: '#042c25',
+    1300: '#031b1a',
+    1400: '#021210',
+    1500: '#010a08',
+    1600: '#010605',
+    1700: '#000403',
+    1800: '#000201'
+  },
+  red: {
+    100: '#ffebee',
+    200: '#ffcdd2',
+    300: '#ef9a9a',
+    400: '#e57373',
+    500: '#ef5350',
+    600: '#f44336',
+    700: '#e53935',
+    800: '#d32f2f',
+    900: '#c62828',
+    1000: '#b71c1c',
+    1100: '#a31818',
+    1200: '#8f1414',
+    1300: '#7c1111',
+    1400: '#680d0d',
+    1500: '#540a0a',
+    1600: '#400707',
+    1700: '#2c0505',
+    1800: '#180202'
+  },
+  amber: {
+    100: '#fff8e1',
+    200: '#ffecb3',
+    300: '#ffe082',
+    400: '#ffd54f',
+    500: '#ffca28',
+    600: '#ffc107',
+    700: '#ffb300',
+    800: '#ffa000',
+    900: '#ff8f00',
+    1000: '#f57f00',
+    1100: '#ef6c00',
+    1200: '#e65100',
+    1300: '#d84315',
+    1400: '#ca3612',
+    1500: '#bc2a0f',
+    1600: '#ae1e0c',
+    1700: '#a01209',
+    1800: '#920606'
+  },
+  violet: {
+    100: '#f3e5f5',
+    200: '#e1bee7',
+    300: '#ce93d8',
+    400: '#ba68c8',
+    500: '#ab47bc',
+    600: '#9c27b0',
+    700: '#8e24aa',
+    800: '#7b1fa2',
+    900: '#6a1b9a',
+    1000: '#5d1787',
+    1100: '#501374',
+    1200: '#430f61',
+    1300: '#360b4e',
+    1400: '#29083b',
+    1500: '#1c0528',
+    1600: '#120318',
+    1700: '#09020d',
+    1800: '#040105'
+  },
+  orange: {
+    100: '#fff3e0',
+    200: '#ffe0b2',
+    300: '#ffcc80',
+    400: '#ffb74d',
+    500: '#ffa726',
+    600: '#ff9800',
+    700: '#fb8c00',
+    800: '#f57c00',
+    900: '#ef6c00',
+    1000: '#e65100',
+    1100: '#d84315',
+    1200: '#bf360c',
+    1300: '#a52a02',
+    1400: '#8c1b00',
+    1500: '#731000',
+    1600: '#5a0a00',
+    1700: '#3e0500',
+    1800: '#220200'
+  },
+  purple: {
+    100: '#f3e5f5',
+    200: '#e1bee7',
+    300: '#ce93d8',
+    400: '#ba68c8',
+    500: '#ab47bc',
+    600: '#9c27b0',
+    700: '#8e24aa',
+    800: '#7b1fa2',
+    900: '#6a1b9a',
+    1000: '#5d1787',
+    1100: '#501374',
+    1200: '#430f61',
+    1300: '#360b4e',
+    1400: '#29083b',
+    1500: '#1c0528',
+    1600: '#120318',
+    1700: '#09020d',
+    1800: '#040105'
+  },
+  rose: {
+    100: '#ffe4e6',
+    200: '#fecdd3',
+    300: '#fda4af',
+    400: '#fb7185',
+    500: '#f43f5e',
+    600: '#e11d48',
+    700: '#be123c',
+    800: '#9f1239',
+    900: '#881337',
+    1000: '#6b0f32',
+    1100: '#550b2d',
+    1200: '#3f0b29',
+    1300: '#2b0a23',
+    1400: '#1e081c',
+    1500: '#140614',
+    1600: '#0d040d',
+    1700: '#080208',
+    1800: '#040104'
+  },
+  cyan: {
+    100: '#e0f7fa',
+    200: '#b2ebf2',
+    300: '#80deea',
+    400: '#4dd0e1',
+    500: '#26c6da',
+    600: '#00bcd4',
+    700: '#00acc1',
+    800: '#0097a7',
+    900: '#00838f',
+    1000: '#006064',
+    1100: '#004d40',
+    1200: '#00352d',
+    1300: '#00241e',
+    1400: '#001a14',
+    1500: '#00110d',
+    1600: '#000a08',
+    1700: '#000504',
+    1800: '#000202'
+  },
+  indigo: {
+    100: '#e8eaf6',
+    200: '#c5cae9',
+    300: '#9fa8da',
+    400: '#7986cb',
+    500: '#5c6bc0',
+    600: '#3f51b5',
+    700: '#3949ab',
+    800: '#303f9f',
+    900: '#283593',
+    1000: '#1a237e',
+    1100: '#0d0d7a',
+    1200: '#0a0a5c',
+    1300: '#07073e',
+    1400: '#05052f',
+    1500: '#030320',
+    1600: '#020215',
+    1700: '#01010b',
+    1800: '#000106'
+  },
+  pink: {
+    100: '#fce4ec',
+    200: '#f8bbd0',
+    300: '#f48fb1',
+    400: '#f06292',
+    500: '#ec407a',
+    600: '#e91e63',
+    700: '#d81b60',
+    800: '#c2185b',
+    900: '#ad1457',
+    1000: '#880e4f',
+    1100: '#6a1b7a',
+    1200: '#4a148c',
+    1300: '#38006b',
+    1400: '#2a004f',
+    1500: '#1c0033',
+    1600: '#120022',
+    1700: '#0a0011',
+    1800: '#040008'
+  },
+  // Static colors
+  "static": {
+    transparent: 'transparent',
+    white: '#ffffff',
+    black: '#000000'
+  }
+};
+
+// ===========================
+// TYPE DEFINITIONS
+// ===========================
+
+// Color scale from 100 to 1800
+
+// Type for a complete color scale
+
+// ===========================
+// UTILITY TYPES
+// ===========================
+
+// Type for token paths
+
+// Token path types
+
+// ===========================
+// EXPORTS
+// ===========================
+
+// Main colors export
+export var colors = {
+  global: globalColors
+};
+export default colors;

package/lib/styles/elevation.js

@@ -0,0 +1,240 @@
+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); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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; }
+/**
+ * Skia Shadows Configuration
+ * 
+ * Centralized configuration for multi-layer Skia shadows.
+ * Lives alongside other design system tokens.
+ */
+
+/**
+ * Single shadow layer configuration
+ */
+
+/**
+ * Multi-layer shadow configuration for each elevation level
+ */
+export var skiaShadows = {
+  // Inset: Pressed/recessed appearance
+  inset: [{
+    dx: 0,
+    dy: 0,
+    blur: 4,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.15)',
+    inner: true
+  }],
+  // Small: Subtle elevation for gentle separation
+  small: [{
+    dx: 0,
+    dy: 1,
+    blur: 2,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.04)'
+  }, {
+    dx: 0,
+    dy: 1,
+    blur: 1,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.06)'
+  }],
+  // Standard: Default elevation for cards and containers
+  standard: [{
+    dx: 0,
+    dy: 1,
+    blur: 3,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.12)'
+  }, {
+    dx: 0,
+    dy: 1,
+    blur: 2,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.24)'
+  }],
+  // Medium: Elevated components like active cards and dropdowns
+  medium: [{
+    dx: 0,
+    dy: 3,
+    blur: 6,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.15)'
+  }, {
+    dx: 0,
+    dy: 2,
+    blur: 4,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.12)'
+  }, {
+    dx: 0,
+    dy: 1,
+    blur: 2,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.08)'
+  }],
+  // Large: Prominent elements like floating action buttons
+  large: [{
+    dx: 0,
+    dy: 6,
+    blur: 12,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.18)'
+  }, {
+    dx: 0,
+    dy: 4,
+    blur: 8,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.12)'
+  }, {
+    dx: 0,
+    dy: 2,
+    blur: 4,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.08)'
+  }],
+  // XLarge: Elements that float above most content
+  xLarge: [{
+    dx: 0,
+    dy: 10,
+    blur: 20,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.22)'
+  }, {
+    dx: 0,
+    dy: 6,
+    blur: 12,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.15)'
+  }, {
+    dx: 0,
+    dy: 3,
+    blur: 6,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.10)'
+  }],
+  // Overlay: Modal overlays and critical notifications
+  overlay: [{
+    dx: 0,
+    dy: 16,
+    blur: 32,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.24)'
+  }, {
+    dx: 0,
+    dy: 8,
+    blur: 16,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.18)'
+  }, {
+    dx: 0,
+    dy: 4,
+    blur: 8,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.12)'
+  }],
+  // XXLarge: Highest elevation for critical dialogs
+  xxLarge: [{
+    dx: 0,
+    dy: 24,
+    blur: 48,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.28)'
+  }, {
+    dx: 0,
+    dy: 12,
+    blur: 24,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.20)'
+  }, {
+    dx: 0,
+    dy: 6,
+    blur: 12,
+    spread: 0,
+    color: 'rgba(0, 0, 0, 0.14)'
+  }]
+};
+
+/**
+ * Type definitions
+ */
+
+/**
+ * Utility function to get shadow configuration
+ */
+
+export var getSkiaShadows = function getSkiaShadows(level) {
+  return _toConsumableArray(skiaShadows[level]); // Creates a shallow copy
+};
+/**
+ * Elevation metadata for documentation and z-index
+ */
+export var elevationMeta = {
+  inset: {
+    name: 'Inset',
+    description: 'Elements that appear pressed into the surface',
+    usage: ['Pressed buttons', 'Active input fields', 'Inset panels'],
+    zIndex: -1
+  },
+  small: {
+    name: 'Small',
+    description: 'Subtle elevation for gentle separation',
+    usage: ['Subtle borders', 'Gentle hover states', 'Light separators'],
+    zIndex: 1
+  },
+  standard: {
+    name: 'Standard',
+    description: 'Default elevation for cards and containers',
+    usage: ['Cards', 'Panels', 'Content blocks', 'Default buttons'],
+    zIndex: 2
+  },
+  medium: {
+    name: 'Medium',
+    description: 'Elevated components like active cards and dropdowns',
+    usage: ['Active cards', 'Hover states', 'Selected items', 'Secondary buttons'],
+    zIndex: 3
+  },
+  large: {
+    name: 'Large',
+    description: 'Prominent elements like floating action buttons',
+    usage: ['Floating action buttons', 'Primary CTAs', 'Important alerts'],
+    zIndex: 4
+  },
+  xLarge: {
+    name: 'X-Large',
+    description: 'Elements that float above most content',
+    usage: ['Dropdowns', 'Tooltips', 'Popovers', 'Context menus'],
+    zIndex: 5
+  },
+  overlay: {
+    name: 'Overlay',
+    description: 'Modal overlays and critical notifications',
+    usage: ['Modal dialogs', 'Overlays', 'Notifications', 'Drawers'],
+    zIndex: 1000
+  },
+  xxLarge: {
+    name: 'XX-Large',
+    description: 'Highest elevation for critical dialogs',
+    usage: ['System alerts', 'Critical errors', 'Emergency dialogs'],
+    zIndex: 2000
+  }
+};
+
+/**
+ * Get elevation info with z-index
+ */
+export var getElevationInfo = function getElevationInfo(level) {
+  return _objectSpread({
+    level: level,
+    shadows: getSkiaShadows(level)
+  }, elevationMeta[level]);
+};