@nova-vue/colors 0.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 (10) hide show
  1. package/README.md +48 -0
  2. package/package.json +46 -0
  3. package/src/blue.css +37 -0
  4. package/src/default.css +19 -0
  5. package/src/green.css +37 -0
  6. package/src/orange.css +37 -0
  7. package/src/red.css +37 -0
  8. package/src/rose.css +37 -0
  9. package/src/violet.css +37 -0
  10. package/src/yellow.css +37 -0
package/README.md ADDED
@@ -0,0 +1,48 @@
1
+ # @nova-vue/colors
2
+
3
+ Color themes for Nova Vue components.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ bun add @nova-vue/colors
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ Import a color theme CSS file **after** the main Nova Vue styles:
14
+
15
+ ```ts
16
+ // main.ts
17
+ import '@nova-vue/ui/styles.css'
18
+ import '@nova-vue/colors/blue.css' // or any other color theme
19
+ ```
20
+
21
+ ## Available Themes
22
+
23
+ | Theme | Primary Color | Description |
24
+ |-------|--------------|-------------|
25
+ | `default.css` | Neutral | Default grayscale theme |
26
+ | `red.css` | Red | Bold, attention-grabbing |
27
+ | `rose.css` | Rose | Soft, elegant |
28
+ | `orange.css` | Orange | Warm, energetic |
29
+ | `green.css` | Green | Fresh, natural |
30
+ | `blue.css` | Blue | Professional, trustworthy |
31
+ | `yellow.css` | Yellow | Bright, optimistic |
32
+ | `violet.css` | Violet | Creative, luxurious |
33
+
34
+ ## Dark Mode
35
+
36
+ All themes automatically support dark mode via the `.dark` class on a parent element.
37
+
38
+ ## Customization
39
+
40
+ Each theme overrides these CSS custom properties:
41
+
42
+ - `--primary` / `--primary-foreground`
43
+ - `--ring`
44
+ - `--accent` / `--accent-foreground`
45
+ - `--sidebar-primary` / `--sidebar-primary-foreground`
46
+ - `--sidebar-ring`
47
+
48
+ You can create your own theme by copying any theme file and modifying the color values.
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "@nova-vue/colors",
3
+ "version": "0.1.0",
4
+ "description": "Color themes for Nova Vue - blue, green, red, rose, orange, yellow, violet",
5
+ "author": "Ndivhuwo Khabubu",
6
+ "license": "MIT",
7
+ "homepage": "https://github.com/khabzdev/nova-vue",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/khabzdev/nova-vue.git",
11
+ "directory": "packages/colors"
12
+ },
13
+ "bugs": {
14
+ "url": "https://github.com/khabzdev/nova-vue/issues"
15
+ },
16
+ "keywords": [
17
+ "vue",
18
+ "vue3",
19
+ "themes",
20
+ "colors",
21
+ "css",
22
+ "tailwindcss",
23
+ "novavue",
24
+ "design-tokens"
25
+ ],
26
+ "type": "module",
27
+ "exports": {
28
+ "./default.css": "./src/default.css",
29
+ "./red.css": "./src/red.css",
30
+ "./rose.css": "./src/rose.css",
31
+ "./orange.css": "./src/orange.css",
32
+ "./green.css": "./src/green.css",
33
+ "./blue.css": "./src/blue.css",
34
+ "./yellow.css": "./src/yellow.css",
35
+ "./violet.css": "./src/violet.css"
36
+ },
37
+ "files": [
38
+ "src"
39
+ ],
40
+ "sideEffects": [
41
+ "**/*.css"
42
+ ],
43
+ "peerDependencies": {
44
+ "@nova-vue/ui": ">=0.1.0"
45
+ }
46
+ }
package/src/blue.css ADDED
@@ -0,0 +1,37 @@
1
+ /*
2
+ * Nova Vue - Blue Theme
3
+ * A professional, trustworthy blue theme for business interfaces.
4
+ * Import this file after @nova-vue/ui/styles.css
5
+ */
6
+
7
+ /* Light Mode */
8
+ :root {
9
+ --primary: var(--color-blue-600);
10
+ --primary-foreground: var(--color-white);
11
+ --ring: var(--color-blue-400);
12
+
13
+ /* Accent to match */
14
+ --accent: color-mix(in srgb, var(--color-blue-500) 10%, transparent);
15
+ --accent-foreground: var(--color-blue-700);
16
+
17
+ /* Sidebar */
18
+ --sidebar-primary: var(--color-blue-600);
19
+ --sidebar-primary-foreground: var(--color-white);
20
+ --sidebar-ring: var(--color-blue-400);
21
+ }
22
+
23
+ /* Dark Mode */
24
+ .dark {
25
+ --primary: var(--color-blue-500);
26
+ --primary-foreground: var(--color-white);
27
+ --ring: var(--color-blue-400);
28
+
29
+ /* Accent to match */
30
+ --accent: color-mix(in srgb, var(--color-blue-500) 15%, transparent);
31
+ --accent-foreground: var(--color-blue-300);
32
+
33
+ /* Sidebar */
34
+ --sidebar-primary: var(--color-blue-500);
35
+ --sidebar-primary-foreground: var(--color-white);
36
+ --sidebar-ring: var(--color-blue-400);
37
+ }
package/src/default.css ADDED
@@ -0,0 +1,19 @@
1
+ /*
2
+ * Nova Vue - Default Theme (Neutral)
3
+ * This is the default theme, no overrides needed.
4
+ * Import this file after @nova-vue/ui/styles.css
5
+ */
6
+
7
+ /* Light Mode - Default uses neutral colors */
8
+ :root {
9
+ --primary: var(--color-neutral-800);
10
+ --primary-foreground: var(--color-neutral-50);
11
+ --ring: var(--color-neutral-400);
12
+ }
13
+
14
+ /* Dark Mode */
15
+ .dark {
16
+ --primary: var(--color-neutral-100);
17
+ --primary-foreground: var(--color-neutral-800);
18
+ --ring: var(--color-neutral-500);
19
+ }
package/src/green.css ADDED
@@ -0,0 +1,37 @@
1
+ /*
2
+ * Nova Vue - Green Theme
3
+ * A fresh, natural green theme for eco-friendly interfaces.
4
+ * Import this file after @nova-vue/ui/styles.css
5
+ */
6
+
7
+ /* Light Mode */
8
+ :root {
9
+ --primary: var(--color-green-600);
10
+ --primary-foreground: var(--color-white);
11
+ --ring: var(--color-green-400);
12
+
13
+ /* Accent to match */
14
+ --accent: color-mix(in srgb, var(--color-green-500) 10%, transparent);
15
+ --accent-foreground: var(--color-green-700);
16
+
17
+ /* Sidebar */
18
+ --sidebar-primary: var(--color-green-600);
19
+ --sidebar-primary-foreground: var(--color-white);
20
+ --sidebar-ring: var(--color-green-400);
21
+ }
22
+
23
+ /* Dark Mode */
24
+ .dark {
25
+ --primary: var(--color-green-500);
26
+ --primary-foreground: var(--color-white);
27
+ --ring: var(--color-green-400);
28
+
29
+ /* Accent to match */
30
+ --accent: color-mix(in srgb, var(--color-green-500) 15%, transparent);
31
+ --accent-foreground: var(--color-green-300);
32
+
33
+ /* Sidebar */
34
+ --sidebar-primary: var(--color-green-500);
35
+ --sidebar-primary-foreground: var(--color-white);
36
+ --sidebar-ring: var(--color-green-400);
37
+ }
package/src/orange.css ADDED
@@ -0,0 +1,37 @@
1
+ /*
2
+ * Nova Vue - Orange Theme
3
+ * A warm, energetic orange theme for vibrant interfaces.
4
+ * Import this file after @nova-vue/ui/styles.css
5
+ */
6
+
7
+ /* Light Mode */
8
+ :root {
9
+ --primary: var(--color-orange-600);
10
+ --primary-foreground: var(--color-white);
11
+ --ring: var(--color-orange-400);
12
+
13
+ /* Accent to match */
14
+ --accent: color-mix(in srgb, var(--color-orange-500) 10%, transparent);
15
+ --accent-foreground: var(--color-orange-700);
16
+
17
+ /* Sidebar */
18
+ --sidebar-primary: var(--color-orange-600);
19
+ --sidebar-primary-foreground: var(--color-white);
20
+ --sidebar-ring: var(--color-orange-400);
21
+ }
22
+
23
+ /* Dark Mode */
24
+ .dark {
25
+ --primary: var(--color-orange-500);
26
+ --primary-foreground: var(--color-white);
27
+ --ring: var(--color-orange-400);
28
+
29
+ /* Accent to match */
30
+ --accent: color-mix(in srgb, var(--color-orange-500) 15%, transparent);
31
+ --accent-foreground: var(--color-orange-300);
32
+
33
+ /* Sidebar */
34
+ --sidebar-primary: var(--color-orange-500);
35
+ --sidebar-primary-foreground: var(--color-white);
36
+ --sidebar-ring: var(--color-orange-400);
37
+ }
package/src/red.css ADDED
@@ -0,0 +1,37 @@
1
+ /*
2
+ * Nova Vue - Red Theme
3
+ * A bold red theme for attention-grabbing interfaces.
4
+ * Import this file after @nova-vue/ui/styles.css
5
+ */
6
+
7
+ /* Light Mode */
8
+ :root {
9
+ --primary: var(--color-red-600);
10
+ --primary-foreground: var(--color-white);
11
+ --ring: var(--color-red-400);
12
+
13
+ /* Accent to match */
14
+ --accent: color-mix(in srgb, var(--color-red-500) 10%, transparent);
15
+ --accent-foreground: var(--color-red-700);
16
+
17
+ /* Sidebar */
18
+ --sidebar-primary: var(--color-red-600);
19
+ --sidebar-primary-foreground: var(--color-white);
20
+ --sidebar-ring: var(--color-red-400);
21
+ }
22
+
23
+ /* Dark Mode */
24
+ .dark {
25
+ --primary: var(--color-red-500);
26
+ --primary-foreground: var(--color-white);
27
+ --ring: var(--color-red-400);
28
+
29
+ /* Accent to match */
30
+ --accent: color-mix(in srgb, var(--color-red-500) 15%, transparent);
31
+ --accent-foreground: var(--color-red-300);
32
+
33
+ /* Sidebar */
34
+ --sidebar-primary: var(--color-red-500);
35
+ --sidebar-primary-foreground: var(--color-white);
36
+ --sidebar-ring: var(--color-red-400);
37
+ }
package/src/rose.css ADDED
@@ -0,0 +1,37 @@
1
+ /*
2
+ * Nova Vue - Rose Theme
3
+ * A soft, elegant rose theme for refined interfaces.
4
+ * Import this file after @nova-vue/ui/styles.css
5
+ */
6
+
7
+ /* Light Mode */
8
+ :root {
9
+ --primary: var(--color-rose-600);
10
+ --primary-foreground: var(--color-white);
11
+ --ring: var(--color-rose-400);
12
+
13
+ /* Accent to match */
14
+ --accent: color-mix(in srgb, var(--color-rose-500) 10%, transparent);
15
+ --accent-foreground: var(--color-rose-700);
16
+
17
+ /* Sidebar */
18
+ --sidebar-primary: var(--color-rose-600);
19
+ --sidebar-primary-foreground: var(--color-white);
20
+ --sidebar-ring: var(--color-rose-400);
21
+ }
22
+
23
+ /* Dark Mode */
24
+ .dark {
25
+ --primary: var(--color-rose-500);
26
+ --primary-foreground: var(--color-white);
27
+ --ring: var(--color-rose-400);
28
+
29
+ /* Accent to match */
30
+ --accent: color-mix(in srgb, var(--color-rose-500) 15%, transparent);
31
+ --accent-foreground: var(--color-rose-300);
32
+
33
+ /* Sidebar */
34
+ --sidebar-primary: var(--color-rose-500);
35
+ --sidebar-primary-foreground: var(--color-white);
36
+ --sidebar-ring: var(--color-rose-400);
37
+ }
package/src/violet.css ADDED
@@ -0,0 +1,37 @@
1
+ /*
2
+ * Nova Vue - Violet Theme
3
+ * A creative, luxurious violet theme for elegant interfaces.
4
+ * Import this file after @nova-vue/ui/styles.css
5
+ */
6
+
7
+ /* Light Mode */
8
+ :root {
9
+ --primary: var(--color-violet-600);
10
+ --primary-foreground: var(--color-white);
11
+ --ring: var(--color-violet-400);
12
+
13
+ /* Accent to match */
14
+ --accent: color-mix(in srgb, var(--color-violet-500) 10%, transparent);
15
+ --accent-foreground: var(--color-violet-700);
16
+
17
+ /* Sidebar */
18
+ --sidebar-primary: var(--color-violet-600);
19
+ --sidebar-primary-foreground: var(--color-white);
20
+ --sidebar-ring: var(--color-violet-400);
21
+ }
22
+
23
+ /* Dark Mode */
24
+ .dark {
25
+ --primary: var(--color-violet-500);
26
+ --primary-foreground: var(--color-white);
27
+ --ring: var(--color-violet-400);
28
+
29
+ /* Accent to match */
30
+ --accent: color-mix(in srgb, var(--color-violet-500) 15%, transparent);
31
+ --accent-foreground: var(--color-violet-300);
32
+
33
+ /* Sidebar */
34
+ --sidebar-primary: var(--color-violet-500);
35
+ --sidebar-primary-foreground: var(--color-white);
36
+ --sidebar-ring: var(--color-violet-400);
37
+ }
package/src/yellow.css ADDED
@@ -0,0 +1,37 @@
1
+ /*
2
+ * Nova Vue - Yellow Theme
3
+ * A bright, optimistic yellow theme for cheerful interfaces.
4
+ * Import this file after @nova-vue/ui/styles.css
5
+ */
6
+
7
+ /* Light Mode */
8
+ :root {
9
+ --primary: var(--color-yellow-500);
10
+ --primary-foreground: var(--color-yellow-950);
11
+ --ring: var(--color-yellow-400);
12
+
13
+ /* Accent to match */
14
+ --accent: color-mix(in srgb, var(--color-yellow-500) 15%, transparent);
15
+ --accent-foreground: var(--color-yellow-700);
16
+
17
+ /* Sidebar */
18
+ --sidebar-primary: var(--color-yellow-500);
19
+ --sidebar-primary-foreground: var(--color-yellow-950);
20
+ --sidebar-ring: var(--color-yellow-400);
21
+ }
22
+
23
+ /* Dark Mode */
24
+ .dark {
25
+ --primary: var(--color-yellow-400);
26
+ --primary-foreground: var(--color-yellow-950);
27
+ --ring: var(--color-yellow-500);
28
+
29
+ /* Accent to match */
30
+ --accent: color-mix(in srgb, var(--color-yellow-500) 15%, transparent);
31
+ --accent-foreground: var(--color-yellow-300);
32
+
33
+ /* Sidebar */
34
+ --sidebar-primary: var(--color-yellow-400);
35
+ --sidebar-primary-foreground: var(--color-yellow-950);
36
+ --sidebar-ring: var(--color-yellow-500);
37
+ }