@@ -132,7 +132,7 @@ export function UtilizationTimelineView({
{visibleRows.map((row) => (
|
{row.name}
diff --git a/apps/delta-command/src/core/utils.ts b/apps/delta-command/src/core/utils.ts
index 2d3bd48..f67a40b 100644
--- a/apps/delta-command/src/core/utils.ts
+++ b/apps/delta-command/src/core/utils.ts
@@ -37,49 +37,58 @@ export function getInitials(name: string): string {
.slice(0, 2);
}
+/** Google brand palette for charts and indicators */
+export const GOOGLE_COLORS = {
+ blue: "#4285F4",
+ red: "#EA4335",
+ yellow: "#FBBC04",
+ green: "#34A853",
+ gray: "#9AA0A6",
+} as const;
+
export function getUtilizationColor(utilization: number): string {
- if (utilization >= 100) return "bg-red-500";
- if (utilization >= 85) return "bg-amber-500";
- if (utilization >= 60) return "bg-accent";
- return "bg-emerald-500";
+ if (utilization >= 100) return "bg-google-red";
+ if (utilization >= 85) return "bg-google-yellow";
+ if (utilization >= 60) return "bg-google-blue";
+ return "bg-google-green";
}
export function getUtilizationTextColor(utilization: number): string {
- if (utilization >= 100) return "text-red-400";
- if (utilization >= 85) return "text-amber-400";
- if (utilization >= 60) return "text-accent-foreground";
- return "text-emerald-400";
+ if (utilization >= 100) return "text-google-red";
+ if (utilization >= 85) return "text-[#B06000]";
+ if (utilization >= 60) return "text-brand-600";
+ return "text-google-green";
}
export function getUtilizationCellStyle(utilization: number): string {
- if (utilization >= 100) return "bg-red-500/15 text-red-300 ring-red-500/30";
- if (utilization >= 85) return "bg-amber-500/15 text-amber-300 ring-amber-500/30";
- if (utilization >= 60) return "bg-blue-500/15 text-blue-300 ring-blue-500/30";
- return "bg-emerald-500/15 text-emerald-300 ring-emerald-500/30";
+ if (utilization >= 100) return "bg-red-50 text-google-red ring-google-red/30";
+ if (utilization >= 85) return "bg-yellow-50 text-[#B06000] ring-google-yellow/40";
+ if (utilization >= 60) return "bg-blue-50 text-brand-600 ring-google-blue/30";
+ return "bg-green-50 text-google-green ring-google-green/30";
}
export function getStatusBadgeColor(status: string): string {
const colors: Record = {
- available: "bg-emerald-500/15 text-emerald-300 ring-1 ring-inset ring-emerald-500/30",
- allocated: "bg-blue-500/15 text-blue-300 ring-1 ring-inset ring-blue-500/30",
- overallocated: "bg-red-500/15 text-red-300 ring-1 ring-inset ring-red-500/30",
- planning: "bg-zinc-500/15 text-zinc-300 ring-1 ring-inset ring-zinc-500/30",
- active: "bg-blue-500/15 text-blue-300 ring-1 ring-inset ring-blue-500/30",
- on_hold: "bg-amber-500/15 text-amber-300 ring-1 ring-inset ring-amber-500/30",
- at_risk: "bg-red-500/15 text-red-300 ring-1 ring-inset ring-red-500/30",
- completed: "bg-emerald-500/15 text-emerald-300 ring-1 ring-inset ring-emerald-500/30",
+ available: "bg-green-50 text-google-green ring-1 ring-inset ring-google-green/30",
+ allocated: "bg-blue-50 text-brand-600 ring-1 ring-inset ring-google-blue/30",
+ overallocated: "bg-red-50 text-google-red ring-1 ring-inset ring-google-red/30",
+ planning: "bg-surface-container text-surface-on-variant ring-1 ring-inset ring-outline",
+ active: "bg-blue-50 text-brand-600 ring-1 ring-inset ring-google-blue/30",
+ on_hold: "bg-yellow-50 text-[#B06000] ring-1 ring-inset ring-google-yellow/40",
+ at_risk: "bg-red-50 text-google-red ring-1 ring-inset ring-google-red/30",
+ completed: "bg-green-50 text-google-green ring-1 ring-inset ring-google-green/30",
};
- return colors[status] ?? "bg-zinc-500/15 text-zinc-300 ring-1 ring-inset ring-zinc-500/30";
+ return colors[status] ?? "bg-surface-container text-surface-on-variant ring-1 ring-inset ring-outline";
}
export const CHART_TOOLTIP_STYLE = {
- borderRadius: "12px",
- border: "1px solid rgb(255 255 255 / 0.08)",
- backgroundColor: "#18181B",
- color: "#FAFAFA",
- boxShadow: "0 8px 24px -4px rgb(0 0 0 / 0.6)",
+ borderRadius: "8px",
+ border: "1px solid #DADCE0",
+ backgroundColor: "#FFFFFF",
+ color: "#202124",
+ boxShadow: "0 1px 2px 0 rgb(60 64 67 / 0.3), 0 2px 6px 2px rgb(60 64 67 / 0.15)",
fontSize: "13px",
} as const;
-export const CHART_GRID = "#27272A";
-export const CHART_TICK = "#A1A1AA";
+export const CHART_GRID = "#E8EAED";
+export const CHART_TICK = "#5F6368";
diff --git a/apps/delta-command/tailwind.config.ts b/apps/delta-command/tailwind.config.ts
index 976df25..4ceaa0a 100644
--- a/apps/delta-command/tailwind.config.ts
+++ b/apps/delta-command/tailwind.config.ts
@@ -5,88 +5,94 @@ const config: Config = {
theme: {
extend: {
colors: {
+ google: {
+ blue: "#4285F4",
+ red: "#EA4335",
+ yellow: "#FBBC04",
+ green: "#34A853",
+ },
accent: {
- DEFAULT: "#3B82F6",
- muted: "rgb(59 130 246 / 0.12)",
- foreground: "#60A5FA",
+ DEFAULT: "#4285F4",
+ muted: "rgb(66 133 244 / 0.1)",
+ foreground: "#1967D2",
},
primary: {
- DEFAULT: "#3B82F6",
- container: "rgb(59 130 246 / 0.12)",
+ DEFAULT: "#4285F4",
+ container: "rgb(66 133 244 / 0.1)",
on: "#FFFFFF",
- "on-container": "#93C5FD",
+ "on-container": "#1967D2",
},
secondary: {
- DEFAULT: "#71717A",
- container: "#27272A",
- on: "#FAFAFA",
- "on-container": "#A1A1AA",
+ DEFAULT: "#5F6368",
+ container: "#F1F3F4",
+ on: "#202124",
+ "on-container": "#5F6368",
},
tertiary: {
- DEFAULT: "#A855F7",
- container: "rgb(168 85 247 / 0.12)",
+ DEFAULT: "#34A853",
+ container: "rgb(52 168 83 / 0.1)",
on: "#FFFFFF",
- "on-container": "#C4B5FD",
+ "on-container": "#137333",
},
error: {
- DEFAULT: "#EF4444",
- container: "rgb(239 68 68 / 0.12)",
+ DEFAULT: "#EA4335",
+ container: "rgb(234 67 53 / 0.1)",
on: "#FFFFFF",
- "on-container": "#FCA5A5",
+ "on-container": "#C5221F",
},
surface: {
- DEFAULT: "#09090B",
- dim: "#0C0C0E",
- bright: "#18181B",
+ DEFAULT: "#F8F9FA",
+ dim: "#F1F3F4",
+ bright: "#FFFFFF",
container: {
- DEFAULT: "#27272A",
- low: "#141416",
- high: "#3F3F46",
- highest: "#52525B",
+ DEFAULT: "#F1F3F4",
+ low: "#FFFFFF",
+ high: "#E8EAED",
+ highest: "#DADCE0",
},
- on: "#FAFAFA",
- "on-variant": "#A1A1AA",
+ on: "#202124",
+ "on-variant": "#5F6368",
},
outline: {
- DEFAULT: "#52525B",
- variant: "#27272A",
+ DEFAULT: "#DADCE0",
+ variant: "#E8EAED",
},
sidebar: {
- DEFAULT: "#030712",
- foreground: "#FAFAFA",
- muted: "#71717A",
- border: "#1F2937",
- accent: "#3B82F6",
+ DEFAULT: "#FFFFFF",
+ foreground: "#202124",
+ muted: "#5F6368",
+ border: "#E8EAED",
+ accent: "#4285F4",
},
brand: {
- 50: "#EFF6FF",
- 100: "#DBEAFE",
- 500: "#3B82F6",
- 600: "#2563EB",
- 700: "#1D4ED8",
- 900: "#1E3A8A",
+ 50: "#E8F0FE",
+ 100: "#D2E3FC",
+ 500: "#4285F4",
+ 600: "#1967D2",
+ 700: "#185ABC",
+ 900: "#174EA6",
},
},
fontFamily: {
- sans: ["var(--font-inter)", "Inter", "system-ui", "sans-serif"],
+ sans: ["var(--font-roboto)", "Roboto", "Arial", "sans-serif"],
},
borderRadius: {
- xs: "6px",
+ xs: "4px",
sm: "8px",
md: "12px",
lg: "16px",
- xl: "20px",
+ xl: "24px",
full: "9999px",
},
boxShadow: {
"elevation-0": "none",
- "elevation-1": "0 1px 2px 0 rgb(0 0 0 / 0.4)",
- "elevation-2": "0 4px 12px -2px rgb(0 0 0 / 0.5)",
- "elevation-3": "0 12px 24px -4px rgb(0 0 0 / 0.6)",
- card: "0 0 0 1px rgb(255 255 255 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.4)",
+ "elevation-1": "0 1px 2px 0 rgb(60 64 67 / 0.3), 0 1px 3px 1px rgb(60 64 67 / 0.15)",
+ "elevation-2": "0 1px 2px 0 rgb(60 64 67 / 0.3), 0 2px 6px 2px rgb(60 64 67 / 0.15)",
+ "elevation-3": "0 4px 8px 3px rgb(60 64 67 / 0.15), 0 1px 3px rgb(60 64 67 / 0.3)",
+ card: "0 1px 2px 0 rgb(60 64 67 / 0.3), 0 1px 3px 1px rgb(60 64 67 / 0.15)",
elevated:
- "0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px -4px rgb(0 0 0 / 0.5)",
- glow: "0 0 0 3px rgb(59 130 246 / 0.25), 0 0 20px rgb(59 130 246 / 0.15)",
+ "0 1px 3px 0 rgb(60 64 67 / 0.3), 0 4px 8px 3px rgb(60 64 67 / 0.15)",
+ glow: "0 0 0 2px rgb(66 133 244 / 0.3)",
},
transitionTimingFunction: {
standard: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -94,9 +100,9 @@ const config: Config = {
},
backgroundImage: {
"grid-pattern":
- "linear-gradient(to right, rgb(255 255 255 / 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 255 255 / 0.04) 1px, transparent 1px)",
+ "linear-gradient(to right, rgb(218 220 224 / 0.5) 1px, transparent 1px), linear-gradient(to bottom, rgb(218 220 224 / 0.5) 1px, transparent 1px)",
"radial-glow":
- "radial-gradient(ellipse 80% 50% at 50% -20%, rgb(59 130 246 / 0.08), transparent)",
+ "radial-gradient(ellipse 80% 50% at 50% -20%, rgb(66 133 244 / 0.06), transparent)",
},
backgroundSize: {
grid: "24px 24px",
|