@cocoar/vue-ui 1.0.1 → 1.2.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 (19) hide show
  1. package/dist/components/menu/CoarContextMenu.vue.d.ts +27 -0
  2. package/dist/components/menu/CoarContextMenu.vue.d.ts.map +1 -0
  3. package/dist/components/menu/index.d.ts +3 -0
  4. package/dist/components/menu/index.d.ts.map +1 -1
  5. package/dist/components/menu/useContextMenu.d.ts +43 -0
  6. package/dist/components/menu/useContextMenu.d.ts.map +1 -0
  7. package/dist/components/scrollbar/vScrollbar.d.ts.map +1 -1
  8. package/dist/components/sidebar/CoarSidebar.vue.d.ts +10 -0
  9. package/dist/components/sidebar/CoarSidebar.vue.d.ts.map +1 -1
  10. package/dist/fonts.js +6 -0
  11. package/dist/index.css +1 -1
  12. package/dist/index.d.ts +2 -2
  13. package/dist/index.d.ts.map +1 -1
  14. package/dist/index.js +1963 -1868
  15. package/package.json +8 -5
  16. package/styles/all.css +0 -1
  17. package/styles/tokens/colors-primitives-dark.css +57 -56
  18. package/styles/tokens/colors-primitives-light.css +68 -52
  19. package/styles/tokens/colors-usage.css +14 -14
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocoar/vue-ui",
3
- "version": "1.0.1",
3
+ "version": "1.2.0",
4
4
  "description": "Cocoar Design System — a touch-first Vue 3 component library with 30+ accessible, themeable components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -22,7 +22,7 @@
22
22
  "type": "module",
23
23
  "sideEffects": [
24
24
  "*.css",
25
- "./src/fonts.ts"
25
+ "./dist/fonts.js"
26
26
  ],
27
27
  "main": "./dist/index.js",
28
28
  "module": "./dist/index.js",
@@ -33,7 +33,10 @@
33
33
  "types": "./dist/index.d.ts"
34
34
  },
35
35
  "./styles": "./styles/bundle.css",
36
- "./fonts": "./src/fonts.ts"
36
+ "./fonts": {
37
+ "import": "./dist/fonts.js",
38
+ "types": "./dist/fonts.d.ts"
39
+ }
37
40
  },
38
41
  "files": [
39
42
  "dist",
@@ -45,8 +48,8 @@
45
48
  "lint": "eslint src/"
46
49
  },
