Skip to content

Commit

Permalink
Fine-tune color contrasts for dark mode. (CFM-239)
Browse files Browse the repository at this point in the history
  • Loading branch information
@arlen
arlen committed Jun 12, 2023
1 parent 95a6665 commit 06d8ee6
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 30 deletions.
22 changes: 20 additions & 2 deletions app/webroot/css/co-base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,12 @@ a {
}
#skip-to-content {
position: relative;
background-color: var(--cmg-color-link);
background-color: var(--cmg-color-btn-bg-001);
color: var(--cmg-color-txt-inverse);
padding: 0 1em 0.25em ;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color: var(--cmg-color-btn-bg-001);
top: -40px;
text-decoration: underline;
}
Expand Down Expand Up @@ -235,6 +236,12 @@ body.cos.select #top-bar {
}
#top-menu .dropdown-item {
padding: 0.5em 1em;
background-color: var(--cmg-color-body-bg);
color: var(--cmg-color-body-txt);
}
#top-menu .dropdown-item:focus,
#top-menu .dropdown-item:hover {
background-color: var(--cmg-color-bg-003);
}
#top-menu .dropdown-item .material-icons {
margin-right: 0.25em;
Expand Down Expand Up @@ -782,6 +789,7 @@ ul.form-list li.alert-banner .co-alert {
padding: 2px 4px;
border: 1px solid var(--cmg-color-bg-006);
background-color: var(--cmg-color-body-bg);
color: var(--cmg-color-body-txt);
}
.top-filters label {
margin-bottom: 0;
Expand Down Expand Up @@ -993,6 +1001,7 @@ html.dark-mode #pagination {
height: unset;
border: 1px solid var(--cmg-color-bg-001);
background-color: var(--cmg-color-bg-001);
color: var(--cmg-color-body-txt);
}
#pagination .pagination-form option {
padding: 0;
Expand Down Expand Up @@ -1367,9 +1376,10 @@ ul.form-list .cm-time-picker-vals li {
#dialog .modal-footer {
border-top: none;
}
.btn-close {
.modal-header .btn-close {
background-color: var(--cmg-color-txt-inverse);
border: 1px solid var(--cmg-color-bg-007);
margin: 0;
}
/* MVEA MODAL */
.mvea-modal .modal-dialog {
Expand Down Expand Up @@ -1685,6 +1695,10 @@ button, .btn, .btn:hover {
background-color: var(--cmg-color-bg-005);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
html.dark-mode .btn-default,
html.dark-mode .btn-default:active {
background-color: var(--cmg-color-bg-005);
}
.btn-default:hover {
background-color: var(--cmg-color-btn-bg-001);
color: var(--cmg-color-txt-inverse) !important;
Expand Down Expand Up @@ -1772,6 +1786,10 @@ button, .btn, .btn:hover {
}
.dropdown-menu, .dropdown-item {
color: var(--cmg-color-body-txt);
background-color: var(--cmg-color-body-bg);
}
.alert-success {
color: var(--cmg-color-highlight-007);
}
.card,
.modal-content {
Expand Down
49 changes: 21 additions & 28 deletions app/webroot/css/co-color.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
--cmg-color-highlight-005: #212529; /* badge light (light gray) */

--cmg-color-highlight-006: #b4ffba; /* alert: success (green) */
--cmg-color-highlight-007: #28a745; /* alert: success text color, badge outline (green) */
--cmg-color-highlight-007: #0f5132; /* alert: success text color, badge outline (green) */
--cmg-color-highlight-008: #acf4b2; /* alert: success border color (green) */

--cmg-color-highlight-009: #fffeb4; /* alert: warning (yellow) */
Expand All @@ -88,15 +88,15 @@
--cmg-color-highlight-015: #842029; /* alert: danger text color (red) */
--cmg-color-highlight-016: #f8cece; /* alert: danger border color (red) */

/* Duet Date Picker Colors */
--duet-color-primary: #06c;
--duet-color-text: #222;
--duet-color-text-active: #fff;
--duet-color-placeholder: #666;
--duet-color-button: #f5f5f5;
--duet-color-surface: #fff;
/* Duet Date Picker Colors & Settings */
--duet-color-primary: var(--cmg-color-btn-bg-001);
--duet-color-text: var(--cmg-color-body-txt);
--duet-color-text-active: var(--cmg-color-txt-inverse);
--duet-color-placeholder: var(--cmg-color-txt-soft);
--duet-color-button: var(--cmg-color-bg-003);
--duet-color-surface: var(--cmg-color-body-bg);
--duet-color-overlay: rgba(0, 0, 0, 0.8);
--duet-color-border: #222;
--duet-color-border: var(--cmg-color-body-txt);

--duet-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--duet-font-normal: 400;
Expand All @@ -110,23 +110,23 @@
html.dark-mode {
/* Basics */
--cmg-color-body-bg: #121212; /* Body background color (very dark gray) */
--cmg-color-body-txt: #86868b; /* Body text color (light gray) */
--cmg-color-body-txt: #96969b; /* Body text color (light gray) */
--cmg-color-headings: #a6a6ab; /* Headings color, material icons, de-emphasized links (light gray) */
--cmg-color-txt-soft: #666; /* Disabled text or form fields (light gray) */
--cmg-color-txt-soft: #888; /* Disabled text or form fields (light gray) */
--cmg-color-txt-inverse: #ddd; /* Default color for inverted text (i.e. on dark backgrounds) - this remains similar */

/* Banner and Spinner */
--cmg-color-banner: #22222a; /* Registry v5.x banner color (dark gray/blue) */
--cmg-color-spinner: #4880bb; /* spinner / loading animation (blue) */

/* Links (primary) */
--cmg-color-link: #4880bb; /* primary hyperlink color (a less saturated blue); */
--cmg-color-link: #6392C5; /* primary hyperlink color (a less saturated blue); */
--cmg-color-link-hover: #4880bb; /* primary hyperlink hover color (blue); */

/* Buttons */
--cmg-color-btn-bg-001: #0d4573; /* primary button background color (blue), submit buttons, .btn-primary, pagination */
--cmg-color-btn-bg-002: #333; /* primary button hover color (black) */
--cmg-color-btn-bg-003: #444; /* common background color (gray) */
--cmg-color-btn-bg-003: #eee; /* common background color (gray) */
--cmg-color-btn-004: #c33; /* button (red) */

/* General Background and Border Colors (Grayscale) */
Expand All @@ -142,15 +142,15 @@ html.dark-mode {

/* Highlights: Alerts, Notices, and Badges */
--cmg-color-highlight-001: #bc6262; /* forms: required and error icons (red) */
--cmg-color-highlight-002: #ffd; /* forms: focused input (yellow) */
--cmg-color-highlight-002: #242400; /* forms: focused input (yellow) */

--cmg-color-highlight-003: #0B3556; /* alert: info text color (blue) */
--cmg-color-highlight-004: #d4ecff; /* search bar active (blue) */
--cmg-color-highlight-005: #212529; /* badge light (light gray) */
--cmg-color-highlight-005: #ccc; /* badge light (light gray) */

--cmg-color-highlight-006: #7aad7e; /* alert: success (green) */
--cmg-color-highlight-007: #28a745; /* alert: success text color, badge outline (green) */
--cmg-color-highlight-008: #acf4b2; /* alert: success border color (green) */
--cmg-color-highlight-006: #97BF97; /* alert: success (green) */
--cmg-color-highlight-007: #0f5132; /* alert: success text color, badge outline (green) */
--cmg-color-highlight-008: #0f5132; /* alert: success border color (green) */

--cmg-color-highlight-009: #fffeb4; /* alert: warning (yellow) */
--cmg-color-highlight-010: #41412e; /* alert: warning text color (yellow) */
Expand All @@ -161,14 +161,7 @@ html.dark-mode {
--cmg-color-highlight-014: #dc3545; /* danger badge (red) */
--cmg-color-highlight-015: #842029; /* alert: danger text color (red) */
--cmg-color-highlight-016: #f8cece; /* alert: danger border color (red) */

/* Duet Date Picker Colors */
--duet-color-primary: #06c;
--duet-color-text: #222;
--duet-color-text-active: #fff;
--duet-color-placeholder: #666;
--duet-color-button: #f5f5f5;
--duet-color-surface: #fff;
--duet-color-overlay: rgba(0, 0, 0, 0.8);
--duet-color-border: #222;

/* Bootstrap Overrides for Dark Mode */
--bs-light-rgb: #151515;
}

0 comments on commit 06d8ee6

Please sign in to comment.