@cnamts/synapse 1.0.24 → 1.0.26

package/dist/utils/functions/classToHex.d.ts

@@ -1 +1 @@
-export declare function classToHex(color: string): string | undefined;
+export declare const classToHex: (color: string) => string | undefined;

package/dist/utils/functions/createHexResolver.d.ts

@@ -0,0 +1,16 @@
+type Theme = Record<string, string>;
+type ColorsMap = Record<string, Record<string, string>>;
+type LegacyColors = Record<string, {
+    hexColor: string;
+}>;
+/**
+ * Creates a resolver that converts a color class name (e.g. "ap-blue-lighten-1")
+ * into a hex value for the given theme and color palette.
+ *
+ * Lookup order:
+ *   1. colors map: colorName + optional modifier (e.g. apBlue.lighten1)
+ *   2. theme map: direct key lookup (e.g. primary, secondary)
+ *   3. legacyColors map: flat key lookup (e.g. apBluelighten1.hexColor)
+ */
+export declare function createHexResolver(theme: Theme, colors: ColorsMap, legacyColors?: LegacyColors): (color: string) => string | undefined;
+export {};

package/dist/vuetifyConfig.js

@@ -1,10 +1,10 @@
-import { g as S, f as d, p, h as z, i as b, a as g, j as A, c as H, k as u, e as W, d as F } from "./apLightTheme-D1P4jcD0.js";
-import * as $ from "vuetify/components";
+import { g as d, h as S, f as b, a as m, p as z, i as W, j as u, c as F, k as H, e as A, d as $ } from "./apLightTheme-DS0Uy44H.js";
+import * as x from "vuetify/components";
 import * as T from "vuetify/directives";
-import { mdi as w, aliases as L } from "vuetify/iconsets/mdi-svg";
+import { mdi as w, aliases as P } from "vuetify/iconsets/mdi-svg";
 import { fr as v } from "vuetify/locale";
