From 2b9d816758fd2b02975d8709d77e8493b1c89cc5 Mon Sep 17 00:00:00 2001 From: Ruslan Bakiev <572431+veikab@users.noreply.github.com> Date: Thu, 2 Apr 2026 14:34:04 +0700 Subject: [PATCH] Force aqua light theme tokens and remove color hardcode --- app/assets/css/main.css | 50 +++++++++++++++++++++++++++++++++++------ tailwind.config.ts | 38 +------------------------------ 2 files changed, 44 insertions(+), 44 deletions(-) diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 509ed8c..b4e318d 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -13,14 +13,46 @@ --brand-ink: #0f2f20; } +[data-theme='aqua'] { + color-scheme: light; + --color-base-100: oklch(98% 0.002 247.839); + --color-base-200: oklch(96% 0.003 264.542); + --color-base-300: oklch(92% 0.006 264.531); + --color-base-content: oklch(21% 0.034 264.665); + --color-primary: oklch(84% 0.238 128.85); + --color-primary-content: oklch(27% 0.072 132.109); + --color-secondary: oklch(71% 0.202 349.761); + --color-secondary-content: oklch(28% 0.109 3.907); + --color-accent: oklch(67% 0.182 276.935); + --color-accent-content: oklch(25% 0.09 281.288); + --color-neutral: oklch(13% 0.028 261.692); + --color-neutral-content: oklch(98% 0.002 247.839); + --color-info: oklch(68% 0.169 237.323); + --color-info-content: oklch(97% 0.013 236.62); + --color-success: oklch(76% 0.233 130.85); + --color-success-content: oklch(98% 0.031 120.757); + --color-warning: oklch(70% 0.213 47.604); + --color-warning-content: oklch(98% 0.016 73.684); + --color-error: oklch(65% 0.241 354.308); + --color-error-content: oklch(97% 0.014 343.198); + --radius-selector: 2rem; + --radius-field: 2rem; + --radius-box: 2rem; + --size-selector: 0.3125rem; + --size-field: 0.3125rem; + --border: 0.5px; + --depth: 0; + --noise: 1; +} + body { font-family: 'Manrope', 'Segoe UI', sans-serif; @apply text-base-content; background: - radial-gradient(circle at 8% 10%, rgba(19, 153, 87, 0.3), transparent 35%), - radial-gradient(circle at 92% 0%, rgba(255, 86, 0, 0.16), transparent 28%), - linear-gradient(160deg, #f7fcf9 0%, #edf7f0 44%, #f4fbf7 100%); - color: var(--brand-ink); + radial-gradient(circle at 8% 10%, color-mix(in oklab, var(--color-primary) 20%, transparent), transparent 35%), + radial-gradient(circle at 92% 0%, color-mix(in oklab, var(--color-secondary) 14%, transparent), transparent 28%), + linear-gradient(160deg, var(--color-base-100) 0%, var(--color-base-200) 56%, var(--color-base-100) 100%); + color: var(--color-base-content); } .lk-shell { @@ -28,9 +60,13 @@ body { } .surface-card { - border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, #ffffff 84%); - background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(244, 251, 247, 0.9)); - box-shadow: 0 20px 48px rgba(13, 133, 74, 0.1); + border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, var(--color-base-100)); + background: linear-gradient( + 160deg, + color-mix(in oklab, var(--color-base-100) 90%, white), + color-mix(in oklab, var(--color-base-200) 86%, white) + ); + box-shadow: 0 20px 48px color-mix(in oklab, var(--color-primary) 14%, transparent); } .glass-capsule { diff --git a/tailwind.config.ts b/tailwind.config.ts index b718c34..07e4270 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -12,43 +12,7 @@ export default { }, plugins: [daisyui], daisyui: { - themes: [ - { - aqua: { - 'color-scheme': 'light', - 'base-100': 'oklch(98% 0.002 247.839)', - 'base-200': 'oklch(96% 0.003 264.542)', - 'base-300': 'oklch(92% 0.006 264.531)', - 'base-content': 'oklch(21% 0.034 264.665)', - primary: 'oklch(84% 0.238 128.85)', - 'primary-content': 'oklch(27% 0.072 132.109)', - secondary: 'oklch(71% 0.202 349.761)', - 'secondary-content': 'oklch(28% 0.109 3.907)', - accent: 'oklch(67% 0.182 276.935)', - 'accent-content': 'oklch(25% 0.09 281.288)', - neutral: 'oklch(13% 0.028 261.692)', - 'neutral-content': 'oklch(98% 0.002 247.839)', - info: 'oklch(68% 0.169 237.323)', - 'info-content': 'oklch(97% 0.013 236.62)', - success: 'oklch(76% 0.233 130.85)', - 'success-content': 'oklch(98% 0.031 120.757)', - warning: 'oklch(70% 0.213 47.604)', - 'warning-content': 'oklch(98% 0.016 73.684)', - error: 'oklch(65% 0.241 354.308)', - 'error-content': 'oklch(97% 0.014 343.198)', - '--radius-selector': '2rem', - '--radius-field': '2rem', - '--radius-box': '2rem', - '--size-selector': '0.3125rem', - '--size-field': '0.3125rem', - '--border': '0.5px', - '--depth': '0', - '--noise': '1', - }, - }, - 'light', - 'corporate', - ], + themes: ['aqua', 'light', 'corporate'], darkTheme: 'aqua', }, } satisfies Config;