@rakeyshgidwani/roger-ui-bank-theme-harvey 0.5.3 → 0.7.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.
- package/CHANGELOG.md +1 -1
- package/dist/styles.css +1 -1
- package/dist/themes/seedColors.d.ts +93 -0
- package/dist/themes/seedColors.d.ts.map +1 -0
- package/dist/themes/seedColors.esm.js +37 -0
- package/dist/themes/seedColors.js +37 -0
- package/package.json +1 -1
- package/src/themes/seedColors.ts +111 -0
package/CHANGELOG.md
CHANGED
package/dist/styles.css
CHANGED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme Seed Colors Type Definition
|
|
3
|
+
*
|
|
4
|
+
* This defines the minimal set of colors needed to generate a complete theme.
|
|
5
|
+
* From these 7-9 seed colors, all other colors (50-900 scales, surface, text,
|
|
6
|
+
* interactive states) are automatically derived.
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Light mode seed colors - the minimal input needed
|
|
10
|
+
*/
|
|
11
|
+
export interface LightModeSeedColors {
|
|
12
|
+
/** Primary brand color (base 500 value) - e.g., '#A3485A' */
|
|
13
|
+
primary: string;
|
|
14
|
+
/** Secondary brand color (base 500 value) - e.g., '#D9BA71' */
|
|
15
|
+
secondary: string;
|
|
16
|
+
/** Neutral gray color (base 500 value) - e.g., '#999999' */
|
|
17
|
+
neutral?: string;
|
|
18
|
+
/** Success color - e.g., '#1E824C' */
|
|
19
|
+
success: string;
|
|
20
|
+
/** Warning color - e.g., '#E6A23C' */
|
|
21
|
+
warning: string;
|
|
22
|
+
/** Error color - e.g., '#D93025' */
|
|
23
|
+
error: string;
|
|
24
|
+
/** Info color - e.g., '#007BCE' */
|
|
25
|
+
info: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Dark mode seed colors - overrides for dark mode
|
|
29
|
+
*/
|
|
30
|
+
export interface DarkModeSeedColors {
|
|
31
|
+
/** Dark mode background color - e.g., '#1B0D0D' */
|
|
32
|
+
background: string;
|
|
33
|
+
/** Dark mode primary text color - e.g., '#F5DAA7' */
|
|
34
|
+
textPrimary: string;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Theme metadata
|
|
38
|
+
*/
|
|
39
|
+
export interface ThemeSeedMetadata {
|
|
40
|
+
/** Theme name (kebab-case) - e.g., 'jeremy' */
|
|
41
|
+
name: string;
|
|
42
|
+
/** Theme display name - e.g., 'Jeremy Theme' */
|
|
43
|
+
displayName?: string;
|
|
44
|
+
/** Theme description */
|
|
45
|
+
description?: string;
|
|
46
|
+
/** Theme author */
|
|
47
|
+
author?: string;
|
|
48
|
+
/** Theme category */
|
|
49
|
+
category?: 'brand' | 'creative' | 'custom' | 'accessibility';
|
|
50
|
+
/** Theme tags for searchability */
|
|
51
|
+
tags?: string[];
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Complete theme seed configuration
|
|
55
|
+
*/
|
|
56
|
+
export interface ThemeSeedConfig {
|
|
57
|
+
/** Theme metadata */
|
|
58
|
+
meta: ThemeSeedMetadata;
|
|
59
|
+
/** Light mode seed colors (required) */
|
|
60
|
+
light: LightModeSeedColors;
|
|
61
|
+
/** Dark mode seed colors (optional - will use inverted light colors if not provided) */
|
|
62
|
+
dark?: DarkModeSeedColors;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Example seed configuration:
|
|
66
|
+
*
|
|
67
|
+
* ```typescript
|
|
68
|
+
* const jeremySeeds: ThemeSeedConfig = {
|
|
69
|
+
* meta: {
|
|
70
|
+
* name: 'jeremy',
|
|
71
|
+
* displayName: 'Jeremy Theme',
|
|
72
|
+
* description: 'A warm burgundy and gold theme',
|
|
73
|
+
* author: 'Design Team',
|
|
74
|
+
* category: 'creative',
|
|
75
|
+
* tags: ['warm', 'burgundy', 'gold']
|
|
76
|
+
* },
|
|
77
|
+
* light: {
|
|
78
|
+
* primary: '#A3485A',
|
|
79
|
+
* secondary: '#D9BA71',
|
|
80
|
+
* neutral: '#999999',
|
|
81
|
+
* success: '#1E824C',
|
|
82
|
+
* warning: '#E6A23C',
|
|
83
|
+
* error: '#D93025',
|
|
84
|
+
* info: '#007BCE'
|
|
85
|
+
* },
|
|
86
|
+
* dark: {
|
|
87
|
+
* background: '#1B0D0D',
|
|
88
|
+
* textPrimary: '#F5DAA7'
|
|
89
|
+
* }
|
|
90
|
+
* };
|
|
91
|
+
* ```
|
|
92
|
+
*/
|
|
93
|
+
//# sourceMappingURL=seedColors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"seedColors.d.ts","sourceRoot":"","sources":["../../src/themes/seedColors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;IAEhB,+DAA+D;IAC/D,SAAS,EAAE,MAAM,CAAC;IAElB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;IAEhB,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;IAEhB,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IAEd,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,mDAAmD;IACnD,UAAU,EAAE,MAAM,CAAC;IAEnB,qDAAqD;IACrD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAC;IAEb,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,CAAC;IAE7D,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,qBAAqB;IACrB,IAAI,EAAE,iBAAiB,CAAC;IAExB,wCAAwC;IACxC,KAAK,EAAE,mBAAmB,CAAC;IAE3B,wFAAwF;IACxF,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme Seed Colors Type Definition
|
|
3
|
+
*
|
|
4
|
+
* This defines the minimal set of colors needed to generate a complete theme.
|
|
5
|
+
* From these 7-9 seed colors, all other colors (50-900 scales, surface, text,
|
|
6
|
+
* interactive states) are automatically derived.
|
|
7
|
+
*/
|
|
8
|
+
export {};
|
|
9
|
+
/**
|
|
10
|
+
* Example seed configuration:
|
|
11
|
+
*
|
|
12
|
+
* ```typescript
|
|
13
|
+
* const jeremySeeds: ThemeSeedConfig = {
|
|
14
|
+
* meta: {
|
|
15
|
+
* name: 'jeremy',
|
|
16
|
+
* displayName: 'Jeremy Theme',
|
|
17
|
+
* description: 'A warm burgundy and gold theme',
|
|
18
|
+
* author: 'Design Team',
|
|
19
|
+
* category: 'creative',
|
|
20
|
+
* tags: ['warm', 'burgundy', 'gold']
|
|
21
|
+
* },
|
|
22
|
+
* light: {
|
|
23
|
+
* primary: '#A3485A',
|
|
24
|
+
* secondary: '#D9BA71',
|
|
25
|
+
* neutral: '#999999',
|
|
26
|
+
* success: '#1E824C',
|
|
27
|
+
* warning: '#E6A23C',
|
|
28
|
+
* error: '#D93025',
|
|
29
|
+
* info: '#007BCE'
|
|
30
|
+
* },
|
|
31
|
+
* dark: {
|
|
32
|
+
* background: '#1B0D0D',
|
|
33
|
+
* textPrimary: '#F5DAA7'
|
|
34
|
+
* }
|
|
35
|
+
* };
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme Seed Colors Type Definition
|
|
3
|
+
*
|
|
4
|
+
* This defines the minimal set of colors needed to generate a complete theme.
|
|
5
|
+
* From these 7-9 seed colors, all other colors (50-900 scales, surface, text,
|
|
6
|
+
* interactive states) are automatically derived.
|
|
7
|
+
*/
|
|
8
|
+
export {};
|
|
9
|
+
/**
|
|
10
|
+
* Example seed configuration:
|
|
11
|
+
*
|
|
12
|
+
* ```typescript
|
|
13
|
+
* const jeremySeeds: ThemeSeedConfig = {
|
|
14
|
+
* meta: {
|
|
15
|
+
* name: 'jeremy',
|
|
16
|
+
* displayName: 'Jeremy Theme',
|
|
17
|
+
* description: 'A warm burgundy and gold theme',
|
|
18
|
+
* author: 'Design Team',
|
|
19
|
+
* category: 'creative',
|
|
20
|
+
* tags: ['warm', 'burgundy', 'gold']
|
|
21
|
+
* },
|
|
22
|
+
* light: {
|
|
23
|
+
* primary: '#A3485A',
|
|
24
|
+
* secondary: '#D9BA71',
|
|
25
|
+
* neutral: '#999999',
|
|
26
|
+
* success: '#1E824C',
|
|
27
|
+
* warning: '#E6A23C',
|
|
28
|
+
* error: '#D93025',
|
|
29
|
+
* info: '#007BCE'
|
|
30
|
+
* },
|
|
31
|
+
* dark: {
|
|
32
|
+
* background: '#1B0D0D',
|
|
33
|
+
* textPrimary: '#F5DAA7'
|
|
34
|
+
* }
|
|
35
|
+
* };
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
package/package.json
CHANGED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme Seed Colors Type Definition
|
|
3
|
+
*
|
|
4
|
+
* This defines the minimal set of colors needed to generate a complete theme.
|
|
5
|
+
* From these 7-9 seed colors, all other colors (50-900 scales, surface, text,
|
|
6
|
+
* interactive states) are automatically derived.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Light mode seed colors - the minimal input needed
|
|
11
|
+
*/
|
|
12
|
+
export interface LightModeSeedColors {
|
|
13
|
+
/** Primary brand color (base 500 value) - e.g., '#A3485A' */
|
|
14
|
+
primary: string;
|
|
15
|
+
|
|
16
|
+
/** Secondary brand color (base 500 value) - e.g., '#D9BA71' */
|
|
17
|
+
secondary: string;
|
|
18
|
+
|
|
19
|
+
/** Neutral gray color (base 500 value) - e.g., '#999999' */
|
|
20
|
+
neutral?: string;
|
|
21
|
+
|
|
22
|
+
/** Success color - e.g., '#1E824C' */
|
|
23
|
+
success: string;
|
|
24
|
+
|
|
25
|
+
/** Warning color - e.g., '#E6A23C' */
|
|
26
|
+
warning: string;
|
|
27
|
+
|
|
28
|
+
/** Error color - e.g., '#D93025' */
|
|
29
|
+
error: string;
|
|
30
|
+
|
|
31
|
+
/** Info color - e.g., '#007BCE' */
|
|
32
|
+
info: string;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Dark mode seed colors - overrides for dark mode
|
|
37
|
+
*/
|
|
38
|
+
export interface DarkModeSeedColors {
|
|
39
|
+
/** Dark mode background color - e.g., '#1B0D0D' */
|
|
40
|
+
background: string;
|
|
41
|
+
|
|
42
|
+
/** Dark mode primary text color - e.g., '#F5DAA7' */
|
|
43
|
+
textPrimary: string;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Theme metadata
|
|
48
|
+
*/
|
|
49
|
+
export interface ThemeSeedMetadata {
|
|
50
|
+
/** Theme name (kebab-case) - e.g., 'jeremy' */
|
|
51
|
+
name: string;
|
|
52
|
+
|
|
53
|
+
/** Theme display name - e.g., 'Jeremy Theme' */
|
|
54
|
+
displayName?: string;
|
|
55
|
+
|
|
56
|
+
/** Theme description */
|
|
57
|
+
description?: string;
|
|
58
|
+
|
|
59
|
+
/** Theme author */
|
|
60
|
+
author?: string;
|
|
61
|
+
|
|
62
|
+
/** Theme category */
|
|
63
|
+
category?: 'brand' | 'creative' | 'custom' | 'accessibility';
|
|
64
|
+
|
|
65
|
+
/** Theme tags for searchability */
|
|
66
|
+
tags?: string[];
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Complete theme seed configuration
|
|
71
|
+
*/
|
|
72
|
+
export interface ThemeSeedConfig {
|
|
73
|
+
/** Theme metadata */
|
|
74
|
+
meta: ThemeSeedMetadata;
|
|
75
|
+
|
|
76
|
+
/** Light mode seed colors (required) */
|
|
77
|
+
light: LightModeSeedColors;
|
|
78
|
+
|
|
79
|
+
/** Dark mode seed colors (optional - will use inverted light colors if not provided) */
|
|
80
|
+
dark?: DarkModeSeedColors;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* Example seed configuration:
|
|
85
|
+
*
|
|
86
|
+
* ```typescript
|
|
87
|
+
* const jeremySeeds: ThemeSeedConfig = {
|
|
88
|
+
* meta: {
|
|
89
|
+
* name: 'jeremy',
|
|
90
|
+
* displayName: 'Jeremy Theme',
|
|
91
|
+
* description: 'A warm burgundy and gold theme',
|
|
92
|
+
* author: 'Design Team',
|
|
93
|
+
* category: 'creative',
|
|
94
|
+
* tags: ['warm', 'burgundy', 'gold']
|
|
95
|
+
* },
|
|
96
|
+
* light: {
|
|
97
|
+
* primary: '#A3485A',
|
|
98
|
+
* secondary: '#D9BA71',
|
|
99
|
+
* neutral: '#999999',
|
|
100
|
+
* success: '#1E824C',
|
|
101
|
+
* warning: '#E6A23C',
|
|
102
|
+
* error: '#D93025',
|
|
103
|
+
* info: '#007BCE'
|
|
104
|
+
* },
|
|
105
|
+
* dark: {
|
|
106
|
+
* background: '#1B0D0D',
|
|
107
|
+
* textPrimary: '#F5DAA7'
|
|
108
|
+
* }
|
|
109
|
+
* };
|
|
110
|
+
* ```
|
|
111
|
+
*/
|