@crystin001/theme-settings-lib 1.0.0 → 1.1.0

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 (20) hide show
  1. package/README.md +71 -38
  2. package/dist/components/ThemeShowcase.d.ts +10 -0
  3. package/dist/components/ThemeShowcase.d.ts.map +1 -0
  4. package/dist/components/ThemeShowcase.js +357 -0
  5. package/dist/index.d.ts +1 -0
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +1 -0
  8. package/dist/stories/ThemeStories.d.ts +6 -0
  9. package/dist/stories/ThemeStories.d.ts.map +1 -0
  10. package/dist/stories/ThemeStories.js +285 -0
  11. package/dist/stories/index.d.ts +2 -0
  12. package/dist/stories/index.d.ts.map +1 -0
  13. package/dist/stories/index.js +4 -0
  14. package/dist/theme-validation.d.ts +27 -0
  15. package/dist/theme-validation.d.ts.map +1 -0
  16. package/dist/theme-validation.js +114 -0
  17. package/dist/theme.d.ts +15 -0
  18. package/dist/theme.d.ts.map +1 -1
  19. package/dist/theme.js +263 -7
  20. package/package.json +26 -14
package/dist/theme.js CHANGED
@@ -32,11 +32,27 @@ exports.Themes = {
32
32
  primary: '#0a7ea4',
33
33
  secondary: '#6C757D',
34
34
  muted: '#6C757D',
35
+ // Accent colors - teal/cyan theme
36
+ accent1: '#0a7ea4',
37
+ accent1Light: '#4FA8C5',
38
+ accent1Dark: '#065A7A',
39
+ accent2: '#17A2B8',
40
+ accent2Light: '#5BB8C9',
41
+ accent2Dark: '#0E6B7A',
42
+ accent3: '#6C757D',
43
+ accent3Light: '#9FA5AA',
44
+ accent3Dark: '#4A5156',
45
+ accent4: '#28A745',
46
+ accent4Light: '#6BC77A',
47
+ accent4Dark: '#1E7A32',
48
+ accent5: '#FFC107',
49
+ accent5Light: '#FFD54F',
50
+ accent5Dark: '#CC9900',
35
51
  },
