@fakhrirafiki/theme-engine 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +566 -0
- package/dist/index.d.mts +501 -0
- package/dist/index.d.ts +501 -0
- package/dist/index.js +4696 -0
- package/dist/index.mjs +4653 -0
- package/dist/styles/animations.css +103 -0
- package/dist/styles/base.css +151 -0
- package/dist/styles/components.css +135 -0
- package/dist/styles/index.css +43 -0
- package/dist/styles/tailwind.css +105 -0
- package/dist/styles/utilities.css +226 -0
- package/package.json +73 -0
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/* Theme Engine - Beautiful Theme Transition Animations */
|
|
2
|
+
|
|
3
|
+
/* View Transition Wave Effect */
|
|
4
|
+
::view-transition-old(root),
|
|
5
|
+
::view-transition-new(root) {
|
|
6
|
+
animation: none;
|
|
7
|
+
mix-blend-mode: normal;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
::view-transition-old(root) {
|
|
11
|
+
/* Ensure the outgoing view (old theme) is beneath */
|
|
12
|
+
z-index: 0;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
::view-transition-new(root) {
|
|
16
|
+
/* Ensure the incoming view (new theme) is always on top */
|
|
17
|
+
z-index: 1;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Ripple reveal animation for smooth theme transitions */
|
|
21
|
+
@keyframes reveal {
|
|
22
|
+
from {
|
|
23
|
+
/* Use CSS variables for the origin, with explicit fallback */
|
|
24
|
+
clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
|
|
25
|
+
opacity: 0.7;
|
|
26
|
+
}
|
|
27
|
+
to {
|
|
28
|
+
/* Use CSS variables for the origin, with explicit fallback */
|
|
29
|
+
clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
|
|
30
|
+
opacity: 1;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
::view-transition-new(root) {
|
|
35
|
+
/* Apply the reveal animation */
|
|
36
|
+
animation: reveal 0.4s ease-in-out forwards;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Fallback for reduced motion preference - accessibility first */
|
|
40
|
+
@media (prefers-reduced-motion: reduce) {
|
|
41
|
+
::view-transition-old(root),
|
|
42
|
+
::view-transition-new(root) {
|
|
43
|
+
animation: none !important;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Preset button animations - smooth infinite scroll */
|
|
48
|
+
@keyframes scroll-left {
|
|
49
|
+
0% { transform: translateX(0); }
|
|
50
|
+
100% { transform: translateX(-100%); }
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@keyframes scroll-right {
|
|
54
|
+
0% { transform: translateX(-100%); }
|
|
55
|
+
100% { transform: translateX(0); }
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Hover effects for interactive elements */
|
|
59
|
+
.theme-hover-lift {
|
|
60
|
+
transition: all 0.2s ease-in-out;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.theme-hover-lift:hover {
|
|
64
|
+
transform: translateY(-2px);
|
|
65
|
+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Smooth transitions for theme changes */
|
|
69
|
+
.theme-transition {
|
|
70
|
+
transition: background-color 0.3s ease-in-out,
|
|
71
|
+
color 0.3s ease-in-out,
|
|
72
|
+
border-color 0.3s ease-in-out;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Loading states */
|
|
76
|
+
@keyframes pulse {
|
|
77
|
+
0%, 100% {
|
|
78
|
+
opacity: 1;
|
|
79
|
+
}
|
|
80
|
+
50% {
|
|
81
|
+
opacity: 0.5;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.theme-pulse {
|
|
86
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Smooth fade in for theme-dependent elements */
|
|
90
|
+
@keyframes fadeIn {
|
|
91
|
+
from {
|
|
92
|
+
opacity: 0;
|
|
93
|
+
transform: translateY(10px);
|
|
94
|
+
}
|
|
95
|
+
to {
|
|
96
|
+
opacity: 1;
|
|
97
|
+
transform: translateY(0);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.theme-fade-in {
|
|
102
|
+
animation: fadeIn 0.3s ease-in-out;
|
|
103
|
+
}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
/* Theme Engine - Base CSS Variables & Defaults */
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
/* Typography - safe defaults that work across all systems */
|
|
5
|
+
--font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
6
|
+
--font-serif: ui-serif, Georgia, "Times New Roman", serif;
|
|
7
|
+
--font-mono: ui-monospace, "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
|
|
8
|
+
|
|
9
|
+
/* Layout - consistent default border radius */
|
|
10
|
+
--radius: 0.5rem;
|
|
11
|
+
|
|
12
|
+
/* Shadows - minimal, elegant defaults */
|
|
13
|
+
--shadow-color: 0 0% 0%;
|
|
14
|
+
--shadow-opacity: 0.1;
|
|
15
|
+
--shadow-blur: 8px;
|
|
16
|
+
--shadow-spread: 0px;
|
|
17
|
+
--shadow-offset-x: 0px;
|
|
18
|
+
--shadow-offset-y: 2px;
|
|
19
|
+
|
|
20
|
+
/* Spacing - consistent spacing system */
|
|
21
|
+
--letter-spacing: -0.025em;
|
|
22
|
+
--spacing: 0.25rem;
|
|
23
|
+
|
|
24
|
+
/* Default shadcn/ui color system - neutral, professional defaults */
|
|
25
|
+
/* These will be overridden by preset themes */
|
|
26
|
+
--background: 0 0% 100%;
|
|
27
|
+
--foreground: 0 0% 3.9%;
|
|
28
|
+
--card: 0 0% 100%;
|
|
29
|
+
--card-foreground: 0 0% 3.9%;
|
|
30
|
+
--popover: 0 0% 100%;
|
|
31
|
+
--popover-foreground: 0 0% 3.9%;
|
|
32
|
+
--primary: 0 0% 9%;
|
|
33
|
+
--primary-foreground: 0 0% 98%;
|
|
34
|
+
--secondary: 0 0% 96.1%;
|
|
35
|
+
--secondary-foreground: 0 0% 45.1%;
|
|
36
|
+
--muted: 0 0% 96.1%;
|
|
37
|
+
--muted-foreground: 0 0% 45.1%;
|
|
38
|
+
--accent: 0 0% 96.1%;
|
|
39
|
+
--accent-foreground: 0 0% 45.1%;
|
|
40
|
+
--destructive: 0 84.2% 60.2%;
|
|
41
|
+
--destructive-foreground: 0 0% 98%;
|
|
42
|
+
--border: 0 0% 89.8%;
|
|
43
|
+
--input: 0 0% 89.8%;
|
|
44
|
+
--ring: 0 0% 3.9%;
|
|
45
|
+
--chart-1: 12 76% 61%;
|
|
46
|
+
--chart-2: 173 58% 39%;
|
|
47
|
+
--chart-3: 197 37% 24%;
|
|
48
|
+
--chart-4: 43 74% 66%;
|
|
49
|
+
--chart-5: 27 87% 67%;
|
|
50
|
+
|
|
51
|
+
/* Sidebar colors (for dashboard layouts) */
|
|
52
|
+
--sidebar: var(--background);
|
|
53
|
+
--sidebar-foreground: var(--foreground);
|
|
54
|
+
--sidebar-primary: var(--primary);
|
|
55
|
+
--sidebar-primary-foreground: var(--primary-foreground);
|
|
56
|
+
--sidebar-accent: var(--accent);
|
|
57
|
+
--sidebar-accent-foreground: var(--accent-foreground);
|
|
58
|
+
--sidebar-border: var(--border);
|
|
59
|
+
--sidebar-ring: var(--ring);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.dark {
|
|
63
|
+
/* Typography - same as light mode for consistency */
|
|
64
|
+
--font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
65
|
+
--font-serif: ui-serif, Georgia, "Times New Roman", serif;
|
|
66
|
+
--font-mono: ui-monospace, "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
|
|
67
|
+
|
|
68
|
+
/* Layout - consistent with light mode */
|
|
69
|
+
--radius: 0.5rem;
|
|
70
|
+
|
|
71
|
+
/* Shadows - adjusted opacity for dark backgrounds */
|
|
72
|
+
--shadow-color: 0 0% 0%;
|
|
73
|
+
--shadow-opacity: 0.3;
|
|
74
|
+
--shadow-blur: 12px;
|
|
75
|
+
--shadow-spread: 0px;
|
|
76
|
+
--shadow-offset-x: 0px;
|
|
77
|
+
--shadow-offset-y: 4px;
|
|
78
|
+
|
|
79
|
+
/* Spacing - same as light mode */
|
|
80
|
+
--letter-spacing: -0.025em;
|
|
81
|
+
--spacing: 0.25rem;
|
|
82
|
+
|
|
83
|
+
/* Dark mode color system - professional dark theme defaults */
|
|
84
|
+
--background: 0 0% 3.9%;
|
|
85
|
+
--foreground: 0 0% 98%;
|
|
86
|
+
--card: 0 0% 3.9%;
|
|
87
|
+
--card-foreground: 0 0% 98%;
|
|
88
|
+
--popover: 0 0% 3.9%;
|
|
89
|
+
--popover-foreground: 0 0% 98%;
|
|
90
|
+
--primary: 0 0% 98%;
|
|
91
|
+
--primary-foreground: 0 0% 9%;
|
|
92
|
+
--secondary: 0 0% 14.9%;
|
|
93
|
+
--secondary-foreground: 0 0% 63.9%;
|
|
94
|
+
--muted: 0 0% 14.9%;
|
|
95
|
+
--muted-foreground: 0 0% 63.9%;
|
|
96
|
+
--accent: 0 0% 14.9%;
|
|
97
|
+
--accent-foreground: 0 0% 63.9%;
|
|
98
|
+
--destructive: 0 62.8% 30.6%;
|
|
99
|
+
--destructive-foreground: 0 0% 98%;
|
|
100
|
+
--border: 0 0% 14.9%;
|
|
101
|
+
--input: 0 0% 14.9%;
|
|
102
|
+
--ring: 0 0% 83.1%;
|
|
103
|
+
--chart-1: 220 70% 50%;
|
|
104
|
+
--chart-2: 160 60% 45%;
|
|
105
|
+
--chart-3: 30 80% 55%;
|
|
106
|
+
--chart-4: 280 65% 60%;
|
|
107
|
+
--chart-5: 340 75% 55%;
|
|
108
|
+
|
|
109
|
+
/* Sidebar colors - adapted for dark mode */
|
|
110
|
+
--sidebar: var(--background);
|
|
111
|
+
--sidebar-foreground: var(--foreground);
|
|
112
|
+
--sidebar-primary: var(--primary);
|
|
113
|
+
--sidebar-primary-foreground: var(--primary-foreground);
|
|
114
|
+
--sidebar-accent: var(--accent);
|
|
115
|
+
--sidebar-accent-foreground: var(--accent-foreground);
|
|
116
|
+
--sidebar-border: var(--border);
|
|
117
|
+
--sidebar-ring: var(--ring);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Base typography and layout styles */
|
|
121
|
+
body {
|
|
122
|
+
font-family: var(--font-sans);
|
|
123
|
+
background-color: hsl(var(--background));
|
|
124
|
+
color: hsl(var(--foreground));
|
|
125
|
+
letter-spacing: var(--letter-spacing);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* Spacing system: Apply --spacing to common layout elements */
|
|
129
|
+
/* This creates consistent vertical rhythm throughout the application */
|
|
130
|
+
@layer base {
|
|
131
|
+
p:not(:last-child) {
|
|
132
|
+
margin-bottom: var(--spacing);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
ul:not(:last-child), ol:not(:last-child) {
|
|
136
|
+
margin-bottom: var(--spacing);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
li:not(:last-child) {
|
|
140
|
+
margin-bottom: calc(var(--spacing) * 0.5);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
section:not(:last-child) {
|
|
144
|
+
margin-bottom: calc(var(--spacing) * 2);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Utility class for consistent spacing */
|
|
148
|
+
.space-y-spacing > * + * {
|
|
149
|
+
margin-top: var(--spacing);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
/* Theme Engine - Component Styles */
|
|
2
|
+
|
|
3
|
+
/* Theme toggle button - elegant and accessible */
|
|
4
|
+
.theme-toggle {
|
|
5
|
+
position: relative;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
transition: all 0.2s ease-in-out;
|
|
8
|
+
border: 1px solid hsl(var(--border));
|
|
9
|
+
background-color: hsl(var(--background));
|
|
10
|
+
color: hsl(var(--foreground));
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.theme-toggle:hover {
|
|
14
|
+
scale: 1.05;
|
|
15
|
+
background-color: hsl(var(--secondary));
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.theme-toggle:active {
|
|
19
|
+
scale: 0.95;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.theme-toggle:focus-visible {
|
|
23
|
+
outline: 2px solid hsl(var(--ring));
|
|
24
|
+
outline-offset: 2px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Icon transition for theme toggle */
|
|
28
|
+
.theme-toggle-icon {
|
|
29
|
+
transition: all 0.3s ease-in-out;
|
|
30
|
+
color: hsl(var(--foreground));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.theme-toggle[data-theme="light"] .theme-toggle-icon {
|
|
34
|
+
rotate: 0deg;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.theme-toggle[data-theme="dark"] .theme-toggle-icon {
|
|
38
|
+
rotate: 180deg;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* NOTE: ThemePresetButtons now uses Framer Motion + inline styles instead of CSS classes */
|
|
42
|
+
/* Keeping minimal fallback styles for compatibility */
|
|
43
|
+
|
|
44
|
+
/* Color boxes within preset buttons - fallback only */
|
|
45
|
+
.theme-color-box {
|
|
46
|
+
width: 12px;
|
|
47
|
+
height: 12px;
|
|
48
|
+
border-radius: calc(var(--radius) - 4px);
|
|
49
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.dark .theme-color-box {
|
|
53
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Theme status card - for debugging and demos */
|
|
57
|
+
.theme-status-card {
|
|
58
|
+
background-color: hsl(var(--card));
|
|
59
|
+
border: 1px solid hsl(var(--border));
|
|
60
|
+
color: hsl(var(--card-foreground));
|
|
61
|
+
border-radius: var(--radius);
|
|
62
|
+
padding: 1rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.theme-status-card h3 {
|
|
66
|
+
color: hsl(var(--card-foreground));
|
|
67
|
+
margin-bottom: 0.5rem;
|
|
68
|
+
font-weight: 600;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.theme-status-card p {
|
|
72
|
+
color: hsl(var(--muted-foreground));
|
|
73
|
+
font-size: 0.875rem;
|
|
74
|
+
margin-bottom: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Theme showcase sections */
|
|
78
|
+
.theme-showcase-section {
|
|
79
|
+
background-color: hsl(var(--card));
|
|
80
|
+
border: 1px solid hsl(var(--border));
|
|
81
|
+
border-radius: var(--radius);
|
|
82
|
+
padding: 1.5rem;
|
|
83
|
+
margin-bottom: var(--spacing);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.theme-showcase-section h3 {
|
|
87
|
+
color: hsl(var(--card-foreground));
|
|
88
|
+
margin-bottom: 1rem;
|
|
89
|
+
font-size: 1.125rem;
|
|
90
|
+
font-weight: 600;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.theme-showcase-section p {
|
|
94
|
+
color: hsl(var(--muted-foreground));
|
|
95
|
+
margin-bottom: 1rem;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Color palette displays */
|
|
99
|
+
.color-palette-grid {
|
|
100
|
+
display: grid;
|
|
101
|
+
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
102
|
+
gap: 0.75rem;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.color-palette-item {
|
|
106
|
+
text-align: center;
|
|
107
|
+
padding: 0.75rem;
|
|
108
|
+
border-radius: calc(var(--radius) - 2px);
|
|
109
|
+
font-size: 0.75rem;
|
|
110
|
+
font-weight: 500;
|
|
111
|
+
border: 1px solid hsl(var(--border));
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Responsive design helpers */
|
|
115
|
+
@media (max-width: 768px) {
|
|
116
|
+
.theme-preset-button {
|
|
117
|
+
min-width: 120px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.color-palette-grid {
|
|
121
|
+
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* High contrast mode support */
|
|
126
|
+
@media (prefers-contrast: high) {
|
|
127
|
+
.theme-toggle,
|
|
128
|
+
.theme-preset-button {
|
|
129
|
+
border-width: 2px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.theme-color-box {
|
|
133
|
+
border-width: 2px;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Theme Engine - Complete CSS System
|
|
3
|
+
* Elegant theming with smooth transitions for modern React applications
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* Core Foundation - CSS variables and base styles */
|
|
7
|
+
@import "./base.css";
|
|
8
|
+
|
|
9
|
+
/* Beautiful Animations - View transitions and component effects */
|
|
10
|
+
@import "./animations.css";
|
|
11
|
+
|
|
12
|
+
/* Component Styles - Theme toggle and preset components */
|
|
13
|
+
@import "./components.css";
|
|
14
|
+
|
|
15
|
+
/* Dynamic Utilities - Responsive spacing, radius, and shadows */
|
|
16
|
+
@import "./utilities.css";
|
|
17
|
+
|
|
18
|
+
/* Tailwind Integration - Seamless Tailwind CSS compatibility */
|
|
19
|
+
@import "./tailwind.css";
|
|
20
|
+
|
|
21
|
+
/*
|
|
22
|
+
* Usage:
|
|
23
|
+
*
|
|
24
|
+
* 1. Full system (recommended):
|
|
25
|
+
* @import "theme-engine/styles";
|
|
26
|
+
*
|
|
27
|
+
* 2. Selective imports (advanced):
|
|
28
|
+
* @import "theme-engine/styles/base.css";
|
|
29
|
+
* @import "theme-engine/styles/components.css";
|
|
30
|
+
*
|
|
31
|
+
* 3. With Tailwind CSS:
|
|
32
|
+
* @import "tailwindcss";
|
|
33
|
+
* @import "theme-engine/styles";
|
|
34
|
+
*
|
|
35
|
+
* Features included:
|
|
36
|
+
* ✅ Complete CSS variable system (36+ properties)
|
|
37
|
+
* ✅ Light/dark mode defaults with elegant transitions
|
|
38
|
+
* ✅ Dynamic spacing, shadows, and border radius
|
|
39
|
+
* ✅ Beautiful theme preset animations
|
|
40
|
+
* ✅ Accessibility-first design (reduced motion, high contrast)
|
|
41
|
+
* ✅ Tailwind CSS integration with @theme inline
|
|
42
|
+
* ✅ Responsive utilities and typography
|
|
43
|
+
*/
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/* Theme Engine - Tailwind Integration */
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* This file provides seamless integration with Tailwind CSS
|
|
5
|
+
* by mapping CSS variables to Tailwind's color system and utilities
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@theme inline {
|
|
9
|
+
/* Color mappings - Bridge between CSS variables and Tailwind classes */
|
|
10
|
+
--color-background: var(--background);
|
|
11
|
+
--color-foreground: var(--foreground);
|
|
12
|
+
--color-card: var(--card);
|
|
13
|
+
--color-card-foreground: var(--card-foreground);
|
|
14
|
+
--color-popover: var(--popover);
|
|
15
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
16
|
+
--color-primary: var(--primary);
|
|
17
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
18
|
+
--color-secondary: var(--secondary);
|
|
19
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
20
|
+
--color-muted: var(--muted);
|
|
21
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
22
|
+
--color-accent: var(--accent);
|
|
23
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
24
|
+
--color-destructive: var(--destructive);
|
|
25
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
26
|
+
--color-border: var(--border);
|
|
27
|
+
--color-input: var(--input);
|
|
28
|
+
--color-ring: var(--ring);
|
|
29
|
+
|
|
30
|
+
/* Chart colors for data visualization */
|
|
31
|
+
--color-chart-1: var(--chart-1);
|
|
32
|
+
--color-chart-2: var(--chart-2);
|
|
33
|
+
--color-chart-3: var(--chart-3);
|
|
34
|
+
--color-chart-4: var(--chart-4);
|
|
35
|
+
--color-chart-5: var(--chart-5);
|
|
36
|
+
|
|
37
|
+
/* Sidebar colors for dashboard layouts */
|
|
38
|
+
--color-sidebar: var(--sidebar);
|
|
39
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
40
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
41
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
42
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
43
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
44
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
45
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
46
|
+
|
|
47
|
+
/* Dynamic border radius system */
|
|
48
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
49
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
50
|
+
--radius-lg: var(--radius);
|
|
51
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
52
|
+
|
|
53
|
+
/* Typography tracking system */
|
|
54
|
+
--tracking-tighter: calc(var(--letter-spacing) - 0.025em);
|
|
55
|
+
--tracking-tight: var(--letter-spacing);
|
|
56
|
+
--tracking-normal: var(--letter-spacing);
|
|
57
|
+
--tracking-wide: calc(var(--letter-spacing) + 0.025em);
|
|
58
|
+
--tracking-wider: calc(var(--letter-spacing) + 0.05em);
|
|
59
|
+
--tracking-widest: calc(var(--letter-spacing) + 0.1em);
|
|
60
|
+
|
|
61
|
+
/* Font family mappings */
|
|
62
|
+
--font-family-sans: var(--font-sans);
|
|
63
|
+
--font-family-serif: var(--font-serif);
|
|
64
|
+
--font-family-mono: var(--font-mono);
|
|
65
|
+
|
|
66
|
+
/* Spacing system */
|
|
67
|
+
--size-spacing: var(--spacing);
|
|
68
|
+
|
|
69
|
+
/* Shadow system integration */
|
|
70
|
+
--color-shadow: var(--shadow-color);
|
|
71
|
+
--shadow-opacity: var(--shadow-opacity);
|
|
72
|
+
--shadow-blur: var(--shadow-blur);
|
|
73
|
+
--shadow-spread: var(--shadow-spread);
|
|
74
|
+
--shadow-offset-x: var(--shadow-offset-x);
|
|
75
|
+
--shadow-offset-y: var(--shadow-offset-y);
|
|
76
|
+
|
|
77
|
+
/* Dynamic shadow utilities */
|
|
78
|
+
--shadow-xs: var(--shadow-offset-x, 0px) calc(var(--shadow-offset-y, 2px) * 0.5) calc(var(--shadow-blur, 8px) * 0.5) var(--shadow-spread, 0px) hsl(var(--shadow-color, 0 0% 0%) / calc(var(--shadow-opacity, 0.1) * 0.5));
|
|
79
|
+
--shadow-sm: var(--shadow-offset-x, 0px) var(--shadow-offset-y, 2px) var(--shadow-blur, 8px) var(--shadow-spread, 0px) hsl(var(--shadow-color, 0 0% 0%) / var(--shadow-opacity, 0.1));
|
|
80
|
+
--shadow: var(--shadow-offset-x, 0px) calc(var(--shadow-offset-y, 2px) * 1.25) calc(var(--shadow-blur, 8px) * 1.25) var(--shadow-spread, 0px) hsl(var(--shadow-color, 0 0% 0%) / var(--shadow-opacity, 0.1));
|
|
81
|
+
--shadow-md: var(--shadow-offset-x, 0px) calc(var(--shadow-offset-y, 2px) * 1.5) calc(var(--shadow-blur, 8px) * 1.5) var(--shadow-spread, 0px) hsl(var(--shadow-color, 0 0% 0%) / var(--shadow-opacity, 0.1));
|
|
82
|
+
--shadow-lg: var(--shadow-offset-x, 0px) calc(var(--shadow-offset-y, 2px) * 2) calc(var(--shadow-blur, 8px) * 2) var(--shadow-spread, 0px) hsl(var(--shadow-color, 0 0% 0%) / calc(var(--shadow-opacity, 0.1) * 1.25));
|
|
83
|
+
--shadow-xl: var(--shadow-offset-x, 0px) calc(var(--shadow-offset-y, 2px) * 2.5) calc(var(--shadow-blur, 8px) * 2.5) var(--shadow-spread, 0px) hsl(var(--shadow-color, 0 0% 0%) / calc(var(--shadow-opacity, 0.1) * 1.5));
|
|
84
|
+
--shadow-2xl: var(--shadow-offset-x, 0px) calc(var(--shadow-offset-y, 2px) * 3) calc(var(--shadow-blur, 8px) * 3) var(--shadow-spread, 0px) hsl(var(--shadow-color, 0 0% 0%) / calc(var(--shadow-opacity, 0.1) * 1.75));
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Ensure base styles work well with Tailwind */
|
|
88
|
+
@layer base {
|
|
89
|
+
* {
|
|
90
|
+
@apply border-border outline-ring/50;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
body {
|
|
94
|
+
@apply bg-background text-foreground tracking-normal;
|
|
95
|
+
font-family: var(--font-sans);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Ensure proper font rendering */
|
|
99
|
+
html {
|
|
100
|
+
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
101
|
+
font-variation-settings: normal;
|
|
102
|
+
-webkit-font-smoothing: antialiased;
|
|
103
|
+
-moz-osx-font-smoothing: grayscale;
|
|
104
|
+
}
|
|
105
|
+
}
|