Skip to content

Riverlea - merge crm-c-light-text and crm-c-text-light #31994

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

Closed
ufundo wants to merge 11 commits into from
Closed

Riverlea - merge crm-c-light-text and crm-c-text-light #31994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6a71587
riverlea - merge crm-c-light-text and crm-c-text-light
ufundo Feb 7, 2025
7c0a725
riverlea darkmode - fix --crm-c-primary and --crm-c-primary-text cont…
ufundo Feb 13, 2025
6f3850c
riverlea dark mode - dont set text-light to dark
ufundo Feb 17, 2025
76bfd34
riverlea hackney darkmode - tweak primary
ufundo Feb 14, 2025
5e05c69
riverlea - set heading col at same time as bg in minetta dark
ufundo Feb 18, 2025
67c570f
riverlea - use crm-c-text-dark where backgrounds stay light
ufundo Feb 17, 2025
1d125af
riverlea - use default cascade for checkbox-list-col
ufundo Feb 17, 2025
f23de02
riverlea - dont break warning text in dark mode
ufundo Feb 22, 2025
dadda06
riverlea - fix heading text light/dark
ufundo Feb 22, 2025
4ac64ce
standalone login - fix input text color
ufundo Feb 22, 2025
b66b5e3
riverlea - fixes for checkbox-list
ufundo Feb 23, 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
3 changes: 2 additions & 1 deletion ext/riverlea/core/civi_mail-ang/crmMailing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
height: 20em;
}
.crmMailing-recip-est {
background: var(--crm-c-yellow-less-light);
background: var(--crm-checkbox-list-bg);
color: var(--crm-checkbox-list-col);
font-size: var(--crm-small-font-size);
padding: var(--crm-padding-small);
margin: 0 0 0 var(--crm-m);
Expand Down
10 changes: 5 additions & 5 deletions ext/riverlea/core/css/_bootstrap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@
#bootstrap-theme mark,
#bootstrap-theme .mark {
background: var(--crm-c-yellow);
color: var(--crm-c-text);
color: var(--crm-c-text-dark);
padding: .2rem;
}
@media (min-width: 768px) {
Expand Down Expand Up @@ -1848,7 +1848,7 @@ fieldset[disabled] #bootstrap-theme .btn-link:focus {
#bootstrap-theme .navbar-default {
background-color: var(--crm-c-darkest);
border-color: var(--crm-c-darkest);
color: var(--crm-c-light-text);
color: var(--crm-c-text-light);
}
#bootstrap-theme .nav-justified,
#bootstrap-theme .nav-tabs.nav-justified {
Expand Down Expand Up @@ -3385,7 +3385,7 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
display: inline;
padding: var(--crm-btn-padding-block) var(--crm-btn-padding-inline);
font-weight: normal;
color: var(--crm-c-light-text);
color: var(--crm-c-text-light);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
Expand All @@ -3400,13 +3400,13 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
}
#bootstrap-theme a.label:hover,
#bootstrap-theme a.label:focus {
color: var(--crm-c-light-text);
color: var(--crm-c-text-light);
text-decoration: none;
cursor: var(--crm-hover-clickable);
}
#bootstrap-theme .label-default {
background-color: var(--crm-c-text);
color: var(--crm-c-light-text);
color: var(--crm-c-text-light);
}
#bootstrap-theme .label-default[href]:hover,
#bootstrap-theme .label-default[href]:focus {
Expand Down
40 changes: 21 additions & 19 deletions ext/riverlea/core/css/_variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@
--crm-c-teal: #63c4b9;
--crm-c-dark-teal: #3e8079;
/* Practical colours */
--crm-c-text: #464354;
--crm-c-light-text: #fff;
--crm-c-dark-text: var(--crm-c-text);
--crm-c-text-light: #fff;
--crm-c-text-dark: #464354;
--crm-c-text: var(--crm-c-text-dark);
--crm-c-link: var(--crm-c-blue-dark);
--crm-c-link-hover: var(--crm-c-blue-darker);
--crm-c-divider: 1px solid var(--crm-c-gray-300);
Expand All @@ -60,20 +60,20 @@
--crm-c-code-background: var(--crm-c-background2); /* background for code regions */
--crm-c-primary: var(--crm-c-gray-700);
--crm-c-primary-hover: var(--crm-c-gray-800);
--crm-c-primary-text: var(--crm-c-light-text);
--crm-c-primary-hover-text: var(--crm-c-light-text);
--crm-c-primary-text: var(--crm-c-text-light);
--crm-c-primary-hover-text: var(--crm-c-text-light);
--crm-c-secondary: #5d677b;
--crm-c-secondary-hover: #3e485b;
--crm-c-secondary-text: var(--crm-c-light-text);
--crm-c-secondary-hover-text: var(--crm-c-light-text);
--crm-c-secondary-text: var(--crm-c-text-light);
--crm-c-secondary-hover-text: var(--crm-c-text-light);
--crm-c-success: var(--crm-c-green-dark);
--crm-c-success-text: var(--crm-c-light-text);
--crm-c-success-text: var(--crm-c-text-light);
--crm-c-alert: var(--crm-c-red-dark);
--crm-c-alert-text: var(--crm-c-light-text);
--crm-c-alert-text: var(--crm-c-text-light);
--crm-c-warning: var(--crm-c-amber);
--crm-c-warning-text: var(--crm-c-light-text);
--crm-c-warning-text: var(--crm-c-text-light);
--crm-c-info: var(--crm-c-blue-dark);
--crm-c-info-text: var(--crm-c-light-text);
--crm-c-info-text: var(--crm-c-text-light);
--crm-c-focus: var(--crm-c-blue-dark);
--crm-c-inactive: #696969;
/* Shadows */
Expand Down Expand Up @@ -117,7 +117,7 @@
--crm-link-decoration: none;
--crm-link-decoration-hover: underline;
--crm-heading-bg: var(--crm-c-blue-light);
--crm-heading-col: var(--crm-c-text);
--crm-heading-col: var(--crm-c-text-dark);

