@evolution-james/evolution-theme-engine 1.0.1 → 1.1.1

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 (4) hide show
  1. package/README.md +16 -0
  2. package/dist/styles/themes.css +31 -7
  3. package/package.json +1 -1
  4. package/src/styles/themes.css +31 -7
package/README.md CHANGED
@@ -172,6 +172,12 @@ From there, use the CSS variables anywhere in your own component styles:
172
172
  background-color: var(--color-card-bg);
173
173
  color: var(--color-text);
174
174
  border: 1px solid var(--color-card-border);
175
+ box-shadow: 0 2px 8px var(--color-shadow);
176
+ }
177
+
178
+ .my-card-subtitle {
179
+ color: var(--color-text-muted);
180
+ font-size: 0.875rem;
175
181
  }
176
182
 
177
183
  .my-button {
@@ -183,6 +189,12 @@ From there, use the CSS variables anywhere in your own component styles:
183
189
  color: var(--color-link);
184
190
  }
185
191
 
192
+ .my-input {
193
+ background-color: var(--color-input-bg);
194
+ border: 1px solid var(--color-input-border);
195
+ color: var(--color-text);
196
+ }
197
+
186
198
  hr {
187
199
  border-color: var(--color-divider);
188
200
  }
@@ -198,6 +210,7 @@ Because the variables are set on `<html>`, they cascade down to every element on
198
210
  |---|---|
199
211
  | `--color-bg` | Page / app background |
200
212
  | `--color-text` | Primary body text |
213
+ | `--color-text-muted` | Secondary / subtitle / caption text |
201
214
  | `--color-card-bg` | Card / panel surface background |
202
215
  | `--color-card-border` | Card / panel border color |
203
216
  | `--color-btn-dark-bg` | Background for "dark" style buttons |
@@ -205,6 +218,9 @@ Because the variables are set on `<html>`, they cascade down to every element on
205
218
  | `--color-btn-light-bg` | Background for "light" style buttons |
206
219
  | `--color-btn-light-text` | Text on "light" style buttons |
207
220
  | `--color-divider` | Horizontal rules / separators |
221
+ | `--color-input-bg` | Form input / textarea background |
222
+ | `--color-input-border` | Form input / textarea border |
223
+ | `--color-shadow` | Box shadow color |
208
224
  | `--color-primary` | Primary accent / brand color |
209
225
  | `--color-on-primary` | Text rendered on top of `--color-primary` |
210
226
  | `--color-link` | Hyperlink color |
package/dist/styles/themes.css CHANGED
@@ -29,19 +29,23 @@
29
29
  * ──────────────────────
30
30
  * --color-bg Page / app background
31
31
  * --color-text Primary body text
32
+ * --color-text-muted Secondary / subtitle / caption text
32
33
  * --color-card-bg Card / panel surface background
33
- * --color-card-border Card / panel border colour
34
+ * --color-card-border Card / panel border color
34
35
  * --color-btn-dark-bg Background for "dark" style buttons
35
36
  * --color-btn-dark-text Text on "dark" style buttons
36
37
  * --color-btn-light-bg Background for "light" style buttons
37
38
  * --color-btn-light-text Text on "light" style buttons
38
39
  * --color-divider Horizontal rules / separators
39
- * --color-primary Primary accent / brand colour
40
+ * --color-input-bg Form input / textarea background
41
+ * --color-input-border Form input / textarea border
42
+ * --color-shadow Box shadow color
43
+ * --color-primary Primary accent / brand color
40
44
  * --color-on-primary Text drawn on top of --color-primary
41
- * --color-link Hyperlink colour
45
+ * --color-link Hyperlink color
42
46
  * --color-hover-bg Subtle hover-state background tint
43
47
  * --color-code-bg Code block background
44
- * --color-code-text Code block text colour
48
+ * --color-code-text Code block text color
45
49
  *
46
50
  * ADDING A CUSTOM THEME (CSS approach)
47
51
  * ─────────────────────────────────────
