/* theme.css --------------------------------------------------------------------------- Expected HTML usage: App must continue to use the stable semantic variables: --color-* , --font-* Additional stable tokens consumed by style.refactored.css: --border-width*, --radius-*, --shadow-*, --scrollbar-thumb, --color-ui-*, --color-menu-*, --color-progress-fill, --color-table-border, --color-tooltip-bg, --entity-* ------------------------------------------------------------------------- */ /* ========================================================================== 1) Base tokens (DEFAULT = light) ========================================================================== */ :root { color-scheme: light; /* Dynamic org color (set inline on for per-org): */ --p-org: #1ccfc9; /* Typography (matches body: 14px/22px Helvetica...) */ --p-font-body-size: 14px; --p-font-body-line: 22px; --p-font-ui-family: Helvetica, Arial, sans-serif; /* Surfaces */ --p-mainmenu: #1c2228; --p-surface-1: #ffffff; --p-surface-2: #dedede; --p-surface-3: #f0f0f0; --p-surface-4: #cccccc; /* Items */ --p-item: #ffffff; --p-item-low: #d9f7d9; --p-item-low-hover: #cbe7cb; --p-item-high: #fddfdf; --p-item-high-hover: #edd1d1; /* Text */ --p-text-1: #000000; --p-text-2: #999999; /* Accent + statuses (non-CVD defaults) */ --p-accent: #00d992; --p-success-bright: #aaffaa; --p-success-dark: #00bc52; --p-warning-bright: #fff5bf; --p-warning-dark: #dab300; --p-error-bright: #ffbcc8; --p-error-dark: #ff0000; /* Borders */ --p-border-width: 1px; --p-border-width-2: 2px; /* Radii */ --p-radius-2: 2px; --p-radius-3: 3px; --p-radius-4: 4px; --p-radius-5: 5px; --p-radius-6: 6px; --p-radius-8: 8px; --p-radius-10: 10px; --p-radius-15: 15px; --p-radius-pill: 999px; /* Shadows */ --p-shadow-xs: 1px 1px 1px 0 rgba(0, 0, 0, .25); /* Panels / chrome */ --p-ui-panel: #f0f0f0; --p-ui-panel-border: #d8d8da; --p-ui-hover: #e6e6e6; /* Menu (left nav / shell elements) */ --p-menu-text: #eee; --p-menu-shell: #222326; --p-menu-hover: #2e2f33; --p-menu-active: #1b9bff; /* Scrollbar */ --p-scrollbar-thumb: rgba(0, 0, 0, .3); /* Progress / tables / tooltips */ --p-progress-fill: rgb(54, 154, 202); --p-table-border: rgb(200, 200, 200); --p-tooltip-bg: #000; /* Entity (accordion header) colors */ --p-entity-client: #27ae60; --p-entity-client-hover: #2ecc71; --p-entity-client-guest: #69e29c; --p-entity-client-border: #27ae60; --p-entity-timesheet: #e4644b; --p-entity-timesheet-hover: #e48d7c; --p-entity-project: #237fd0; --p-entity-project-hover: #458fd0; --p-entity-project-guest: #4ca7e2; --p-entity-project-border: #2980b9; --p-entity-task: #4c87ab; --p-entity-task-hover: #7099b3; --p-entity-category: #e63838; --p-entity-category-hover: #e66363; --p-entity-category-guest: #e5868e; --p-entity-category-border: #d92231; --p-entity-bill: #987ad4; --p-entity-bill-hover: #b29fd8; --p-entity-archived: #aaa; --p-entity-archived-hover: #888; } /* ========================================================================== 2) Theme overrides (set ONLY base tokens: --p-*) ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; --p-mainmenu: #1c2228; --p-surface-1: #252c34; --p-surface-2: #323b46; --p-surface-3: #273038; --p-surface-4: #1c2228; --p-item: #1c2228; --p-item-low: #1c2826; --p-item-low-hover: #334945; --p-item-high: #572a2a; --p-item-high-hover: #603535; --p-text-1: #bbbbbb; --p-text-2: #777777; /* Keep accent/status colors consistent with the existing dark mode */ --p-accent: #00d992; /* Chrome tuned for dark surfaces */ --p-ui-panel: var(--p-surface-2); --p-ui-panel-border: var(--p-surface-4); --p-ui-hover: var(--p-surface-3); /* Table borders look harsh in dark if left as light gray */ --p-table-border: #555; } html[data-theme="pirate"] { color-scheme: dark; /* Fonts */ --p-font-ui-family: "IM Fell English", Georgia, serif; --p-font-display-family: "Pirata One", "IM Fell English", Georgia, serif; /* Palette anchors */ --pirate-sea: #19396b; --pirate-gold: #c68d4f; --pirate-blood: #7b2132; --pirate-rum: #292929; --pirate-ink: #353432; --pirate-wood: #2e2b28; --pirate-item: #2b2b2a; --pirate-algae: #1c2826; --pirate-cream: #ffdcb5; --pirate-foam: #366898; --p-mainmenu: var(--pirate-wood); /* Fallbacks (palette-only; refined below with color-mix when supported) */ --p-surface-1: var(--pirate-ink); --p-surface-2: var(--pirate-rum); --p-surface-3: var(--pirate-rum); --p-surface-4: var(--pirate-ink); --p-item: var(--pirate-item); --p-item-low: var(--pirate-algae); --p-item-low-hover: var(--pirate-item); --p-item-high: var(--pirate-blood); --p-item-high-hover: var(--pirate-blood); --p-text-1: var(--pirate-gold); --p-text-2: var(--pirate-gold); --p-accent: var(--pirate-sea); --p-success-bright: var(--pirate-sea); --p-success-dark: var(--pirate-foam); --p-warning-bright: var(--pirate-gold); --p-warning-dark: var(--pirate-cream); --p-error-bright: var(--pirate-blood); --p-error-dark: var(--pirate-wood); /* Pirate “feel”: flat + squared-off */ --p-shadow-xs: none; --p-radius-2: 0px; --p-radius-3: 0px; --p-radius-4: 0px; --p-radius-5: 0px; --p-radius-6: 0px; --p-radius-8: 0px; --p-radius-10: 0px; --p-radius-15: 0px; --p-radius-pill: 0px; /* Chrome */ --p-ui-panel: var(--p-surface-2); --p-ui-panel-border: var(--p-surface-4); --p-ui-hover: var(--p-surface-3); --p-table-border: #4a4a4a; /* Entity bars (“aged parchment + ink”) */ --p-entity-client: #468d1c; --p-entity-client-hover: #81d74f; --p-entity-timesheet: #ddd417; --p-entity-timesheet-hover: #e9e596; --p-entity-project: #1c8bc1; --p-entity-project-hover: #1677a6; --p-entity-task: #15995d; --p-entity-task-hover: #46b281; --p-entity-category: #a52222; --p-entity-category-hover: #bf4343; --p-entity-bill: #7e5991; --p-entity-bill-hover: #773897; --p-entity-archived: #6a625c; --p-entity-archived-hover: #544d48; } /* Nicer pirate shading if the browser supports color-mix() */ @supports (color: color-mix(in srgb, white, black)) { html[data-theme="pirate"] { --p-surface-2: color-mix(in srgb, var(--pirate-rum) 85%, var(--pirate-ink)); --p-surface-3: color-mix(in srgb, var(--pirate-rum) 70%, var(--pirate-ink)); --p-surface-4: color-mix(in srgb, var(--pirate-rum) 55%, var(--pirate-ink)); --p-item: color-mix(in srgb, var(--pirate-item) 65%, var(--pirate-ink)); /* “Low priority” gets a cool nautical tint without becoming neon --p-item-low: color-mix(in srgb, var(--pirate-algae) 18%, var(--pirate-item)); --p-item-low-hover: color-mix(in srgb, var(--pirate-algae) 28%, var(--pirate-item)); */ /* “High priority” stays blood-red but darker for readability */ --p-item-high: color-mix(in srgb, var(--pirate-blood) 45%, var(--pirate-ink)); --p-item-high-hover: color-mix(in srgb, var(--pirate-blood) 60%, var(--pirate-ink)); --p-text-2: color-mix(in srgb, var(--pirate-gold) 65%, var(--pirate-ink)); } } /* ========================================================================== 3) Accessibility variant (color-vision deficiency) Override ONLY accent/status tokens so themes keep their surfaces/text. ========================================================================== */ html[data-cvd="1"] { --p-accent: #0072a5; --p-success-bright: #009bf1; --p-success-dark: #0078ad; --p-warning-bright: #ffdcaa; --p-warning-dark: #ffb750; --p-error-bright: #d24141; --p-error-dark: #a01010; } /* ========================================================================== 4) Semantic mapping The rest of your CSS relies on these stable names. Do NOT theme by changing these; theme by changing --p-* tokens above. ========================================================================== */ :root { /* Org */ --color-org-global: var(--p-org); /* Surfaces */ --color-background-mainmenu: var(--p-mainmenu); --color-background-primary: var(--p-surface-1); --color-background-secondary: var(--p-surface-2); --color-background-tertiary: var(--p-surface-3); --color-background-quaternary: var(--p-surface-4); /* Items */ --color-background-item: var(--p-item); --color-background-item-low-priority: var(--p-item-low); --color-background-item-low-priority-hover: var(--p-item-low-hover); --color-background-item-high-priority: var(--p-item-high); --color-background-item-high-priority-hover: var(--p-item-high-hover); /* Text */ --color-text-primary: var(--p-text-1); --color-text-secondary: var(--p-text-2); /* Accent + statuses */ --color-border-highlight: var(--p-accent); --color-success-bright: var(--p-success-bright); --color-success-dark: var(--p-success-dark); --color-warning-bright: var(--p-warning-bright); --color-warning-dark: var(--p-warning-dark); --color-error-bright: var(--p-error-bright); --color-error-dark: var(--p-error-dark); /* Typography hooks used by app CSS */ --font-body-size: var(--p-font-body-size); --font-body-line: var(--p-font-body-line); --font-ui-family: var(--p-font-ui-family); --font-display-family: var(--p-font-display-family); /* Borders */ --border-width: var(--p-border-width); --border-width-2: var(--p-border-width-2); /* Radii */ --radius-2: var(--p-radius-2); --radius-3: var(--p-radius-3); --radius-4: var(--p-radius-4); --radius-5: var(--p-radius-5); --radius-6: var(--p-radius-6); --radius-8: var(--p-radius-8); --radius-10: var(--p-radius-10); --radius-15: var(--p-radius-15); --radius-pill: var(--p-radius-pill); /* Shadows */ --shadow-xs: var(--p-shadow-xs); /* Panels / chrome */ --color-ui-panel: var(--p-ui-panel); --color-ui-panel-border: var(--p-ui-panel-border); --color-ui-hover: var(--p-ui-hover); /* Menu */ --color-menu-text: var(--p-menu-text); --color-menu-shell: var(--p-menu-shell); --color-menu-hover: var(--p-menu-hover); --color-menu-active: var(--p-menu-active); /* Scrollbar */ --scrollbar-thumb: var(--p-scrollbar-thumb); /* Progress / tables / tooltips */ --color-progress-fill: var(--p-progress-fill); --color-table-border: var(--p-table-border); --color-tooltip-bg: var(--p-tooltip-bg); /* Entity (accordion header) colors */ --entity-client: var(--p-entity-client); --entity-client-hover: var(--p-entity-client-hover); --entity-client-guest: var(--p-entity-client-guest); --entity-client-border: var(--p-entity-client-border); --entity-timesheet: var(--p-entity-timesheet); --entity-timesheet-hover: var(--p-entity-timesheet-hover); --entity-project: var(--p-entity-project); --entity-project-hover: var(--p-entity-project-hover); --entity-project-guest: var(--p-entity-project-guest); --entity-project-border: var(--p-entity-project-border); --entity-task: var(--p-entity-task); --entity-task-hover: var(--p-entity-task-hover); --entity-category: var(--p-entity-category); --entity-category-hover: var(--p-entity-category-hover); --entity-category-guest: var(--p-entity-category-guest); --entity-category-border: var(--p-entity-category-border); --entity-bill: var(--p-entity-bill); --entity-bill-hover: var(--p-entity-bill-hover); --entity-archived: var(--p-entity-archived); --entity-archived-hover: var(--p-entity-archived-hover); }