47
50
  "dependencies": {
48
- "@cocoar/vue-fragment-parser": "1.0.1",
49
- "@cocoar/vue-localization": "1.0.1",
51
+ "@cocoar/vue-fragment-parser": "1.2.0",
52
+ "@cocoar/vue-localization": "1.2.0",
50
53
  "@fontsource/inter": "^5.2.8",
51
54
  "@fontsource/poppins": "^5.2.7",
52
55
  "@js-temporal/polyfill": "^0.5.0",
package/styles/all.css CHANGED
@@ -20,4 +20,3 @@
20
20
  @import './base.css' layer(cocoar.base);
21
21
  @import './components.css' layer(cocoar.components);
22
22
  @import './transitions.css' layer(cocoar.components);
23
- @import 'overlayscrollbars/overlayscrollbars.css';
package/styles/tokens/colors-primitives-dark.css CHANGED
@@ -21,64 +21,65 @@
21
21
  --coar-color-gray-800: #f4f4f5;
22
22
  --coar-color-gray-900: #fafafa;
23
23
 
24
- /* Slate for brand/accent areas in dark mode */
25
- --coar-color-slate-50: #0f172a;
26
- --coar-color-slate-100: #1e293b;
27
- --coar-color-slate-200: #334155;
28
- --coar-color-slate-300: #475569;
29
- --coar-color-slate-400: #64748b;
30
- --coar-color-slate-500: #94a3b8;
31
- --coar-color-slate-600: #b8c5d6;
32
- --coar-color-slate-700: #cbd5e1;
33
- --coar-color-slate-800: #e2e8f0;
34
- --coar-color-slate-900: #f1f5f9;
24
+ /* Info (slate) — inherits --coar-info from :root */
25
+ --coar-color-slate-50: oklch(from var(--coar-info) 0.18 0.012 h);
26
+ --coar-color-slate-100: oklch(from var(--coar-info) 0.23 0.018 h);
27
+ --coar-color-slate-200: oklch(from var(--coar-info) 0.30 0.022 h);
28
+ --coar-color-slate-300: oklch(from var(--coar-info) 0.40 0.025 h);
29
+ --coar-color-slate-400: oklch(from var(--coar-info) 0.50 0.03 h);
30
+ --coar-color-slate-500: var(--coar-info);
31
+ --coar-color-slate-600: oklch(from var(--coar-info) 0.70 0.025 h);
32
+ --coar-color-slate-700: oklch(from var(--coar-info) 0.78 0.018 h);
33
+ --coar-color-slate-800: oklch(from var(--coar-info) 0.86 0.012 h);
34
+ --coar-color-slate-900: oklch(from var(--coar-info) 0.93 0.006 h);
35
35
 
36
- /* Accent Colors - Primary brand accent for dark mode
37
- THEMING: Override these to customize the primary accent color */
38
- --coar-color-accent-50: #0a487a;
39
- --coar-color-accent-100: #0f5a99;
40
- --coar-color-accent-200: #156db7;
41
- --coar-color-accent-300: #1e80d1;
42
- --coar-color-accent-400: #278fe4;
43
- --coar-color-accent-500: #459fea;
44
- --coar-color-accent-600: #6eb4ef;
45
- --coar-color-accent-700: #9fcdf5;
46
- --coar-color-accent-800: #cde6fa;
47
- --coar-color-accent-900: #e8f4fc;
36
+ /* Accent Colors - auto-generated from --coar-accent via oklch
37
+ Designed for dark backgrounds: vibrant mid-range, rich dark tints.
38
+ Inherits --coar-accent from :root, no need to re-declare. */
39
+ --coar-color-accent-50: oklch(from var(--coar-accent) 0.20 0.045 h);
40
+ --coar-color-accent-100: oklch(from var(--coar-accent) 0.25 0.065 h);
41
+ --coar-color-accent-200: oklch(from var(--coar-accent) 0.32 0.095 h);
42
+ --coar-color-accent-300: oklch(from var(--coar-accent) 0.42 0.13 h);
43
+ --coar-color-accent-400: oklch(from var(--coar-accent) 0.52 0.155 h);
44
+ --coar-color-accent-500: var(--coar-accent);
45
+ --coar-color-accent-600: oklch(from var(--coar-accent) 0.68 0.14 h);
46
+ --coar-color-accent-700: oklch(from var(--coar-accent) 0.76 0.11 h);
47
+ --coar-color-accent-800: oklch(from var(--coar-accent) 0.85 0.07 h);
48
+ --coar-color-accent-900: oklch(from var(--coar-accent) 0.93 0.035 h);
48
49
 
49
- /* Green - success colors for dark mode */
50
- --coar-color-green-50: #0e3a1f;
51
- --coar-color-green-100: #134f2b;
52
- --coar-color-green-200: #186f39;
53
- --coar-color-green-300: #1e8f48;
54
- --coar-color-green-400: #25b95a;
55
- --coar-color-green-500: #4ac771;
56
- --coar-color-green-600: #76d591;
57
- --coar-color-green-700: #a4e3b5;
58
- --coar-color-green-800: #d2f1da;
59
- --coar-color-green-900: #e8f9ed;
50
+ /* Success (green) — inherits --coar-success from :root */
51
+ --coar-color-green-50: oklch(from var(--coar-success) 0.20 0.035 h);
52
+ --coar-color-green-100: oklch(from var(--coar-success) 0.25 0.055 h);
53
+ --coar-color-green-200: oklch(from var(--coar-success) 0.32 0.08 h);
54
+ --coar-color-green-300: oklch(from var(--coar-success) 0.42 0.11 h);
55
+ --coar-color-green-400: oklch(from var(--coar-success) 0.52 0.13 h);
56
+ --coar-color-green-500: var(--coar-success);
57
+ --coar-color-green-600: oklch(from var(--coar-success) 0.68 0.12 h);
58
+ --coar-color-green-700: oklch(from var(--coar-success) 0.76 0.09 h);
59
+ --coar-color-green-800: oklch(from var(--coar-success) 0.85 0.06 h);
60
+ --coar-color-green-900: oklch(from var(--coar-success) 0.93 0.03 h);
60
61
 
61
- /* Red - error colors for dark mode */
62
- --coar-color-red-50: #4d1414;
63
- --coar-color-red-100: #6f1d1d;
64
- --coar-color-red-200: #922626;
65
- --coar-color-red-300: #b52f2f;
66
- --coar-color-red-400: #d63b3b;
67
- --coar-color-red-500: #e45555;
68
- --coar-color-red-600: #ec7c7c;
69
- --coar-color-red-700: #f3a8a8;
70
- --coar-color-red-800: #f9d3d3;
71
- --coar-color-red-900: #fdecec;
62
+ /* Error (red) — inherits --coar-error from :root */
63
+ --coar-color-red-50: oklch(from var(--coar-error) 0.20 0.04 h);
64
+ --coar-color-red-100: oklch(from var(--coar-error) 0.25 0.06 h);
65
+ --coar-color-red-200: oklch(from var(--coar-error) 0.32 0.09 h);
66
+ --coar-color-red-300: oklch(from var(--coar-error) 0.42 0.12 h);
67
+ --coar-color-red-400: oklch(from var(--coar-error) 0.52 0.145 h);
68
+ --coar-color-red-500: var(--coar-error);
69
+ --coar-color-red-600: oklch(from var(--coar-error) 0.68 0.12 h);
70
+ --coar-color-red-700: oklch(from var(--coar-error) 0.76 0.09 h);
71
+ --coar-color-red-800: oklch(from var(--coar-error) 0.85 0.06 h);
72
+ --coar-color-red-900: oklch(from var(--coar-error) 0.93 0.03 h);
72
73
 
73
- /* Yellow - warning colors for dark mode */
74
- --coar-color-amber-50: #402908;
75
- --coar-color-amber-100: #66430f;
76
- --coar-color-amber-200: #996217;
77
- --coar-color-amber-300: #cc821f;
78
- --coar-color-amber-400: #ffa326;
79
- --coar-color-amber-500: #ffba4d;
80
- --coar-color-amber-600: #ffce78;
81
- --coar-color-amber-700: #ffdfa0;
82
- --coar-color-amber-800: #ffeec2;
83
- --coar-color-amber-900: #fff8e6;
74
+ /* Warning (amber) — inherits --coar-warning from :root */
75
+ --coar-color-amber-50: oklch(from var(--coar-warning) 0.22 0.04 h);
76
+ --coar-color-amber-100: oklch(from var(--coar-warning) 0.27 0.06 h);
77
+ --coar-color-amber-200: oklch(from var(--coar-warning) 0.34 0.09 h);
78
+ --coar-color-amber-300: oklch(from var(--coar-warning) 0.44 0.12 h);
79
+ --coar-color-amber-400: oklch(from var(--coar-warning) 0.54 0.14 h);
80
+ --coar-color-amber-500: var(--coar-warning);
81
+ --coar-color-amber-600: oklch(from var(--coar-warning) 0.70 0.12 h);
82
+ --coar-color-amber-700: oklch(from var(--coar-warning) 0.78 0.09 h);
83
+ --coar-color-amber-800: oklch(from var(--coar-warning) 0.86 0.06 h);
84
+ --coar-color-amber-900: oklch(from var(--coar-warning) 0.93 0.03 h);
84
85
  }
