@cocoar/vue-ui 2.17.1 → 2.18.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 (37) hide show
  1. package/dist/components/breadcrumb/CoarBreadcrumbItem.vue.d.ts +1 -1
  2. package/dist/components/breadcrumb/CoarBreadcrumbItem.vue.d.ts.map +1 -1
  3. package/dist/components/checkbox/CoarCheckbox.vue.d.ts +1 -1
  4. package/dist/components/checkbox/CoarCheckbox.vue.d.ts.map +1 -1
  5. package/dist/components/checkbox-group/CoarCheckboxGroup.vue.d.ts +51 -0
  6. package/dist/components/checkbox-group/CoarCheckboxGroup.vue.d.ts.map +1 -0
  7. package/dist/components/checkbox-group/constants.d.ts +14 -0
  8. package/dist/components/checkbox-group/constants.d.ts.map +1 -0
  9. package/dist/components/checkbox-group/index.d.ts +5 -0
  10. package/dist/components/checkbox-group/index.d.ts.map +1 -0
  11. package/dist/components/form-field/CoarFormField.vue.d.ts +8 -0
  12. package/dist/components/form-field/CoarFormField.vue.d.ts.map +1 -1
  13. package/dist/components/form-field/constants.d.ts +1 -0
  14. package/dist/components/form-field/constants.d.ts.map +1 -1
  15. package/dist/components/form-field/index.d.ts +1 -1
  16. package/dist/components/form-field/index.d.ts.map +1 -1
  17. package/dist/components/menu/CoarMenuItem.vue.d.ts +1 -1
  18. package/dist/components/menu/CoarMenuItem.vue.d.ts.map +1 -1
  19. package/dist/components/notice/CoarNotice.vue.d.ts +40 -0
  20. package/dist/components/notice/CoarNotice.vue.d.ts.map +1 -0
  21. package/dist/components/notice/index.d.ts +3 -0
  22. package/dist/components/notice/index.d.ts.map +1 -0
  23. package/dist/components/sidebar/CoarSidebarGroup.vue.d.ts +1 -1
  24. package/dist/components/sidebar/CoarSidebarGroup.vue.d.ts.map +1 -1
  25. package/dist/components/sidebar/CoarSidebarItem.vue.d.ts +1 -1
  26. package/dist/components/sidebar/CoarSidebarItem.vue.d.ts.map +1 -1
  27. package/dist/components/switch/CoarSwitch.vue.d.ts +1 -1
  28. package/dist/components/switch/CoarSwitch.vue.d.ts.map +1 -1
  29. package/dist/components/theme-editor/theme-editor-state.d.ts +1 -1
  30. package/dist/components/theme-editor/theme-editor-state.d.ts.map +1 -1
  31. package/dist/index.css +1 -1
  32. package/dist/index.d.ts +23 -19
  33. package/dist/index.d.ts.map +1 -1
  34. package/dist/index.js +1049 -861
  35. package/package.json +2 -2
  36. package/styles/tokens/colors-usage.css +10 -2
  37. package/styles/tokens/theme-none.css +110 -102
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocoar/vue-ui",
3
- "version": "2.17.1",
3
+ "version": "2.18.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": {
@@ -49,7 +49,7 @@
49
49
  "typecheck": "vue-tsc --noEmit"
50
50
  },
