@cocoar/vue-ui 1.0.1 → 1.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 (11) hide show
  1. package/dist/components/scrollbar/vScrollbar.d.ts.map +1 -1
  2. package/dist/components/sidebar/CoarSidebar.vue.d.ts +10 -0
  3. package/dist/components/sidebar/CoarSidebar.vue.d.ts.map +1 -1
  4. package/dist/fonts.js +6 -0
  5. package/dist/index.css +1 -1
  6. package/dist/index.js +20 -12
  7. package/package.json +8 -5
  8. package/styles/all.css +0 -1
  9. package/styles/tokens/colors-primitives-dark.css +57 -56
  10. package/styles/tokens/colors-primitives-light.css +68 -52
  11. package/styles/tokens/colors-usage.css +14 -14
package/dist/index.js CHANGED
@@ -7420,31 +7420,39 @@ const Nh = /* @__PURE__ */ ve(Sd, [["render", Dd], ["__scopeId", "data-v-a0d5d1e
7420
7420
  props: {
7421
7421
  position: { default: "left" },
7422
7422
  collapsed: { type: Boolean, default: !1 },
7423
+ variant: { default: "primary" },
7424
+ elevated: { type: Boolean, default: !1 },
7425
+ borderless: { type: Boolean, default: !1 },
7423
7426
  ariaLabel: { default: void 0 }
7424
7427
  },
7425
7428
  setup(e) {
7426
- return (t, o) => (h(), b("aside", {
7427
- class: q(["coar-sidebar", {
7428
- "coar-sidebar--collapsed": e.collapsed,
7429
- "coar-sidebar--position-right": e.position === "right"
7430
- }]),
7429
+ const t = e, o = v(() => ({
7430
+ "coar-sidebar": !0,
7431
+ [`coar-sidebar--${t.variant}`]: !0,
7432
+ "coar-sidebar--collapsed": t.collapsed,
7433
+ "coar-sidebar--position-right": t.position === "right",
7434
+ "coar-sidebar--elevated": t.elevated,
7435
+ "coar-sidebar--borderless": t.borderless
7436
+ }));
7437
+ return (n, a) => (h(), b("aside", {
7431
7438
  role: "navigation",
7432
- "aria-label": e.ariaLabel || "Sidebar"
7439
+ "aria-label": e.ariaLabel || "Sidebar",
7440
+ class: q(o.value)
7433
7441
  }, [
7434
- t.$slots.header ? (h(), b("div", vf, [
7435
- me(t.$slots, "header", {}, void 0, !0)
7442
+ n.$slots.header ? (h(), b("div", vf, [
7443
+ me(n.$slots, "header", {}, void 0, !0)
7436
7444
  ])) : Z("", !0),
7437
7445
  lt((h(), b("div", hf, [
7438
- me(t.$slots, "default", {}, void 0, !0)
7446
+ me(n.$slots, "default", {}, void 0, !0)
7439
7447
  ])), [
7440
7448
  [$(dt), { overflowX: "hidden", autoHide: "leave", defer: !1 }]
7441
7449
  ]),
7442
- t.$slots.footer ? (h(), b("div", mf, [
7443
- me(t.$slots, "footer", {}, void 0, !0)
7450
+ n.$slots.footer ? (h(), b("div", mf, [
7451
+ me(n.$slots, "footer", {}, void 0, !0)
7444
7452
  ])) : Z("", !0)
7445
7453
  ], 10, pf));
7446
7454
  }
7447
- }), Zh = /* @__PURE__ */ ve(gf, [["__scopeId", "data-v-4da00afa"]]), bf = {
7455
+ }), Zh = /* @__PURE__ */ ve(gf, [["__scopeId", "data-v-5e9731f1"]]), bf = {
7448
7456
  key: 0,
7449
7457
  class: "coar-navbar__start"
7450
7458
  }, yf = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocoar/vue-ui",
3
- "version": "1.0.1",
3
+ "version": "1.1.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.1.0",
52
+ "@cocoar/vue-localization": "1.1.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);