package/styles/tokens/colors-primitives-light.css CHANGED
@@ -17,59 +17,75 @@
17
17
  --coar-color-gray-700: #6b6b6b;
18
18
  --coar-color-gray-800: #5a5a5a;
19
19
  --coar-color-gray-900: #444444;
20
- --coar-color-green-50: #e8f9ed;
21
- --coar-color-green-100: #d2f1da;
22
- --coar-color-green-200: #a4e3b5;
23
- --coar-color-green-300: #76d591;
24
- --coar-color-green-400: #4ac771;
25
- --coar-color-green-500: #25b95a;
26
- --coar-color-green-600: #1e8f48;
27
- --coar-color-green-700: #186f39;
28
- --coar-color-green-800: #134f2b;
29
- --coar-color-green-900: #0e3a1f;
30
- --coar-color-red-50: #fdecec;
31
- --coar-color-red-100: #f9d3d3;
32
- --coar-color-red-200: #f3a8a8;
33
- --coar-color-red-300: #ec7c7c;
34
- --coar-color-red-400: #e45555;
35
- --coar-color-red-500: #d63b3b;
36
- --coar-color-red-600: #b52f2f;
37
- --coar-color-red-700: #922626;
38
- --coar-color-red-800: #6f1d1d;
39
- --coar-color-red-900: #4d1414;
40
- --coar-color-slate-100: #e3e6ec;
41
- --coar-color-slate-200: #c6cad4;
42
- --coar-color-slate-300: #a6adbc;
43
- --coar-color-slate-400: #8b94a7;
44
- --coar-color-slate-50: #f0f4fc;
45
- --coar-color-slate-500: #79849b;
46
- --coar-color-slate-600: #707d97;
47
- --coar-color-slate-700: #5e6b84;
48
- --coar-color-slate-800: #525e76;
49
- --coar-color-slate-900: #44526b;
20
+ /* Semantic base colors — override these to customize */
21
+ --coar-success: #1e8f48;
22
+ --coar-error: #d63b3b;
23
+ --coar-warning: #cc821f;
24
+ --coar-info: #5e6b84;
25
+
26
+ /* Success (green) — auto-generated from --coar-success */
27
+ --coar-color-green-50: oklch(from var(--coar-success) 0.97 0.012 h);
28
+ --coar-color-green-100: oklch(from var(--coar-success) 0.92 0.035 h);
29
+ --coar-color-green-200: oklch(from var(--coar-success) 0.84 0.065 h);
30
+ --coar-color-green-300: oklch(from var(--coar-success) 0.74 0.10 h);
31
+ --coar-color-green-400: oklch(from var(--coar-success) 0.66 0.13 h);
32
+ --coar-color-green-500: var(--coar-success);
33
+ --coar-color-green-600: oklch(from var(--coar-success) 0.47 0.12 h);
34
+ --coar-color-green-700: oklch(from var(--coar-success) 0.40 0.10 h);
35
+ --coar-color-green-800: oklch(from var(--coar-success) 0.33 0.08 h);
36
+ --coar-color-green-900: oklch(from var(--coar-success) 0.26 0.06 h);
37
+
38
+ /* Error (red) — auto-generated from --coar-error */
39
+ --coar-color-red-50: oklch(from var(--coar-error) 0.97 0.012 h);
40
+ --coar-color-red-100: oklch(from var(--coar-error) 0.92 0.035 h);
41
+ --coar-color-red-200: oklch(from var(--coar-error) 0.84 0.07 h);
42
+ --coar-color-red-300: oklch(from var(--coar-error) 0.74 0.11 h);
43
+ --coar-color-red-400: oklch(from var(--coar-error) 0.66 0.145 h);
44
+ --coar-color-red-500: var(--coar-error);
45
+ --coar-color-red-600: oklch(from var(--coar-error) 0.47 0.13 h);
46
+ --coar-color-red-700: oklch(from var(--coar-error) 0.40 0.11 h);
47
+ --coar-color-red-800: oklch(from var(--coar-error) 0.33 0.09 h);
48
+ --coar-color-red-900: oklch(from var(--coar-error) 0.26 0.07 h);
49
+
50
+ /* Warning (amber) — auto-generated from --coar-warning */
51
+ --coar-color-amber-50: oklch(from var(--coar-warning) 0.97 0.015 h);
52
+ --coar-color-amber-100: oklch(from var(--coar-warning) 0.92 0.04 h);
53
+ --coar-color-amber-200: oklch(from var(--coar-warning) 0.86 0.08 h);
54
+ --coar-color-amber-300: oklch(from var(--coar-warning) 0.78 0.12 h);
55
+ --coar-color-amber-400: oklch(from var(--coar-warning) 0.72 0.14 h);
56
+ --coar-color-amber-500: var(--coar-warning);
57
+ --coar-color-amber-600: oklch(from var(--coar-warning) 0.50 0.12 h);
58
+ --coar-color-amber-700: oklch(from var(--coar-warning) 0.43 0.10 h);
59
+ --coar-color-amber-800: oklch(from var(--coar-warning) 0.36 0.08 h);
60
+ --coar-color-amber-900: oklch(from var(--coar-warning) 0.29 0.06 h);
61
+
62
+ /* Info (slate) — auto-generated from --coar-info */
63
+ --coar-color-slate-50: oklch(from var(--coar-info) 0.97 0.006 h);
64
+ --coar-color-slate-100: oklch(from var(--coar-info) 0.92 0.012 h);
65
+ --coar-color-slate-200: oklch(from var(--coar-info) 0.84 0.02 h);
66
+ --coar-color-slate-300: oklch(from var(--coar-info) 0.74 0.03 h);
67
+ --coar-color-slate-400: oklch(from var(--coar-info) 0.66 0.035 h);
68
+ --coar-color-slate-500: var(--coar-info);
69
+ --coar-color-slate-600: oklch(from var(--coar-info) 0.47 0.03 h);
70
+ --coar-color-slate-700: oklch(from var(--coar-info) 0.40 0.025 h);
71
+ --coar-color-slate-800: oklch(from var(--coar-info) 0.35 0.02 h);
72
+ --coar-color-slate-900: oklch(from var(--coar-info) 0.30 0.02 h);
50
73
  --coar-color-white: #ffffff;