-import { createVuetify as C } from "vuetify";
-const m = {
+import { createVuetify as X } from "vuetify";
+const g = {
   family: {
     primary: '"Arial", sans-serif',
     secondary: '"Arial", sans-serif'
@@ -326,7 +326,8 @@ const m = {
       letterSpacing: "-0.003em"
     }
   }
-}, E = {
+}, j = {
+  ...d,
   colors: {
     background: "#ffffff",
     border: "#dddddd",
@@ -334,56 +335,9 @@ const m = {
     icon: "#666666",
     overlay: "rgba(0, 0, 0, 0.5)",
     interactive: "#007bff"
-  },
-  gap: {
-    0: "0",
-    1: "4px",
-    2: "8px",
-    3: "122px",
-    4: "16px",
-    5: "20px",
-    6: "24px",
-    7: "28px",
-    8: "32px",
-    9: "36px",
-    10: "40px",
-    11: "44px",
-    12: "48px",
-    13: "52px",
-    14: "56px",
-    15: "60px",
-    16: "64px"
-  },
-  iconSize: {
-    xsmall: "8px",
-    small: "16px",
-    default: "24px",
-    large: "32px"
-  },
-  radius: {
-    rounded0: "0",
-    rounded: "4px",
-    roundedLg: "8px",
-    roundedPill: "64px"
-  },
-  padding: {
-    0: "0",
-    2: "8px",
-    3: "12px",
-    4: "16px",
-    6: "24px",
-    8: "32px",
-    10: "40px",
-    14: "56px",
-    16: "64px"
-  },
-  fontSize: {
-    titres: "24px",
-    titresAlternatifs: "20px",
-    corpsDeTexte: "16px",
-    liensEtLibelles: "14px"
   }
-}, y = {
+}, p = {
+  ...d,
   colors: {
     background: "#ffffff",
     border: "#dddddd",
@@ -392,100 +346,107 @@ const m = {
     overlay: "rgba(0, 0, 0, 0.5)",
     interactive: "#007bff"
   },
-  gap: {
-    0: "0",
-    1: "4px",
-    2: "8px",
-    3: "122px",
-    4: "16px",
-    5: "20px",
-    6: "24px",
-    7: "28px",
-    8: "32px",
-    9: "36px",
-    10: "40px",
-    11: "44px",
-    12: "48px",
-    13: "52px",
-    14: "56px",
-    15: "60px",
-    16: "64px"
-  },
-  iconSize: {
-    xsmall: "8px",
-    small: "16px",
-    default: "24px",
-    large: "32px"
-  },
-  radius: {
-    rounded0: "0",
-    rounded: "4px",
-    roundedLg: "8px",
-    roundedPill: "64px"
-  },
-  padding: {
-    0: "0",
-    2: "8px",
-    3: "12px",
-    4: "16px",
-    6: "24px",
-    8: "32px",
-    10: "40px",
-    14: "56px",
-    16: "64px"
-  },
-  fontSize: {
-    titres: "24px",
-    titresAlternatifs: "20px",
-    corpsDeTexte: "16px",
-    liensEtLibelles: "14px"
+  ap: {
+    // Typography
+    fontWeightRegular: "400",
+    fontWeightBold: "700",
+    fontSizeXxs: "0.75rem",
+    fontSizeXs: "0.875rem",
+    fontSizeSm: "1rem",
+    fontSizeMd: "1.125rem",
+    fontSizeLg: "1.25rem",
+    fontSizeXl: "1.375rem",
+    fontSizeXxl: "1.5rem",
+    // Button
+    btnRadius: "0.75rem",
+    btnPaddingX: "1rem",
+    btnPaddingY: "0.5rem",
+    btnMinHeight: "2.5rem",
+    // Card
+    cardRadius: "0.75rem",
+    cardPaddingDesktop: "1rem",
+    cardPaddingTablet: "1rem",
+    cardPaddingMobile: "0.75rem",
+    // Dialog
+    dialogPadding: "1.5rem",
+    // Input / Form
+    inputRadius: "0.5rem",
+    inputMinHeight: "2.625rem",
+    labelFontWeight: "700",
+    // Filter pills
+    filterRadius: "0.75rem",
+    filterPaddingX: "2rem",
+    filterPaddingY: "0.75rem",
+    filterFontWeight: "700",
+    // Tabs pills
+    tabsPillRadius: "0.75rem",
+    tabsPillPaddingX: "2rem",
+    tabsPillPaddingY: "0.5rem",
+    tabsPillFontWeight: "700",
+    // Multiple folding card button
+    multiFoldingBtnRadius: "0.75rem",
+    multiFoldingBtnPaddingX: "2rem",
+    multiFoldingBtnPaddingY: "0.5rem",
+    multiFoldingBtnFontWeight: "700",
+    // Switch
+    switchTrackHeight: "2rem",
+    switchTrackWidth: "3.5rem",
+    switchTrackTop: "0",
+    switchThumbHeight: "1.5rem",
+    switchThumbWidth: "1.5rem",
+    switchThumbTop: "0.25rem",
+    switchThumbElevation: "0",
+    switchWidth: "3.5rem",
+    switchTrackOpacity: "1"
   }
 }, c = {
   // backgroundSurface: apColorsTokens.parma.darken60,
-}, s = (a) => {
-  const t = {}, e = (i, n = "") => {
-    for (const r in i) {
-      const o = i[r], l = n ? `${n}-${r}` : r;
-      typeof o == "object" && o !== null ? e(o, l) : t[l] = o;
+}, C = (n) => typeof n == "object" && n !== null, s = (n) => {
+  const t = {}, e = (i, r = "") => {
+    for (const [a, l] of Object.entries(i)) {
+      const o = r ? `${r}-${a}` : a;
+      if (l === void 0)
+        throw new Error(`Missing theme value for key "${o}"`);
+      C(l) ? e(l, o) : t[o] = l;
     }
   };
-  return e(a), t;
+  return e(n), t;
 };
-function x(a) {
+function y(n) {
   const t = {};
-  if (a.family && a.family.primary && (t["font-family"] = a.family.primary), a.heading && Object.entries(a.heading).forEach(([e, i]) => {
-    var n, r;
-    t[`typography-${e}-font-size`] = i.fontSize || "", t[`typography-${e}-font-weight`] = ((n = i.fontWeight) == null ? void 0 : n.toString()) || "", t[`typography-${e}-line-height`] = ((r = i.lineHeight) == null ? void 0 : r.toString()) || "", t[`typography-${e}-letter-spacing`] = i.letterSpacing || "normal";
-  }), a.body && Object.entries(a.body).forEach(([e, i]) => {
-    var n, r;
-    t[`typography-${e}-font-size`] = i.fontSize || "", t[`typography-${e}-font-weight`] = ((n = i.fontWeight) == null ? void 0 : n.toString()) || "", t[`typography-${e}-line-height`] = ((r = i.lineHeight) == null ? void 0 : r.toString()) || "", t[`typography-${e}-letter-spacing`] = i.letterSpacing || "normal";
-  }), a.subtitle && Object.entries(a.subtitle).forEach(([e, i]) => {
-    var n, r;
-    t[`typography-${e}-font-size`] = i.fontSize || "", t[`typography-${e}-font-weight`] = ((n = i.fontWeight) == null ? void 0 : n.toString()) || "", t[`typography-${e}-line-height`] = ((r = i.lineHeight) == null ? void 0 : r.toString()) || "", t[`typography-${e}-letter-spacing`] = i.letterSpacing || "normal";
+  if (n.family && n.family.primary && (t["font-family"] = n.family.primary), n.heading && Object.entries(n.heading).forEach(([e, i]) => {
+    var r, a;
+    t[`typography-${e}-font-size`] = i.fontSize || "", t[`typography-${e}-font-weight`] = ((r = i.fontWeight) == null ? void 0 : r.toString()) || "", t[`typography-${e}-line-height`] = ((a = i.lineHeight) == null ? void 0 : a.toString()) || "", t[`typography-${e}-letter-spacing`] = i.letterSpacing || "normal";
+  }), n.body && Object.entries(n.body).forEach(([e, i]) => {
+    var r, a;
+    t[`typography-${e}-font-size`] = i.fontSize || "", t[`typography-${e}-font-weight`] = ((r = i.fontWeight) == null ? void 0 : r.toString()) || "", t[`typography-${e}-line-height`] = ((a = i.lineHeight) == null ? void 0 : a.toString()) || "", t[`typography-${e}-letter-spacing`] = i.letterSpacing || "normal";
+  }), n.subtitle && Object.entries(n.subtitle).forEach(([e, i]) => {
+    var r, a;
+    t[`typography-${e}-font-size`] = i.fontSize || "", t[`typography-${e}-font-weight`] = ((r = i.fontWeight) == null ? void 0 : r.toString()) || "", t[`typography-${e}-line-height`] = ((a = i.lineHeight) == null ? void 0 : a.toString()) || "", t[`typography-${e}-letter-spacing`] = i.letterSpacing || "normal";
   }), ["caption", "overline"].forEach((e) => {
-    var i, n, r, o;
-    if (a[e]) {
-      const l = a[e];
-      if (l && typeof l == "object" && !Array.isArray(l))
-        if ("fontSize" in l)
-          t[`typography-${e}-font-size`] = l.fontSize || "", t[`typography-${e}-font-weight`] = ((i = l.fontWeight) == null ? void 0 : i.toString()) || "", t[`typography-${e}-line-height`] = ((n = l.lineHeight) == null ? void 0 : n.toString()) || "", t[`typography-${e}-letter-spacing`] = l.letterSpacing || "normal", l.textTransform && (t[`typography-${e}-text-transform`] = l.textTransform || "");
+    var i, r, a, l;
+    if (n[e]) {
+      const o = n[e];
+      if (o && typeof o == "object" && !Array.isArray(o))
+        if ("fontSize" in o)
+          t[`typography-${e}-font-size`] = o.fontSize || "", t[`typography-${e}-font-weight`] = ((i = o.fontWeight) == null ? void 0 : i.toString()) || "", t[`typography-${e}-line-height`] = ((r = o.lineHeight) == null ? void 0 : r.toString()) || "", t[`typography-${e}-letter-spacing`] = o.letterSpacing || "normal", o.textTransform && (t[`typography-${e}-text-transform`] = o.textTransform || "");
         else {
-          const f = l[e];
-          f && (t[`typography-${e}-font-size`] = f.fontSize || "", t[`typography-${e}-font-weight`] = ((r = f.fontWeight) == null ? void 0 : r.toString()) || "", t[`typography-${e}-line-height`] = ((o = f.lineHeight) == null ? void 0 : o.toString()) || "", t[`typography-${e}-letter-spacing`] = f.letterSpacing || "normal", f.textTransform && (t[`typography-${e}-text-transform`] = f.textTransform || ""));
+          const f = o[e];
+          f && (t[`typography-${e}-font-size`] = f.fontSize || "", t[`typography-${e}-font-weight`] = ((a = f.fontWeight) == null ? void 0 : a.toString()) || "", t[`typography-${e}-line-height`] = ((l = f.lineHeight) == null ? void 0 : l.toString()) || "", t[`typography-${e}-letter-spacing`] = f.letterSpacing || "normal", f.textTransform && (t[`typography-${e}-text-transform`] = f.textTransform || ""));
         }
     }
-  }), a.display) {
-    const e = a.display;
+  }), n.display) {
+    const e = n.display;
     ["display1", "display2"].forEach((i) => {
-      var r, o;
-      const n = e[i];
-      n && (t[`typography-${i}-font-size`] = n.fontSize || "", t[`typography-${i}-font-weight`] = ((r = n.fontWeight) == null ? void 0 : r.toString()) || "", t[`typography-${i}-line-height`] = ((o = n.lineHeight) == null ? void 0 : o.toString()) || "", t[`typography-${i}-letter-spacing`] = n.letterSpacing || "normal", n.textTransform && (t[`typography-${i}-text-transform`] = n.textTransform || ""));
+      var a, l;
+      const r = e[i];
+      r && (t[`typography-${i}-font-size`] = r.fontSize || "", t[`typography-${i}-font-weight`] = ((a = r.fontWeight) == null ? void 0 : a.toString()) || "", t[`typography-${i}-line-height`] = ((l = r.lineHeight) == null ? void 0 : l.toString()) || "", t[`typography-${i}-letter-spacing`] = r.letterSpacing || "normal", r.textTransform && (t[`typography-${i}-text-transform`] = r.textTransform || ""));
     });
   }
   return t;
 }
-const P = () => C({
-  components: $,
+const M = () => X({
+  components: x,
   directives: T,
   locale: {
     locale: "fr",
@@ -497,41 +458,41 @@ const P = () => C({
       cnam: {
         dark: !1,
         colors: {
-          ...H,
-          ...A,
-          ...s(g)
+          ...F,
+          ...u,
+          ...s(m)
         },
         variables: {
-          "border-color": g.grey.base,
-          "font-family": m.family.primary,
-          ...x(m),
-          ...s(F)
+          "border-color": m.grey.base,
+          "font-family": g.family.primary,
+          ...y(g),
+          ...s($)
         }
       },
       pa: {
         dark: !1,
         colors: {
-          ...b,
+          ...W,
           ...z,
-          ...s(p)
+          ...s(m)
         },
         variables: {
-          "border-color": p.grey.base,
+          "border-color": m.grey.base,
           "font-family": h.family.primary,
-          ...x(h),
-          ...s(E)
+          ...y(h),
+          ...s(j)
         }
       },
       ap2026: {
         dark: !1,
         colors: {
-          ...d,
+          ...b,
           ...c,
-          ...s(W)
+          ...s(A)
         },
         variables: {
           "font-family": '"Arial", sans-serif',
-          ...s(y)
+          ...s(p)
         }
       },
       ap: {
@@ -539,23 +500,23 @@ const P = () => C({
         colors: {
           ...S,
           ...c,
-          ...s(u)
+          ...s(H)
         },
         variables: {
           "font-family": '"Arial", sans-serif',
-          ...s(y)
+          ...s(p)
         }
       }
     }
   },
   icons: {
     defaultSet: "mdi",
-    aliases: L,
+    aliases: P,
     sets: {
       mdi: w
     }
   }
 });
 export {
-  P as createVuetifyInstance
+  M as createVuetifyInstance
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -8,20 +8,21 @@
     "dist",
     "src"
   ],
-  "main": "./dist/design-system-v3.umd.cjs",
   "module": "./dist/design-system-v3.js",
   "types": "./dist/main.d.ts",
   "exports": {
     ".": {
       "types": "./dist/main.d.ts",
-      "import": "./dist/design-system-v3.js",
-      "require": "./dist/design-system-v3.umd.cjs"
+      "import": "./dist/design-system-v3.js"
     },
-    "./style.css": "./dist/style.css",
+    "./synapse.css": "./dist/synapse.css",
     "./vuetifyConfig": {
       "types": "./dist/vuetifyConfig.d.ts",
-      "import": "./dist/vuetifyConfig.js",
-      "require": "./dist/vuetifyConfig.umd.cjs"
+      "import": "./dist/vuetifyConfig.js"
+    },
+    "./modules/notification": {
+      "types": "./src/modules/notification/index.ts",
+      "default": "./src/modules/notification/index.ts"
     },
     "./*": {
       "types": "./src/*",
@@ -40,6 +41,9 @@
     "test:a11y": "pnpm vitest run a11y.spec.ts",
     "a11y:report": "node ./scripts/a11y-report.mjs",
     "a11y:status": "node generate-a11y-report.mjs",
+    "test:visual": "cypress run --component --browser electron",
+    "test:visual:open": "cypress open --component --browser electron",
+    "test:visual:update": "cypress run --component --browser electron --env updateSnapshots=true",
     "prepare": "husky",
     "generate:changelog": "auto-changelog -o CHANGELOG-TEMP.md -p --starting-date 2024-10-10"
   },
@@ -60,20 +64,21 @@
     "@chromatic-com/storybook": "^4.0.0",
     "@jls-digital/storybook-addon-code": "^1.0.4",
     "@mdi/js": "^7.4.47",
-    "@storybook/addon-a11y": "8.6.14",
-    "@storybook/addon-docs": "^8.5.6",
-    "@storybook/addon-essentials": "^8.5.6",
-    "@storybook/addon-interactions": "^8.5.6",
-    "@storybook/addon-links": "^8.5.6",
-    "@storybook/addon-onboarding": "^8.5.6",
+    "@simonsmith/cypress-image-snapshot": "^10.0.3",
+    "@storybook/addon-a11y": "8.6.18",
+    "@storybook/addon-docs": "8.6.18",
+    "@storybook/addon-essentials": "8.6.18",
+    "@storybook/addon-interactions": "8.6.18",
+    "@storybook/addon-links": "8.6.18",
+    "@storybook/addon-onboarding": "8.6.18",
     "@storybook/addon-queryparams": "^7.0.1",
-    "@storybook/addon-viewport": "^8.5.6",
-    "@storybook/blocks": "^8.5.6",
-    "@storybook/manager-api": "^8.5.6",
-    "@storybook/test": "^8.5.6",
-    "@storybook/theming": "^8.5.6",
-    "@storybook/vue3": "^8.5.6",
-    "@storybook/vue3-vite": "^8.5.6",
+    "@storybook/addon-viewport": "8.6.18",
+    "@storybook/blocks": "8.6.18",
+    "@storybook/manager-api": "8.6.18",
+    "@storybook/test": "8.6.18",
+    "@storybook/theming": "8.6.18",
+    "@storybook/vue3": "8.6.18",
+    "@storybook/vue3-vite": "8.6.18",
     "@stylistic/eslint-plugin": "^2.9.0",
     "@stylistic/eslint-plugin-ts": "^2.9.0",
     "@stylistic/stylelint-config": "^3.0.0",
@@ -88,6 +93,7 @@
     "axe-core": "^4.11.0",
     "axios": "^1.14.0",
     "cross-env": "^10.1.0",
+    "cypress": "^15.13.0",
     "eslint": "^9.13.0",
     "eslint-plugin-storybook": "^0.11.3",
     "eslint-plugin-vue": "^9.30.0",
@@ -99,9 +105,10 @@
     "postcss-html": "^1.7.0",
     "postcss-scss": "^4.0.9",
     "resize-observer-polyfill": "^1.5.1",
+    "sass": "^1.99.0",
     "sass-embedded": "1.83.0",
     "semantic-release": "^25.0.3",
-    "storybook": "^8.5.6",
+    "storybook": "8.6.18",
     "storybook-addon-vue-mdx": "^2.0.0",
     "stylelint": "^16.12.0",
     "stylelint-config-recommended-scss": "^14.1.0",
@@ -156,10 +163,15 @@
       "immutable": ">=5.1.5",
       "flatted": ">=3.4.2",
       "handlebars": ">=4.7.9",
-      "lodash": ">=4.18.0"
+      "lodash": ">=4.18.0",
+      "follow-redirects": ">=1.16.0",
+      "uuid": ">=14.0.0",
+      "@cypress/request>uuid": "8.3.2",
+      "postcss": ">=8.5.10",
+      "fast-uri": ">=3.1.2"
     },
     "patchedDependencies": {
       "vuetify@3.12.2": "patches/vuetify@3.12.2.patch"
     }
   }
-}
+}

package/src/assets/amelipro/apTokens2026.scss

@@ -20,8 +20,8 @@ $media-only-lg: '(min-width: #{$md + 0.01}px) and (max-width: #{$lg}px)'; // 126
 $media-only-xl: '(min-width: #{$lg + 0.01}px)'; // >= 1904px
 
 // AMELIPRO COLORS
-$ap-primary: #00749c; // bleu-4
-$ap-secondary: #00516d; // bleu-1
+$ap-primary: #0084b2; // bleu-4
+$ap-secondary: #004259; // bleu-1
 $ap-error: #b33f2e; // rouge-3
 $ap-informations: #4d547d; // parme-1
 $ap-succes: #007863; // turquoise-3
@@ -32,7 +32,7 @@ $ap-grey: #545859; // gris-2
 $ap-blue: #0c419a; // bleu-9
 $ap-yellow: #f0b323; // jaune-2
 $ap-green: #56c271; // vert-3
-$ap-red: #b33f2e; // rouge-3
+$ap-red: $ap-error; // rouge-3
 $ap-turquoise: #33bca5; // turquoise-4
 $ap-parme: #dde6fb; // parme-2
 $ap-pink: #d00063; // rose-1
@@ -50,8 +50,8 @@ $ap-grey-lighten6: #f4f8f9; // gris-8 app background
 
 // AMELIPRO BLUE VARIANT
 // DARKEN
-$ap-blue-darken1: #00749c; // bleu-4
-$ap-blue-darken2: #00516d; // bleu-1
+$ap-blue-darken1: $ap-primary; // bleu-4
+$ap-blue-darken2: $ap-secondary; // bleu-1
 // LIGHTEN
 $ap-blue-lighten1: #99dbf2; // bleu-6
 $ap-blue-lighten2: #ccedf9; // bleu-7

package/src/assets/overrides/_breakpoints.scss

@@ -0,0 +1,25 @@
+// Shared responsive breakpoints
+// Usage: @use '@/assets/overrides/breakpoints' as bp;
+//        @media #{bp.$up-md} { ... }
+
+// Up variants (mobile-first)
+$up-sm: '(width >= 600px)';
+$up-md: '(width >= 960px)';
+$up-lg: '(width >= 1264px)';
+
+// Down variants
+$down-xs: '(width <= 599.99px)';
+$down-sm: '(width <= 959.99px)';
+$down-md: '(width <= 1263.99px)';
+
+// Range variants
+$sm-only: '(width >= 600px) and (width <= 959.99px)';
+$md-only: '(width >= 960px) and (width <= 1263.99px)';
+
+// Component-specific (AmeliproDentalChart)
+$up-dental: '(width >= 1240px)';
+$down-dental: '(width <= 1239.999px)';
+
+// Component-specific (SocialMediaLinks)
+$up-tablet: '(width >= 768px)';
+$down-mobile: '(width <= 767px)';

package/src/assets/overrides/_btns.scss

@@ -1,5 +1,3 @@
-@use '@/assets/apTokens';
-
 .v-btn {
 	text-transform: inherit !important;
 	font-weight: 700 !important;

package/src/assets/overrides/_forms.scss

@@ -1,7 +1,5 @@
-@use '@/assets/tokens';
-
 .v-messages {
-	font-size: 14px !important;
+	font-size: var(--v-fontSize-liensEtLibelles) !important;
 
 	.v-messages__message {
 		line-height: 16px !important;

package/src/assets/overrides/_icons.scss

@@ -1,24 +1,11 @@
-@use '@/assets/apTokens';
-@use '@/assets/amelipro/apTokens2026';
-@use '@/assets/tokens';
-
-.v-theme--ap.v-btn--icon .v-icon {
-	color: apTokens.$colors-icon-accent-primary !important;
-	transition: color 0.2s ease;
-
-	&:hover {
-		color: apTokens.$colors-icon-accent-secondary !important;
-	}
-}
-
 .v-theme--ap2026.v-btn--icon .v-icon {
-	color: apTokens2026.$ap-blue-darken1;
+	color: rgb(var(--v-theme-primary));
 	transition: color 0.2s ease;
 }
 
 .v-theme--cnam.v-btn--icon .v-icon,
 .v-theme--pa.v-btn--icon .v-icon {
-	color: tokens.$colors-icon-accent-primary;
+	color: rgb(var(--v-theme-iconAccentPrimary));
 	transition: color 0.2s ease;
 }
 
@@ -26,10 +13,6 @@
 .v-theme--ap2026 .v-btn--icon:hover,
 .v-theme--cnam .v-btn--icon:hover,
 .v-theme--pa .v-btn--icon:hover {
-	opacity: 0.08;
-}
-
-.v-theme--cnam .v-btn--icon:hover {
 	opacity: 0.8;
 }
 
@@ -41,17 +24,17 @@
 }
 
 .v-theme--ap.v-btn--icon .v-ripple__animation {
-	background-color: apTokens.$colors-icon-accent-primary !important;
+	background-color: rgb(var(--v-theme-iconAccentPrimary)) !important;
 	opacity: 0.18;
 }
 
 .v-theme--ap2026.v-btn--icon .v-ripple__animation {
-	background-color: apTokens2026.$ap-blue-darken1 !important;
+	background-color: rgb(var(--v-theme-primary)) !important;
 	opacity: 0.18;
 }
 
 .v-theme--cnam.v-btn--icon .v-ripple__animation,
 .v-theme--pa.v-btn--icon .v-ripple__animation {
-	background-color: tokens.$colors-icon-accent-primary !important;
+	background-color: rgb(var(--v-theme-iconAccentPrimary)) !important;
 	opacity: 0.18;
 }