chore: update dependencies and configuration for Tailwind CSS
- Added "@tailwindcss/postcss" to package.json dependencies. - Updated "tailwindcss" version to "^4.3.0" in package.json. - Modified postcss.config.mjs to use "@tailwindcss/postcss" instead of "tailwindcss". - Changed darkMode configuration in tailwind.config.ts to a string format.
This commit is contained in:
Poyraz Avsever
+73
-57
@@ -1,67 +1,81 @@
|
||||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
@import "tailwindcss";
|
||||
@import "poyraz-ui/preset.css";
|
||||
|
||||
@source "../app/**/*.{js,ts,jsx,tsx,mdx}";
|
||||
@source "../components/**/*.{js,ts,jsx,tsx,mdx}";
|
||||
@source "../config/**/*.{js,ts,jsx,tsx,mdx}";
|
||||
|
||||
@layer base {
|
||||
:root, .dark {
|
||||
/* Deeper premium dark mode background */
|
||||
--background: #120D1C;
|
||||
--background-dark: #0A0710;
|
||||
--foreground: #FBF9FE;
|
||||
|
||||
--card: #1F172B;
|
||||
--card-foreground: #FBF9FE;
|
||||
|
||||
--popover: #1F172B;
|
||||
--popover-foreground: #FBF9FE;
|
||||
|
||||
--primary: #6C5BB0;
|
||||
--primary-foreground: #FFFFFF;
|
||||
--primary-hover: #594D9F;
|
||||
--primary-pressed: #493D90;
|
||||
|
||||
--secondary: #2B2538;
|
||||
--secondary-foreground: #C0B8D6;
|
||||
|
||||
--muted: #3B3448;
|
||||
--muted-foreground: #8F89A5;
|
||||
|
||||
--accent: #3B3448;
|
||||
--accent-foreground: #FBF9FE;
|
||||
|
||||
--destructive: #d8644a;
|
||||
--destructive-foreground: #FBF9FE;
|
||||
|
||||
--border: #3B3448;
|
||||
--input: #3B3448;
|
||||
--input-bg: #1A1325;
|
||||
--overlay: #000000;
|
||||
|
||||
--ring: #6C5BB0;
|
||||
|
||||
--radius: 0.75rem;
|
||||
:root {
|
||||
--poyraz-background: #ffffff;
|
||||
--poyraz-foreground: #101828;
|
||||
--poyraz-primary: #dc2626;
|
||||
--poyraz-primary-foreground: #ffffff;
|
||||
--poyraz-primary-hover: #b91c1c;
|
||||
--poyraz-primary-active: #991b1b;
|
||||
--poyraz-primary-muted: #fef2f2;
|
||||
--poyraz-primary-muted-foreground: #b91c1c;
|
||||
--poyraz-secondary: #f8fafc;
|
||||
--poyraz-secondary-foreground: #101828;
|
||||
--poyraz-muted: #f8fafc;
|
||||
--poyraz-muted-foreground: #667085;
|
||||
--poyraz-accent: #f1f5f9;
|
||||
--poyraz-accent-hover: #e2e8f0;
|
||||
--poyraz-accent-foreground: #101828;
|
||||
--poyraz-border: #e4e7ec;
|
||||
--poyraz-border-strong: #d0d5dd;
|
||||
--poyraz-input: #98a2b3;
|
||||
--poyraz-ring: #dc2626;
|
||||
--poyraz-card: #ffffff;
|
||||
--poyraz-card-foreground: #101828;
|
||||
|
||||
/* Legacy aliases kept until all prototype pages move to Poyraz UI. */
|
||||
--background: var(--poyraz-background);
|
||||
--background-dark: #f8fafc;
|
||||
--foreground: var(--poyraz-foreground);
|
||||
--card: var(--poyraz-card);
|
||||
--card-foreground: var(--poyraz-card-foreground);
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: var(--poyraz-foreground);
|
||||
--primary: var(--poyraz-primary);
|
||||
--primary-foreground: var(--poyraz-primary-foreground);
|
||||
--primary-hover: var(--poyraz-primary-hover);
|
||||
--primary-pressed: var(--poyraz-primary-active);
|
||||
--secondary: var(--poyraz-secondary);
|
||||
--secondary-foreground: var(--poyraz-secondary-foreground);
|
||||
--muted: var(--poyraz-muted);
|
||||
--muted-foreground: var(--poyraz-muted-foreground);
|
||||
--accent: var(--poyraz-accent);
|
||||
--accent-foreground: var(--poyraz-accent-foreground);
|
||||
--destructive: #ef4444;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: var(--poyraz-border);
|
||||
--input: var(--poyraz-input);
|
||||
--input-bg: #ffffff;
|
||||
--overlay: rgba(15, 23, 42, 0.48);
|
||||
--ring: var(--poyraz-ring);
|
||||
--radius: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply text-foreground;
|
||||
background: linear-gradient(135deg, var(--background), var(--background-dark));
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
/* Fix for Chrome autofill turning inputs yellow/olive */
|
||||
|
||||
body {
|
||||
@apply min-h-screen bg-background text-foreground antialiased;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
|
||||
-webkit-text-fill-color: var(--foreground) !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
-webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
|
||||
-webkit-text-fill-color: var(--foreground) !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,15 +84,17 @@
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.tiny-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tiny-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: theme('colors.primary.DEFAULT' / 30%);
|
||||
background: color-mix(in srgb, var(--poyraz-primary) 30%, transparent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tiny-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: theme('colors.primary.DEFAULT' / 60%);
|
||||
background: color-mix(in srgb, var(--poyraz-primary) 55%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user