51
74
 
52
- /* Accent Colors - Primary brand accent (Cocoar blue)
53
- THEMING: Override these to customize the primary accent color */
54
- --coar-color-accent-50: #e8f4fc;
55
- --coar-color-accent-100: #cde6fa;
56
- --coar-color-accent-200: #9fcdf5;
57
- --coar-color-accent-300: #6eb4ef;
58
- --coar-color-accent-400: #459fea;
59
- --coar-color-accent-500: #278fe4;
60
- --coar-color-accent-600: #1e80d1;
61
- --coar-color-accent-700: #156db7;
62
- --coar-color-accent-800: #0f5a99;
63
- --coar-color-accent-900: #0a487a;
75
+ /* THEMING: Set your brand color here. All accent shades auto-calculate from it.
76
+ Override individual --coar-color-accent-{n} tokens to fine-tune. */
77
+ --coar-accent: #1183CD;
64
78
 
65
- --coar-color-amber-50: #fff8e6;
66
- --coar-color-amber-100: #ffeec2;
67
- --coar-color-amber-200: #ffdfa0;
68
- --coar-color-amber-300: #ffce78;
69
- --coar-color-amber-400: #ffba4d;
70
- --coar-color-amber-500: #ffa326;
71
- --coar-color-amber-600: #cc821f;
72
- --coar-color-amber-700: #996217;
73
- --coar-color-amber-800: #66430f;
74
- --coar-color-amber-900: #402908;
79
+ /* Accent Colors - auto-generated from --coar-accent via oklch
80
+ Extracts hue (h) from your brand color, applies designed lightness/chroma curves. */
81
+ --coar-color-accent-50: oklch(from var(--coar-accent) 0.97 0.012 h);
82
+ --coar-color-accent-100: oklch(from var(--coar-accent) 0.92 0.035 h);
83
+ --coar-color-accent-200: oklch(from var(--coar-accent) 0.84 0.075 h);
84
+ --coar-color-accent-300: oklch(from var(--coar-accent) 0.74 0.115 h);
85
+ --coar-color-accent-400: oklch(from var(--coar-accent) 0.66 0.145 h);
86
+ --coar-color-accent-500: var(--coar-accent);
87
+ --coar-color-accent-600: oklch(from var(--coar-accent) 0.53 0.15 h);
88
+ --coar-color-accent-700: oklch(from var(--coar-accent) 0.47 0.14 h);
89
+ --coar-color-accent-800: oklch(from var(--coar-accent) 0.39 0.12 h);
90
+ --coar-color-accent-900: oklch(from var(--coar-accent) 0.31 0.095 h);
75
91
  }