51
51
  "dependencies": {
52
- "@cocoar/vue-localization": "2.17.1",
52
+ "@cocoar/vue-localization": "2.18.0",
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/colors-usage.css CHANGED
@@ -104,6 +104,7 @@
104
104
 
105
105
  /* Success (green) */
106
106
  --coar-background-semantic-success-bold: var(--coar-color-green-600);
107
+ --coar-background-semantic-success-subtlest: var(--coar-color-green-50);
107
108
  --coar-background-semantic-success-subtle: var(--coar-color-green-100);
108
109
  --coar-text-semantic-success-bold: var(--coar-color-green-800);
109
110
  --coar-text-semantic-success-subtle: var(--coar-color-green-700);
@@ -116,6 +117,7 @@
116
117
  --coar-background-semantic-error-bold: var(--coar-color-red-600);
117
118
  --coar-background-semantic-error-hover: var(--coar-color-red-700);
118
119
  --coar-background-semantic-error-active: var(--coar-color-red-800);
120
+ --coar-background-semantic-error-subtlest: var(--coar-color-red-50);
119
121
  --coar-background-semantic-error-subtle: var(--coar-color-red-100);
120
122
  --coar-text-semantic-error-bold: var(--coar-color-red-800);
121
123
  --coar-text-semantic-error-subtle: var(--coar-color-red-700);
@@ -127,6 +129,7 @@
127
129
 
128
130
  /* Warning (amber) */
129
131
  --coar-background-semantic-warning-bold: var(--coar-color-amber-600);
132
+ --coar-background-semantic-warning-subtlest: var(--coar-color-amber-50);
130
133
  --coar-background-semantic-warning-subtle: var(--coar-color-amber-100);
131
134
  --coar-text-semantic-warning-bold: var(--coar-color-amber-900);
132
135
  --coar-text-semantic-warning-subtle: var(--coar-color-amber-800);
@@ -137,8 +140,9 @@
137
140
 
138
141
  /* Info (slate blue) */
139
142
  --coar-background-semantic-info-bold: var(--coar-color-slate-700);
143
+ --coar-background-semantic-info-subtlest: var(--coar-color-slate-50);
140
144
  --coar-background-semantic-info-subtle: var(--coar-color-slate-100);
141
- --coar-text-semantic-info-bold: var(--coar-color-white);
145
+ --coar-text-semantic-info-bold: var(--coar-color-slate-800);
142
146
  --coar-text-semantic-info-subtle: var(--coar-color-slate-700);
143
147
  --coar-border-semantic-info-bold: var(--coar-color-slate-900);
144
148
  --coar-border-semantic-info-subtle: var(--coar-color-slate-200);
@@ -232,6 +236,7 @@
232
236
 
233
237
  /* Success */
234
238
  --coar-background-semantic-success-bold: var(--coar-color-green-500);
239
+ --coar-background-semantic-success-subtlest: var(--coar-color-green-100);
235
240
  --coar-background-semantic-success-subtle: var(--coar-color-green-200);
236
241
  --coar-text-semantic-success-bold: var(--coar-color-green-900);
237
242
  --coar-text-semantic-success-subtle: var(--coar-color-green-700);
@@ -244,6 +249,7 @@
244
249
  --coar-background-semantic-error-bold: var(--coar-color-red-500);
245
250
  --coar-background-semantic-error-hover: var(--coar-color-red-400);
246
251
  --coar-background-semantic-error-active: var(--coar-color-red-300);
252
+ --coar-background-semantic-error-subtlest: var(--coar-color-red-100);
247
253
  --coar-background-semantic-error-subtle: var(--coar-color-red-200);
248
254
  --coar-text-semantic-error-bold: var(--coar-color-red-900);
249
255
  --coar-text-semantic-error-subtle: var(--coar-color-red-700);
@@ -255,6 +261,7 @@
255
261
 
256
262
  /* Warning */
257
263
  --coar-background-semantic-warning-bold: var(--coar-color-amber-400);
264
+ --coar-background-semantic-warning-subtlest: var(--coar-color-amber-100);
258
265
  --coar-background-semantic-warning-subtle: var(--coar-color-amber-200);
259
266
  --coar-text-semantic-warning-bold: var(--coar-color-amber-900);
260
267
  --coar-text-semantic-warning-subtle: var(--coar-color-amber-800);
@@ -265,8 +272,9 @@
265
272
 
266
273
  /* Info */
267
274
  --coar-background-semantic-info-bold: var(--coar-color-slate-400);
275
+ --coar-background-semantic-info-subtlest: var(--coar-color-slate-200);
268
276
  --coar-background-semantic-info-subtle: var(--coar-color-slate-300);
269
- --coar-text-semantic-info-bold: var(--coar-color-slate-50);
277
+ --coar-text-semantic-info-bold: var(--coar-color-slate-900);
270
278
  --coar-text-semantic-info-subtle: var(--coar-color-slate-700);
271
279
  --coar-border-semantic-info-bold: var(--coar-color-slate-600);
272
280
  --coar-border-semantic-info-subtle: var(--coar-color-slate-400);
package/styles/tokens/theme-none.css CHANGED
@@ -15,148 +15,156 @@
15
15
 
16
16
  .coar-theme-none {
17
17
  /* ── Base hue vars ──────────────────────────────────── */
18
- --coar-accent: #1183CD;
18
+ --coar-accent: #1183cd;
19
19
  --coar-success: #1e8f48;
20
- --coar-error: #d63b3b;
20
+ --coar-error: #d63b3b;
21
21
  --coar-warning: #cc821f;
22
- --coar-info: #5e6b84;
22
+ --coar-info: #5e6b84;
23
23
 
24
24
  /* ── Accent palette steps ───────────────────────────── */
25
- --coar-color-accent-50: oklch(from var(--coar-accent) 0.97 0.012 h);
25
+ --coar-color-accent-50: oklch(from var(--coar-accent) 0.97 0.012 h);
26
26
  --coar-color-accent-100: oklch(from var(--coar-accent) 0.92 0.035 h);
27
27
  --coar-color-accent-200: oklch(from var(--coar-accent) 0.84 0.075 h);
28
28
  --coar-color-accent-300: oklch(from var(--coar-accent) 0.74 0.115 h);
29
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);
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
33
  --coar-color-accent-900: oklch(from var(--coar-accent) 0.31 0.095 h);
34
34
 
35
35
  /* ── Green (success) palette steps ─────────────────── */
36
- --coar-color-green-50: oklch(from var(--coar-success) 0.97 0.012 h);
36
+ --coar-color-green-50: oklch(from var(--coar-success) 0.97 0.012 h);
37
37
  --coar-color-green-100: oklch(from var(--coar-success) 0.92 0.035 h);
38
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);
39
+ --coar-color-green-300: oklch(from var(--coar-success) 0.74 0.1 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.4 0.1 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
45
 
46
46
  /* ── Red (error) palette steps ──────────────────────── */
47
- --coar-color-red-50: oklch(from var(--coar-error) 0.97 0.012 h);
47
+ --coar-color-red-50: oklch(from var(--coar-error) 0.97 0.012 h);
48
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);
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
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);
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.4 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
56
 
57
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);
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.5 0.12 h);
64
+ --coar-color-amber-700: oklch(from var(--coar-warning) 0.43 0.1 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
67
 
68
68
  /* ── Slate (info) palette steps ─────────────────────── */
69
- --coar-color-slate-50: oklch(from var(--coar-info) 0.97 0.006 h);
69
+ --coar-color-slate-50: oklch(from var(--coar-info) 0.97 0.006 h);
70
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);
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
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);
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.4 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.3 0.02 h);
78
78
 
79
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);
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
90
 
91
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);
92
+ --coar-background-semantic-success-bold: var(--coar-color-green-600);
93
+ --coar-background-semantic-success-subtlest: var(--coar-color-green-50);
94
+ --coar-background-semantic-success-subtle: var(--coar-color-green-100);
95
+ --coar-text-semantic-success-bold: var(--coar-color-green-800);
96
+ --coar-text-semantic-success-subtle: var(--coar-color-green-700);
97
+ --coar-border-semantic-success-bold: var(--coar-color-green-800);
98
+ --coar-border-semantic-success-subtle: var(--coar-color-green-200);
98
99
 
99
100
  /* ── 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);
101
+ --coar-background-semantic-error-bold: var(--coar-color-red-600);
102
+ --coar-background-semantic-error-hover: var(--coar-color-red-700);
103
+ --coar-background-semantic-error-active: var(--coar-color-red-800);
104
+ --coar-background-semantic-error-subtlest: var(--coar-color-red-50);
105
+ --coar-background-semantic-error-subtle: var(--coar-color-red-100);
106
+ --coar-text-semantic-error-bold: var(--coar-color-red-800);
107
+ --coar-text-semantic-error-subtle: var(--coar-color-red-700);
108
+ --coar-border-semantic-error: var(--coar-color-red-600);
109
+ --coar-border-semantic-error-bold: var(--coar-color-red-800);
110
+ --coar-border-semantic-error-subtle: var(--coar-color-red-200);
109
111
 
110
112
  /* ── 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);
113
+ --coar-background-semantic-warning-bold: var(--coar-color-amber-600);
114
+ --coar-background-semantic-warning-subtlest: var(--coar-color-amber-50);
115
+ --coar-background-semantic-warning-subtle: var(--coar-color-amber-100);
116
+ --coar-text-semantic-warning-bold: var(--coar-color-amber-900);
117
+ --coar-text-semantic-warning-subtle: var(--coar-color-amber-800);
118
+ --coar-border-semantic-warning-bold: var(--coar-color-amber-900);
119
+ --coar-border-semantic-warning-subtle: var(--coar-color-amber-200);
117
120
 
118
121
  /* ── 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);
122
+ --coar-background-semantic-info-bold: var(--coar-color-slate-700);
123
+ --coar-background-semantic-info-subtlest: var(--coar-color-slate-50);
124
+ --coar-background-semantic-info-subtle: var(--coar-color-slate-100);
125
+ --coar-text-semantic-info-bold: var(--coar-color-slate-800);
126
+ --coar-text-semantic-info-subtle: var(--coar-color-slate-700);
127
+ --coar-border-semantic-info-bold: var(--coar-color-slate-900);
128
+ --coar-border-semantic-info-subtle: var(--coar-color-slate-200);
125
129
 
126
130
  /* ── Radius scale ───────────────────────────────────── */
127
131
  --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;
132
+ --coar-radius-xs: 2px;
133
+ --coar-radius-s: 3px;
134
+ --coar-radius-m: 4px;
135
+ --coar-radius-l: 5px;
136
+ --coar-radius-xl: 6px;
133
137
 
134
138
  /* ── 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-input-radius);
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;
139
+ --coar-component-density: 1;
140
+ --coar-button-radius: var(--coar-radius-xs);
141
+ --coar-input-radius: var(--coar-radius-xs);
142
+ --coar-tag-radius: var(--coar-radius-xs);
143
+ --coar-badge-radius: var(--coar-radius-full);
144
+ --coar-card-radius: var(--coar-radius-s);
145
+ --coar-menu-radius: var(--coar-radius-s);
146
+ --coar-popover-radius: var(--coar-radius-s);
147
+ --coar-dropdown-radius: var(--coar-input-radius);
148
+ --coar-dialog-border-radius: var(--coar-radius-l);
149
+ --coar-toast-border-radius: var(--coar-radius-m);
150
+ --coar-card-shadow: var(--coar-elevation-medium);
151
+ --coar-menu-shadow: var(--coar-shadow-s);
152
+ --coar-popover-shadow: var(--coar-shadow-m);
153
+ --coar-dropdown-shadow: var(--coar-shadow-m);
154
+ --coar-dialog-shadow: var(--coar-shadow-xl);
155
+ --coar-toast-shadow: var(--coar-shadow-l);
156
+ --coar-font-family-body:
157
+ Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
158
+ 'Helvetica Neue', Arial, sans-serif;
159
+ --coar-font-family-title:
160
+ Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
161
+ 'Helvetica Neue', Arial, sans-serif;
154
162
 
155
163
  /* ── Motion ─────────────────────────────────────────── */
156
164
  --coar-duration-instant: 0ms;
157
- --coar-duration-fast: 100ms;
158
- --coar-duration-normal: 200ms;
159
- --coar-duration-slow: 300ms;
160
- --coar-duration-slower: 400ms;
165
+ --coar-duration-fast: 100ms;
166
+ --coar-duration-normal: 200ms;
167
+ --coar-duration-slow: 300ms;
168
+ --coar-duration-slower: 400ms;
161
169
  --coar-duration-slowest: 500ms;
162
170
  }