@umituz/react-native-design-system 1.0.1 → 1.0.2

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/presentation/tokens/core/ColorPalette.ts +62 -62
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-design-system",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
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/tokens/core/ColorPalette.ts CHANGED
@@ -41,19 +41,19 @@ export const withAlpha = (hexColor: string, alpha: number): string => {
41
41
 
42
42
  export const lightColors = {
43
43
  // =============================================================================
44
- // PRIMARY BRAND COLORS (from theme template)
44
+ // PRIMARY BRAND COLORS
45
45
  // =============================================================================
46
- primary: '{{PRIMARY_COLOR}}',
47
- primaryLight: '{{PRIMARY_LIGHT_COLOR}}',
48
- primaryDark: '{{PRIMARY_DARK_COLOR}}',
46
+ primary: '#3B82F6',
47
+ primaryLight: '#60A5FA',
48
+ primaryDark: '#2563EB',
49
49
 
50
- secondary: '{{SECONDARY_COLOR}}',
51
- secondaryLight: '{{SECONDARY_LIGHT_COLOR}}',
52
- secondaryDark: '{{SECONDARY_DARK_COLOR}}',
50
+ secondary: '#8B5CF6',
51
+ secondaryLight: '#A78BFA',
52
+ secondaryDark: '#7C3AED',
53
53
 
54
- accent: '{{ACCENT_COLOR}}',
55
- accentLight: '{{ACCENT_LIGHT_COLOR}}',
56
- accentDark: '{{ACCENT_DARK_COLOR}}',
54
+ accent: '#F59E0B',
55
+ accentLight: '#FBBF24',
56
+ accentDark: '#D97706',
57
57
 
58
58
  // =============================================================================
59
59
  // MATERIAL DESIGN 3 - ON COLORS (Text on colored backgrounds)
@@ -129,43 +129,43 @@ export const lightColors = {
129
129
  gray900: '#18181B',
130
130
 
131
131
  // =============================================================================
132
- // BACKGROUND COLORS (from theme template)
132
+ // BACKGROUND COLORS
133
133
  // =============================================================================
134
- backgroundPrimary: '{{BACKGROUND_COLOR}}',
135
- backgroundSecondary: '{{BACKGROUND_SECONDARY_COLOR}}',
134
+ backgroundPrimary: '#FFFFFF',
135
+ backgroundSecondary: '#F8FAFC',
136
136
 
137
- surface: '{{SURFACE_COLOR}}',
138
- surfaceVariant: '{{SURFACE_SECONDARY_COLOR}}',
139
- surfaceSecondary: '{{SURFACE_SECONDARY_COLOR}}', // Alias
137
+ surface: '#FFFFFF',
138
+ surfaceVariant: '#F1F5F9',
139
+ surfaceSecondary: '#F1F5F9', // Alias
140
140
  surfaceDisabled: '#F4F4F5', // Disabled surface color
141
141
 
142
142
  // =============================================================================
143
- // TEXT COLORS (from theme template)
143
+ // TEXT COLORS
144
144
  // =============================================================================
145
- textPrimary: '{{TEXT_PRIMARY_COLOR}}',
146
- textSecondary: '{{TEXT_SECONDARY_COLOR}}',
147
- textTertiary: '{{TEXT_TERTIARY_COLOR}}',
148
- textDisabled: '{{TEXT_DISABLED_COLOR}}',
149
- textInverse: '{{TEXT_INVERSE_COLOR}}',
145
+ textPrimary: '#1E293B',
146
+ textSecondary: '#64748B',
147
+ textTertiary: '#94A3B8',
148
+ textDisabled: '#CBD5E1',
149
+ textInverse: '#FFFFFF',
150
150
 
151
151
  // =============================================================================
152
- // BORDER COLORS (from theme template)
152
+ // BORDER COLORS
153
153
  // =============================================================================
154
- border: '{{BORDER_COLOR}}',
155
- borderLight: '{{BORDER_LIGHT_COLOR}}',
156
- borderMedium: '{{BORDER_MEDIUM_COLOR}}',
157
- borderFocus: '{{BORDER_FOCUS_COLOR}}',
154
+ border: '#E2E8F0',
155
+ borderLight: '#F1F5F9',
156
+ borderMedium: '#CBD5E1',
157
+ borderFocus: '#3B82F6',
158
158
 
159
159
  // =============================================================================
160
160
  // COMPONENT-SPECIFIC COLORS
161
161
  // =============================================================================
162
- buttonPrimary: '{{PRIMARY_COLOR}}',
163
- buttonSecondary: '{{SECONDARY_COLOR}}',
162
+ buttonPrimary: '#3B82F6',
163
+ buttonSecondary: '#8B5CF6',
164
164
 
165
- inputBackground: '{{SURFACE_COLOR}}',
166
- inputBorder: '{{BORDER_COLOR}}',
165
+ inputBackground: '#FFFFFF',
166
+ inputBorder: '#E2E8F0',
167
167
 
168
- cardBackground: '{{SURFACE_COLOR}}',
168
+ cardBackground: '#FFFFFF',
169
169
 
170
170
  // =============================================================================
171
171
  // SPECIAL COLORS
@@ -204,7 +204,7 @@ export const lightColors = {
204
204
  // =============================================================================
205
205
  // GRADIENTS
206
206
  // =============================================================================
207
- gradient: ['{{PRIMARY_COLOR}}', '{{SECONDARY_COLOR}}'],
207
+ gradient: ['#3B82F6', '#8B5CF6'],
208
208
  };
209
209
 
210
210
  // =============================================================================
@@ -215,17 +215,17 @@ export const darkColors = {
215
215
  // =============================================================================
216
216
  // PRIMARY BRAND COLORS (dark mode specific colors)
217
217
  // =============================================================================
218
- primary: '{{PRIMARY_COLOR}}',
219
- primaryLight: '{{PRIMARY_LIGHT_COLOR}}',
220
- primaryDark: '{{PRIMARY_DARK_COLOR}}',
218
+ primary: '#3B82F6',
219
+ primaryLight: '#60A5FA',
220
+ primaryDark: '#2563EB',
221
221
 
222
- secondary: '{{SECONDARY_COLOR}}',
223
- secondaryLight: '{{SECONDARY_LIGHT_COLOR}}',
224
- secondaryDark: '{{SECONDARY_DARK_COLOR}}',
222
+ secondary: '#8B5CF6',
223
+ secondaryLight: '#A78BFA',
224
+ secondaryDark: '#7C3AED',
225
225
 
226
- accent: '{{ACCENT_COLOR}}',
227
- accentLight: '{{ACCENT_LIGHT_COLOR}}',
228
- accentDark: '{{ACCENT_DARK_COLOR}}',
226
+ accent: '#F59E0B',
227
+ accentLight: '#FBBF24',
228
+ accentDark: '#D97706',
229
229
 
230
230
  // =============================================================================
231
231
  // MATERIAL DESIGN 3 - ON COLORS (Same as light mode for type consistency)
@@ -303,41 +303,41 @@ export const darkColors = {
303
303
  // =============================================================================
304
304
  // BACKGROUND COLORS (dark mode specific colors)
305
305
  // =============================================================================
306
- backgroundPrimary: '{{BACKGROUND_COLOR}}',
307
- backgroundSecondary: '{{BACKGROUND_SECONDARY_COLOR}}',
306
+ backgroundPrimary: '#FFFFFF',
307
+ backgroundSecondary: '#F8FAFC',
308
308
 
309
- surface: '{{SURFACE_COLOR}}',
310
- surfaceVariant: '{{SURFACE_SECONDARY_COLOR}}',
311
- surfaceSecondary: '{{SURFACE_SECONDARY_COLOR}}', // Alias
309
+ surface: '#FFFFFF',
310
+ surfaceVariant: '#F1F5F9',
311
+ surfaceSecondary: '#F1F5F9', // Alias
312
312
  surfaceDisabled: '#F4F4F5', // Same as light mode for type consistency
313
313
 
314
314
  // =============================================================================
315
315
  // TEXT COLORS (same as light mode for type consistency)
316
316
  // =============================================================================
317
- textPrimary: '{{TEXT_PRIMARY_COLOR}}',
318
- textSecondary: '{{TEXT_SECONDARY_COLOR}}',
319
- textTertiary: '{{TEXT_TERTIARY_COLOR}}',
320
- textDisabled: '{{TEXT_DISABLED_COLOR}}',
321
- textInverse: '{{TEXT_INVERSE_COLOR}}',
317
+ textPrimary: '#1E293B',
318
+ textSecondary: '#64748B',
319
+ textTertiary: '#94A3B8',
320
+ textDisabled: '#CBD5E1',
321
+ textInverse: '#FFFFFF',
322
322
 
323
323
  // =============================================================================
324
324
  // BORDER COLORS (same as light mode for type consistency)
325
325
  // =============================================================================
326
- border: '{{BORDER_COLOR}}',
327
- borderLight: '{{BORDER_LIGHT_COLOR}}',
328
- borderMedium: '{{BORDER_MEDIUM_COLOR}}',
329
- borderFocus: '{{BORDER_FOCUS_COLOR}}',
326
+ border: '#E2E8F0',
327
+ borderLight: '#F1F5F9',
328
+ borderMedium: '#CBD5E1',
329
+ borderFocus: '#3B82F6',
330
330
 
331
331
  // =============================================================================
332
332
  // COMPONENT-SPECIFIC COLORS (same as light mode for type consistency)
333
333
  // =============================================================================
334
- buttonPrimary: '{{PRIMARY_COLOR}}',
335
- buttonSecondary: '{{SECONDARY_COLOR}}',
334
+ buttonPrimary: '#3B82F6',
335
+ buttonSecondary: '#8B5CF6',
336
336
 
337
- inputBackground: '{{SURFACE_COLOR}}',
338
- inputBorder: '{{BORDER_COLOR}}',
337
+ inputBackground: '#FFFFFF',
338
+ inputBorder: '#E2E8F0',
339
339
 
340
- cardBackground: '{{SURFACE_COLOR}}',
340
+ cardBackground: '#FFFFFF',
341
341
 
342
342
  // =============================================================================
343
343
  // SPECIAL COLORS
@@ -378,7 +378,7 @@ export const darkColors = {
378
378
  // =============================================================================
379
379
  // GRADIENTS (Same as light mode for type consistency)
380
380
  // =============================================================================
381
- gradient: ['{{PRIMARY_COLOR}}', '{{SECONDARY_COLOR}}'],
381
+ gradient: ['#3B82F6', '#8B5CF6'],
382
382
  };
383
383
 
384
384
  // =============================================================================