package/styles/tokens/colors-usage.css CHANGED
@@ -73,21 +73,21 @@
73
73
  THEMING: Override --coar-color-accent-* primitives to change these
74
74
  ========================================================================== */
75
75
 
76
- /* Background */
77
- --coar-background-accent-primary: var(--coar-color-accent-700);
78
- --coar-background-accent-secondary: var(--coar-color-accent-200);
76
+ /* Background — accent-500 = exact brand color */
77
+ --coar-background-accent-primary: var(--coar-color-accent-500);
78
+ --coar-background-accent-secondary: var(--coar-color-accent-100);
79
79
  --coar-background-accent-tertiary: var(--coar-color-accent-50);
80
- --coar-background-accent-hover: var(--coar-color-accent-800);
81
- --coar-background-accent-active: var(--coar-color-accent-900);
82
- --coar-background-accent-tertiary-active: var(--coar-color-accent-300);
80
+ --coar-background-accent-hover: var(--coar-color-accent-600);
81
+ --coar-background-accent-active: var(--coar-color-accent-700);
82
+ --coar-background-accent-tertiary-active: var(--coar-color-accent-200);
83
83
 
84
84
  /* Text */
85
- --coar-text-accent-primary: var(--coar-color-accent-700);
86
- --coar-text-accent-secondary: var(--coar-color-accent-600);
85
+ --coar-text-accent-primary: var(--coar-color-accent-600);
86
+ --coar-text-accent-secondary: var(--coar-color-accent-500);
87
87
 
