WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

fix(premiere-plugin): replace oklch() with hex/rgba for CEP Chromium compat

Browse source 
CEP's embedded Chromium (used by Premiere Pro panels) does not support
oklch() color syntax. All color tokens were rendering as invalid/transparent,
causing the panel to appear unstyled. Converted all oklch() values to their
precise hex/rgba equivalents via OKLab→sRGB math. No design changes.
This commit is contained in:
Zac Gaetano 2026-05-27 10:44:39 -04:00
parent ada8105948
commit ad9e1ef5f1
1 changed files with 36 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
services/premiere-plugin/css/styles.css
View file

@ -3,48 +3,48 @@
:root {
/* Background scale */
--bg-deep: oklch(8% 0.011 32);
--bg-base: oklch(11% 0.010 32);
--bg-panel: oklch(15% 0.013 32);
--bg-surface: oklch(19% 0.014 32);
--bg-raised: oklch(24% 0.015 32);
--bg-hover: oklch(28% 0.015 32);
--bg-deep: #030101;
--bg-base: #070403;
--bg-panel: #100908;
--bg-surface: #1a1210;
--bg-raised: #261d1b;
--bg-hover: #302624;
/* Accent */
--accent: oklch(62% 0.22 32);
--accent-hover: oklch(68% 0.22 32);
--accent-bright: oklch(76% 0.20 32);
--accent-subtle: oklch(62% 0.22 32 / 0.12);
--accent-border: oklch(62% 0.22 32 / 0.36);
--accent: #ed391a;
--accent-hover: #ff5032;
--accent-bright: #ff765a;
--accent-subtle: rgba(237, 57, 26, 0.12);
--accent-border: rgba(237, 57, 26, 0.36);
/* Text */
--text-primary: oklch(94% 0.008 32);
--text-secondary: oklch(72% 0.014 32);
--text-tertiary: oklch(56% 0.012 32);
--text-disabled: oklch(38% 0.010 32);
--text-primary: #f0e9e8;
--text-secondary: #ada29f;
--text-tertiary: #7b7270;
--text-disabled: #48413f;
/* Borders */
--border-faint: oklch(22% 0.013 32);
--border: oklch(28% 0.015 32);
--border-strong: oklch(38% 0.018 32);
--border-faint: #201817;
--border: #302624;
--border-strong: #4c3f3c;
/* Signals (primary) */
--signal-good: oklch(70% 0.18 148);
--signal-bad: oklch(64% 0.22 25);
--signal-warn: oklch(80% 0.16 90);
--signal-idle: oklch(58% 0.012 32);
--signal-info: oklch(67% 0.16 245);
--signal-good: #35bb58;
--signal-bad: #f53c41;
--signal-warn: #e6b816;
--signal-idle: #817876;
--signal-info: #1e9cf0;
/* Signal backgrounds */
--signal-good-bg: oklch(70% 0.18 148 / 0.12);
--signal-bad-bg: oklch(64% 0.22 25 / 0.12);
--signal-warn-bg: oklch(80% 0.16 90 / 0.12);
--signal-info-bg: oklch(67% 0.16 245 / 0.12);
--signal-good-bg: rgba(53, 187, 88, 0.12);
--signal-bad-bg: rgba(245, 60, 65, 0.12);
--signal-warn-bg: rgba(230, 184, 22, 0.12);
--signal-info-bg: rgba(30, 156, 240, 0.12);
/* Signal hover variants */
--signal-good-hover: oklch(74% 0.18 148);
--signal-bad-hover: oklch(68% 0.22 25);
--signal-warn-hover: oklch(84% 0.16 90);
--signal-good-hover: #46c865;
--signal-bad-hover: #ff4c4d;
--signal-warn-hover: #f3c530;
/* Status aliases — backwards compat for main.js */
--status-green: var(--signal-good);
@ -94,8 +94,8 @@
/* Elevation + surface extras */
--shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
--thumb-black: oklch(0% 0 32);
--overlay: oklch(8% 0.010 32 / 0.65);
--thumb-black: #000000;
--overlay: rgba(3, 1, 1, 0.65);
/* Z-index layers */
--z-dropdown: 40;
@ -264,7 +264,7 @@ html, body {
.btn-primary {
background: var(--accent);
color: oklch(11% 0.010 32);
color: #070403;
border-color: var(--accent);
}
@ -296,7 +296,7 @@ html, body {
.btn-danger {
background: var(--signal-bad);
color: oklch(98% 0.005 25);
color: #fcf7f7;
border-color: var(--signal-bad);
}
@ -1143,7 +1143,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
.error-message {
background: var(--signal-bad-bg);
border: 1px solid oklch(64% 0.22 25 / 0.25);
border: 1px solid rgba(245, 60, 65, 0.25);
color: var(--signal-bad);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-sm);
@ -1154,7 +1154,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
.success-message {
background: var(--signal-good-bg);
border: 1px solid oklch(70% 0.18 148 / 0.25);
border: 1px solid rgba(53, 187, 88, 0.25);
color: var(--signal-good);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-sm);