@umituz/react-native-design-system 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/presentation/molecules/ListItem.tsx +3 -3
  3. package/src/presentation/tokens/core/ColorPalette.ts +57 -57
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-design-system",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
5
5
  "main": "src/index.ts",
6
6
  "types": "src/index.ts",
package/src/presentation/molecules/ListItem.tsx CHANGED
@@ -16,7 +16,7 @@ export const ListItem: React.FC<ListItemProps> = ({
16
16
  const Component: React.ComponentType<any> = onPress ? TouchableOpacity : View;
17
17
 
18
18
  return (
19
- <Component style={[listItemStyles.container, disabled && listItemStyles.disabled, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
19
+ <Component style={[listItemStyles.container, disabled ? listItemStyles.disabled : undefined, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
20
20
  {leftIcon && (
21
21
  <View style={listItemStyles.iconContainer}>
22
22
  <AtomicIcon name={leftIcon} color={disabled ? 'surfaceVariant' : 'primary'} />
@@ -24,11 +24,11 @@ export const ListItem: React.FC<ListItemProps> = ({
24
24
  )}
25
25
  <View style={listItemStyles.content}>
26
26
  <AtomicText type="bodyLarge" color={disabled ? 'surfaceVariant' : 'onSurface'} numberOfLines={1}>{title}</AtomicText>
27
- {subtitle && <AtomicText type="bodySmall" color={disabled ? 'surfaceVariant' : 'surfaceVariant'} numberOfLines={2} style={listItemStyles.subtitle}>{subtitle}</AtomicText>}
27
+ {subtitle && <AtomicText type="bodySmall" color="surfaceVariant" numberOfLines={2} style={listItemStyles.subtitle}>{subtitle}</AtomicText>}
28
28
  </View>
29
29
  {rightIcon && onPress && (
30
30
  <View style={listItemStyles.iconContainer}>
31
- <AtomicIcon name={rightIcon} color={disabled ? 'surfaceVariant' : 'surfaceVariant'} />
31
+ <AtomicIcon name={rightIcon} color="surfaceVariant" />
32
32
  </View>
33
33
  )}
34
34
  </Component>
package/src/presentation/tokens/core/ColorPalette.ts CHANGED
@@ -213,54 +213,54 @@ export const lightColors = {
213
213
 
214
214
  export const darkColors = {
215
215
  // =============================================================================
216
- // PRIMARY BRAND COLORS (dark mode specific colors)
216
+ // PRIMARY BRAND COLORS (darker versions for dark mode)
217
217
  // =============================================================================
218
- primary: '#3B82F6',
219
- primaryLight: '#60A5FA',
220
- primaryDark: '#2563EB',
218
+ primary: '#60A5FA', // Lighter blue for dark backgrounds
219
+ primaryLight: '#93C5FD',
220
+ primaryDark: '#3B82F6',
221
221
 
222
- secondary: '#8B5CF6',
223
- secondaryLight: '#A78BFA',
224
- secondaryDark: '#7C3AED',
222
+ secondary: '#A78BFA', // Lighter purple for dark backgrounds
223
+ secondaryLight: '#C4B5FD',
224
+ secondaryDark: '#8B5CF6',
225
225
 
226
- accent: '#F59E0B',
227
- accentLight: '#FBBF24',
228
- accentDark: '#D97706',
226
+ accent: '#FBBF24', // Lighter amber for dark backgrounds
227
+ accentLight: '#FCD34D',
228
+ accentDark: '#F59E0B',
229
229
 
230
230
  // =============================================================================
231
- // MATERIAL DESIGN 3 - ON COLORS (Same as light mode for type consistency)
231
+ // MATERIAL DESIGN 3 - ON COLORS (Dark mode text colors)
232
232
  // =============================================================================
233
- onPrimary: '#FFFFFF', // Text on primary background (consistent)
234
- onSecondary: '#FFFFFF', // Text on secondary background (consistent)
235
- onSuccess: '#FFFFFF', // Text on success background
236
- onError: '#FFFFFF', // Text on error background
237
- onWarning: '#000000', // Text on warning background
238
- onInfo: '#FFFFFF', // Text on info background
239
- onSurface: '#1E293B', // Text on surface (same as light mode for type consistency)
240
- onBackground: '#1E293B', // Text on background (same as light mode for type consistency)
241
- onSurfaceDisabled: '#CBD5E1', // Disabled text color (same as light mode for type consistency)
233
+ onPrimary: '#000000', // Dark text on light primary
234
+ onSecondary: '#000000', // Dark text on light secondary
235
+ onSuccess: '#000000', // Dark text on light success
236
+ onError: '#FFFFFF', // Light text on dark error
237
+ onWarning: '#000000', // Dark text on light warning
238
+ onInfo: '#000000', // Dark text on light info
239
+ onSurface: '#E2E8F0', // Light text on dark surface
240
+ onBackground: '#F1F5F9', // Light text on dark background
241
+ onSurfaceDisabled: '#64748B', // Disabled dark mode text
242
242
 
243
243
  // =============================================================================
244
- // MATERIAL DESIGN 3 - CONTAINER COLORS (Same as light mode for type consistency)
244
+ // MATERIAL DESIGN 3 - CONTAINER COLORS (Dark mode containers)
245
245
  // =============================================================================
246
- primaryContainer: '#DBEAFE', // Same as light mode for type consistency
247
- onPrimaryContainer: '#1E40AF', // Same as light mode for type consistency
248
- secondaryContainer: '#E0E7FF', // Same as light mode for type consistency
249
- onSecondaryContainer: '#3730A3', // Same as light mode for type consistency
250
- errorContainer: '#FEE2E2', // Same as light mode for type consistency
251
- onErrorContainer: '#991B1B', // Same as light mode for type consistency
246
+ primaryContainer: '#1E3A8A', // Dark blue container
247
+ onPrimaryContainer: '#DBEAFE', // Light text on dark primary container
248
+ secondaryContainer: '#4C1D95', // Dark purple container
249
+ onSecondaryContainer: '#E0E7FF', // Light text on dark secondary container
250
+ errorContainer: '#7F1D1D', // Dark red container
251
+ onErrorContainer: '#FEE2E2', // Light text on dark error container
252
252
 
253
253
  // =============================================================================
254
- // MATERIAL DESIGN 3 - OUTLINE (Same as light mode for type consistency)
254
+ // MATERIAL DESIGN 3 - OUTLINE (Dark mode outlines)
255
255
  // =============================================================================
256
- outline: '#CBD5E1', // Same as light mode for type consistency
257
- outlineVariant: '#E2E8F0', // Same as light mode for type consistency
258
- outlineDisabled: '#E2E8F0', // Same as light mode for type consistency
256
+ outline: '#475569', // Medium gray outline for dark mode
257
+ outlineVariant: '#334155', // Darker outline variant
258
+ outlineDisabled: '#334155', // Disabled outline
259
259
 
260
260
  // =============================================================================
261
- // SEMANTIC UI COLORS (same as light)
261
+ // SEMANTIC UI COLORS (slightly lighter for dark backgrounds)
262
262
  // =============================================================================
263
- success: '#10B981',
263
+ success: '#34D399', // Lighter green for dark mode
264
264
  successLight: '#34D399',
265
265
  successDark: '#059669',
266
266
 
@@ -301,43 +301,43 @@ export const darkColors = {
301
301
  gray900: '#18181B',
302
302
 
303
303
  // =============================================================================
304
- // BACKGROUND COLORS (dark mode specific colors)
304
+ // BACKGROUND COLORS (dark mode - true dark backgrounds)
305
305
  // =============================================================================
306
- backgroundPrimary: '#FFFFFF',
307
- backgroundSecondary: '#F8FAFC',
306
+ backgroundPrimary: '#0F172A', // Slate 900 - Deep dark background
307
+ backgroundSecondary: '#1E293B', // Slate 800 - Slightly lighter
308
308
 
309
- surface: '#FFFFFF',
310
- surfaceVariant: '#F1F5F9',
311
- surfaceSecondary: '#F1F5F9', // Alias
312
- surfaceDisabled: '#F4F4F5', // Same as light mode for type consistency
309
+ surface: '#1E293B', // Slate 800 - Card/surface backgrounds
310
+ surfaceVariant: '#334155', // Slate 700 - Variant surfaces
311
+ surfaceSecondary: '#334155', // Alias for surfaceVariant
312
+ surfaceDisabled: '#475569', // Slate 600 - Disabled surfaces
313
313
 
314
314
  // =============================================================================
315
- // TEXT COLORS (same as light mode for type consistency)
315
+ // TEXT COLORS (dark mode - light text on dark backgrounds)
316
316
  // =============================================================================
317
- textPrimary: '#1E293B',
318
- textSecondary: '#64748B',
319
- textTertiary: '#94A3B8',
320
- textDisabled: '#CBD5E1',
321
- textInverse: '#FFFFFF',
317
+ textPrimary: '#F1F5F9', // Slate 100 - Primary text (very light)
318
+ textSecondary: '#CBD5E1', // Slate 300 - Secondary text
319
+ textTertiary: '#94A3B8', // Slate 400 - Tertiary text
320
+ textDisabled: '#64748B', // Slate 500 - Disabled text
321
+ textInverse: '#0F172A', // Dark text for light backgrounds
322
322
 
323
323
  // =============================================================================
324
- // BORDER COLORS (same as light mode for type consistency)
324
+ // BORDER COLORS (dark mode - subtle borders)
325
325
  // =============================================================================
326
- border: '#E2E8F0',
327
- borderLight: '#F1F5F9',
328
- borderMedium: '#CBD5E1',
329
- borderFocus: '#3B82F6',
326
+ border: '#334155', // Slate 700 - Default border
327
+ borderLight: '#475569', // Slate 600 - Light border
328
+ borderMedium: '#64748B', // Slate 500 - Medium border
329
+ borderFocus: '#60A5FA', // Blue 400 - Focus border (lighter)
330
330
 
331
331
  // =============================================================================
332
- // COMPONENT-SPECIFIC COLORS (same as light mode for type consistency)
332
+ // COMPONENT-SPECIFIC COLORS (dark mode specific)
333
333
  // =============================================================================
334
- buttonPrimary: '#3B82F6',
335
- buttonSecondary: '#8B5CF6',
334
+ buttonPrimary: '#60A5FA', // Lighter blue for dark mode
335
+ buttonSecondary: '#A78BFA', // Lighter purple for dark mode
336
336
 
337
- inputBackground: '#FFFFFF',
338
- inputBorder: '#E2E8F0',
337
+ inputBackground: '#1E293B', // Dark input background
338
+ inputBorder: '#475569', // Subtle input border
339
339
 
340
- cardBackground: '#FFFFFF',
340
+ cardBackground: '#1E293B', // Dark card background
341
341
 
342
342
  // =============================================================================
343
343
  // SPECIAL COLORS