fixing light mode

This commit is contained in:
Chris Cochrun 2025-07-03 11:04:46 -05:00
parent 5ac44d6784
commit e0f9c978c1
6 changed files with 103 additions and 39 deletions

View file

@ -8,6 +8,7 @@
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--color-blue-200: oklch(88.2% 0.059 254.128);
--color-blue-300: oklch(80.9% 0.105 251.813);
--color-blue-400: oklch(70.7% 0.165 254.624);
--color-blue-500: oklch(62.3% 0.214 259.815);
--color-blue-600: oklch(54.6% 0.245 262.881);
@ -328,6 +329,9 @@
.my-8 {
margin-block: calc(var(--spacing) * 8);
}
.mt-0 {
margin-top: calc(var(--spacing) * 0);
}
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
@ -743,6 +747,9 @@
.bg-blue-700 {
background-color: var(--color-blue-700);
}
.bg-blue-800 {
background-color: var(--color-blue-800);
}
.bg-gray-100 {
background-color: var(--color-gray-100);
}
@ -973,6 +980,11 @@
color: var(--color-gray-300);
}
}
.placeholder-gray-900 {
&::placeholder {
color: var(--color-gray-900);
}
}
.opacity-0 {
opacity: 0%;
}
@ -1156,6 +1168,11 @@
color: var(--color-gray-500);
}
}
.checked\:text-gray-900 {
&:checked {
color: var(--color-gray-900);
}
}
.invalid\:text-\[\#F39\] {
&:invalid {
color: #F39;
@ -1181,6 +1198,20 @@
}
}
}
.hover\:\!bg-blue-200 {
&:hover {
@media (hover: hover) {
background-color: var(--color-blue-200) !important;
}
}
}
.hover\:\!bg-blue-300 {
&:hover {
@media (hover: hover) {
background-color: var(--color-blue-300) !important;
}
}
}
.hover\:\!bg-blue-500 {
&:hover {
@media (hover: hover) {
@ -1188,6 +1219,13 @@
}
}
}
.hover\:\!bg-blue-700 {
&:hover {
@media (hover: hover) {
background-color: var(--color-blue-700) !important;
}
}
}
.hover\:bg-blue-900 {
&:hover {
@media (hover: hover) {
@ -1209,6 +1247,13 @@
}
}
}
.hover\:bg-gray-400 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-400);
}
}
}
.hover\:bg-gray-600 {
&:hover {
@media (hover: hover) {
@ -1652,16 +1697,16 @@
background-color: #ef4444;
}
}
.dark\:bg-blue-700 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-blue-700);
}
}
.dark\:bg-blue-800 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-blue-800);
}
}
.dark\:bg-gray-500 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-500);
}
}
.dark\:bg-gray-700 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-700);
@ -1682,6 +1727,11 @@
color: var(--color-blue-200);
}
}
.dark\:text-gray-50 {
@media (prefers-color-scheme: dark) {
color: var(--color-gray-50);
}
}
.dark\:text-gray-200 {
@media (prefers-color-scheme: dark) {
color: var(--color-gray-200);
@ -1702,6 +1752,20 @@
color: var(--color-white);
}
}
.dark\:placeholder-gray-300 {
@media (prefers-color-scheme: dark) {
&::placeholder {
color: var(--color-gray-300);
}
}
}
.dark\:checked\:text-gray-500 {
@media (prefers-color-scheme: dark) {
&:checked {
color: var(--color-gray-500);
}
}
}
.dark\:hover\:\!bg-blue-700 {
@media (prefers-color-scheme: dark) {
&:hover {