Fix theme support for Sheet/Docs/Slides
- Add complete sentient-* bridge variables in app.css - Map all HSL theme variables to sentient-* naming - Includes: backgrounds, text, accents, borders, surfaces, inputs, status colors, shadows, radius - Rewrite 3dbevel theme to use CSS variables instead of !important overrides - All themes now properly cascade to office suite apps
This commit is contained in:
parent
76627ae9f0
commit
91c54933f3
2 changed files with 172 additions and 46 deletions
|
|
@ -41,6 +41,77 @@
|
|||
--secondary-bg: hsl(var(--card));
|
||||
--secondary-fg: hsl(var(--muted-foreground));
|
||||
|
||||
/* ============================================ */
|
||||
/* SENTIENT BRIDGE VARIABLES */
|
||||
/* Used by Sheet, Docs, Slides for theming */
|
||||
/* These map theme variables to app-specific */
|
||||
/* naming used across office suite apps */
|
||||
/* ============================================ */
|
||||
|
||||
/* 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);
|
||||
|
||||
/* Glass Morphism */
|
||||
--glass-bg: hsla(var(--background) / 0.7);
|
||||
--glass-border: hsla(var(--border) / 0.8);
|
||||
|
|
|
|||
|
|
@ -1,66 +1,121 @@
|
|||
body, .card, .popover, .input, .button, .menu, .dialog {
|
||||
font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
|
||||
background: #c0c0c0 !important;
|
||||
color: #000 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
:root {
|
||||
/* 3D Bevel Theme - Windows 95/Classic Mac style */
|
||||
--background: 0 0% 75%; /* #c0c0c0 - Classic gray */
|
||||
--foreground: 0 0% 0%; /* Black text */
|
||||
--card: 0 0% 88%; /* #e0e0e0 - Lighter gray */
|
||||
--card-foreground: 0 0% 0%; /* Black */
|
||||
--popover: 0 0% 82%; /* #d0d0d0 */
|
||||
--popover-foreground: 0 0% 0%; /* Black */
|
||||
--primary: 240 100% 33%; /* #0000aa - Classic blue */
|
||||
--primary-foreground: 0 0% 100%; /* White */
|
||||
--secondary: 0 0% 88%; /* #e0e0e0 */
|
||||
--secondary-foreground: 0 0% 0%; /* Black */
|
||||
--muted: 0 0% 75%; /* #c0c0c0 */
|
||||
--muted-foreground: 0 0% 25%; /* #404040 */
|
||||
--accent: 240 100% 50%; /* Blue accent */
|
||||
--accent-foreground: 0 0% 100%; /* White */
|
||||
--destructive: 0 100% 40%; /* Red */
|
||||
--destructive-foreground: 0 0% 100%; /* White */
|
||||
--border: 0 0% 25%; /* #404040 - Dark border */
|
||||
--input: 0 0% 100%; /* White input bg */
|
||||
--ring: 240 100% 50%; /* Blue focus ring */
|
||||
--radius: 0rem; /* No border radius - sharp corners */
|
||||
--chart-1: 240 100% 33%; /* Blue */
|
||||
--chart-2: 120 100% 25%; /* Green */
|
||||
--chart-3: 0 100% 40%; /* Red */
|
||||
--chart-4: 300 100% 33%; /* Purple */
|
||||
--chart-5: 60 100% 40%; /* Yellow */
|
||||
|
||||
/* 3D Bevel specific - raised/sunken effects */
|
||||
--bevel-light: 0 0% 100%; /* White highlight */
|
||||
--bevel-dark: 0 0% 25%; /* Dark shadow */
|
||||
}
|
||||
|
||||
.card, .popover, .menu, .dialog {
|
||||
border: 2px solid #fff !important;
|
||||
border-bottom: 2px solid #404040 !important;
|
||||
border-right: 2px solid #404040 !important;
|
||||
padding: 8px !important;
|
||||
background: #e0e0e0 !important;
|
||||
/* 3D Bevel effect for buttons and raised elements */
|
||||
.button,
|
||||
button,
|
||||
.btn,
|
||||
.btn-icon,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
input[type="button"],
|
||||
input[type="submit"] {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
|
||||
hsl(var(--bevel-dark)) hsl(var(--bevel-light));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button, button, input[type="button"], input[type="submit"] {
|
||||
background: #e0e0e0 !important;
|
||||
color: #000 !important;
|
||||
border: 2px solid #fff !important;
|
||||
border-bottom: 2px solid #404040 !important;
|
||||
border-right: 2px solid #404040 !important;
|
||||
padding: 4px 12px !important;
|
||||
font-weight: bold !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
.button:active,
|
||||
button:active,
|
||||
.btn:active,
|
||||
.btn-icon:active,
|
||||
input[type="button"]:active,
|
||||
input[type="submit"]:active {
|
||||
border-color: hsl(var(--bevel-dark)) hsl(var(--bevel-light))
|
||||
hsl(var(--bevel-light)) hsl(var(--bevel-dark));
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
border: 2px solid #fff !important;
|
||||
border-bottom: 2px solid #404040 !important;
|
||||
border-right: 2px solid #404040 !important;
|
||||
font-family: inherit !important;
|
||||
box-shadow: none !important;
|
||||
/* Sunken effect for inputs */
|
||||
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not(
|
||||
[type="radio"]
|
||||
),
|
||||
textarea,
|
||||
select {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: hsl(var(--bevel-dark)) hsl(var(--bevel-light))
|
||||
hsl(var(--bevel-light)) hsl(var(--bevel-dark));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
background: #d0d0d0 !important;
|
||||
border: 2px solid #fff !important;
|
||||
border-bottom: 2px solid #404040 !important;
|
||||
border-right: 2px solid #404040 !important;
|
||||
/* Cards and panels - raised */
|
||||
.card,
|
||||
.modal-content,
|
||||
.popover,
|
||||
.dropdown-menu,
|
||||
.context-menu {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
|
||||
hsl(var(--bevel-dark)) hsl(var(--bevel-light));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 16px !important;
|
||||
background: #c0c0c0 !important;
|
||||
width: 16px;
|
||||
background: hsl(var(--muted));
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #404040 !important;
|
||||
border: 2px solid #fff !important;
|
||||
border-bottom: 2px solid #404040 !important;
|
||||
border-right: 2px solid #404040 !important;
|
||||
background: hsl(var(--muted));
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
|
||||
hsl(var(--bevel-dark)) hsl(var(--bevel-light));
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: hsl(var(--background));
|
||||
}
|
||||
|
||||
/* Font override for retro feel */
|
||||
body {
|
||||
font-family: "IBM Plex Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
/* Links - classic blue underlined */
|
||||
a {
|
||||
color: #0000aa !important;
|
||||
text-decoration: underline !important;
|
||||
color: hsl(var(--primary));
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:visited {
|
||||
color: hsl(300 100% 33%);
|
||||
}
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
border: none !important;
|
||||
border-top: 2px solid #404040 !important;
|
||||
margin: 8px 0 !important;
|
||||
border: none;
|
||||
border-top: 2px solid hsl(var(--bevel-dark));
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue