@umituz/react-native-design-system 4.25.93 → 4.25.94

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/theme/core/colors/DarkColors.ts +93 -93
  3. package/src/theme/core/colors/LightColors.ts +95 -95
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-design-system",
3
- "version": "4.25.93",
3
+ "version": "4.25.94",
4
4
  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./dist/index.d.ts",
package/src/theme/core/colors/DarkColors.ts CHANGED
@@ -1,74 +1,74 @@
1
1
  /**
2
2
  * DARK THEME COLORS
3
- *
4
- * Dark theme color palette with warm orange harmony
3
+ *
4
+ * Dark theme color palette — Forest Green & Warm Orange (MoveLog theme)
5
5
  */
6
6
 
7
7
  export const darkColors = {
8
- // PRIMARY BRAND COLORS - Warm Orange & Harmony Bloom (Dark Mode)
9
- primary: '#FF8C42', // Warm Orange for dark backgrounds
10
- primaryLight: '#FFA07A', // Light Salmon
11
- primaryDark: '#FF6B35', // Vibrant Orange
12
-
13
- secondary: '#FFCC99', // Light Peach for dark backgrounds
14
- secondaryLight: '#FFD4A3', // Warm Beige
15
- secondaryDark: '#FFB88C', // Soft Peach
16
-
17
- accent: '#FFB6C1', // Light Pink (Bloom) for dark backgrounds
18
- accentLight: '#FFA07A', // Light Salmon
19
- accentDark: '#FF8C69', // Salmon
20
-
21
- // MATERIAL DESIGN 3 - ON COLORS (Dark mode text colors)
22
- onPrimary: '#000000', // Dark text on light primary
23
- onSecondary: '#000000', // Dark text on light secondary
24
- onSuccess: '#000000', // Dark text on light success
25
- onError: '#FFFFFF', // Light text on dark error
26
- onWarning: '#000000', // Dark text on light warning
27
- onInfo: '#000000', // Dark text on light info
28
- onSurface: '#E2E8F0', // Light text on dark surface
29
- onBackground: '#F1F5F9', // Light text on dark background
30
- onSurfaceDisabled: '#64748B', // Disabled dark mode text
31
- onSurfaceVariant: '#CBD5E1', // Text on dark surface variant
32
-
33
- // MATERIAL DESIGN 3 - CONTAINER COLORS (Dark mode containers)
34
- primaryContainer: '#CC4A1F', // Dark orange container
35
- onPrimaryContainer: '#FFE4CD', // Light text on dark primary container
36
- secondaryContainer: '#CC8C5F', // Dark peach container
37
- onSecondaryContainer: '#FFF8DC', // Light text on dark secondary container
38
- errorContainer: '#7F1D1D', // Dark red container
39
- onErrorContainer: '#FEE2E2', // Light text on dark error container
40
-
41
- // MATERIAL DESIGN 3 - OUTLINE (Dark mode outlines)
42
- outline: '#475569', // Medium gray outline for dark mode
43
- outlineVariant: '#334155', // Darker outline variant
44
- outlineDisabled: '#334155', // Disabled outline
8
+ // PRIMARY BRAND COLORS - Forest Green (lighter for dark backgrounds)
9
+ primary: '#5AAF7F', // Lighter Forest Green for dark mode
10
+ primaryLight: '#6BC48F', // Light Green
11
+ primaryDark: '#4A9B6F', // Forest Green
12
+
13
+ secondary: '#FF8C42', // Warm Orange
14
+ secondaryLight: '#FFA06A', // Light Orange
15
+ secondaryDark: '#E57030', // Dark Orange
16
+
17
+ accent: '#FF8C42', // Warm Orange
18
+ accentLight: '#FFA06A', // Light Orange
19
+ accentDark: '#E57030', // Dark Orange
20
+
21
+ // MATERIAL DESIGN 3 - ON COLORS (Dark mode)
22
+ onPrimary: '#000000',
23
+ onSecondary: '#000000',
24
+ onSuccess: '#000000',
25
+ onError: '#FFFFFF',
26
+ onWarning: '#000000',
27
+ onInfo: '#000000',
28
+ onSurface: '#E2E8F0',
29
+ onBackground: '#F1F5F9',
30
+ onSurfaceDisabled: '#6C757D',
31
+ onSurfaceVariant: '#98989D',
32
+
33
+ // MATERIAL DESIGN 3 - CONTAINER COLORS (Dark mode)
34
+ primaryContainer: '#2D6B4A', // Dark green container
35
+ onPrimaryContainer: '#D1F5E3', // Light green text
36
+ secondaryContainer: '#CC5500', // Dark orange container
37
+ onSecondaryContainer: '#FFE8D4', // Light text
38
+ errorContainer: '#7F1D1D',
39
+ onErrorContainer: '#FEE2E2',
40
+
41
+ // MATERIAL DESIGN 3 - OUTLINE (Dark mode)
42
+ outline: '#48484A',
43
+ outlineVariant: '#3A3A3C',
44
+ outlineDisabled: '#3A3A3C',
45
45
 
46
46
  // SEMANTIC UI COLORS (slightly lighter for dark backgrounds)
47
- success: '#34D399', // Lighter green for dark mode
48
- successLight: '#34D399',
49
- successDark: '#059669',
47
+ success: '#5AAF7F', // Lighter green for dark mode
48
+ successLight: '#6BC48F',
49
+ successDark: '#4A9B6F',
50
50
 
51
51
  error: '#EF4444',
52
52
  errorLight: '#F87171',
53
53
  errorDark: '#DC2626',
54
54
 
55
- warning: '#F59E0B',
56
- warningLight: '#FBBF24',
57
- warningDark: '#D97706',
55
+ warning: '#FFC107',
56
+ warningLight: '#FFD54F',
57
+ warningDark: '#E6A800',
58
58
 
59
- info: '#FF8C42', // Warm Orange for info (dark mode)
60
- infoLight: '#FFA07A', // Light Salmon
61
- infoDark: '#FF6347', // Tomato
59
+ info: '#FF8C42',
60
+ infoLight: '#FFA06A',
61
+ infoDark: '#E57030',
62
62
 
63
- // SEMANTIC CONTAINER COLORS (Same as light mode for type consistency)
64
- successContainer: '#D1FAE5', // Same as light mode for type consistency
65
- onSuccessContainer: '#065F46', // Same as light mode for type consistency
66
- warningContainer: '#FEF3C7', // Same as light mode for type consistency
67
- onWarningContainer: '#92400E', // Same as light mode for type consistency
68
- infoContainer: '#FFE4CD', // Light orange container
69
- onInfoContainer: '#CC4A1F', // Text on info container
63
+ // SEMANTIC CONTAINER COLORS
64
+ successContainer: '#D1F5E3',
65
+ onSuccessContainer: '#2D6B4A',
66
+ warningContainer: '#FEF3C7',
67
+ onWarningContainer: '#92400E',
68
+ infoContainer: '#FFE8D4',
69
+ onInfoContainer: '#CC5500',
70
70
 
71
- // GRAYSCALE PALETTE (Same as light mode for type consistency)
71
+ // GRAYSCALE PALETTE
72
72
  gray50: '#FAFAFA',
73
73
  gray100: '#F4F4F5',
74
74
  gray200: '#E4E4E7',
@@ -80,65 +80,65 @@ export const darkColors = {
80
80
  gray800: '#27272A',
81
81
  gray900: '#18181B',
82
82
 
83
- // BACKGROUND COLORS (dark mode - true dark backgrounds)
84
- backgroundPrimary: '#0F172A', // Slate 900 - Deep dark background
85
- backgroundSecondary: '#1E293B', // Slate 800 - Slightly lighter
83
+ // BACKGROUND COLORS — MoveLog's signature dark palette
84
+ backgroundPrimary: '#1C1C1E', // MoveLog dark root
85
+ backgroundSecondary: '#2C2C2E', // MoveLog dark default
86
86
 
87
- surface: '#1E293B', // Slate 800 - Card/surface backgrounds
88
- surfaceVariant: '#334155', // Slate 700 - Variant surfaces
89
- surfaceSecondary: '#334155', // Alias for surfaceVariant
90
- surfaceDisabled: '#475569', // Slate 600 - Disabled surfaces
87
+ surface: '#2C2C2E', // MoveLog backgroundDefault
88
+ surfaceVariant: '#3A3A3C', // MoveLog backgroundSecondary
89
+ surfaceSecondary: '#3A3A3C',
90
+ surfaceDisabled: '#48484A', // MoveLog backgroundTertiary
91
91
 
92
- // TEXT COLORS (dark mode - light text on dark backgrounds)
93
- textPrimary: '#F1F5F9', // Slate 100 - Primary text (very light)
94
- textSecondary: '#CBD5E1', // Slate 300 - Secondary text
95
- textTertiary: '#94A3B8', // Slate 400 - Tertiary text
96
- textDisabled: '#64748B', // Slate 500 - Disabled text
97
- textInverse: '#0F172A', // Dark text for light backgrounds
92
+ // TEXT COLORS (dark mode)
93
+ textPrimary: '#FFFFFF', // MoveLog dark text
94
+ textSecondary: '#98989D', // MoveLog dark textSecondary
95
+ textTertiary: '#6C757D',
96
+ textDisabled: '#48484A',
97
+ textInverse: '#1C1C1E',
98
98
 
99
- // BORDER COLORS (dark mode - subtle borders)
100
- border: '#334155', // Slate 700 - Default border
101
- borderLight: '#475569', // Slate 600 - Light border
102
- borderMedium: '#64748B', // Slate 500 - Medium border
103
- borderFocus: '#60A5FA', // Blue 400 - Focus border (lighter)
104
- borderDisabled: '#475569', // Slate 600 - Disabled border
99
+ // BORDER COLORS (dark mode)
100
+ border: '#48484A', // MoveLog dark border
101
+ borderLight: '#3A3A3C',
102
+ borderMedium: '#636366',
103
+ borderFocus: '#5AAF7F', // Green focus
104
+ borderDisabled: '#3A3A3C',
105
105
 
106
- // COMPONENT-SPECIFIC COLORS (dark mode specific)
107
- buttonPrimary: '#FF8C42', // Warm Orange for dark mode
108
- buttonSecondary: '#FFCC99', // Light Peach for dark mode
106
+ // COMPONENT-SPECIFIC COLORS (dark mode)
107
+ buttonPrimary: '#5AAF7F',
108
+ buttonSecondary: '#FF8C42',
109
109
 
110
- inputBackground: '#1E293B', // Dark input background
111
- inputBorder: '#475569', // Subtle input border
110
+ inputBackground: '#2C2C2E',
111
+ inputBorder: '#48484A',
112
112
 
113
- cardBackground: '#1E293B', // Dark card background
113
+ cardBackground: '#2C2C2E',
114
114
 
115
115
  // COLOR ALIASES
116
- text: '#F1F5F9', // Alias for textPrimary
117
- background: '#0F172A', // Alias for backgroundPrimary
118
- card: '#1E293B', // Alias for cardBackground
116
+ text: '#FFFFFF',
117
+ background: '#1C1C1E',
118
+ card: '#2C2C2E',
119
119
 
120
120
  // SPECIAL COLORS
121
121
  transparent: 'transparent',
122
122
  black: '#000000',
123
123
  white: '#FFFFFF',
124
124
 
125
- // RGBA OVERLAY COLORS (Same as light mode for type consistency)
126
- modalOverlay: 'rgba(0, 0, 0, 0.5)',
125
+ // RGBA OVERLAY COLORS
126
+ modalOverlay: 'rgba(0, 0, 0, 0.7)',
127
127
  overlaySubtle: 'rgba(0, 0, 0, 0.05)',
128
128
  overlayLight: 'rgba(0, 0, 0, 0.1)',
129
- overlayMedium: 'rgba(0, 0, 0, 0.3)',
130
- overlayBackground: 'rgba(0, 0, 0, 0.05)',
129
+ overlayMedium: 'rgba(0, 0, 0, 0.4)',
130
+ overlayBackground: 'rgba(0, 0, 0, 0.1)',
131
131
 
132
132
  whiteOverlay: 'rgba(255, 255, 255, 0.2)',
133
133
  whiteOverlayStrong: 'rgba(255, 255, 255, 0.95)',
134
- whiteOverlayBorder: 'rgba(255, 255, 255, 0.5)',
134
+ whiteOverlayBorder: 'rgba(255, 255, 255, 0.3)',
135
135
 
136
136
  textWhiteOpacity: 'rgba(255, 255, 255, 0.8)',
137
137
 
138
138
  errorBackground: 'rgba(239, 68, 68, 0.1)',
139
- primaryBackground: 'rgba(255, 140, 66, 0.1)', // Orange background (dark mode)
139
+ primaryBackground: 'rgba(90, 175, 127, 0.15)', // Green overlay (dark mode)
140
140
 
141
- cardOverlay: 'rgba(0, 0, 0, 0.15)',
141
+ cardOverlay: 'rgba(0, 0, 0, 0.25)',
142
142
 
143
- inputBackground_RGBA: 'rgba(248, 250, 252, 0.9)',
144
- };
143
+ inputBackground_RGBA: 'rgba(44, 44, 46, 0.9)',
144
+ };
package/src/theme/core/colors/LightColors.ts CHANGED
@@ -1,128 +1,128 @@
1
1
  /**
2
2
  * LIGHT THEME COLORS
3
- *
4
- * Light theme color palette with warm orange harmony
3
+ *
4
+ * Light theme color palette — Forest Green & Warm Orange (MoveLog theme)
5
5
  */
6
6
 
7
7
  export const lightColors = {
8
- // PRIMARY BRAND COLORS - Warm Orange & Harmony Bloom
9
- primary: '#FF6B35', // Vibrant Orange
10
- primaryLight: '#FF8C42', // Warm Orange
11
- primaryDark: '#FF4500', // Orange Red
12
-
13
- secondary: '#FFB88C', // Soft Peach
14
- secondaryLight: '#FFCC99', // Light Peach
15
- secondaryDark: '#FF8C69', // Salmon
16
-
17
- accent: '#FFB6C1', // Light Pink (Bloom)
18
- accentLight: '#FFA07A', // Light Salmon
19
- accentDark: '#FF8C69', // Salmon
20
-
21
- // MATERIAL DESIGN 3 - ON COLORS (Text on colored backgrounds)
22
- onPrimary: '#FFFFFF', // Text on primary background
23
- onSecondary: '#FFFFFF', // Text on secondary background
24
- onSuccess: '#FFFFFF', // Text on success background
25
- onError: '#FFFFFF', // Text on error background
26
- onWarning: '#000000', // Text on warning background
27
- onInfo: '#FFFFFF', // Text on info background
28
- onSurface: '#1E293B', // Text on surface
29
- onBackground: '#1E293B', // Text on background
30
- onSurfaceDisabled: '#CBD5E1', // Disabled text color
31
- onSurfaceVariant: '#64748B', // Text on surface variant
32
-
33
- // MATERIAL DESIGN 3 - CONTAINER COLORS (Lighter versions for containers)
34
- primaryContainer: '#FFE4CD', // Light orange container
35
- onPrimaryContainer: '#CC4A1F', // Text on primary container
36
- secondaryContainer: '#FFF8DC', // Light peach container
37
- onSecondaryContainer: '#CC8C5F', // Text on secondary container
38
- errorContainer: '#FEE2E2', // Light container using error
39
- onErrorContainer: '#991B1B', // Text on error container
8
+ // PRIMARY BRAND COLORS - Forest Green (MoveLog)
9
+ primary: '#4A9B6F', // Forest Green
10
+ primaryLight: '#6BC48F', // Light Green
11
+ primaryDark: '#3A7A5A', // Deep Green
12
+
13
+ secondary: '#FF8C42', // Warm Orange (accent)
14
+ secondaryLight: '#FFA06A', // Light Orange
15
+ secondaryDark: '#E57030', // Dark Orange
16
+
17
+ accent: '#FF8C42', // Warm Orange
18
+ accentLight: '#FFA06A', // Light Orange
19
+ accentDark: '#E57030', // Dark Orange
20
+
21
+ // MATERIAL DESIGN 3 - ON COLORS
22
+ onPrimary: '#FFFFFF',
23
+ onSecondary: '#FFFFFF',
24
+ onSuccess: '#FFFFFF',
25
+ onError: '#FFFFFF',
26
+ onWarning: '#000000',
27
+ onInfo: '#FFFFFF',
28
+ onSurface: '#1C1C1E',
29
+ onBackground: '#1C1C1E',
30
+ onSurfaceDisabled: '#C7C7CC',
31
+ onSurfaceVariant: '#6C757D',
32
+
33
+ // MATERIAL DESIGN 3 - CONTAINER COLORS
34
+ primaryContainer: '#D1F5E3', // Light green container
35
+ onPrimaryContainer: '#2D6B4A', // Dark green text
36
+ secondaryContainer: '#FFE8D4', // Light orange container
37
+ onSecondaryContainer: '#CC5500', // Dark orange text
38
+ errorContainer: '#FEE2E2',
39
+ onErrorContainer: '#991B1B',
40
40
 
41
41
  // MATERIAL DESIGN 3 - OUTLINE
42
- outline: '#CBD5E1', // Default outline color
43
- outlineVariant: '#E2E8F0', // Lighter outline variant
44
- outlineDisabled: '#E2E8F0', // Disabled outline color
42
+ outline: '#C7C7CC',
43
+ outlineVariant: '#E5E5EA',
44
+ outlineDisabled: '#E5E5EA',
45
45
 
46
46
  // SEMANTIC UI COLORS
47
- success: '#10B981',
48
- successLight: '#34D399',
49
- successDark: '#059669',
50
-
51
- error: '#EF4444',
52
- errorLight: '#F87171',
53
- errorDark: '#DC2626',
54
-
55
- warning: '#F59E0B',
56
- warningLight: '#FBBF24',
57
- warningDark: '#D97706',
58
-
59
- info: '#FF8C42', // Warm Orange for info
60
- infoLight: '#FFA07A', // Light Salmon
61
- infoDark: '#FF6347', // Tomato
62
-
63
- // SEMANTIC CONTAINER COLORS (Light mode)
64
- successContainer: '#D1FAE5', // Light container for success states
65
- onSuccessContainer: '#065F46', // Text on success container
66
- warningContainer: '#FEF3C7', // Light container for warning states
67
- onWarningContainer: '#92400E', // Text on warning container
68
- infoContainer: '#FFE4CD', // Light orange container for info states
69
- onInfoContainer: '#CC4A1F', // Text on info container
47
+ success: '#4A9B6F', // Forest Green (same as primary)
48
+ successLight: '#6BC48F',
49
+ successDark: '#3A7A5A',
50
+
51
+ error: '#DC3545',
52
+ errorLight: '#E87070',
53
+ errorDark: '#B02A37',
54
+
55
+ warning: '#FFC107',
56
+ warningLight: '#FFD54F',
57
+ warningDark: '#E6A800',
58
+
59
+ info: '#FF8C42', // Warm Orange for info
60
+ infoLight: '#FFA06A',
61
+ infoDark: '#E57030',
62
+
63
+ // SEMANTIC CONTAINER COLORS
64
+ successContainer: '#D1F5E3',
65
+ onSuccessContainer: '#2D6B4A',
66
+ warningContainer: '#FFF8DC',
67
+ onWarningContainer: '#92400E',
68
+ infoContainer: '#FFE8D4',
69
+ onInfoContainer: '#CC5500',
70
70
 
71
71
  // GRAYSCALE PALETTE
72
72
  gray50: '#FAFAFA',
73
73
  gray100: '#F4F4F5',
74
- gray200: '#E4E4E7',
75
- gray300: '#D4D4D8',
76
- gray400: '#A1A1AA',
77
- gray500: '#71717A',
78
- gray600: '#52525B',
79
- gray700: '#3F3F46',
80
- gray800: '#27272A',
81
- gray900: '#18181B',
82
-
83
- // BACKGROUND COLORS
74
+ gray200: '#E5E5EA',
75
+ gray300: '#D1D1D6',
76
+ gray400: '#AEAEB2',
77
+ gray500: '#8E8E93',
78
+ gray600: '#636366',
79
+ gray700: '#48484A',
80
+ gray800: '#3A3A3C',
81
+ gray900: '#1C1C1E',
82
+
83
+ // BACKGROUND COLORS — clean iOS-style whites
84
84
  backgroundPrimary: '#FFFFFF',
85
- backgroundSecondary: '#F8FAFC',
85
+ backgroundSecondary: '#F8F9FA',
86
86
 
87
87
  surface: '#FFFFFF',
88
- surfaceVariant: '#F1F5F9',
89
- surfaceSecondary: '#F1F5F9', // Alias
90
- surfaceDisabled: '#F4F4F5', // Disabled surface color
88
+ surfaceVariant: '#F2F2F7',
89
+ surfaceSecondary: '#F2F2F7',
90
+ surfaceDisabled: '#F4F4F4',
91
91
 
92
92
  // TEXT COLORS
93
- textPrimary: '#1E293B',
94
- textSecondary: '#64748B',
95
- textTertiary: '#94A3B8',
96
- textDisabled: '#CBD5E1',
93
+ textPrimary: '#1C1C1E',
94
+ textSecondary: '#6C757D',
95
+ textTertiary: '#98989D',
96
+ textDisabled: '#C7C7CC',
97
97
  textInverse: '#FFFFFF',
98
98
 
99
99
  // BORDER COLORS
100
- border: '#E2E8F0',
101
- borderLight: '#F1F5F9',
102
- borderMedium: '#CBD5E1',
103
- borderFocus: '#3B82F6',
104
- borderDisabled: '#F1F5F9',
100
+ border: '#E5E5EA',
101
+ borderLight: '#F2F2F7',
102
+ borderMedium: '#C7C7CC',
103
+ borderFocus: '#4A9B6F',
104
+ borderDisabled: '#F2F2F7',
105
105
 
106
106
  // COMPONENT-SPECIFIC COLORS
107
- buttonPrimary: '#FF6B35', // Vibrant Orange
108
- buttonSecondary: '#FFB88C', // Soft Peach
107
+ buttonPrimary: '#4A9B6F',
108
+ buttonSecondary: '#FF8C42',
109
109
 
110
110
  inputBackground: '#FFFFFF',
111
- inputBorder: '#E2E8F0',
111
+ inputBorder: '#E5E5EA',
112
112
 
113
113
  cardBackground: '#FFFFFF',
114
114
 
115
115
  // COLOR ALIASES
116
- text: '#1E293B', // Alias for textPrimary
117
- background: '#FFFFFF', // Alias for backgroundPrimary
118
- card: '#FFFFFF', // Alias for cardBackground
116
+ text: '#1C1C1E',
117
+ background: '#FFFFFF',
118
+ card: '#FFFFFF',
119
119
 
120
120
  // SPECIAL COLORS
121
121
  transparent: 'transparent',
122
122
  black: '#000000',
123
123
  white: '#FFFFFF',
124
124
 
125
- // RGBA OVERLAY COLORS (for modals, cards, etc.)
125
+ // RGBA OVERLAY COLORS
126
126
  modalOverlay: 'rgba(0, 0, 0, 0.5)',
127
127
  overlaySubtle: 'rgba(0, 0, 0, 0.05)',
128
128
  overlayLight: 'rgba(0, 0, 0, 0.1)',
@@ -135,10 +135,10 @@ export const lightColors = {
135
135
 
136
136
  textWhiteOpacity: 'rgba(255, 255, 255, 0.8)',
137
137
 
138
- errorBackground: 'rgba(239, 68, 68, 0.1)',
139
- primaryBackground: 'rgba(255, 107, 53, 0.1)', // Orange background
138
+ errorBackground: 'rgba(220, 53, 69, 0.1)',
139
+ primaryBackground: 'rgba(74, 155, 111, 0.1)', // Green background
140
140
 
141
- cardOverlay: 'rgba(0, 0, 0, 0.15)',
141
+ cardOverlay: 'rgba(0, 0, 0, 0.08)',
142
142
 
143
- inputBackground_RGBA: 'rgba(248, 250, 252, 0.9)',
144
- };
143
+ inputBackground_RGBA: 'rgba(248, 249, 250, 0.9)',
144
+ };