36
52
  'system-dark': {
37
53
  text: '#ECEDEE',
38
54
  background: '#151718',
39
- tint: '#FFFFFF',
55
+ tint: '#58A6FF',
40
56
  icon: '#9BA1A6',
41
57
  tabIconDefault: '#9BA1A6',
42
58
  tabIconSelected: '#FFFFFF',
@@ -57,6 +73,22 @@ exports.Themes = {
57
73
  primary: '#238636',
58
74
  secondary: '#8B949E',
59
75
  muted: '#8B949E',
76
+ // Accent colors - green/blue theme
77
+ accent1: '#238636',
78
+ accent1Light: '#4ECB5F',
79
+ accent1Dark: '#1A5F28',
80
+ accent2: '#58A6FF',
81
+ accent2Light: '#8BC5FF',
82
+ accent2Dark: '#2D7ACC',
83
+ accent3: '#8B949E',
84
+ accent3Light: '#B1B8C0',
85
+ accent3Dark: '#6B737C',
86
+ accent4: '#3FB950',
87
+ accent4Light: '#6FD17F',
88
+ accent4Dark: '#2D8A3A',
89
+ accent5: '#D29922',
90
+ accent5Light: '#E6B84D',
91
+ accent5Dark: '#A67A1A',
60
92
  },
61
93
  // Neon Surf theme
62
94
  'neon-surf-light': {
@@ -70,7 +102,7 @@ exports.Themes = {
70
102
  card: '#D4EDFF',
71
103
  cardText: '#0A0E27',
72
104
  button: '#FF00FF',
73
- buttonText: '#1A0A3D',
105
+ buttonText: '#FFFFFF',
74
106
  buttonSecondary: '#D4EDFF',
75
107
  buttonSecondaryText: '#0A0E27',
76
108
  input: '#FFFFFF',
@@ -83,6 +115,22 @@ exports.Themes = {
83
115
  primary: '#FF00FF',
84
116
  secondary: '#FFD700',
85
117
  muted: '#00A8CC',
118
+ // Accent colors - neon/vibrant theme
119
+ accent1: '#FF00FF',
120
+ accent1Light: '#FF66FF',
121
+ accent1Dark: '#CC00CC',
122
+ accent2: '#00F5FF',
123
+ accent2Light: '#66F8FF',
124
+ accent2Dark: '#00C4CC',
125
+ accent3: '#FFD700',
126
+ accent3Light: '#FFE666',
127
+ accent3Dark: '#CCAC00',
128
+ accent4: '#00FF88',
129
+ accent4Light: '#66FFB3',
130
+ accent4Dark: '#00CC6D',
131
+ accent5: '#FF8C00',
132
+ accent5Light: '#FFB366',
133
+ accent5Dark: '#CC7000',
86
134
  },
87
135
  'neon-surf-dark': {
88
136
  text: '#FFFFFF',
@@ -95,7 +143,7 @@ exports.Themes = {
95
143
  card: '#1A1F3A',
96
144
  cardText: '#FFFFFF',
97
145
  button: '#FF00FF',
98
- buttonText: '#1A0A3D',
146
+ buttonText: '#FFFFFF',
99
147
  buttonSecondary: '#1A1F3A',
100
148
  buttonSecondaryText: '#FFD700',
101
149
  input: '#1A1F3A',
@@ -108,6 +156,22 @@ exports.Themes = {
108
156
  primary: '#FF00FF',
109
157
  secondary: '#FFD700',
110
158
  muted: '#00A8CC',
159
+ // Accent colors - neon/vibrant theme
160
+ accent1: '#FF00FF',
161
+ accent1Light: '#FF66FF',
162
+ accent1Dark: '#CC00CC',
163
+ accent2: '#00F5FF',
164
+ accent2Light: '#66F8FF',
165
+ accent2Dark: '#00C4CC',
166
+ accent3: '#FFD700',
167
+ accent3Light: '#FFE666',
168
+ accent3Dark: '#CCAC00',
169
+ accent4: '#00FF88',
170
+ accent4Light: '#66FFB3',
171
+ accent4Dark: '#00CC6D',
172
+ accent5: '#FF8C00',
173
+ accent5Light: '#FFB366',
174
+ accent5Dark: '#CC7000',
111
175
  },
112
176
  // Pink & Purple theme
113
177
  'pink-purple-light': {
@@ -134,6 +198,22 @@ exports.Themes = {
134
198
  primary: '#B84DCC',
135
199
  secondary: '#8B5FBF',
136
200
  muted: '#A78BBF',
201
+ // Accent colors - pink/purple theme
202
+ accent1: '#B84DCC',
203
+ accent1Light: '#D973F5',
204
+ accent1Dark: '#933DA3',
205
+ accent2: '#9D4EDD',
206
+ accent2Light: '#C77DFF',
207
+ accent2Dark: '#7D3EB0',
208
+ accent3: '#8B5FBF',
209
+ accent3Light: '#B384D9',
210
+ accent3Dark: '#6B4A96',
211
+ accent4: '#FF6B9D',
212
+ accent4Light: '#FF9BC4',
213
+ accent4Dark: '#CC557D',
214
+ accent5: '#C77DFF',
215
+ accent5Light: '#E6A3FF',
216
+ accent5Dark: '#9F63CC',
137
217
  },
138
218
  'pink-purple-dark': {
139
219
  text: '#F5E6FF',
@@ -146,7 +226,7 @@ exports.Themes = {
146
226
  card: '#2D1B3D',
147
227
  cardText: '#F5E6FF',
148
228
  button: '#D973F5',
149
- buttonText: '#1A0F2E',
229
+ buttonText: '#FFFFFF',
150
230
  buttonSecondary: '#2D1B3D',
151
231
  buttonSecondaryText: '#F5E6FF',
152
232
  input: '#2D1B3D',
@@ -159,6 +239,22 @@ exports.Themes = {
159
239
  primary: '#D973F5',
160
240
  secondary: '#B84DCC',
161
241
  muted: '#8B5FBF',
242
+ // Accent colors - pink/purple theme
243
+ accent1: '#D973F5',
244
+ accent1Light: '#E6A3FF',
245
+ accent1Dark: '#B84DCC',
246
+ accent2: '#C77DFF',
247
+ accent2Light: '#E6A3FF',
248
+ accent2Dark: '#9D4EDD',
249
+ accent3: '#B84DCC',
250
+ accent3Light: '#D973F5',
251
+ accent3Dark: '#933DA3',
252
+ accent4: '#FF8BB3',
253
+ accent4Light: '#FFB3D1',
254
+ accent4Dark: '#CC6F8F',
255
+ accent5: '#E6A3FF',
256
+ accent5Light: '#F5CCFF',
257
+ accent5Dark: '#B884CC',
162
258
  },
163
259
  // Pastel theme
164
260
  'pastel-light': {
@@ -172,7 +268,7 @@ exports.Themes = {
172
268
  card: '#FFF9FB',
173
269
  cardText: '#4A5568',
174
270
  button: '#FFB3D9',
175
- buttonText: '#FFFFFF',
271
+ buttonText: '#4A5568',
176
272
  buttonSecondary: '#FFE5F0',
177
273
  buttonSecondaryText: '#4A5568',
178
274
  input: '#FFFFFF',
@@ -185,6 +281,22 @@ exports.Themes = {
185
281
  primary: '#FFB3D9',
186
282
  secondary: '#D4B3FF',
187
283
  muted: '#C4C4C4',
284
+ // Accent colors - pastel theme
285
+ accent1: '#FFB3D9',
286
+ accent1Light: '#FFD9EC',
287
+ accent1Dark: '#CC8FAD',
288
+ accent2: '#D4B3FF',
289
+ accent2Light: '#E6CCFF',
290
+ accent2Dark: '#A98FCC',
291
+ accent3: '#B3D9FF',
292
+ accent3Light: '#CCE6FF',
293
+ accent3Dark: '#8FADCC',
294
+ accent4: '#B5E5CF',
295
+ accent4Light: '#D4F0E4',
296
+ accent4Dark: '#91B7A5',
297
+ accent5: '#FFE5B4',
298
+ accent5Light: '#FFF0D9',
299
+ accent5Dark: '#CCB790',
188
300
  },
189
301
  'pastel-dark': {
190
302
  text: '#E8E8E8',
@@ -210,6 +322,22 @@ exports.Themes = {
210
322
  primary: '#FFB3D9',
211
323
  secondary: '#D4B3FF',
212
324
  muted: '#A8A8A8',
325
+ // Accent colors - pastel theme
326
+ accent1: '#FFB3D9',
327
+ accent1Light: '#FFD9EC',
328
+ accent1Dark: '#CC8FAD',
329
+ accent2: '#D4B3FF',
330
+ accent2Light: '#E6CCFF',
331
+ accent2Dark: '#A98FCC',
332
+ accent3: '#B3D9FF',
333
+ accent3Light: '#CCE6FF',
334
+ accent3Dark: '#8FADCC',
335
+ accent4: '#B5E5CF',
336
+ accent4Light: '#D4F0E4',
337
+ accent4Dark: '#91B7A5',
338
+ accent5: '#FFE5B4',
339
+ accent5Light: '#FFF0D9',
340
+ accent5Dark: '#CCB790',
213
341
  },
214
342
  // GitHub theme
215
343
  'github-light': {
@@ -236,6 +364,22 @@ exports.Themes = {
236
364
  primary: '#0969DA',
237
365
  secondary: '#656D76',
238
366
  muted: '#656D76',
367
+ // Accent colors - GitHub blue/gray theme
368
+ accent1: '#0969DA',
369
+ accent1Light: '#4A9AE8',
370
+ accent1Dark: '#0754AE',
371
+ accent2: '#1A7F37',
372
+ accent2Light: '#4FA85C',
373
+ accent2Dark: '#14652B',
374
+ accent3: '#656D76',
375
+ accent3Light: '#9BA1A8',
376
+ accent3Dark: '#4F555E',
377
+ accent4: '#CF222E',
378
+ accent4Light: '#E85A66',
379
+ accent4Dark: '#A61B24',
380
+ accent5: '#9A6700',
381
+ accent5Light: '#CC8A00',
382
+ accent5Dark: '#7A5200',
239
383
  },
240
384
  'github-dark': {
241
385
  text: '#E6EDF3',
@@ -261,6 +405,22 @@ exports.Themes = {
261
405
  primary: '#238636',
262
406
  secondary: '#7D8590',
263
407
  muted: '#7D8590',
408
+ // Accent colors - GitHub blue/green theme
409
+ accent1: '#58A6FF',
410
+ accent1Light: '#8BC5FF',
411
+ accent1Dark: '#2D7ACC',
412
+ accent2: '#3FB950',
413
+ accent2Light: '#6FD17F',
414
+ accent2Dark: '#2D8A3A',
415
+ accent3: '#7D8590',
416
+ accent3Light: '#A8B0BA',
417
+ accent3Dark: '#626970',
418
+ accent4: '#F85149',
419
+ accent4Light: '#FF7A73',
420
+ accent4Dark: '#C6413A',
421
+ accent5: '#D29922',
422
+ accent5Light: '#E6B84D',
423
+ accent5Dark: '#A67A1A',
264
424
  },
265
425
  // High Contrast theme
266
426
  'high-contrast-light': {
@@ -287,6 +447,22 @@ exports.Themes = {
287
447
  primary: '#0000FF',
288
448
  secondary: '#000000',
289
449
  muted: '#666666',
450
+ // Accent colors - high contrast theme
451
+ accent1: '#0000FF',
452
+ accent1Light: '#4A4AFF',
453
+ accent1Dark: '#0000CC',
454
+ accent2: '#008000',
455
+ accent2Light: '#4A8A4A',
456
+ accent2Dark: '#006600',
457
+ accent3: '#FF0000',
458
+ accent3Light: '#FF4A4A',
459
+ accent3Dark: '#CC0000',
460
+ accent4: '#FF8C00',
461
+ accent4Light: '#FFB34A',
462
+ accent4Dark: '#CC7000',
463
+ accent5: '#666666',
464
+ accent5Light: '#999999',
465
+ accent5Dark: '#4A4A4A',
290
466
  },
291
467
  'high-contrast-dark': {
292
468
  text: '#FFFFFF',
@@ -312,6 +488,22 @@ exports.Themes = {
312
488
  primary: '#FFFF00',
313
489
  secondary: '#FFFFFF',
314
490
  muted: '#CCCCCC',
491
+ // Accent colors - high contrast theme
492
+ accent1: '#FFFF00',
493
+ accent1Light: '#FFFF66',
494
+ accent1Dark: '#CCCC00',
495
+ accent2: '#00FF00',
496
+ accent2Light: '#66FF66',
497
+ accent2Dark: '#00CC00',
498
+ accent3: '#FF0000',
499
+ accent3Light: '#FF4A4A',
500
+ accent3Dark: '#CC0000',
501
+ accent4: '#00FFFF',
502
+ accent4Light: '#66FFFF',
503
+ accent4Dark: '#00CCCC',
504
+ accent5: '#CCCCCC',
505
+ accent5Light: '#E6E6E6',
506
+ accent5Dark: '#999999',
315
507
  },
316
508
  // Solarized theme
317
509
  'solarized-light': {
@@ -325,7 +517,7 @@ exports.Themes = {
325
517
  card: '#FEF9E7',
326
518
  cardText: '#586E75',
327
519
  button: '#268BD2',
328
- buttonText: '#FDF6E3',
520
+ buttonText: '#FFFFFF',
329
521
  buttonSecondary: '#EEE8D5',
330
522
  buttonSecondaryText: '#586E75',
331
523
  input: '#FEF9E7',
@@ -338,6 +530,22 @@ exports.Themes = {
338
530
  primary: '#268BD2',
339
531
  secondary: '#93A1A1',
340
532
  muted: '#93A1A1',
533
+ // Accent colors - solarized theme
534
+ accent1: '#268BD2',
535
+ accent1Light: '#5AA3D9',
536
+ accent1Dark: '#1E6FA8',
537
+ accent2: '#859900',
538
+ accent2Light: '#A8C233',
539
+ accent2Dark: '#6A7A00',
540
+ accent3: '#B58900',
541
+ accent3Light: '#D4A633',
542
+ accent3Dark: '#916E00',
543
+ accent4: '#DC322F',
544
+ accent4Light: '#E85A57',
545
+ accent4Dark: '#B02825',
546
+ accent5: '#93A1A1',
547
+ accent5Light: '#B8C4C4',
548
+ accent5Dark: '#757E7E',
341
549
  },
342
550
  'solarized-dark': {
343
551
  text: '#839496',
@@ -350,7 +558,7 @@ exports.Themes = {
350
558
  card: '#073642',
351
559
  cardText: '#839496',
352
560
  button: '#268BD2',
353
- buttonText: '#FDF6E3',
561
+ buttonText: '#FFFFFF',
354
562
  buttonSecondary: '#073642',
355
563
  buttonSecondaryText: '#839496',
356
564
  input: '#073642',
@@ -363,6 +571,22 @@ exports.Themes = {
363
571
  primary: '#268BD2',
364
572
  secondary: '#657B83',
365
573
  muted: '#657B83',
574
+ // Accent colors - solarized theme
575
+ accent1: '#268BD2',
576
+ accent1Light: '#5AA3D9',
577
+ accent1Dark: '#1E6FA8',
578
+ accent2: '#859900',
579
+ accent2Light: '#A8C233',
580
+ accent2Dark: '#6A7A00',
581
+ accent3: '#B58900',
582
+ accent3Light: '#D4A633',
583
+ accent3Dark: '#916E00',
584
+ accent4: '#DC322F',
585
+ accent4Light: '#E85A57',
586
+ accent4Dark: '#B02825',
587
+ accent5: '#657B83',
588
+ accent5Light: '#8FA3AB',
589
+ accent5Dark: '#4F6369',
366
590
  },
367
591
  // Dark Plus theme
368
592
  'dark-plus-light': {
@@ -389,6 +613,22 @@ exports.Themes = {
389
613
  primary: '#007ACC',
390
614
  secondary: '#666666',
391
615
  muted: '#999999',
616
+ // Accent colors - VS Code Dark+ theme
617
+ accent1: '#007ACC',
618
+ accent1Light: '#4A9AE8',
619
+ accent1Dark: '#0062A3',
620
+ accent2: '#4EC9B0',
621
+ accent2Light: '#7ED9C4',
622
+ accent2Dark: '#3EA18C',
623
+ accent3: '#89D185',
624
+ accent3Light: '#B3E5AF',
625
+ accent3Dark: '#6FA76A',
626
+ accent4: '#CE9178',
627
+ accent4Light: '#E6B8A8',
628
+ accent4Dark: '#A57360',
629
+ accent5: '#F48771',
630
+ accent5Light: '#FFB3A3',
631
+ accent5Dark: '#C36C5A',
392
632
  },
393
633
  'dark-plus-dark': {
394
634
  text: '#CCCCCC',
@@ -414,6 +654,22 @@ exports.Themes = {
414
654
  primary: '#007ACC',
415
655
  secondary: '#858585',
416
656
  muted: '#858585',
657
+ // Accent colors - VS Code Dark+ theme
658
+ accent1: '#007ACC',
659
+ accent1Light: '#4A9AE8',
660
+ accent1Dark: '#0062A3',
661
+ accent2: '#4EC9B0',
662
+ accent2Light: '#7ED9C4',
663
+ accent2Dark: '#3EA18C',
664
+ accent3: '#89D185',
665
+ accent3Light: '#B3E5AF',
666
+ accent3Dark: '#6FA76A',
667
+ accent4: '#CE9178',
668
+ accent4Light: '#E6B8A8',
669
+ accent4Dark: '#A57360',
670
+ accent5: '#F48771',
671
+ accent5Light: '#FFB3A3',
672
+ accent5Dark: '#C36C5A',
417
673
  },
418
674
  };
419
675
  // Legacy Colors export for backward compatibility
package/package.json CHANGED
@@ -1,17 +1,30 @@
1
1
  {
2
2
  "name": "@crystin001/theme-settings-lib",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Reusable theme and settings library for mobile apps",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
+ "react-native": "dist/index.js",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "default": "./dist/index.js"
12
+ }
13
+ },
7
14
  "files": [
8
15
  "dist",
9
16
  "README.md"
10
17
  ],
11
18
  "scripts": {
12
19
  "build": "tsc",
20
+ "prepare": "npm run build",
13
21
  "prepublishOnly": "npm run build",
14
- "test": "echo \"Error: no test specified\" && exit 1"
22
+ "test": "echo \"Error: no test specified\" && exit 1",
23
+ "start": "cd example-app && npm start",
24
+ "app:install": "cd example-app && npm install",
25
+ "app:start": "cd example-app && npm start",
26
+ "app:ios": "cd example-app && npm run ios",
27
+ "app:android": "cd example-app && npm run android"
15
28
  },
16
29
  "keywords": [
17
30
  "theme",
@@ -27,13 +40,13 @@
27
40
  "url": "https://github.com/trial-and-code/theme-settings-lib.git"
28
41
  },
29
42
  "peerDependencies": {
30
- "react": "*",
31
- "react-native": "*",
43
+ "@react-native-async-storage/async-storage": "~2.2.0",
44
+ "color": "^4.2.3",
45
+ "expo-localization": "~17.0.0",
32
46
  "i18next": "^23.11.5",
47
+ "react": "*",
33
48
  "react-i18next": "^15.1.1",
34
- "expo-localization": "~17.0.0",
35
- "@react-native-async-storage/async-storage": "~2.2.0",
36
- "color": "^4.2.3"
49
+ "react-native": "*"
37
50
  },
38
51
  "peerDependenciesMeta": {
39
52
  "color": {
@@ -41,16 +54,15 @@
41
54
  }
42
55
  },
43
56
  "devDependencies": {
44
- "typescript": "^5.0.0",
45
- "@types/react": "^19.0.0",
57
+ "@react-native-async-storage/async-storage": "~2.2.0",
46
58
  "@types/color": "^3.0.0",
59
+ "@types/react": "^19.0.0",
47
60
  "color": "^4.2.3",
48
- "react": "^18.0.0",
49
- "react-native": "*",
61
+ "expo-localization": "~17.0.0",
50
62
  "i18next": "^23.11.5",
63
+ "react": "*",
51
64
  "react-i18next": "^15.1.1",
52
- "expo-localization": "~17.0.0",
53
- "@react-native-async-storage/async-storage": "~2.2.0"
65
+ "react-native": "*",
66
+ "typescript": "^5.0.0"
54
67
  }
55
68
  }
56
-