From 6a470a096d7fca17b73cd68bbe70b8b2b7cd2593 Mon Sep 17 00:00:00 2001 From: Shak Date: Fri, 18 Sep 2026 15:14:42 +0330 Subject: [PATCH 01/52] fix(theme): write theme colours in hex, not oklch oklch() landed in Chrome 111 and Chrome 109 is the last version Windows 7/8.1 can run, so those users got no colour at all from the 67 tokens that used it. Same colours, a syntax every target browser parses. Also gives all six themes an identical variable set. --- src/styles/theme/dark.css | 51 ++++++----- src/styles/theme/esteghlal.css | 64 +++++++------- src/styles/theme/glass.css | 89 ++++++++++--------- src/styles/theme/icy.css | 153 +++++++++++++++++---------------- src/styles/theme/light.css | 42 ++++++--- src/styles/theme/main.css | 33 ++++--- src/styles/theme/zarna.css | 64 +++++++------- 7 files changed, 269 insertions(+), 227 deletions(-) diff --git a/src/styles/theme/dark.css b/src/styles/theme/dark.css index 4b7cb5c89..3d88205d3 100644 --- a/src/styles/theme/dark.css +++ b/src/styles/theme/dark.css @@ -1,21 +1,32 @@ @plugin "daisyui/theme" { - name: "dark"; - --color-base-100: #171717; - --color-base-200: #1a1a1a; - --color-base-300: #232323; - --color-base-content: #f9fafb; - --color-primary: var(--brand-primary); - --color-primary-focus: #4f46e5; - --color-primary-content: #ffffff; - --color-secondary: var(--brand-secondary); - --color-secondary-focus: #7c3aed; - --color-secondary-content: #171717; - --color-accent: #f59e0b; - --color-accent-focus: #d97706; - --color-accent-content: #271b06; - --color-error: #f7374f; - --color-success: #34d399; - --color-warning: #fbbf24; - --color-warning-content: #271b06; - --color-info: #60a5fa; -} \ No newline at end of file + name: "dark"; + color-scheme: "dark"; + --color-base-100: #171717; + --color-base-200: #1a1a1a; + --color-base-300: #232323; + --color-base-content: #f9fafb; + --color-primary: var(--brand-primary); + --color-primary-content: #fff; + --color-secondary: var(--brand-secondary); + --color-secondary-content: #171717; + --color-accent: #f59e0b; + --color-accent-content: #271b06; + --color-neutral: #09090b; + --color-neutral-content: #e4e4e7; + --color-info: #60a5fa; + --color-info-content: #042e49; + --color-success: #34d399; + --color-success-content: #004c39; + --color-warning: #fbbf24; + --color-warning-content: #271b06; + --color-error: #f7374f; + --color-error-content: #4d0218; + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; +} diff --git a/src/styles/theme/esteghlal.css b/src/styles/theme/esteghlal.css index 06b464d28..ee96081a0 100644 --- a/src/styles/theme/esteghlal.css +++ b/src/styles/theme/esteghlal.css @@ -1,34 +1,32 @@ @plugin "daisyui/theme" { - name: "esteghlal"; - default: false; - prefersdark: false; - color-scheme: "dark"; - --color-base-100: oklch(28% 0.091 267.935); - --color-base-200: oklch(35% 0.12 265.522); - --color-base-300: oklch(40% 0.15 265.638); - --color-base-content: oklch(95% 0.02 260); - --color-primary: oklch(65% 0.22 260); - --color-primary-content: oklch(100% 0 0); - --color-secondary: oklch(75% 0.15 251.813); - --color-secondary-content: oklch(20% 0.08 267.935); - --color-accent: oklch(80% 0.12 210); - --color-accent-content: oklch(20% 0.08 267.935); - --color-neutral: oklch(20% 0.06 267.935); - --color-neutral-content: oklch(90% 0.02 267.935); - --color-info: oklch(70% 0.16 245); - --color-info-content: oklch(20% 0.05 245); - --color-success: oklch(75% 0.18 150); - --color-success-content: oklch(20% 0.1 150); - --color-warning: oklch(82% 0.18 90); - --color-warning-content: oklch(20% 0.1 90); - --color-error: oklch(65% 0.22 25); - --color-error-content: oklch(100% 0 0); - --radius-selector: 0.5rem; - --radius-field: 0.25rem; - --radius-box: 0.5rem; - --size-selector: 0.25rem; - --size-field: 0.25rem; - --border: 1px; - --depth: 1; - --noise: 0; -} \ No newline at end of file + name: "esteghlal"; + color-scheme: "dark"; + --color-base-100: #162455; + --color-base-200: #1c3478; + --color-base-300: #203e97; + --color-base-content: #e7effc; + --color-primary: #3287ff; + --color-primary-content: #ffffff; + --color-secondary: #60b2ff; + --color-secondary-content: #07113a; + --color-accent: #47d2e8; + --color-accent-content: #07113a; + --color-neutral: #0a1331; + --color-neutral-content: #d8deec; + --color-info: #2da6fa; + --color-info-content: #00182b; + --color-success: #40cc6d; + --color-success-content: #002100; + --color-warning: #f1bd00; + --color-warning-content: #271000; + --color-error: #f94144; + --color-error-content: #ffffff; + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; +} diff --git a/src/styles/theme/glass.css b/src/styles/theme/glass.css index 1ef1a308a..def791e99 100644 --- a/src/styles/theme/glass.css +++ b/src/styles/theme/glass.css @@ -1,29 +1,40 @@ @plugin "daisyui/theme" { - name: "glass"; - --color-base-100: #171717b3; - --color-base-200: rgba(23, 23, 23, 0.1); - --color-base-300: rgba(255, 255, 255, 0.05); - --color-base-content: rgba(255, 255, 255, 0.95); - --color-primary: rgba(var(--brand-primary-rgb), 0.9); - --color-primary-focus: rgba(var(--brand-primary-rgb), 1); - --color-primary-content: #ffffff; - --color-secondary: rgba(var(--brand-secondary-rgb), 0.8); - --color-secondary-focus: rgba(var(--brand-secondary-rgb), 0.9); - --color-secondary-content: rgba(255, 255, 255, 1); - --color-accent: rgba(34, 197, 94, 0.8); - --color-accent-focus: rgba(22, 163, 74, 0.9); - --color-accent-content: rgba(255, 255, 255, 1); - --color-error: rgba(239, 68, 68, 0.8); - --color-success: rgba(34, 197, 94, 0.8); - --color-warning: rgba(245, 158, 11, 0.8); - --color-warning-content: #271b06; - --color-info: rgba(59, 130, 246, 0.8); - --glass: true; - --glass-opacity: 25%; - --glass-border-opacity: 15%; - --glass-reflex-degree: 120%; - --glass-reflex-opacity: 8%; - --glass-blur: 32px; + name: "glass"; + color-scheme: "dark"; + --color-base-100: #171717b3; + --color-base-200: #1717171a; + --color-base-300: #ffffff0d; + --color-base-content: #fffffff2; + --color-primary: rgba(var(--brand-primary-rgb), 0.9); + --color-primary-content: #fff; + --color-secondary: rgba(var(--brand-secondary-rgb), 0.8); + --color-secondary-content: #fff; + --color-accent: #22c55ecc; + --color-accent-content: #fff; + --color-neutral: #09090b; + --color-neutral-content: #e4e4e7; + --color-info: #3b82f6cc; + --color-info-content: #042e49; + --color-success: #22c55ecc; + --color-success-content: #004c39; + --color-warning: #f59e0bcc; + --color-warning-content: #271b06; + --color-error: #ef4444cc; + --color-error-content: #4d0218; + --glass: true; + --glass-opacity: 25%; + --glass-border-opacity: 15%; + --glass-reflex-degree: 120%; + --glass-reflex-opacity: 8%; + --glass-blur: 32px; + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; } [data-theme="glass"] .menu, @@ -31,38 +42,38 @@ [data-theme="glass"] .modal-box, [data-theme="glass"] .drawer-side, [data-theme="glass"] .collapse { - -webkit-backdrop-filter: blur(16px) saturate(180%); - backdrop-filter: blur(16px) saturate(180%); + -webkit-backdrop-filter: blur(16px) saturate(180%); + backdrop-filter: blur(16px) saturate(180%); } [data-theme="glass"] .search-box { - -webkit-backdrop-filter: blur(10px) saturate(180%); - backdrop-filter: blur(10px) saturate(180%); + -webkit-backdrop-filter: blur(10px) saturate(180%); + backdrop-filter: blur(10px) saturate(180%); } [data-theme="glass"] .widget-wrapper, [data-theme="glass"] .bg-glass, [data-theme="glass"] .tooltip { - background-color: #171717b3; - -webkit-backdrop-filter: blur(16px) saturate(150%); - backdrop-filter: blur(16px) saturate(150%); + background-color: #171717b3; + -webkit-backdrop-filter: blur(16px) saturate(150%); + backdrop-filter: blur(16px) saturate(150%); } [data-theme="glass"] .widget-outer { - -webkit-backdrop-filter: none; - backdrop-filter: none; + -webkit-backdrop-filter: none; + backdrop-filter: none; } [data-theme="glass"] .modal-box { - -webkit-backdrop-filter: blur(200px) saturate(200%); - backdrop-filter: blur(40px) saturate(10%); - background-color: #171717b3; + -webkit-backdrop-filter: blur(200px) saturate(200%); + backdrop-filter: blur(40px) saturate(10%); + background-color: #171717b3; } [data-theme="glass"] .portal { - background-color: #171717fa; + background-color: #171717fa; } [data-theme="glass"] select:open { - background-color: #171717b3; + background-color: #171717b3; } diff --git a/src/styles/theme/icy.css b/src/styles/theme/icy.css index c68b805de..bf96007a2 100644 --- a/src/styles/theme/icy.css +++ b/src/styles/theme/icy.css @@ -1,107 +1,114 @@ @plugin "daisyui/theme" { - name: "icy"; - --color-base-100: rgba(23, 23, 23, 0.15); - --color-base-200: rgba(23, 23, 23, 0.08); - --color-base-300: rgba(255, 255, 255, 0.03); - --color-base-content: rgba(255, 255, 255, 0.92); - --color-primary: rgba(var(--brand-primary-rgb), 0.85); - --color-primary-focus: rgba(var(--brand-primary-rgb), 0.95); - --color-primary-content: rgba(255, 255, 255, 0.95); - --color-secondary: rgba(var(--brand-secondary-rgb), 0.75); - --color-secondary-focus: rgba(var(--brand-secondary-rgb), 0.85); - --color-secondary-content: rgba(255, 255, 255, 0.95); - --color-accent: rgba(34, 197, 94, 0.75); - --color-accent-focus: rgba(22, 163, 74, 0.85); - --color-accent-content: rgba(255, 255, 255, 0.95); - --color-error: rgba(239, 68, 68, 0.85); - --color-success: rgba(34, 197, 94, 0.75); - --color-warning: rgba(245, 158, 11, 0.75); - --color-warning-content: #271b06; - --color-info: rgba(59, 130, 246, 0.75); - --glass: true; - --glass-opacity: 20%; - --glass-border-opacity: 20%; - --glass-reflex-degree: 135%; - --glass-reflex-opacity: 12%; - --glass-blur: 24px; - --glass-shadow: rgba(0, 0, 0, 0.1); - --glass-border: rgba(255, 255, 255, 0.18); + name: "icy"; + color-scheme: "dark"; + --color-base-100: #17171726; + --color-base-200: #17171714; + --color-base-300: #ffffff08; + --color-base-content: #ffffffeb; + --color-primary: rgba(var(--brand-primary-rgb), 0.85); + --color-primary-content: #fffffff2; + --color-secondary: rgba(var(--brand-secondary-rgb), 0.75); + --color-secondary-content: #fffffff2; + --color-accent: #22c55ebf; + --color-accent-content: #fffffff2; + --color-neutral: #09090b; + --color-neutral-content: #e4e4e7; + --color-info: #3b82f6bf; + --color-info-content: #042e49; + --color-success: #22c55ebf; + --color-success-content: #004c39; + --color-warning: #f59e0bbf; + --color-warning-content: #271b06; + --color-error: #ef4444d9; + --color-error-content: #4d0218; + --glass: true; + --glass-opacity: 20%; + --glass-border-opacity: 20%; + --glass-reflex-degree: 135%; + --glass-reflex-opacity: 12%; + --glass-blur: 24px; + --glass-shadow: rgba(0, 0, 0, 0.1); + --glass-border: rgba(255, 255, 255, 0.18); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; } - [data-theme="icy"] .menu, [data-theme="icy"] .navbar, [data-theme="icy"] .modal-box, [data-theme="icy"] .drawer-side, [data-theme="icy"] .collapse { - -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); - backdrop-filter: blur(20px) saturate(180%) brightness(110%); - border: 1px solid var(--glass-border); - box-shadow: - 0 8px 32px var(--glass-shadow), - inset 0 1px 0 rgba(255, 255, 255, 0.1); + -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); + backdrop-filter: blur(20px) saturate(180%) brightness(110%); + border: 1px solid var(--glass-border); + box-shadow: + 0 8px 32px var(--glass-shadow), + inset 0 1px 0 rgba(255, 255, 255, 0.1); } [data-theme="icy"] .search-box { - -webkit-backdrop-filter: blur(12px) saturate(160%) brightness(105%); - backdrop-filter: blur(12px) saturate(160%) brightness(105%); - border: 1px solid rgba(255, 255, 255, 0.12); - box-shadow: - 0 4px 16px rgba(0, 0, 0, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.08); + -webkit-backdrop-filter: blur(12px) saturate(160%) brightness(105%); + backdrop-filter: blur(12px) saturate(160%) brightness(105%); + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.08); } [data-theme="icy"] .widget-wrapper, [data-theme="icy"] .bg-glass, [data-theme="icy"] .tooltip { - background-color: rgba(23, 23, 23, 0.12); - -webkit-backdrop-filter: blur(3px) saturate(150%) brightness(108%); - backdrop-filter: blur(3px) saturate(150%) brightness(108%); - /* @apply bg-black/[0.002] backdrop-blur-xs; */ - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: - 0 6px 24px rgba(0, 0, 0, 0.06), - inset 0 1px 0 rgba(255, 255, 255, 0.12); + background-color: rgba(23, 23, 23, 0.12); + -webkit-backdrop-filter: blur(3px) saturate(150%) brightness(108%); + backdrop-filter: blur(3px) saturate(150%) brightness(108%); + /* @apply bg-black/[0.002] backdrop-blur-xs; */ + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: + 0 6px 24px rgba(0, 0, 0, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.12); } - [data-theme="icy"] .modal-box { - -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(115%); - backdrop-filter: blur(32px) saturate(180%) brightness(115%); - background-color: rgba(23, 23, 23, 0.18); - border: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: - 0 16px 48px rgba(0, 0, 0, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); + -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(115%); + backdrop-filter: blur(32px) saturate(180%) brightness(115%); + background-color: rgba(23, 23, 23, 0.18); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 16px 48px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); } - [data-theme="icy"] .card, [data-theme="icy"] .btn, [data-theme="icy"] .textarea { - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: - 0 4px 16px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1); } [data-theme="icy"] .btn:hover, [data-theme="icy"] .card:hover { - border-color: rgba(255, 255, 255, 0.2); - box-shadow: - 0 6px 20px rgba(0, 0, 0, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.15); - -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(112%); - backdrop-filter: blur(24px) saturate(160%) brightness(112%); + border-color: rgba(255, 255, 255, 0.2); + box-shadow: + 0 6px 20px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.15); + -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(112%); + backdrop-filter: blur(24px) saturate(160%) brightness(112%); } [data-theme="icy"] select:open { - background-color: #171717b3; - color: white; + background-color: #171717b3; + color: white; } [data-theme="icy"] .portal { - background-color: rgba(54, 54, 54, 0.921); - backdrop-filter: blur(40px) saturate(160%) brightness(112%); - -} \ No newline at end of file + background-color: rgba(54, 54, 54, 0.921); + backdrop-filter: blur(40px) saturate(160%) brightness(112%); +} diff --git a/src/styles/theme/light.css b/src/styles/theme/light.css index e8510b1bf..48dc0b56e 100644 --- a/src/styles/theme/light.css +++ b/src/styles/theme/light.css @@ -1,12 +1,32 @@ @plugin "daisyui/theme" { - name: "light"; - --color-primary: var(--brand-primary); - --color-primary-focus: #4f46e5; - --color-secondary: var(--brand-secondary); - --color-secondary-content: #171717; - --color-primary-content: #ffffff; - --color-base-100: #ffffff; - --color-base-200: #f8fafc; - --color-base-300: #f1f5f9; - --color-base-content: #464647; -} \ No newline at end of file + name: "light"; + color-scheme: "light"; + --color-base-100: #fff; + --color-base-200: #f8fafc; + --color-base-300: #f1f5f9; + --color-base-content: #464647; + --color-primary: var(--brand-primary); + --color-primary-content: #fff; + --color-secondary: var(--brand-secondary); + --color-secondary-content: #171717; + --color-accent: #00d3bb; + --color-accent-content: #084d49; + --color-neutral: #09090b; + --color-neutral-content: #e4e4e7; + --color-info: #00bafe; + --color-info-content: #042e49; + --color-success: #00d390; + --color-success-content: #004c39; + --color-warning: #fcb700; + --color-warning-content: #793205; + --color-error: #ff627d; + --color-error-content: #4d0218; + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; +} diff --git a/src/styles/theme/main.css b/src/styles/theme/main.css index 7e5702f80..361368c0f 100644 --- a/src/styles/theme/main.css +++ b/src/styles/theme/main.css @@ -1,25 +1,22 @@ -@theme { - --color-vip: #6366f1; - --color-vip-content: #ffffff; - --color-brand: var(--brand-primary); - --color-brand-content: #ffffff; -} - :root { - --brand-primary: #536dfe; - --brand-primary-rgb: 83, 109, 254; - --brand-secondary: #7c8df0; - --brand-secondary-rgb: 124, 141, 240; + --brand-primary: #536dfe; + --brand-primary-rgb: 83, 109, 254; + --brand-secondary: #7c8df0; + --brand-secondary-rgb: 124, 141, 240; } [data-theme="light"] { - .nav-btn { - @apply text-gray-500 hover:text-gray-700; - } + .nav-btn { + color: var(--text-secondary); + } + + .nav-btn:hover { + color: var(--text-primary); + } } [data-theme="icy"] { - .text-icy { - @apply text-white/70; - } -} \ No newline at end of file + .text-icy { + @apply text-white/70; + } +} diff --git a/src/styles/theme/zarna.css b/src/styles/theme/zarna.css index 6e42dc9a9..b19ac2c62 100644 --- a/src/styles/theme/zarna.css +++ b/src/styles/theme/zarna.css @@ -1,34 +1,32 @@ @plugin "daisyui/theme" { - name: "zarna"; - default: false; - prefersdark: false; - color-scheme: "dark"; - --color-base-100: oklch(14.076% 0.004 285.822); - --color-base-200: oklch(20.219% 0.004 308.229); - --color-base-300: oklch(23.219% 0.004 308.229); - --color-base-content: oklch(75.687% 0.123 76.89); - --color-primary: oklch(68% 0.162 75.834); - --color-primary-content: oklch(22% 0.05 75.834); - --color-secondary: oklch(27.581% 0.064 261.069); - --color-secondary-content: oklch(85.516% 0.012 261.069); - --color-accent: oklch(36.674% 0.051 338.825); - --color-accent-content: oklch(87.334% 0.01 338.825); - --color-neutral: oklch(24.27% 0.057 59.825); - --color-neutral-content: oklch(93.203% 0.089 90.861); - --color-info: oklch(79.061% 0.121 237.133); - --color-info-content: oklch(15.812% 0.024 237.133); - --color-success: oklch(78.119% 0.192 132.154); - --color-success-content: oklch(15.623% 0.038 132.154); - --color-warning: oklch(86.127% 0.136 102.891); - --color-warning-content: oklch(17.225% 0.027 102.891); - --color-error: oklch(71.753% 0.176 22.568); - --color-error-content: oklch(14.35% 0.035 22.568); - --radius-selector: 1rem; - --radius-field: 0.5rem; - --radius-box: 1rem; - --size-selector: 0.25rem; - --size-field: 0.25rem; - --border: 1px; - --depth: 1; - --noise: 0; -} \ No newline at end of file + name: "zarna"; + color-scheme: "dark"; + --color-base-100: #09090b; + --color-base-200: #171618; + --color-base-300: #1e1d1f; + --color-base-content: #dca54d; + --color-primary: #d08700; + --color-primary-content: #281700; + --color-secondary: #152747; + --color-secondary-content: #cbd0d7; + --color-accent: #513448; + --color-accent-content: #dad3d7; + --color-neutral: #331800; + --color-neutral-content: #ffe7a4; + --color-info: #67c6ff; + --color-info-content: #040e16; + --color-success: #87d03a; + --color-success-content: #061001; + --color-warning: #e2d563; + --color-warning-content: #121003; + --color-error: #ff6f6f; + --color-error-content: #160404; + --radius-selector: 1rem; + --radius-field: 0.5rem; + --radius-box: 1rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; +} From a5b8d9e35dabcc959330a321ed67dc48d0f46e7a Mon Sep 17 00:00:00 2001 From: Shak Date: Fri, 18 Sep 2026 15:14:54 +0330 Subject: [PATCH 02/52] fix(fonts): pin line height so Firefox matches Chrome Vazirmatn ships two disagreeing vertical metric tables: sTypo gives a 1.5625em line box, usWin gives 1.709em. It sets USE_TYPO_METRICS, which Chrome honours and Firefox on Windows ignores, so every line of text was about 9% taller there. Stating line-height explicitly takes the font's tables out of it. The value is Vazirmatn's own sTypo box, so Chrome is unchanged. Adds font-display: swap to all 12 faces. --- src/fonts.css | 14 +++++++- src/styles/typography.css | 67 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 src/styles/typography.css diff --git a/src/fonts.css b/src/fonts.css index 62cbcb00c..6c72e1c90 100644 --- a/src/fonts.css +++ b/src/fonts.css @@ -4,6 +4,7 @@ src: url("./assets/fonts/vazir/Vazirmatn-FD-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; + font-display: swap; } @font-face { @@ -11,6 +12,7 @@ src: url("./assets/fonts/vazir/Vazirmatn-FD-ExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; + font-display: swap; } @font-face { @@ -18,6 +20,7 @@ src: url("./assets/fonts/vazir/Vazirmatn-FD-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; + font-display: swap; } @font-face { @@ -25,6 +28,7 @@ src: url("./assets/fonts/vazir/Vazirmatn-FD-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } @font-face { @@ -32,6 +36,7 @@ src: url("./assets/fonts/vazir/Vazirmatn-FD-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; + font-display: swap; } @font-face { @@ -39,6 +44,7 @@ src: url("./assets/fonts/vazir/Vazirmatn-FD-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; + font-display: swap; } @font-face { @@ -46,6 +52,7 @@ src: url("./assets/fonts/vazir/Vazirmatn-FD-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; + font-display: swap; } @font-face { @@ -53,6 +60,7 @@ src: url("./assets/fonts/vazir/Vazirmatn-FD-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; + font-display: swap; } @font-face { @@ -60,6 +68,7 @@ src: url("./assets/fonts/vazir/Vazirmatn-FD-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; + font-display: swap; } /* Samim Font Family */ @@ -68,6 +77,7 @@ src: url("./assets/fonts/samim/Samim-FD.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } @font-face { @@ -75,6 +85,7 @@ src: url("./assets/fonts/samim/Samim-Medium-FD.woff2") format("woff2"); font-weight: 500; font-style: normal; + font-display: swap; } @font-face { @@ -82,10 +93,11 @@ src: url("./assets/fonts/samim/Samim-Bold-FD.woff2") format("woff2"); font-weight: 700; font-style: normal; + font-display: swap; } body { -moz-font-feature-settings: "ss01"; -webkit-font-feature-settings: "ss01"; font-feature-settings: "ss01"; -} \ No newline at end of file +} diff --git a/src/styles/typography.css b/src/styles/typography.css new file mode 100644 index 000000000..98e4a03e9 --- /dev/null +++ b/src/styles/typography.css @@ -0,0 +1,67 @@ +/* ============================================ + TYPOGRAPHY + + The line height below is not a taste decision, it is a compatibility fix. + + Vazirmatn ships two disagreeing vertical metric tables: + + sTypo / hhea ascent 2100, descent -1100 -> 1.5625em line box + usWin ascent 2200, descent 1300 -> 1.709em line box + + and it sets the USE_TYPO_METRICS flag. Chrome on Windows honours that flag + and lays text out on the 1.5625em box. Firefox on Windows uses the usWin + numbers instead, so with `line-height: normal` every line of text there is + about 9% taller - which is why the UI reads as slightly larger in Firefox + even though the glyphs are identical. + + Stating the line height explicitly takes the font's tables out of the + decision, so both browsers agree. The value is Vazirmatn's own sTypo box, + so Chrome renders exactly as it did before and Firefox comes into line. + ============================================ */ +:root { + --line-height-base: 1.5625; + --line-height-tight: 1.25; + --line-height-snug: 1.4; + --line-height-relaxed: 1.75; +} + +html { + font-size: 16px; + line-height: var(--line-height-base); + /* stop mobile-style text inflation from ever applying */ + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; +} + +body { + font-family: var(--font-sans); + line-height: var(--line-height-base); +} + +/* Headings and controls inherit `normal` from the UA otherwise, which is the + exact case where the two metric tables disagree. */ +h1, +h2, +h3, +h4, +h5, +h6, +button, +input, +select, +textarea { + line-height: var(--line-height-snug); +} + +.leading-tight { + line-height: var(--line-height-tight); +} + +.leading-relaxed { + line-height: var(--line-height-relaxed); +} + +.font-latin { + font-family: var(--font-latin); + font-feature-settings: normal; +} From d76e6a42ede66dc7c4d63f20608c36603dd7220a Mon Sep 17 00:00:00 2001 From: Shak Date: Fri, 18 Sep 2026 15:15:09 +0330 Subject: [PATCH 03/52] feat(styles): add a design token layer Three layers: ramps in theme.css, semantic tokens in tokens/ split by category, and utilities.css as the only vocabulary components may use. Tints are a ramp step rather than an alpha, so they survive browsers without color-mix() and there is one of each strength instead of 14. --color--*: initial removes Tailwind's stock palette, so text-red-500 now generates nothing and is a build error via @apply. --- src/index.css | 396 ++++++------- src/styles/legacy.css | 20 + src/styles/theme-colors.css | 14 +- src/styles/theme.css | 187 +++++++ src/styles/tokens/control.css | 34 ++ src/styles/tokens/disabled.css | 6 + src/styles/tokens/elevation.css | 21 + src/styles/tokens/focus-ring.css | 16 + src/styles/tokens/index.css | 16 + src/styles/tokens/over-image.css | 18 + src/styles/tokens/status.css | 88 +++ src/styles/tokens/surface.css | 39 ++ src/styles/tokens/text.css | 42 ++ src/styles/tokens/z-index.css | 15 + src/styles/utilities.css | 928 +++++++++++++++++++++++++++++++ 15 files changed, 1615 insertions(+), 225 deletions(-) create mode 100644 src/styles/legacy.css create mode 100644 src/styles/theme.css create mode 100644 src/styles/tokens/control.css create mode 100644 src/styles/tokens/disabled.css create mode 100644 src/styles/tokens/elevation.css create mode 100644 src/styles/tokens/focus-ring.css create mode 100644 src/styles/tokens/index.css create mode 100644 src/styles/tokens/over-image.css create mode 100644 src/styles/tokens/status.css create mode 100644 src/styles/tokens/surface.css create mode 100644 src/styles/tokens/text.css create mode 100644 src/styles/tokens/z-index.css create mode 100644 src/styles/utilities.css diff --git a/src/index.css b/src/index.css index 699ff3179..6e990ad93 100644 --- a/src/index.css +++ b/src/index.css @@ -1,399 +1,359 @@ @import "tailwindcss"; @plugin "daisyui"; +@import "./styles/theme.css"; @import "./styles/theme-colors.css"; - -html { - font-size: 16px !important; -} - -html { - font-size: 16px; -} +@import "./styles/tokens/index.css"; +@import "./styles/utilities.css"; +@import "./styles/typography.css"; +@import "./styles/legacy.css"; body { - overflow-x: hidden; - overflow-y: hidden; - font-family: "Vazir", sans-serif; - height: 100vh; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + overflow-x: hidden; + overflow-y: hidden; + height: 100vh; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + background-attachment: fixed; } .custom-select-box hr { - color: #333333; + color: #333333; } @layer base { - body { - direction: rtl; - font-family: "Vazir", sans-serif; - } -} - -.bg-content { - @apply bg-base-200; -} - -.bg-widget { - @apply bg-base-100; -} - -.text-content { - @apply text-base-content/90; -} - -.text-muted { - @apply text-base-content/70; -} - -.border-content { - @apply border-base-300; + body { + direction: rtl; + } } @utility transition-ui { - transition-property: color, background-color, border-color, outline-color, box-shadow, opacity, transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-property: + color, background-color, border-color, outline-color, box-shadow, opacity, + transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } @utility focus-ring { - outline: 2px solid var(--color-primary); - outline-offset: 2px; + outline: 2px solid var(--color-primary); + outline-offset: 2px; } @utility rounded-card { - border-radius: 0.75rem; -} - -.font-latin { - font-family: "Inter", "Segoe UI", system-ui, sans-serif; - -moz-font-feature-settings: normal; - -webkit-font-feature-settings: normal; - font-feature-settings: normal; + border-radius: 0.75rem; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; + -webkit-appearance: none; + margin: 0; } /* Hide the spinner in Firefox */ input[type="number"] { - -moz-appearance: textfield; + -moz-appearance: textfield; } /* Custom styling for color inputs */ /* English text (email) input styles */ input[type="email"] { - direction: ltr; - text-align: left; - font-family: "Inter", sans-serif; - letter-spacing: 0.5px; + direction: ltr; + text-align: left; + font-family: var(--font-latin); + letter-spacing: 0.5px; } input[type="color"] { - -webkit-appearance: none; - border: none; - padding: 0; - width: 32px; - height: 32px; - border-radius: 4px; - cursor: pointer; - background: transparent; + -webkit-appearance: none; + border: none; + padding: 0; + width: 32px; + height: 32px; + border-radius: 4px; + cursor: pointer; + background: transparent; } input[type="color"]::-webkit-color-swatch-wrapper { - padding: 0; - border-radius: 4px; - overflow: hidden; + padding: 0; + border-radius: 4px; + overflow: hidden; } input[type="color"]::-webkit-color-swatch { - border: none; - border-radius: 4px; + border: none; + border-radius: 4px; } input[type="color"]::-moz-color-swatch { - border: none; - border-radius: 4px; + border: none; + border-radius: 4px; } /* Hide scrollbar for webkit browsers */ .hide-scrollbar::-webkit-scrollbar { - display: none; + display: none; } /* Hide scrollbar for Firefox and other browsers */ .hide-scrollbar { - -ms-overflow-style: none; - /* IE and Edge */ - scrollbar-width: none; - /* Firefox */ + -ms-overflow-style: none; + /* IE and Edge */ + scrollbar-width: none; + /* Firefox */ } /* Custom scrollbar styles */ ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 8px; + height: 8px; } ::-webkit-scrollbar-track { - background: transparent; - border-radius: 4px; + background: transparent; + border-radius: 4px; } ::-webkit-scrollbar-thumb { - background: rgba(156, 163, 175, 0.5); - border-radius: 4px; - transition: background-color 0.2s ease; + background: rgba(156, 163, 175, 0.5); + border-radius: 4px; + transition: background-color 0.2s ease; } ::-webkit-scrollbar-thumb:hover { - background: rgba(156, 163, 175, 0.8); + background: rgba(156, 163, 175, 0.8); } /* Firefox scrollbar styles */ * { - scrollbar-width: thin; - scrollbar-color: rgba(156, 163, 175, 0.5) transparent; + scrollbar-width: thin; + scrollbar-color: rgba(156, 163, 175, 0.5) transparent; } - - /* Custom scrollbar styles for info panel */ .scrollbar-thin { - scrollbar-width: thin; + scrollbar-width: thin; } -.scrollbar-thumb-base-300::-webkit-scrollbar { - width: 4px; +.scrollbar-thumb::-webkit-scrollbar { + width: 4px; } -.scrollbar-thumb-base-300::-webkit-scrollbar-track { - background: transparent; +.scrollbar-thumb::-webkit-scrollbar-track { + background: transparent; } -.scrollbar-thumb-base-300::-webkit-scrollbar-thumb { - background: color-mix(in oklab, var(--color-base-content) 20%, transparent); - border-radius: 2px; +.scrollbar-thumb::-webkit-scrollbar-thumb { + background: var(--border-strong); + border-radius: 2px; } -.scrollbar-thumb-base-300::-webkit-scrollbar-thumb:hover { - background: color-mix(in oklab, var(--color-base-content) 30%, transparent); +.scrollbar-thumb::-webkit-scrollbar-thumb:hover { + background: var(--text-faint); } .scrollbar-none { - scrollbar-width: none; - -ms-overflow-style: none; + scrollbar-width: none; + -ms-overflow-style: none; } .scrollbar-none::-webkit-scrollbar { - display: none; + display: none; } html.optimal-mode *, html.optimal-mode *::before, html.optimal-mode *::after { - transition-duration: 0s !important; - transition-delay: 0s !important; + transition-duration: 0s !important; + transition-delay: 0s !important; } html.modal-isActive { - scrollbar-width: none !important; + scrollbar-width: none !important; } html.modal-isActive::-webkit-scrollbar { - display: none !important; + display: none !important; } .disabled-blur-mode { - filter: blur(0px); - transition: filter 300ms ease-in-out; + filter: blur(0px); + transition: filter 300ms ease-in-out; } .blur-mode { - filter: blur(8px); - pointer-events: none; - transition: filter 300ms ease-in; + filter: blur(8px); + pointer-events: none; + transition: filter 300ms ease-in; } img { - /* disable user selection */ - user-select: none; - -webkit-user-drag: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; + /* disable user selection */ + user-select: none; + -webkit-user-drag: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; } /* updater */ /* Vertical Writing Mode */ .writing-mode-vertical { - writing-mode: vertical-rl; - text-orientation: mixed; + writing-mode: vertical-rl; + text-orientation: mixed; } /* Slide in animation from right */ @keyframes slide-in-right { - 0% { - transform: translateX(100%); - opacity: 0; - } + 0% { + transform: translateX(100%); + opacity: 0; + } - 100% { - transform: translateX(0); - opacity: 1; - } + 100% { + transform: translateX(0); + opacity: 1; + } } .animate-slide-in-right { - animation: slide-in-right 0.3s ease-out; -} - -.rounded-widget { - @apply rounded-3xl -} - -.z-popover { - z-index: 9999 !important; + animation: slide-in-right 0.3s ease-out; } @keyframes widget-wiggle { - 0% { - transform: rotate(-0.35deg); - } + 0% { + transform: rotate(-0.35deg); + } - 100% { - transform: rotate(0.35deg); - } + 100% { + transform: rotate(0.35deg); + } } @keyframes widget-wiggle-alt { - 0% { - transform: rotate(0.3deg); - } + 0% { + transform: rotate(0.3deg); + } - 100% { - transform: rotate(-0.3deg); - } + 100% { + transform: rotate(-0.3deg); + } } .animate-widget-wiggle-a { - animation: widget-wiggle 0.46s ease-in-out infinite alternate; - transform-origin: 50% 10%; + animation: widget-wiggle 0.46s ease-in-out infinite alternate; + transform-origin: 50% 10%; } .animate-widget-wiggle-b { - animation: widget-wiggle-alt 0.48s ease-in-out infinite alternate; - animation-delay: -0.15s; - transform-origin: 50% 10%; + animation: widget-wiggle-alt 0.48s ease-in-out infinite alternate; + animation-delay: -0.15s; + transform-origin: 50% 10%; } .animate-widget-wiggle-c { - animation: widget-wiggle 0.52s ease-in-out infinite alternate; - animation-delay: -0.3s; - transform-origin: 50% 10%; + animation: widget-wiggle 0.52s ease-in-out infinite alternate; + animation-delay: -0.3s; + transform-origin: 50% 10%; } .widget-canvas-item-transition { - transition: transform 200ms ease-out, width 200ms ease-out, height 200ms ease-out; + transition: + transform 200ms ease-out, + width 200ms ease-out, + height 200ms ease-out; } @keyframes bounce-slow { + 0%, + 100% { + transform: translateY(-10%); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } - 0%, - 100% { - transform: translateY(-10%); - animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - } - - 50% { - transform: translateY(0); - animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - } + 50% { + transform: translateY(0); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } } .animate-bounce-slow { - animation: bounce-slow 2.8s ease-in-out infinite; + animation: bounce-slow 2.8s ease-in-out infinite; } /* Flip clock leaf animations */ @keyframes flip-fold-down { - 0% { - transform: rotateX(0deg); - } + 0% { + transform: rotateX(0deg); + } - 100% { - transform: rotateX(-90deg); - } + 100% { + transform: rotateX(-90deg); + } } @keyframes flip-drop-down { - 0% { - transform: rotateX(90deg); - } + 0% { + transform: rotateX(90deg); + } - 100% { - transform: rotateX(0deg); - } + 100% { + transform: rotateX(0deg); + } } @keyframes pet-tooltip-in { - from { - opacity: 0; - transform: translateY(10px); - } + from { + opacity: 0; + transform: translateY(10px); + } - to { - opacity: 1; - transform: translateY(0); - } + to { + opacity: 1; + transform: translateY(0); + } } @keyframes pet-tooltip-pulse { + 0%, + 100% { + transform: scale(1); + } - 0%, - 100% { - transform: scale(1); - } - - 50% { - transform: scale(1.05); - } + 50% { + transform: scale(1.05); + } } @keyframes pet-tooltip-wiggle { + 0%, + 100% { + transform: rotate(0deg); + } - 0%, - 100% { - transform: rotate(0deg); - } - - 25% { - transform: rotate(10deg); - } + 25% { + transform: rotate(10deg); + } - 75% { - transform: rotate(-10deg); - } + 75% { + transform: rotate(-10deg); + } } .animate-pet-tooltip-in { - animation: pet-tooltip-in 0.3s ease-out; + animation: pet-tooltip-in 0.3s ease-out; } .animate-pet-tooltip-pulse { - animation: pet-tooltip-pulse 2s ease-in-out infinite; + animation: pet-tooltip-pulse 2s ease-in-out infinite; } .animate-pet-tooltip-wiggle { - animation: pet-tooltip-wiggle 1.5s ease-in-out infinite; + animation: pet-tooltip-wiggle 1.5s ease-in-out infinite; } diff --git a/src/styles/legacy.css b/src/styles/legacy.css new file mode 100644 index 000000000..a709882f8 --- /dev/null +++ b/src/styles/legacy.css @@ -0,0 +1,20 @@ +/* ============================================ + LEGACY BROWSER FALLBACKS + + Chrome 109 is the last version Windows 7, 8 and 8.1 can run, and both + oklch() and color-mix() landed in Chrome 111. A colour those browsers + cannot parse is invalid at computed-value time, so the declaration is + dropped and the element falls back to an inherited colour. + + Every token in styles/theme and styles/tokens is written in a syntax + those browsers understand, so the only gap left is what daisyUI writes + in oklch itself. The modal scrim is the one that matters: without it a + dialog opens with no dimming at all. Restated here in rgb, same colour. + ============================================ */ + +.modal.modal-open, +.modal[open], +.modal:target, +.modal-toggle:checked + .modal { + background-color: var(--surface-overlay); +} diff --git a/src/styles/theme-colors.css b/src/styles/theme-colors.css index e195dcf97..b55415eb6 100644 --- a/src/styles/theme-colors.css +++ b/src/styles/theme-colors.css @@ -1,7 +1,7 @@ -@import './theme/main.css'; -@import './theme/light.css'; -@import './theme/dark.css'; -@import './theme/glass.css'; -@import './theme/icy.css'; -@import './theme/zarna.css'; -@import './theme/esteghlal.css'; \ No newline at end of file +@import "./theme/main.css"; +@import "./theme/light.css"; +@import "./theme/dark.css"; +@import "./theme/glass.css"; +@import "./theme/icy.css"; +@import "./theme/zarna.css"; +@import "./theme/esteghlal.css"; diff --git a/src/styles/theme.css b/src/styles/theme.css new file mode 100644 index 000000000..c37472108 --- /dev/null +++ b/src/styles/theme.css @@ -0,0 +1,187 @@ +/* ============================================ + PRIMITIVES + + The only place a raw colour may be written. Everything else in the + project refers to a step on one of these ramps, never to a literal + and never to an opacity modifier. + + Every value is hex on purpose: oklch() and color-mix() both landed in + Chrome 111, and Chrome 109 is the last version Windows 7/8.1 can run. + A colour those browsers cannot parse is dropped at computed-value time, + which is why text lost its colour there. + ============================================ */ +@theme { + /* -------------------------------------------- + RESTRICTION - removes Tailwind's stock palette so text-red-500, + bg-slate-200 and friends generate no CSS at all. Using one is a + build error, not a review comment. daisyUI's own semantic names + (base-100, primary, error ...) are declared by its plugin and are + deliberately left alone. + -------------------------------------------- */ + --color-red-*: initial; + --color-orange-*: initial; + --color-amber-*: initial; + --color-yellow-*: initial; + --color-lime-*: initial; + --color-green-*: initial; + --color-emerald-*: initial; + --color-teal-*: initial; + --color-cyan-*: initial; + --color-sky-*: initial; + --color-blue-*: initial; + --color-indigo-*: initial; + --color-violet-*: initial; + --color-purple-*: initial; + --color-fuchsia-*: initial; + --color-pink-*: initial; + --color-rose-*: initial; + --color-slate-*: initial; + --color-gray-*: initial; + --color-zinc-*: initial; + --color-stone-*: initial; + + --font-sans: "Vazir", ui-sans-serif, system-ui, sans-serif; + --font-latin: "Segoe UI", ui-sans-serif, system-ui, sans-serif; + + /* -------------------------------------------- + RADIUS + -------------------------------------------- */ + --radius-card: 1rem; + --radius-widget: 1.5rem; + + /* -------------------------------------------- + MOTION + -------------------------------------------- */ + --duration-fast: 150ms; + --duration-base: 200ms; + --duration-slow: 300ms; + --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); + --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); + + /* -------------------------------------------- + SURFACE - Neutral grey. 800 is main's light base-content; 950 is its dark base-100. + -------------------------------------------- */ + --color-surface-0: #ffffff; + --color-surface-50: #f7f7f7; + --color-surface-100: #ededed; + --color-surface-200: #d9d9da; + --color-surface-300: #c0c0c0; + --color-surface-400: #a2a2a3; + --color-surface-500: #8b8b8c; + --color-surface-600: #717172; + --color-surface-700: #585859; + --color-surface-800: #464647; + --color-surface-900: #2d2d2e; + --color-surface-950: #1a1a1a; + + /* -------------------------------------------- + BRAND - Matches --brand-primary exactly at step 500. + -------------------------------------------- */ + --color-brand-50: #dff5ff; + --color-brand-100: #d2eaff; + --color-brand-200: #bbd5ff; + --color-brand-300: #9cbaff; + --color-brand-400: #7a98ff; + --color-brand-500: #536dfe; + --color-brand-600: #4960e4; + --color-brand-700: #374ab7; + --color-brand-800: #27368e; + --color-brand-900: #192368; + --color-brand-950: #0c1244; + + /* -------------------------------------------- + DANGER - Matches main's dark --color-error exactly at step 500. + -------------------------------------------- */ + --color-danger-50: #ffd9d8; + --color-danger-100: #ffcbca; + --color-danger-200: #ffb1b2; + --color-danger-300: #ff8f92; + --color-danger-400: #ff626c; + --color-danger-500: #f7374f; + --color-danger-600: #ca2a3e; + --color-danger-700: #a01d2f; + --color-danger-800: #7a1221; + --color-danger-900: #580814; + --color-danger-950: #370208; + + /* -------------------------------------------- + SUCCESS - Matches main's dark --color-success exactly at step 300. + -------------------------------------------- */ + --color-success-50: #b2ffe3; + --color-success-100: #a1ffd7; + --color-success-200: #82f4c2; + --color-success-300: #34d399; + --color-success-400: #31bd8a; + --color-success-500: #2da276; + --color-success-600: #288460; + --color-success-700: #22674b; + --color-success-800: #1c4c38; + --color-success-900: #153427; + --color-success-950: #0d1e16; + + /* -------------------------------------------- + WARNING - Matches main's dark --color-warning exactly at step 300. + -------------------------------------------- */ + --color-warning-50: #fff18c; + --color-warning-100: #ffe579; + --color-warning-200: #ffd052; + --color-warning-300: #fbbf24; + --color-warning-400: #ca9b28; + --color-warning-500: #ac8529; + --color-warning-600: #8b6c27; + --color-warning-700: #6c5524; + --color-warning-800: #4f401f; + --color-warning-900: #352c1a; + --color-warning-950: #1c1913; + + /* -------------------------------------------- + INFO - Matches main's dark --color-info exactly at step 400. + -------------------------------------------- */ + --color-info-50: #d0fbff; + --color-info-100: #c2f1ff; + --color-info-200: #a9ddff; + --color-info-300: #88c4ff; + --color-info-400: #60a5fa; + --color-info-500: #528dd6; + --color-info-600: #4273af; + --color-info-700: #335a8a; + --color-info-800: #264367; + --color-info-900: #192e48; + --color-info-950: #0d1a2b; + + /* -------------------------------------------- + VIP - The paid-feature accent. Matches --color-vip exactly. + -------------------------------------------- */ + --color-vip-50: #e8f3ff; + --color-vip-100: #dce8ff; + --color-vip-200: #c6d3ff; + --color-vip-300: #aab7ff; + --color-vip-400: #8a96ff; + --color-vip-500: #727afa; + --color-vip-600: #6366f1; + --color-vip-700: #4647b3; + --color-vip-800: #33338a; + --color-vip-900: #222166; + --color-vip-950: #121043; + + /* -------------------------------------------- + CONTENT COLOURS - not chrome. These depict something or are a set a + user picks from, so they are deliberately multi-hue and do not follow + the theme. Defined here because this is the only file allowed to hold + a literal, not because they are part of the ramp system. + -------------------------------------------- */ + --color-medal-gold: #fdc700; + --color-medal-silver: #99a1af; + --color-medal-bronze: #e17100; + + --color-avatar-1: #2b7fff; + --color-avatar-2: #ad46ff; + --color-avatar-3: #f6339a; + --color-avatar-4: #fb2c36; + --color-avatar-5: #ff6900; + --color-avatar-6: #f0b100; + --color-avatar-7: #00c950; + --color-avatar-8: #00bba7; + --color-avatar-9: #00b8db; + --color-avatar-10: #615fff; +} diff --git a/src/styles/tokens/control.css b/src/styles/tokens/control.css new file mode 100644 index 000000000..992585864 --- /dev/null +++ b/src/styles/tokens/control.css @@ -0,0 +1,34 @@ +/* ============================================ + CONTROL - filled interactive surfaces (buttons, toggles, knobs). + A solid fill, as opposed to the tinted surfaces in status.css. + ============================================ */ +:root { + --control-danger-bg: var(--color-danger-500); + --control-danger-bg-hover: var(--color-danger-600); + --control-success-bg: var(--color-success-500); + --control-success-bg-hover: var(--color-success-600); + --control-warning-bg: var(--color-warning-500); + --control-warning-bg-hover: var(--color-warning-600); + --control-info-bg: var(--color-info-500); + --control-info-bg-hover: var(--color-info-600); + --control-brand-bg: var(--color-brand-500); + --control-brand-bg-hover: var(--color-brand-600); + --control-vip-bg: var(--color-vip-500); + --control-vip-bg-hover: var(--color-vip-600); + --control-knob: var(--color-surface-0); + --control-track: var(--color-surface-200); +} + +[data-theme="dark"], +[data-theme="glass"], +[data-theme="icy"], +[data-theme="zarna"], +[data-theme="esteghlal"] { + --control-danger-bg-hover: var(--color-danger-400); + --control-success-bg-hover: var(--color-success-400); + --control-warning-bg-hover: var(--color-warning-400); + --control-info-bg-hover: var(--color-info-400); + --control-brand-bg-hover: var(--color-brand-400); + --control-vip-bg-hover: var(--color-vip-400); + --control-track: var(--color-surface-700); +} diff --git a/src/styles/tokens/disabled.css b/src/styles/tokens/disabled.css new file mode 100644 index 000000000..31926c789 --- /dev/null +++ b/src/styles/tokens/disabled.css @@ -0,0 +1,6 @@ +/* ============================================ + DISABLED - one opacity for the whole project. + ============================================ */ +:root { + --disabled-opacity: 0.5; +} diff --git a/src/styles/tokens/elevation.css b/src/styles/tokens/elevation.css new file mode 100644 index 000000000..af3018f54 --- /dev/null +++ b/src/styles/tokens/elevation.css @@ -0,0 +1,21 @@ +/* ============================================ + ELEVATION - shadow ladder. Dark themes need a heavier shadow to read + at all, which is why the same names carry different values there. + ============================================ */ +:root { + --elevation-sm: 0 1px 2px 0 rgba(23, 23, 23, 0.06); + --elevation-md: 0 2px 8px 0 rgba(23, 23, 23, 0.09); + --elevation-lg: 0 8px 24px -4px rgba(23, 23, 23, 0.13); + --elevation-xl: 0 16px 40px -8px rgba(23, 23, 23, 0.17); +} + +[data-theme="dark"], +[data-theme="glass"], +[data-theme="icy"], +[data-theme="zarna"], +[data-theme="esteghlal"] { + --elevation-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.32); + --elevation-md: 0 2px 8px 0 rgba(0, 0, 0, 0.4); + --elevation-lg: 0 8px 24px -4px rgba(0, 0, 0, 0.48); + --elevation-xl: 0 16px 40px -8px rgba(0, 0, 0, 0.56); +} diff --git a/src/styles/tokens/focus-ring.css b/src/styles/tokens/focus-ring.css new file mode 100644 index 000000000..e540125af --- /dev/null +++ b/src/styles/tokens/focus-ring.css @@ -0,0 +1,16 @@ +/* ============================================ + FOCUS RING + ============================================ */ +:root { + --focus-ring-color: var(--color-brand-500); + --focus-ring-width: 2px; + --focus-ring-offset: 2px; +} + +[data-theme="dark"], +[data-theme="glass"], +[data-theme="icy"], +[data-theme="zarna"], +[data-theme="esteghlal"] { + --focus-ring-color: var(--color-brand-400); +} diff --git a/src/styles/tokens/index.css b/src/styles/tokens/index.css new file mode 100644 index 000000000..2ff8c2a93 --- /dev/null +++ b/src/styles/tokens/index.css @@ -0,0 +1,16 @@ +/* ============================================ + TOKENS - semantic layer, split by category. + + Each file holds the light values in :root and the dark theme values + right beside them, so a pair is read in one place. Every value points + at a ramp step from theme.css. No literals, no opacity modifiers. + ============================================ */ +@import "./text.css"; +@import "./surface.css"; +@import "./status.css"; +@import "./control.css"; +@import "./focus-ring.css"; +@import "./elevation.css"; +@import "./disabled.css"; +@import "./over-image.css"; +@import "./z-index.css"; diff --git a/src/styles/tokens/over-image.css b/src/styles/tokens/over-image.css new file mode 100644 index 000000000..deaaa4c33 --- /dev/null +++ b/src/styles/tokens/over-image.css @@ -0,0 +1,18 @@ +/* ============================================ + OVER-IMAGE - chrome drawn on a user wallpaper or on artwork. + Theme independent by definition: the theme says nothing about what is + behind it, so these do not change between themes. + ============================================ */ +:root { + --over-image-text: #ffffff; + --over-image-text-muted: rgba(255, 255, 255, 0.8); + --over-image-surface: rgba(255, 255, 255, 0.2); + --over-image-border: rgba(255, 255, 255, 0.3); + --over-image-scrim-strong: rgba(0, 0, 0, 0.8); + --over-image-scrim-mid: rgba(0, 0, 0, 0.4); + --over-image-scrim-none: rgba(0, 0, 0, 0); + --over-image-sheen: rgba(255, 255, 255, 0.05); + --over-image-scrim-soft: rgba(0, 0, 0, 0.2); + --over-image-scrim: rgba(0, 0, 0, 0.6); + --over-image-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); +} diff --git a/src/styles/tokens/status.css b/src/styles/tokens/status.css new file mode 100644 index 000000000..3809e08ea --- /dev/null +++ b/src/styles/tokens/status.css @@ -0,0 +1,88 @@ +/* ============================================ + STATUS - danger / success / warning / info / brand / vip + Badges, alerts, toasts, chips, inline messages. + + These replace every bg-error/10 style tint in the project. A tint is a + ramp step now, not an alpha, so it renders identically on every browser + and there is exactly one of each strength. A dark theme flips to the far + end of the same ramp rather than reusing a light value at low opacity. + ============================================ */ +:root { + --status-danger-bg: var(--color-danger-50); + --status-danger-text: var(--color-danger-700); + --status-danger-border: var(--color-danger-200); + --status-danger-border-strong: var(--color-danger-400); + --status-danger-bg-hover: var(--color-danger-100); + + --status-success-bg: var(--color-success-50); + --status-success-text: var(--color-success-700); + --status-success-border: var(--color-success-200); + --status-success-border-strong: var(--color-success-400); + --status-success-bg-hover: var(--color-success-100); + + --status-warning-bg: var(--color-warning-50); + --status-warning-text: var(--color-warning-700); + --status-warning-border: var(--color-warning-200); + --status-warning-border-strong: var(--color-warning-400); + --status-warning-bg-hover: var(--color-warning-100); + + --status-info-bg: var(--color-info-50); + --status-info-text: var(--color-info-700); + --status-info-border: var(--color-info-200); + --status-info-border-strong: var(--color-info-400); + --status-info-bg-hover: var(--color-info-100); + + --status-brand-bg: var(--color-brand-50); + --status-brand-text: var(--color-brand-700); + --status-brand-border: var(--color-brand-200); + --status-brand-border-strong: var(--color-brand-400); + --status-brand-bg-hover: var(--color-brand-100); + + --status-vip-bg: var(--color-vip-50); + --status-vip-text: var(--color-vip-700); + --status-vip-border: var(--color-vip-200); + --status-vip-border-strong: var(--color-vip-400); + --status-vip-bg-hover: var(--color-vip-100); +} + +[data-theme="dark"], +[data-theme="glass"], +[data-theme="icy"], +[data-theme="zarna"], +[data-theme="esteghlal"] { + --status-danger-bg: var(--color-danger-950); + --status-danger-text: var(--color-danger-200); + --status-danger-border: var(--color-danger-800); + --status-danger-border-strong: var(--color-danger-600); + --status-danger-bg-hover: var(--color-danger-900); + + --status-success-bg: var(--color-success-950); + --status-success-text: var(--color-success-200); + --status-success-border: var(--color-success-800); + --status-success-border-strong: var(--color-success-600); + --status-success-bg-hover: var(--color-success-900); + + --status-warning-bg: var(--color-warning-950); + --status-warning-text: var(--color-warning-200); + --status-warning-border: var(--color-warning-800); + --status-warning-border-strong: var(--color-warning-600); + --status-warning-bg-hover: var(--color-warning-900); + + --status-info-bg: var(--color-info-950); + --status-info-text: var(--color-info-200); + --status-info-border: var(--color-info-800); + --status-info-border-strong: var(--color-info-600); + --status-info-bg-hover: var(--color-info-900); + + --status-brand-bg: var(--color-brand-950); + --status-brand-text: var(--color-brand-200); + --status-brand-border: var(--color-brand-800); + --status-brand-border-strong: var(--color-brand-600); + --status-brand-bg-hover: var(--color-brand-900); + + --status-vip-bg: var(--color-vip-950); + --status-vip-text: var(--color-vip-200); + --status-vip-border: var(--color-vip-800); + --status-vip-border-strong: var(--color-vip-600); + --status-vip-bg-hover: var(--color-vip-900); +} diff --git a/src/styles/tokens/surface.css b/src/styles/tokens/surface.css new file mode 100644 index 000000000..bc2c67991 --- /dev/null +++ b/src/styles/tokens/surface.css @@ -0,0 +1,39 @@ +/* ============================================ + SURFACE & BORDER + Backgrounds and borders not tied to one component. + ============================================ */ +:root { + --surface-widget: var(--color-surface-50); + --surface-card: var(--color-surface-0); + --surface-elevated: var(--color-surface-0); + --surface-raised: var(--color-surface-100); + --surface-hover: var(--color-surface-100); + --surface-active: var(--color-surface-200); + --surface-overlay: rgba(0, 0, 0, 0.4); + --surface-brand-subtle: var(--color-brand-50); + + --border-default: var(--color-surface-200); + --border-subtle: var(--color-surface-100); + --border-strong: var(--color-surface-400); + --border-brand: var(--color-brand-500); +} + +[data-theme="dark"], +[data-theme="glass"], +[data-theme="icy"], +[data-theme="zarna"], +[data-theme="esteghlal"] { + --surface-widget: var(--color-surface-950); + --surface-card: var(--color-surface-900); + --surface-elevated: var(--color-surface-800); + --surface-raised: var(--color-surface-800); + --surface-hover: var(--color-surface-800); + --surface-active: var(--color-surface-700); + --surface-overlay: rgba(0, 0, 0, 0.6); + --surface-brand-subtle: var(--color-brand-900); + + --border-default: var(--color-surface-700); + --border-subtle: var(--color-surface-800); + --border-strong: var(--color-surface-500); + --border-brand: var(--color-brand-400); +} diff --git a/src/styles/tokens/text.css b/src/styles/tokens/text.css new file mode 100644 index 000000000..60e946282 --- /dev/null +++ b/src/styles/tokens/text.css @@ -0,0 +1,42 @@ +/* ============================================ + TEXT + ============================================ */ +:root { + --text-primary: var(--color-surface-800); + --text-secondary: var(--color-surface-600); + --text-muted: var(--color-surface-500); + --text-faint: var(--color-surface-400); + + --text-brand: var(--color-brand-600); + --text-danger: var(--color-danger-600); + --text-success: var(--color-success-600); + --text-warning: var(--color-warning-600); + --text-info: var(--color-info-600); + --text-vip: var(--color-vip-600); + + --text-on-brand: var(--color-surface-0); + --text-on-danger: var(--color-surface-0); + --text-on-vip: var(--color-surface-0); +} + +[data-theme="dark"], +[data-theme="glass"], +[data-theme="icy"], +[data-theme="zarna"], +[data-theme="esteghlal"] { + --text-primary: var(--color-surface-50); + --text-secondary: var(--color-surface-300); + --text-muted: var(--color-surface-400); + --text-faint: var(--color-surface-500); + + --text-brand: var(--color-brand-300); + --text-danger: var(--color-danger-300); + --text-success: var(--color-success-300); + --text-warning: var(--color-warning-300); + --text-info: var(--color-info-300); + --text-vip: var(--color-vip-300); + + --text-on-brand: var(--color-surface-0); + --text-on-danger: var(--color-surface-0); + --text-on-vip: var(--color-surface-0); +} diff --git a/src/styles/tokens/z-index.css b/src/styles/tokens/z-index.css new file mode 100644 index 000000000..5729db5f8 --- /dev/null +++ b/src/styles/tokens/z-index.css @@ -0,0 +1,15 @@ +/* ============================================ + Z-INDEX - one ladder, so stacking is decided here and nowhere else. + ============================================ */ +:root { + --z-base: 0; + --z-raised: 10; + --z-sticky: 20; + --z-drag: 30; + --z-nav: 40; + --z-backdrop: 50; + --z-sheet: 60; + --z-modal: 70; + --z-popover: 80; + --z-toast: 90; +} diff --git a/src/styles/utilities.css b/src/styles/utilities.css new file mode 100644 index 000000000..4ce76c82b --- /dev/null +++ b/src/styles/utilities.css @@ -0,0 +1,928 @@ +/* ============================================ + UTILITIES - the only vocabulary components are allowed to use. + + Every class here reads a semantic token. Nothing here writes a colour + and nothing here takes an opacity modifier, so a strength is chosen by + picking a name, not by inventing a number at the call site. + ============================================ */ + +/* -------------------------------------------- + TEXT + -------------------------------------------- */ +@utility text-content { + color: var(--text-primary); +} + +@utility text-muted { + color: var(--text-secondary); +} + +@utility text-subtle { + color: var(--text-muted); +} + +@utility text-faint { + color: var(--text-faint); +} + +@utility text-brand { + color: var(--text-brand); +} + +@utility text-danger { + color: var(--text-danger); +} + +@utility text-success { + color: var(--text-success); +} + +@utility text-warning { + color: var(--text-warning); +} + +@utility text-info { + color: var(--text-info); +} + +@utility text-vip { + color: var(--text-vip); +} + +@utility text-on-brand { + color: var(--text-on-brand); +} + +@utility text-on-danger { + color: var(--text-on-danger); +} + +@utility text-on-vip { + color: var(--text-on-vip); +} + +/* -------------------------------------------- + SURFACE + -------------------------------------------- */ +@utility bg-widget { + background-color: var(--surface-widget); +} + +@utility bg-content { + background-color: var(--surface-card); +} + +@utility bg-elevated { + background-color: var(--surface-elevated); +} + +@utility bg-raised { + background-color: var(--surface-raised); +} + +@utility bg-hovered { + background-color: var(--surface-hover); +} + +@utility bg-overlay { + background-color: var(--surface-overlay); +} + +@utility bg-brand-subtle { + background-color: var(--surface-brand-subtle); +} + +/* -------------------------------------------- + BORDER + -------------------------------------------- */ +@utility border-content { + border-color: var(--border-default); +} + +@utility border-subtle { + border-color: var(--border-subtle); +} + +@utility border-strong { + border-color: var(--border-strong); +} + +@utility border-brand-subtle { + border-color: var(--status-brand-border); +} + +@utility border-brand-solid { + border-color: var(--border-brand); +} + +@utility border-danger-subtle { + border-color: var(--status-danger-border); +} + +@utility border-success-subtle { + border-color: var(--status-success-border); +} + +@utility border-warning-subtle { + border-color: var(--status-warning-border); +} + +@utility border-info-subtle { + border-color: var(--status-info-border); +} + +@utility border-vip-subtle { + border-color: var(--status-vip-border); +} + +/* -------------------------------------------- + STATUS SURFACES - three strengths per kind, and nothing between them. + subtle = a tinted panel, muted = its hover, solid = a filled control. + -------------------------------------------- */ + +@utility ring-offset-widget { + --tw-ring-offset-color: var(--surface-widget); +} + +@utility placeholder-muted { + &::placeholder { + color: var(--text-muted); + } +} + +@utility bg-strong { + background-color: var(--surface-active); +} + +@utility ring-subtle { + --tw-ring-color: var(--border-subtle); +} + +@utility from-widget { + --tw-gradient-from: var(--surface-widget); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility from-content { + --tw-gradient-from: var(--surface-card); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility from-raised { + --tw-gradient-from: var(--surface-raised); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility to-widget { + --tw-gradient-to: var(--surface-widget); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility to-content { + --tw-gradient-to: var(--surface-card); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility to-raised { + --tw-gradient-to: var(--surface-raised); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility via-raised { + --tw-gradient-via: var(--surface-raised); + --tw-gradient-via-stops: + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-via) var(--tw-gradient-via-position), + var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); +} + +@utility bg-danger-subtle { + background-color: var(--status-danger-bg); +} + +@utility bg-danger-muted { + background-color: var(--status-danger-bg-hover); +} + +@utility bg-danger-solid { + background-color: var(--control-danger-bg); + color: #ffffff; +} + +@utility bg-danger-solid-hover { + background-color: var(--control-danger-bg-hover); +} + +@utility border-danger-strong { + border-color: var(--status-danger-border-strong); +} + +@utility ring-danger-subtle { + --tw-ring-color: var(--status-danger-border); +} + +@utility outline-danger-subtle { + outline-color: var(--status-danger-border); +} + +@utility from-danger-subtle { + --tw-gradient-from: var(--status-danger-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility to-danger-subtle { + --tw-gradient-to: var(--status-danger-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility via-danger-subtle { + --tw-gradient-via: var(--status-danger-bg); + --tw-gradient-via-stops: + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-via) var(--tw-gradient-via-position), + var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); +} + +@utility shadow-danger { + --tw-shadow-color: var(--status-danger-border-strong); + box-shadow: + var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), + var(--tw-ring-shadow), var(--tw-shadow); +} + +@utility bg-success-subtle { + background-color: var(--status-success-bg); +} + +@utility bg-success-muted { + background-color: var(--status-success-bg-hover); +} + +@utility bg-success-solid { + background-color: var(--control-success-bg); + color: #ffffff; +} + +@utility bg-success-solid-hover { + background-color: var(--control-success-bg-hover); +} + +@utility border-success-strong { + border-color: var(--status-success-border-strong); +} + +@utility ring-success-subtle { + --tw-ring-color: var(--status-success-border); +} + +@utility outline-success-subtle { + outline-color: var(--status-success-border); +} + +@utility from-success-subtle { + --tw-gradient-from: var(--status-success-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility to-success-subtle { + --tw-gradient-to: var(--status-success-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility via-success-subtle { + --tw-gradient-via: var(--status-success-bg); + --tw-gradient-via-stops: + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-via) var(--tw-gradient-via-position), + var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); +} + +@utility shadow-success { + --tw-shadow-color: var(--status-success-border-strong); + box-shadow: + var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), + var(--tw-ring-shadow), var(--tw-shadow); +} + +@utility bg-warning-subtle { + background-color: var(--status-warning-bg); +} + +@utility bg-warning-muted { + background-color: var(--status-warning-bg-hover); +} + +@utility bg-warning-solid { + background-color: var(--control-warning-bg); + color: #ffffff; +} + +@utility bg-warning-solid-hover { + background-color: var(--control-warning-bg-hover); +} + +@utility border-warning-strong { + border-color: var(--status-warning-border-strong); +} + +@utility ring-warning-subtle { + --tw-ring-color: var(--status-warning-border); +} + +@utility outline-warning-subtle { + outline-color: var(--status-warning-border); +} + +@utility from-warning-subtle { + --tw-gradient-from: var(--status-warning-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility to-warning-subtle { + --tw-gradient-to: var(--status-warning-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility via-warning-subtle { + --tw-gradient-via: var(--status-warning-bg); + --tw-gradient-via-stops: + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-via) var(--tw-gradient-via-position), + var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); +} + +@utility shadow-warning { + --tw-shadow-color: var(--status-warning-border-strong); + box-shadow: + var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), + var(--tw-ring-shadow), var(--tw-shadow); +} + +@utility bg-info-subtle { + background-color: var(--status-info-bg); +} + +@utility bg-info-muted { + background-color: var(--status-info-bg-hover); +} + +@utility bg-info-solid { + background-color: var(--control-info-bg); + color: #ffffff; +} + +@utility bg-info-solid-hover { + background-color: var(--control-info-bg-hover); +} + +@utility border-info-strong { + border-color: var(--status-info-border-strong); +} + +@utility ring-info-subtle { + --tw-ring-color: var(--status-info-border); +} + +@utility outline-info-subtle { + outline-color: var(--status-info-border); +} + +@utility from-info-subtle { + --tw-gradient-from: var(--status-info-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility to-info-subtle { + --tw-gradient-to: var(--status-info-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility via-info-subtle { + --tw-gradient-via: var(--status-info-bg); + --tw-gradient-via-stops: + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-via) var(--tw-gradient-via-position), + var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); +} + +@utility shadow-info { + --tw-shadow-color: var(--status-info-border-strong); + box-shadow: + var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), + var(--tw-ring-shadow), var(--tw-shadow); +} + +@utility bg-brand-subtle { + background-color: var(--status-brand-bg); +} + +@utility bg-brand-muted { + background-color: var(--status-brand-bg-hover); +} + +@utility bg-brand-solid { + background-color: var(--control-brand-bg); + color: #ffffff; +} + +@utility bg-brand-solid-hover { + background-color: var(--control-brand-bg-hover); +} + +@utility border-brand-strong { + border-color: var(--status-brand-border-strong); +} + +@utility ring-brand-subtle { + --tw-ring-color: var(--status-brand-border); +} + +@utility outline-brand-subtle { + outline-color: var(--status-brand-border); +} + +@utility from-brand-subtle { + --tw-gradient-from: var(--status-brand-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility to-brand-subtle { + --tw-gradient-to: var(--status-brand-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility via-brand-subtle { + --tw-gradient-via: var(--status-brand-bg); + --tw-gradient-via-stops: + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-via) var(--tw-gradient-via-position), + var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); +} + +@utility shadow-brand { + --tw-shadow-color: var(--status-brand-border-strong); + box-shadow: + var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), + var(--tw-ring-shadow), var(--tw-shadow); +} + +@utility bg-vip-subtle { + background-color: var(--status-vip-bg); +} + +@utility bg-vip-muted { + background-color: var(--status-vip-bg-hover); +} + +@utility bg-vip-solid { + background-color: var(--control-vip-bg); + color: #ffffff; +} + +@utility bg-vip-solid-hover { + background-color: var(--control-vip-bg-hover); +} + +@utility border-vip-strong { + border-color: var(--status-vip-border-strong); +} + +@utility ring-vip-subtle { + --tw-ring-color: var(--status-vip-border); +} + +@utility outline-vip-subtle { + outline-color: var(--status-vip-border); +} + +@utility from-vip-subtle { + --tw-gradient-from: var(--status-vip-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility to-vip-subtle { + --tw-gradient-to: var(--status-vip-bg); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility via-vip-subtle { + --tw-gradient-via: var(--status-vip-bg); + --tw-gradient-via-stops: + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-via) var(--tw-gradient-via-position), + var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); +} + +@utility shadow-vip { + --tw-shadow-color: var(--status-vip-border-strong); + box-shadow: + var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), + var(--tw-ring-shadow), var(--tw-shadow); +} + +/* -------------------------------------------- + NEUTRAL SURFACES - the same three strengths, drawn from the surface ramp. + -------------------------------------------- */ +@utility bg-neutral-subtle { + background-color: var(--surface-raised); +} + +@utility bg-neutral-muted { + background-color: var(--surface-hover); +} + +@utility ring-content { + --tw-ring-color: var(--border-default); +} + +@utility ring-strong { + --tw-ring-color: var(--border-strong); +} + +@utility outline-content { + outline-color: var(--border-default); +} + +/* -------------------------------------------- + STATUS - one bg / text / border set per kind, plus its hover. + -------------------------------------------- */ +@utility status-danger { + background-color: var(--status-danger-bg); + color: var(--status-danger-text); + border-color: var(--status-danger-border); +} + +@utility status-danger-hover { + background-color: var(--status-danger-bg-hover); +} + +@utility status-success { + background-color: var(--status-success-bg); + color: var(--status-success-text); + border-color: var(--status-success-border); +} + +@utility status-success-hover { + background-color: var(--status-success-bg-hover); +} + +@utility status-warning { + background-color: var(--status-warning-bg); + color: var(--status-warning-text); + border-color: var(--status-warning-border); +} + +@utility status-warning-hover { + background-color: var(--status-warning-bg-hover); +} + +@utility status-info { + background-color: var(--status-info-bg); + color: var(--status-info-text); + border-color: var(--status-info-border); +} + +@utility status-info-hover { + background-color: var(--status-info-bg-hover); +} + +@utility status-brand { + background-color: var(--status-brand-bg); + color: var(--status-brand-text); + border-color: var(--status-brand-border); +} + +@utility status-brand-hover { + background-color: var(--status-brand-bg-hover); +} + +@utility status-vip { + background-color: var(--status-vip-bg); + color: var(--status-vip-text); + border-color: var(--status-vip-border); +} + +@utility status-vip-hover { + background-color: var(--status-vip-bg-hover); +} + +/* -------------------------------------------- + CONTROL - filled interactive surfaces. + -------------------------------------------- */ +@utility control-brand { + background-color: var(--control-brand-bg); + color: var(--text-on-brand); +} + +@utility control-brand-hover { + background-color: var(--control-brand-bg-hover); +} + +@utility control-danger { + background-color: var(--control-danger-bg); + color: var(--text-on-danger); +} + +@utility control-danger-hover { + background-color: var(--control-danger-bg-hover); +} + +@utility control-vip { + background-color: var(--control-vip-bg); + color: var(--text-on-vip); +} + +@utility control-vip-hover { + background-color: var(--control-vip-bg-hover); +} + +@utility bg-knob { + background-color: var(--control-knob); +} + +@utility bg-track { + background-color: var(--control-track); +} + +/* -------------------------------------------- + OVER-IMAGE + -------------------------------------------- */ +@utility text-over-image { + color: var(--over-image-text); +} + +@utility text-over-image-muted { + color: var(--over-image-text-muted); +} + +@utility bg-over-image { + background-color: var(--over-image-surface); +} + +@utility from-over-image-scrim-strong { + --tw-gradient-from: var(--over-image-scrim-strong); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility to-over-image-scrim-none { + --tw-gradient-to: var(--over-image-scrim-none); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility to-over-image-sheen { + --tw-gradient-to: var(--over-image-sheen); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); +} + +@utility via-over-image-scrim-mid { + --tw-gradient-via: var(--over-image-scrim-mid); + --tw-gradient-via-stops: + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-via) var(--tw-gradient-via-position), + var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); +} + +@utility bg-over-image-scrim-soft { + background-color: var(--over-image-scrim-soft); +} + +@utility bg-over-image-scrim { + background-color: var(--over-image-scrim); +} + +@utility border-over-image { + border-color: var(--over-image-border); +} + +@utility shadow-over-image { + filter: drop-shadow(var(--over-image-shadow)); +} + +/* -------------------------------------------- + ELEVATION + -------------------------------------------- */ +@utility elevation-sm { + box-shadow: var(--elevation-sm); +} + +@utility elevation-md { + box-shadow: var(--elevation-md); +} + +@utility elevation-lg { + box-shadow: var(--elevation-lg); +} + +@utility elevation-xl { + box-shadow: var(--elevation-xl); +} + +/* -------------------------------------------- + SHAPE, MOTION, STATE + -------------------------------------------- */ +@utility rounded-card { + border-radius: var(--radius-card); +} + +@utility rounded-widget { + border-radius: var(--radius-widget); +} + +@utility transition-ui { + transition-property: + color, background-color, border-color, outline-color, box-shadow, opacity, + transform; + transition-timing-function: var(--ease-standard); + transition-duration: var(--duration-fast); +} + +@utility focus-ring { + outline: var(--focus-ring-width) solid var(--focus-ring-color); + outline-offset: var(--focus-ring-offset); +} + +@utility is-disabled { + opacity: var(--disabled-opacity); + pointer-events: none; +} + +/* -------------------------------------------- + Z-INDEX + -------------------------------------------- */ +@utility z-raised { + z-index: var(--z-raised); +} + +@utility z-sticky { + z-index: var(--z-sticky); +} + +@utility z-drag { + z-index: var(--z-drag); +} + +@utility z-nav { + z-index: var(--z-nav); +} + +@utility z-backdrop { + z-index: var(--z-backdrop); +} + +@utility z-sheet { + z-index: var(--z-sheet); +} + +@utility z-modal { + z-index: var(--z-modal); +} + +@utility z-toast { + z-index: var(--z-toast); +} + +.z-popover { + z-index: var(--z-popover) !important; +} + +/* -------------------------------------------- + SOLID ACCENT FILLS - the bare name means full strength. + -------------------------------------------- */ +@utility bg-brand { + background-color: var(--control-brand-bg); + color: var(--text-on-brand); +} + +@utility bg-vip { + background-color: var(--control-vip-bg); + color: var(--text-on-vip); +} + +@utility text-brand-content { + color: var(--text-on-brand); +} + +@utility text-vip-content { + color: var(--text-on-vip); +} From 8e45bb518543d7c6025a96c2096cd6e04f8dd80f Mon Sep 17 00:00:00 2001 From: Shak Date: Fri, 18 Sep 2026 15:15:23 +0330 Subject: [PATCH 04/52] refactor: move the app onto the design tokens Replaces every palette class, opacity modifier and raw daisyUI base-* class with a named token: 26, 1007 and 841 sites respectively, all now zero. Colours that genuinely depict something rather than being chrome (bookmark avatars, medals) are named once in theme.css. --- src/common/constants/moods.ts | 8 +- src/common/toast.tsx | 32 ++--- src/components/auth/auth-required-modal.tsx | 2 +- src/components/auth/require-auth.tsx | 2 +- .../gallery/gallery-asset-purchase-modal.tsx | 4 +- .../gallery/gallery-bookmark-icon-item.tsx | 14 +-- src/components/gallery/gallery-photo-item.tsx | 16 +-- src/components/ui/avatar/avatar.variants.ts | 2 +- src/components/ui/badge/badge.tsx | 2 +- src/components/ui/badge/vip-badge.variants.ts | 6 +- .../ui/bottom-sheet/bottom-sheet.tsx | 17 ++- src/components/ui/button/button.variants.ts | 32 ++--- src/components/ui/chip/chip.variants.ts | 8 +- .../ui/color-picker/color-picker.tsx | 2 +- src/components/ui/date-picker/date-picker.tsx | 20 ++-- src/components/ui/dropdown/dropdown-item.tsx | 2 +- .../ui/dropdown/dropdown-item.variants.ts | 6 +- src/components/ui/dropdown/dropdown.tsx | 4 +- .../ui/filter-tooltip/filter-tooltip.tsx | 8 +- src/components/ui/input/input.variants.ts | 4 +- .../ui/item-selector/item-selector.tsx | 6 +- .../ui/modal/confirmation-modal.tsx | 2 +- .../ui/modal/confirmation-modal.variants.ts | 8 +- src/components/ui/modal/modal.tsx | 2 +- .../offline-indicator/offline-indicator.tsx | 2 +- .../ui/popover-menu/popover-menu-item.tsx | 2 +- .../ui/popover-menu/popover-menu.variants.ts | 8 +- src/components/ui/select/select.tsx | 7 +- src/components/ui/tabs/tabs.tsx | 4 +- src/components/ui/tabs/tabs.variants.ts | 8 +- src/components/ui/toggle/toggle.variants.ts | 2 +- src/components/ui/tooltip/tooltip.tsx | 8 +- src/components/update-release-notes-modal.tsx | 20 ++-- src/components/user-coin.tsx | 8 +- src/layouts/bookmark/bookmark-grid.tsx | 12 +- .../components/bookmark-empty-slot.tsx | 4 +- .../bookmark/components/bookmark-folder.tsx | 4 +- .../components/bookmark-icon.picker.tsx | 8 +- .../bookmark/components/bookmark-item.tsx | 6 +- .../components/bookmark-suggestions.tsx | 8 +- .../components/bookmark/bookmark-icon.tsx | 22 ++-- .../bookmark/components/folder-path.tsx | 2 +- .../components/modal/add-bookmark.modal.tsx | 4 +- .../components/modal/advanced.modal.tsx | 8 +- .../modal/bookmark-folder.modal.tsx | 2 +- .../components/modal/edit-bookmark.modal.tsx | 2 +- .../modal/import-browser-bookmarks.modal.tsx | 12 +- src/layouts/explorer/components/category.tsx | 8 +- .../explorer/components/content-banner.tsx | 2 +- .../explorer/components/content-site.tsx | 8 +- src/layouts/explorer/explorer.tsx | 10 +- src/layouts/friends/components/activities.tsx | 6 +- .../activity-card/activity-card.tsx | 18 +-- .../activity-card/empty-activity-card.tsx | 16 +-- .../manage-activity.bottom-sheet.tsx | 20 ++-- .../components/add-friend.bottom-sheet.tsx | 8 +- .../buttons/friend-requests.button.tsx | 6 +- .../friends/components/empty-list.friend.tsx | 4 +- .../friend-item/friend-item.skeleton.tsx | 2 +- .../components/friends-direct-view.tsx | 30 ++--- .../friends/components/friends-list.tsx | 6 +- .../components/select-friend.layout.tsx | 10 +- src/layouts/friends/friends.tsx | 2 +- .../components/coin-package-card.tsx | 22 ++-- .../coin-package-purchase-modal.tsx | 10 +- src/layouts/market/market-coins/index.tsx | 12 +- .../components/market-item-card.tsx | 12 +- .../components/market-item-purchase-modal.tsx | 4 +- .../other-items/components/render-preview.tsx | 6 +- src/layouts/market/other-items/index.tsx | 24 ++-- .../card/mini-app-card-skeleton.tsx | 6 +- .../components/card/mini-app-card.tsx | 8 +- .../components/header/runner.header.tsx | 22 ++-- src/layouts/mini-apps/mini-apps.layout.tsx | 72 ++++++------ .../mini-apps/states/mini-app-error.tsx | 4 +- .../mini-apps/states/mini-app-loading.tsx | 2 +- .../mini-apps/states/mini-app.auth.tsx | 4 +- .../navbar/components/blur-mode.button.tsx | 2 +- .../navbar/components/layout-dropdown.tsx | 2 +- .../navbar/friends-list/friends.navbar.tsx | 2 +- src/layouts/navbar/navbar.layout.tsx | 12 +- .../components/notification-item.tsx | 14 +-- .../notification-center/daily-mood.tsx | 6 +- .../notification-center/profile-progress.tsx | 12 +- .../notifications/notification.navbar.tsx | 4 +- .../components/profile-dropdown-menu.tsx | 6 +- .../profile/components/profile-trigger.tsx | 4 +- src/layouts/navbar/profile/welcome-wizard.tsx | 6 +- src/layouts/setting/setting-modal.tsx | 4 +- src/layouts/setting/tab-manager.tsx | 4 +- .../setting/tabs/about-us/about-us.tsx | 42 +++---- .../tabs/account/auth-form/auth-form.tsx | 10 +- .../components/login-google.button.tsx | 6 +- .../auth-form/components/otp-input.tsx | 4 +- .../account-verification-status.tsx | 6 +- .../account/components/interests-selector.tsx | 2 +- .../modals/avatar/avatar-crop.modal.tsx | 2 +- .../components/modals/avatar/edit.avatar.tsx | 4 +- .../account/components/modals/edit-gender.tsx | 6 +- .../components/modals/edit-interests.tsx | 2 +- .../components/modals/edit-occupation.tsx | 2 +- .../components/occupation-selector.tsx | 2 +- .../components/profile-date-picker.tsx | 12 +- .../account/components/profile-display.tsx | 12 +- .../account/components/profile-header.tsx | 4 +- .../tabs/connection/connections-tab.tsx | 6 +- .../components/referral-code-section.tsx | 2 +- .../components/require-verification.tsx | 4 +- .../account/tabs/rewards/components/tasks.tsx | 28 ++--- .../tabs/account/tabs/rewards/rewards-tab.tsx | 2 +- .../components/connection-modal.tsx | 4 +- .../user-profile/connections/connections.tsx | 8 +- .../tabs/user-profile/user-profile.tsx | 2 +- .../tabs/user-profile/vip-banner-card.tsx | 2 +- .../tabs/general/components/select-city.tsx | 20 ++-- src/layouts/setting/tabs/general/general.tsx | 2 +- .../components/search-autocomplete.switch.tsx | 2 +- .../setting/tabs/privacy/privacy-settings.tsx | 8 +- .../setting/tabs/vip/vip-hero-banner.tsx | 12 +- .../setting/tabs/vip/vip-plan-card.tsx | 12 +- src/layouts/setting/tabs/vip/vip-tab.tsx | 6 +- .../components/coin-purchase-modal.tsx | 8 +- .../upload/pro-tooltip.component.tsx | 4 +- .../upload/upload-active.component.tsx | 10 +- .../upload/upload-empty.component.tsx | 16 +-- .../components/wallpaper-header.tsx | 13 +- .../components/wallpaper-sidebar.tsx | 14 +-- .../wallpaper-item/wallpaper-item.tsx | 18 +-- .../wallpaper-item/wallpaper-view.tsx | 4 +- .../add-widget-modal/index.tsx | 8 +- .../add-widget-modal/options.tsx | 4 +- .../add-widget-modal/preview.tsx | 4 +- .../add-widget-modal/sidebar.tsx | 20 ++-- .../widgets-manager/widget-help.modal.tsx | 18 +-- .../calendar/components/day/day-details.tsx | 10 +- .../widgets/calendar/components/day/day.tsx | 16 +-- .../calendar/variants/calendar-2x1.tsx | 6 +- .../calendar/variants/calendar-2x3.tsx | 2 +- src/layouts/widgets/canvas/canvas.layout.tsx | 6 +- .../canvas/components/canvas-edit-toolbar.tsx | 10 +- .../canvas/components/canvas-widget-outer.tsx | 2 +- .../canvas/components/grid-overlay.tsx | 2 +- .../canvas/components/widget-context-menu.tsx | 4 +- .../widgets/clock/variants/clock-2x1.tsx | 2 +- .../widgets/clock/variants/clock-flip.tsx | 14 +-- .../components/google-calendar-auth.tsx | 6 +- .../components/google-calendar-event-card.tsx | 6 +- .../components/google-calendar-now-card.tsx | 6 +- .../google-calendar-timeline-item.tsx | 16 +-- .../components/google-calendar-week-strip.tsx | 10 +- .../variants/google-calendar-1x1.tsx | 14 +-- .../variants/google-calendar-2x1.tsx | 16 +-- .../variants/google-calendar-agenda.tsx | 20 ++-- .../variants/google-calendar-schedule.tsx | 12 +- .../variants/google-calendar-timeline.tsx | 4 +- .../habit-calendar-heatmap.tsx | 6 +- .../habit-contribution-chart.tsx | 12 +- .../habit-detail-modal/habit-stats-cards.tsx | 2 +- .../components/habit-detail-modal/index.tsx | 20 ++-- .../widgets/habit/components/habit-error.tsx | 2 +- .../habit-form-modal/habit-form-actions.tsx | 2 +- .../habit-form-modal/habit-form-header.tsx | 2 +- .../habit-goal-frequency-section.tsx | 10 +- .../habit-icon-color-picker.tsx | 6 +- .../habit-form-modal/habit-live-preview.tsx | 2 +- .../components/habit-form-modal/index.tsx | 4 +- .../habit/components/habit-share-modal.tsx | 2 +- .../components/item/button-progress-ring.tsx | 2 +- .../item/button-simple-progress-ring.tsx | 2 +- .../components/item/habit-item-skeleton.tsx | 2 +- .../habit/components/item/habit-item.tsx | 6 +- .../widgets/habit/variants/habit-2x1.tsx | 6 +- .../components/mood-share-modal.tsx | 4 +- .../variants/mood-tracker-1x1.tsx | 8 +- .../variants/mood-tracker-2x1.tsx | 6 +- .../network/components/network-error.tsx | 2 +- .../network/components/network-ip-card.tsx | 4 +- .../network/components/network-ping-card.tsx | 2 +- .../widgets/network/network.widget.tsx | 6 +- .../widgets/network/variants/network-1x1.tsx | 2 +- .../widgets/network/variants/network-2x1.tsx | 10 +- .../widgets/news/components/news-empty.tsx | 2 +- .../widgets/news/components/news-item.tsx | 8 +- .../widgets/news/components/news-skeleton.tsx | 2 +- .../widgets/news/components/rss-feed.tsx | 4 +- src/layouts/widgets/news/rss-feed-setting.tsx | 2 +- .../widgets/notes/components/note-editor.tsx | 6 +- .../widgets/notes/components/note-error.tsx | 2 +- .../widgets/notes/components/note-item.tsx | 6 +- .../notes/components/note-navigation.tsx | 2 +- .../notes/components/note-skeleton.tsx | 2 +- src/layouts/widgets/notes/constants.ts | 26 ++-- .../widgets/notes/variants/note-sticky.tsx | 4 +- .../widgets/pet/components/pet-hud.tsx | 2 +- .../pet/components/pet-option-tile.tsx | 12 +- .../widgets/pet/components/pet-tooltip.tsx | 4 +- src/layouts/widgets/pet/pet-setting.tsx | 8 +- .../photo/components/photo-empty-state.tsx | 4 +- src/layouts/widgets/photo/photo.widget.tsx | 2 +- .../components/preset-canvas-preview.tsx | 4 +- .../components/preset-layout-modal.tsx | 16 +-- .../components/bookmark/bookmark-popover.tsx | 10 +- .../components/bookmark/browser-bookmark.tsx | 12 +- .../search/components/engine-selector.tsx | 8 +- .../components/image/image-search-button.tsx | 4 +- .../components/image/image-search-portal.tsx | 24 ++-- .../components/search-history-portal.tsx | 10 +- .../search/components/suggestion-skeleton.tsx | 4 +- .../widgets/search/components/suggestions.tsx | 10 +- .../components/voice/voice-search-button.tsx | 4 +- .../components/voice/voice-search-portal.tsx | 10 +- src/layouts/widgets/search/search.widget.tsx | 8 +- .../widgets/search/variants/search-2x1.tsx | 4 +- .../components/expandable-todo-input.tsx | 18 +-- .../widgets/todos/components/friend-item.tsx | 6 +- .../todos/components/priority-dropdown.tsx | 22 ++-- .../todos/components/select-friends.tsx | 12 +- .../widgets/todos/components/todo-error.tsx | 2 +- .../widgets/todos/components/todo-item.tsx | 12 +- .../todos/components/todo-skeleton.tsx | 2 +- src/layouts/widgets/todos/constants.ts | 16 +-- .../widgets/todos/variants/todo-2x1.tsx | 9 +- .../widgets/todos/variants/todo-4x3.tsx | 111 +++++++++--------- .../tools/currency/currency-converter.tsx | 20 ++-- .../components/request-notification-modal.tsx | 2 +- .../pomodoro/components/settings-panel.tsx | 10 +- .../pomodoro/components/timer-display.tsx | 6 +- .../widgets/tools/pomodoro/pomodoro-timer.tsx | 4 +- .../pomodoro/top-users/top-user-item.tsx | 11 +- .../tools/pomodoro/top-users/top-users.tsx | 4 +- .../tools/religious/religious-time.tsx | 11 +- .../widgets/tools/variants/tools-2x1.tsx | 2 +- .../components/current-weather-box.tsx | 8 +- .../widgets/weather/components/forecast.tsx | 2 +- .../weather/components/weather-error.tsx | 2 +- .../widgets/weather/variants/weather-1x1.tsx | 2 +- .../widgets/weather/variants/weather-2x1.tsx | 2 +- .../widgets/weather/variants/weather-2x2.tsx | 4 +- .../wigi-arz/components/currency-box.tsx | 11 +- .../components/currency-empty-state.tsx | 2 +- .../wigi-arz/components/currency-modal.tsx | 12 +- .../wigi-arz/variants/wigi-arz-1x1.tsx | 18 ++- .../widgets/wigi-arz/wigi-arz-setting.tsx | 11 +- .../home/components/step-firefox-consent.tsx | 4 +- src/pages/home/components/tour-tooltip.tsx | 22 ++-- src/pages/home/home.page.tsx | 12 +- 246 files changed, 1038 insertions(+), 1087 deletions(-) diff --git a/src/common/constants/moods.ts b/src/common/constants/moods.ts index f90b387f8..37654c880 100644 --- a/src/common/constants/moods.ts +++ b/src/common/constants/moods.ts @@ -5,7 +5,7 @@ export const moodOptions = [ label: 'ناراحتم', colorClass: 'error', activeClass: 'bg-error text-error-content', - borderClass: 'border-error/50', + borderClass: 'border-danger-subtle', }, { value: 'normal', @@ -13,7 +13,7 @@ export const moodOptions = [ label: 'خستم', colorClass: 'warning', activeClass: 'bg-warning text-warning-content', - borderClass: 'border-yellow-400/50', + borderClass: 'border-warning-subtle', }, { value: 'happy', @@ -21,7 +21,7 @@ export const moodOptions = [ label: 'اوکی‌ام', colorClass: 'secondary', activeClass: 'bg-secondary text-secondary-content', - borderClass: 'border-secondary/50', + borderClass: 'border-brand-subtle', }, { value: 'excited', @@ -29,6 +29,6 @@ export const moodOptions = [ label: 'سرحالم', colorClass: 'success', activeClass: 'bg-success text-success-content', - borderClass: 'border-green-400/50', + borderClass: 'border-success-subtle', }, ] diff --git a/src/common/toast.tsx b/src/common/toast.tsx index 3c6773a1c..7efdd03a1 100644 --- a/src/common/toast.tsx +++ b/src/common/toast.tsx @@ -105,9 +105,9 @@ const TOAST_THEMES: Record< } > = { info: { - container: 'bg-[#18181b]/95 border-white/10 text-white', + container: 'bg-[#18181b]/95 border-over-image text-white', icon: ( -
+
), @@ -116,37 +116,37 @@ const TOAST_THEMES: Record< messageClass: 'text-neutral-300', }, error: { - container: 'bg-[#2a1317]/95 border-red-500/25 text-white', + container: 'bg-[#2a1317]/95 border-danger-800 text-white', icon: ( -
+
), title: 'خطا', actionText: 'باشه', - messageClass: 'text-red-200/85', + messageClass: 'text-danger-200', }, success: { - container: 'bg-[#142618]/95 border-emerald-500/25 text-white', + container: 'bg-[#142618]/95 border-success-800 text-white', icon: ( -
+
), title: 'موفقیت آمیز', actionText: 'تایید', - messageClass: 'text-emerald-200/85', + messageClass: 'text-success-200', }, warning: { - container: 'bg-[#2b2210]/95 border-amber-500/25 text-white', + container: 'bg-[#2b2210]/95 border-warning-800 text-white', icon: ( -
+
), title: 'هشدار', actionText: 'متوجه شدم', - messageClass: 'text-amber-200/85', + messageClass: 'text-warning-200', }, } @@ -193,7 +193,7 @@ export function showToast( @@ -215,18 +215,18 @@ export function showPreviewToast(itemName: string, onCancel: () => void): string (t) => (
-
+
-

+

حالت پیش‌نمایش

@@ -241,7 +241,7 @@ export function showPreviewToast(itemName: string, onCancel: () => void): string toast.remove(id) onCancel() }} - className="shrink-0 px-3.5 py-1.5 rounded-xl bg-white/10 hover:bg-red-500/20 hover:text-red-300 active:scale-95 text-xs font-semibold text-white transition-all cursor-pointer select-none flex items-center gap-1" + className="shrink-0 px-3.5 py-1.5 rounded-xl bg-over-image hover:bg-danger-900 hover:text-danger-300 active:scale-95 text-xs font-semibold text-white transition-all cursor-pointer select-none flex items-center gap-1" > بازگشت diff --git a/src/components/auth/auth-required-modal.tsx b/src/components/auth/auth-required-modal.tsx index 24ee7fc6a..a29722454 100644 --- a/src/components/auth/auth-required-modal.tsx +++ b/src/components/auth/auth-required-modal.tsx @@ -36,7 +36,7 @@ export function AuthRequiredModal({ title=" " >

-
+
diff --git a/src/components/auth/require-auth.tsx b/src/components/auth/require-auth.tsx index 49972b8fe..0e4e25f51 100644 --- a/src/components/auth/require-auth.tsx +++ b/src/components/auth/require-auth.tsx @@ -37,7 +37,7 @@ export const RequireAuth = ({ children, fallback, mode = 'block' }: RequireAuthP

diff --git a/src/components/gallery/gallery-asset-purchase-modal.tsx b/src/components/gallery/gallery-asset-purchase-modal.tsx index 80f18ce7b..2d7300f40 100644 --- a/src/components/gallery/gallery-asset-purchase-modal.tsx +++ b/src/components/gallery/gallery-asset-purchase-modal.tsx @@ -76,7 +76,7 @@ export function GalleryAssetPurchaseModal({ showCloseButton={!isPending} >
-
+
{asset.title {!isVipUnlocked && !canAfford && ( -
+
موجودی ویج‌کوین ناکافیه ({asset.price - userCoins} ویج‌کوین کسری داری) diff --git a/src/components/gallery/gallery-bookmark-icon-item.tsx b/src/components/gallery/gallery-bookmark-icon-item.tsx index 22953efb8..7b0054fd6 100644 --- a/src/components/gallery/gallery-bookmark-icon-item.tsx +++ b/src/components/gallery/gallery-bookmark-icon-item.tsx @@ -29,14 +29,14 @@ export function GalleryBookmarkIconItem({ const elementRef = useLazyLoad(loadContent) const itemOutlineStyle = isSelected - ? 'ring-2 ring-primary ring-offset-2 ring-offset-base-100 border-primary' - : 'border-base-content/10 hover:border-primary/50 hover:bg-base-300/40' + ? 'ring-2 ring-primary ring-offset-2 ring-offset-widget border-primary' + : 'border-subtle hover:border-brand-subtle hover:bg-raised' return (
{!loaded && (
-
+
)} {error && ( -
+

خطا در بارگذاری

@@ -76,7 +76,7 @@ export function GalleryBookmarkIconItem({ {loaded && !error && ( <> {asset.title && ( -
+
{asset.title} @@ -95,7 +95,7 @@ export function GalleryBookmarkIconItem({ )} {asset.accessVip && !asset.isOwned && (
- + رایگان با پرو diff --git a/src/components/gallery/gallery-photo-item.tsx b/src/components/gallery/gallery-photo-item.tsx index f7cab870a..cb25ed24f 100644 --- a/src/components/gallery/gallery-photo-item.tsx +++ b/src/components/gallery/gallery-photo-item.tsx @@ -24,23 +24,23 @@ export function GalleryPhotoItem({ asset, isSelected, onClick }: GalleryPhotoIte const elementRef = useLazyLoad(loadContent) const itemOutlineStyle = isSelected - ? 'ring-2 ring-primary ring-offset-2 ring-offset-base-100' - : 'ring-1 ring-base-content/10 hover:ring-primary/70' + ? 'ring-2 ring-primary ring-offset-2 ring-offset-widget' + : 'ring-1 ring-subtle hover:ring-brand-subtle' return (
{!loaded && ( -
-
+
+
)} {error && ( -
+

خطا در بارگذاری

@@ -63,7 +63,7 @@ export function GalleryPhotoItem({ asset, isSelected, onClick }: GalleryPhotoIte {loaded && !error && ( <> -
+
{asset.title || ''} @@ -90,7 +90,7 @@ export function GalleryPhotoItem({ asset, isSelected, onClick }: GalleryPhotoIte : 'رایگان برای کاربران پرو' } > - + رایگان با پرو diff --git a/src/components/ui/avatar/avatar.variants.ts b/src/components/ui/avatar/avatar.variants.ts index 86a920af5..b4aa4bbc8 100644 --- a/src/components/ui/avatar/avatar.variants.ts +++ b/src/components/ui/avatar/avatar.variants.ts @@ -19,7 +19,7 @@ export const avatarVariants = cva( xl: ['w-16', 'h-16', 'text-xl'], }, isPro: { - true: 'ring-2 ring-vip ring-offset-2 ring-offset-base-100', + true: 'ring-2 ring-vip-subtle ring-offset-2 ring-offset-widget', false: '', }, }, diff --git a/src/components/ui/badge/badge.tsx b/src/components/ui/badge/badge.tsx index bc1bfa415..a0925aa1d 100644 --- a/src/components/ui/badge/badge.tsx +++ b/src/components/ui/badge/badge.tsx @@ -6,7 +6,7 @@ export function NewBadge({ className }: Prop) { return ( diff --git a/src/components/ui/badge/vip-badge.variants.ts b/src/components/ui/badge/vip-badge.variants.ts index ce77374d2..9c14f9f74 100644 --- a/src/components/ui/badge/vip-badge.variants.ts +++ b/src/components/ui/badge/vip-badge.variants.ts @@ -5,9 +5,9 @@ export const vipBadgeVariants = cva( { variants: { variant: { - indigo: 'bg-vip text-vip-content shadow-sm shadow-vip/25', - 'indigo-subtle': 'bg-vip/15 text-vip border border-vip/20', - white: 'bg-white/20 text-white backdrop-blur-md border border-white/30 shadow-sm', + indigo: 'bg-vip text-vip-content shadow-sm shadow-vip', + 'indigo-subtle': 'bg-vip-subtle text-vip border border-vip-subtle', + white: 'bg-over-image text-white backdrop-blur-md border border-over-image shadow-sm', }, size: { xs: 'text-[9px] px-2 py-0.5 gap-1', diff --git a/src/components/ui/bottom-sheet/bottom-sheet.tsx b/src/components/ui/bottom-sheet/bottom-sheet.tsx index 08b21f59f..857e323b3 100644 --- a/src/components/ui/bottom-sheet/bottom-sheet.tsx +++ b/src/components/ui/bottom-sheet/bottom-sheet.tsx @@ -52,7 +52,7 @@ export function BottomSheet({ {isOpen && (
)} -

{title}

+

+ {title} +

)} diff --git a/src/components/ui/button/button.variants.ts b/src/components/ui/button/button.variants.ts index d3498271d..7c795cc02 100644 --- a/src/components/ui/button/button.variants.ts +++ b/src/components/ui/button/button.variants.ts @@ -13,8 +13,8 @@ export const buttonVariants = cva( variants: { variant: { solid: 'border-transparent', - outline: 'bg-transparent hover:bg-base-content/10', - ghost: 'bg-transparent border-transparent hover:bg-base-content/10', + outline: 'bg-transparent hover:bg-raised', + ghost: 'bg-transparent border-transparent hover:bg-raised', text: 'bg-transparent border-transparent hover:underline underline-offset-4', }, color: { @@ -53,47 +53,47 @@ export const buttonVariants = cva( { variant: 'solid', color: 'base', - class: 'bg-content border-content hover:bg-base-content/5!', + class: 'bg-content border-content hover:bg-raised!', }, { variant: 'solid', color: 'brand', - class: 'bg-brand text-brand-content hover:bg-brand/90', + class: 'bg-brand text-brand-content hover:bg-brand-solid', }, { variant: 'solid', color: 'primary', - class: 'bg-primary text-primary-content hover:bg-primary/90', + class: 'bg-primary text-primary-content hover:bg-brand-solid', }, { variant: 'solid', color: 'secondary', - class: 'bg-secondary text-secondary-content hover:bg-secondary/90', + class: 'bg-secondary text-secondary-content hover:bg-brand-solid', }, { variant: 'solid', color: 'danger', - class: 'bg-error text-error-content hover:bg-error/90', + class: 'bg-error text-error-content hover:bg-danger-solid', }, { variant: 'solid', color: 'success', - class: 'bg-success text-success-content hover:bg-success/90', + class: 'bg-success text-success-content hover:bg-success-solid', }, { variant: 'solid', color: 'info', - class: 'bg-info text-info-content hover:bg-info/90', + class: 'bg-info text-info-content hover:bg-info-solid', }, { variant: 'solid', color: 'warning', - class: 'bg-warning text-warning-content hover:bg-warning/90', + class: 'bg-warning text-warning-content hover:bg-warning-solid', }, { variant: 'solid', color: 'vip', - class: 'bg-vip text-vip-content hover:bg-vip/90', + class: 'bg-vip text-vip-content hover:bg-vip-solid', }, { variant: 'ghost', @@ -101,14 +101,14 @@ export const buttonVariants = cva( class: 'text-muted hover:text-content', }, { variant: 'outline', color: 'base', class: 'border-content' }, - { variant: 'outline', color: 'brand', class: 'border-brand' }, + { variant: 'outline', color: 'brand', class: 'border-brand-subtle' }, { variant: 'outline', color: 'primary', class: 'border-primary' }, { variant: 'outline', color: 'secondary', class: 'border-secondary' }, { variant: 'outline', color: 'danger', class: 'border-error' }, - { variant: 'outline', color: 'success', class: 'border-success' }, - { variant: 'outline', color: 'info', class: 'border-info' }, - { variant: 'outline', color: 'warning', class: 'border-warning' }, - { variant: 'outline', color: 'vip', class: 'border-vip' }, + { variant: 'outline', color: 'success', class: 'border-success-subtle' }, + { variant: 'outline', color: 'info', class: 'border-info-subtle' }, + { variant: 'outline', color: 'warning', class: 'border-warning-subtle' }, + { variant: 'outline', color: 'vip', class: 'border-vip-subtle' }, ], defaultVariants: { variant: 'solid', diff --git a/src/components/ui/chip/chip.variants.ts b/src/components/ui/chip/chip.variants.ts index 13a24a93d..5928cc294 100644 --- a/src/components/ui/chip/chip.variants.ts +++ b/src/components/ui/chip/chip.variants.ts @@ -19,11 +19,11 @@ export const chipVariants = cva( selected: { true: ['bg-primary', 'border-primary', 'text-white'], false: [ - 'bg-base-100', + 'bg-widget', 'bg-glass', - 'border-base-300/30', - 'text-base-content/80', - 'enabled:hover:border-primary/30', + 'border-content', + 'text-muted', + 'enabled:hover:border-brand-subtle', 'disabled:opacity-80', ], }, diff --git a/src/components/ui/color-picker/color-picker.tsx b/src/components/ui/color-picker/color-picker.tsx index 549f174b1..a1c431c91 100644 --- a/src/components/ui/color-picker/color-picker.tsx +++ b/src/components/ui/color-picker/color-picker.tsx @@ -117,7 +117,7 @@ export const ColorPicker: React.FC = ({
{ if (isDaySelected) return '' if (isFriday) { - return 'hover:bg-error/10' + return 'hover:bg-danger-subtle' } - return 'hover:bg-primary/10' + return 'hover:bg-brand-subtle' } const getTodayRingStyle = () => { if (isDaySelected) return '' if (isFriday) { - return 'border border-dashed border-error/80' + return 'border border-dashed border-danger-strong' } - return 'border border-dashed border-primary/80' + return 'border border-dashed border-brand-strong' } return ( @@ -191,7 +191,7 @@ export function DatePicker({
@@ -203,20 +203,20 @@ export function DatePicker({ {showTodayButton && ( )} diff --git a/src/components/ui/dropdown/dropdown-item.tsx b/src/components/ui/dropdown/dropdown-item.tsx index c3cbd2129..784e4ffe7 100644 --- a/src/components/ui/dropdown/dropdown-item.tsx +++ b/src/components/ui/dropdown/dropdown-item.tsx @@ -49,5 +49,5 @@ export function DropdownItem({ } export function DropdownDivider() { - return
+ return
} diff --git a/src/components/ui/dropdown/dropdown-item.variants.ts b/src/components/ui/dropdown/dropdown-item.variants.ts index cad510838..f16d4ada3 100644 --- a/src/components/ui/dropdown/dropdown-item.variants.ts +++ b/src/components/ui/dropdown/dropdown-item.variants.ts @@ -23,9 +23,9 @@ export const dropdownItemVariants = cva( variants: { variant: { default: - 'text-content hover:bg-primary/10 hover:text-primary! active:bg-primary/20!', - danger: 'text-error hover:bg-error/10 active:bg-error/20', - primary: 'text-primary bg-primary/10 hover:bg-primary/20', + 'text-content hover:bg-brand-subtle hover:text-primary! active:bg-brand-subtle!', + danger: 'text-error hover:bg-danger-subtle active:bg-danger-subtle', + primary: 'text-primary bg-brand-subtle hover:bg-brand-subtle', }, }, defaultVariants: { diff --git a/src/components/ui/dropdown/dropdown.tsx b/src/components/ui/dropdown/dropdown.tsx index 6cc7591dc..535b62595 100644 --- a/src/components/ui/dropdown/dropdown.tsx +++ b/src/components/ui/dropdown/dropdown.tsx @@ -199,7 +199,7 @@ export function Dropdown({ key={option.id} onClick={() => handleOptionClick(option)} disabled={option.disabled} - className="w-full px-3 py-2 text-sm text-left transition-colors hover:bg-primary/10 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-muted focus:outline-none focus:bg-primary/10 focus:text-primary" + className="w-full px-3 py-2 text-sm text-left transition-colors hover:bg-brand-subtle hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-muted focus:outline-none focus:bg-brand-subtle focus:text-primary" > {option.label} @@ -226,7 +226,7 @@ export function Dropdown({ > {icon} @@ -55,15 +55,15 @@ export function FilterTooltip({ position="bottom" contentClassName={tooltipClassName || ''} content={ -
+
{options.map((option) => (
-
+
) diff --git a/src/layouts/bookmark/components/bookmark-folder.tsx b/src/layouts/bookmark/components/bookmark-folder.tsx index aa3695309..e76aa7d23 100644 --- a/src/layouts/bookmark/components/bookmark-folder.tsx +++ b/src/layouts/bookmark/components/bookmark-folder.tsx @@ -95,7 +95,7 @@ export const FolderBookmarkItem = memo(function FolderBookmarkItem({ className={cn( 'relative flex group h-20 md:h-[5.9rem] border border-content w-full flex-col items-center justify-between px-2 py-1.5 transition-all duration-300 cursor-pointer rounded-widget shadow-xs ease-in-out', !bookmark.customBackground - ? 'bg-content bg-glass hover:bg-base-300 text-content' + ? 'bg-content bg-glass hover:bg-raised text-content' : 'before:bg-inherit ' )} > @@ -118,7 +118,7 @@ export const FolderBookmarkItem = memo(function FolderBookmarkItem({ onMenuClick(e) }} className={ - 'absolute cursor-pointer top-1 right-1.5 p-1 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-200 hover:bg-base-content/10 z-10' + 'absolute cursor-pointer top-1 right-1.5 p-1 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-200 hover:bg-raised z-10' } > diff --git a/src/layouts/bookmark/components/bookmark-icon.picker.tsx b/src/layouts/bookmark/components/bookmark-icon.picker.tsx index d4fc45c30..95af15fbb 100644 --- a/src/layouts/bookmark/components/bookmark-icon.picker.tsx +++ b/src/layouts/bookmark/components/bookmark-icon.picker.tsx @@ -103,8 +103,8 @@ export function BookmarkIconPicker({ value, url, onChange, size = 'md' }: Props) onDrop={handleDrop} className={`relative shrink-0 flex items-center justify-center cursor-pointer border-2 transition-all duration-200 ${containerSizeClasses} ${ isDragging - ? 'border-primary bg-primary/10 shadow-lg' - : 'border-base-content/15 hover:border-primary/50 bg-base-200/80 hover:bg-base-200' + ? 'border-primary bg-brand-subtle shadow-lg' + : 'border-content hover:border-brand-subtle bg-content hover:bg-content' }`} title="انتخاب یا تغییر آیکون" > @@ -126,7 +126,7 @@ export function BookmarkIconPicker({ value, url, onChange, size = 'md' }: Props) )}
@@ -142,7 +142,7 @@ export function BookmarkIconPicker({ value, url, onChange, size = 'md' }: Props)
-
+
) diff --git a/src/layouts/bookmark/components/bookmark-suggestions.tsx b/src/layouts/bookmark/components/bookmark-suggestions.tsx index 58f3e417e..fc8d2c531 100644 --- a/src/layouts/bookmark/components/bookmark-suggestions.tsx +++ b/src/layouts/bookmark/components/bookmark-suggestions.tsx @@ -29,7 +29,7 @@ export function BookmarkSuggestions({ onSelect }: BookmarkSuggestionsProps) { e.stopPropagation() onSelect(suggestion) }} - className="p-1.5 flex flex-col items-center justify-center text-center transition-all duration-200 bg-base-200 hover:bg-primary/10 hover:border-primary/30 h-14 border border-base-content/10 rounded-xl cursor-pointer" + className="p-1.5 flex flex-col items-center justify-center text-center transition-all duration-200 bg-content hover:bg-brand-subtle hover:border-brand-subtle h-14 border border-subtle rounded-xl cursor-pointer" >
{suggestion.icon ? ( @@ -43,7 +43,11 @@ export function BookmarkSuggestions({ onSelect }: BookmarkSuggestionsProps) { }} /> ) : ( - + )}

diff --git a/src/layouts/bookmark/components/bookmark/bookmark-icon.tsx b/src/layouts/bookmark/components/bookmark/bookmark-icon.tsx index 517d19121..6c4e340ef 100644 --- a/src/layouts/bookmark/components/bookmark/bookmark-icon.tsx +++ b/src/layouts/bookmark/components/bookmark/bookmark-icon.tsx @@ -3,16 +3,16 @@ import type { Bookmark } from '../../types/bookmark.types' import { useState } from 'react' import { Icon } from '@/icons' const colors = [ - 'bg-blue-500/60', - 'bg-purple-500/60', - 'bg-pink-500/60', - 'bg-red-500/60', - 'bg-orange-500/60', - 'bg-yellow-500/60', - 'bg-green-500/60', - 'bg-teal-500/60', - 'bg-cyan-500/60', - 'bg-indigo-500/60', + 'bg-avatar-1', + 'bg-avatar-2', + 'bg-avatar-3', + 'bg-avatar-4', + 'bg-avatar-5', + 'bg-avatar-6', + 'bg-avatar-7', + 'bg-avatar-8', + 'bg-avatar-9', + 'bg-avatar-10', ] const DEF = 'https://cdn.widgetify.ir/system/bookmark.png' @@ -48,7 +48,7 @@ export function BookmarkIcon({ bookmark }: { bookmark: Bookmark }) { displayIcon = bookmark.icon } } else { - displayIcon = + displayIcon = } if (displayIcon === '') { diff --git a/src/layouts/bookmark/components/folder-path.tsx b/src/layouts/bookmark/components/folder-path.tsx index 41d0ea7db..1f1e6f8ed 100644 --- a/src/layouts/bookmark/components/folder-path.tsx +++ b/src/layouts/bookmark/components/folder-path.tsx @@ -34,7 +34,7 @@ export function FolderPath({ folderPath, onNavigate, className }: FolderPathProp

)} -
+
-
+
) } @@ -113,8 +113,8 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa className={`flex items-center justify-center w-7 h-7 cursor-pointer rounded-lg transition-all duration-150 ease-in-out ${ sticker === url - ? 'bg-primary/25 border-2 border-primary transform scale-110' - : 'border border-transparent hover:bg-base-content/10 active:bg-base-content/20' + ? 'bg-brand-subtle border-2 border-primary transform scale-110' + : 'border border-transparent hover:bg-raised active:bg-hovered' }`} > handleEmojiSelect(sticker)} className={ - 'px-3 py-1.5 cursor-pointer text-xs rounded-md text-error hover:bg-error/10' + 'px-3 py-1.5 cursor-pointer text-xs rounded-md text-error hover:bg-danger-subtle' } > حذف diff --git a/src/layouts/bookmark/components/modal/bookmark-folder.modal.tsx b/src/layouts/bookmark/components/modal/bookmark-folder.modal.tsx index 01bcb3716..441b6a199 100644 --- a/src/layouts/bookmark/components/modal/bookmark-folder.modal.tsx +++ b/src/layouts/bookmark/components/modal/bookmark-folder.modal.tsx @@ -188,7 +188,7 @@ export function BookmarkFolderModal({ >
{folderPath.length > 1 && ( -
+
)} diff --git a/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx b/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx index 8a6e18398..5f95a8598 100644 --- a/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx +++ b/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx @@ -205,7 +205,7 @@ export function EditBookmarkModal({ )}
-
+
onToggleSelect(node)} > @@ -127,8 +127,8 @@ function TreeNode({ isChecked ? 'bg-primary border-primary' : isIndeterminate - ? 'bg-primary/30 border-primary' - : 'border-base-content/20' + ? 'bg-brand-muted border-primary' + : 'border-content' }`} > {(isChecked || isIndeterminate) && ( @@ -137,7 +137,7 @@ function TreeNode({ {isFolder ? ( - + ) : ( {!browserBookmarksEnabled ? (
-
+

دسترسی به بوکمارک‌ها

@@ -314,7 +314,7 @@ export function ImportBrowserBookmarksModal({
-
+
{isLoadingTree ? (
)}

{category.category}

@@ -76,7 +76,7 @@ export function ExplorerCategory({ category, categoryRefs, activeCategory }: Pro ))}
) : ( -
+
)}
diff --git a/src/layouts/explorer/components/content-banner.tsx b/src/layouts/explorer/components/content-banner.tsx index 3f3527153..dbea0fab5 100644 --- a/src/layouts/explorer/components/content-banner.tsx +++ b/src/layouts/explorer/components/content-banner.tsx @@ -37,7 +37,7 @@ export function RenderContentBanner({ link }: SiteProp) { > {badge && ( )} -
+
- + {link.name} diff --git a/src/layouts/explorer/explorer.tsx b/src/layouts/explorer/explorer.tsx index d00e1013f..a4cb1680c 100644 --- a/src/layouts/explorer/explorer.tsx +++ b/src/layouts/explorer/explorer.tsx @@ -10,7 +10,7 @@ function ExplorerSkeleton() { {[1, 2, 3, 4, 5, 6].map((i) => (
@@ -96,7 +96,7 @@ export function ExplorerContent() {
{isLoading ? ( -
+
{[1, 2, 3, 4, 5, 6].map((i) => (
-
+
{categories.map((cat: CategoryItem) => { const active = activeCategory === cat.id @@ -120,8 +120,8 @@ export function ExplorerContent() { onClick={() => scrollToCategory(cat.id)} className={`relative flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium whitespace-nowrap rounded-xl transition-all duration-200 shrink-0 cursor-pointer ${ active - ? 'bg-base-200 text-content shadow-xs font-semibold' - : 'text-muted hover:text-content hover:bg-base-200/50' + ? 'bg-content text-content shadow-xs font-semibold' + : 'text-muted hover:text-content hover:bg-content' }`} > {cat.icon && ( diff --git a/src/layouts/friends/components/activities.tsx b/src/layouts/friends/components/activities.tsx index 7abe3caa6..7bb4e53b2 100644 --- a/src/layouts/friends/components/activities.tsx +++ b/src/layouts/friends/components/activities.tsx @@ -23,9 +23,9 @@ export const ActiveFriendsHorizontal = () => { key={`skeleton-${i}`} className="flex flex-col items-center shrink-0" > -
-
-
+
+
+
))}
diff --git a/src/layouts/friends/components/activity-card/activity-card.tsx b/src/layouts/friends/components/activity-card/activity-card.tsx index dddbee1c6..f415c6f5a 100644 --- a/src/layouts/friends/components/activity-card/activity-card.tsx +++ b/src/layouts/friends/components/activity-card/activity-card.tsx @@ -46,7 +46,7 @@ export const ActivityCard = ({ className={` w-full h-full text-[10px] px-2 py-1 rounded-2xl leading-tight text-center overflow-hidden transition-all - bg-base-200 border border-base-content/10 shadow-xs text-base-content/80 + bg-content border border-subtle shadow-xs text-muted ${onClick ? 'group-hover:scale-95 cursor-pointer z-10' : ''} `} > @@ -58,9 +58,9 @@ export const ActivityCard = ({
-
-
-
+
+
+
{isSelf ? null : (
@@ -132,7 +132,7 @@ function ActivityReactionSelector({ reactions, activityId, index }: Prop) { setEnable(true)} > {reacted @@ -147,14 +147,14 @@ function ActivityReactionSelector({ reactions, activityId, index }: Prop) { } className="absolute! top-0! left-0!" > -
+
{isPending ? Array.from({ length: 5 }).map((_, i) => (
-
+
)) : reactions.map((reaction, index) => ( @@ -162,7 +162,7 @@ function ActivityReactionSelector({ reactions, activityId, index }: Prop) { key={index} disabled={isUpdating} onClick={() => handleReaction(reaction.id)} - className={`h-5.5 w-5.5 rounded-full ${isUpdating && 'opacity-45'} ${selectedReaction === reaction.id ? 'bg-primary/30' : 'opacity-85'} transition-transform duration-150 cursor-pointer active:scale-95 focus:outline-none hover:bg-primary/20`} + className={`h-5.5 w-5.5 rounded-full ${isUpdating && 'opacity-45'} ${selectedReaction === reaction.id ? 'bg-brand-muted' : 'opacity-85'} transition-transform duration-150 cursor-pointer active:scale-95 focus:outline-none hover:bg-brand-subtle`} >

@@ -30,18 +30,18 @@ export const EmptyActivityCard = ({ avatar, name, onClick }: EmptyActivityCardPr

-
-
-
+
+
+
-
-
-
+
+
+
{/* Avatar */}
-
+
+
-

- نوشته فعلی شما -

+

نوشته فعلی شما

diff --git a/src/layouts/friends/components/buttons/friend-requests.button.tsx b/src/layouts/friends/components/buttons/friend-requests.button.tsx index e865f9ec0..d0bc4b958 100644 --- a/src/layouts/friends/components/buttons/friend-requests.button.tsx +++ b/src/layouts/friends/components/buttons/friend-requests.button.tsx @@ -14,7 +14,7 @@ export function FriendRequestsButton({ size, pendingCount }: Prop) { {size === 'large' ? (
) } diff --git a/src/layouts/friends/components/friend-item/friend-item.skeleton.tsx b/src/layouts/friends/components/friend-item/friend-item.skeleton.tsx index 381189c8e..3f74c266c 100644 --- a/src/layouts/friends/components/friend-item/friend-item.skeleton.tsx +++ b/src/layouts/friends/components/friend-item/friend-item.skeleton.tsx @@ -2,7 +2,7 @@ export function MakeSkeletonFriendItem(count: number) { return [...Array(count)].map((_, catIdx) => (
)) } diff --git a/src/layouts/friends/components/friends-direct-view.tsx b/src/layouts/friends/components/friends-direct-view.tsx index 4423fed29..c9912646b 100644 --- a/src/layouts/friends/components/friends-direct-view.tsx +++ b/src/layouts/friends/components/friends-direct-view.tsx @@ -66,16 +66,14 @@ export function FriendsDirectView({ onSelectFriend }: FriendsDirectViewProps) {
- - دوستان - + دوستان
@@ -86,7 +84,7 @@ export function FriendsDirectView({ onSelectFriend }: FriendsDirectViewProps) { @@ -49,19 +49,19 @@ export function MiniAppRunnerHeader({ /> )} {isLoadingApp && ( -
+
)}
{isLoadingApp ? ( -
+
) : (

{app?.name ?? ''}

)} {app?.description && ( -

+

{app.description}

)} @@ -73,31 +73,31 @@ export function MiniAppRunnerHeader({
diff --git a/src/layouts/mini-apps/mini-apps.layout.tsx b/src/layouts/mini-apps/mini-apps.layout.tsx index b245870d5..7ddfc7c26 100644 --- a/src/layouts/mini-apps/mini-apps.layout.tsx +++ b/src/layouts/mini-apps/mini-apps.layout.tsx @@ -77,7 +77,7 @@ export function MiniAppsLayout() {

برنامک ها

onClickToShowInfo()} - className="p-1 text-lg font-bold cursor-pointer text-base-content/80 hover:text-base-content active:scale-95" + className="p-1 text-lg font-bold cursor-pointer text-muted hover:text-content active:scale-95" >
@@ -147,42 +147,42 @@ export function MiniAppsLayout() {
setShowInfo(false)} - direction="rtl" - > -
-

- برنامک‌ها برنامه‌های کوچیکی هستن که تو ویجتیفای اجرا می‌شن و راحت - می‌تونی ازشون استفاده کنی، بدون اینکه مجبور باشی از اپ اصلی بری - بیرون. -

- -

- خیالت راحت! این برنامک‌ها به طور پیش‌فرض به هیچ اطلاعاتی ازت - دسترسی ندارن و فقط و فقط با اجازه خودت می‌تونن به اطلاعاتت - دسترسی پیدا کنن. -

- -

- اگر علاقه‌مند به همکاری با ما در این حوزه هستید، راه‌های ارتباطی - در دسترس شماست. -

-
+ title="برنامک ها" + isOpen={showInfo} + onClose={() => setShowInfo(false)} + direction="rtl" + > +
+

+ برنامک‌ها برنامه‌های کوچیکی هستن که تو ویجتیفای اجرا می‌شن و راحت + می‌تونی ازشون استفاده کنی، بدون اینکه مجبور باشی از اپ اصلی بری + بیرون. +

+ +

+ خیالت راحت! این برنامک‌ها به طور پیش‌فرض به هیچ اطلاعاتی ازت دسترسی + ندارن و فقط و فقط با اجازه خودت می‌تونن به اطلاعاتت دسترسی پیدا + کنن. +

+ +

+ اگر علاقه‌مند به همکاری با ما در این حوزه هستید، راه‌های ارتباطی در + دسترس شماست. +

+
- - + +
) } diff --git a/src/layouts/mini-apps/states/mini-app-error.tsx b/src/layouts/mini-apps/states/mini-app-error.tsx index c02761c4f..4432de6d6 100644 --- a/src/layouts/mini-apps/states/mini-app-error.tsx +++ b/src/layouts/mini-apps/states/mini-app-error.tsx @@ -8,7 +8,7 @@ interface Prop { export function MiniAppError({ handleReload, onClickToBack }: Prop) { return (
-
+

خطا در اجرای برنامک

-

+

عاممم یه مشکلی رخ داد، دوباره تلاش کنید.

diff --git a/src/layouts/mini-apps/states/mini-app-loading.tsx b/src/layouts/mini-apps/states/mini-app-loading.tsx index b633b54f0..411663edd 100644 --- a/src/layouts/mini-apps/states/mini-app-loading.tsx +++ b/src/layouts/mini-apps/states/mini-app-loading.tsx @@ -11,7 +11,7 @@ export function MiniAppLoadingState({ icon, name, label, labelIcon }: Prop) { return (
{icon && ( -
+
{name
-
+
@@ -44,7 +44,7 @@ export function WebAppAuthGate({ scopes, onConfirm }: Prop) { {scopes.map((s) => (
  • {SCOPES_LABEL[s] || s}
    • diff --git a/src/layouts/navbar/components/blur-mode.button.tsx b/src/layouts/navbar/components/blur-mode.button.tsx index 8a1d9de1e..fcf4d8495 100644 --- a/src/layouts/navbar/components/blur-mode.button.tsx +++ b/src/layouts/navbar/components/blur-mode.button.tsx @@ -30,7 +30,7 @@ export function BlurModeButton() { <>
    {blurMode ? ( diff --git a/src/layouts/navbar/components/layout-dropdown.tsx b/src/layouts/navbar/components/layout-dropdown.tsx index aef5b1360..52c8a0d74 100644 --- a/src/layouts/navbar/components/layout-dropdown.tsx +++ b/src/layouts/navbar/components/layout-dropdown.tsx @@ -21,7 +21,7 @@ export function LayoutDropdown() { diff --git a/src/layouts/navbar/friends-list/friends.navbar.tsx b/src/layouts/navbar/friends-list/friends.navbar.tsx index 72da73465..16628cfea 100644 --- a/src/layouts/navbar/friends-list/friends.navbar.tsx +++ b/src/layouts/navbar/friends-list/friends.navbar.tsx @@ -46,7 +46,7 @@ export function FriendsListNavbar() { return ( <>
    clickToOpenSheet()} > diff --git a/src/layouts/navbar/navbar.layout.tsx b/src/layouts/navbar/navbar.layout.tsx index d33cb385a..c1e6c7ec8 100644 --- a/src/layouts/navbar/navbar.layout.tsx +++ b/src/layouts/navbar/navbar.layout.tsx @@ -66,7 +66,7 @@ export function NavbarTabs() { {page === tab.id && tab.activeIcon ? ( @@ -146,13 +146,13 @@ export function NavbarLayout(): JSX.Element { onClick={() => onToggleNavbar()} aria-hidden={showHandle ? undefined : true} tabIndex={showHandle ? 0 : -1} - className={`fixed z-50 bottom-0 left-1/2 -translate-x-1/2 w-28 py-2.5 bg-content bg-glass border-t border-x border-white/10 rounded-t-3xl shadow-[0_-0px_30px_rgba(0,0,0,0.3)] transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-white/[0.08] cursor-pointer group ${ + className={`fixed z-50 bottom-0 left-1/2 -translate-x-1/2 w-28 py-2.5 bg-content bg-glass border-t border-x border-over-image rounded-t-3xl shadow-[0_-0px_30px_rgba(0,0,0,0.3)] transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-white/[0.08] cursor-pointer group ${ showHandle ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0 pointer-events-none' }`} > -
    +
    {hasCloseableNotifications && } @@ -169,13 +169,13 @@ export function NavbarLayout(): JSX.Element { id="chrome-footer" >
    -

    نسخه "{ConfigKey.VERSION_NAME}" @@ -33,17 +33,17 @@ export function AboutUsTab() { href="https://widgetify.ir" target="_blank" rel="noopener noreferrer" - className="flex items-center justify-between p-4 transition-all duration-200 border group rounded-4xl border-base-content/5 bg-base-200/20 hover:bg-base-200/50 hover:border-primary/20" + className="flex items-center justify-between p-4 transition-all duration-200 border group rounded-4xl border-subtle bg-content hover:bg-content hover:border-brand-subtle" >
    -
    +
    -

    +

    وب‌سایت رسمی

    -

    +

    widgetify.ir

    @@ -51,7 +51,7 @@ export function AboutUsTab() {     @@ -59,17 +59,17 @@ export function AboutUsTab() { href="https://blog.widgetify.ir" target="_blank" rel="noopener noreferrer" - className="flex items-center justify-between p-4 transition-all duration-200 border group rounded-4xl border-base-content/5 bg-base-200/20 hover:bg-base-200/50 hover:border-secondary/20" + className="flex items-center justify-between p-4 transition-all duration-200 border group rounded-4xl border-subtle bg-content hover:bg-content hover:border-brand-subtle" >
    -
    +
    -

    +

    وبلاگ رسمی

    -

    +

    blog.widgetify.ir

    @@ -77,7 +77,7 @@ export function AboutUsTab() { @@ -85,17 +85,17 @@ export function AboutUsTab() { href="https://t.me/widgetify" target="_blank" rel="noopener noreferrer" - className="flex items-center justify-between p-4 transition-all duration-200 border group rounded-4xl border-base-content/5 bg-base-200/20 hover:bg-base-200/50 hover:border-info/20" + className="flex items-center justify-between p-4 transition-all duration-200 border group rounded-4xl border-subtle bg-content hover:bg-content hover:border-info-subtle" >
    -
    +
    -

    +

    کانال تلگرام

    -

    +

    t.me/widgetify

    @@ -103,7 +103,7 @@ export function AboutUsTab() { @@ -111,10 +111,10 @@ export function AboutUsTab() { href="https://ble.ir/widgetify" target="_blank" rel="noopener noreferrer" - className="flex items-center justify-between p-4 transition-all duration-200 border group rounded-4xl border-base-content/5 bg-base-200/20 hover:bg-base-200/50 hover:border-success/20" + className="flex items-center justify-between p-4 transition-all duration-200 border group rounded-4xl border-subtle bg-content hover:bg-content hover:border-success-subtle" >
    -
    +
    -

    +

    پیام‌رسان بله

    -

    +

    ble.ir/widgetify

    @@ -140,7 +140,7 @@ export function AboutUsTab() {
    diff --git a/src/layouts/setting/tabs/account/auth-form/auth-form.tsx b/src/layouts/setting/tabs/account/auth-form/auth-form.tsx index 9c0b1d124..641114be6 100644 --- a/src/layouts/setting/tabs/account/auth-form/auth-form.tsx +++ b/src/layouts/setting/tabs/account/auth-form/auth-form.tsx @@ -233,7 +233,7 @@ const AuthForm = () => { return (
    {authStatus?.content && step === 'identifier' && ( -
    +
    {authStatus.content}
    @@ -289,10 +289,10 @@ const AuthForm = () => {
    {error.api && ( -
    +
    {error.api}
    )} @@ -366,7 +366,7 @@ const AuthForm = () => { type="button" onClick={() => handleSendOtp()} disabled={isOtpSending} - className="w-full mt-1 h-10 px-3 rounded-xl border border-base-300/80 bg-base-100 hover:bg-base-200/80 text-xs font-medium text-content flex items-center justify-center gap-2 cursor-pointer transition-all active:scale-[0.99] shadow-xs" + className="w-full mt-1 h-10 px-3 rounded-xl border border-content bg-widget hover:bg-content text-xs font-medium text-content flex items-center justify-center gap-2 cursor-pointer transition-all active:scale-[0.99] shadow-xs" > diff --git a/src/layouts/setting/tabs/account/auth-form/components/login-google.button.tsx b/src/layouts/setting/tabs/account/auth-form/components/login-google.button.tsx index 1f35da2c8..f673c301f 100644 --- a/src/layouts/setting/tabs/account/auth-form/components/login-google.button.tsx +++ b/src/layouts/setting/tabs/account/auth-form/components/login-google.button.tsx @@ -84,7 +84,7 @@ export default function LoginGoogleButton() { type="button" onClick={loginGoogle} disabled={isLoading} - className="w-full h-11 px-4 rounded-xl text-xs md:text-sm font-medium flex items-center justify-center border border-base-300/80 bg-base-100 hover:bg-base-200/80 active:scale-[0.99] transition-all duration-150 gap-2.5 cursor-pointer text-content shadow-xs" + className="w-full h-11 px-4 rounded-xl text-xs md:text-sm font-medium flex items-center justify-center border border-content bg-widget hover:bg-content active:scale-[0.99] transition-all duration-150 gap-2.5 cursor-pointer text-content shadow-xs" >
    {isLoading ? ( @@ -98,9 +98,7 @@ export default function LoginGoogleButton() { /> )}
    - - {isLoading ? 'درحال ورود...' : 'ورود با حساب گوگل'} - + {isLoading ? 'درحال ورود...' : 'ورود با حساب گوگل'} ) } diff --git a/src/layouts/setting/tabs/account/auth-form/components/otp-input.tsx b/src/layouts/setting/tabs/account/auth-form/components/otp-input.tsx index b8957f6a1..27f52d468 100644 --- a/src/layouts/setting/tabs/account/auth-form/components/otp-input.tsx +++ b/src/layouts/setting/tabs/account/auth-form/components/otp-input.tsx @@ -107,9 +107,9 @@ const OtpInput: React.FC = ({ otp, setOtp, isError }) => { onPaste={handlePaste} className={`w-10 h-12 md:w-12 md:h-14 text-center text-xl md:text-2xl font-bold border-2 ${ isError - ? 'border-error/80 bg-error/30 text-error' + ? 'border-danger-strong bg-danger-muted text-error' : 'border-content bg-content' - } rounded-lg md:rounded-xl text-base-content/70 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 hover:border-primary/50 active:scale-95`} + } rounded-lg md:rounded-xl text-muted focus:outline-none focus:border-primary focus:ring-2 focus:ring-brand-subtle transition-all duration-200 hover:border-brand-subtle active:scale-95`} /> ))}
    diff --git a/src/layouts/setting/tabs/account/components/account-verification-status.tsx b/src/layouts/setting/tabs/account/components/account-verification-status.tsx index 9d2fffe0a..13814bb54 100644 --- a/src/layouts/setting/tabs/account/components/account-verification-status.tsx +++ b/src/layouts/setting/tabs/account/components/account-verification-status.tsx @@ -14,14 +14,14 @@ export const AccountVerificationStatus = ({ }: AccountVerificationStatusProps) => { return ( -
    +

    ⚠️ حساب شما تایید نشده است

    -

    +

    لطفا ایمیل خود را بررسی کنید یا ایمیل جدید درخواست کنید.

    @@ -35,7 +35,7 @@ export const AccountVerificationStatus = ({ > {sendVerificationMutation.isPending ? ( <> -
    +
    در حال ارسال... ) : ( diff --git a/src/layouts/setting/tabs/account/components/interests-selector.tsx b/src/layouts/setting/tabs/account/components/interests-selector.tsx index aff797cbd..0f718554b 100644 --- a/src/layouts/setting/tabs/account/components/interests-selector.tsx +++ b/src/layouts/setting/tabs/account/components/interests-selector.tsx @@ -31,7 +31,7 @@ export const InterestsSelector = ({ } const content = ( -
    +
    {isLoading ? (
    صبر کنید... diff --git a/src/layouts/setting/tabs/account/components/modals/avatar/avatar-crop.modal.tsx b/src/layouts/setting/tabs/account/components/modals/avatar/avatar-crop.modal.tsx index c05f1ce30..23e95e6a2 100644 --- a/src/layouts/setting/tabs/account/components/modals/avatar/avatar-crop.modal.tsx +++ b/src/layouts/setting/tabs/account/components/modals/avatar/avatar-crop.modal.tsx @@ -53,7 +53,7 @@ export function AvatarCropModal({ showCloseButton={!isPending} >
    -
    +
    avatarRef.current?.click()} > {avatar ? ( ) : ( diff --git a/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx b/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx index aacfa35df..15d5bd0fb 100644 --- a/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx +++ b/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx @@ -65,13 +65,13 @@ export function ChangeGenderModal({ show, onClose, currentValue }: Prop) { onClick={() => setValue(g)} className={`flex-1 py-2 px-1 flex flex-col items-center gap-1 text-[10px] font-bold rounded-xl transition-all duration-300 cursor-pointer ${ isActive - ? 'text-primary shadow-sm ring-1 ring-primary/20 scale-[1.02]' - : 'text-base-content/80 hover:text-primary/80 hover:ring-1 hover:ring-primary/10 active:scale-95' + ? 'text-primary shadow-sm ring-1 ring-brand-subtle scale-[1.02]' + : 'text-muted hover:text-brand hover:ring-1 hover:ring-brand-subtle active:scale-95' }`} > {options[g].icon} diff --git a/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx b/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx index 5b52e5b08..c8902c404 100644 --- a/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx +++ b/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx @@ -52,7 +52,7 @@ export function ChangeInterestsModal({ show, onClose, currentValue }: Prop) { onSelect={(ids) => setInterests(() => [...ids])} isLoading={interestsLoading} triggerElement={ -
    +
    {interests.length > 0 ? ( interests.map((id) => ( setOccupations(id || '')} isLoading={occupationsLoading} triggerElement={ -
    +
    +
    {isLoading ? (
    درحال بارگذاری... diff --git a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx index 9f1325035..3ca3afa01 100644 --- a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx +++ b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx @@ -99,7 +99,7 @@ export default function JalaliDatePicker({ className="flex items-center justify-between w-full p-3 text-right transition-colors hover:bg-content" >
    -
    +
    -
    +
    +
    -
    -
    +
    +
    ) } diff --git a/src/layouts/setting/tabs/account/components/profile-display.tsx b/src/layouts/setting/tabs/account/components/profile-display.tsx index 57342ff0c..cbe922d82 100644 --- a/src/layouts/setting/tabs/account/components/profile-display.tsx +++ b/src/layouts/setting/tabs/account/components/profile-display.tsx @@ -128,7 +128,7 @@ export const ProfileDisplay = () => { showEditBadge={showEditBadge} /> -
    +
    } label="نام و نام خانوادگی" @@ -140,7 +140,7 @@ export const ProfileDisplay = () => { /> } + icon={} label="نام کاربری (یوزرنیم)" value={user?.username} editable @@ -239,7 +239,7 @@ export const ProfileDisplay = () => { ))} {user.interests.length > 2 && ( - + +{user.interests.length - 2} )} @@ -255,7 +255,7 @@ export const ProfileDisplay = () => { /> } + icon={} label="شهر" value={user?.city?.name || '-'} showBadge={showEditBadge('city')} @@ -334,9 +334,9 @@ const DisplayRow = ({ } return ( -
    +
    -
    +
    {icon} {showBadge && ( diff --git a/src/layouts/setting/tabs/account/components/profile-header.tsx b/src/layouts/setting/tabs/account/components/profile-header.tsx index ee027e9d7..00cdf5fa6 100644 --- a/src/layouts/setting/tabs/account/components/profile-header.tsx +++ b/src/layouts/setting/tabs/account/components/profile-header.tsx @@ -55,7 +55,7 @@ export const ProfileHeader = ({ } return ( -
    +
    setMenuOpen((prev) => !prev)} - className="w-16 h-16 text-2xl transition-all cursor-pointer ring-4 ring-primary/20" + className="w-16 h-16 text-2xl transition-all cursor-pointer ring-4 ring-brand-subtle" /> {error && ( -
    +
    خطا در دریافت اطلاعات
    -
    +
    لطفا اتصال اینترنت خود را بررسی کرده و مجددا تلاش کنید.
    @@ -139,7 +139,7 @@ export function SelectCity({ size }: Prop) { />
    @@ -154,7 +154,7 @@ export function SelectCity({ size }: Prop) {
    handleSelectCity(city)} - className="flex items-center w-full p-3 text-right transition-all duration-200 border-b cursor-pointer border-base-200/30 last:border-b-0 group rounded-2xl hover:bg-primary/20 hover:text-primary" + className="flex items-center w-full p-3 text-right transition-all duration-200 border-b cursor-pointer border-content last:border-b-0 group rounded-2xl hover:bg-brand-subtle hover:text-primary" > )) ) : searchTerm ? ( -
    +
    نتیجه‌ای یافت نشد
    ) : cities && cities.length === 0 ? ( -
    +
    هیچ شهری موجود نیست
    ) : ( -
    +
    شهر مورد نظر خود را جستجو کنید
    )}
    -
    -

    +

    +

    اگه شهر شما تو لیست نبود، لطفا اطلاع بدید تا اضافه بشه🤝

    diff --git a/src/layouts/setting/tabs/general/general.tsx b/src/layouts/setting/tabs/general/general.tsx index de6b45fd4..a0c958dae 100644 --- a/src/layouts/setting/tabs/general/general.tsx +++ b/src/layouts/setting/tabs/general/general.tsx @@ -21,7 +21,7 @@ export function GeneralSettingTab() { title={

    حالت بهینه

    - + جدید
    diff --git a/src/layouts/setting/tabs/privacy/components/search-autocomplete.switch.tsx b/src/layouts/setting/tabs/privacy/components/search-autocomplete.switch.tsx index 55ed381c8..fe2e293bf 100644 --- a/src/layouts/setting/tabs/privacy/components/search-autocomplete.switch.tsx +++ b/src/layouts/setting/tabs/privacy/components/search-autocomplete.switch.tsx @@ -23,7 +23,7 @@ export function SearchAutocompleteSwitch() { } return ( -
    +

    پیشنهادهای جستجو

    diff --git a/src/layouts/setting/tabs/privacy/privacy-settings.tsx b/src/layouts/setting/tabs/privacy/privacy-settings.tsx index 2fbd3853e..8791f33c7 100644 --- a/src/layouts/setting/tabs/privacy/privacy-settings.tsx +++ b/src/layouts/setting/tabs/privacy/privacy-settings.tsx @@ -31,7 +31,7 @@ export function PrivacySettings() {

    -
    +

    آمار و عملکرد افزونه (Analytics) @@ -50,7 +50,7 @@ export function PrivacySettings() {

    {import.meta.env.FIREFOX && ( -
    +

    نمایش آیکون‌های بوکمارک‌ها @@ -69,7 +69,7 @@ export function PrivacySettings() {

    )} -
    +

    دسترسی به بوکمارک‌های مرورگر @@ -89,7 +89,7 @@ export function PrivacySettings() {

    -
    +

    دسترسی به تب‌ها diff --git a/src/layouts/setting/tabs/vip/vip-hero-banner.tsx b/src/layouts/setting/tabs/vip/vip-hero-banner.tsx index fc4fcbc57..ad5eca86f 100644 --- a/src/layouts/setting/tabs/vip/vip-hero-banner.tsx +++ b/src/layouts/setting/tabs/vip/vip-hero-banner.tsx @@ -38,12 +38,12 @@ const VIP_FEATURES: VipFeatureItem[] = [ export function VipHeroBanner() { return ( -
    -
    -
    +
    +
    +
    -
    +
    @@ -65,9 +65,9 @@ export function VipHeroBanner() { {VIP_FEATURES.map((feature) => (
    -
    +
    diff --git a/src/layouts/setting/tabs/vip/vip-plan-card.tsx b/src/layouts/setting/tabs/vip/vip-plan-card.tsx index c10fd70ea..dd925e6dc 100644 --- a/src/layouts/setting/tabs/vip/vip-plan-card.tsx +++ b/src/layouts/setting/tabs/vip/vip-plan-card.tsx @@ -22,10 +22,10 @@ export function VipPlanCard({ plan, isSelected, onSelect }: VipPlanCardProps) { className={cn( 'relative flex flex-col justify-between p-3.5 rounded-2xl border transition-all text-right min-h-24 group', isClaimed - ? 'opacity-65 border-base-content/20 bg-base-300/10 cursor-not-allowed saturate-50' + ? 'opacity-65 border-content bg-raised cursor-not-allowed saturate-50' : isSelected - ? 'border-primary bg-primary/5 ring-1 ring-primary shadow-xs cursor-pointer' - : 'border-base-content/10 bg-base-300/20 hover:border-primary/40 hover:bg-base-300/40 cursor-pointer' + ? 'border-primary bg-brand-subtle ring-1 ring-primary shadow-xs cursor-pointer' + : 'border-subtle bg-raised hover:border-brand-subtle hover:bg-raised cursor-pointer' )} > {badge && !isClaimed && ( @@ -48,7 +48,7 @@ export function VipPlanCard({ plan, isSelected, onSelect }: VipPlanCardProps) { )} {isClaimed && ( -
    +
    استفاده شده
    )} @@ -72,10 +72,10 @@ export function VipPlanCard({ plan, isSelected, onSelect }: VipPlanCardProps) { className={cn( 'w-4 h-4 rounded-full border flex items-center justify-center shrink-0 transition-colors', isClaimed - ? 'border-base-content/20 bg-base-300/30 text-muted' + ? 'border-content bg-raised text-muted' : isSelected ? 'border-primary bg-primary text-primary-content' - : 'border-base-content/25 bg-base-300/50 group-hover:border-primary/50' + : 'border-content bg-raised group-hover:border-brand-subtle' )} > {isClaimed ? ( diff --git a/src/layouts/setting/tabs/vip/vip-tab.tsx b/src/layouts/setting/tabs/vip/vip-tab.tsx index 598826c7b..90f2a59fe 100644 --- a/src/layouts/setting/tabs/vip/vip-tab.tsx +++ b/src/layouts/setting/tabs/vip/vip-tab.tsx @@ -106,7 +106,7 @@ export function VipTab() { {Array.from({ length: 2 }).map((_, i) => (
    @@ -132,7 +132,7 @@ export function VipTab() { ))}
    ) : ( -
    +

    در حال حاضر پلن فعالی موجود نیست

    @@ -140,7 +140,7 @@ export function VipTab() { )}
    -
    +
    diff --git a/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx b/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx index 7ab7f0cea..cb28830ed 100644 --- a/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx +++ b/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx @@ -51,7 +51,7 @@ export function CoinPurchaseModal({ title=" " >
    -
    +
    {wallpaper.type === 'IMAGE' ? ( {isAuthenticated && !canAfford && wallpaperPrice > 0 && ( -
    +
    موجودی ویج‌کوین ناکافیه ({wallpaperPrice - userCoins} ویج‌کوین کسری داری) @@ -118,7 +118,9 @@ export function CoinPurchaseModal({ loadingText="در حال خرید..." className="flex-1" rounded="2xl" - color={ canAfford || wallpaperPrice === 0 ? 'primary' : 'base' } + color={ + canAfford || wallpaperPrice === 0 ? 'primary' : 'base' + } > خرید دائمی diff --git a/src/layouts/setting/tabs/wallpapers/components/upload/pro-tooltip.component.tsx b/src/layouts/setting/tabs/wallpapers/components/upload/pro-tooltip.component.tsx index 5333a78a1..5226b306d 100644 --- a/src/layouts/setting/tabs/wallpapers/components/upload/pro-tooltip.component.tsx +++ b/src/layouts/setting/tabs/wallpapers/components/upload/pro-tooltip.component.tsx @@ -7,8 +7,8 @@ interface ProTooltipProps { export function ProTooltipContent({ vipMaxSize }: ProTooltipProps) { return (
    -
    - +
    + امکانات نسخه پرو diff --git a/src/layouts/setting/tabs/wallpapers/components/upload/upload-active.component.tsx b/src/layouts/setting/tabs/wallpapers/components/upload/upload-active.component.tsx index 3570b88c4..a5542773e 100644 --- a/src/layouts/setting/tabs/wallpapers/components/upload/upload-active.component.tsx +++ b/src/layouts/setting/tabs/wallpapers/components/upload/upload-active.component.tsx @@ -24,11 +24,11 @@ export function UploadActive({
    -
    +
    -
    +
    - + {customWallpaper.type === 'IMAGE' ? 'عکس' : 'ویدیو'} @@ -47,7 +47,7 @@ export function UploadActive({

    {isCloudWallpaper ? ( - + همگام‌سازی شده با سرور @@ -56,7 +56,7 @@ export function UploadActive({ content="فقط روی همین مرورگر ذخیره شده و با اکانتت همگام‌سازی نمی‌شه" position="top" > - + ذخیره محلی diff --git a/src/layouts/setting/tabs/wallpapers/components/upload/upload-empty.component.tsx b/src/layouts/setting/tabs/wallpapers/components/upload/upload-empty.component.tsx index 37749e81f..4f0deb673 100644 --- a/src/layouts/setting/tabs/wallpapers/components/upload/upload-empty.component.tsx +++ b/src/layouts/setting/tabs/wallpapers/components/upload/upload-empty.component.tsx @@ -35,7 +35,7 @@ export function UploadEmpty({ onDrop={onDrop} className={cn( 'relative p-3 overflow-hidden transition-all border shadow-xs rounded-2xl border-content bg-content', - isDragging && 'border-primary bg-primary/5' + isDragging && 'border-primary bg-brand-subtle' )} >
    @@ -43,10 +43,10 @@ export function UploadEmpty({
    {isUploading ? ( @@ -80,7 +80,7 @@ export function UploadEmpty({ content={`عکس، گیف و ویدیو تا سقف ${vipMaxSize} مگابایت`} position="top" > - + تا {vipMaxSize} مگابایت @@ -88,7 +88,7 @@ export function UploadEmpty({ content="روی سرور ذخیره می‌شه و روی اکانتت ذخیره می‌مونه" position="top" > - + همگام سازی با اکانت @@ -99,7 +99,7 @@ export function UploadEmpty({ content={`عکس تا ${freeMaxSize} مگابایت روی همین مرورگرت ذخیره می‌شه`} position="top" > - + فقط عکس (تا {freeMaxSize} مگابایت) @@ -115,7 +115,7 @@ export function UploadEmpty({ e.stopPropagation() callEvent('openSettings', 'vip') }} - className="inline-flex items-center gap-1 text-[11px] font-bold text-vip bg-vip/10 border border-vip/20 px-2.5 py-0.5 rounded-xl hover:bg-vip/20 active:scale-95 transition-all cursor-pointer" + className="inline-flex items-center gap-1 text-[11px] font-bold text-vip bg-vip-subtle border border-vip-subtle px-2.5 py-0.5 rounded-xl hover:bg-vip-subtle active:scale-95 transition-all cursor-pointer" > ارتقا به پرو diff --git a/src/layouts/setting/tabs/wallpapers/components/wallpaper-header.tsx b/src/layouts/setting/tabs/wallpapers/components/wallpaper-header.tsx index e18d57d1c..660d1b552 100644 --- a/src/layouts/setting/tabs/wallpapers/components/wallpaper-header.tsx +++ b/src/layouts/setting/tabs/wallpapers/components/wallpaper-header.tsx @@ -2,14 +2,11 @@ import { UploadArea } from './upload-area.component' import { useWallpaperContext } from '@/context/wallpaper.context' export function WallpaperHeader() { - const { - handleCustomWallpaperChange, - handleRemoveCustomWallpaper, - customWallpaper, - } = useWallpaperContext() + const { handleCustomWallpaperChange, handleRemoveCustomWallpaper, customWallpaper } = + useWallpaperContext() return ( -
    +

    تصویر سفارشی @@ -24,9 +21,7 @@ export function WallpaperHeader() {

    تصویر زمینه‌ها

    -

    - تصویر زمینه مورد علاقه‌ت رو انتخاب کن -

    +

    تصویر زمینه مورد علاقه‌ت رو انتخاب کن

    ) diff --git a/src/layouts/setting/tabs/wallpapers/components/wallpaper-sidebar.tsx b/src/layouts/setting/tabs/wallpapers/components/wallpaper-sidebar.tsx index 3ac905f1e..f05ae466a 100644 --- a/src/layouts/setting/tabs/wallpapers/components/wallpaper-sidebar.tsx +++ b/src/layouts/setting/tabs/wallpapers/components/wallpaper-sidebar.tsx @@ -31,10 +31,10 @@ export function WallpaperSidebar({ return (

    - + {PET_SPECIES_LABEL[petType]}
    @@ -187,7 +187,7 @@ export function PetSettings({ instanceId }: PetSettingsProps = {}) { @@ -236,7 +236,7 @@ export function PetSettings({ instanceId }: PetSettingsProps = {}) { onSelect={() => onChangeBackground(item.id)} >
    - + - +
    -
    +
    {isLocked ? ( @@ -138,10 +138,10 @@ export function ImageSearchPortal({ const file = e.dataTransfer.files[0] if (file) handleUpload(file) }} - className="relative flex flex-col items-center justify-center w-full py-6 bg-transparent border-2 border-dashed cursor-pointer group border-base-content/10 rounded-2xl transition-ui hover:border-primary/40 hover:bg-primary/5 focus-visible:focus-ring" + className="relative flex flex-col items-center justify-center w-full py-6 bg-transparent border-2 border-dashed cursor-pointer group border-subtle rounded-2xl transition-ui hover:border-brand-subtle hover:bg-brand-subtle focus-visible:focus-ring" onClick={() => fileInputRef.current?.click()} > -
    +
    -

    +

    یک تصویر را اینجا بکشید یا{' '} فایل را انتخاب کنید

    {isUploading && ( -
    +
    {previewUrl && (
    - + {uploadProgress < 100 ? 'در حال ارسال تصویر...' : 'در حال جستجو در گوگل...'} - + {uploadProgress}%
    -
    +
    -
    -
    +
    +
    ) : showEnableButton ? (
    -
    +

    پیشنهادهای جستجو

    -

    +

    با فعال‌سازی، هنگام تایپ پیشنهادهای هوشمندی داده میشه!

    @@ -159,13 +159,13 @@ export function SearchHistoryPortal({ e.preventDefault() setShowConsentModal(true) }} - className="flex items-center gap-1.5 px-4 py-1.5 text-xs font-medium rounded-xl cursor-pointer bg-base-content/5 text-muted transition-ui hover:text-primary hover:bg-primary/10 focus-visible:focus-ring searchbox-item" + className="flex items-center gap-1.5 px-4 py-1.5 text-xs font-medium rounded-xl cursor-pointer bg-raised text-muted transition-ui hover:text-primary hover:bg-brand-subtle focus-visible:focus-ring searchbox-item" > فعال‌سازی
    ) : ( -

    +

    نتیجه‌ای برای نمایش وجود ندارد

    )} diff --git a/src/layouts/widgets/search/components/suggestion-skeleton.tsx b/src/layouts/widgets/search/components/suggestion-skeleton.tsx index 4af5a0c7f..0744ae27a 100644 --- a/src/layouts/widgets/search/components/suggestion-skeleton.tsx +++ b/src/layouts/widgets/search/components/suggestion-skeleton.tsx @@ -3,9 +3,9 @@ export function SuggestionSkeleton() {
    {Array.from({ length: 4 }).map((_, i) => (
    -
    +
    diff --git a/src/layouts/widgets/search/components/suggestions.tsx b/src/layouts/widgets/search/components/suggestions.tsx index e5dc182a6..41efcdd68 100644 --- a/src/layouts/widgets/search/components/suggestions.tsx +++ b/src/layouts/widgets/search/components/suggestions.tsx @@ -25,7 +25,7 @@ export function Suggestions({
  • diff --git a/src/layouts/widgets/search/components/voice/voice-search-button.tsx b/src/layouts/widgets/search/components/voice/voice-search-button.tsx index 7450bd153..013aa5634 100644 --- a/src/layouts/widgets/search/components/voice/voice-search-button.tsx +++ b/src/layouts/widgets/search/components/voice/voice-search-button.tsx @@ -13,10 +13,10 @@ export function VoiceSearchButton({ onClick }: { onClick: () => void }) { type="button" onClick={onClickHandle} aria-label="جستجوی گفتاری" - className="flex items-center justify-center p-0 transition-all duration-300 bg-transparent border-none rounded-full cursor-pointer h-9 w-9 shrink-0 hover:bg-base-300 group" + className="flex items-center justify-center p-0 transition-all duration-300 bg-transparent border-none rounded-full cursor-pointer h-9 w-9 shrink-0 hover:bg-raised group" >

    {currentTranscript || (selectedLanguage === 'fa-IR' @@ -107,13 +107,13 @@ export function VoiceSearchPortal({ )}

    • -
    +
    +
    +
    diff --git a/src/layouts/widgets/search/variants/search-2x1.tsx b/src/layouts/widgets/search/variants/search-2x1.tsx index 85dee2051..298645c8f 100644 --- a/src/layouts/widgets/search/variants/search-2x1.tsx +++ b/src/layouts/widgets/search/variants/search-2x1.tsx @@ -151,7 +151,7 @@ export function SearchCompactRow() { updatePosition() Analytics.event('search_input_focused_2x1') }} - className="w-full py-1 px-1.5 text-xs font-light text-right focus:outline-none text-content placeholder:text-base-content/60 placeholder:font-medium bg-transparent" + className="w-full py-1 px-1.5 text-xs font-light text-right focus:outline-none text-content placeholder:text-muted placeholder:font-medium bg-transparent" placeholder="جستجو..." aria-label="جستجو" autoComplete="off" @@ -163,7 +163,7 @@ export function SearchCompactRow() { hasQuery ? handleClearSearch : handleSearchButtonClick } aria-label={hasQuery ? 'پاک کردن عبارت جستجو' : 'جستجو'} - className="flex items-center justify-center w-6 h-6 transition-colors rounded-full cursor-pointer shrink-0 hover:bg-base-300" + className="flex items-center justify-center w-6 h-6 transition-colors rounded-full cursor-pointer shrink-0 hover:bg-raised" > -
    +
    @@ -314,7 +314,7 @@ export function ExpandableTodoInput({ } > -
    -
    +
    +
    @@ -371,7 +371,7 @@ export function ExpandableTodoInput({
    -
    +
    {fetchedTags ?.filter((tag) => tag.trim()) @@ -387,7 +387,7 @@ export function ExpandableTodoInput({ {tag} diff --git a/src/layouts/widgets/todos/components/friend-item.tsx b/src/layouts/widgets/todos/components/friend-item.tsx index 4ae0b2798..de3d411d6 100644 --- a/src/layouts/widgets/todos/components/friend-item.tsx +++ b/src/layouts/widgets/todos/components/friend-item.tsx @@ -15,7 +15,7 @@ export function UserItem({ avatar, completed, isOwner, name }: UserItemProp) {
    {completed && ( -
    +
    )} {isOwner && ( -
    +
    )} diff --git a/src/layouts/widgets/todos/components/priority-dropdown.tsx b/src/layouts/widgets/todos/components/priority-dropdown.tsx index 8a2767818..4bd23a7df 100644 --- a/src/layouts/widgets/todos/components/priority-dropdown.tsx +++ b/src/layouts/widgets/todos/components/priority-dropdown.tsx @@ -7,22 +7,22 @@ const priorityOptions = [ value: TodoPriority.Low, label: 'کم اهمیت', color: 'text-success', - bg: 'bg-success/10', - border: 'border-success/20', + bg: 'bg-success-subtle', + border: 'border-success-subtle', }, { value: TodoPriority.Medium, label: 'متوسط', color: 'text-warning', - bg: 'bg-warning/10', - border: 'border-warning/20', + bg: 'bg-warning-subtle', + border: 'border-warning-subtle', }, { value: TodoPriority.High, label: 'مهم', color: 'text-error', - bg: 'bg-error/10', - border: 'border-error/20', + bg: 'bg-danger-subtle', + border: 'border-danger-subtle', }, ] @@ -43,7 +43,7 @@ export function PriorityDropdown({ priority, setPriority }: PriorityDropdownProp className={`p-2 border shrink-0 active:scale-95 transition-colors ${ selected ? `${selected.bg} ${selected.color} ${selected.border}` - : 'text-base-content/40 hover:text-primary/60' + : 'text-subtle hover:text-brand' }`} > @@ -51,13 +51,13 @@ export function PriorityDropdown({ priority, setPriority }: PriorityDropdownProp } position="top-left" > -
    +
    diff --git a/src/layouts/widgets/todos/components/todo-item.tsx b/src/layouts/widgets/todos/components/todo-item.tsx index ea8091c35..75d695382 100644 --- a/src/layouts/widgets/todos/components/todo-item.tsx +++ b/src/layouts/widgets/todos/components/todo-item.tsx @@ -114,7 +114,7 @@ export function TodoItem({ const hasFriends = currentTodo?.friends && currentTodo?.friends?.length > 0 return (
    {expanded && ( -
    +

    {currentTodo.text}

    @@ -242,7 +242,7 @@ export function TodoItem({ )}
    {currentTodo.category && ( - + @@ -267,7 +267,7 @@ export function TodoItem({
    {currentTodo.description && ( -
    +
    )} diff --git a/src/layouts/widgets/todos/components/todo-skeleton.tsx b/src/layouts/widgets/todos/components/todo-skeleton.tsx index a805e3b99..aabed15f8 100644 --- a/src/layouts/widgets/todos/components/todo-skeleton.tsx +++ b/src/layouts/widgets/todos/components/todo-skeleton.tsx @@ -2,7 +2,7 @@ export function TodoSkeleton() { return (