Timothy Yin
02a361488b
feat(dayjs): integrate dayjs for date handling and formatting across the application refactor(routes): update date handling in id-tags, transactions, users, and dashboard routes to use dayjs style(globals): improve CSS variable definitions for better readability and consistency deps: add dayjs as a dependency for date manipulation
95 lines
4.0 KiB
CSS
95 lines
4.0 KiB
CSS
@import "tailwindcss";
|
|
@import "@heroui/styles";
|
|
@source inline("{bg,text,border,ring,stroke,fill}-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}");
|
|
@source inline("hover:{bg,text,border}-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}");
|
|
@source inline("data-[selected]:{bg,text,border}-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}");
|
|
|
|
/*
|
|
* HeroUI Theme Customization
|
|
* Add this to your global.css after importing @heroui/styles
|
|
* Only includes base variables from variables.css
|
|
* @see https://v3.heroui.com/docs/react/getting-started/theming
|
|
*/
|
|
|
|
:root,
|
|
.light,
|
|
.default,
|
|
[data-theme="light"],
|
|
[data-theme="default"] {
|
|
/* Theme Colors (Light Mode) */
|
|
--accent: oklch(62.04% 0.1951 253.83);
|
|
--accent-foreground: oklch(99.11% 0 0);
|
|
--background: oklch(97.02% 0.0069 253.83);
|
|
--border: oklch(90% 0.0069 253.83);
|
|
--danger: oklch(65.32% 0.236 25.74);
|
|
--danger-foreground: oklch(99.11% 0 0);
|
|
--default: oklch(94% 0.0069 253.83);
|
|
--default-foreground: oklch(21.03% 0.0059 253.83);
|
|
--field-background: oklch(100% 0.0034 253.83);
|
|
--field-foreground: oklch(21.03% 0.0069 253.83);
|
|
--field-placeholder: oklch(55.17% 0.0138 253.83);
|
|
--focus: oklch(62.04% 0.1951 253.83);
|
|
--foreground: oklch(21.03% 0.0069 253.83);
|
|
--muted: oklch(55.17% 0.0138 253.83);
|
|
--overlay: oklch(100% 0.0021 253.83);
|
|
--overlay-foreground: oklch(21.03% 0.0069 253.83);
|
|
--scrollbar: oklch(87.1% 0.0069 253.83);
|
|
--segment: oklch(100% 0.0069 253.83);
|
|
--segment-foreground: oklch(21.03% 0.0069 253.83);
|
|
--separator: oklch(92% 0.0069 253.83);
|
|
--success: oklch(73.29% 0.1962 150.81);
|
|
--success-foreground: oklch(21.03% 0.0059 150.81);
|
|
--surface: oklch(100% 0.0034 253.83);
|
|
--surface-foreground: oklch(21.03% 0.0069 253.83);
|
|
--surface-secondary: oklch(95.24% 0.0055 253.83);
|
|
--surface-secondary-foreground: oklch(21.03% 0.0069 253.83);
|
|
--surface-tertiary: oklch(93.73% 0.0055 253.83);
|
|
--surface-tertiary-foreground: oklch(21.03% 0.0069 253.83);
|
|
--warning: oklch(78.19% 0.1607 72.33);
|
|
--warning-foreground: oklch(21.03% 0.0059 72.33);
|
|
|
|
/* Border Radius */
|
|
--radius: 0.25rem;
|
|
--field-radius: 0.5rem;
|
|
|
|
/* Font Family */
|
|
/* Make sure to load Saira font in your app */
|
|
--font-sans: "Saira", sans-serif;
|
|
}
|
|
|
|
.dark,
|
|
[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
/* Theme Colors (Dark Mode) */
|
|
--accent: oklch(62.04% 0.1951 253.83);
|
|
--accent-foreground: oklch(99.11% 0 0);
|
|
--background: oklch(12% 0.0069 253.83);
|
|
--border: oklch(28% 0.0069 253.83);
|
|
--danger: oklch(59.4% 0.1994 24.63);
|
|
--danger-foreground: oklch(99.11% 0 0);
|
|
--default: oklch(27.4% 0.0069 253.83);
|
|
--default-foreground: oklch(99.11% 0 0);
|
|
--field-background: oklch(21.03% 0.0138 253.83);
|
|
--field-foreground: oklch(99.11% 0.0069 253.83);
|
|
--field-placeholder: oklch(70.5% 0.0138 253.83);
|
|
--focus: oklch(62.04% 0.1951 253.83);
|
|
--foreground: oklch(99.11% 0.0069 253.83);
|
|
--muted: oklch(70.5% 0.0138 253.83);
|
|
--overlay: oklch(21.03% 0.0138 253.83);
|
|
--overlay-foreground: oklch(99.11% 0.0069 253.83);
|
|
--scrollbar: oklch(70.5% 0.0069 253.83);
|
|
--segment: oklch(39.64% 0.0069 253.83);
|
|
--segment-foreground: oklch(99.11% 0.0069 253.83);
|
|
--separator: oklch(25% 0.0069 253.83);
|
|
--success: oklch(73.29% 0.1962 150.81);
|
|
--success-foreground: oklch(21.03% 0.0059 150.81);
|
|
--surface: oklch(21.03% 0.0138 253.83);
|
|
--surface-foreground: oklch(99.11% 0.0069 253.83);
|
|
--surface-secondary: oklch(25.7% 0.0103 253.83);
|
|
--surface-secondary-foreground: oklch(99.11% 0.0069 253.83);
|
|
--surface-tertiary: oklch(27.21% 0.0103 253.83);
|
|
--surface-tertiary-foreground: oklch(99.11% 0.0069 253.83);
|
|
--warning: oklch(82.03% 0.1407 76.34);
|
|
--warning-foreground: oklch(21.03% 0.0059 76.34);
|
|
}
|