diff --git a/package.json b/package.json index 512a3f0d0..26bc90c4b 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "@prisma/extension-read-replicas": "^0.5.0", "@svgr/cli": "^8.1.0", "@tanstack/react-query": "^5.101.4", - "@umami/react-zen": "^0.249.0", + "@umami/react-zen": "^0.251.0", "bcryptjs": "^3.0.2", "chalk": "^5.6.2", "chart.js": "^4.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2c11a4428..ec908597a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,8 +36,8 @@ importers: specifier: ^5.101.4 version: 5.101.4(react@19.2.8) '@umami/react-zen': - specifier: ^0.249.0 - version: 0.249.0(@date-fns/tz@1.5.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(date-fns@4.4.0)(immer@11.1.15)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.18)(use-sync-external-store@1.6.0(react@19.2.8)) + specifier: ^0.251.0 + version: 0.251.0(@date-fns/tz@1.5.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(date-fns@4.4.0)(immer@11.1.15)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.18)(use-sync-external-store@1.6.0(react@19.2.8)) bcryptjs: specifier: ^3.0.2 version: 3.0.3 @@ -433,8 +433,8 @@ packages: resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==} engines: {node: '>=6.9.0'} - '@base-ui/react@1.6.0': - resolution: {integrity: sha512-/jzjTWJYXhRFO45Bev9lc3cHbmjzCMpUqbMZ2AgKy/z25mY9B6shGSNcXcjQar9n5doM0KYW1W8fcFv2jZBuMw==} + '@base-ui/react@1.7.0': + resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==} engines: {node: '>=14.0.0'} peerDependencies: '@date-fns/tz': ^1.2.0 @@ -450,8 +450,8 @@ packages: date-fns: optional: true - '@base-ui/utils@0.3.1': - resolution: {integrity: sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg==} + '@base-ui/utils@0.3.2': + resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==} peerDependencies: '@types/react': ^17 || ^18 || ^19 react: ^17 || ^18 || ^19 @@ -2919,8 +2919,8 @@ packages: '@types/yargs@17.0.35': resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==} - '@umami/react-zen@0.249.0': - resolution: {integrity: sha512-we6zRX96Md5IlKDaSYw2VvHsCJazL95DQehGFBl/O7v1znMi0sAJ4vD1EHdjkb9+avhmTkNp1w45m615bD0bFg==} + '@umami/react-zen@0.251.0': + resolution: {integrity: sha512-y9oLLBVjin+0mOFk6K4WqozlgAKf1L2K/oYjRmKBbq/E/xCYt2IJZl6L1wB2ioNA4VgBKyaEYuU+UHVBCp/nnQ==} peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 @@ -5043,8 +5043,8 @@ packages: peerDependencies: react: ^18.0.0 || ^19.0.0 - react-hook-form@7.84.0: - resolution: {integrity: sha512-+hWvQP6GLco56mDwrbU4XnHix8t1z90ltZsDIrREl+jnQFQxYLX8oAzqe/Xn8nHpmoXTY5M6oEXrAhbP1qevNQ==} + react-hook-form@7.86.0: + resolution: {integrity: sha512-4kbWJrh5jPZt1+YqVcXcGKffGcXV/XVbozknLh0Yjh0KhpoAkus21TAQhzRYqNwFkkObmnSvRlZZ3GT+ehoIrA==} engines: {node: '>=18.0.0'} peerDependencies: react: ^16.8.0 || ^17 || ^18 || ^19 @@ -5087,6 +5087,12 @@ packages: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 + react-resizable-panels@4.12.3: + resolution: {integrity: sha512-GHMJWnDXui/3RX4bT+cgBP+N3N2nkwcoZATr/2xLFpqQQe7TlBrE0cGM0dUa9ceT7A90tUrSRsiqgRG+g0/2AA==} + peerDependencies: + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + react-simple-maps@3.0.0: resolution: {integrity: sha512-vKNFrvpPG8Vyfdjnz5Ne1N56rZlDfHXv5THNXOVZMqbX1rWZA48zQuYT03mx6PAKanqarJu/PDLgshIZAfHHqw==} peerDependencies: @@ -5159,8 +5165,8 @@ packages: require-main-filename@2.0.0: resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==} - reselect@5.2.0: - resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==} + reselect@5.3.0: + resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==} resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} @@ -5957,6 +5963,24 @@ packages: use-sync-external-store: optional: true + zustand@5.0.15: + resolution: {integrity: sha512-MpSEjRiBkA9crSYeOUH32rJC7SVqAbm0Fqcqge/bUi2PPoLcBWKOsG+C8mevmpr8TwXHBVkChbbJiyvkE+i/3A==} + engines: {node: '>=12.20.0'} + peerDependencies: + '@types/react': '>=18.0.0' + immer: '>=9.0.6' + react: '>=18.0.0' + use-sync-external-store: '>=1.2.0' + peerDependenciesMeta: + '@types/react': + optional: true + immer: + optional: true + react: + optional: true + use-sync-external-store: + optional: true + snapshots: '@adobe/css-tools@4.5.0': {} @@ -6199,10 +6223,10 @@ snapshots: '@babel/helper-validator-identifier': 7.29.7 optional: true - '@base-ui/react@1.6.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@base-ui/react@1.7.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@babel/runtime': 7.29.7 - '@base-ui/utils': 0.3.1(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@base-ui/utils': 0.3.2(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@floating-ui/utils': 0.2.12 react: 19.2.8 @@ -6213,13 +6237,13 @@ snapshots: '@types/react': 19.2.17 date-fns: 4.4.0 - '@base-ui/utils@0.3.1(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@base-ui/utils@0.3.2(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@babel/runtime': 7.29.7 '@floating-ui/utils': 0.2.12 react: 19.2.8 react-dom: 19.2.8(react@19.2.8) - reselect: 5.2.0 + reselect: 5.3.0 use-sync-external-store: 1.6.0(react@19.2.8) optionalDependencies: '@types/react': 19.2.17 @@ -8236,9 +8260,9 @@ snapshots: dependencies: '@types/yargs-parser': 21.0.3 - '@umami/react-zen@0.249.0(@date-fns/tz@1.5.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(date-fns@4.4.0)(immer@11.1.15)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.18)(use-sync-external-store@1.6.0(react@19.2.8))': + '@umami/react-zen@0.251.0(@date-fns/tz@1.5.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(date-fns@4.4.0)(immer@11.1.15)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.18)(use-sync-external-store@1.6.0(react@19.2.8))': dependencies: - '@base-ui/react': 1.6.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@base-ui/react': 1.7.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@react-spring/web': 9.7.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8) clsx: 2.1.1 cmdk: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) @@ -8247,11 +8271,11 @@ snapshots: react: 19.2.8 react-day-picker: 9.14.0(react@19.2.8) react-dom: 19.2.8(react@19.2.8) - react-hook-form: 7.84.0(react@19.2.8) - react-resizable-panels: 4.12.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + react-hook-form: 7.86.0(react@19.2.8) + react-resizable-panels: 4.12.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8) tailwind-merge: 3.6.0 tailwind-variants: 3.3.1(tailwind-merge@3.6.0)(tailwindcss@4.1.18) - zustand: 5.0.14(@types/react@19.2.17)(immer@11.1.15)(react@19.2.8)(use-sync-external-store@1.6.0(react@19.2.8)) + zustand: 5.0.15(@types/react@19.2.17)(immer@11.1.15)(react@19.2.8)(use-sync-external-store@1.6.0(react@19.2.8)) transitivePeerDependencies: - '@date-fns/tz' - '@types/react' @@ -10537,7 +10561,7 @@ snapshots: dependencies: react: 19.2.8 - react-hook-form@7.84.0(react@19.2.8): + react-hook-form@7.86.0(react@19.2.8): dependencies: react: 19.2.8 @@ -10573,6 +10597,11 @@ snapshots: react: 19.2.8 react-dom: 19.2.8(react@19.2.8) + react-resizable-panels@4.12.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8): + dependencies: + react: 19.2.8 + react-dom: 19.2.8(react@19.2.8) + react-simple-maps@3.0.0(prop-types@15.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8): dependencies: d3-geo: 2.0.2 @@ -10662,7 +10691,7 @@ snapshots: require-main-filename@2.0.0: {} - reselect@5.2.0: {} + reselect@5.3.0: {} resolve-from@4.0.0: {} @@ -11527,3 +11556,10 @@ snapshots: immer: 11.1.15 react: 19.2.8 use-sync-external-store: 1.6.0(react@19.2.8) + + zustand@5.0.15(@types/react@19.2.17)(immer@11.1.15)(react@19.2.8)(use-sync-external-store@1.6.0(react@19.2.8)): + optionalDependencies: + '@types/react': 19.2.17 + immer: 11.1.15 + react: 19.2.8 + use-sync-external-store: 1.6.0(react@19.2.8) diff --git a/src/app/(main)/TopNav.tsx b/src/app/(main)/TopNav.tsx index 3d8092377..8e972650f 100644 --- a/src/app/(main)/TopNav.tsx +++ b/src/app/(main)/TopNav.tsx @@ -46,7 +46,7 @@ export function TopNav() { paddingRight="5" width="100%" zIndex={100} - backgroundColor="surface-raised" + backgroundColor="surface-base" > @@ -109,7 +109,7 @@ export function TopNav() { left: 0, right: 0, height: 16, - background: 'linear-gradient(to bottom, var(--surface-raised), transparent)', + background: 'linear-gradient(to bottom, var(--zen-surface-base), transparent)', pointerEvents: 'none', }} /> diff --git a/src/app/(main)/websites/WebsiteSparkline.tsx b/src/app/(main)/websites/WebsiteSparkline.tsx index 569450463..410d51f20 100644 --- a/src/app/(main)/websites/WebsiteSparkline.tsx +++ b/src/app/(main)/websites/WebsiteSparkline.tsx @@ -48,7 +48,7 @@ export function WebsiteSparkline({ maxWidth: 88, height: 24, borderRadius: 9999, - background: 'var(--surface-sunken)', + background: 'var(--zen-surface-sunken)', }} /> ); diff --git a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css index e4eb6ad75..15e3ae2bb 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css +++ b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css @@ -12,7 +12,7 @@ .railDivider { width: 1px; height: 100%; - background: var(--gray-300, #d1d5db); + background: var(--zen-gray-300, #d1d5db); justify-self: center; } @@ -49,12 +49,12 @@ } .pageButton:hover { - background: var(--surface-sunken); + background: var(--zen-surface-sunken); } .pageButtonSelected, .pageButtonSelected:hover { - background: var(--surface-sunken); + background: var(--zen-surface-sunken); font-weight: 600; } @@ -74,8 +74,8 @@ .mobileSelectedPageButton { width: 100%; text-align: left; - border: 1px solid var(--border-base); - background: var(--surface-raised); + border: 1px solid var(--zen-border-default); + background: var(--zen-surface-raised); border-radius: 8px; padding: 10px 12px; cursor: pointer; @@ -84,7 +84,7 @@ } .mobileSelectedPageButton:hover { - background: var(--surface-sunken); + background: var(--zen-surface-sunken); } .summaryHeader { @@ -108,8 +108,8 @@ align-items: center; padding: 4px 10px; border-radius: 999px; - background: var(--surface-raised); - border: 1px solid var(--border-base); + background: var(--zen-surface-raised); + border: 1px solid var(--zen-border-default); white-space: nowrap; } @@ -175,9 +175,9 @@ .canvas { position: relative; overflow: hidden; - border: 1px solid var(--border-base); + border: 1px solid var(--zen-border-default); border-radius: 8px; - background: var(--surface-sunken); + background: var(--zen-surface-sunken); flex: 0 0 auto; margin-inline: auto; } @@ -224,7 +224,7 @@ width: 100%; height: 100%; border: 0; - background: var(--surface-base); + background: var(--zen-surface-base); overflow: hidden; pointer-events: none; } @@ -243,7 +243,7 @@ position: absolute; inset: 0; z-index: 2; - background: var(--surface-sunken); + background: var(--zen-surface-sunken); display: flex; align-items: center; justify-content: center; diff --git a/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.module.css b/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.module.css index ec6a2bd55..45571e81a 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.module.css +++ b/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.module.css @@ -3,9 +3,9 @@ height: 100%; position: relative; - --journey-line-color: var(--border-strong); - --journey-active-color: var(--primary); - --journey-faded-color: var(--interactive-bg); + --journey-line-color: var(--zen-border-strong); + --journey-active-color: var(--zen-primary); + --journey-faded-color: var(--zen-interactive-bg); } .view { @@ -43,8 +43,8 @@ .dropoff { font-weight: 600; - color: var(--text-muted); - background: var(--surface-sunken); + color: var(--zen-text-muted); + background: var(--zen-surface-sunken); padding: 4px 8px; border-radius: 5px; } @@ -58,8 +58,8 @@ height: 50px; font-size: 16px; font-weight: 700; - color: var(--surface-base); - background: var(--surface-inverted); + color: var(--zen-surface-base); + background: var(--zen-surface-inverted); z-index: 1; margin: 0 auto 20px; } @@ -84,7 +84,7 @@ position: relative; cursor: pointer; padding: 10px 20px; - background: var(--interactive-bg); + background: var(--zen-interactive-bg); border-radius: 5px; display: flex; align-items: center; @@ -96,27 +96,27 @@ } .node:hover:not(.selected) { - background: var(--interactive-bg-hover); + background: var(--zen-interactive-bg-hover); } .node.selected { - color: var(--surface-base); - background: var(--surface-inverted); + color: var(--zen-surface-base); + background: var(--zen-surface-inverted); } .node.active { - color: var(--primary-foreground); - background: var(--primary); + color: var(--zen-primary-foreground); + background: var(--zen-primary); } .node.selected .count { - color: var(--surface-base); - background: var(--surface-inverted); + color: var(--zen-surface-base); + background: var(--zen-surface-inverted); } .node.selected.active .count { - color: var(--primary-foreground); - background: var(--primary); + color: var(--zen-primary-foreground); + background: var(--zen-primary); } .name { @@ -212,7 +212,7 @@ position: absolute; border-radius: 100%; border: 3px solid var(--journey-line-color); - background: var(--surface-base); + background: var(--zen-surface-base); width: 14px; height: 14px; } diff --git a/src/app/(main)/websites/[websiteId]/(reports)/performance/Performance.module.css b/src/app/(main)/websites/[websiteId]/(reports)/performance/Performance.module.css index ddb5dc10a..c1a4e64af 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/performance/Performance.module.css +++ b/src/app/(main)/websites/[websiteId]/(reports)/performance/Performance.module.css @@ -1,3 +1,3 @@ .sampleCount { - color: var(--base-color-text-secondary); + color: var(--zen-text-muted); } diff --git a/src/app/(main)/websites/[websiteId]/replays/[replayId]/ReplayPlayer.tsx b/src/app/(main)/websites/[websiteId]/replays/[replayId]/ReplayPlayer.tsx index d37ba073a..4d7b5f4fa 100644 --- a/src/app/(main)/websites/[websiteId]/replays/[replayId]/ReplayPlayer.tsx +++ b/src/app/(main)/websites/[websiteId]/replays/[replayId]/ReplayPlayer.tsx @@ -169,8 +169,8 @@ export function ReplayPlayer({ events }: { events: any[] }) { height: showUnavailable ? playerHeight : playerOuterHeight, overflow: 'hidden', borderRadius: '8px', - border: '1px solid var(--base300)', - background: 'var(--base75)', + border: '1px solid var(--zen-border-default)', + background: 'var(--zen-surface-sunken)', }} >
{t(messages.twoFactorLoginDescription)} {!!lockUntil && lockMessage && ( - {lockMessage} + {lockMessage} )}
diff --git a/src/components/common/Badge.module.css b/src/components/common/Badge.module.css index 13d9123d9..27e48387e 100644 --- a/src/components/common/Badge.module.css +++ b/src/components/common/Badge.module.css @@ -47,12 +47,12 @@ } .gray { - color: var(--text-muted); - background: var(--surface-sunken); + color: var(--zen-text-muted); + background: var(--zen-surface-sunken); } .gray .dot { - background: var(--text-muted); + background: var(--zen-text-muted); } :global([data-theme="dark"]) .good { diff --git a/src/components/common/OverlayScrollArea.module.css b/src/components/common/OverlayScrollArea.module.css index dcd274748..cef44b334 100644 --- a/src/components/common/OverlayScrollArea.module.css +++ b/src/components/common/OverlayScrollArea.module.css @@ -1,7 +1,7 @@ .root { - --overlay-scrollbar-track: var(--gray-50); - --overlay-scrollbar-thumb: var(--gray-300); - --overlay-scrollbar-thumb-hover: var(--gray-400); + --overlay-scrollbar-track: var(--zen-gray-50); + --overlay-scrollbar-thumb: var(--zen-gray-300); + --overlay-scrollbar-thumb-hover: var(--zen-gray-400); --overlay-scrollbar-viewport-padding-right: 0px; --overlay-scrollbar-vertical-margin-right: 2px; } @@ -45,7 +45,7 @@ } [data-theme='dark'] .root { - --overlay-scrollbar-track: var(--gray-800); - --overlay-scrollbar-thumb: var(--gray-600); - --overlay-scrollbar-thumb-hover: var(--gray-500); + --overlay-scrollbar-track: var(--zen-gray-800); + --overlay-scrollbar-thumb: var(--zen-gray-600); + --overlay-scrollbar-thumb-hover: var(--zen-gray-500); } diff --git a/src/components/common/SortableLabel.tsx b/src/components/common/SortableLabel.tsx index 99ca27691..c8ad41ba4 100644 --- a/src/components/common/SortableLabel.tsx +++ b/src/components/common/SortableLabel.tsx @@ -18,7 +18,7 @@ export function SortableLabel({ label, sortKey, defaultDirection = 'asc' }: Sort const isActive = query.orderBy === sortKey; const isDescending = query.sortDescending === 'true'; const direction = isActive ? (isDescending ? 'desc' : 'asc') : undefined; - const activeColor = 'var(--text-primary)'; + const activeColor = 'var(--zen-text-primary)'; const getNextDirection = (): SortDirection => { if (!isActive) { @@ -55,7 +55,7 @@ export function SortableLabel({ label, sortKey, defaultDirection = 'asc' }: Sort flexDirection: 'column', gap: 0, lineHeight: 0, - color: 'var(--text-muted)', + color: 'var(--zen-text-muted)', opacity: 0.8, }} > diff --git a/src/components/metrics/ChangeLabel.tsx b/src/components/metrics/ChangeLabel.tsx index 1960cefcb..fbd0fc1e3 100644 --- a/src/components/metrics/ChangeLabel.tsx +++ b/src/components/metrics/ChangeLabel.tsx @@ -4,16 +4,16 @@ import { ArrowRight } from '@/components/icons'; const STYLES = { positive: { - color: `var(--status-success)`, - background: `var(--status-success-bg)`, + color: `var(--zen-status-success)`, + background: `var(--zen-status-success-bg)`, }, negative: { - color: `var(--status-error)`, - background: `var(--status-error-bg)`, + color: `var(--zen-status-error)`, + background: `var(--zen-status-error-bg)`, }, neutral: { - color: `var(--text-muted)`, - background: `var(--surface-raised)`, + color: `var(--zen-text-muted)`, + background: `var(--zen-surface-raised)`, }, }; diff --git a/src/components/metrics/PerformanceCard.module.css b/src/components/metrics/PerformanceCard.module.css index bf8399e64..470ddb5ea 100644 --- a/src/components/metrics/PerformanceCard.module.css +++ b/src/components/metrics/PerformanceCard.module.css @@ -3,9 +3,9 @@ } .card:hover { - box-shadow: 0 0 0 1px var(--text-primary); + box-shadow: 0 0 0 1px var(--zen-text-primary); } .card.selected { - box-shadow: 0 0 0 1px var(--text-primary); + box-shadow: 0 0 0 1px var(--zen-text-primary); } diff --git a/src/components/modals/TwoFactorSuccessModal.module.css b/src/components/modals/TwoFactorSuccessModal.module.css index aba87fdd5..62abb3904 100644 --- a/src/components/modals/TwoFactorSuccessModal.module.css +++ b/src/components/modals/TwoFactorSuccessModal.module.css @@ -8,7 +8,7 @@ grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; - background: var(--surface-sunken); + background: var(--zen-surface-sunken); border-radius: 8px; } diff --git a/src/components/share/SharedSharesTable.tsx b/src/components/share/SharedSharesTable.tsx index d89918270..6231dbbc9 100644 --- a/src/components/share/SharedSharesTable.tsx +++ b/src/components/share/SharedSharesTable.tsx @@ -5,7 +5,7 @@ import { useConfig, useMessages, useMobile } from '@/components/hooks'; import { ExternalLink } from '@/components/icons'; const desktopGridTemplateColumns = 'minmax(180px, 1fr) minmax(0, 2fr) auto'; -const rowBorder = '1px solid var(--border-default)'; +const rowBorder = '1px solid var(--zen-border-default)'; export interface ShareRow { id: string;