@vingle vingle Feb 18, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minetta/css/dark/css sets --crm-heading-bg: var(--crm-c-blue-dark); - this change makes that illegible, so I don't think it's worth it.

@ufundo ufundo Feb 18, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would argue that if minetta is setting the heading-bg it should set the heading-col at the same time to be confident on contrast..

@vingle vingle Feb 18, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minetta darkmode can be confident as a) Core variables sets the text-col; b) there was a round of contrast ratio tests & changes for dark mode in 1.3.1 (so I'm curious about the new bugs - my instinct is they're more likely regressions).

Darkmode in each stream often changes, say, the colours of the emphasis buttons backgrounds, while only changing a few text colours…

It sounds like you're suggesting a new rule (coloured backgrounds should be changed only in a pair with the foreground text) and applying it here, even tho it breaks something, which then needs a fix? This rule then would need to be applied in lots more places…

@ufundo ufundo Feb 23, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a new rule (coloured backgrounds should be changed only in a pair with the foreground text)

I think that would be very good as a rule of thumb. That doesn't mean we have to apply the rule everywhere all in one go, but I think where issues arises and use it to fix things. It should make the streams more robust in future (you dont have to track so many possible consequences of changing one variable). And in this case I think applying the rule fixes the issue with Minetta dark mode, rather than breaking it.

