@vaneui/ui 0.0.16 → 0.0.17

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 (12) hide show
  1. package/dist/components/theme/components/ui/props/keys.d.ts +1 -1
  2. package/dist/components/theme/components/ui/theme/sectionTheme.d.ts +15 -0
  3. package/dist/components/theme/index.js +29 -1
  4. package/dist/components/theme/index.js.map +1 -1
  5. package/dist/components/ui/props/keys.d.ts +1 -1
  6. package/dist/components/ui/theme/sectionTheme.d.ts +15 -0
  7. package/dist/index.esm.js +29 -1
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +29 -1
  10. package/dist/index.js.map +1 -1
  11. package/dist/vars.css +139 -0
  12. package/package.json +9 -3
package/dist/vars.css ADDED
@@ -0,0 +1,139 @@
1
+ @theme {
2
+ /* Text Colors */
3
+ --text-color-default: var(--color-gray-900, #111827);
4
+ --text-color-primary: var(--color-blue-600, #2563eb);
5
+ --text-color-secondary: var(--color-gray-600, #4b5563);
6
+ --text-color-tertiary: var(--color-gray-500, #6b7280);
7
+ --text-color-muted: var(--color-gray-400, #9ca3af);
8
+ --text-color-link: var(--color-blue-600, #2563eb);
9
+ --text-color-accent: var(--color-rose-700, #9333ea);
10
+ --text-color-success: var(--color-emerald-600, #059669);
11
+ --text-color-danger: var(--color-red-600, #dc2626);
12
+ --text-color-warning: var(--color-amber-600, #d97706);
13
+ --text-color-info: var(--color-cyan-600, #0891b2);
14
+
15
+ /* Background Colors */
16
+ --background-color-default: var(--color-white, #ffffff);
17
+ --background-color-primary: var(--color-blue-50, #eff6ff);
18
+ --background-color-secondary: var(--color-gray-50, #f9fafb);
19
+ --background-color-tertiary: var(--color-gray-100, #f3f4f6);
20
+ --background-color-accent: var(--color-rose-50, #faf5ff);
21
+ --background-color-success: var(--color-emerald-50, #ecfdf5);
22
+ --background-color-danger: var(--color-red-50, #fef2f2);
23
+ --background-color-warning: var(--color-amber-50, #fffbeb);
24
+ --background-color-info: var(--color-cyan-50, #ecfeff);
25
+ --background-color-muted: var(--color-gray-50, #f9fafb);
26
+ --background-color-link: var(--color-blue-50, #eff6ff);
27
+
28
+ /* Background Hover Colors */
29
+ --background-color-hover-default: var(--color-gray-50, #f3f4f6);
30
+ --background-color-hover-primary: var(--color-blue-100, #dbeafe);
31
+ --background-color-hover-secondary: var(--color-gray-100, #f3f4f6);
32
+ --background-color-hover-tertiary: var(--color-gray-200, #e5e7eb);
33
+ --background-color-hover-accent: var(--color-rose-100, #f5d0fe);
34
+ --background-color-hover-success: var(--color-emerald-100, #d1fae5);
35
+ --background-color-hover-danger: var(--color-red-100, #fee2e2);
36
+ --background-color-hover-warning: var(--color-amber-100, #fef3c7);
37
+ --background-color-hover-info: var(--color-cyan-100, #cffafe);
38
+ --background-color-hover-muted: var(--color-gray-100, #f3f4f6);
39
+ --background-color-hover-link: var(--color-blue-100, #dbeafe);
40
+
41
+ /* Background Active Colors */
42
+ --background-color-active-default: var(--color-gray-100, #e5e7eb);
43
+ --background-color-active-primary: var(--color-blue-200, #bfdbfe);
44
+ --background-color-active-secondary: var(--color-gray-200, #e5e7eb);
45
+ --background-color-active-tertiary: var(--color-gray-300, #d1d5db);
46
+ --background-color-active-accent: var(--color-rose-200, #fbcfe8);
47
+ --background-color-active-success: var(--color-emerald-200, #a7f3d0);
48
+ --background-color-active-danger: var(--color-red-200, #fecaca);
49
+ --background-color-active-warning: var(--color-amber-200, #fde68a);
50
+ --background-color-active-info: var(--color-cyan-200, #a5f3fc);
51
+ --background-color-active-muted: var(--color-gray-200, #e5e7eb);
52
+ --background-color-active-link: var(--color-blue-200, #bfdbfe);
53
+
54
+ /* Filled Button Background Colors */
55
+ --filled-background-color-default: var(--color-gray-800, #1f2937);
56
+ --filled-background-color-primary: var(--color-blue-600, #2563eb);
57
+ --filled-background-color-secondary: var(--color-gray-600, #4b5563);
58
+ --filled-background-color-tertiary: var(--color-gray-500, #6b7280);
59
+ --filled-background-color-accent: var(--color-rose-600, #e11d48);
60
+ --filled-background-color-success: var(--color-emerald-600, #059669);
61
+ --filled-background-color-danger: var(--color-red-600, #dc2626);
62
+ --filled-background-color-warning: var(--color-amber-600, #d97706);
63
+ --filled-background-color-info: var(--color-cyan-600, #0891b2);
64
+ --filled-background-color-muted: var(--color-gray-500, #6b7280);
65
+ --filled-background-color-link: var(--color-blue-600, #2563eb);
66
+
67
+ /* Filled Button Hover Background Colors */
68
+ --filled-background-color-hover-default: var(--color-gray-900, #111827);
69
+ --filled-background-color-hover-primary: var(--color-blue-700, #1d4ed8);
70
+ --filled-background-color-hover-secondary: var(--color-gray-700, #374151);
71
+ --filled-background-color-hover-tertiary: var(--color-gray-600, #4b5563);
72
+ --filled-background-color-hover-accent: var(--color-rose-700, #be123c);
73
+ --filled-background-color-hover-success: var(--color-emerald-700, #047857);
74
+ --filled-background-color-hover-danger: var(--color-red-700, #b91c1c);
75
+ --filled-background-color-hover-warning: var(--color-amber-700, #b45309);
76
+ --filled-background-color-hover-info: var(--color-cyan-700, #0e7490);
77
+ --filled-background-color-hover-muted: var(--color-gray-600, #4b5563);
78
+ --filled-background-color-hover-link: var(--color-blue-700, #1d4ed8);
79
+
80
+ /* Filled Button Active Background Colors */
81
+ --filled-background-color-active-default: var(--color-gray-950, #030712);
82
+ --filled-background-color-active-primary: var(--color-blue-800, #1e40af);
83
+ --filled-background-color-active-secondary: var(--color-gray-800, #1f2937);
84
+ --filled-background-color-active-tertiary: var(--color-gray-700, #374151);
85
+ --filled-background-color-active-accent: var(--color-rose-800, #9f1239);
86
+ --filled-background-color-active-success: var(--color-emerald-800, #065f46);
87
+ --filled-background-color-active-danger: var(--color-red-800, #991b1b);
88
+ --filled-background-color-active-warning: var(--color-amber-800, #92400e);
89
+ --filled-background-color-active-info: var(--color-cyan-800, #155e75);
90
+ --filled-background-color-active-muted: var(--color-gray-700, #374151);
91
+ --filled-background-color-active-link: var(--color-blue-800, #1e40af);
92
+
93
+ /* Layout Background Colors */
94
+ --layout-background-default: var(--color-white, #ffffff);
95
+ --layout-background-primary: var(--color-white, #ffffff);
96
+ --layout-background-secondary: var(--color-gray-50, #f9fafb);
97
+ --layout-background-tertiary: var(--color-gray-100, #f3f4f6);
98
+ --layout-background-accent: var(--color-indigo-50, #eef2ff);
99
+ --layout-background-success: var(--color-green-50, #f0fdf4);
100
+ --layout-background-danger: var(--color-red-50, #fef2f2);
101
+ --layout-background-warning: var(--color-yellow-50, #fefce8);
102
+ --layout-background-info: var(--color-blue-50, #eff6ff);
103
+ --layout-background-transparent: transparent;
104
+ --layout-background-muted: var(--color-gray-50, #f9fafb);
105
+ --layout-background-link: var(--color-blue-50, #eff6ff);
106
+
107
+ /* Border Colors */
108
+ --border-color-default: var(--color-gray-200, #d1d5db);
109
+ --border-color-primary: var(--color-blue-200, #93c5fd);
110
+ --border-color-secondary: var(--color-gray-200, #d1d5db);
111
+ --border-color-tertiary: var(--color-gray-200, #e5e7eb);
112
+ --border-color-muted: var(--color-gray-200, #e5e7eb);
113
+ --border-color-link: var(--color-blue-200, #93c5fd);
114
+ --border-color-accent: var(--color-rose-200, #d8b4fe);
115
+ --border-color-success: var(--color-emerald-200, #6ee7b7);
116
+ --border-color-danger: var(--color-red-200, #fca5a5);
117
+ --border-color-warning: var(--color-amber-200, #fcd34d);
118
+ --border-color-info: var(--color-cyan-200, #67e8f9);
119
+
120
+ /* Filled Button Border Colors */
121
+ --filled-border-color-default: var(--color-gray-800, #1f2937);
122
+ --filled-border-color-primary: var(--color-blue-600, #2563eb);
123
+ --filled-border-color-secondary: var(--color-gray-600, #4b5563);
124
+ --filled-border-color-tertiary: var(--color-gray-500, #6b7280);
125
+ --filled-border-color-accent: var(--color-rose-600, #e11d48);
126
+ --filled-border-color-success: var(--color-emerald-600, #059669);
127
+ --filled-border-color-danger: var(--color-red-600, #dc2626);
128
+ --filled-border-color-warning: var(--color-amber-600, #d97706);
129
+ --filled-border-color-info: var(--color-cyan-600, #0891b2);
130
+ --filled-border-color-muted: var(--color-gray-500, #6b7280);
131
+ --filled-border-color-link: var(--color-blue-600, #2563eb);
132
+
133
+ /* Accent / Action Colors */
134
+ --accent-color-default: var(--color-rose-600, #7c3aed);
135
+ --accent-color-hover: var(--color-rose-700, #6d28d9);
136
+
137
+ /* Additional Colors */
138
+ --overlay-color: rgba(0, 0, 0, 0.5);
139
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.0.16",
3
+ "version": "0.0.17",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -24,6 +24,10 @@
24
24
  "require": "./dist/components/complex/index.js",
25
25
  "types": "./dist/components/complex/index.d.ts"
26
26
  },
27
+ "./vars": {
28
+ "import": "./dist/vars.css",
29
+ "default": "./dist/vars.css"
30
+ },
27
31
  "./css": {
28
32
  "import": "./dist/ui.css",
29
33
  "default": "./dist/ui.css"
@@ -37,12 +41,14 @@
37
41
  "clean": "rimraf dist",
38
42
  "type-check": "tsc --noEmit",
39
43
  "build:js": "npm run type-check && npm run clean && rollup -c --bundleConfigAsCjs",
44
+ "build:css:vars": "npx @tailwindcss/cli -i ./src/components/theme/vars.css -o ./dist/vars.css",
40
45
  "build:css:ui": "npx @tailwindcss/cli -i ./src/components/ui/index.css -o ./dist/ui.css",
41
46
  "build:css:complex": "npx @tailwindcss/cli -i ./src/components/complex/index.css -o ./dist/complex.css",
47
+ "watch:css:vars": "npx @tailwindcss/cli --watch -i ./src/components/theme/vars.css -o ./dist/vars.css",
42
48
  "watch:css:ui": "npx @tailwindcss/cli --watch -i ./src/components/ui/index.css -o ./dist/ui.css",
43
49
  "watch:css:complex": "npx @tailwindcss/cli --watch -i ./src/components/complex/index.css -o ./dist/complex.css",
44
- "build": "npm run type-check && npm run clean && npm run build:js && npm run build:css:ui && npm run build:css:complex",
45
- "watch": "npm run clean && concurrently \"rollup -c --bundleConfigAsCjs -w\" \"npm run watch:css:ui\" \"npm run watch:css:complex\"",
50
+ "build": "npm run type-check && npm run clean && npm run build:js && npm run build:css:ui && npm run build:css:vars && npm run build:css:complex",
51
+ "watch": "npm run clean && concurrently \"rollup -c --bundleConfigAsCjs -w\" \"npm run watch:css:ui\" \"npm run watch:css:vars\" \"npm run watch:css:complex\"",
46
52
  "prepublishOnly": "npm run build",
47
53
  "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
48
54
  },