Skip to content

Riverlea Thames - unwind some dark mode overrides #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ufundo wants to merge 7 commits into
base: riverlea-dark-mode
Choose a base branch
from
Open

Riverlea Thames - unwind some dark mode overrides #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
73128f8
remove double def of --crm-c-inactive
ufundo Oct 16, 2025
295c2a8
Riverlea - cleanup double defs in Thames
ufundo Oct 16, 2025
757a122
Riverlea - remove redundant stream defs that match core
ufundo Oct 16, 2025
3f14878
Riverlea - include core dark vars file when rendering
ufundo Oct 16, 2025
919abc6
Riverlea - move darkmode rules repeated across all streams to core
ufundo Oct 16, 2025
bc48545
Riverlea core dark mode - add vars that only diverge in Thames
ufundo Oct 16, 2025
7b69f16
Riverlea Thames - unwind some dark mode overrides
ufundo Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions ext/riverlea/Civi/Api4/Action/RiverleaStream/Render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,12 +123,14 @@ private static function getDarkStream(array $stream): array {
* @return string
*/
private static function concatStreamCss(array $stream, bool $darkMode = FALSE): string {
$content = [];

if ($darkMode) {
$content[] = "/* core dark vars */";
$content[] = GetWithFileContent::getFileContent('core/css/_dark.css', 'riverlea', NULL);
$stream = self::getDarkStream($stream);
}

$content = [];

if ($stream['css_file']) {
$content[] = "/* {$stream['label']} file: {$stream['css_file']} */";
$content[] = self::getStreamCssFromFile($stream);
Expand Down
32 changes: 32 additions & 0 deletions ext/riverlea/core/css/_dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
:root {
--crm-c-text: var(--crm-c-text-light);
--crm-c-success-on-page-bg: var(--crm-c-success-light);
--crm-c-warning-on-page-bg: var(--crm-c-warning-light);
--crm-dash-label-bg: transparent;
--crm-table-row-alternate-bg: #fff;
--crm-alert-danger-bg: var(--crm-c-danger);
--crm-alert-danger-text: var(--crm-c-danger-text);
--crm-alert-danger-border: color-mix(in srgb, var(--crm-alert-danger-bg) 90%,#fff 10%);
--crm-alert-info-bg: var(--crm-c-info);
--crm-alert-info-border: color-mix(in srgb, var(--crm-alert-info-bg) 90%,#fff 10%);
--crm-alert-info-text: var(--crm-c-success-text);
--crm-alert-success-bg: var(--crm-c-success);
--crm-alert-success-border: color-mix(in srgb, var(--crm-alert-success-bg) 90%,#fff 10%);
--crm-alert-success-text: var(--crm-c-success-text);
--crm-alert-warning-bg: var(--crm-c-warning);
--crm-alert-warning-border: color-mix(in srgb, var(--crm-alert-warning-bg) 90%,#fff 10%);
--crm-c-code-bg: var(--crm-c-layer1-bg);
--crm-c-danger-on-page-bg: var(--crm-c-danger-light);
--crm-c-divider: 1px solid var(--crm-c-gray-500);
--crm-c-info-on-page-bg: var(--crm-c-info-light);
--crm-c-layer1-bg: var(--crm-c-gray-800);
--crm-c-layer2-bg: var(--crm-c-gray-700);
--crm-c-primary-on-page-bg: var(--crm-c-gray-300);
--crm-c-secondary-on-page-bg: #cdcdcd;
--crm-dialog-header-border-col: transparent;
--crm-expand-body-bg: var(--crm-c-layer1-bg);
--crm-heading-col: var(--crm-c-text-light);
--crm-input-description: var(--crm-c-gray-300);
--crm-popup-shadow: 0 3px 18px 0 rgb(0,0,0);
--crm-tabs-bg: var(--crm-c-layer2-bg);
}
34 changes: 1 addition & 33 deletions ext/riverlea/streams/hackneybrook/_dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
/* HackneyBrook dark mode settings */
:root {
--crm-c-text: #fff;
--crm-c-link: #f5c929;
--crm-c-link-hover: #f2d465;
--crm-c-layer0-bg: var(--crm-c-gray-900);
--crm-c-container-bg: var(--crm-c-gray-900);
--crm-c-layer1-bg: var(--crm-c-gray-800);
--crm-c-layer2-bg: var(--crm-c-gray-700);
--crm-c-primary: var(--crm-c-container-bg);
--crm-c-primary-text: var(--crm-c-text);
--crm-c-secondary: var(--crm-c-layer1-bg);
Expand All @@ -23,65 +20,36 @@
--crm-c-gray-500: #6c6c6c;
--crm-c-gray-300: #e1dfdf;
--crm-c-gray-200: #bdbdbd;
--crm-c-divider: 1px solid var(--crm-c-gray-500);
--crm-checkbox-list-bg: #665800;
/* Emphasis colours */
--crm-alert-success-bg: var(--crm-c-success);
--crm-alert-success-text: var(--crm-c-success-text);
--crm-alert-success-border: color-mix(in srgb, var(--crm-alert-success-bg) 90%,#fff 10%);
--crm-c-success-on-page-bg: var(--crm-c-success-light);
--crm-alert-warning-bg: var(--crm-c-warning);
--crm-alert-warning-border: color-mix(in srgb, var(--crm-alert-warning-bg) 90%,#fff 10%);
--crm-c-warning-on-page-bg: var(--crm-c-warning-light);
--crm-alert-danger-bg: var(--crm-c-danger);
--crm-alert-danger-text: var(--crm-c-danger-text);
--crm-alert-danger-border: color-mix(in srgb, var(--crm-alert-danger-bg) 90%,#fff 10%);
--crm-c-danger-on-page-bg: var(--crm-c-danger-light);
--crm-alert-info-bg: var(--crm-c-info);
--crm-alert-info-text: var(--crm-c-success-text);
--crm-alert-info-border: color-mix(in srgb, var(--crm-alert-info-bg) 90%,#fff 10%);
--crm-c-info-on-page-bg: var(--crm-c-info-light);
--crm-c-primary-on-page-bg: var(--crm-c-gray-300);
--crm-c-secondary-on-page-bg: #cdcdcd;
/* And others */
--crm-c-focus: #00a3a5;
--crm-btn-icon-bg: var(--crm-c-gray-700);
--crm-block-shadow: 0;
--crm-popup-shadow: 0 3px 18px 0 rgb(0,0,0);
--crm-heading-bg: #354b55;
--crm-heading-col: var(--crm-c-text-light);
--crm-dashlet-bg: var(--crm-c-layer1-bg);
--crm-dashlet-header-bg: var(--crm-c-layer2-bg);
--crm-dashlet-tabs-border: 0;
--crm-btn-border: 1px solid var(--crm-c-gray-500);
--crm-expand-header-bg: var(--crm-c-layer2-bg);
--crm-expand-header-bg-active: var(--crm-c-gray-600);
--crm-expand-body-bg: var(--crm-c-layer1-bg);
--crm-expand-body-border: 0;
--crm-dash-header-bg: transparent;
--crm-dash-tab-bg-hover: var(--crm-c-layer1-bg);
--crm-dash-block-bg: var(--crm-c-layer1-bg);
--crm-dash-label-bg: transparent;
--crm-dash-summary-row-bg: var(--crm-c-container-bg);
--crm-dropdown-bg: var(--crm-c-layer1-bg);
--crm-dropdown-2-bg: var(--crm-c-layer1-bg);
--crm-tabs-bg: var(--crm-c-layer2-bg);
--crm-tab-bg-active: var(--crm-c-layer1-bg);
--crm-panel-border-col: var(--crm-c-gray-500);
--crm-input-border-color: var(--crm-c-gray-500);
--crm-table-row-bg: var(--crm-c-layer1-bg);
--crm-table-row-border: 1px solid var(--crm-c-gray-200);
--crm-table-row-hover: var(--crm-c-layer2-bg);
--crm-table-row-alternate-bg: #fff;
--crm-input-color: var(--crm-c-text);
--crm-input-description: var(--crm-c-gray-300);
--crm-dialog-header-border-col: transparent;
--crm-dialog-header-bg: var(--crm-c-layer1-bg);
--crm-dialog-body-bg: var(--crm-c-layer1-bg);
--crm-notify-bg: var(--crm-c-darkest);
--crm-notify-col: var(--crm-c-text);
--crm-notify-col: var(--crm-c-text-light);
--crm-wizard-active-bg: var(--crm-c-blue-dark);
--crm-c-code-bg: var(--crm-c-layer1-bg);
--crm-filter-item-bg: var(--crm-c-layer1-bg);
--crm-icon-danger-color: var(--crm-notify-danger);
--crm-icon-success-color: var(--crm-notify-success);
Expand Down
1 change: 0 additions & 1 deletion ext/riverlea/streams/hackneybrook/_variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@
--crm-alert-info-text: var(--crm-c-blue-darker);
--crm-alert-danger-text: var(--crm-c-text);
/* Form */
--crm-input-color: var(--crm-c-text);
--crm-input-border-color: var(--crm-c-gray-300);
--crm-input-box-shadow: 0;
--crm-input-label-weight: normal;
Expand Down
33 changes: 0 additions & 33 deletions ext/riverlea/streams/minetta/_dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* Minetta dark mode settings */
:root {
--crm-c-text: #fff;
--crm-c-focus: #8cd4cb;
--crm-c-link: var(--crm-c-teal);
--crm-c-link-hover: var(--crm-c-yellow);
Expand All @@ -10,70 +9,38 @@
--crm-c-layer0-bg: var(--crm-c-gray-900);
--crm-c-page-bg: var(--crm-c-gray-900);
--crm-c-container-bg: var(--crm-c-gray-800);
--crm-c-layer1-bg: var(--crm-c-gray-800);
--crm-c-layer2-bg: var(--crm-c-gray-700);
--crm-c-inverse-bg: var(--crm-c-gray-300);
--crm-c-teal: #a3ebe6;
--crm-c-gray-900: #363636;
--crm-c-gray-800: #464646;
--crm-c-gray-700: #535252;
--crm-c-gray-600: #67676a;
--crm-c-gray-500: #6c6c6c;
--crm-c-gray-300: #e1dfdf;
--crm-c-gray-200: #bdbdbd;
--crm-c-divider: 1px solid var(--crm-c-gray-500);
--crm-c-inactive: color-mix(in srgb,var(--crm-c-text) 95%,#000 5%);
/* Emphasis colours */
--crm-alert-success-bg: var(--crm-c-success);
--crm-alert-success-text: var(--crm-c-success-text);
--crm-alert-success-border: color-mix(in srgb, var(--crm-alert-success-bg) 90%,#fff 10%);
--crm-c-success-on-page-bg: var(--crm-c-success-light);
--crm-alert-warning-bg: var(--crm-c-warning);
--crm-alert-warning-border: color-mix(in srgb, var(--crm-alert-warning-bg) 90%,#fff 10%);
--crm-c-warning-on-page-bg: var(--crm-c-warning-light);
--crm-alert-danger-bg: var(--crm-c-danger);
--crm-alert-danger-text: var(--crm-c-danger-text);
--crm-alert-danger-border: color-mix(in srgb, var(--crm-alert-danger-bg) 90%,#fff 10%);
--crm-c-danger-on-page-bg: var(--crm-c-danger-light);
--crm-alert-info-bg: var(--crm-c-info);
--crm-alert-info-text: var(--crm-c-success-text);
--crm-alert-info-border: color-mix(in srgb, var(--crm-alert-info-bg) 90%,#fff 10%);
--crm-c-info-on-page-bg: var(--crm-c-info-light);
--crm-c-primary-on-page-bg: var(--crm-c-gray-300);
--crm-c-secondary-on-page-bg: #cdcdcd;
/* And others */
--crm-block-shadow: 0;
--crm-popup-shadow: 0 3px 18px 0 rgb(0,0,0);
--crm-heading-bg: var(--crm-c-blue-dark);
--crm-heading-col: var(--crm-c-text-light);
--crm-dashlet-bg: var(--crm-c-layer1-bg);
--crm-dashlet-header-bg: var(--crm-c-layer2-bg);
--crm-expand-header-bg: var(--crm-c-layer2-bg);
--crm-expand-header-bg-active: var(--crm-c-gray-600);
--crm-expand-body-bg: var(--crm-c-layer1-bg);
--crm-dash-header-bg: transparent;
--crm-dash-block-bg: var(--crm-c-layer1-bg);
--crm-dash-label-bg: transparent;
--crm-dash-panel-bg: #414141;
--crm-dropdown-bg: var(--crm-c-layer1-bg);
--crm-dropdown-2-bg: var(--crm-c-layer1-bg);
--crm-tabs-bg: var(--crm-c-layer2-bg);
--crm-table-outside-border: var(--crm-c-divider);
--crm-table-row-border: 1px solid var(--crm-c-gray-200);
--crm-table-row-hover: var(--crm-c-amber);
--crm-table-row-alternate-bg: #fff;
--crm-panel-border-col: var(--crm-c-gray-200);
--crm-input-border-color: var(--crm-c-gray-200);
--crm-c-inactive: var(--crm-c-gray-400);
--crm-input-color: var(--crm-c-text);
--crm-input-description: var(--crm-c-gray-300);
--crm-input-radio-color: #38c4b4;
--crm-dialog-header-border-col: transparent;
--crm-dialog-header-bg: var(--crm-c-layer1-bg);
--crm-dialog-body-bg: var(--crm-c-layer1-bg);
--crm-notify-bg: var(--crm-c-darkest);
--crm-wizard-active-bg: var(--crm-c-dark-teal);
--crm-form-block-bg: var(--crm-c-layer1-bg);
--crm-c-code-bg: var(--crm-c-layer1-bg);
--crm-filter-item-bg: var(--crm-c-layer1-bg);
}
24 changes: 4 additions & 20 deletions ext/riverlea/streams/thames/_dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,15 @@
--crm-c-dkblue-03: #1a292f;
--crm-c-dkblue-04: #1e323b;
--crm-c-dkblue-08: #2ea4ff;
--crm-c-container-bg: var(--crm-c-dkblue-02);
--crm-dash-tabs-bg: var(--crm-c-dkblue-03);
--crm-dash-tab-count-bg: var(--crm-c-blue-darker);
--crm-c-code-bg: var(--crm-c-dkblue-04);
--crm-dashlet-bg: var(--crm-c-dkblue-02);
--crm-c-layer0-bg: var(--crm-c-dkblue-01);
--crm-c-page-bg: var(--crm-c-dkblue-01);
--crm-c-container-bg: var(--crm-c-dkblue-02);
--crm-c-layer1-bg: var(--crm-c-dkblue-03);
--crm-c-layer2-bg: var(--crm-c-dkblue-04);
--crm-c-layer1-bg: var(--crm-c-dkblue-02);
--crm-c-layer2-bg: var(--crm-c-dkblue-02);
--crm-c-green: #335417;
--crm-c-link: var(--crm-c-dkblue-08);
--crm-c-link-hover: color-mix(in srgb, white, var(--crm-c-dkblue-08) 70%);
Expand All @@ -22,29 +21,22 @@
--crm-dash-panel-bg: var(--crm-c-dkblue-02);
--crm-dash-block-bg: var(--crm-c-dkblue-03);
--crm-dash-summary-row-bg: transparent;
--crm-dash-label-bg: transparent;
--crm-c-text: var(--crm-c-blue-overlay2);
--crm-c-text-light: var(--crm-c-blue-overlay2);
--crm-tabs-bg: var(--crm-dkblue-01);
--crm-tabs-border: var(--crm-dkblue-01);
--crm-c-drag-bg: var(--crm-c-dkblue-04);
--crm-tab-bg-active: var(--crm-c-dkblue-02);
--crm-tab-bg-hover: var(--crm-c-dkblue-02);
--crm-tab-bg: transparent;
--crm-alert-success-bg: var(--crm-c-dkblue-03);
--crm-alert-warning-bg: #383124;
--crm-input-bg: var(--crm-c-blue-darker);
--crm-inline-edit-bg: var(--crm-c-dkblue-01);
--crm-input-color: var(--crm-c-blue); /* text */
--crm-expand-body-bg: var(--crm-c-dkblue-03);
--crm-expand-header-color: var(--crm-c-blue-light);
--crm-expand-header-bg: var(--crm-c-dkblue-03);
--crm-c-divider: var(--crm-c-dkblue-04);
--crm-table-outside-border: var(--crm-c-divider);
--crm-table-row-bg: var(--crm-c-dkblue-02);
--crm-table-row-hover: var(--crm-c-dkblue-03);
--crm-table-row-alternate-bg: #fff;
--crm-c-layer1-bg: var(--crm-c-dkblue-02);
--crm-c-layer2-bg: var(--crm-c-dkblue-02);
--crm-panel-bg: var(--crm-c-dkblue-02);
--crm-form-block-bg: var(--crm-c-dkblue-02);
--crm-notify-bg: var(--crm-c-dkblue-02);
Expand All @@ -55,17 +47,9 @@
--crm-filter-bg: var(--crm-c-dkblue-02);
--crm-dropdown-col: var(--crm-c-text);
/* Emphasis colours */
--crm-c-info-on-page-bg: var(--crm-c-secondary);
--crm-c-danger-on-page-bg: var(--crm-btn-danger-bg);
--crm-c-warning-on-page-bg: var(--crm-c-warning-light);
--crm-c-success-on-page-bg: var(--crm-c-success-light);
--crm-c-primary-on-page-bg: var(--crm-c-secondary);
--crm-c-secondary-on-page-bg: var(--crm-c-secondary);
--crm-alert-danger-bg: var(--crm-c-danger);
--crm-alert-danger-text: var(--crm-c-danger-text);
--crm-alert-info-bg: var(--crm-c-blue-darker);
--crm-alert-info-text: var(--crm-c-blue-light);
--crm-c-warning-text: black;
--crm-alert-success-bg: var(--crm-c-dkblue-03);
}

.crm-container div.crm-summary-row div.crm-label {
Expand Down
11 changes: 3 additions & 8 deletions ext/riverlea/streams/thames/_variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
--crm-c-danger: var(--crm-c-red-dark); /* thames */
--crm-c-danger-text: var(--crm-c-text-light);
--crm-c-warning: var(--crm-c-amber); /* bg on .btn-warning, .label-warming but border on notification .alert */
--crm-c-warning-text: var(--crm-c-text);
--crm-c-warning-text: var(--crm-c-text-dark);
--crm-c-info: var(--crm-c-blue-dark);
--crm-c-info-text: var(--crm-c-text-light);
}
Expand Down Expand Up @@ -135,7 +135,7 @@
--crm-link-decoration: none;
--crm-link-decoration-hover: underline;
--crm-heading-bg: unset; /*var(--crm-c-blue-light);*/ /* thames */
--crm-heading-col: var(--crm-c-text);
--crm-heading-col: var(--crm-c-text-dark);
--crm-heading-padding: var(--crm-s1) var(--crm-m1); /* thames unset this? todo */
--crm-heading-margin: var(--crm-m) 0;
--crm-heading-radius: var(--crm-roundness);
Expand Down Expand Up @@ -203,7 +203,7 @@
:root {
/* Accordions */
--crm-expand-icon: "\f0da"; /* unicode value for FontAwesome icon */
--crm-expand-icon-color: var(--text);
--crm-expand-icon-color: var(--crm-c-text);
--crm-expand-icon-spacing: var(--crm-m);
--crm-expand-transform: rotate(90deg);
--crm-expand-transition: transform .3s;
Expand All @@ -226,7 +226,6 @@
--crm-expand2-header-bg: transparent;
--crm-expand2-header-bg-active: var(--crm-c-layer2-bg);
--crm-expand2-header-weight: normal;
--crm-expand2-header-color: var(--crm-c-text);
--crm-expand2-header-border: unset;
--crm-expand2-header-border-width: unset;
--crm-expand2-header-padding: .6rem 1.6rem 0.6rem 2.8rem; /*var(--crm-s) var(--crm-m); */ /* thames */
Expand All @@ -244,7 +243,6 @@
--crm-alert-success-bg: var(--crm-c-blue-light); /* thames */
--crm-alert-success-border: unset; /* thames */
--crm-alert-success-text: unset; /* thames */
--crm-alert-warning-text: var(--crm-c-text);
--crm-alert-warning-border: var(--crm-c-yellow);
--crm-alert-info-bg: var(--crm-c-blue-light);
--crm-alert-info-border: var(--crm-c-blue);
Expand All @@ -259,7 +257,6 @@
--crm-form-block-padding: var(--crm-m);
--crm-form-block-border-radius: var(--crm-roundness);
--crm-input-bg-image: linear-gradient(top, #eee 1%, #fff 15%);
--crm-input-color: var(--crm-c-text);
--crm-input-border-color: #0000001a; /* thames */
--crm-input-border-radius: 3px;
--crm-input-active-ani: border-color .15s ease-in-out 0s;
Expand Down Expand Up @@ -291,7 +288,6 @@
--crm-tab-bg-active: var(--crm-c-layer0-bg);
--crm-tab-hang: 0 0 calc(-1 * var(--crm-s)) 0; /* lip to extend tab flush with active region - set to 0 for no lip */ /* thames todo check */
--crm-tab-padding: var(--crm-m2) var(--crm-r1) var(--crm-m); /* thames todo check */
--crm-tab-col: var(--crm-c-text);
--crm-tab-weight: normal;
--crm-tab-count-bg: var(--crm-c-info-text);
--crm-tab-count-col: var(--crm-c-info);
Expand Down Expand Up @@ -394,7 +390,6 @@
--crm-dropdown-width: 23ch; /* thames */
--crm-dropdown-danger-bg: var(--crm-c-danger); /* for delete links in dropdowns */
--crm-dropdown-2-bg: var(--crm-c-secondary);
--crm-dropdown-2-col: var(--crm-c-text);
--crm-dropdown-2-padding: var(--crm-padding-small);
}
:root {
Expand Down
Loading