--crm-heading-padding: var(--crm-s1) var(--crm-m1);
--crm-heading-margin: var(--crm-m) 0;
--crm-heading-radius: var(--crm-roundness);
Expand Down Expand Up @@ -192,7 +192,7 @@
/* .crm-accordion-bold */
--crm-expand-header-bg: var(--crm-c-secondary);
--crm-expand-header-bg-active: var(--crm-c-gray-900);
--crm-expand-header-color: var(--crm-c-light-text);
--crm-expand-header-color: var(--crm-c-secondary-text);
--crm-expand-header-padding: var(--crm-s) var(--crm-m);
--crm-expand-header-weight: bold;
--crm-expand-header-font: var(--crm-font-bold);
Expand Down Expand Up @@ -225,7 +225,7 @@
--crm-alert-text-help: var(--crm-c-green-dark);
--crm-alert-background-warning: var(--crm-c-yellow-light);
--crm-alert-border-warning: var(--crm-c-yellow);
--crm-alert-text-warning: var(--crm-c-text);
--crm-alert-text-warning: var(--crm-c-text-dark);
--crm-alert-background-info: var(--crm-c-blue-light);
--crm-alert-border-info: var(--crm-c-blue);
--crm-alert-text-info: var(--crm-c-blue-dark);
Expand Down Expand Up @@ -263,7 +263,9 @@
--crm-fieldset-border-color: var(--crm-c-gray-400);
--crm-fieldset-border: 1px 0 0 0;
--crm-fieldset-padding: var(--crm-padding-reg) var(--crm-padding-small);
--crm-checkbox-list-col: var(--crm-c-text);
--crm-checkbox-list-col: var(--crm-c-text-dark);
--crm-checkbox-list-bg: var(--crm-c-yellow-light);
--crm-checkbox-list-bg2: var(--crm-c-yellow-less-light);
/* Tabs */
--crm-tabs-bg: var(--crm-c-background4);
--crm-tabs-padding: var(--crm-s);
Expand Down Expand Up @@ -337,7 +339,7 @@
--crm-dialog-line: unset;
--crm-dialog-inner-shadow: var(--crm-bottom-shadow);
--crm-dialog-header-bg: var(--crm-c-secondary);
--crm-dialog-header-col: var(--crm-c-light-text);
--crm-dialog-header-col: var(--crm-c-secondary-text);
--crm-dialog-header-size: var(--crm-r1);
--crm-dialog-header-padding: var(--crm-m1) var(--crm-r);
--crm-dialog-header-radius: var(--crm-dialog-radius);
Expand All @@ -363,7 +365,7 @@
--crm-dropdown-padding: var(--crm-s);
--crm-dropdown-radius: var(--crm-roundness);
--crm-dropdown-bg: var(--crm-c-secondary-hover);
--crm-dropdown-col: var(--crm-c-light-text);
--crm-dropdown-col: var(--crm-c-text-light);
--crm-dropdown-hover: var(--crm-c-text);
--crm-dropdown-hover-bg: var(--crm-c-page-background);
--crm-dropdown-border: 0;
Expand All @@ -375,7 +377,7 @@
/* Notifications */
--crm-notify-background: rgba(0,0,0,0.85);
--crm-notify-padding: var(--crm-m2);
--crm-notify-col: var(--crm-c-light-text);
--crm-notify-col: var(--crm-c-text-light);
--crm-notify-accent-border: 2px 0 0 0; /* adds a border to one/several sides of the notification - set to 0 for none */
--crm-notify-radius: var(--crm-roundness);
--crm-notify-alert: #d02e2e;
Expand All @@ -401,7 +403,7 @@
--crm-wizard-radius: var(--crm-l);
--crm-wizard-angle: 0px;
--crm-wizard-arrow-thickness: 1px;
--crm-wizard-active-col: var(--crm-c-light-text);
--crm-wizard-active-col: var(--crm-c-text-light);
--crm-wizard-active-bg: var(--crm-c-link);
--crm-wizard-border: var(--crm-c-divider);
--crm-wizard-bg: var(--crm-c-page-background);
Expand Down
19 changes: 10 additions & 9 deletions ext/riverlea/core/css/components/_components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,25 +33,26 @@
.crm-container ul.crm-checkbox-list li input {
margin: 0;
}
.crm-container ul.crm-checkbox-list li:nth-child(2n) {
background-color: var(--crm-c-background3);
}
.crm-container ul.crm-checkbox-list li:has(input:checked) label {
color: var(--crm-checkbox-list-col);
}
.crm-container ul.crm-checkbox-list li:has(input:checked) {
background-color: var(--crm-checkbox-list-bg);
}
.crm-container ul.crm-checkbox-list li:nth-child(2n):has(input:checked) {
background-color: var(--crm-checkbox-list-bg2);
}

.listing-box input.crm-form-checkbox {
margin: 0 0 0 var(--crm-s);
}
tbody.scrollContent tr.alternateRow {
background-color: var(--crm-c-background3);
padding-inline: var(--crm-s) var(--crm-m2);
}
.crm-container ul.crm-checkbox-list li:nth-child(2n) {
background-color: var(--crm-c-background3);
}
.crm-container ul.crm-checkbox-list li:has(input:checked) {
background-color: var(--crm-c-yellow-light);
}
.crm-container ul.crm-checkbox-list li:nth-child(2n):has(input:checked) {
background-color: var(--crm-c-yellow-less-light);
}

/* Action Links */

