@cocoar/vue-ui 2.8.0 → 2.10.0-beta.2
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/components/icon/core-icons.d.ts +7 -1
- package/dist/components/icon/core-icons.d.ts.map +1 -1
- package/dist/components/toast/CoarToastContainer.vue.d.ts +11 -2
- package/dist/components/toast/CoarToastContainer.vue.d.ts.map +1 -1
- package/dist/components/tree/CoarTree.vue.d.ts +34 -2
- package/dist/components/tree/CoarTree.vue.d.ts.map +1 -1
- package/dist/components/tree/index.d.ts +1 -1
- package/dist/components/tree/index.d.ts.map +1 -1
- package/dist/components/tree/tree-builder.d.ts +35 -1
- package/dist/components/tree/tree-builder.d.ts.map +1 -1
- package/dist/components/tree/tree-types.d.ts +43 -0
- package/dist/components/tree/tree-types.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +1360 -1122
- package/package.json +2 -2
- package/styles/tokens/all.css +4 -1
- package/styles/tokens/new-components.css +33 -0
- package/styles/tokens/theme-none.css +162 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocoar/vue-ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.10.0-beta.2",
|
|
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": {
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"typecheck": "vue-tsc --noEmit"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@cocoar/vue-localization": "2.
|
|
52
|
+
"@cocoar/vue-localization": "2.10.0-beta.2",
|
|
53
53
|
"@fontsource/cascadia-code": "^5.2.3",
|
|
54
54
|
"@fontsource/inter": "^5.2.8",
|
|
55
55
|
"@fontsource/poppins": "^5.2.7",
|
package/styles/tokens/all.css
CHANGED
|
@@ -29,7 +29,10 @@
|
|
|
29
29
|
@import './layers.css';
|
|
30
30
|
@import './focus.css';
|
|
31
31
|
|
|
32
|
-
/* 6.
|
|
32
|
+
/* 6. Theme reset class */
|
|
33
|
+
@import './theme-none.css';
|
|
34
|
+
|
|
35
|
+
/* 7. Shared Component Tokens */
|
|
33
36
|
@import './components-shared.css';
|
|
34
37
|
@import './code-block.css';
|
|
35
38
|
@import './menu.css';
|
|
@@ -125,6 +125,39 @@
|
|
|
125
125
|
--coar-popover-max-width: 360px;
|
|
126
126
|
--coar-popover-max-height: 240px;
|
|
127
127
|
|
|
128
|
+
/* ==========================================================================
|
|
129
|
+
COMPONENT SEMANTIC TOKENS — override these to theme individual components
|
|
130
|
+
========================================================================== */
|
|
131
|
+
|
|
132
|
+
/* Component density — scales horizontal padding of interactive components */
|
|
133
|
+
/* 0.75 = compact, 1 = default, 1.33 = comfortable */
|
|
134
|
+
--coar-component-density: 1;
|
|
135
|
+
|
|
136
|
+
/* Danger button — follows the semantic error token layer.
|
|
137
|
+
Override --coar-background-semantic-error-bold (and -hover/-active) in the semantic
|
|
138
|
+
layer to change the danger button appearance. */
|
|
139
|
+
--coar-button-danger-bg: var(--coar-background-semantic-error-bold);
|
|
140
|
+
--coar-button-danger-bg-hover: var(--coar-background-semantic-error-hover);
|
|
141
|
+
--coar-button-danger-bg-active: var(--coar-background-semantic-error-active);
|
|
142
|
+
|
|
143
|
+
/* Radius — per component group */
|
|
144
|
+
--coar-button-radius: var(--coar-radius-xs); /* CoarButton, CoarSegmentedControl, CoarPagination */
|
|
145
|
+
--coar-input-radius: var(--coar-radius-xs); /* all text/number/otp/password/select inputs */
|
|
146
|
+
--coar-tag-radius: var(--coar-radius-xs); /* CoarTag + inline chips inside multi-selects */
|
|
147
|
+
--coar-badge-radius: var(--coar-radius-full); /* CoarBadge */
|
|
148
|
+
--coar-card-radius: var(--coar-radius-s); /* CoarCard */
|
|
149
|
+
--coar-menu-radius: var(--coar-radius-s); /* CoarMenu */
|
|
150
|
+
--coar-popover-radius: var(--coar-radius-s); /* CoarPopover, CoarPopconfirm */
|
|
151
|
+
--coar-dropdown-radius: var(--coar-radius-s); /* select/multi/tag dropdown panels */
|
|
152
|
+
|
|
153
|
+
/* Shadow — per component group */
|
|
154
|
+
--coar-card-shadow: var(--coar-elevation-medium);
|
|
155
|
+
--coar-menu-shadow: var(--coar-shadow-s);
|
|
156
|
+
--coar-popover-shadow: var(--coar-shadow-m);
|
|
157
|
+
--coar-dropdown-shadow: var(--coar-shadow-m);
|
|
158
|
+
--coar-dialog-shadow: var(--coar-shadow-xl);
|
|
159
|
+
--coar-toast-shadow: var(--coar-shadow-l);
|
|
160
|
+
|
|
128
161
|
/* ==========================================================================
|
|
129
162
|
CARD
|
|
130
163
|
========================================================================== */
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cocoar Design System - Theme Reset
|
|
3
|
+
*
|
|
4
|
+
* .coar-theme-none restores all themeable tokens to their light-mode defaults.
|
|
5
|
+
* Apply it to any element to "escape" an ancestor theme class:
|
|
6
|
+
*
|
|
7
|
+
* <html class="coar-theme--myapp">
|
|
8
|
+
* <div class="coar-theme-none"><!-- always looks default here --></div>
|
|
9
|
+
* </html>
|
|
10
|
+
*
|
|
11
|
+
* CSS custom properties inherit through the DOM tree. .coar-theme-none
|
|
12
|
+
* re-declares every token that a theme class can override, so descendants
|
|
13
|
+
* inherit the defaults regardless of what an ancestor theme class sets.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
.coar-theme-none {
|
|
17
|
+
/* ── Base hue vars ──────────────────────────────────── */
|
|
18
|
+
--coar-accent: #1183CD;
|
|
19
|
+
--coar-success: #1e8f48;
|
|
20
|
+
--coar-error: #d63b3b;
|
|
21
|
+
--coar-warning: #cc821f;
|
|
22
|
+
--coar-info: #5e6b84;
|
|
23
|
+
|
|
24
|
+
/* ── Accent palette steps ───────────────────────────── */
|
|
25
|
+
--coar-color-accent-50: oklch(from var(--coar-accent) 0.97 0.012 h);
|
|
26
|
+
--coar-color-accent-100: oklch(from var(--coar-accent) 0.92 0.035 h);
|
|
27
|
+
--coar-color-accent-200: oklch(from var(--coar-accent) 0.84 0.075 h);
|
|
28
|
+
--coar-color-accent-300: oklch(from var(--coar-accent) 0.74 0.115 h);
|
|
29
|
+
--coar-color-accent-400: oklch(from var(--coar-accent) 0.66 0.145 h);
|
|
30
|
+
--coar-color-accent-600: oklch(from var(--coar-accent) 0.53 0.15 h);
|
|
31
|
+
--coar-color-accent-700: oklch(from var(--coar-accent) 0.47 0.14 h);
|
|
32
|
+
--coar-color-accent-800: oklch(from var(--coar-accent) 0.39 0.12 h);
|
|
33
|
+
--coar-color-accent-900: oklch(from var(--coar-accent) 0.31 0.095 h);
|
|
34
|
+
|
|
35
|
+
/* ── Green (success) palette steps ─────────────────── */
|
|
36
|
+
--coar-color-green-50: oklch(from var(--coar-success) 0.97 0.012 h);
|
|
37
|
+
--coar-color-green-100: oklch(from var(--coar-success) 0.92 0.035 h);
|
|
38
|
+
--coar-color-green-200: oklch(from var(--coar-success) 0.84 0.065 h);
|
|
39
|
+
--coar-color-green-300: oklch(from var(--coar-success) 0.74 0.10 h);
|
|
40
|
+
--coar-color-green-400: oklch(from var(--coar-success) 0.66 0.13 h);
|
|
41
|
+
--coar-color-green-600: oklch(from var(--coar-success) 0.47 0.12 h);
|
|
42
|
+
--coar-color-green-700: oklch(from var(--coar-success) 0.40 0.10 h);
|
|
43
|
+
--coar-color-green-800: oklch(from var(--coar-success) 0.33 0.08 h);
|
|
44
|
+
--coar-color-green-900: oklch(from var(--coar-success) 0.26 0.06 h);
|
|
45
|
+
|
|
46
|
+
/* ── Red (error) palette steps ──────────────────────── */
|
|
47
|
+
--coar-color-red-50: oklch(from var(--coar-error) 0.97 0.012 h);
|
|
48
|
+
--coar-color-red-100: oklch(from var(--coar-error) 0.92 0.035 h);
|
|
49
|
+
--coar-color-red-200: oklch(from var(--coar-error) 0.84 0.07 h);
|
|
50
|
+
--coar-color-red-300: oklch(from var(--coar-error) 0.74 0.11 h);
|
|
51
|
+
--coar-color-red-400: oklch(from var(--coar-error) 0.66 0.145 h);
|
|
52
|
+
--coar-color-red-600: oklch(from var(--coar-error) 0.47 0.13 h);
|
|
53
|
+
--coar-color-red-700: oklch(from var(--coar-error) 0.40 0.11 h);
|
|
54
|
+
--coar-color-red-800: oklch(from var(--coar-error) 0.33 0.09 h);
|
|
55
|
+
--coar-color-red-900: oklch(from var(--coar-error) 0.26 0.07 h);
|
|
56
|
+
|
|
57
|
+
/* ── Amber (warning) palette steps ─────────────────── */
|
|
58
|
+
--coar-color-amber-50: oklch(from var(--coar-warning) 0.97 0.015 h);
|
|
59
|
+
--coar-color-amber-100: oklch(from var(--coar-warning) 0.92 0.04 h);
|
|
60
|
+
--coar-color-amber-200: oklch(from var(--coar-warning) 0.86 0.08 h);
|
|
61
|
+
--coar-color-amber-300: oklch(from var(--coar-warning) 0.78 0.12 h);
|
|
62
|
+
--coar-color-amber-400: oklch(from var(--coar-warning) 0.72 0.14 h);
|
|
63
|
+
--coar-color-amber-600: oklch(from var(--coar-warning) 0.50 0.12 h);
|
|
64
|
+
--coar-color-amber-700: oklch(from var(--coar-warning) 0.43 0.10 h);
|
|
65
|
+
--coar-color-amber-800: oklch(from var(--coar-warning) 0.36 0.08 h);
|
|
66
|
+
--coar-color-amber-900: oklch(from var(--coar-warning) 0.29 0.06 h);
|
|
67
|
+
|
|
68
|
+
/* ── Slate (info) palette steps ─────────────────────── */
|
|
69
|
+
--coar-color-slate-50: oklch(from var(--coar-info) 0.97 0.006 h);
|
|
70
|
+
--coar-color-slate-100: oklch(from var(--coar-info) 0.92 0.012 h);
|
|
71
|
+
--coar-color-slate-200: oklch(from var(--coar-info) 0.84 0.02 h);
|
|
72
|
+
--coar-color-slate-300: oklch(from var(--coar-info) 0.74 0.03 h);
|
|
73
|
+
--coar-color-slate-400: oklch(from var(--coar-info) 0.66 0.035 h);
|
|
74
|
+
--coar-color-slate-600: oklch(from var(--coar-info) 0.47 0.03 h);
|
|
75
|
+
--coar-color-slate-700: oklch(from var(--coar-info) 0.40 0.025 h);
|
|
76
|
+
--coar-color-slate-800: oklch(from var(--coar-info) 0.35 0.02 h);
|
|
77
|
+
--coar-color-slate-900: oklch(from var(--coar-info) 0.30 0.02 h);
|
|
78
|
+
|
|
79
|
+
/* ── Accent semantic tokens ─────────────────────────── */
|
|
80
|
+
--coar-background-accent-primary: var(--coar-color-accent-500);
|
|
81
|
+
--coar-background-accent-secondary: var(--coar-color-accent-100);
|
|
82
|
+
--coar-background-accent-tertiary: var(--coar-color-accent-50);
|
|
83
|
+
--coar-background-accent-hover: var(--coar-color-accent-600);
|
|
84
|
+
--coar-background-accent-active: var(--coar-color-accent-700);
|
|
85
|
+
--coar-background-accent-tertiary-active: var(--coar-color-accent-200);
|
|
86
|
+
--coar-text-accent-primary: var(--coar-color-accent-600);
|
|
87
|
+
--coar-text-accent-secondary: var(--coar-color-accent-500);
|
|
88
|
+
--coar-border-accent-primary: var(--coar-color-accent-500);
|
|
89
|
+
--coar-border-accent-secondary: var(--coar-color-accent-300);
|
|
90
|
+
|
|
91
|
+
/* ── Success semantic tokens ────────────────────────── */
|
|
92
|
+
--coar-background-semantic-success-bold: var(--coar-color-green-600);
|
|
93
|
+
--coar-background-semantic-success-subtle: var(--coar-color-green-100);
|
|
94
|
+
--coar-text-semantic-success-bold: var(--coar-color-green-800);
|
|
95
|
+
--coar-text-semantic-success-subtle: var(--coar-color-green-700);
|
|
96
|
+
--coar-border-semantic-success-bold: var(--coar-color-green-800);
|
|
97
|
+
--coar-border-semantic-success-subtle: var(--coar-color-green-200);
|
|
98
|
+
|
|
99
|
+
/* ── Error semantic tokens ──────────────────────────── */
|
|
100
|
+
--coar-background-semantic-error-bold: var(--coar-color-red-600);
|
|
101
|
+
--coar-background-semantic-error-hover: var(--coar-color-red-700);
|
|
102
|
+
--coar-background-semantic-error-active: var(--coar-color-red-800);
|
|
103
|
+
--coar-background-semantic-error-subtle: var(--coar-color-red-100);
|
|
104
|
+
--coar-text-semantic-error-bold: var(--coar-color-red-800);
|
|
105
|
+
--coar-text-semantic-error-subtle: var(--coar-color-red-700);
|
|
106
|
+
--coar-border-semantic-error: var(--coar-color-red-600);
|
|
107
|
+
--coar-border-semantic-error-bold: var(--coar-color-red-800);
|
|
108
|
+
--coar-border-semantic-error-subtle: var(--coar-color-red-200);
|
|
109
|
+
|
|
110
|
+
/* ── Warning semantic tokens ────────────────────────── */
|
|
111
|
+
--coar-background-semantic-warning-bold: var(--coar-color-amber-600);
|
|
112
|
+
--coar-background-semantic-warning-subtle: var(--coar-color-amber-100);
|
|
113
|
+
--coar-text-semantic-warning-bold: var(--coar-color-amber-900);
|
|
114
|
+
--coar-text-semantic-warning-subtle: var(--coar-color-amber-800);
|
|
115
|
+
--coar-border-semantic-warning-bold: var(--coar-color-amber-900);
|
|
116
|
+
--coar-border-semantic-warning-subtle: var(--coar-color-amber-200);
|
|
117
|
+
|
|
118
|
+
/* ── Info semantic tokens ───────────────────────────── */
|
|
119
|
+
--coar-background-semantic-info-bold: var(--coar-color-slate-700);
|
|
120
|
+
--coar-background-semantic-info-subtle: var(--coar-color-slate-100);
|
|
121
|
+
--coar-text-semantic-info-bold: var(--coar-color-white);
|
|
122
|
+
--coar-text-semantic-info-subtle: var(--coar-color-slate-700);
|
|
123
|
+
--coar-border-semantic-info-bold: var(--coar-color-slate-900);
|
|
124
|
+
--coar-border-semantic-info-subtle: var(--coar-color-slate-200);
|
|
125
|
+
|
|
126
|
+
/* ── Radius scale ───────────────────────────────────── */
|
|
127
|
+
--coar-radius-xxs: 1px;
|
|
128
|
+
--coar-radius-xs: 2px;
|
|
129
|
+
--coar-radius-s: 3px;
|
|
130
|
+
--coar-radius-m: 4px;
|
|
131
|
+
--coar-radius-l: 5px;
|
|
132
|
+
--coar-radius-xl: 6px;
|
|
133
|
+
|
|
134
|
+
/* ── Component tokens ───────────────────────────────── */
|
|
135
|
+
--coar-component-density: 1;
|
|
136
|
+
--coar-button-radius: var(--coar-radius-xs);
|
|
137
|
+
--coar-input-radius: var(--coar-radius-xs);
|
|
138
|
+
--coar-tag-radius: var(--coar-radius-xs);
|
|
139
|
+
--coar-badge-radius: var(--coar-radius-full);
|
|
140
|
+
--coar-card-radius: var(--coar-radius-s);
|
|
141
|
+
--coar-menu-radius: var(--coar-radius-s);
|
|
142
|
+
--coar-popover-radius: var(--coar-radius-s);
|
|
143
|
+
--coar-dropdown-radius: var(--coar-radius-s);
|
|
144
|
+
--coar-dialog-border-radius: var(--coar-radius-l);
|
|
145
|
+
--coar-toast-border-radius: var(--coar-radius-m);
|
|
146
|
+
--coar-card-shadow: var(--coar-elevation-medium);
|
|
147
|
+
--coar-menu-shadow: var(--coar-shadow-s);
|
|
148
|
+
--coar-popover-shadow: var(--coar-shadow-m);
|
|
149
|
+
--coar-dropdown-shadow: var(--coar-shadow-m);
|
|
150
|
+
--coar-dialog-shadow: var(--coar-shadow-xl);
|
|
151
|
+
--coar-toast-shadow: var(--coar-shadow-l);
|
|
152
|
+
--coar-font-family-body: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
153
|
+
--coar-font-family-title: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
154
|
+
|
|
155
|
+
/* ── Motion ─────────────────────────────────────────── */
|
|
156
|
+
--coar-duration-instant: 0ms;
|
|
157
|
+
--coar-duration-fast: 100ms;
|
|
158
|
+
--coar-duration-normal: 200ms;
|
|
159
|
+
--coar-duration-slow: 300ms;
|
|
160
|
+
--coar-duration-slower: 400ms;
|
|
161
|
+
--coar-duration-slowest: 500ms;
|
|
162
|
+
}
|