Rodrigo Rodriguez (Pragmatismo)
a389dc845e
- All 18 themes now include --sentient-* CSS variables - Variables map theme HSL values to office suite apps - Sheet, Docs, Slides will now respect all theme colors - Includes: backgrounds, text, accents, borders, surfaces, inputs, status, shadows, radius
97 lines
3.8 KiB
CSS
97 lines
3.8 KiB
CSS
:root {
|
|
/* Orange Theme - Microsoft Office inspired */
|
|
--background: 0 0% 100%; /* White */
|
|
--foreground: 0 0% 13%; /* #212121 - near black */
|
|
--card: 0 0% 98%; /* #faf9f8 - light gray */
|
|
--card-foreground: 0 0% 13%; /* #212121 */
|
|
--popover: 0 0% 100%; /* White */
|
|
--popover-foreground: 0 0% 13%; /* #212121 */
|
|
--primary: 24 90% 54%; /* #d83b01 - Office orange */
|
|
--primary-foreground: 0 0% 100%; /* White */
|
|
--secondary: 210 36% 96%; /* #f3f2f1 - light blue-gray */
|
|
--secondary-foreground: 0 0% 13%; /* #212121 */
|
|
--muted: 0 0% 90%; /* #e1dfdd - muted gray */
|
|
--muted-foreground: 0 0% 40%; /* #666666 */
|
|
--accent: 207 90% 54%; /* #0078d4 - Office blue */
|
|
--accent-foreground: 0 0% 100%; /* White */
|
|
--destructive: 0 85% 60%; /* #e81123 - Office red */
|
|
--destructive-foreground: 0 0% 100%; /* White */
|
|
--border: 0 0% 85%; /* #d2d0ce - light border */
|
|
--input: 0 0% 100%; /* White */
|
|
--ring: 207 90% 54%; /* #0078d4 */
|
|
--radius: 0.25rem; /* Slightly less rounded */
|
|
--chart-1: 24 90% 54%; /* Office orange */
|
|
--chart-2: 207 90% 54%; /* Office blue */
|
|
--chart-3: 120 60% 40%; /* Office green */
|
|
--chart-4: 340 82% 52%; /* Office magenta */
|
|
--chart-5: 44 100% 50%; /* Office yellow */
|
|
|
|
/* ============================================ */
|
|
/* SENTIENT BRIDGE VARIABLES */
|
|
/* For Sheet, Docs, Slides theme support */
|
|
/* ============================================ */
|
|
|
|
/* Backgrounds */
|
|
--sentient-bg-primary: hsl(var(--background));
|
|
--sentient-bg-secondary: hsl(var(--card));
|
|
--sentient-bg-tertiary: hsl(var(--muted));
|
|
--sentient-bg-hover: hsla(var(--primary) / 0.08);
|
|
--sentient-bg-active: hsla(var(--primary) / 0.15);
|
|
|
|
/* Text */
|
|
--sentient-text-primary: hsl(var(--foreground));
|
|
--sentient-text-secondary: hsl(var(--muted-foreground));
|
|
--sentient-text-tertiary: hsla(var(--muted-foreground) / 0.7);
|
|
--sentient-text-muted: hsla(var(--muted-foreground) / 0.5);
|
|
|
|
/* Accent Colors */
|
|
--sentient-accent: hsl(var(--primary));
|
|
--sentient-accent-hover: hsl(var(--primary) / 0.85);
|
|
--sentient-accent-light: hsla(var(--primary) / 0.1);
|
|
--sentient-accent-dark: hsl(var(--primary) / 0.7);
|
|
|
|
/* Borders */
|
|
--sentient-border: hsl(var(--border));
|
|
--sentient-border-light: hsla(var(--border) / 0.5);
|
|
--sentient-border-accent: hsla(var(--primary) / 0.3);
|
|
|
|
/* Surfaces */
|
|
--sentient-surface: hsl(var(--card));
|
|
--sentient-surface-hover: hsla(var(--primary) / 0.08);
|
|
--sentient-surface-active: hsla(var(--primary) / 0.15);
|
|
--sentient-surface-elevated: hsl(var(--popover));
|
|
|
|
/* Inputs */
|
|
--sentient-input-bg: hsl(var(--input));
|
|
--sentient-input-border: hsl(var(--border));
|
|
--sentient-input-focus: hsl(var(--ring));
|
|
|
|
/* Status Colors */
|
|
--sentient-success: hsl(142 76% 36%);
|
|
--sentient-success-bg: hsla(142 76% 36% / 0.15);
|
|
--sentient-warning: hsl(38 92% 50%);
|
|
--sentient-warning-bg: hsla(38 92% 50% / 0.15);
|
|
--sentient-error: hsl(var(--destructive));
|
|
--sentient-error-bg: hsla(var(--destructive) / 0.15);
|
|
|
|
/* Typography */
|
|
--sentient-font-family:
|
|
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
sans-serif;
|
|
|
|
/* Shadows */
|
|
--sentient-shadow-sm: 0 1px 2px 0 hsla(var(--foreground) / 0.05);
|
|
--sentient-shadow-md:
|
|
0 4px 6px -1px hsla(var(--foreground) / 0.1),
|
|
0 2px 4px -1px hsla(var(--foreground) / 0.06);
|
|
--sentient-shadow-lg:
|
|
0 10px 15px -3px hsla(var(--foreground) / 0.1),
|
|
0 4px 6px -2px hsla(var(--foreground) / 0.05);
|
|
|
|
/* Border Radius */
|
|
--sentient-radius: var(--radius);
|
|
--sentient-radius-sm: calc(var(--radius) * 0.5);
|
|
--sentient-radius-md: var(--radius);
|
|
--sentient-radius-lg: calc(var(--radius) * 1.5);
|
|
--sentient-radius-xl: calc(var(--radius) * 2);
|
|
}
|