Expand Down
2 changes: 1 addition & 1 deletion ext/riverlea/core/css/components/_form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -806,7 +806,7 @@ input.crm-form-checkbox) + label {
}
.crm-container .ui-spinner a.ui-spinner-button:hover,
.crm-container .ui-spinner a.ui-spinner-button:focus {
color: var(--crm-c-light-text);
color: var(--crm-c-text-light);
}
.crm-container .ui-spinner a.ui-spinner-button span::before {
font-family: "FontAwesome";
Expand Down
2 changes: 1 addition & 1 deletion ext/riverlea/core/css/components/_front.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ af-form > fieldset > legend {
}
.crm-container.crm-public .header-dark {
background: var(--crm-c-secondary);
color: var(--crm-c-light-text);
color: var(--crm-c-text-light);
padding: var(--crm-m1) var(--crm-f-fieldset-padding);
font-family: var(--crm-font-bold);
font-weight: bold;
Expand Down
2 changes: 1 addition & 1 deletion ext/riverlea/core/css/components/_tables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ tbody .crm-row-child:not(:has(~ .crm-row-child)) td {
}
.crm-container tr.columnheader-dark th {
background-color: var(--crm-c-gray-700);
color: var(--crm-c-light-text);
color: var(--crm-c-text-light);
border: 1px solid var(--crm-c-gray-800);
}

Expand Down
2 changes: 1 addition & 1 deletion ext/riverlea/core/css/components/_tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
.crm-container .ui-tabs ul.ui-tabs-nav .crm-count-0 a em,
.crm-container #mainTabContainer ul.ui-tabs-nav .crm-count-0 a em {
background: var(--crm-c-background5);
color: var(--crm-c-light-text);
color: var(--crm-c-text-light);
}
.crm-container .ui-tabs ul li em:empty,
.crm-container .nav-tabs .badge:empty { /* this is to keep the height of tabs with empty badges */
Expand Down
4 changes: 2 additions & 2 deletions ext/riverlea/core/css/rename-css-var.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
--crm-blue-darker --crm-c-blue-darker
--crm-blue-light --crm-c-blue-light
--crm-dark-teal --crm-c-dark-teal
--crm-dark-text --crm-c-dark-text
--crm-dark-text --crm-c-text-dark
--crm-darkest --crm-c-darkest
--crm-divider --crm-c-divider
--crm-drag-background --crm-c-drag-background
Expand All @@ -42,7 +42,7 @@
--crm-inactive --crm-c-inactive
--crm-info --crm-c-info
--crm-info-text --crm-c-info-text
--crm-light-text --crm-c-light-text
--crm-light-text --crm-c-text-light
--crm-link --crm-c-link
--crm-link-hover --crm-c-link-hover
--crm-page-background --crm-c-page-background
Expand Down
2 changes: 1 addition & 1 deletion ext/riverlea/core/org.civicrm.afform-ang/afCore.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ details.af-container > *:last-of-type {
}
#bootstrap-theme .af-container-style-pane > .af-title {
background-color: var(--crm-c-background5);
color: var(--crm-c-light-text);
color: var(--crm-c-text-light);
border-radius: var(--crm-form-block-border-radius) var(--crm-form-block-border-radius) 0 0;
position: absolute;
top: 0;
Expand Down
2 changes: 0 additions & 2 deletions ext/riverlea/streams/empty/css/_dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
--crm-c-text: #fff;
--crm-c-link: var(--crm-c-teal);
--crm-c-link-hover: var(--crm-c-yellow);
--crm-c-text-light: var(--crm-c-darkest);
--crm-c-background: var(--crm-c-gray-900);
--crm-c-page-background: var(--crm-c-gray-900);
--crm-c-background2: var(--crm-c-gray-800);
Expand Down Expand Up @@ -50,7 +49,6 @@
--crm-c-inactive: var(--crm-c-gray-400);
--crm-input-color: var(--crm-c-text);
--crm-input-description: var(--crm-c-gray-300);
--crm-checkbox-list-col: var(--crm-c-text-light);
--crm-alert-text-help: var(--crm-c-text);
--crm-dialog-header-border-col: transparent;
--crm-dialog-header-bg: var(--crm-c-background2);
Expand Down
33 changes: 16 additions & 17 deletions ext/riverlea/streams/empty/css/_variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@
--crm-c-dark-teal: #3e8079;
/* Practical colours *
--crm-c-text: #464354;
--crm-c-light-text: #fff;
--crm-c-dark-text: var(--crm-c-text);
--crm-c-text-light: #fff;
--crm-c-text-dark: var(--crm-c-text);
--crm-c-link: var(--crm-c-blue-dark);
--crm-c-link-hover: var(--crm-c-blue-darker);
--crm-c-divider: 1px solid var(--crm-c-gray-300);
Expand All @@ -61,20 +61,20 @@
--crm-c-code-background: var(--crm-c-background2); /* background for code regions *
--crm-c-primary: var(--crm-c-gray-700);
--crm-c-primary-hover: var(--crm-c-gray-800);
--crm-c-primary-text: var(--crm-c-light-text);
--crm-c-primary-hover-text: var(--crm-c-light-text);
--crm-c-primary-text: var(--crm-c-text-light);
--crm-c-primary-hover-text: var(--crm-c-text-light);
--crm-c-secondary: #5d677b;
--crm-c-secondary-hover: #3e485b;
--crm-c-secondary-text: var(--crm-c-light-text);
--crm-c-secondary-hover-text: var(--crm-c-light-text);
--crm-c-secondary-text: var(--crm-c-text-light);
--crm-c-secondary-hover-text: var(--crm-c-text-light);
--crm-c-success: var(--crm-c-green-dark);
--crm-c-success-text: var(--crm-c-light-text);
--crm-c-success-text: var(--crm-c-text-light);
--crm-c-alert: var(--crm-c-red-dark);
--crm-c-alert-text: var(--crm-c-light-text);
--crm-c-alert-text: var(--crm-c-text-light);
--crm-c-warning: var(--crm-c-amber);
--crm-c-warning-text: var(--crm-c-light-text);
--crm-c-warning-text: var(--crm-c-text-light);
--crm-c-info: var(--crm-c-blue-dark);
--crm-c-info-text: var(--crm-c-light-text);
--crm-c-info-text: var(--crm-c-text-light);
--crm-c-focus: var(--crm-c-blue-dark);
--crm-c-inactive: #696969;
/* Shadows *
Expand Down Expand Up @@ -191,7 +191,7 @@
/* .crm-accordion-bold *
--crm-expand-header-bg: var(--crm-c-secondary);
--crm-expand-header-bg-active: var(--crm-c-gray-900);
--crm-expand-header-color: var(--crm-c-light-text);
--crm-expand-header-color: var(--crm-c-text-light);
--crm-expand-header-padding: var(--crm-s) var(--crm-m);
--crm-expand-header-weight: bold;
--crm-expand-header-font: var(--crm-font-bold);
Expand Down Expand Up @@ -262,7 +262,6 @@
--crm-fieldset-border-color: var(--crm-c-gray-400);
--crm-fieldset-border: 1px 0 0 0;
--crm-fieldset-padding: var(--crm-padding-reg) var(--crm-padding-small);
--crm-checkbox-list-col: var(--crm-c-text);
/* Tabs *
--crm-tabs-bg: var(--crm-c-background4);
--crm-tabs-padding: var(--crm-s);
Expand Down Expand Up @@ -336,7 +335,7 @@
--crm-dialog-line:;
--crm-dialog-inner-shadow: var(--crm-bottom-shadow);
--crm-dialog-header-bg: var(--crm-c-secondary);
--crm-dialog-header-col: var(--crm-c-light-text);
--crm-dialog-header-col: var(--crm-c-text-light);
--crm-dialog-header-size: var(--crm-r1);
--crm-dialog-header-padding: var(--crm-m1) var(--crm-r);
--crm-dialog-header-radius: var(--crm-dialog-radius);
Expand All @@ -362,7 +361,7 @@
--crm-dropdown-padding: var(--crm-s);
--crm-dropdown-radius: var(--crm-roundness);
--crm-dropdown-bg: var(--crm-c-secondary-hover);
--crm-dropdown-col: var(--crm-c-light-text);
--crm-dropdown-col: var(--crm-c-text-light);
--crm-dropdown-hover: var(--crm-c-text);
--crm-dropdown-hover-bg: var(--crm-c-page-background);
--crm-dropdown-border: 0;
Expand All @@ -374,7 +373,7 @@
/* Notifications *
--crm-notify-background: rgba(0,0,0,0.85);
--crm-notify-padding: var(--crm-m2);
--crm-notify-col: var(--crm-c-light-text);
--crm-notify-col: var(--crm-c-text-light);
--crm-notify-accent-border: 2px 0 0 0; /* adds a border to one/several sides of the notification - set to 0 for none *
--crm-notify-radius: var(--crm-roundness);
/* Icons *
Expand All @@ -395,14 +394,14 @@
--crm-wizard-height: 30px;
--crm-wizard-radius: var(--crm-l);
--crm-wizard-angle: 0px;
--crm-wizard-active-col: var(--crm-c-light-text);
--crm-wizard-active-col: var(--crm-c-text-light);
--crm-wizard-active-bg: var(--crm-c-link);
--crm-wizard-border: var(--crm-c-divider);
--crm-wizard-bg: var(--crm-c-page-background);
/* Alpha filter *
--crm-filter-bg: var(--crm-c-blue-light);
--crm-filter-padding: var(--crm-m);
--crm-filter-item-bg: #fafafa;
--crm-filter-item-bg: #fafafa;
--crm-filter-item-shadow: 0px 0px 3px rgba(0,0,0,0.1);
--crm-filter-spacing: start; /* choose 'space-between' to spread out evenly, or 'end' to right align. */
/* Frontend *
Expand Down
Loading