@@ -73,6 +77,7 @@
73
77
  :root {
74
78
  --color-bg: #f8f9fa;
75
79
  --color-text: #212529;
80
+ --color-text-muted: #6c757d;
76
81
  --color-card-bg: #ffffff;
77
82
  --color-card-border: #dee2e6;
78
83
  --color-btn-dark-bg: #f8f9fa;
@@ -80,10 +85,13 @@
80
85
  --color-btn-light-bg: #ffffff;
81
86
  --color-btn-light-text: #212529;
82
87
  --color-divider: #dee2e6;
88
+ --color-input-bg: #ffffff;
89
+ --color-input-border: #ced4da;
90
+ --color-shadow: rgba(0, 0, 0, 0.10);
83
91
 
84
92
  --color-primary: #1976d2;
85
93
  --color-on-primary: #ffffff;
86
- --color-link: #a435f0;
94
+ --color-link: #4a90e2;
87
95
  --color-hover-bg: rgba(25, 118, 210, 0.08);
88
96
  --color-code-bg: #282c34;
89
97
  --color-code-text: #ffffff;
@@ -93,6 +101,7 @@
93
101
  [data-theme="dark"] {
94
102
  --color-bg: #212529;
95
103
  --color-text: #f8f9fa;
104
+ --color-text-muted: #9ca3af;
96
105
  --color-card-bg: #343a40;
97
106
  --color-card-border: #444444;
98
107
  --color-btn-dark-bg: #f8f9fa;
@@ -100,10 +109,13 @@
100
109
  --color-btn-light-bg: #343a40;
101
110
  --color-btn-light-text: #f8f9fa;
102
111
  --color-divider: #444444;
112
+ --color-input-bg: #2d3238;
113
+ --color-input-border: #555555;
114
+ --color-shadow: rgba(0, 0, 0, 0.40);
103
115
 
104
116
  --color-primary: #90caf9;
105
117
  --color-on-primary: #212529;
106
- --color-link: #a435f0;
118
+ --color-link: #4a90e2;
107
119
  --color-hover-bg: rgba(144, 202, 249, 0.08);
108
120
  --color-code-bg: #232b36;
109
121
  --color-code-text: #f8f9fa;
@@ -116,6 +128,7 @@
116
128
  [data-theme="forest"] {
117
129
  --color-bg: #1b2e22;
118
130
  --color-text: #cde8d4;
131
+ --color-text-muted: #8aad95;
119
132
  --color-card-bg: #243c2b;
120
133
  --color-card-border: #3a5c44;
121
134
  --color-btn-dark-bg: #3a5c44;
@@ -123,6 +136,9 @@
123
136
  --color-btn-light-bg: #243c2b;
124
137
  --color-btn-light-text: #cde8d4;
125
138
  --color-divider: #3a5c44;
139
+ --color-input-bg: #1f3526;
140
+ --color-input-border: #3a5c44;
141
+ --color-shadow: rgba(0, 0, 0, 0.35);
126
142
 
127
143
  --color-primary: #4caf70;
128
144
  --color-on-primary: #1b2e22;
@@ -139,6 +155,7 @@
139
155
  [data-theme="tron"] {
140
156
  --color-bg: #0f172a;
141
157
  --color-text: #67e8f9;
158
+ --color-text-muted: #38bcd4;
142
159
  --color-card-bg: #1e293b;
143
160
  --color-card-border: #67e8f9;
144
161
  --color-btn-dark-bg: #0ea5e9;
@@ -146,6 +163,9 @@
146
163
  --color-btn-light-bg: #1e293b;
147
164
  --color-btn-light-text: #67e8f9;
148
165
  --color-divider: #0ea5e9;
166
+ --color-input-bg: #162236;
167
+ --color-input-border: #38bcd4;
168
+ --color-shadow: rgba(14, 165, 233, 0.15);
149
169
 
150
170
  --color-primary: #0ea5e9;
151
171
  --color-on-primary: #0f172a;
@@ -158,11 +178,12 @@
158
178
  /* --- Midnight Theme ---
159
179
  * A deep night-sky palette: near-black background, muted
160
180
  * blue-grey text, teal (#5ce1b5) primary accent, and
161
- * light-blue (#8bd4ff) link colour.
181
+ * light-blue (#8bd4ff) link color.
162
182
  */
163
183
  [data-theme="midnight"] {
164
184
  --color-bg: #0b1016;
165
185
  --color-text: #e7edf2;
186
+ --color-text-muted: #8fa9be;
166
187
  --color-card-bg: #131c28;
167
188
  --color-card-border: #263141;
168
189
  --color-btn-dark-bg: #263141;
@@ -170,6 +191,9 @@
170
191
  --color-btn-light-bg: #0f151e;
171
192
  --color-btn-light-text: #e7edf2;
172
193
  --color-divider: #263141;
194
+ --color-input-bg: #0f1a26;
195
+ --color-input-border: #2a3e52;
196
+ --color-shadow: rgba(0, 0, 0, 0.45);
173
197
 
174
198
  --color-primary: #5ce1b5;
175
199
  --color-on-primary: #0b1016;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evolution-james/evolution-theme-engine",
3
- "version": "1.0.1",
3
+ "version": "1.1.1",
4
4
  "description": "A plug-and-play React theme engine with CSS variable-based theming, localStorage persistence, and optional navbar component.",
5
5
  "keywords": [
6
6
  "react",
package/src/styles/themes.css CHANGED
@@ -29,19 +29,23 @@
29
29
  * ──────────────────────
30
30
  * --color-bg Page / app background
31
31
  * --color-text Primary body text
32
+ * --color-text-muted Secondary / subtitle / caption text
32
33
  * --color-card-bg Card / panel surface background
33
- * --color-card-border Card / panel border colour
34
+ * --color-card-border Card / panel border color
34
35
  * --color-btn-dark-bg Background for "dark" style buttons
35
36
  * --color-btn-dark-text Text on "dark" style buttons
36
37
  * --color-btn-light-bg Background for "light" style buttons
37
38
  * --color-btn-light-text Text on "light" style buttons
38
39
  * --color-divider Horizontal rules / separators
39
- * --color-primary Primary accent / brand colour
40
+ * --color-input-bg Form input / textarea background
41
+ * --color-input-border Form input / textarea border
42
+ * --color-shadow Box shadow color
43
+ * --color-primary Primary accent / brand color
40
44
  * --color-on-primary Text drawn on top of --color-primary
41
- * --color-link Hyperlink colour
45
+ * --color-link Hyperlink color
42
46
  * --color-hover-bg Subtle hover-state background tint
43
47
  * --color-code-bg Code block background
44
- * --color-code-text Code block text colour
48
+ * --color-code-text Code block text color
45
49
  *
46
50
  * ADDING A CUSTOM THEME (CSS approach)
47
51
  * ─────────────────────────────────────
@@ -73,6 +77,7 @@
73
77
  :root {
74
78
  --color-bg: #f8f9fa;
75
79
  --color-text: #212529;
80
+ --color-text-muted: #6c757d;
76
81
  --color-card-bg: #ffffff;
77
82
  --color-card-border: #dee2e6;
78
83
  --color-btn-dark-bg: #f8f9fa;
@@ -80,10 +85,13 @@
80
85
  --color-btn-light-bg: #ffffff;
81
86
  --color-btn-light-text: #212529;
82
87
  --color-divider: #dee2e6;
88
+ --color-input-bg: #ffffff;
89
+ --color-input-border: #ced4da;
90
+ --color-shadow: rgba(0, 0, 0, 0.10);
83
91
 
84
92
  --color-primary: #1976d2;
85
93
  --color-on-primary: #ffffff;
86
- --color-link: #a435f0;
94
+ --color-link: #4a90e2;
87
95
  --color-hover-bg: rgba(25, 118, 210, 0.08);
88
96
  --color-code-bg: #282c34;
89
97
  --color-code-text: #ffffff;
@@ -93,6 +101,7 @@
93
101
  [data-theme="dark"] {
94
102
  --color-bg: #212529;
95
103
  --color-text: #f8f9fa;
104
+ --color-text-muted: #9ca3af;
96
105
  --color-card-bg: #343a40;
97
106
  --color-card-border: #444444;
98
107
  --color-btn-dark-bg: #f8f9fa;
@@ -100,10 +109,13 @@
100
109
  --color-btn-light-bg: #343a40;
101
110
  --color-btn-light-text: #f8f9fa;
102
111
  --color-divider: #444444;
112
+ --color-input-bg: #2d3238;
113
+ --color-input-border: #555555;
114
+ --color-shadow: rgba(0, 0, 0, 0.40);
103
115
 
104
116
  --color-primary: #90caf9;
105
117
  --color-on-primary: #212529;
106
- --color-link: #a435f0;
118
+ --color-link: #4a90e2;
107
119
  --color-hover-bg: rgba(144, 202, 249, 0.08);
108
120
  --color-code-bg: #232b36;
109
121
  --color-code-text: #f8f9fa;
@@ -116,6 +128,7 @@
116
128
  [data-theme="forest"] {
117
129
  --color-bg: #1b2e22;
118
130
  --color-text: #cde8d4;
131
+ --color-text-muted: #8aad95;
119
132
  --color-card-bg: #243c2b;
120
133
  --color-card-border: #3a5c44;
121
134
  --color-btn-dark-bg: #3a5c44;
@@ -123,6 +136,9 @@
123
136
  --color-btn-light-bg: #243c2b;
124
137
  --color-btn-light-text: #cde8d4;
125
138
  --color-divider: #3a5c44;
139
+ --color-input-bg: #1f3526;
140
+ --color-input-border: #3a5c44;
141
+ --color-shadow: rgba(0, 0, 0, 0.35);
126
142
 
127
143
  --color-primary: #4caf70;
128
144
  --color-on-primary: #1b2e22;
@@ -139,6 +155,7 @@
139
155
  [data-theme="tron"] {
140
156
  --color-bg: #0f172a;
141
157
  --color-text: #67e8f9;
158
+ --color-text-muted: #38bcd4;
142
159
  --color-card-bg: #1e293b;
143
160
  --color-card-border: #67e8f9;
144
161
  --color-btn-dark-bg: #0ea5e9;
@@ -146,6 +163,9 @@
146
163
  --color-btn-light-bg: #1e293b;
147
164
  --color-btn-light-text: #67e8f9;
148
165
  --color-divider: #0ea5e9;
166
+ --color-input-bg: #162236;
167
+ --color-input-border: #38bcd4;
168
+ --color-shadow: rgba(14, 165, 233, 0.15);
149
169
 
150
170
  --color-primary: #0ea5e9;
151
171
  --color-on-primary: #0f172a;
@@ -158,11 +178,12 @@
158
178
  /* --- Midnight Theme ---
159
179
  * A deep night-sky palette: near-black background, muted
160
180
  * blue-grey text, teal (#5ce1b5) primary accent, and
161
- * light-blue (#8bd4ff) link colour.
181
+ * light-blue (#8bd4ff) link color.
162
182
  */
163
183
  [data-theme="midnight"] {
164
184
  --color-bg: #0b1016;
165
185
  --color-text: #e7edf2;
186
+ --color-text-muted: #8fa9be;
166
187
  --color-card-bg: #131c28;
167
188
  --color-card-border: #263141;
168
189
  --color-btn-dark-bg: #263141;
@@ -170,6 +191,9 @@
170
191
  --color-btn-light-bg: #0f151e;
171
192
  --color-btn-light-text: #e7edf2;
172
193
  --color-divider: #263141;
194
+ --color-input-bg: #0f1a26;
195
+ --color-input-border: #2a3e52;
196
+ --color-shadow: rgba(0, 0, 0, 0.45);
173
197
 
174
198
  --color-primary: #5ce1b5;
175
199
  --color-on-primary: #0b1016;