Co-Authored-By: Ingmar van Hulzen <13165062+ingmarvanhulzen@users.noreply.github.com>
This commit is contained in:
Timothy Jaeryang Baek
2026-02-28 13:46:30 -06:00
parent e9b5eb6ed3
commit 2d27ef4ece
2 changed files with 22 additions and 19 deletions

View File

@@ -2,6 +2,21 @@
@config '../tailwind.config.js'; @config '../tailwind.config.js';
@theme {
--color-gray-50: oklch(0.98 0 0);
--color-gray-100: oklch(0.94 0 0);
--color-gray-200: oklch(0.92 0 0);
--color-gray-300: oklch(0.85 0 0);
--color-gray-400: oklch(0.77 0 0);
--color-gray-500: oklch(0.69 0 0);
--color-gray-600: oklch(0.51 0 0);
--color-gray-700: oklch(0.42 0 0);
--color-gray-800: oklch(0.32 0 0);
--color-gray-850: oklch(0.27 0 0);
--color-gray-900: oklch(0.2 0 0);
--color-gray-950: oklch(0.16 0 0);
}
/* /*
The default border color has changed to `currentColor` in Tailwind CSS v4, The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still so we've added these compatibility styles to make sure everything still
@@ -11,6 +26,7 @@
color utility to any element that depends on these defaults. color utility to any element that depends on these defaults.
*/ */
@layer base { @layer base {
*, *,
::after, ::after,
::before, ::before,
@@ -21,6 +37,7 @@
} }
@layer base { @layer base {
html, html,
pre { pre {
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Vazirmatn', ui-sans-serif, system-ui, font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Vazirmatn', ui-sans-serif, system-ui,
@@ -47,9 +64,11 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
input[type='checkbox']:checked { input[type='checkbox']:checked {
@apply bg-blue-600 border-blue-600; @apply bg-blue-600 border-blue-600;
} }
input[type='checkbox']:after { input[type='checkbox']:after {
content: ''; content: '';
display: block; display: block;
@@ -63,12 +82,12 @@
left: 0; left: 0;
pointer-events: none; pointer-events: none;
/* SVG checkmark as background image */ /* SVG checkmark as background image */
background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 8l3 3l5-5"/></svg>') background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 8l3 3l5-5"/></svg>') center/80% no-repeat;
center/80% no-repeat;
} }
input[type='checkbox']:checked:after { input[type='checkbox']:checked:after {
opacity: 1; opacity: 1;
} }
} }
@custom-variant hover (&:hover); @custom-variant hover (&:hover);

View File

@@ -7,22 +7,6 @@ export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
theme: { theme: {
extend: { extend: {
colors: {
gray: {
50: 'var(--color-gray-50, #f9f9f9)',
100: 'var(--color-gray-100, #ececec)',
200: 'var(--color-gray-200, #e3e3e3)',
300: 'var(--color-gray-300, #cdcdcd)',
400: 'var(--color-gray-400, #b4b4b4)',
500: 'var(--color-gray-500, #9b9b9b)',
600: 'var(--color-gray-600, #676767)',
700: 'var(--color-gray-700, #4e4e4e)',
800: 'var(--color-gray-800, #333)',
850: 'var(--color-gray-850, #262626)',
900: 'var(--color-gray-900, #171717)',
950: 'var(--color-gray-950, #0d0d0d)'
}
},
typography: { typography: {
DEFAULT: { DEFAULT: {
css: { css: {