valknar/pastel-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tailwind

Browse Source
This commit is contained in:
valknarness
2025-11-07 13:32:17 +01:00
parent 494b2a450b
commit 74ba6cf47d
5 changed files with 597 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
app/globals.css
View File

@@ -1,61 +1,96 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
@source "../components/color/*.{js,ts,jsx,tsx}";
@source "../components/layout/*.{js,ts,jsx,tsx}";
@source "../components/providers/*.{js,ts,jsx,tsx}";
@source "../components/tools/*.{js,ts,jsx,tsx}";
@source "../components/ui/*.{js,ts,jsx,tsx}";
@source "./playground/*.{js,ts,jsx,tsx}";
@source "./playground/distinct/*.{js,ts,jsx,tsx}";
@source "./playground/gradient/*.{js,ts,jsx,tsx}";
@source "./playground/harmony/*.{js,ts,jsx,tsx}";
@source "./names/*.{js,ts,jsx,tsx}";
@source "./batch/*.{js,ts,jsx,tsx}";
@source "./accessibility/*.{js,ts,jsx,tsx}";
@source "./accessibility/colorblind/*.{js,ts,jsx,tsx}";
@source "./accessibility/contrast/*.{js,ts,jsx,tsx}";
@source "*.{js,ts,jsx,tsx}";
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
/* Theme Configuration */
@theme {
/* Light mode colors */
--color-background: oklch(100% 0 0);
--color-foreground: oklch(9.8% 0.038 285.8);
--color-card: oklch(100% 0 0);
--color-card-foreground: oklch(9.8% 0.038 285.8);
--color-popover: oklch(100% 0 0);
--color-popover-foreground: oklch(9.8% 0.038 285.8);
--color-primary: oklch(22.4% 0.053 285.8);
--color-primary-foreground: oklch(98% 0.016 240);
--color-secondary: oklch(96.1% 0.016 240);
--color-secondary-foreground: oklch(22.4% 0.053 285.8);
--color-muted: oklch(96.1% 0.016 240);
--color-muted-foreground: oklch(46.9% 0.025 244.1);
--color-accent: oklch(96.1% 0.016 240);
--color-accent-foreground: oklch(22.4% 0.053 285.8);
--color-destructive: oklch(60.2% 0.168 29.2);
--color-destructive-foreground: oklch(98% 0.016 240);
--color-border: oklch(91.4% 0.026 243.1);
--color-input: oklch(91.4% 0.026 243.1);
--color-ring: oklch(9.8% 0.038 285.8);
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* Custom Animations */
--animate-fade-in: fadeIn 0.3s ease-in-out;
--animate-slide-up: slideUp 0.4s ease-out;
--animate-slide-down: slideDown 0.4s ease-out;
--animate-slide-in-right: slideInRight 0.3s ease-out;
--animate-slide-in-left: slideInLeft 0.3s ease-out;
--animate-scale-in: scaleIn 0.2s ease-out;
--animate-bounce-gentle: bounceGentle 0.5s ease-in-out;
--animate-shimmer: shimmer 2s infinite;
}
/* Dark mode colors */
@media (prefers-color-scheme: dark) {
@theme {
--color-background: oklch(9.8% 0.038 285.8);
--color-foreground: oklch(98% 0.016 240);
--color-card: oklch(9.8% 0.038 285.8);
--color-card-foreground: oklch(98% 0.016 240);
--color-popover: oklch(9.8% 0.038 285.8);
--color-popover-foreground: oklch(98% 0.016 240);
--color-primary: oklch(98% 0.016 240);
--color-primary-foreground: oklch(22.4% 0.053 285.8);
--color-secondary: oklch(17.5% 0.036 242.3);
--color-secondary-foreground: oklch(98% 0.016 240);
--color-muted: oklch(17.5% 0.036 242.3);
--color-muted-foreground: oklch(65.1% 0.031 244);
--color-accent: oklch(17.5% 0.036 242.3);
--color-accent-foreground: oklch(98% 0.016 240);
--color-destructive: oklch(30.6% 0.125 29.2);
--color-destructive-foreground: oklch(98% 0.016 240);
--color-border: oklch(17.5% 0.036 242.3);
--color-input: oklch(17.5% 0.036 242.3);
--color-ring: oklch(83.9% 0.031 243.7);
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
/* Base Styles */
* {
border-color: var(--color-border);
}
body {
background-color: var(--color-background);
color: var(--color-foreground);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Smooth transitions for theme switching */
@@ -82,13 +117,110 @@ html {
}
::-webkit-scrollbar-track {
@apply bg-background;
background-color: var(--color-background);
}
::-webkit-scrollbar-thumb {
@apply bg-muted-foreground/20 rounded-lg;
background-color: color-mix(in oklch, var(--color-muted-foreground) 20%, transparent);
border-radius: var(--radius-lg);
}
::-webkit-scrollbar-thumb:hover {
@apply bg-muted-foreground/30;
background-color: color-mix(in oklch, var(--color-muted-foreground) 30%, transparent);
}
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Animation Keyframes */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideDown {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translateX(-20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInLeft {
from {
transform: translateX(20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes scaleIn {
from {
transform: scale(0.95);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes bounceGentle {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes shimmer {
from {
background-position: -1000px 0;
}
to {
background-position: 1000px 0;
}
}