fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Force aqua light theme tokens and remove color hardcode

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-02 14:34:04 +07:00
parent bc11b878cb
commit 2b9d816758
2 changed files with 44 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/assets/css/main.css
View File

@@ -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 {

38
tailwind.config.ts
View File

@@ -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;