138 lines
4.6 KiB
CSS
138 lines
4.6 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@config '../../tailwind.config.mjs';
|
|
|
|
/*
|
|
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
|
|
'secondary-content': 'rgb(var(--color-secondary-content) / <alpha-value>)',
|
|
neutral: 'rgb(var(--color-neutral) / <alpha-value>)',
|
|
'neutral-content': 'rgb(var(--color-neutral-content) / <alpha-value>)',
|
|
*/
|
|
|
|
@source inline("bg-primary");
|
|
@source inline("text-primary-content");
|
|
@source inline("bg-secondary");
|
|
@source inline("text-secondary-content");
|
|
@source inline("bg-neutral");
|
|
@source inline("text-neutral-content");
|
|
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
|
|
|
@theme {
|
|
--font-sans: "Inclusive Sans", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
--text-sm: 0.750rem;
|
|
--text-sm--line-height: inherit;
|
|
--text-base: 1rem;
|
|
--text-base--line-height: inherit;
|
|
--text-lg: 1.1rem;
|
|
--text-lg--line-height: inherit;
|
|
--text-xl: 1.333rem;
|
|
--text-xl--line-height: inherit;
|
|
--text-2xl: 1.777rem;
|
|
--text-2xl--line-height: inhert;
|
|
--text-3xl: 2.369rem;
|
|
--text-3xl--line-height: inherit;
|
|
--text-4xl: 3.158rem;
|
|
--text-4xl--line-height: inherit;
|
|
--text-5xl: 4.210rem;
|
|
--text-5xl--line-height: 1.5;
|
|
}
|
|
@theme inline {
|
|
--color-primary: var(--color-primary);
|
|
--color-primary-content: var(--color-primary-content);
|
|
--color-secondary: var(--color-secondary);
|
|
--color-secondary-content: var(--color-secondary-content);
|
|
--color-neutral: var(--color-neutral);
|
|
--color-neutral-content: var(--color-neutral-content);
|
|
--color-base-100: var(--color-base-100);
|
|
--color-base-200: var(--color-base-200);
|
|
--color-base-300: var(--color-base-300);
|
|
--color-base-content: var(--color-base-content);
|
|
}
|
|
|
|
/*
|
|
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
|
so we've added these compatibility styles to make sure everything still
|
|
looks the same as it did with Tailwind CSS v3.
|
|
|
|
If we ever want to remove these styles, we need to add an explicit border
|
|
color utility to any element that depends on these defaults.
|
|
*/
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentcolor);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
html, body {
|
|
@apply bg-base-100 text-base-content;
|
|
}
|
|
|
|
html, body,
|
|
header, footer, main, article, section,
|
|
div, span {
|
|
@apply transition-colors ease-linear duration-300;
|
|
}
|
|
|
|
:root {
|
|
--color-primary: oklch(0.44 0.225 308.029);
|
|
--color-primary-content: white;
|
|
--color-secondary: oklch(0.72 0.156 108.484);
|
|
--color-secondary-content: black;
|
|
--color-neutral: oklch(0.894 0.047 304.647);
|
|
--color-neutral-content: black;
|
|
|
|
--color-base-100: oklch(0.166 0.01 107.442);
|
|
--color-base-200: oklch(0.212 0.01 107.187);
|
|
--color-base-300: oklch(0.315 0.009 106.888);
|
|
--color-base-content: white;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--color-primary: oklch(0.662 0.252 311.98);
|
|
--color-primary-content: black;
|
|
--color-secondary: oklch(0.965 0.182 108.376);
|
|
--color-secondary-content: black;
|
|
--color-neutral: oklch(0.183 0.064 299.534);
|
|
--color-neutral-content: white;
|
|
|
|
--color-base-100: oklch(0.952 0.013 106.649);
|
|
--color-base-200: oklch(0.907 0.013 106.664);
|
|
--color-base-300: oklch(0.846 0.014 106.688);
|
|
--color-base-content: black;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--color-primary: oklch(0.662 0.252 311.98);
|
|
--color-primary-content: black;
|
|
--color-secondary: oklch(0.965 0.182 108.376);
|
|
--color-secondary-content: black;
|
|
--color-neutral: oklch(0.183 0.064 299.534);
|
|
--color-neutral-content: white;
|
|
|
|
--color-base-100: oklch(0.952 0.013 106.649);
|
|
--color-base-200: oklch(0.907 0.013 106.664);
|
|
--color-base-300: oklch(0.846 0.014 106.688);
|
|
--color-base-content: black;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--color-primary: oklch(0.44 0.225 308.029);
|
|
--color-primary-content: white;
|
|
--color-secondary: oklch(0.72 0.156 108.484);
|
|
--color-secondary-content: black;
|
|
--color-neutral: oklch(0.894 0.047 304.647);
|
|
--color-neutral-content: black;
|
|
|
|
--color-base-100: oklch(0.166 0.01 107.442);
|
|
--color-base-200: oklch(0.212 0.01 107.187);
|
|
--color-base-300: oklch(0.315 0.009 106.888);
|
|
--color-base-content: white;
|
|
}
|
|
}
|
|
} |