@import 'tailwindcss';
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
/* ==================== Light Mode Variables ==================== */
|
:root {
|
/* Base Colors */
|
--art-color: #ffffff;
|
--theme-color: var(--main-color);
|
|
/* Theme Colors - OKLCH Format */
|
--art-primary: oklch(0.7 0.23 260);
|
--art-secondary: oklch(0.72 0.19 231.6);
|
--art-error: oklch(0.73 0.15 25.3);
|
--art-info: oklch(0.58 0.03 254.1);
|
--art-success: oklch(0.78 0.17 166.1);
|
--art-warning: oklch(0.78 0.14 75.5);
|
--art-danger: oklch(0.68 0.22 25.3);
|
|
/* Gray Scale - Light Mode */
|
--art-gray-100: #f9fafb;
|
--art-gray-200: #f2f4f5;
|
--art-gray-300: #e6eaeb;
|
--art-gray-400: #dbdfe1;
|
--art-gray-500: #949eb7;
|
--art-gray-600: #7987a1;
|
--art-gray-700: #4d5875;
|
--art-gray-800: #383853;
|
--art-gray-900: #323251;
|
|
/* Border Colors */
|
--art-card-border: rgba(0, 0, 0, 0.08);
|
|
--default-border: #e2e8ee;
|
--default-border-dashed: #dbdfe9;
|
|
/* Background Colors */
|
--default-bg-color: #fafbfc;
|
--default-box-color: #ffffff;
|
|
/* Hover Color */
|
--art-hover-color: #edeff0;
|
|
/* Active Color */
|
--art-active-color: #f2f4f5;
|
|
/* Element Component Active Color */
|
--art-el-active-color: #f2f4f5;
|
}
|
|
/* ==================== Dark Mode Variables ==================== */
|
.dark {
|
/* Base Colors */
|
--art-color: #000000;
|
|
/* Gray Scale - Dark Mode */
|
--art-gray-100: #110f0f;
|
--art-gray-200: #17171c;
|
--art-gray-300: #393946;
|
--art-gray-400: #505062;
|
--art-gray-500: #73738c;
|
--art-gray-600: #8f8fa3;
|
--art-gray-700: #ababba;
|
--art-gray-800: #c7c7d1;
|
--art-gray-900: #e3e3e8;
|
|
/* Border Colors */
|
--art-card-border: rgba(255, 255, 255, 0.08);
|
|
--default-border: rgba(255, 255, 255, 0.1);
|
--default-border-dashed: #363843;
|
|
/* Background Colors */
|
--default-bg-color: #070707;
|
--default-box-color: #161618;
|
|
/* Hover Color */
|
--art-hover-color: #252530;
|
|
/* Active Color */
|
--art-active-color: #202226;
|
|
/* Element Component Active Color */
|
--art-el-active-color: #2e2e38;
|
}
|
|
/* ==================== Tailwind Theme Configuration ==================== */
|
@theme {
|
/* Box Color (Light: white / Dark: black) */
|
--color-box: var(--default-box-color);
|
|
/* System Theme Color */
|
--color-theme: var(--theme-color);
|
|
/* Hover Color */
|
--color-hover-color: var(--art-hover-color);
|
|
/* Active Color */
|
--color-active-color: var(--art-active-color);
|
|
/* Active Color */
|
--color-el-active-color: var(--art-active-color);
|
|
/* ElementPlus Theme Colors */
|
--color-primary: var(--art-primary);
|
--color-secondary: var(--art-secondary);
|
--color-error: var(--art-error);
|
--color-info: var(--art-info);
|
--color-success: var(--art-success);
|
--color-warning: var(--art-warning);
|
--color-danger: var(--art-danger);
|
|
/* Gray Scale Colors (Auto-adapts to dark mode) */
|
--color-g-100: var(--art-gray-100);
|
--color-g-200: var(--art-gray-200);
|
--color-g-300: var(--art-gray-300);
|
--color-g-400: var(--art-gray-400);
|
--color-g-500: var(--art-gray-500);
|
--color-g-600: var(--art-gray-600);
|
--color-g-700: var(--art-gray-700);
|
--color-g-800: var(--art-gray-800);
|
--color-g-900: var(--art-gray-900);
|
}
|
|
/* ==================== Custom Border Radius Utilities ==================== */
|
@utility rounded-custom-xs {
|
border-radius: calc(var(--custom-radius) / 2);
|
}
|
|
@utility rounded-custom-sm {
|
border-radius: calc(var(--custom-radius) / 2 + 2px);
|
}
|
|
/* ==================== Custom Utility Classes ==================== */
|
@layer utilities {
|
/* Flexbox Layout Utilities */
|
.flex-c {
|
@apply flex items-center;
|
}
|
|
.flex-b {
|
@apply flex justify-between;
|
}
|
|
.flex-cc {
|
@apply flex items-center justify-center;
|
}
|
|
.flex-cb {
|
@apply flex items-center justify-between;
|
}
|
|
/* Transition Utilities */
|
.tad-200 {
|
@apply transition-all duration-200;
|
}
|
|
.tad-300 {
|
@apply transition-all duration-300;
|
}
|
|
/* Border Utilities */
|
.border-full-d {
|
@apply border border-[var(--default-border)];
|
}
|
|
.border-b-d {
|
@apply border-b border-[var(--default-border)];
|
}
|
|
.border-t-d {
|
@apply border-t border-[var(--default-border)];
|
}
|
|
.border-l-d {
|
@apply border-l border-[var(--default-border)];
|
}
|
|
.border-r-d {
|
@apply border-r border-[var(--default-border)];
|
}
|
|
/* Cursor Utilities */
|
.c-p {
|
@apply cursor-pointer;
|
}
|
}
|
|
/* ==================== Custom Component Classes ==================== */
|
@layer components {
|
/* Art Card Header Component */
|
.art-card-header {
|
@apply flex justify-between pr-6 pb-1;
|
|
.title {
|
h4 {
|
@apply text-lg font-medium text-g-900;
|
}
|
|
p {
|
@apply mt-1 text-sm text-g-600;
|
|
span {
|
@apply ml-2 font-medium;
|
}
|
}
|
}
|
}
|
}
|
