chore(repo): initialize planarchy workspace
This commit is contained in:
@@ -0,0 +1,265 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ─── Accent Color CSS Variables ────────────────────────────────────────────
|
||||
Each data-accent value sets the --accent-* RGB triplets consumed by Tailwind
|
||||
brand-* classes. The format is "R G B" (no commas) for Tailwind opacity support.
|
||||
*/
|
||||
|
||||
/* Sky Blue (default) */
|
||||
:root,
|
||||
[data-accent="sky"] {
|
||||
--accent-50: 240 249 255;
|
||||
--accent-100: 224 242 254;
|
||||
--accent-200: 186 230 253;
|
||||
--accent-300: 125 211 252;
|
||||
--accent-400: 56 189 248;
|
||||
--accent-500: 14 165 233;
|
||||
--accent-600: 2 132 199;
|
||||
--accent-700: 3 105 161;
|
||||
--accent-800: 7 89 133;
|
||||
--accent-900: 12 74 110;
|
||||
}
|
||||
|
||||
[data-accent="indigo"] {
|
||||
--accent-50: 238 242 255;
|
||||
--accent-100: 224 231 255;
|
||||
--accent-200: 199 210 254;
|
||||
--accent-300: 165 180 252;
|
||||
--accent-400: 129 140 248;
|
||||
--accent-500: 99 102 241;
|
||||
--accent-600: 79 70 229;
|
||||
--accent-700: 67 56 202;
|
||||
--accent-800: 55 48 163;
|
||||
--accent-900: 49 46 129;
|
||||
}
|
||||
|
||||
[data-accent="violet"] {
|
||||
--accent-50: 245 243 255;
|
||||
--accent-100: 237 233 254;
|
||||
--accent-200: 221 214 254;
|
||||
--accent-300: 196 181 253;
|
||||
--accent-400: 167 139 250;
|
||||
--accent-500: 139 92 246;
|
||||
--accent-600: 124 58 237;
|
||||
--accent-700: 109 40 217;
|
||||
--accent-800: 91 33 182;
|
||||
--accent-900: 76 29 149;
|
||||
}
|
||||
|
||||
[data-accent="emerald"] {
|
||||
--accent-50: 236 253 245;
|
||||
--accent-100: 209 250 229;
|
||||
--accent-200: 167 243 208;
|
||||
--accent-300: 110 231 183;
|
||||
--accent-400: 52 211 153;
|
||||
--accent-500: 16 185 129;
|
||||
--accent-600: 5 150 105;
|
||||
--accent-700: 4 120 87;
|
||||
--accent-800: 6 95 70;
|
||||
--accent-900: 6 78 59;
|
||||
}
|
||||
|
||||
[data-accent="rose"] {
|
||||
--accent-50: 255 241 242;
|
||||
--accent-100: 255 228 230;
|
||||
--accent-200: 254 205 211;
|
||||
--accent-300: 253 164 175;
|
||||
--accent-400: 251 113 133;
|
||||
--accent-500: 244 63 94;
|
||||
--accent-600: 225 29 72;
|
||||
--accent-700: 190 18 60;
|
||||
--accent-800: 159 18 57;
|
||||
--accent-900: 136 19 55;
|
||||
}
|
||||
|
||||
[data-accent="amber"] {
|
||||
--accent-50: 255 251 235;
|
||||
--accent-100: 254 243 199;
|
||||
--accent-200: 253 230 138;
|
||||
--accent-300: 252 211 77;
|
||||
--accent-400: 251 191 36;
|
||||
--accent-500: 245 158 11;
|
||||
--accent-600: 217 119 6;
|
||||
--accent-700: 180 83 9;
|
||||
--accent-800: 146 64 14;
|
||||
--accent-900: 120 53 15;
|
||||
}
|
||||
|
||||
/* ─── Light Theme Surface Variables ─────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
--surface-page: 249 250 251; /* gray-50 */
|
||||
--surface-card: 255 255 255; /* white */
|
||||
--surface-elevated: 249 250 251; /* gray-50 */
|
||||
--surface-input: 255 255 255; /* white */
|
||||
--border-subtle: 229 231 235; /* gray-200 */
|
||||
--border-input: 209 213 219; /* gray-300 */
|
||||
--text-primary: 17 24 39; /* gray-900 */
|
||||
--text-secondary: 75 85 99; /* gray-600 */
|
||||
--text-muted: 107 114 128; /* gray-500 */
|
||||
--text-very-muted: 156 163 175; /* gray-400 */
|
||||
}
|
||||
|
||||
/* ─── Dark Theme Surface Variables ──────────────────────────────────────── */
|
||||
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
--surface-page: 10 11 16; /* near-black page bg */
|
||||
--surface-card: 24 27 38; /* dark card bg */
|
||||
--surface-elevated: 32 36 50; /* slightly lighter - table headers etc */
|
||||
--surface-input: 32 36 50; /* input bg */
|
||||
--border-subtle: 45 51 71; /* dark border */
|
||||
--border-input: 58 65 90; /* slightly lighter border */
|
||||
--text-primary: 232 234 240; /* near-white */
|
||||
--text-secondary: 163 173 197; /* medium gray */
|
||||
--text-muted: 107 117 142; /* muted */
|
||||
--text-very-muted: 75 84 107; /* very muted */
|
||||
}
|
||||
|
||||
/* ─── Base Layer: Apply variables to body ────────────────────────────────── */
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
background-color: rgb(var(--surface-page));
|
||||
color: rgb(var(--text-primary));
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
/* Smooth transition for theme changes */
|
||||
*, *::before, *::after {
|
||||
transition-property: background-color, border-color, color;
|
||||
transition-duration: 0.1s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
/* Scrollbar styling for dark mode */
|
||||
.dark ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.dark ::-webkit-scrollbar-track {
|
||||
background: rgb(var(--surface-card));
|
||||
}
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background: rgb(var(--border-subtle));
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Dark Mode Overrides for Common Tailwind Patterns ──────────────────── */
|
||||
/* These override the most commonly used utility classes in the app */
|
||||
|
||||
.dark .bg-white {
|
||||
background-color: rgb(var(--surface-card)) !important;
|
||||
}
|
||||
|
||||
.dark .bg-gray-50 {
|
||||
background-color: rgb(var(--surface-elevated)) !important;
|
||||
}
|
||||
|
||||
.dark .bg-gray-100 {
|
||||
background-color: rgb(45 51 71) !important;
|
||||
}
|
||||
|
||||
.dark .border-gray-100 {
|
||||
border-color: rgb(var(--border-subtle)) !important;
|
||||
}
|
||||
|
||||
.dark .border-gray-200 {
|
||||
border-color: rgb(var(--border-subtle)) !important;
|
||||
}
|
||||
|
||||
.dark .border-gray-300 {
|
||||
border-color: rgb(var(--border-input)) !important;
|
||||
}
|
||||
|
||||
.dark .text-gray-900 {
|
||||
color: rgb(var(--text-primary)) !important;
|
||||
}
|
||||
|
||||
.dark .text-gray-800 {
|
||||
color: rgb(var(--text-primary)) !important;
|
||||
}
|
||||
|
||||
.dark .text-gray-700 {
|
||||
color: rgb(var(--text-secondary)) !important;
|
||||
}
|
||||
|
||||
.dark .text-gray-600 {
|
||||
color: rgb(var(--text-secondary)) !important;
|
||||
}
|
||||
|
||||
.dark .text-gray-500 {
|
||||
color: rgb(var(--text-muted)) !important;
|
||||
}
|
||||
|
||||
.dark .text-gray-400 {
|
||||
color: rgb(var(--text-very-muted)) !important;
|
||||
}
|
||||
|
||||
.dark input,
|
||||
.dark select,
|
||||
.dark textarea {
|
||||
background-color: rgb(var(--surface-input));
|
||||
border-color: rgb(var(--border-input));
|
||||
color: rgb(var(--text-primary));
|
||||
}
|
||||
|
||||
.dark input::placeholder,
|
||||
.dark textarea::placeholder {
|
||||
color: rgb(var(--text-muted));
|
||||
}
|
||||
|
||||
/* Table alternating / hover */
|
||||
.dark .hover\:bg-gray-50:hover {
|
||||
background-color: rgb(var(--surface-elevated)) !important;
|
||||
}
|
||||
|
||||
.dark .divide-gray-100 > * + * {
|
||||
border-color: rgb(var(--border-subtle)) !important;
|
||||
}
|
||||
|
||||
/* Status badge adjustments in dark mode - keep them readable */
|
||||
.dark .bg-green-100 { background-color: rgb(6 78 59 / 0.4) !important; }
|
||||
.dark .text-green-700 { color: rgb(52 211 153) !important; }
|
||||
.dark .bg-yellow-100 { background-color: rgb(120 53 15 / 0.4) !important; }
|
||||
.dark .text-yellow-700 { color: rgb(251 191 36) !important; }
|
||||
.dark .bg-blue-100 { background-color: rgb(30 58 138 / 0.4) !important; }
|
||||
.dark .text-blue-700 { color: rgb(96 165 250) !important; }
|
||||
.dark .bg-red-100 { background-color: rgb(127 29 29 / 0.4) !important; }
|
||||
.dark .text-red-600 { color: rgb(248 113 113) !important; }
|
||||
.dark .text-red-700 { color: rgb(248 113 113) !important; }
|
||||
.dark .bg-gray-100 { background-color: rgb(var(--surface-elevated)) !important; }
|
||||
.dark .text-gray-700 { color: rgb(var(--text-secondary)) !important; }
|
||||
.dark .bg-purple-100 { background-color: rgb(76 29 149 / 0.4) !important; }
|
||||
.dark .text-purple-700 { color: rgb(196 181 253) !important; }
|
||||
.dark .bg-amber-50 { background-color: rgb(120 53 15 / 0.2) !important; }
|
||||
|
||||
/* Modal / overlay */
|
||||
.dark .shadow-2xl {
|
||||
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6) !important;
|
||||
}
|
||||
|
||||
/* ─── Timeline utilities (unchanged) ────────────────────────────────────── */
|
||||
|
||||
@layer utilities {
|
||||
.timeline-row {
|
||||
@apply flex border-b border-gray-100 hover:bg-gray-50/50;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.allocation-block {
|
||||
@apply absolute rounded-md text-xs font-medium px-2 py-1 cursor-pointer select-none;
|
||||
@apply transition-all duration-150 ease-in-out;
|
||||
}
|
||||
|
||||
.allocation-block:hover {
|
||||
@apply ring-2 ring-white ring-offset-1;
|
||||
}
|
||||
|
||||
.allocation-block.dragging {
|
||||
@apply opacity-75 shadow-lg scale-105;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user