@memobit/themes 1.0.1 → 1.0.3

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/dist/vite.d.ts CHANGED
@@ -1,8 +1,6 @@
1
1
  interface ThemePlugin {
2
2
  name: string;
3
- config(userConfig: {
4
- base?: string;
5
- }): {
3
+ config(): {
6
4
  define: Record<string, string>;
7
5
  };
8
6
  configureServer(server: {
package/dist/vite.js CHANGED
@@ -33,9 +33,8 @@ var memobitThemes = (options = {}) => {
33
33
  const themes = readThemeFiles(root);
34
34
  return {
35
35
  name: "memobit-themes",
36
- config(userConfig) {
37
- const base = (userConfig.base ?? "/").replace(/\/+$/, "");
38
- const urls = Object.fromEntries([...themes.keys()].map((name) => [name, `${base}/${THEME_ASSET_DIR}/${name}.css`]));
36
+ config() {
37
+ const urls = Object.fromEntries([...themes.keys()].map((name) => [name, `../${THEME_ASSET_DIR}/${name}.css`]));
39
38
  return { define: { __MEMOBIT_THEME_URLS__: JSON.stringify(urls) } };
40
39
  },
41
40
  configureServer(server) {
package/package.json CHANGED
@@ -1,77 +1,77 @@
1
- {
2
- "name": "@memobit/themes",
3
- "version": "1.0.1",
4
- "description": "64 themes for the Memobit apps — each published as its own stylesheet so an app loads only the one it is showing, with preview palettes for the theme picker.",
5
- "keywords": [
6
- "css",
7
- "themes",
8
- "theming",
9
- "design-tokens",
10
- "dark-mode",
11
- "scss",
12
- "memobit"
13
- ],
14
- "author": "Iulian Cristea <iulianx@gmail.com>",
15
- "license": "Apache-2.0",
16
- "homepage": "https://react.memobit.ro/",
17
- "repository": {
18
- "type": "git",
19
- "url": "git+https://github.com/CristeaIulian/memobit-react-library-themes.git"
20
- },
21
- "bugs": {
22
- "url": "https://github.com/CristeaIulian/memobit-react-library-themes/issues"
23
- },
24
- "publishConfig": {
25
- "access": "public"
26
- },
27
- "sideEffects": [
28
- "**/*.css",
29
- "**/*.scss"
30
- ],
31
- "type": "module",
32
- "main": "dist/index.js",
33
- "module": "dist/index.js",
34
- "types": "dist/index.d.ts",
35
- "exports": {
36
- ".": {
37
- "types": "./dist/index.d.ts",
38
- "import": "./dist/index.js"
39
- },
40
- "./vite": {
41
- "types": "./dist/vite.d.ts",
42
- "import": "./dist/vite.js"
43
- },
44
- "./themes.css": "./dist/themes.css",
45
- "./themes/*.css": "./dist/themes/*.css",
46
- "./src/theming/*.scss": "./src/theming/*.scss",
47
- "./package.json": "./package.json"
48
- },
49
- "files": [
50
- "dist",
51
- "src/theming"
52
- ],
53
- "scripts": {
54
- "build:themes": "node scripts/build-themes.mjs",
55
- "build": "npm run build:themes && vite build && npm pack",
56
- "release": "npm run build && npm publish",
57
- "prepublishOnly": "npm run build:themes && vite build",
58
- "lint": "eslint src --ext .ts",
59
- "lint:fix": "eslint src --ext .ts --fix"
60
- },
61
- "devDependencies": {
62
- "@eslint/js": "9.39.4",
63
- "@types/node": "25.8.0",
64
- "eslint": "9.39.4",
65
- "eslint-config-prettier": "10.1.8",
66
- "eslint-plugin-import-x": "4.17.1",
67
- "eslint-plugin-prettier": "5.5.5",
68
- "eslint-plugin-simple-import-sort": "13.0.0",
69
- "globals": "17.6.0",
70
- "prettier": "3.8.3",
71
- "sass": "1.99.0",
72
- "typescript": "6.0.3",
73
- "typescript-eslint": "8.59.3",
74
- "vite": "8.1.5",
75
- "vite-plugin-dts": "5.0.0"
76
- }
77
- }
1
+ {
2
+ "name": "@memobit/themes",
3
+ "version": "1.0.3",
4
+ "description": "65 themes for the Memobit apps — each published as its own stylesheet so an app loads only the one it is showing, with preview palettes for the theme picker.",
5
+ "keywords": [
6
+ "css",
7
+ "themes",
8
+ "theming",
9
+ "design-tokens",
10
+ "dark-mode",
11
+ "scss",
12
+ "memobit"
13
+ ],
14
+ "author": "Iulian Cristea <iulianx@gmail.com>",
15
+ "license": "Apache-2.0",
16
+ "homepage": "https://react.memobit.ro/",
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "git+https://github.com/CristeaIulian/memobit-react-library-themes.git"
20
+ },
21
+ "bugs": {
22
+ "url": "https://github.com/CristeaIulian/memobit-react-library-themes/issues"
23
+ },
24
+ "publishConfig": {
25
+ "access": "public"
26
+ },
27
+ "sideEffects": [
28
+ "**/*.css",
29
+ "**/*.scss"
30
+ ],
31
+ "type": "module",
32
+ "main": "dist/index.js",
33
+ "module": "dist/index.js",
34
+ "types": "dist/index.d.ts",
35
+ "exports": {
36
+ ".": {
37
+ "types": "./dist/index.d.ts",
38
+ "import": "./dist/index.js"
39
+ },
40
+ "./vite": {
41
+ "types": "./dist/vite.d.ts",
42
+ "import": "./dist/vite.js"
43
+ },
44
+ "./themes.css": "./dist/themes.css",
45
+ "./themes/*.css": "./dist/themes/*.css",
46
+ "./src/theming/*.scss": "./src/theming/*.scss",
47
+ "./package.json": "./package.json"
48
+ },
49
+ "files": [
50
+ "dist",
51
+ "src/theming"
52
+ ],
53
+ "scripts": {
54
+ "build:themes": "node scripts/build-themes.mjs",
55
+ "build": "npm run build:themes && vite build && npm pack",
56
+ "release": "npm run build && npm publish",
57
+ "prepublishOnly": "npm run build:themes && vite build",
58
+ "lint": "eslint src --ext .ts",
59
+ "lint:fix": "eslint src --ext .ts --fix"
60
+ },
61
+ "devDependencies": {
62
+ "@eslint/js": "9.39.4",
63
+ "@types/node": "25.8.0",
64
+ "eslint": "9.39.4",
65
+ "eslint-config-prettier": "10.1.8",
66
+ "eslint-plugin-import-x": "4.17.1",
67
+ "eslint-plugin-prettier": "5.5.5",
68
+ "eslint-plugin-simple-import-sort": "13.0.0",
69
+ "globals": "17.6.0",
70
+ "prettier": "3.8.3",
71
+ "sass": "1.99.0",
72
+ "typescript": "6.0.3",
73
+ "typescript-eslint": "8.59.3",
74
+ "vite": "8.1.5",
75
+ "vite-plugin-dts": "5.0.0"
76
+ }
77
+ }
@@ -0,0 +1,273 @@
1
+ // Kindred Ink theme - Dark, intimate theme for the Recall app (people you care about)
2
+ // Plum-black ink, warm paper text, a rose-copper candle accent and a faint gold glow
3
+ [data-theme='kindred-ink'] {
4
+ --font-family: 'Nunito Sans', 'Segoe UI', sans-serif;
5
+ --font-family-display: 'Fraunces', Georgia, serif;
6
+
7
+ --body-background: var(--body-background-wash, var(--body-background-base));
8
+ --body-background-base: #17131c;
9
+ --body-background-wash:
10
+ radial-gradient(55% 50% at 100% 0%, rgba(224, 137, 106, 0.14) 0%, transparent 65%),
11
+ radial-gradient(50% 45% at 0% 100%, rgba(217, 168, 92, 0.09) 0%, transparent 65%),
12
+ linear-gradient(160deg, #211a28 0%, #17131c 55%, #120f16 100%);
13
+ --body-background-glow:
14
+ radial-gradient(900px 500px at 85% 5%, rgba(224, 137, 106, 0.16) 0%, transparent 60%),
15
+ radial-gradient(700px 700px at 10% 95%, rgba(217, 168, 92, 0.08) 0%, transparent 65%);
16
+ --body-color: #e6ddd4;
17
+ --body-color-accent: #fbf5ee;
18
+ --body-color-muted: #a3978f;
19
+ --body-title-color: #f6ece2;
20
+ --body-sub-title-color: #c7bab0;
21
+ --body-accent-color: #e0896a;
22
+ --body-danger-color: #e06a62;
23
+
24
+ --backdrop-color: rgba(8, 6, 10, 0.62);
25
+ --text-shadow: rgba(0, 0, 0, 0.45);
26
+ --box-shadow: rgba(0, 0, 0, 0.45);
27
+
28
+ --header-background-color: #1d1823;
29
+ --header-border-bottom-color: rgba(224, 137, 106, 0.16);
30
+ --header-color: #e6ddd4;
31
+ --header-font-weight: 500;
32
+
33
+ --card-background-color: #221c29;
34
+ --card-background-accent-color: rgba(224, 137, 106, 0.06);
35
+ --card-border-color: #322a3a;
36
+ --card-backdrop-filter: none;
37
+ --card-border-accent-color: #e0896a;
38
+ --card-hover-border-color: rgba(224, 137, 106, 0.45);
39
+ --card-color: #e6ddd4;
40
+ --card-accent-color: #e0896a;
41
+ --card-box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.28);
42
+ --card-surface-box-shadow: 0 1px 0 rgba(255, 240, 230, 0.04) inset, 0 0 0 1px rgba(0, 0, 0, 0.3), 0 18px 40px -20px rgba(0, 0, 0, 0.6);
43
+ --card-footer-background-color: #1d1823;
44
+ --card-footer-color: #c7bab0;
45
+ --card-title-color: var(--body-title-color);
46
+ --card-title-font-family: var(--font-family-display, Georgia, serif);
47
+ --card-title-font-size: var(--font-size-xl);
48
+ --card-title-font-style: italic;
49
+ --card-title-font-weight: 500;
50
+ --card-title-letter-spacing: 0.01em;
51
+ --card-title-text-transform: none;
52
+
53
+ --links-color: #e0896a;
54
+ --links-hover-color: #eda78c;
55
+
56
+ --delimiter-color: rgba(230, 221, 212, 0.1);
57
+ --border-color: rgba(230, 221, 212, 0.12);
58
+
59
+ --button-default-border-color: #3a3142;
60
+ --button-default-background-color: #29222f;
61
+ --button-default-color: #e6ddd4;
62
+ --button-default-hover-border-color: #eda78c;
63
+ --button-default-hover-background-color: #332a3a;
64
+ --button-default-hover-color: #fbf5ee;
65
+
66
+ --button-info-border-color: #e0896a;
67
+ --button-info-background-color: #b8644a;
68
+ --button-info-color: #fff6ef;
69
+ --button-info-hover-border-color: #eda78c;
70
+ --button-info-hover-background-color: #cf7556;
71
+ --button-info-hover-color: #fff6ef;
72
+
73
+ --button-warning-border-color: #d9a85c;
74
+ --button-warning-background-color: #a87c38;
75
+ --button-warning-color: #fff8ec;
76
+ --button-warning-hover-border-color: #e8c07f;
77
+ --button-warning-hover-background-color: #c08f45;
78
+ --button-warning-hover-color: #fff8ec;
79
+
80
+ --button-success-border-color: #6fae86;
81
+ --button-success-background-color: #3f7a58;
82
+ --button-success-color: #f2fff6;
83
+ --button-success-hover-border-color: #8fc7a2;
84
+ --button-success-hover-background-color: #4c8f68;
85
+ --button-success-hover-color: #f2fff6;
86
+
87
+ --button-danger-border-color: #e06a62;
88
+ --button-danger-background-color: #a8443e;
89
+ --button-danger-color: #fff2f0;
90
+ --button-danger-hover-border-color: #ee8d86;
91
+ --button-danger-hover-background-color: #c0524b;
92
+ --button-danger-hover-color: #fff2f0;
93
+
94
+ --button-plain-color: #c7bab0;
95
+ --button-plain-hover-color: #fbf5ee;
96
+ --button-ghost-border-color: transparent;
97
+ --button-ghost-background-color: transparent;
98
+ --button-ghost-color: var(--button-plain-color);
99
+ --button-ghost-hover-border-color: transparent;
100
+ --button-ghost-hover-background-color: rgba(224, 137, 106, 0.12);
101
+ --button-ghost-hover-color: var(--button-plain-hover-color);
102
+ --dropdown-border-color: #3a3142;
103
+ --dropdown-header-background-color: #1d1823;
104
+ --dropdown-header-border-focus-color: #e0896a;
105
+ --dropdown-header-color: #e6ddd4;
106
+ --dropdown-options-background-color: #241e2b;
107
+ --dropdown-options-color: #e6ddd4;
108
+ --dropdown-options-hover-background-color: rgba(224, 137, 106, 0.12);
109
+ --dropdown-options-hover-color: #fbf5ee;
110
+ --dropdown-options-selected-background-color: rgba(224, 137, 106, 0.22);
111
+ --dropdown-options-selected-color: #fbf5ee;
112
+ --dropdown-chips-background-color: #b8644a;
113
+ --dropdown-chips-color: #fff6ef;
114
+ --dropdown-chips-border-color: #e0896a;
115
+ --dropdown-chips-hover-background-color: #cf7556;
116
+ --dropdown-action-color: #c7bab0;
117
+ --dropdown-action-background-color: #241e2b;
118
+ --dropdown-action-hover-color: #fbf5ee;
119
+ --dropdown-action-hover-background-color: #332a3a;
120
+
121
+ --tabs-active-background-color: #e0896a;
122
+ --tabs-active-color: #1a1420;
123
+ --tabs-inactive-background-color: transparent;
124
+ --tabs-inactive-color: #a3978f;
125
+
126
+ --modal-background-color: #221c29;
127
+ --modal-border-color: #3a3142;
128
+ --modal-backdrop-filter: none;
129
+ --modal-header-background-color: #1d1823;
130
+ --modal-header-color: #f6ece2;
131
+ --modal-title-color: var(--modal-header-color);
132
+ --modal-title-font-family: var(--font-family-display, Georgia, serif);
133
+ --modal-title-font-size: var(--font-size-xl);
134
+ --modal-title-font-style: italic;
135
+ --modal-title-font-weight: 500;
136
+ --modal-title-letter-spacing: 0.01em;
137
+ --modal-title-text-transform: none;
138
+ --modal-body-color: #e6ddd4;
139
+ --modal-footer-background-color: #1d1823;
140
+ --modal-color: #e6ddd4;
141
+ --modal-box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.4);
142
+ --modal-surface-box-shadow: 0 1px 0 rgba(255, 240, 230, 0.04) inset, 0 0 0 1px rgba(0, 0, 0, 0.3), 0 18px 40px -20px rgba(0, 0, 0, 0.6);
143
+ --modal-box-shadow-hover: 0 32px 90px rgba(0, 0, 0, 0.64), 0 8px 24px rgba(0, 0, 0, 0.44);
144
+
145
+ --list-alternate-background-color: #1f1925;
146
+ --list-hover-background-color: rgba(224, 137, 106, 0.08);
147
+
148
+ --progress-bar-background-color: #2c2433;
149
+ --progress-bar-color: #fbf5ee;
150
+
151
+ --progress-default-bar-border-color: #3a3142;
152
+ --progress-default-bar-fill-color: #8a7d85;
153
+
154
+ --progress-success-bar-border-color: #6fae86;
155
+ --progress-success-bar-fill-color: #6fae86;
156
+
157
+ --progress-info-bar-border-color: #e0896a;
158
+ --progress-info-bar-fill-color: #e0896a;
159
+
160
+ --progress-warning-bar-border-color: #d9a85c;
161
+ --progress-warning-bar-fill-color: #d9a85c;
162
+
163
+ --progress-danger-bar-border-color: #e06a62;
164
+ --progress-danger-bar-fill-color: #e06a62;
165
+
166
+ --form-control-background-color: #1b1621;
167
+ --form-control-color: #e6ddd4;
168
+ --form-control-label-color: #a3978f;
169
+ --form-control-label-font-size: var(--font-size-xs);
170
+ --form-control-label-font-weight: var(--font-weight-semibold);
171
+ --form-control-label-letter-spacing: 0.08em;
172
+ --form-control-label-text-transform: uppercase;
173
+ --form-control-border-color: #3a3142;
174
+ --form-control-error-background-color: rgba(224, 106, 98, 0.08);
175
+ --form-control-error-color: #ee8d86;
176
+ --form-control-error-border-color: #e06a62;
177
+ --form-control-focus-background-color: #201a27;
178
+ --form-control-focus-border-color: #e0896a;
179
+ --form-control-focus-color: #fbf5ee;
180
+ --form-control-placeholder-color: #7d7179;
181
+ --form-control-success-background-color: rgba(111, 174, 134, 0.08);
182
+ --form-control-success-color: #8fc7a2;
183
+ --form-control-success-border-color: #6fae86;
184
+
185
+ --form-control-selection-background-color: #e0896a;
186
+ --form-control-selection-border-color: #e0896a;
187
+ --form-control-selection-color: #1a1420;
188
+ --form-control-selection-label-color: #fbf5ee;
189
+ --form-control-focus-ring: rgba(224, 137, 106, 0.28);
190
+
191
+ --calendar-background-color: #1d1823;
192
+ --calendar-border-color: #3a3142;
193
+ --calendar-header-background-color: #29222f;
194
+ --calendar-header-color: #f6ece2;
195
+ --calendar-day-color: #c7bab0;
196
+ --calendar-day-hover-background-color: #332a3a;
197
+ --calendar-day-selected-background-color: #e0896a;
198
+ --calendar-day-selected-color: #1a1420;
199
+ --calendar-day-disabled-color: #5b5058;
200
+ --calendar-day-today-border-color: #e0896a;
201
+ --calendar-day-weekend-color: #d9a85c;
202
+
203
+ --datepicker-input-background-color: #1b1621;
204
+
205
+ --tooltip-background-color: #e0896a;
206
+ --tooltip-border-color: #e0896a;
207
+ --tooltip-color: #1a1420;
208
+
209
+ --popover-background-color: #241e2b;
210
+ --popover-border-color: #e0896a;
211
+ --popover-color: #e6ddd4;
212
+ --popover-arrow-color: #e0896a;
213
+
214
+ --toast-info-background-color: #b8644a;
215
+ --toast-info-color: #fff6ef;
216
+ --toast-info-border-color: #e0896a;
217
+
218
+ --toast-success-background-color: #3f7a58;
219
+ --toast-success-color: #f2fff6;
220
+ --toast-success-border-color: #6fae86;
221
+
222
+ --toast-warning-background-color: #a87c38;
223
+ --toast-warning-color: #fff8ec;
224
+ --toast-warning-border-color: #d9a85c;
225
+
226
+ --toast-danger-background-color: #a8443e;
227
+ --toast-danger-color: #fff2f0;
228
+ --toast-danger-border-color: #e06a62;
229
+
230
+ --loader-border-color: rgba(224, 137, 106, 0.22);
231
+ --loader-border-top-color: #e0896a;
232
+
233
+ --rating-color-success: #6fae86;
234
+ --rating-color-warning: #d9a85c;
235
+ --rating-color-danger: #e06a62;
236
+ --rating-color-info: #e0896a;
237
+ --rating-empty-color: #3d3445;
238
+ --rating-empty-label-color: #a3978f;
239
+ --rating-half-rate-empty-color: #3d3445;
240
+
241
+ --slider-track-background-color: #2c2433;
242
+ --slider-track-border-color: #3a3142;
243
+ --slider-track-hover-background-color: #362d3e;
244
+ --slider-track-hover-border-color: #4a3f53;
245
+ --slider-thumb-background-color: #e0896a;
246
+ --slider-thumb-border-color: #e0896a;
247
+ --slider-thumb-hover-background-color: #eda78c;
248
+ --slider-thumb-hover-border-color: #eda78c;
249
+
250
+ --chip-selected-background-color: rgba(224, 137, 106, 0.2);
251
+ --chip-selected-border-color: #e0896a;
252
+ --chip-hover-border-color: #eda78c;
253
+ --chip-hover-background-color: transparent;
254
+ --chip-hover-color: var(--body-color);
255
+ --chip-selected-color: #eda78c;
256
+ --chip-selected-count-color: rgba(237, 167, 140, 0.75);
257
+
258
+ --note-container-effect-background-color: rgba(224, 137, 106, 0.08);
259
+ --note-container-effect-color: #e6ddd4;
260
+ --note-container-effect-border-left-color: #e0896a;
261
+
262
+ --infuse-effect-hover-border-color: #e0896a;
263
+ --infuse-effect-hover-box-shadow-color: rgba(224, 137, 106, 0.26);
264
+ --infuse-effect-before-background: linear-gradient(90deg, #e0896a, #d9a85c);
265
+
266
+ --up-lift-effect-hover-border-color: #e0896a;
267
+ --up-lift-effect-box-shadow-color: rgba(0, 0, 0, 0.4);
268
+ --up-lift-effect-hover-box-shadow-color: rgba(224, 137, 106, 0.3);
269
+ --up-lift-effect-before-background: linear-gradient(135deg, #e0896a 0%, #d9a85c 100%);
270
+
271
+ --glow-box-shadow-color: 0 0 18px rgba(224, 137, 106, 0.34), 0 0 8px rgba(217, 168, 92, 0.2);
272
+ --glow-hover-border-color: rgba(224, 137, 106, 0.4);
273
+ }