88
88
  /* Border */
89
89
  --coar-border-accent-primary: var(--coar-color-accent-500);
90
- --coar-border-accent-secondary: var(--coar-color-accent-400);
90
+ --coar-border-accent-secondary: var(--coar-color-accent-300);
91
91
 
92
92
  /* Surface */
93
93
  --coar-surface-accent-secondary: var(--coar-color-accent-100);
@@ -208,17 +208,17 @@
208
208
  ACCENT - Lighter values for visibility on dark backgrounds
209
209
  ========================================================================== */
210
210
 
211
- /* Background */
211
+ /* Background — accent-500 = exact brand color (same in both modes) */
212
212
  --coar-background-accent-primary: var(--coar-color-accent-500);
213
- --coar-background-accent-secondary: var(--coar-color-accent-300);
213
+ --coar-background-accent-secondary: var(--coar-color-accent-200);
214
214
  --coar-background-accent-tertiary: var(--coar-color-accent-100);
215
215
  --coar-background-accent-hover: var(--coar-color-accent-400);
216
216
  --coar-background-accent-active: var(--coar-color-accent-300);
217
- --coar-background-accent-tertiary-active: var(--coar-color-accent-400);
217
+ --coar-background-accent-tertiary-active: var(--coar-color-accent-300);
218
218
 
219
219
  /* Text */
220
- --coar-text-accent-primary: var(--coar-color-accent-500);
221
- --coar-text-accent-secondary: var(--coar-color-accent-400);
220
+ --coar-text-accent-primary: var(--coar-color-accent-600);
221
+ --coar-text-accent-secondary: var(--coar-color-accent-500);
222
222
 
223
223
  /* Surface */
224
224
  --coar-surface-accent-secondary: var(--coar-color-accent-200);