[Evergreen-commits] [GIT] Evergreen ILS branch main updated. f414172d5ad5a0fd2129158fc552be2fd0afc73f

This is an automated email from the git hooks/post-receive script. It was generated because a ref change was pushed to the repository containing the project "Evergreen ILS". The branch, main has been updated via f414172d5ad5a0fd2129158fc552be2fd0afc73f (commit) via 2ed81b1ed10beaa44077889d46d4dcca488e2073 (commit) via 0f39c3ff4c957b030eb20ce1229fd9bcd7983d0f (commit) via b62ef1c9ed9ed439a0d0a51070f24dbabbc3a81e (commit) via 93883ea355f0a886bdca49548372984668238a1f (commit) via ed0c20c522ab9a2d1e4ef78eabd2eb03c654c474 (commit) via a6cb1bfe53482036ab7741ab7235be2629f8c4df (commit) from 55698546cda7cdef7bbce5408e4f964eb2302cf4 (commit) Those revisions listed above that are new to this repository have not appeared on any other notification email; so we list those revisions in full, below. - Log ----------------------------------------------------------------- commit f414172d5ad5a0fd2129158fc552be2fd0afc73f Author: Stephanie Leary <stephanie.leary@equinoxoli.org> Date: Thu Apr 10 19:17:47 2025 +0000 LP2106666 .btn-default should match .btn-normal Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org> Signed-off-by: blake <blake@mobiusconsortium.org> diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index 68c2ce3523..c0ea0761d5 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -512,12 +512,6 @@ input, textarea, select, option, color: var(--bs-body-color); } -.btn.btn-default:focus, -.btn.btn-default:active { - color: var(--bs-text-highlight); - background-color: var(--bs-body-bg-highlight); -} - .popover-header { background-color: var(--popover-header-bg); color: var(--bs-body-color); @@ -857,6 +851,7 @@ input, textarea, select, option, } .btn-normal, +.btn-default, .btn-destroy, .btn-outline-normal:is(:active, :hover, :focus, :focus-visible) { color: var(--btn-gray-color); @@ -864,7 +859,8 @@ input, textarea, select, option, border: 1px solid var(--btn-gray-border); } -.btn-normal:is(:active, :hover, :focus, :focus-visible) { +.btn-normal:is(:active, :hover, :focus, :focus-visible), +.btn-default:is(:active, :hover, :focus, :focus-visible) { color: var(--btn-gray-color); background-color: var(--btn-gray-bg-hover); border: 1px solid var(--btn-gray-border); @@ -884,6 +880,7 @@ input, textarea, select, option, } .btn-normal[disabled], +.btn-default[disabled], .btn-destroy[disabled] { color: var(--bs-body-color); background-color: var(--btn-gray-bg); @@ -985,18 +982,6 @@ button.dropdown-toggle:focus, background-color: var(--bs-body-bg-highlight); } -.btn.btn-default:active { - color: var(--bs-gray-800); - background-color: #e6e6e6; - border-color: #adadad; -} - -[data-bs-theme="dark"] .btn.btn-default:active { - color: var(--bs-gray-150); - background-color: var(--bs-gray-800); - border-color: #adadad; -} - :is(.nav, .nav-pills, .nav-tabs) > li.active > a:is(a, .active, :active) { background-color: var(--bs-body-bg); color: var(--primary); commit 2ed81b1ed10beaa44077889d46d4dcca488e2073 Author: Stephanie Leary <stephanie.leary@equinoxoli.org> Date: Wed Apr 2 23:39:11 2025 +0000 LP2106666 Remove hard-coded colors in AngularJS Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org> diff --git a/Open-ILS/src/templates/staff/admin/workstation/t_stored_prefs.tt2 b/Open-ILS/src/templates/staff/admin/workstation/t_stored_prefs.tt2 index 641a73ffc7..dd0826a211 100644 --- a/Open-ILS/src/templates/staff/admin/workstation/t_stored_prefs.tt2 +++ b/Open-ILS/src/templates/staff/admin/workstation/t_stored_prefs.tt2 @@ -1,7 +1,7 @@ <style> /* TODO */ #stored-prefs-container .selected { - background-color: #F5F5F5; + background-color: var(--bs-body-bg-highlight); } #stored-prefs-container .row { padding-top: 10px; diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index 6b46dd185c..68c2ce3523 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -1019,6 +1019,21 @@ button.dropdown-toggle:focus, border: none; } +/* Use subtle background colors in older interfaces */ +.bg-info { + background-color: var(--badge-info-bg); +} + +.bg-success { + background-color: var(--badge-success-bg); +} + +pre { + color: var(--bs-body-color); + background-color: var(--bs-body-bg-alt); + border: 1px solid var(--border); +} + @media (forced-colors: active) or (prefers-contrast: forced) { .uib-increment .btn, .uib-decrement .btn { commit 0f39c3ff4c957b030eb20ce1229fd9bcd7983d0f Author: Stephanie Leary <stephanie.leary@equinoxoli.org> Date: Thu Apr 10 16:24:40 2025 +0000 LP2106666 AngularJS component stylesheet changes Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org> diff --git a/Open-ILS/src/templates/staff/css/admin.css.tt2 b/Open-ILS/src/templates/staff/css/admin.css.tt2 index 4bd9b9f31d..ccc2cf67a7 100644 --- a/Open-ILS/src/templates/staff/css/admin.css.tt2 +++ b/Open-ILS/src/templates/staff/css/admin.css.tt2 @@ -18,7 +18,11 @@ .admin-splash-container .new-entry { margin-top: 10px; padding-top: 10px; - border-top: 2px solid light-dark(#F5F5F5, var(--bs-gray-950)); + border-top: 2px solid #F5F5F5; +} + +[data-bs-theme="dark"] .admin-splash-container .new-entry { + border-top: 2px solid var(--bs-gray-950); } #auto-print-container { diff --git a/Open-ILS/src/templates/staff/css/circ.css.tt2 b/Open-ILS/src/templates/staff/css/circ.css.tt2 index dd7f9bd57c..0c14eafcce 100644 --- a/Open-ILS/src/templates/staff/css/circ.css.tt2 +++ b/Open-ILS/src/templates/staff/css/circ.css.tt2 @@ -26,7 +26,11 @@ .patron-summary-pref-name { padding-left: 6px; - color: light-dark(var(--bs-green-600), var(--bs-green-400)); + color: var(--bs-green-600); +} + +[data-bs-theme="dark"] .patron-summary-pref-name { + color: var(--bs-green-400); } /* Tag icon used for name keywords shouldn't look like a link */ @@ -233,7 +237,15 @@ #patron-reg-container .ng-invalid, #patron-reg-container .ng-invalid-required, #patron-pay-by-credit-form .ng-invalid { - background-color: light-dark(var(--badge-warning-bg), rgba(var(--bs-yellow-400-rgba), 0.1)); + background-color: var(--badge-warning-bg); + color: var(--badge-danger-color); +} + +[data-bs-theme="dark"] #patron-notes-container .ng-invalid-required, +[data-bs-theme="dark"] #patron-reg-container .ng-invalid, +[data-bs-theme="dark"] #patron-reg-container .ng-invalid-required, +[data-bs-theme="dark"] #patron-pay-by-credit-form .ng-invalid { + background-color: rgba(var(--bs-yellow-400-rgba), 0.1); color: var(--badge-danger-color); } @@ -243,7 +255,11 @@ } .patron-reg-pref-names { - background-color: light-dark(var(--bs-gray-200), var(--bs-gray-900)); + background-color: var(--bs-gray-200); +} + +[data-bs-theme="dark"] .patron-reg-pref-names { + background-color: var(--bs-gray-900); } .patron-reg-example-btn { @@ -252,7 +268,7 @@ .patron-reg-pending-address { border:2px dashed var(--border); - -moz-border-radius: 10px; + border-radius: 10px; padding: 10px; margin-bottom: 5px; } diff --git a/Open-ILS/src/templates/staff/css/nav.css.tt2 b/Open-ILS/src/templates/staff/css/nav.css.tt2 index dc6044fda8..f2b7bc7954 100644 --- a/Open-ILS/src/templates/staff/css/nav.css.tt2 +++ b/Open-ILS/src/templates/staff/css/nav.css.tt2 @@ -4,17 +4,24 @@ * Mostly matches the styling on the angular navbar */ :root { - --nav-link-color: light-dark(white, var(--bs-gray-100)); - --nav-link-hover: light-dark(white, var(--bs-gray-100)); - --nav-bg: var(--staff-navbar-b); - --nav-border-hover: var(--bs-gray-300); - --nav-hover-bg: light-dark(rgba(var(--success-text-light-rgb), 0.1), rgba(211, 231, 190, 0.1)); - --nav-hover-border-bottom: light-dark(rgba(222, 226, 230, 0.4), rgba(6, 34, 25, 0.2)); - --nav-dropdown-color: var(--bs-body-color); - --nav-dropdown-bg: var(--bs-body-bg-alt); - --nav-dropdown-bg-hover: light-dark(rgba(var(--bs-green-rgb), .10), var(--bs-green-800)); - - --divider: 1px solid light-dark(#e5e5e5, #151515); + --nav-link-color: white; + --nav-link-hover: white; + --nav-border-hover: var(--bs-gray-300); + --nav-hover-bg: rgba(var(--success-text-light-rgb), 0.1); + --nav-hover-border-bottom: rgba(222, 226, 230, 0.4); + --nav-dropdown-bg-hover: rgba(var(--bs-green-rgb), .10); + --nav-dropdown-bg: var(--bs-body-bg); + --nav-dropdown-item-color: var(--bs-body-color); +} +[data-bs-theme="dark"]:root { + --nav-link-color: var(--bs-gray-100); + --nav-link-hover: var(--bs-gray-100); + --nav-border-hover: var(--bs-gray-300); + --nav-hover-bg: rgba(211, 231, 190, 0.1); + --nav-hover-border-bottom: rgba(6, 34, 25, 0.2); + --nav-dropdown-bg-hover: var(--bs-green-800); + --nav-dropdown-bg: var(--bs-body-bg-alt); + --nav-dropdown-item-color: var(--bs-gray-100); } #top-navbar.navbar-default { @@ -54,7 +61,7 @@ } #top-navbar.navbar-default .dropdown-menu a:hover{ - color: var(--nav-dropdown); + color: var(--nav-dropdown-item-color); background-color: var(--nav-dropdown-bg-hover); } #top-navbar.navbar-default .dropdown-menu .divider{ @@ -91,4 +98,4 @@ padding-bottom: 8px; } -/* #endregion */ \ No newline at end of file +/* #endregion */ diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index dc5f70a56e..6b46dd185c 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -496,9 +496,6 @@ input, textarea, select, option, .accordion-button:not(.collapsed), .alert-info, .btn-outline-dark, -.btn-default, -.btn-light, -.btn-light.dropdown-toggle, .card-header, .eg-grid-header, .eg-grid-sticky-header, @@ -952,7 +949,7 @@ input, textarea, select, option, } .dropdown-menu:has(li>a){ - background-color: var(--bs-body-bg); + background-color: var(--bs-body-bg-alt); } .dropdown-menu>li>a, .dropdown-menu>li>a:hover, @@ -966,6 +963,14 @@ input, textarea, select, option, background-color: var(--bs-body-bg-alt); } +.open > .dropdown-menu { + box-shadow: 0 0.1em 0.5em rgba(var(--box-shadow), 0.3); +} + +[data-bs-theme="dark"] .open > .dropdown-menu { +box-shadow: 0 0.1em 1em rgba(var(--box-shadow), 0.7); +} + .dropdown-menu.uib-datepicker-popup { background-color: var(--bs-white); } commit b62ef1c9ed9ed439a0d0a51070f24dbabbc3a81e Author: Stephanie Leary <stephanie.leary@equinoxoli.org> Date: Thu Apr 10 14:40:43 2025 +0000 LP2106666 Split light and dark files for AngularJS Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org> diff --git a/Open-ILS/src/templates/staff/base.tt2 b/Open-ILS/src/templates/staff/base.tt2 index caf2e9578a..682916c167 100644 --- a/Open-ILS/src/templates/staff/base.tt2 +++ b/Open-ILS/src/templates/staff/base.tt2 @@ -28,8 +28,10 @@ <link rel="stylesheet" href="[% WEB_BUILD_PATH %]/css/evergreen-staff-client-deps.[% EVERGREEN_VERSION %].min.css" /> [% END %] <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/cat.css" /> - <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/styles-colors.css" /> <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/style.css" /> + <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/styles-colors.css" /> + <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/light.css" /> + <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/dark.css" /> <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/nav.css" /> <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/grid.css" /> diff --git a/Open-ILS/src/templates/staff/base_js.tt2 b/Open-ILS/src/templates/staff/base_js.tt2 index a277d7b49d..7763652693 100644 --- a/Open-ILS/src/templates/staff/base_js.tt2 +++ b/Open-ILS/src/templates/staff/base_js.tt2 @@ -35,7 +35,8 @@ UpUp.start({ '[% ctx.media_prefix %]/js/ui/default/staff/build/css/tablesort.css', '[% ctx.base_path %]/staff/css/print.css', '[% ctx.base_path %]/staff/css/cat.css', - '[% ctx.base_path %]/staff/css/styles-colors.css', + '[% ctx.base_path %]/staff/css/light.css', + '[% ctx.base_path %]/staff/css/dark.css', '[% ctx.base_path %]/staff/css/style.css', '[% ctx.base_path %]/staff/css/nav.css', '[% ctx.base_path %]/staff/css/grid.css', diff --git a/Open-ILS/src/templates/staff/css/dark.css.tt2 b/Open-ILS/src/templates/staff/css/dark.css.tt2 new file mode 100644 index 0000000000..3462e67b81 --- /dev/null +++ b/Open-ILS/src/templates/staff/css/dark.css.tt2 @@ -0,0 +1,107 @@ +/* Dark mode */ +:root[data-bs-theme="dark"] { + --evergreen: var(--eg-green-200); /* brand color */ + --black: white; + --white: black; + --bs-white: black; + --bs-light: var(--bs-gray-850); + --bs-dark: var(--bs-gray-100); + --border: var(--bs-gray-700); + --border-thick: var(--bs-gray-600); + --inactive: var(--bs-gray-400); + --form-control-border: var(--bs-gray-700); + --form-check-border: var(--bs-gray-800); + + --bs-body-color: var(--bs-gray-400); + --bs-body-color-rgb: 222, 226, 230; + --bs-body-bg: var(--bs-gray-925); + --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color); + --bs-body-bg-alt: var(--bs-gray-900); + --bs-body-bg-highlight: var(--bs-gray-850); + --bs-text-highlight: var(--bs-gray-500); + --bs-card-bg: var(--bs-gray-925); + + --success: #002C1F; + --success-color: var(--eg-green-100); + --success-hover-color: var(--eg-green-050); + --success-border: #157146; + --success-hover: #00593d; + --success-disabled: #779788; /* desaturated */ + --success-disabled-rgb: 68, 135, 104; + --success-text-light: #003b35; + --success-text-light-rgb: 223, 240, 216; + --success-text-dark: #dff0d8; + --form-success-bg: var(--eg-green-900); + + /* used in both nav and splash components: */ + --staff-navbar-a: var(--bs-gray-900); + --staff-navbar-b: var(--bs-gray-975); + + --badge-color: var(--bs-blue-200); + --badge-bg: var(--bs-blue-900); + + --badge-danger-bg: var(--bs-red-800); + --badge-danger-selected-bg: var(--bs-red-700); + --badge-danger-color: var(--bs-red-200); + + --badge-info-color: var(--bs-cyan-100); + --badge-info-bg: var(--bs-cyan-900); + --badge-info-border: var(--bs-cyan-700); + + --badge-success-color: var(--success-text-dark); + --badge-success-bg: var(--success-text-light); + + --badge-warning-bg: var(--bs-yellow-800); + --badge-warning-hover-bg: var(--bs-yellow-900); + --badge-warning-selected-bg: var(--bs-yellow-700); + --badge-warning-color: var(--bs-yellow-200); + + --grid-color: var(--bs-body-color); + --grid-borders: #292929; + --grid-filter-active: var(--bs-gray-900); + --grid-header-row: var(--bs-gray-050); + --grid-header-button: var(--bs-blue-300); + --grid-row-selected: var(--bs-blue-100); + --grid-row-selected-bg: var(--bs-blue-900); + --grid-row-selected-border: var(--bs-blue-800); + --row-even-bg: var(--bs-body-bg-alt); + + --danger: var(--bs-red-800); + --danger-bg-hover: var(--bs-red-700); + --danger-color: var(--bs-red-300); + --danger-border: var(--bs-red-600); + --destroy-color: var(--bs-red-200); + + --info: var(--bs-cyan-300); + --info-border: var(--bs-cyan-700); + --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1); + --info-hover: var(--bs-cyan-750); + + --primary: var(--bs-blue-300); + --primary-border: var(--bs-blue-400); + --primary-focus-outline-rgb: var(--bs-blue-600-rgb); + --primary-hover: var(--bs-blue-400); + --primary-disabled: rgba(var(--bs-blue-300-rgb), 0.6); + + --warning-color: var(--bs-yellow-200); + --warning-border: var(--bs-yellow-400); + --warning-border-hover: var(--bs-yellow-500); + --warning-shadow: var(--eg-yellow-2); + + --secondary-bg: var(--bs-gray-700); + --btn-gray-bg: var(--bs-gray-900); + --btn-gray-bg-hover: var(--bs-gray-800); + --btn-gray-color: var(--bs-body-color); + --btn-gray-border: var(--bs-gray-800); + + --modal-header-color: white; + --modal-header-bg: var(--bs-cyan-800); + --modal-body-bg: var(--bs-body-bg-alt); + --popover-menu-hover: var(--bs-gray-900); + --popover-header-bg: var(--bs-gray-900); + --dropdown-menu-bg: var(--bs-gray-900); + + --batch-item-attr-header-bg: var(--bs-blue-900-desat); + --status-archived: var(--bs-gray-500); + --star-stroke: transparent; +} diff --git a/Open-ILS/src/templates/staff/css/light.css.tt2 b/Open-ILS/src/templates/staff/css/light.css.tt2 new file mode 100644 index 0000000000..7f099be099 --- /dev/null +++ b/Open-ILS/src/templates/staff/css/light.css.tt2 @@ -0,0 +1,112 @@ +/* Light mode */ +:root { + --evergreen: var(--eg-green-200); /* brand color */ + --black: black; + --white: white; + --bs-white: white; + --bs-light: var(--bs-gray-100); + --bs-dark: var(--bs-gray-900); + --border: var(--bs-gray-300); + --border-thick: var(--bs-gray-400); + --inactive: var(--bs-gray-800); + --form-control-border: var(--bs-gray-500); + --form-check-border: var(--bs-gray-300); + + --bs-body-color: var(--bs-gray-900); + --bs-body-color-rgb: 33, 37, 41; + --bs-body-bg: white; + --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color); + --bs-body-bg-alt: var(--bs-gray-110); + --bs-body-bg-highlight: var(--bs-gray-200); + --bs-text-highlight: var(--bs-gray-700); + --bs-card-bg: var(--bs-gray-125); + + --success: var(--bs-green-500); + --success-color: white; + --success-hover-color: var(--eg-green-100); + --success-border: #00593d; + --success-hover: #157146; + --success-disabled: #448768; /* desaturated */ + --success-disabled-rgb: 68, 135, 104; + --success-text-light: #dff0d8; + --success-text-light-rgb: 223, 240, 216; + --success-text-dark: #003b35; + --form-success-bg: var(--bs-green-100); + + /* used in both nav and splash components: */ + --staff-navbar-a: var(--eg-green-800); + --staff-navbar-b: var(--eg-green-600); + + --badge-color: var(--bs-blue-800); + --badge-bg: var(--bs-blue-100); + + --badge-danger-bg: var(--bs-red-100); + --badge-danger-selected-bg: var(--bs-red-200); + --badge-danger-color: var(--bs-red-800); + + --badge-info-color: var(--bs-cyan-900); + --badge-info-bg: var(--bs-cyan-100); + --badge-info-border: var(--bs-cyan-300); + + --badge-success-color: var(--success-text-dark); + --badge-success-bg: var(--success-text-light); + + --badge-warning-bg: var(--bs-yellow-200); + --badge-warning-hover-bg: var(--bs-yellow-300); + --badge-warning-selected-bg: var(--bs-yellow-300); + --badge-warning-color: var(--bs-orange-750); + + --grid-color: var(--bs-body-color); + --grid-borders: rgba(0,0,0,0.125); + --grid-filter-active: var(--bs-blue-900-desat); + --grid-header-row: var(--bs-gray-100); + --grid-header-button: var(--bs-blue-700); + --grid-row-selected: #004085; + --grid-row-selected-bg: var(--bs-blue-100); + --grid-row-selected-border: var(--bs-blue-125); + --row-even-bg: var(--bs-body-bg-alt); + + --danger: var(--bs-red-600); + --danger-bg-hover: var(--bs-red-700); + --danger-color: var(--bs-red-700); + --danger-border: var(--bs-red-700); + --destroy-color: var(--bs-red-600); + + --info: var(--bs-cyan-700); + --info-border: var(--bs-cyan-300); + --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1); + --info-hover: var(--bs-cyan-200); + + --primary: var(--bs-blue-600); + --primary-border: var(--bs-blue-650); + --primary-focus-outline-rgb: var(--bs-blue-600-rgb); + --primary-hover: var(--bs-blue-650); + --primary-disabled: rgba(var(--bs-blue-600-rgb), 1); + + --warning-color: var(--bs-yellow-500); + --warning-border: var(--bs-yellow-625); + --warning-border-hover: var(--bs-yellow-500); + --warning-shadow: rgba(var(--bs-yellow-400-rgba), 0.5); + + --secondary-bg: var(--bs-gray-300); + --btn-gray-bg: var(--bs-gray-200); + --btn-gray-bg-hover: var(--bs-gray-300); + --btn-gray-color: var(--bs-body-color); + --btn-gray-border: var(--bs-gray-400); + + --modal-header-color: white; + --modal-header-bg: var(--bs-cyan-800); + --modal-body-bg: var(--bs-body-bg); + --popover-menu-hover: var(--bs-gray-100); + --popover-header-bg: var(--bs-gray-100); + --dropdown-menu-bg: white; + + --batch-item-attr-header-bg: var(--bs-blue-100); + --status-archived: var(--bs-gray-600); + --star-stroke: var(--bs-yellow-700); + --bs-row-alt: rgba(var(--bs-black-rgb), 0.03); + --bs-tertiary-bg: var(--bs-body-bg-highlight); + --bs-border-color: var(--border); + --box-shadow: var(--black-rgb); + --border-print: #aaa; +} diff --git a/Open-ILS/src/templates/staff/css/styles-colors.css.tt2 b/Open-ILS/src/templates/staff/css/styles-colors.css.tt2 index 738a59c32f..ab9f4e690f 100644 --- a/Open-ILS/src/templates/staff/css/styles-colors.css.tt2 +++ b/Open-ILS/src/templates/staff/css/styles-colors.css.tt2 @@ -159,231 +159,4 @@ --bs-red-300: #EA868F; --bs-red-200: #F1AFB5; --bs-red-100: #f8d7da; - - - /**********************/ - /* LIGHT MODE */ - /**********************/ - --black: black; - --white: white; - --bs-white: white; - --bs-light: var(--bs-gray-100); - --bs-dark: var(--bs-gray-900); - --border: var(--bs-gray-300); - --border-thick: var(--bs-gray-400); - --inactive: var(--bs-gray-800); - --form-control-border: var(--bs-gray-500); - --form-check-border: var(--bs-gray-300); - - --bs-body-color: var(--bs-gray-900); - --bs-body-color-rgb: 33, 37, 41; - --bs-body-bg: white; - --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color); - --bs-body-bg-alt: var(--bs-gray-110); - --bs-body-bg-highlight: var(--bs-gray-200); - --bs-text-highlight: var(--bs-gray-700); - --bs-card-bg: var(--bs-gray-125); - --bs-row-alt: rgba(var(--bs-black-rgb), 0.03); - --box-shadow: var(--black-rgb); - --border-print: #aaa; - - --success: var(--bs-green-500); - --success-color: white; - --success-hover-color: var(--eg-green-100); - --success-border: #00593d; - --success-hover: #157146; - --success-disabled: #448768; /* desaturated */ - --success-disabled-rgb: 68, 135, 104; - --success-text-light: #dff0d8; - --success-text-light-rgb: 223, 240, 216; - --success-text-dark: #003b35; - - --form-success-bg: var(--bs-green-100); - /* used in both nav and splash components: */ - --staff-navbar-a: var(--eg-green-800); - --staff-navbar-b: var(--eg-green-600); - - --badge-color: var(--bs-blue-800); - --badge-bg: var(--bs-blue-100); - - --badge-danger-bg: var(--bs-red-100); - --badge-danger-selected-bg: var(--bs-red-200); - --badge-danger-color: var(--bs-red-800); - - --badge-info-color: var(--bs-cyan-900); - --badge-info-bg: var(--bs-cyan-100); - --badge-info-border: var(--bs-cyan-300); - - --badge-success-color: var(--success-text-dark); - --badge-success-bg: var(--success-text-light); - - --badge-warning-bg: var(--bs-yellow-200); - --badge-warning-hover-bg: var(--bs-yellow-300); - --badge-warning-selected-bg: var(--bs-yellow-300); - --badge-warning-color: var(--bs-orange-750); - - --batch-item-attr-header-bg: var(--bs-blue-100); - - --grid-color: var(--bs-body-color); - --grid-borders: rgba(0,0,0,0.125); - --grid-filter-active: var(--bs-blue-900-desat); - --grid-header-row: var(--bs-gray-100); - --grid-header-button: var(--bs-blue-700); - --grid-row-selected: #004085; - --grid-row-selected-bg: var(--bs-blue-100); - --grid-row-selected-border: var(--bs-blue-125); - --row-even-bg: var(--bs-body-bg-alt); - --modal-header-color: white; - --modal-header-bg: var(--bs-cyan-800); - - --danger: var(--bs-red-600); - --danger-bg-hover: var(--bs-red-700); - --danger-color: var(--bs-red-700); - --danger-border: var(--bs-red-700); - --destroy-color: var(--bs-red-600); - --info: var(--bs-cyan-700); - --info-border: var(--bs-cyan-300); - --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1); - --info-hover: var(--bs-cyan-200); - --primary: var(--bs-blue-600); - --primary-border: var(--bs-blue-650); - --primary-focus-outline-rgb: var(--bs-blue-600-rgb); - --primary-hover: var(--bs-blue-650); - --primary-disabled: rgba(var(--bs-blue-600-rgb), 1); - - --warning-color: var(--bs-yellow-500); - --warning-border: var(--bs-yellow-625); - --warning-border-hover: var(--bs-yellow-500); - --warning-shadow: rgba(var(--bs-yellow-400-rgba), 0.5); - - --secondary-bg: var(--bs-gray-300); - --btn-gray-bg: var(--bs-gray-200); - --btn-gray-bg-hover: var(--bs-gray-300); - --btn-gray-color: var(--bs-body-color); - --btn-gray-border: var(--bs-gray-400); - - --row-even-bg: var(--bs-body-bg-alt); - --modal-header-color: white; - --modal-header-bg: var(--bs-cyan-800); - --modal-body-bg: var(--bs-body-bg); - --popover-menu-hover: var(--bs-gray-100); - --popover-header-bg: var(--bs-gray-100); - --dropdown-menu-bg: white; - - --status-archived: var(--bs-gray-600); - --star-stroke: var(--bs-yellow-700); -} - - -/**********************/ -/* DARK MODE */ -/**********************/ -:root[data-bs-theme="dark"] { - --black: white; - --white: black; - --bs-white: black; - --bs-light: var(--bs-gray-850); - --bs-dark: var(--bs-gray-100); - --border: var(--bs-gray-700); - --border-thick: var(--bs-gray-600); - --inactive: var(--bs-gray-400); - --form-control-border: var(--bs-gray-700); - --form-check-border: var(--bs-gray-800); - - --bs-body-color: var(--bs-gray-400); - --bs-body-color-rgb: 222, 226, 230; - --bs-body-bg: var(--bs-gray-925); - --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color); - --bs-body-bg-alt: var(--bs-gray-900); - --bs-body-bg-highlight: var(--bs-gray-850); - --bs-text-highlight: var(--bs-gray-500); - --bs-card-bg: var(--bs-gray-925); - - --evergreen: var(--eg-green-200); /* brand color */ - - --success: #002C1F; - --success-color: var(--eg-green-100); - --success-hover-color: var(--eg-green-050); - --success-border: #157146; - --success-hover: #00593d; - --success-disabled: #779788; /* desaturated */ - --success-disabled-rgb: 68, 135, 104; - --success-text-light: #003b35; - --success-text-light-rgb: 223, 240, 216; - --success-text-dark: #dff0d8; - - --form-success-bg: var(--eg-green-900); - /* used in both nav and splash components: */ - --staff-navbar-a: var(--bs-gray-900); - --staff-navbar-b: var(--bs-gray-975); - - --badge-color: var(--bs-blue-200); - --badge-bg: var(--bs-blue-900); - - --badge-danger-bg: var(--bs-red-800); - --badge-danger-selected-bg: var(--bs-red-700); - --badge-danger-color: var(--bs-red-200); - - --badge-info-color: var(--bs-cyan-100); - --badge-info-bg: var(--bs-cyan-900); - --badge-info-border: var(--bs-cyan-700); - - --badge-success-color: var(--success-text-dark); - --badge-success-bg: var(--success-text-light); - - --badge-warning-bg: var(--bs-yellow-800); - --badge-warning-hover-bg: var(--bs-yellow-900); - --badge-warning-selected-bg: var(--bs-yellow-700); - --badge-warning-color: var(--bs-yellow-200); - - --batch-item-attr-header-bg: var(--bs-blue-900-desat); - - --grid-color: var(--bs-body-color); - --grid-borders: #292929; - - --grid-filter-active: var(--bs-gray-900); - --grid-header-row: var(--bs-gray-050); - - --grid-row-selected: var(--bs-blue-100); - --grid-row-selected-bg: var(--bs-blue-900); - --grid-row-selected-border: var(--bs-blue-800); - - --grid-header-button: var(--bs-blue-300); - - --danger: var(--bs-red-800); - --danger-bg-hover: var(--bs-red-700); - --danger-color: var(--bs-red-300); - --danger-border: var(--bs-red-600); - --destroy-color: var(--bs-red-200); - --info: var(--bs-cyan-300); - --info-border: var(--bs-cyan-700); - --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1); - --info-hover: var(--bs-cyan-750); - --primary: var(--bs-blue-300); - --primary-border: var(--bs-blue-400); - --primary-focus-outline-rgb: var(--bs-blue-600-rgb); - --primary-hover: var(--bs-blue-400); - --primary-disabled: rgba(var(--bs-blue-300-rgb), 0.6); - - --warning-color: var(--bs-yellow-200); - --warning-border: var(--bs-yellow-400); - --warning-border-hover: var(--bs-yellow-500); - --warning-shadow: var(--eg-yellow-2); - - --secondary-bg: var(--bs-gray-700); - --btn-gray-bg: var(--bs-gray-900); - --btn-gray-bg-hover: var(--bs-gray-800); - --btn-gray-color: var(--bs-body-color); - --btn-gray-border: var(--bs-gray-800); - - --row-even-bg: var(--bs-body-bg-alt); - --modal-header-color: white; - --modal-header-bg: var(--bs-cyan-800); - --modal-body-bg: var(--bs-body-bg-alt); - --popover-menu-hover: var(--bs-gray-900); - --popover-header-bg: var(--bs-gray-900); - --dropdown-menu-bg: var(--bs-gray-900); - - --status-archived: var(--bs-gray-500); - --star-stroke: transparent; } commit 93883ea355f0a886bdca49548372984668238a1f Author: Stephanie Leary <stephanie.leary@equinoxoli.org> Date: Thu Apr 10 15:40:04 2025 +0000 LP2106666 Angular component stylesheet changes Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org> diff --git a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.css b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.css index f336d26b06..303db4288f 100644 --- a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.css +++ b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.css @@ -3,11 +3,11 @@ } .accesskey-info .row:nth-of-type(odd) { - background: var(--keyboard-info-row-odd); + background: var(--bs-body-bg-alt); } .accesskey-info .row.shortcut-info { - background: var(--keyboard-info-row-even); + background: var(---bs-body-bg); font-style: italic; } diff --git a/Open-ILS/src/eg2/src/app/share/catalog/bib-display-field.component.css b/Open-ILS/src/eg2/src/app/share/catalog/bib-display-field.component.css index 4ff035eb21..bd6b6e99f8 100644 --- a/Open-ILS/src/eg2/src/app/share/catalog/bib-display-field.component.css +++ b/Open-ILS/src/eg2/src/app/share/catalog/bib-display-field.component.css @@ -1,19 +1,27 @@ mark { - --highlight-bg: light-dark(#B4F8D3, #002C1F); - --highlight-border: light-dark(#20C997, #0A3622); - --highlight-id-bg: light-dark(#C4F0F8, #031633); - --highlight-id-border: light-dark(#3DD5F3, #084298); + --highlight-bg-opacity: 1; + --highlight-border-opacity: 1; + --highlight-bg: 180, 248, 211; + --highlight-border: 32, 201, 151; + --highlight-id-bg: 196, 240, 248; + --highlight-id-border: 61, 213, 243; +} + +[data-bs-theme="dark"] mark { + --highlight-bg-opacity: 0.15; + --highlight-border-opacity: 0.45; } .oils_SH { font-weight: bolder; - background: var(--highlight-bg); - border-bottom: 1px solid var(--highlight-border); + background: rgba(var(--highlight-bg), var(--highlight-bg-opacity)); + border-block-end: 1px solid rgba(var(--highlight-border), var(--highlight-border-opacity)); color: inherit; } .oils_SH.identifier { - background: var(--highlight-id-bg); - border-bottom: 1px solid var(--highlight-id-border); + background: rgba(var(--highlight-id-bg), var(--highlight-bg-opacity)); + border-block-end: 1px solid rgba(var(--highlight-id-border), var(--highlight-border-opacity)); } + diff --git a/Open-ILS/src/eg2/src/app/share/daterange-select/daterange-select.component.css b/Open-ILS/src/eg2/src/app/share/daterange-select/daterange-select.component.css index 3026cbd102..62afdf0f6b 100644 --- a/Open-ILS/src/eg2/src/app/share/daterange-select/daterange-select.component.css +++ b/Open-ILS/src/eg2/src/app/share/daterange-select/daterange-select.component.css @@ -1,7 +1,3 @@ -:host { - --daterange-today-border: light-dark(#129a78, var(--bs-blue-900)); -} - .daterange-day { text-align: center; padding: 0.185rem 0.25rem; @@ -11,6 +7,10 @@ } .today { - border: solid 2px var(--daterange-today-border); + border: solid 2px #129a78; border-radius: 5px; } + +[data-bs-theme="dark"] .today { + border: solid 2px var(--bs-blue-900); +} diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.css b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.css index c55dbb96d4..2e30dbd277 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.css +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.css @@ -58,15 +58,14 @@ justify-content: flex-end; } -.eg-grid-toolbar-utilities .btn-outline-dark, -.eg-grid-toolbar-utilities .btn-outline-dark:hover { - border-color: light-dark(rgba(33, 37, 41, 0.35), rgba(255, 255, 255, 0.35)); -} - /* reduce opacity of text/icons, not borders */ .eg-grid-toolbar-utilities .btn-outline-dark.disabled, .eg-grid-toolbar-utilities .btn-outline-dark:disabled { - color: light-dark(rgba(33, 37, 41, 0.5), rgba(255, 255, 255, 0.5)); + opacity: 1; +} + +[data-bs-theme="dark"] .eg-grid-toolbar-utilities .btn-outline-dark.disabled, +[data-bs-theme="dark"] .eg-grid-toolbar-utilities .btn-outline-dark:disabled { opacity: 1; } diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css index 5fd23552ec..92bb6a30b9 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css +++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css @@ -36,7 +36,7 @@ table.table.eg-grid { .eg-grid { width: 100%; - color: var(--grid); + color: var(--bs-body-color); caption-side: block-start; height: 1px; table-layout: auto; diff --git a/Open-ILS/src/eg2/src/app/share/tree/tree.component.css b/Open-ILS/src/eg2/src/app/share/tree/tree.component.css index 98946b4bd0..e94990e297 100644 --- a/Open-ILS/src/eg2/src/app/share/tree/tree.component.css +++ b/Open-ILS/src/eg2/src/app/share/tree/tree.component.css @@ -1,5 +1,9 @@ :host { - --tree-border: light-dark(var(--bs-gray-500), var(--bs-gray-400)); + --tree-border: var(--bs-gray-500); +} + +[data-bs-theme="dark"] :host { + --tree-border: var(--bs-gray-400); } .eg-tree { @@ -81,13 +85,22 @@ } .eg-tree-branch .eg-tree-node.active > .eg-tree-node-wrapper { - background-color: light-dark(rgba(var(--box-shadow), .04), rgba(255,255,255, .1)); + background-color: rgba(var(--box-shadow), .04); border: 1px solid var(--tree-border); } +[data-bs-theme="dark"] .eg-tree-branch .eg-tree-node.active > .eg-tree-node-wrapper { + background-color: rgba(255,255,255, 0.1); +} + .eg-tree.blurred .eg-tree-node.active > .eg-tree-node-wrapper { background-color: transparent; - border-color: light-dark(var(--bs-gray-300), var(--bs-gray-600)); + border-color: var(--bs-gray-300); +} + +[data-bs-theme="dark"] .eg-tree.blurred .eg-tree-node.active > .eg-tree-node-wrapper { + background-color: transparent; + border-color: var(--bs-gray-600); } .eg-tree-node-wrapper { diff --git a/Open-ILS/src/eg2/src/app/share/util/credential-input.component.html b/Open-ILS/src/eg2/src/app/share/util/credential-input.component.html index 8d124f3f44..4586a6a7e3 100644 --- a/Open-ILS/src/eg2/src/app/share/util/credential-input.component.html +++ b/Open-ILS/src/eg2/src/app/share/util/credential-input.component.html @@ -21,6 +21,6 @@ i18n-aria-label i18n-title (click)="togglePasswordVisibility()" > <span class="material-icons" aria-hidden="true">{{ passwordVisible ? 'visibility' : 'visibility_off' }}</span> </button> - <span class="visually-hidden" id="credential-input-description">{{ ariaDescription }}</span> </div> +<div class="visually-hidden" id="credential-input-description">{{ ariaDescription }}</div> diff --git a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/lineitem-list.component.css b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/lineitem-list.component.css index 14bb01649c..daaf3bad41 100644 --- a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/lineitem-list.component.css +++ b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/lineitem-list.component.css @@ -1,12 +1,22 @@ :host { - --lineitem-delayed: light-dark(var(--bs-blue-150), var(--bs-blue-900-desat)); - --lineitem-new: light-dark(var(--bs-yellow-025), var(--bs-yellow-900)); - --lineitem-on-order: light-dark(var(--bs-red-100), var(--bs-red-900)); - --lineitem-order-pending: light-dark(var(--bs-yellow-050), var(--bs-yellow-900)); - --lineitem-order-ready: light-dark(var(--bs-gray-150), var(--bs-gray-900)); - --lineitem-ready: light-dark(var(--bs-gray-100), var(--bs-gray-900)); - --lineitem-received: light-dark(var(--bs-gray-200), var(--bs-gray-800)); - --invoice-deleted: light-dark(var(--bs-gray-300), var(--bs-gray-700)); + --lineitem-delayed: var(--bs-blue-150); + --lineitem-new: var(--bs-yellow-025); + --lineitem-on-order: var(--bs-red-100); + --lineitem-order-pending: var(--bs-yellow-050); + --lineitem-order-ready: var(--bs-gray-150); + --lineitem-ready: var(--bs-gray-100); + --lineitem-received: var(--bs-gray-200); + --invoice-deleted: var(--bs-gray-300); +} +[data-bs-theme="dark"] :host { + --lineitem-delayed: var(--bs-blue-900-desat); + --lineitem-new: var(--bs-yellow-900); + --lineitem-on-order: var(--bs-red-900); + --lineitem-order-pending: var(--bs-yellow-900); + --lineitem-order-ready: var(--bs-gray-900); + --lineitem-ready: var(--bs-gray-900); + --lineitem-received: var(--bs-gray-800); + --invoice-deleted: var(--bs-gray-700); } .jacket-wrapper { @@ -68,4 +78,4 @@ a.disabled { .invoice-entry .btn-destroy { box-shadow: 0 0 2px var(--box-shadow); -} \ No newline at end of file +} diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css index fb4d6515a2..21a2a4b2ac 100644 --- a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css +++ b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css @@ -13,7 +13,7 @@ .bg-warning { background-color: var(--badge-warning-bg) !important; - color: var(--badge-warning); + color: var(--badge-warning-color); font-weight: bold; } @@ -28,4 +28,4 @@ font-weight: normal; line-height: 1.2rem; vertical-align: middle; -} \ No newline at end of file +} diff --git a/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.ts b/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.ts index f6eac94870..0e95216e36 100644 --- a/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.ts @@ -11,7 +11,10 @@ import {OrgService} from '@eg/core/org.service'; @Component({ templateUrl: 'manage.component.html', - styles: ['#marcEditor { background: light-dark(hsla(223, 25%, 91%, 1), var(--bs-body-bg-alt)) }'] + styles: [ + '#marcEditor { background-color: hsla(223, 25%, 91%, 1) }', + '[data-bs-theme="dark"] #marcEditor { background-color: var(--bs-body-bg-alt) }' + ] }) export class ManageAuthorityComponent implements OnInit { diff --git a/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.css b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.css index bdb981d61d..42d08ecdbd 100644 --- a/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.css +++ b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.css @@ -1,10 +1,10 @@ :host { --vol-edit-clear-icons: var(--bs-gray-550); --vol-row-bg: var(--bs-row-alt); - --vol-row-border: var(--eg-blue-11); + --vol-row-border: rgba(var(--bs-blue-300-rgb), 0.4); } -input[type="number"] { +input[type="number"], input[inputmode="numeric"], input[inputmode="decimal"] { /* visually accomodates numbers in the hundreds */ width: 4.5em; } @@ -17,7 +17,7 @@ input[type="number"] { .clear-button { border: none; - background-color:var(--rgba-clear); + background-color:var(--bs-body-bg); padding-left: .25rem; padding-right: .25rem; line-height: inherit; diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css index 4721fa5753..f20f280c45 100644 --- a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css +++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css @@ -1,8 +1,13 @@ /* using component selector because of ViewEncapsulation.None */ eg-holdings-maintenance { - --holdings-org-row-color: light-dark(var(--bs-gray-100), var(--bs-gray-200)); - --holdings-org-row-bg: light-dark(#c9efe4, var(--bs-gray-900)); - --holdings-call-num-bg: light-dark( #b4f8d3, #151515); + --holdings-org-row-color: var(--bs-gray-100); + --holdings-org-row-bg: #c9efe4; + --holdings-call-num-bg: #b4f8d3; +} +[data-bs-theme="dark"] eg-holdings-maintenance { + --holdings-org-row-color: var(--bs-gray-200); + --holdings-org-row-bg: var(--bs-gray-900); + --holdings-call-num-bg: #151515; } .table.eg-grid > :not(caption) > * > * { diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.css index 37d30e1a1e..6f1dcbddd1 100644 --- a/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.css +++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.css @@ -1,5 +1,9 @@ #marcEditor { - background-color: light-dark(hsla(223, 25%, 91%, 1), var(--bs-body-bg-alt)); + background-color: hsla(223, 25%, 91%, 1); +} + +[data-bs-theme="dark"] #marcEditor { + background-color: var(--bs-body-bg-alt); } .nav-tabs li h2 { diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.css index b3314f5f83..c7396ebb69 100644 --- a/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.css +++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.css @@ -20,7 +20,7 @@ } [role="region"][aria-labelledby][tabindex]:focus-visible table { - outline: 2px solid var(--eg-blue-21); + outline: 2px solid var(--bs-primary); outline-offset: 5px; } @@ -171,4 +171,4 @@ table td { .dropdown-menu h4 { font-weight: 600; padding: 0 0.5rem; -} \ No newline at end of file +} diff --git a/Open-ILS/src/eg2/src/app/staff/circ/patron/bills.component.css b/Open-ILS/src/eg2/src/app/staff/circ/patron/bills.component.css index c9760b5643..4a53cb9d4a 100644 --- a/Open-ILS/src/eg2/src/app/staff/circ/patron/bills.component.css +++ b/Open-ILS/src/eg2/src/app/staff/circ/patron/bills.component.css @@ -1,14 +1,8 @@ -.striped { - background-color: var(--bills-striped-bg); - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); -} - .num-receipts { width: 4em; } -/* TODO: redo as grid when Chrome/Mac ships subgrid support */ +/* TODO: redo as subgrid when we no longer need to support Windows 7 users */ .patron-bills-summary { columns: 4; diff --git a/Open-ILS/src/eg2/src/app/staff/circ/patron/patron.component.css b/Open-ILS/src/eg2/src/app/staff/circ/patron/patron.component.css index 102d660da8..7c9afd7043 100644 --- a/Open-ILS/src/eg2/src/app/staff/circ/patron/patron.component.css +++ b/Open-ILS/src/eg2/src/app/staff/circ/patron/patron.component.css @@ -1,3 +1,26 @@ +:host { + --long-overdue-bg-selected: rgba(var(--bs-orange-rgb), 0.30); + --long-overdue-bg: rgba(var(--bs-orange-rgb), 0.25); + --overdue-bg-selected: rgba(var(--bs-orange-rgb), 0.15); + --overdue-bg: rgba(var(--bs-orange-rgb), 0.10); + --lost-bg-selected: rgba(var(--bs-red-rgb), 0.30); + --lost-bg: rgba(var(--bs-red-rgb), 0.25); + --alert-bg-selected: rgba(var(--bs-red-rgb), 0.15); + --alert-bg: rgba(var(--bs-red-rgb), 0.10); + --overdue-link-color: var(--bs-orange-700); +} +[data-bs-theme="dark"] :host { + --long-overdue-bg-selected: rgba(var(--bs-orange-rgb), 0.15); + --long-overdue-bg: rgba(var(--bs-orange-rgb), 0.12); + --overdue-bg-selected: rgba(var(--bs-orange-rgb), 0.08); + --overdue-bg: rgba(var(--bs-orange-rgb), 0.05); + --lost-bg-selected: rgba(var(--bs-red-rgb), 0.15); + --lost-bg: rgba(var(--bs-red-rgb), 0.12); + --alert-bg-selected: rgba(var(--bs-red-rgb), 0.08); + --alert-bg: rgba(var(--bs-red-rgb), 0.05); + --overdue-link-color: var(--bs-yellow-300) +} + table.table.eg-grid > :not(caption) > * > *, table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { background-color: inherit !important; @@ -5,7 +28,7 @@ table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { } #patron-grid { - display: grid; + display: grid; /* TODO */ grid-gap: 1rem; grid-template-columns: min-content 2fr; grid-template-rows: minmax(0, auto); @@ -84,7 +107,7 @@ table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { ::ng-deep .eg-grid-row.less-intense-alert:not(.selected) { color: var(--bs-body-color); background-color: revert; - --bs-table-bg: light-dark(rgba(var(--bs-red-rgb), 0.10), rgba(var(--bs-red-rgb), 0.05)); + --bs-table-bg: var(--alert-bg); border-color: rgba(var(--bs-red-rgb), 0.15); } @@ -95,7 +118,7 @@ table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { ::ng-deep .eg-grid-row.less-intense-alert.selected { color: var(--bs-body-color); background-color: revert; - --bs-table-bg: light-dark(rgba(var(--bs-red-rgb), 0.15), rgba(var(--bs-red-rgb), 0.08)); + --bs-table-bg: var(--alert-bg-selected); border-color: rgba(var(--bs-red-rgb), 0.20); } @@ -112,7 +135,7 @@ table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { ::ng-deep .eg-grid-row.lost-row { color: var(--bs-body-color); background-color: revert; - --bs-table-bg: light-dark(rgba(var(--bs-red-rgb), 0.25), rgba(var(--bs-red-rgb), 0.12)); + --bs-table-bg: var(--lost-bg); border-color: rgba(var(--bs-red-rgb), 0.30); } @@ -123,7 +146,7 @@ table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { ::ng-deep .eg-grid-row.lost-row.selected { color: var(--bs-body-color); background-color: revert; - --grid-row-selected-bg: light-dark(rgba(var(--bs-red-rgb), 0.30), rgba(var(--bs-red-rgb), 0.15)); + --grid-row-selected-bg: var(--lost-bg-selected); border-color: rgba(var(--bs-red-rgb), 0.35); } @@ -147,7 +170,7 @@ table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { ::ng-deep .eg-grid-row.overdue-row { color: var(--bs-body-color); background-color: revert; - --bs-table-bg: light-dark(rgba(var(--bs-orange-rgb), 0.10), rgba(var(--bs-orange-rgb), 0.05)); + --bs-table-bg: var(--overdue-bg); border-color: rgba(var(--bs-orange-rgb), 0.15); } @@ -158,7 +181,7 @@ table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { ::ng-deep .eg-grid-row.overdue-row.selected { color: var(--bs-body-color); background-color: revert; - --grid-row-selected-bg: light-dark(rgba(var(--bs-orange-rgb), 0.15), rgba(var(--bs-orange-rgb), 0.08)); + --grid-row-selected-bg: var(--overdue-bg-selected); border-color: rgba(var(--bs-orange-rgb), 0.20); } @@ -169,7 +192,7 @@ table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { ::ng-deep .eg-grid-row.longoverdue-row { color: var(--bs-body-color); background-color: revert; - --bs-table-bg: light-dark(rgba(var(--bs-orange-rgb), 0.25), rgba(var(--bs-orange-rgb), 0.12)); + --bs-table-bg: var(--long-overdue-bg); border-color: rgba(var(--bs-orange-rgb), 0.30); } @@ -180,7 +203,7 @@ table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { ::ng-deep .eg-grid-row.longoverdue-row.selected { color: var(--bs-body-color); background-color: revert; - --grid-row-selected-bg: light-dark(rgba(var(--bs-orange-rgb), 0.30), rgba(var(--bs-orange-rgb), 0.15)); + --grid-row-selected-bg: var(--long-overdue-bg-selected); border-color: rgba(var(--bs-orange-rgb), 0.35); } @@ -191,7 +214,7 @@ table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { /* link color for orange alerts */ ::ng-deep .eg-grid-row.overdue-row a, ::ng-deep .eg-grid-row.longoverdue-row a { - color: light-dark(var(--bs-orange-700), var(--bs-yellow-300)); + color: var(--overdue-link-color); border-color: var(--bs-orange-700); } @@ -211,4 +234,4 @@ table.table.eg-grid > :not(caption) > tbody > tr.eg-grid-row { ::ng-deep .eg-grid-row.longoverdue-row .tooltip .tooltip-inner a { color: var(--bs-white); text-decoration: none; -} \ No newline at end of file +} diff --git a/Open-ILS/src/eg2/src/app/staff/mfa.component.css b/Open-ILS/src/eg2/src/app/staff/mfa.component.css index 611477e68e..04e356114d 100644 --- a/Open-ILS/src/eg2/src/app/staff/mfa.component.css +++ b/Open-ILS/src/eg2/src/app/staff/mfa.component.css @@ -1,25 +1,3 @@ - -/* Vertical nav tabs */ -.nav-tabs.flex-column .nav-item .nav-link, -.nav-tabs.flex-column .nav-link { - border-radius: 0; - border-width: 0; - padding: 0.375rem 0.25rem; - text-align: left; - width: 100%; -} - -.nav-tabs.flex-column .nav-item .nav-link:hover, -.nav-tabs.flex-column .nav-item .nav-link:focus { - background-color: rgba(0,0,100,0.075); -} - -.nav-tabs.flex-column .nav-item.show .nav-link, -.nav-tabs.flex-column .nav-link.active { - background-color: rgba(var(--bs-blue-rgb),0.1); - font-weight: bold; -} - /* The div container for the qrcode image */ .qrcodeImage { display: flex; diff --git a/Open-ILS/src/eg2/src/app/staff/nav.component.css b/Open-ILS/src/eg2/src/app/staff/nav.component.css index 318b9dbbf2..6009c79212 100644 --- a/Open-ILS/src/eg2/src/app/staff/nav.component.css +++ b/Open-ILS/src/eg2/src/app/staff/nav.component.css @@ -1,12 +1,24 @@ :host { - --nav-link-color: light-dark(white, var(--bs-gray-100)); - --nav-link-hover: light-dark(white, var(--bs-gray-100)); + --nav-link-color: white; + --nav-link-hover: white; --nav-border-hover: var(--bs-gray-300); - --nav-hover-bg: light-dark(rgba(var(--success-text-light-rgb), 0.1), rgba(211, 231, 190, 0.1)); - --nav-hover-border-bottom: light-dark(rgba(222, 226, 230, 0.4), rgba(6, 34, 25, 0.2)); - --nav-dropdown-bg-hover: light-dark(rgba(var(--bs-green-rgb), .10), var(--bs-green-800)); - --divider: 1px solid light-dark(#e5e5e5, #151515); - --nav-dropdown-bg: light-dark(inherit, var(--bs-body-bg-alt)); + --nav-hover-bg: rgba(var(--success-text-light-rgb), 0.1); + --nav-hover-border-bottom: rgba(222, 226, 230, 0.4); + --nav-dropdown-bg-hover: rgba(var(--bs-green-rgb), .10); + --nav-dropdown-bg: var(--bs-body-bg); + --nav-dropdown-item-color: var(--bs-body-color); + --kbd-bg: var(--bs-gray-200); +} +[data-bs-theme="dark"] :host { + --nav-link-color: var(--bs-gray-100); + --nav-link-hover: var(--bs-gray-100); + --nav-border-hover: var(--bs-gray-300); + --nav-hover-bg: rgba(211, 231, 190, 0.1); + --nav-hover-border-bottom: rgba(6, 34, 25, 0.2); + --nav-dropdown-bg-hover: var(--bs-green-800); + --nav-dropdown-bg: var(--bs-body-bg-alt); + --nav-dropdown-item-color: var(--bs-gray-100); + --kbd-bg: var(--bs-body-bg-highlight); } .skip-nav { @@ -38,15 +50,15 @@ background: -webkit-linear-gradient(var(--staff-navbar-a), var(--staff-navbar-b)); color: var(--nav-link-hover); font-size: 14px; - padding: 0 0.5rem; + padding: 4px 0.5rem; } -#staff-navbar .navbar-nav, -#staff-navbar .navbar-admin .dropdown-item { +#staff-navbar .navbar-nav { padding: 4px 0; margin: 0 1px; } +#staff-navbar .navbar-admin .dropdown-item, #staff-navbar .navbar-nav .color-mode .dropdown-item { padding: 4px 0.75rem; } @@ -64,7 +76,7 @@ /* align top of dropdown w/ bottom of nav */ #staff-navbar .dropdown-menu { - background-color: light-dark(white, var(--bs-body-bg-alt)); + background-color: var(--nav-dropdown-bg); border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; @@ -81,7 +93,7 @@ } #staff-navbar .dropdown-item { - color: light-dark(var(--bs-body-color), var(--bs-gray-100)); + color: var(--nav-dropdown-item-color); background-color: var(--nav-dropdown-bg); font-size: 14px; font-weight: 400; @@ -108,7 +120,7 @@ } #staff-navbar .dropdown-item kbd { - background-color: light-dark(var(--bs-gray-200), var(--bs-body-bg-highlight)); + background-color: (--kbd-bg); box-shadow: 0 1px 1px rgba(0,0,10,0.2); margin-inline-start: auto; } @@ -214,4 +226,4 @@ Based on the hidden-sm class selector in Bootstrap. */ #staff-navbar button.dropdown-toggle:focus { border: 0; } -} \ No newline at end of file +} diff --git a/Open-ILS/src/eg2/src/app/staff/nav.component.ts b/Open-ILS/src/eg2/src/app/staff/nav.component.ts index 546235a7f7..dba0c9a9b8 100644 --- a/Open-ILS/src/eg2/src/app/staff/nav.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/nav.component.ts @@ -131,6 +131,18 @@ export class StaffNavComponent implements OnInit, OnDestroy { }).then(enable => this.showAngularCirc = enable); } + const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)'); + darkModePreference.addEventListener('change', () => { + // Don't change color mode while printing + if (!window.matchMedia('print').matches) { + this.setColorMode(); + } + + }); + + this.colorMode = this.store.getLocalItem('eg.ui.general.colormode') ?? 'auto'; + this.setColorMode(); + // Wire up our op-change component as the general purpose // permission failed handler. this.net.permFailedHasHandler = true; diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.css b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.css index ad8122d4d2..566b26c277 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.css +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.css @@ -1,49 +1,83 @@ /* eg-marc-editor background set in parent record.component.css */ .nav-tabs { - background: light-dark(var(--gray-125), var(--bs-body-bg-alt)); - border-color: light-dark(var(--gray-250), var(--border)); + background: var(--gray-125); + border-color: var(--gray-250); padding-inline-start: 0.5rem; /* separate active tab from page background */ } +[data-bs-theme="dark"] .nav-tabs { + background: var(--bs-body-bg-alt); + border-color: var(--border); +} .nav-tabs .nav-link { - background: light-dark(var(--gray-125), var(--bs-body-bg)); - border-color: light-dark(var(--gray-250), var(--bs-body-bg-highlight)); - color: light-dark(var(--bs-blue-650), var(--bs-blue-400)); + background: var(--gray-125); + border-color: var(--gray-250); + color: var(--bs-blue-650); +} +[data-bs-theme="dark"] .nav-tabs .nav-link { + background: var(--bs-body-bg); + border-color: var(--bs-body-bg-highlight); + color: var(--bs-blue-400); } .nav-tabs .nav-link.active { background: var(--tab-active-bg); color: var(--bs-body-color); - /* light-dark() does not work with border shorthand */ - border-top-color: light-dark(var(--gray-300),var(--bs-gray-800)); - border-right-color: light-dark(var(--gray-400), var(--bs-gray-700)); - border-bottom-color: light-dark(var(--gray-100), var(--bs-gray-900)); - border-left-color: light-dark(var(--gray-400), var(--bs-gray-700)); + border-top-color: var(--gray-300); + border-right-color: var(--gray-400); + border-bottom-color: var(--gray-100); + border-left-color: var(--gray-400); +} + +[data-bs-theme="dark"] .nav-tabs .nav-link.active { + border-top-color: var(--bs-gray-800); + border-right-color: var(--bs-gray-700); + border-bottom-color: var(--bs-gray-900); + border-left-color: var(--bs-gray-700); } .nav-tabs .nav-item:has(.nav-link.active) { margin-bottom: -1px; position: relative; - background: light-dark(var(--gray-125), var(--bs-body-bg-alt)); + background: var(--gray-125); +} +[data-bs-theme="dark"] .nav-tabs .nav-item:has(.nav-link.active) { + background: var(--bs-body-bg-alt); } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { - background-color: light-dark(var(--gray-100), var(--bs-gray-900)); - border-top-color: light-dark(var(--gray-600),var(--bs-gray-400)); - border-right-color: light-dark(var(--gray-600), var(--bs-gray-400)); - border-bottom-color: light-dark(var(--gray-125), var(--bs-gray-900)); - border-left-color: light-dark(var(--gray-600), var(--bs-gray-400)); + background-color: var(--gray-100); + border-top-color: var(--gray-600); + border-right-color: var(--gray-600); + border-bottom-color: var(--gray-125); + border-left-color: var(--gray-600); +} +[data-bs-theme="dark"] .nav-tabs .nav-link:hover, +[data-bs-theme="dark"] .nav-tabs .nav-link:focus { + background-color: var(--bs-gray-900); + border-top-color: var(--bs-gray-400); + border-right-color: var(--bs-gray-400); + border-bottom-color: var(--bs-gray-900); + border-left-color: var(--bs-gray-400); } .btn-destroy { - background-color: light-dark(var(--gray-550), var(--bs-gray-700)); + background-color: var(--gray-550); color: var(--white); } +[data-bs-theme="dark"] .btn-destroy { + background-color: var(--bs-gray-700); +} .btn-destroy:hover, .btn-destroy:focus { background-color: var(--danger); color: var(--white); -} \ No newline at end of file +} +[data-bs-theme="dark"] .btn-destroy:hover, +[data-bs-theme="dark"] .btn-destroy:focus { + background-color: var(--danger); + color: var(--white); +} diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-fields-editor.component.css b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-fields-editor.component.css index 08b1cf0251..b1ec031dbe 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-fields-editor.component.css +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-fields-editor.component.css @@ -5,7 +5,12 @@ .ff-field:hover, .ff-field:has(:focus) { /* matches tr:nth-child(even):hover [etc] in rich-editor.component.css */ - background-color: light-dark(var(--bs-yellow-025), var(--bs-blue-900-desat)); + background-color: var(--bs-yellow-025); +} + +[data-bs-theme="dark"] .ff-field:hover, +[data-bs-theme="dark"] .ff-field:has(:focus) { + background-color: var(--bs-yellow-025); } /* Tighten up fixed field code and value */ @@ -109,4 +114,4 @@ eg-fixed-field { margin: 0.25rem 0.5rem; } } -/**/ \ No newline at end of file +/**/ diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor-colors.css b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor-colors.css index 00be2716d2..b13c8c7128 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor-colors.css +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor-colors.css @@ -22,10 +22,13 @@ --gray-900: hsla(223, 15%, 14%, 1); --gray-950: hsla(223, 15%, 9%, 1); - --border: light-dark(var(--gray-250), var(--gray-750)); - --form-check-border: light-dark(var(--gray-250), var(--bs-gray-900)); - --tab-active-bg: light-dark( - linear-gradient(var(--gray-050) 35%, var(--gray-125)), - linear-gradient(var(--bs-gray-900) 35%, var(--bs-gray-850)) - ); + --border: var(--gray-250); + --form-check-border: var(--gray-250); + --tab-active-bg: linear-gradient(var(--gray-050) 35%, var(--gray-125)); +} + +[data-bs-theme="dark"] :host { + --border: var(--gray-750); + --form-check-border: var(--bs-gray-900); + --tab-active-bg: linear-gradient(var(--bs-gray-900) 35%, var(--bs-gray-850)); } diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.css b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.css index 1bbb889a73..52604fe37c 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.css +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.css @@ -1,6 +1,9 @@ eg-marc-rich-editor, #eg-marc-rich-editor { - background-color: light-dark(var(--gray-125), var(--bs-body-bg-alt)); + background-color: var(--gray-125); +} +[data-bs-theme="dark"] #eg-marc-rich-editor { + background-color: var(--bs-body-bg-alt); } .fixed-fields-container { @@ -18,18 +21,31 @@ eg-marc-rich-editor, .marc-toolbar, .marc-toolbar .btn-secondary { - background-color: light-dark(var(--gray-550), var(--bs-gray-900)); - border-color: light-dark(var(--bs-gray-600), var(--bs-gray-900)); + background-color: var(--gray-550); + border-color: var(--bs-gray-600); + color: white; +} +[data-bs-theme="dark"] .marc-toolbar, +[data-bs-theme="dark"] .marc-toolbar .btn-secondary { + background-color: var(--bs-gray-900); + border-color: var(--bs-gray-900); color: white; } .marc-toolbar .btn-secondary:focus, .marc-toolbar .btn-secondary:hover { - background-color: light-dark(var(--gray-650), var(--bs-gray-700)); + background-color: var(--gray-650); +} +[data-bs-theme="dark"] .marc-toolbar .btn-secondary:focus, +[data-bs-theme="dark"] .marc-toolbar .btn-secondary:hover { + background-color: var(--bs-gray-700); } .marc-toolbar .badge-dark { - background-color: light-dark(var(--gray-300), var(--bs-gray-700)); + background-color: var(--gray-300); +} +[data-bs-theme="dark"] .marc-toolbar .badge-dark { + background-color: var(--bs-gray-700); } .menu-with-accesskeys .dropdown-item { @@ -55,7 +71,13 @@ eg-marc-rich-editor, margin-bottom: 0; table-layout: fixed; width: 100%; - --bs-table-bg: light-dark(var(--gray-125), var(--bs-body-bg-alt)); + --bs-table-bg: var(--gray-125); +} +[data-bs-theme="dark"] .marc-table { + margin-bottom: 0; + table-layout: fixed; + width: 100%; + --bs-table-bg: var(--bs-body-bg-alt); } /* remove Bootstrap default styles */ @@ -114,20 +136,33 @@ eg-marc-rich-editor, /* col.subfields will take the remaining available space */ .marc-table tr { - background-color: light-dark(var(--gray-125), var(--bs-gray-950)); + background-color: var(--gray-125); +} +[data-bs-theme="dark"] .marc-table tr { + background-color: var(--bs-gray-950); } .start-even tr:not(.changed):nth-child(odd), .marc-table:not(.start-even) tr:not(.changed):nth-child(even) { - background-color: light-dark(var(--gray-100), var(--bs-gray-925)); + background-color: var(--gray-100); +} +[data-bs-theme="dark"] .start-even tr:not(.changed):nth-child(odd), +[data-bs-theme="dark"] .marc-table:not(.start-even) tr:not(.changed):nth-child(even) { + background-color: var(--gray-925); } .marc-table tr.changed { - background-color: light-dark(var(--gray-200), var(--bs-gray-900)); + background-color: var(--gray-200); +} +[data-bs-theme="dark"] .marc-table tr.changed { + background-color: var(--bs-gray-900); } .marc-table tr.changed th.tag { - border-left: .2rem dotted light-dark(black, white); + border-left: .2rem dotted black; +} +[data-bs-theme="dark"] .marc-table tr.changed th.tag { + border-left: .2rem dotted white; } tr:nth-child(even):hover, @@ -135,13 +170,19 @@ tr:nth-child(odd):hover, .start-even tr:nth-child(even):hover, .start-even tr:nth-child(odd):hover { /* matches .ff-field:hover in fixed-fields-editor.component.css */ - background-color: light-dark(var(--bs-yellow-025), var(--bs-blue-900-desat)) !important; + background-color: var(--bs-yellow-025) !important; box-shadow: 0 .25em .5em rgba(0, 0, 40, 0.2); /* fix bug where shadow is obscured by subsequent row background color: */ transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); } +[data-bs-theme="dark"] tr:nth-child(even):hover, +[data-bs-theme="dark"] tr:nth-child(odd):hover, +[data-bs-theme="dark"] .start-even tr:nth-child(even):hover, +[data-bs-theme="dark"] .start-even tr:nth-child(odd):hover { + background-color: var(--bs-blue-900-desat) !important; +} /* drop zone row does not need alternating background color or hover style */ tr#marc-tag-END, @@ -150,6 +191,11 @@ tr#marc-tag-END:hover { background-color: var(--bs-table-bg) !important; box-shadow: none; } +[data-bs-theme="dark"] tr#marc-tag-END, +[data-bs-theme="dark"] tr#marc-tag-END:not(.changed):nth-child(even), +[data-bs-theme="dark"] tr#marc-tag-END:hover { + background-color: var(--bs-table-bg) !important; +} .marc-table td, .marc-table th { @@ -262,10 +308,13 @@ tr#marc-tag-END:hover { } .field-hints h5 { - border-bottom: 1px solid light-dark(var(--gray-400), var(--border)); + border-bottom: 1px solid var(--gray-400); padding-bottom: 0.25rem; font-weight: 600; } +[data-bs-theme="dark"] .field-hints h5 { + border-bottom: 1px solid var(--border); +} .marc-help b.code { display: inline-block; @@ -302,18 +351,30 @@ tr#marc-tag-END:hover { } button.delete-subfield { - color: light-dark(var(--gray-600), var(--bs-gray-400)); - background-color: light-dark(var(--gray-100), var(--bs-gray-900)); - border: 1px solid light-dark(var(--gray-200), var(--bs-gray-800)); - border-left: 1px solid light-dark(var(--gray-150), var(--bs-gray-900)); + color: var(--gray-600); + background-color: var(--gray-100); + border: 1px solid var(--gray-200); + border-left: 1px solid var(--gray-150); border-radius: 0; } +[data-bs-theme="dark"] button.delete-subfield { + color: var(--bs-gray-400); + background-color: var(--bs-gray-900); + border: 1px solid var(--bs-gray-800); + border-left: 1px solid var(--bs-gray-900); +} button.delete-subfield:focus, button.delete-subfield:hover, .marc-table tr.marc-field:focus button.delete-subfield, .marc-table tr.marc-field:hover button.delete-subfield { - color: light-dark(var(--gray-700), var(--bs-gray-300)); + color: var(--gray-700); +} +[data-bs-theme="dark"] button.delete-subfield:focus, +[data-bs-theme="dark"] button.delete-subfield:hover, +[data-bs-theme="dark"] .marc-table tr.marc-field:focus button.delete-subfield, +[data-bs-theme="dark"] .marc-table tr.marc-field:hover button.delete-subfield { + color: var(--bs-gray-300); } .move:hover { @@ -325,9 +386,12 @@ button.delete-subfield:hover, } .btn-tiny:hover { - border: 1px solid light-dark(var(--gray-700), var(--bs-gray-300)); + border: 1px solid var(--gray-700); box-shadow: 1px 1px .25rem rgba(0,0,0,0.25); } +[data-bs-theme="dark"] .btn-tiny:hover { + border: 1px solid var(--bs-gray-300); +} .btn-tiny:focus { outline: 0.25rem solid rgba(13, 110, 253, 0.75); @@ -369,4 +433,4 @@ tr.marc-tag-END td { .help-subfields { columns: unset; } -} \ No newline at end of file +} diff --git a/Open-ILS/src/eg2/src/app/staff/share/patron/summary.component.css b/Open-ILS/src/eg2/src/app/staff/share/patron/summary.component.css index e3da7b6d8d..e3c50db9e5 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/patron/summary.component.css +++ b/Open-ILS/src/eg2/src/app/staff/share/patron/summary.component.css @@ -1,12 +1,18 @@ .patron-summary-container { - background-color: light-dark(var(--bs-body-bg), var(--bs-body-bg-alt)); + background-color: var(--bs-body-bg); border-radius: 0.5rem; box-shadow: - 0.25rem 1px 1rem light-dark(rgba(0,0,100,0.2), rgba(0,0,0,0.8)), - 0.25rem 1rem 1rem light-dark(rgba(0,0,100,0.1), rgba(0,0,0,0.5)); + 0.25rem 1px 1rem rgba(0,0,100,0.2), + 0.25rem 1rem 1rem rgba(0,0,100,0.1); padding: 1rem; } +[bs-data-theme="dark"] .patron-summary-container { + background-color: var(--bs-body-bg-alt); + box-shadow: + 0.25rem 1px 1rem rgba(0,0,0,0.8), + 0.25rem 1rem 1rem rgba(0,0,0,0.5); +} .account-details .row:nth-child(odd):not(.alert) { background: var(--bs-body-bg); @@ -57,8 +63,13 @@ .alert-danger, .alert-danger .material-icons { - background: light-dark(var(--bs-red-100), var(--bs-red-900)); - color: light-dark(var(--bs-red-800), var(--bs-red-200)); + background: var(--bs-red-100); + color: var(--bs-red-800); +} +[bs-data-theme="dark"] .alert-danger, +[bs-data-theme="dark"] .alert-danger .material-icons { + background: var(--bs-red-900); + color: var(--bs-red-200); } dl .alert { @@ -79,12 +90,16 @@ dl .alert { } .alert-penalties { - background: light-dark(rgba(0,0,100,0.08), var(--bs-gray-800)); + background: rgba(0,0,100,0.08); border-radius: 0.35rem; - color: light-dark(var(--bs-gray-900), var(--bs-gray-200)); + color: var(--bs-gray-900); margin: 0 0 1rem; padding: 0.25rem; } +[bs-data-theme="dark"] .alert-penalties { + background: var(--bs-gray-800); + color: var(--bs-gray-200); +} .alert-penalties h3 { font-weight: 600; @@ -104,23 +119,42 @@ dl .alert { } /* --badge-info */ .PATRON_HAS_NOTES { - background: light-dark(var(--bs-cyan-100), var(--bs-cyan-900)); - color: light-dark(var(--bs-cyan-900), var(--bs-cyan-100));; + background: var(--bs-cyan-100); + color: var(--bs-cyan-900);; +} +[bs-data-theme="dark"] .PATRON_HAS_NOTES { + background: var(--bs-cyan-100); + color: var(--bs-cyan-900);; } + /* BS Purple */ .PATRON_EXCEEDS_LOST_COUNT, .PATRON_EXCEEDS_CHECKOUT_COUNT, .PATRON_EXCEEDS_OVERDUE_COUNT, .PATRON_EXCEEDS_LONGOVERDUE_COUNT, .PATRON_EXCEEDS_FINES { - background: light-dark(var(--bs-purple-100), var(--bs-purple-800)); - color: light-dark(var(--bs-purple-800), var(--bs-purple-100)); + background: var(--bs-purple-100); + color: var(--bs-purple-800); } +[bs-data-theme="dark"] .PATRON_EXCEEDS_LOST_COUNT, +[bs-data-theme="dark"] .PATRON_EXCEEDS_CHECKOUT_COUNT, +[bs-data-theme="dark"] .PATRON_EXCEEDS_OVERDUE_COUNT, +[bs-data-theme="dark"] .PATRON_EXCEEDS_LONGOVERDUE_COUNT, +[bs-data-theme="dark"] .PATRON_EXCEEDS_FINES { + background: var(--bs-purple-800); + color: var(--bs-purple-100); +} + /* --badge-success */ .NO_PENALTIES { background: var(--success-text-light); color: var(--success-text-dark); } +[bs-data-theme="dark"] .NO_PENALTIES { + background: var(--success-text-light); + color: var(--success-text-dark); +} + /* --badge-warning */ .ONE_PENALTY, .PATRON_HAS_BILLS, @@ -130,36 +164,72 @@ dl .alert { .INVALID_PATRON_DAY_PHONE, .INVALID_PATRON_EVENING_PHONE, .INVALID_PATRON_OTHER_PHONE { - background: light-dark(var(--bs-yellow-100), var(--bs-yellow-800)); - color: light-dark(var(--bs-orange-800), var(--bs-yellow-100)); + background: var(--bs-yellow-100); + color: var(--bs-orange-800); +} +[bs-data-theme="dark"] .ONE_PENALTY, +[bs-data-theme="dark"] .PATRON_HAS_BILLS, +[bs-data-theme="dark"] .PATRON_HAS_OVERDUES, +[bs-data-theme="dark"] .INVALID_PATRON_ADDRESS +[bs-data-theme="dark"] .INVALID_PATRON_EMAIL_ADDRESS, +[bs-data-theme="dark"] .INVALID_PATRON_DAY_PHONE, +[bs-data-theme="dark"] .INVALID_PATRON_EVENING_PHONE, +[bs-data-theme="dark"] .INVALID_PATRON_OTHER_PHONE { + background: var(--bs-yellow-800); + color: var(--bs-yellow-100); } + /* Bootstrap orange */ .MULTIPLE_PENALTIES, .PATRON_HAS_LOST, .PATRON_IN_COLLECTIONS { - background: light-dark(var(--bs-orange-100), var(--bs-yellow-800)); - color: light-dark(var(--bs-orange-800), var(--bs-yellow-100)); + background: var(--bs-orange-100); + color: var(--bs-orange-800); } +[bs-data-theme="dark"] .MULTIPLE_PENALTIES, +[bs-data-theme="dark"] .PATRON_HAS_LOST, +[bs-data-theme="dark"] .PATRON_IN_COLLECTIONS { + background: var(--bs-yellow-800); + color: var(--bs-yellow-100); +} + /* --badge-secondary */ .PATRON_INACTIVE, .PATRON_EXPIRED { - background: light-dark(var(--bs-gray-300), var(--bs-gray-900)); - color: light-dark(var(--bs-gray-900), var(--bs-gray-300)); + background: var(--bs-gray-300); + color: var(--bs-gray-900); } +[bs-data-theme="dark"] .PATRON_INACTIVE, +[bs-data-theme="dark"] .PATRON_EXPIRED { + background: var(--bs-gray-900); + color: var(--bs-gray-300); +} + /* --badge-danger */ .PATRON_BARRED, .PATRON_HAS_ALERT, .PATRON_HAS_STAFF_ALERT { - background: light-dark(var(--bs-red-100), var(--bs-red-800)); - color: light-dark(var(--bs-red-800), var(--bs-red-100)); + background: var(--bs-red-100); + color: var(--bs-red-800); +} +[bs-data-theme="dark"] .PATRON_BARRED, +[bs-data-theme="dark"] .PATRON_HAS_ALERT, +[bs-data-theme="dark"] .PATRON_HAS_STAFF_ALERT { + background: var(--bs-red-800); + color: var(--bs-red-100); } + .PATRON_BARRED { font-weight: bold; } /* --badge-primary */ .PATRON_JUVENILE { - background: light-dark(var(--bs-blue-100), var(--bs-blue-800)); - color: light-dark(var(--bs-blue-800), var(--bs-blue-100)); + background: var(--bs-blue-100); + color: var(--bs-blue-800); +} +[bs-data-theme="dark"] .PATRON_JUVENILE { + background: var(--bs-blue-800); + color: var(--bs-blue-100); } /* Statuses with warning icon */ diff --git a/Open-ILS/src/eg2/src/app/staff/splash.component.css b/Open-ILS/src/eg2/src/app/staff/splash.component.css index ea8b4de111..91c9847a26 100644 --- a/Open-ILS/src/eg2/src/app/staff/splash.component.css +++ b/Open-ILS/src/eg2/src/app/staff/splash.component.css @@ -1,9 +1,14 @@ :host { - --splash-card-header: light-dark(var(--evergreen), var(--bs-gray-400)); - --splash-card-header-bg: light-dark(#dff0d8, var(--bs-body-bg-alt)); - --splash-card-header-border: light-dark(#d6e9c6, var(--bs-body-bg-highlight)); + --splash-card-header: var(--evergreen); + --splash-card-header-bg: #dff0d8; + --splash-card-header-border: #d6e9c6; --bs-card-bg: var(--bs-body-bg); } +[data-bs-theme="dark"] :host { + --splash-card-header: var(--bs-gray-400); + --splash-card-header-bg: var(--bs-body-bg-alt); + --splash-card-header-border: var(--bs-body-bg-highlight); +} .eg-logo { max-width: 400px; @@ -16,7 +21,7 @@ .card { background-color: var(--bs-card-bg); - border-color: light-dark(var(--border), var(--splash-card-header-border)); + border-color: var(--splash-card-header-border); margin-block-end: 2rem; } diff --git a/Open-ILS/src/eg2/src/app/staff/splash.component.html b/Open-ILS/src/eg2/src/app/staff/splash.component.html index 30fc9bb314..5684269432 100644 --- a/Open-ILS/src/eg2/src/app/staff/splash.component.html +++ b/Open-ILS/src/eg2/src/app/staff/splash.component.html @@ -1,21 +1,3 @@ - - -<style> - /* TODO change BS color scheme so this isn't necessary */ - .bg-evergreen { - background: -webkit-linear-gradient(var(--staff-navbar-a), var(--staff-navbar-b)); - background-color: var(--staff-navbar-a); - color: var(--nav-bg); - } - - /* Match the ang1 splash page */ - .card-header { - color: var(--splash-card-header); - background-color: var(--splash-card-header-bg); - border-color: var(--splash-card-header-border); - } -</style> - <h1 class="visually-hidden" tabindex="0" i18n>Evergreen Staff Client Home Page</h1> <eg-title i18n-prefix prefix="Evergreen Staff Client"></eg-title> diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css index d95e5b3f62..c8db58979f 100644 --- a/Open-ILS/src/eg2/src/styles.css +++ b/Open-ILS/src/eg2/src/styles.css @@ -1031,11 +1031,6 @@ a { font-weight: bold; } -[data-bs-theme="dark"] .nav-tabs.flex-column .nav-item.show .nav-link, -[data-bs-theme="dark"] .nav-tabs.flex-column .nav-link.active { - background-color: var(--bs-blue-250); -} - [data-bs-theme="dark"] .nav-tabs:not(.flex-column) .nav-link:hover, [data-bs-theme="dark"] .nav-tabs:not(.flex-column) .nav-link:focus, [data-bs-theme="dark"] .nav-tabs:not(.flex-column) .nav-link.active, commit ed0c20c522ab9a2d1e4ef78eabd2eb03c654c474 Author: Stephanie Leary <stephanie.leary@equinoxoli.org> Date: Thu Apr 10 03:18:30 2025 +0000 LP2106666 Split light and dark files; assets/css move Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org> diff --git a/Open-ILS/src/eg2/angular.json b/Open-ILS/src/eg2/angular.json index b95eba19c5..9618292af6 100644 --- a/Open-ILS/src/eg2/angular.json +++ b/Open-ILS/src/eg2/angular.json @@ -33,7 +33,9 @@ ], "styles": [ "src/styles.css", - "src/styles-colors.css" + "src/assets/css/styles-colors.css", + "src/assets/css/light.css", + "src/assets/css/dark.css" ], "scripts": [ "src/assets/js/marcrecord.js" diff --git a/Open-ILS/src/eg2/src/assets/css/dark.css b/Open-ILS/src/eg2/src/assets/css/dark.css new file mode 100644 index 0000000000..3462e67b81 --- /dev/null +++ b/Open-ILS/src/eg2/src/assets/css/dark.css @@ -0,0 +1,107 @@ +/* Dark mode */ +:root[data-bs-theme="dark"] { + --evergreen: var(--eg-green-200); /* brand color */ + --black: white; + --white: black; + --bs-white: black; + --bs-light: var(--bs-gray-850); + --bs-dark: var(--bs-gray-100); + --border: var(--bs-gray-700); + --border-thick: var(--bs-gray-600); + --inactive: var(--bs-gray-400); + --form-control-border: var(--bs-gray-700); + --form-check-border: var(--bs-gray-800); + + --bs-body-color: var(--bs-gray-400); + --bs-body-color-rgb: 222, 226, 230; + --bs-body-bg: var(--bs-gray-925); + --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color); + --bs-body-bg-alt: var(--bs-gray-900); + --bs-body-bg-highlight: var(--bs-gray-850); + --bs-text-highlight: var(--bs-gray-500); + --bs-card-bg: var(--bs-gray-925); + + --success: #002C1F; + --success-color: var(--eg-green-100); + --success-hover-color: var(--eg-green-050); + --success-border: #157146; + --success-hover: #00593d; + --success-disabled: #779788; /* desaturated */ + --success-disabled-rgb: 68, 135, 104; + --success-text-light: #003b35; + --success-text-light-rgb: 223, 240, 216; + --success-text-dark: #dff0d8; + --form-success-bg: var(--eg-green-900); + + /* used in both nav and splash components: */ + --staff-navbar-a: var(--bs-gray-900); + --staff-navbar-b: var(--bs-gray-975); + + --badge-color: var(--bs-blue-200); + --badge-bg: var(--bs-blue-900); + + --badge-danger-bg: var(--bs-red-800); + --badge-danger-selected-bg: var(--bs-red-700); + --badge-danger-color: var(--bs-red-200); + + --badge-info-color: var(--bs-cyan-100); + --badge-info-bg: var(--bs-cyan-900); + --badge-info-border: var(--bs-cyan-700); + + --badge-success-color: var(--success-text-dark); + --badge-success-bg: var(--success-text-light); + + --badge-warning-bg: var(--bs-yellow-800); + --badge-warning-hover-bg: var(--bs-yellow-900); + --badge-warning-selected-bg: var(--bs-yellow-700); + --badge-warning-color: var(--bs-yellow-200); + + --grid-color: var(--bs-body-color); + --grid-borders: #292929; + --grid-filter-active: var(--bs-gray-900); + --grid-header-row: var(--bs-gray-050); + --grid-header-button: var(--bs-blue-300); + --grid-row-selected: var(--bs-blue-100); + --grid-row-selected-bg: var(--bs-blue-900); + --grid-row-selected-border: var(--bs-blue-800); + --row-even-bg: var(--bs-body-bg-alt); + + --danger: var(--bs-red-800); + --danger-bg-hover: var(--bs-red-700); + --danger-color: var(--bs-red-300); + --danger-border: var(--bs-red-600); + --destroy-color: var(--bs-red-200); + + --info: var(--bs-cyan-300); + --info-border: var(--bs-cyan-700); + --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1); + --info-hover: var(--bs-cyan-750); + + --primary: var(--bs-blue-300); + --primary-border: var(--bs-blue-400); + --primary-focus-outline-rgb: var(--bs-blue-600-rgb); + --primary-hover: var(--bs-blue-400); + --primary-disabled: rgba(var(--bs-blue-300-rgb), 0.6); + + --warning-color: var(--bs-yellow-200); + --warning-border: var(--bs-yellow-400); + --warning-border-hover: var(--bs-yellow-500); + --warning-shadow: var(--eg-yellow-2); + + --secondary-bg: var(--bs-gray-700); + --btn-gray-bg: var(--bs-gray-900); + --btn-gray-bg-hover: var(--bs-gray-800); + --btn-gray-color: var(--bs-body-color); + --btn-gray-border: var(--bs-gray-800); + + --modal-header-color: white; + --modal-header-bg: var(--bs-cyan-800); + --modal-body-bg: var(--bs-body-bg-alt); + --popover-menu-hover: var(--bs-gray-900); + --popover-header-bg: var(--bs-gray-900); + --dropdown-menu-bg: var(--bs-gray-900); + + --batch-item-attr-header-bg: var(--bs-blue-900-desat); + --status-archived: var(--bs-gray-500); + --star-stroke: transparent; +} diff --git a/Open-ILS/src/eg2/src/assets/css/light.css b/Open-ILS/src/eg2/src/assets/css/light.css new file mode 100644 index 0000000000..7f099be099 --- /dev/null +++ b/Open-ILS/src/eg2/src/assets/css/light.css @@ -0,0 +1,112 @@ +/* Light mode */ +:root { + --evergreen: var(--eg-green-200); /* brand color */ + --black: black; + --white: white; + --bs-white: white; + --bs-light: var(--bs-gray-100); + --bs-dark: var(--bs-gray-900); + --border: var(--bs-gray-300); + --border-thick: var(--bs-gray-400); + --inactive: var(--bs-gray-800); + --form-control-border: var(--bs-gray-500); + --form-check-border: var(--bs-gray-300); + + --bs-body-color: var(--bs-gray-900); + --bs-body-color-rgb: 33, 37, 41; + --bs-body-bg: white; + --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color); + --bs-body-bg-alt: var(--bs-gray-110); + --bs-body-bg-highlight: var(--bs-gray-200); + --bs-text-highlight: var(--bs-gray-700); + --bs-card-bg: var(--bs-gray-125); + + --success: var(--bs-green-500); + --success-color: white; + --success-hover-color: var(--eg-green-100); + --success-border: #00593d; + --success-hover: #157146; + --success-disabled: #448768; /* desaturated */ + --success-disabled-rgb: 68, 135, 104; + --success-text-light: #dff0d8; + --success-text-light-rgb: 223, 240, 216; + --success-text-dark: #003b35; + --form-success-bg: var(--bs-green-100); + + /* used in both nav and splash components: */ + --staff-navbar-a: var(--eg-green-800); + --staff-navbar-b: var(--eg-green-600); + + --badge-color: var(--bs-blue-800); + --badge-bg: var(--bs-blue-100); + + --badge-danger-bg: var(--bs-red-100); + --badge-danger-selected-bg: var(--bs-red-200); + --badge-danger-color: var(--bs-red-800); + + --badge-info-color: var(--bs-cyan-900); + --badge-info-bg: var(--bs-cyan-100); + --badge-info-border: var(--bs-cyan-300); + + --badge-success-color: var(--success-text-dark); + --badge-success-bg: var(--success-text-light); + + --badge-warning-bg: var(--bs-yellow-200); + --badge-warning-hover-bg: var(--bs-yellow-300); + --badge-warning-selected-bg: var(--bs-yellow-300); + --badge-warning-color: var(--bs-orange-750); + + --grid-color: var(--bs-body-color); + --grid-borders: rgba(0,0,0,0.125); + --grid-filter-active: var(--bs-blue-900-desat); + --grid-header-row: var(--bs-gray-100); + --grid-header-button: var(--bs-blue-700); + --grid-row-selected: #004085; + --grid-row-selected-bg: var(--bs-blue-100); + --grid-row-selected-border: var(--bs-blue-125); + --row-even-bg: var(--bs-body-bg-alt); + + --danger: var(--bs-red-600); + --danger-bg-hover: var(--bs-red-700); + --danger-color: var(--bs-red-700); + --danger-border: var(--bs-red-700); + --destroy-color: var(--bs-red-600); + + --info: var(--bs-cyan-700); + --info-border: var(--bs-cyan-300); + --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1); + --info-hover: var(--bs-cyan-200); + + --primary: var(--bs-blue-600); + --primary-border: var(--bs-blue-650); + --primary-focus-outline-rgb: var(--bs-blue-600-rgb); + --primary-hover: var(--bs-blue-650); + --primary-disabled: rgba(var(--bs-blue-600-rgb), 1); + + --warning-color: var(--bs-yellow-500); + --warning-border: var(--bs-yellow-625); + --warning-border-hover: var(--bs-yellow-500); + --warning-shadow: rgba(var(--bs-yellow-400-rgba), 0.5); + + --secondary-bg: var(--bs-gray-300); + --btn-gray-bg: var(--bs-gray-200); + --btn-gray-bg-hover: var(--bs-gray-300); + --btn-gray-color: var(--bs-body-color); + --btn-gray-border: var(--bs-gray-400); + + --modal-header-color: white; + --modal-header-bg: var(--bs-cyan-800); + --modal-body-bg: var(--bs-body-bg); + --popover-menu-hover: var(--bs-gray-100); + --popover-header-bg: var(--bs-gray-100); + --dropdown-menu-bg: white; + + --batch-item-attr-header-bg: var(--bs-blue-100); + --status-archived: var(--bs-gray-600); + --star-stroke: var(--bs-yellow-700); + --bs-row-alt: rgba(var(--bs-black-rgb), 0.03); + --bs-tertiary-bg: var(--bs-body-bg-highlight); + --bs-border-color: var(--border); + --box-shadow: var(--black-rgb); + --border-print: #aaa; +} diff --git a/Open-ILS/src/eg2/src/assets/css/styles-colors.css b/Open-ILS/src/eg2/src/assets/css/styles-colors.css new file mode 100644 index 0000000000..ab9f4e690f --- /dev/null +++ b/Open-ILS/src/eg2/src/assets/css/styles-colors.css @@ -0,0 +1,162 @@ +@media screen { + :root { /* auto */ + color-scheme: light dark; + background-color: var(--bs-body-bg); + } + :root[data-bs-theme="light"] { + color-scheme: light; + } + :root[data-bs-theme="dark"] { + color-scheme: dark; + } + [data-bs-theme="dark"] img { + filter: brightness(80%); + } + [data-bs-theme="dark"] img:hover, + [data-bs-theme="dark"] img:focus { + filter: brightness(100%); + } + /* et voila. */ +} + +:root { + /* Greys */ + --black-rgb: 0,0,0; + --white-rgb: 255,255,255; + --bs-black-rgb: 0,0,0; + --bs-gray-dark: var(--bs-gray-800); + + --bs-gray-100: #f8f9fa; + --bs-gray-110: #f4f5f6; + --bs-gray-125: #f9f0fa; + --bs-gray-150: #eceeef; + --bs-gray-200: #e9ecef; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #adb5bd; + --bs-gray-550: #8d959d; + --bs-gray-600: #6c757d; + --bs-gray-700: #495057; + --bs-gray-750: #3F454C; + --bs-gray-800: #343a40; + --bs-gray-850: #2B3035; + --bs-gray-900: #212529; + --bs-gray-925: #1B1D1F; + --bs-gray-950: #151515; + --bs-gray-975: #090909; + --bs-gray: var(--bs-gray-600); + + /* Yellows */ + --bs-yellow-900: #332701; + --bs-yellow-800: #664D03; + --bs-yellow-700: #997404; + --bs-yellow-625: #bb8402; /* custom blend between 600 and 700 */ + --bs-yellow-600: #CC9A06; + --bs-yellow-550: #FFC266; /* custom blend between 500 and 600 */ + --bs-yellow-500: #ffc107; + --bs-yellow-400: #ffcd39; + --bs-yellow-400-rgba: 255, 205, 57; /* use at 50% alpha */ + --bs-yellow-300: #FFDA6A; + --bs-yellow-250: #FFE1A8; /* custom blend between 200 and 300 */ + --bs-yellow-200: #ffe69c; + --bs-yellow-100: #fff3cd; + --bs-yellow-050: #EEEEDD; /* custom blend */ + --bs-yellow-025: #FFFFEE; /* custom blend */ + + /* Orange */ + --bs-orange-rgb: 253, 126, 20; + --bs-orange-100: #FFE5D0; + --bs-orange-600: #CA6510; + --bs-orange-700: #984C0C; + --bs-orange-750: #723809; /* custom blend between 700 and 800 */ + --bs-orange-800: #653208; + + /* Greens */ + /* We mostly don't use Bootstrap's scale here since our brand is similar */ + --evergreen: var(--eg-green-600); /* brand color */ + --evergreen-rgb: 13, 119, 100; + /* blend from #ffc to #0d7764 (midpoint, 5 steps) to #062219 (4 steps) */ + --eg-green-050: #D7E890; + --eg-green-100: #D3E7BE; + --eg-green-200: #ABD1AC; + --eg-green-300: #84BA9A; + --eg-green-400: #5CA488; + --eg-green-500: #358D76; + --eg-green-600: #0d7764; + --eg-green-700: #0B6251; + --eg-green-800: #0A4D3F; + --eg-green-900: #08372C; + --eg-green-950: #062219; + + --bs-green-100: #D1E7DD; + --bs-green-200: #A3CFBB; + --bs-green-300: #75B798; + --bs-green-400: #479F76; + --bs-green-500: #198754; + --bs-green-500-rgb: 13, 119, 100; + --bs-green-rgb: 13, 119, 100; + --bs-green-600: #146C43; + --bs-green-700: #0F5132; + --bs-green-800: #0A3622; + --bs-green-900: #051B11; + --bs-green-950: #030E09; + + /* Cyan */ + --bs-cyan-900: #032830; + --bs-cyan-800: #055160; + --bs-cyan-750: #076376; /*custom blend between 700 and 800 */ + --bs-cyan-750-rgb: 7, 99, 118; + --bs-cyan-700: #087990; + --bs-cyan-700-rgb: 8,121,144; + --bs-cyan-700-disabled: #47838f; /* desaturated */ + --bs-cyan-700-disabled-rgb: 71, 131, 143; + --bs-cyan-600: #0AA2C0; + --bs-cyan-500: #0DCAF0; + --bs-cyan-400: #3DD5F3; + --bs-cyan-300: #6EDFF6; + --bs-cyan-200: #9EEAF9; + --bs-cyan-100: #cff4fc; + --bs-cyan-050: #add8e6; /* custom blend */ + --bs-info-rgb: var(--bs-cyan-700-rgb); + + /* Blues */ + --bs-blue-050: #E7F1FF; /* custom blend */ + --bs-blue-100: #CFE2FF; + --bs-blue-125: #b8daff; + --bs-blue-150: #B3D9FF; /* custom blend */ + --bs-blue-200: #9EC5FE; + --bs-blue-250: #86B7FE; /* custom blend */ + --bs-blue-300: #6ea8fe; + --bs-blue-300-rgb: 110, 168, 254; + --bs-blue-400: #3D8BFD; + --bs-blue-500: #0D6EFD; + --bs-blue-550: #0C63E4; + --bs-blue-600: #0A58CA; + --bs-blue-600-rgb: 10,88,202; + --bs-blue-650: #0848a5; /* custom blend between 600 and 700 */ + --bs-blue-650-rgb: 8, 72, 165; + --bs-blue-700: #084298; + --bs-blue-800: #052C65; + --bs-blue-850: #04214C; + --bs-blue-900: #031633; + --bs-blue-900-desat: #212529; + --bs-blue-950: #020B1A; + + /* Purples */ + --eg-purple: #C99DFF; + --bs-purple-100: #E2D9F3; + --bs-purple-800: #2C1A4D; + + /* Reds */ + --bs-red-rgb: 220,53,69; + + --bs-red-900: #2C0B0E; + --bs-red-800: #58151c; + --bs-red-700: #842029; + --bs-red-600: #B02A37; + --bs-red-500: #DC3545; + --bs-red-400: #E35D6A; + --bs-red-300: #EA868F; + --bs-red-200: #F1AFB5; + --bs-red-100: #f8d7da; +} diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css index a2197e2625..d95e5b3f62 100644 --- a/Open-ILS/src/eg2/src/styles.css +++ b/Open-ILS/src/eg2/src/styles.css @@ -1,6 +1,7 @@ -/* You can add global styles to this file, and also import other style files */ -/* Colors are defined in styles-colors.css */ - +/* You can add global styles to this file */ +/* Colors are defined in assets/css/styles-colors.css */ +/* Light mode: assets/css/light.css; dark mode: assets/css/dark.css */ +/* These have to be imported to preserve the webpack paths: */ /* bootstrap CSS only -- JS bits come from ng-bootstrap */ @import '~bootstrap/dist/css/bootstrap.min.css'; commit a6cb1bfe53482036ab7741ab7235be2629f8c4df Author: Stephanie Leary <stephanie.leary@equinoxoli.org> Date: Thu Apr 10 04:21:01 2025 +0000 LP2106666 Windows7 support for light/dark mode Reworks our light and dark color mode stylesheets and loading mechanisms to support Chrome 109 users on Windows 7, where the CSS light-dark() function is not supported. This requires separate property definitions for colors in light and dark modes. Release-note: Fixes light and dark mode support for Chrome on Windows 7. Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org> diff --git a/Open-ILS/src/eg2/src/styles-colors.css b/Open-ILS/src/eg2/src/styles-colors.css index 2cb7d80dd5..738a59c32f 100644 --- a/Open-ILS/src/eg2/src/styles-colors.css +++ b/Open-ILS/src/eg2/src/styles-colors.css @@ -1,29 +1,30 @@ -:root { /* auto */ - color-scheme: light dark; - background-color: var(--bs-body-bg); +@media screen { + :root { /* auto */ + color-scheme: light dark; + background-color: var(--bs-body-bg); + } + :root[data-bs-theme="light"] { + color-scheme: light; + } + :root[data-bs-theme="dark"] { + color-scheme: dark; + } + [data-bs-theme="dark"] img { + filter: brightness(80%); + } + [data-bs-theme="dark"] img:hover, + [data-bs-theme="dark"] img:focus { + filter: brightness(100%); + } + /* et voila. */ } -:root[data-bs-theme="light"] { - color-scheme: light; -} -:root[data-bs-theme="dark"] { - color-scheme: dark; -} -[data-bs-theme="dark"] img { - filter: brightness(80%); -} -[data-bs-theme="dark"] img:hover, -[data-bs-theme="dark"] img:focus { - filter: brightness(100%); -} -/* et voila. */ + :root { /* Greys */ - --black: light-dark(black, white); --black-rgb: 0,0,0; - --bs-black-rgb: light-dark(var(--black-rgb), var(--white-rgb)); - --white: light-dark(white, black); --white-rgb: 255,255,255; - --bs-white: light-dark(white, black); + --bs-black-rgb: 0,0,0; + --bs-gray-dark: var(--bs-gray-800); --bs-gray-100: #f8f9fa; --bs-gray-110: #f4f5f6; @@ -44,7 +45,6 @@ --bs-gray-950: #151515; --bs-gray-975: #090909; --bs-gray: var(--bs-gray-600); - --bs-gray-dark: light-dark(var(--bs-gray-800), var(--bs-gray-200)); /* Yellows */ --bs-yellow-900: #332701; @@ -66,13 +66,14 @@ /* Orange */ --bs-orange-rgb: 253, 126, 20; --bs-orange-100: #FFE5D0; + --bs-orange-600: #CA6510; --bs-orange-700: #984C0C; --bs-orange-750: #723809; /* custom blend between 700 and 800 */ --bs-orange-800: #653208; /* Greens */ /* We mostly don't use Bootstrap's scale here since our brand is similar */ - --evergreen: light-dark(var(--eg-green-600), var(--eg-green-200)); /* brand color */ + --evergreen: var(--eg-green-600); /* brand color */ --evergreen-rgb: 13, 119, 100; /* blend from #ffc to #0d7764 (midpoint, 5 steps) to #062219 (4 steps) */ --eg-green-050: #D7E890; @@ -158,114 +159,231 @@ --bs-red-300: #EA868F; --bs-red-200: #F1AFB5; --bs-red-100: #f8d7da; -} -:root{ - --black: light-dark(black, white); - --white: light-dark(white, black); - --bs-white: light-dark(white, black); - --bs-light: light-dark(var(--bs-gray-100), var(--bs-gray-850)); - --bs-dark: light-dark(var(--bs-gray-900), var(--bs-gray-100)); - --border: light-dark(var(--bs-gray-300), var(--bs-gray-700)); - --border-thick: light-dark(var(--bs-gray-400), var(--bs-gray-600)); - --inactive: light-dark(var(--bs-gray-800), var(--bs-gray-400)); - --form-control-border: light-dark(var(--bs-gray-500), var(--bs-gray-700)); - --form-check-border: light-dark(var(--bs-gray-300), var(--bs-gray-800)); - - --bs-body-color: light-dark(var(--bs-gray-900), var(--bs-gray-400)); - --bs-body-color-rgb: light-dark((33, 37, 41), (222, 226, 230)); - --bs-body-bg: light-dark(white, var(--bs-gray-925)); + + /**********************/ + /* LIGHT MODE */ + /**********************/ + --black: black; + --white: white; + --bs-white: white; + --bs-light: var(--bs-gray-100); + --bs-dark: var(--bs-gray-900); + --border: var(--bs-gray-300); + --border-thick: var(--bs-gray-400); + --inactive: var(--bs-gray-800); + --form-control-border: var(--bs-gray-500); + --form-check-border: var(--bs-gray-300); + + --bs-body-color: var(--bs-gray-900); + --bs-body-color-rgb: 33, 37, 41; + --bs-body-bg: white; --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color); - --bs-body-bg-alt: light-dark(var(--bs-gray-110), var(--bs-gray-900)); - --bs-body-bg-highlight: light-dark(var(--bs-gray-200), var(--bs-gray-850)); - --bs-text-highlight: light-dark(var(--bs-gray-700), var(--bs-gray-500)); - --bs-card-bg: light-dark(var(--bs-gray-125), var(--bs-gray-925)); - /* no light-dark() needed: */ + --bs-body-bg-alt: var(--bs-gray-110); + --bs-body-bg-highlight: var(--bs-gray-200); + --bs-text-highlight: var(--bs-gray-700); + --bs-card-bg: var(--bs-gray-125); --bs-row-alt: rgba(var(--bs-black-rgb), 0.03); --box-shadow: var(--black-rgb); --border-print: #aaa; - --success: light-dark(var(--bs-green-500), #002C1F); - --success-color: light-dark(white, var(--eg-green-100)); - --success-hover-color: light-dark(var(--eg-green-100), var(--eg-green-050)); - --success-border: light-dark(#00593d, #157146); - --success-hover: light-dark(#157146, #00593d); - --success-disabled: light-dark(#448768, #779788); /* desaturated */ + --success: var(--bs-green-500); + --success-color: white; + --success-hover-color: var(--eg-green-100); + --success-border: #00593d; + --success-hover: #157146; + --success-disabled: #448768; /* desaturated */ + --success-disabled-rgb: 68, 135, 104; + --success-text-light: #dff0d8; + --success-text-light-rgb: 223, 240, 216; + --success-text-dark: #003b35; + + --form-success-bg: var(--bs-green-100); + /* used in both nav and splash components: */ + --staff-navbar-a: var(--eg-green-800); + --staff-navbar-b: var(--eg-green-600); + + --badge-color: var(--bs-blue-800); + --badge-bg: var(--bs-blue-100); + + --badge-danger-bg: var(--bs-red-100); + --badge-danger-selected-bg: var(--bs-red-200); + --badge-danger-color: var(--bs-red-800); + + --badge-info-color: var(--bs-cyan-900); + --badge-info-bg: var(--bs-cyan-100); + --badge-info-border: var(--bs-cyan-300); + + --badge-success-color: var(--success-text-dark); + --badge-success-bg: var(--success-text-light); + + --badge-warning-bg: var(--bs-yellow-200); + --badge-warning-hover-bg: var(--bs-yellow-300); + --badge-warning-selected-bg: var(--bs-yellow-300); + --badge-warning-color: var(--bs-orange-750); + + --batch-item-attr-header-bg: var(--bs-blue-100); + + --grid-color: var(--bs-body-color); + --grid-borders: rgba(0,0,0,0.125); + --grid-filter-active: var(--bs-blue-900-desat); + --grid-header-row: var(--bs-gray-100); + --grid-header-button: var(--bs-blue-700); + --grid-row-selected: #004085; + --grid-row-selected-bg: var(--bs-blue-100); + --grid-row-selected-border: var(--bs-blue-125); + --row-even-bg: var(--bs-body-bg-alt); + --modal-header-color: white; + --modal-header-bg: var(--bs-cyan-800); + + --danger: var(--bs-red-600); + --danger-bg-hover: var(--bs-red-700); + --danger-color: var(--bs-red-700); + --danger-border: var(--bs-red-700); + --destroy-color: var(--bs-red-600); + --info: var(--bs-cyan-700); + --info-border: var(--bs-cyan-300); + --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1); + --info-hover: var(--bs-cyan-200); + --primary: var(--bs-blue-600); + --primary-border: var(--bs-blue-650); + --primary-focus-outline-rgb: var(--bs-blue-600-rgb); + --primary-hover: var(--bs-blue-650); + --primary-disabled: rgba(var(--bs-blue-600-rgb), 1); + + --warning-color: var(--bs-yellow-500); + --warning-border: var(--bs-yellow-625); + --warning-border-hover: var(--bs-yellow-500); + --warning-shadow: rgba(var(--bs-yellow-400-rgba), 0.5); + + --secondary-bg: var(--bs-gray-300); + --btn-gray-bg: var(--bs-gray-200); + --btn-gray-bg-hover: var(--bs-gray-300); + --btn-gray-color: var(--bs-body-color); + --btn-gray-border: var(--bs-gray-400); + + --row-even-bg: var(--bs-body-bg-alt); + --modal-header-color: white; + --modal-header-bg: var(--bs-cyan-800); + --modal-body-bg: var(--bs-body-bg); + --popover-menu-hover: var(--bs-gray-100); + --popover-header-bg: var(--bs-gray-100); + --dropdown-menu-bg: white; + + --status-archived: var(--bs-gray-600); + --star-stroke: var(--bs-yellow-700); +} + + +/**********************/ +/* DARK MODE */ +/**********************/ +:root[data-bs-theme="dark"] { + --black: white; + --white: black; + --bs-white: black; + --bs-light: var(--bs-gray-850); + --bs-dark: var(--bs-gray-100); + --border: var(--bs-gray-700); + --border-thick: var(--bs-gray-600); + --inactive: var(--bs-gray-400); + --form-control-border: var(--bs-gray-700); + --form-check-border: var(--bs-gray-800); + + --bs-body-color: var(--bs-gray-400); + --bs-body-color-rgb: 222, 226, 230; + --bs-body-bg: var(--bs-gray-925); + --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color); + --bs-body-bg-alt: var(--bs-gray-900); + --bs-body-bg-highlight: var(--bs-gray-850); + --bs-text-highlight: var(--bs-gray-500); + --bs-card-bg: var(--bs-gray-925); + + --evergreen: var(--eg-green-200); /* brand color */ + + --success: #002C1F; + --success-color: var(--eg-green-100); + --success-hover-color: var(--eg-green-050); + --success-border: #157146; + --success-hover: #00593d; + --success-disabled: #779788; /* desaturated */ --success-disabled-rgb: 68, 135, 104; - --success-text-light: light-dark(#dff0d8, #003b35); + --success-text-light: #003b35; --success-text-light-rgb: 223, 240, 216; - --success-text-dark: light-dark(#003b35, #dff0d8); + --success-text-dark: #dff0d8; - --form-success-bg: light-dark(var(--bs-green-100), var(--eg-green-900)); + --form-success-bg: var(--eg-green-900); /* used in both nav and splash components: */ - --staff-navbar-a: light-dark( var(--eg-green-800), var(--bs-gray-900)); - --staff-navbar-b: light-dark( var(--eg-green-600), var(--bs-gray-975)); + --staff-navbar-a: var(--bs-gray-900); + --staff-navbar-b: var(--bs-gray-975); - --badge-color: light-dark(var(--bs-primary-text-dark), var(--bs-blue-200)); - --badge-bg: light-dark(var(--bs-blue-100), var(--bs-blue-900)); + --badge-color: var(--bs-blue-200); + --badge-bg: var(--bs-blue-900); - --badge-danger-bg: light-dark( var(--bs-red-100), var(--bs-red-800)); - --badge-danger-selected-bg: light-dark( var(--bs-red-200), var(--bs-red-700)); - --badge-danger-color: light-dark( var(--bs-red-800), var(--bs-red-200)); + --badge-danger-bg: var(--bs-red-800); + --badge-danger-selected-bg: var(--bs-red-700); + --badge-danger-color: var(--bs-red-200); - --badge-info-color: light-dark(var(--bs-cyan-900), var(--bs-cyan-100)); - --badge-info-bg: light-dark(var(--bs-cyan-100), var(--bs-cyan-900)); - --badge-info-border: light-dark(var(--bs-cyan-300), var(--bs-cyan-700)); + --badge-info-color: var(--bs-cyan-100); + --badge-info-bg: var(--bs-cyan-900); + --badge-info-border: var(--bs-cyan-700); --badge-success-color: var(--success-text-dark); --badge-success-bg: var(--success-text-light); - --badge-warning-bg: light-dark(var(--bs-yellow-200), var(--bs-yellow-800)); - --badge-warning-hover-bg: light-dark(var(--bs-yellow-300), var(--bs-yellow-900)); - --badge-warning-selected-bg: light-dark(var(--bs-yellow-300), var(--bs-yellow-700)); - --badge-warning-color: light-dark(var(--bs-orange-750), var(--bs-yellow-200)); + --badge-warning-bg: var(--bs-yellow-800); + --badge-warning-hover-bg: var(--bs-yellow-900); + --badge-warning-selected-bg: var(--bs-yellow-700); + --badge-warning-color: var(--bs-yellow-200); - --batch-item-attr-header-bg: light-dark(var(--bs-blue-100), var(--bs-blue-900-desat)); + --batch-item-attr-header-bg: var(--bs-blue-900-desat); --grid-color: var(--bs-body-color); - --grid-borders: light-dark(rgba(0,0,0,0.125), #292929); + --grid-borders: #292929; - --grid-filter-active: light-dark(var(--bs-blue-900-desat), var(--bs-gray-900)); - --grid-header-row: light-dark(var(--bs-gray-100), var(--bs-gray-050)); + --grid-filter-active: var(--bs-gray-900); + --grid-header-row: var(--bs-gray-050); - --grid-row-selected: light-dark(#004085, var(--bs-blue-100)); - --grid-row-selected-bg: light-dark(var(--bs-blue-100), var(--bs-blue-900)); - --grid-row-selected-border: light-dark(var(--bs-blue-125), var(--bs-blue-800)); + --grid-row-selected: var(--bs-blue-100); + --grid-row-selected-bg: var(--bs-blue-900); + --grid-row-selected-border: var(--bs-blue-800); - --grid-header-button: light-dark(var(--bs-blue-700), var(--bs-blue-300)); + --grid-header-button: var(--bs-blue-300); - --danger: light-dark(var(--bs-red-600), var(--bs-red-800)); + --danger: var(--bs-red-800); --danger-bg-hover: var(--bs-red-700); - --danger-color: light-dark(var(--bs-red-700), var(--bs-red-300)); - --danger-border: light-dark(var(--bs-red-700), var(--bs-red-600)); - --info: light-dark(var(--bs-cyan-700), var(--bs-cyan-300)); - --info-border: light-dark(var(--bs-cyan-300), var(--bs-cyan-700)); - --info-disabled: light-dark(rgba(var(--bs-cyan-700-disabled-rgb), 1), rgba(var(--bs-cyan-700-disabled-rgb), 0.7)); - --info-hover: light-dark(var(--bs-cyan-200), var(--bs-cyan-750)); - --primary: light-dark(var(--bs-blue-600), var(--bs-blue-300)); - --primary-border: light-dark(var(--bs-blue-650), var(--bs-blue-400) ); + --danger-color: var(--bs-red-300); + --danger-border: var(--bs-red-600); + --destroy-color: var(--bs-red-200); + --info: var(--bs-cyan-300); + --info-border: var(--bs-cyan-700); + --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1); + --info-hover: var(--bs-cyan-750); + --primary: var(--bs-blue-300); + --primary-border: var(--bs-blue-400); --primary-focus-outline-rgb: var(--bs-blue-600-rgb); - --primary-hover: light-dark(var(--bs-blue-650), var(--bs-blue-400)); - --primary-disabled: light-dark(rgba(var(--bs-blue-600-rgb), 1.0), rgba(var(--bs-blue-300-rgb), 0.7)); + --primary-hover: var(--bs-blue-400); + --primary-disabled: rgba(var(--bs-blue-300-rgb), 0.6); - --warning-color: light-dark(var(--bs-yellow-500), var(--bs-yellow-200)); - --warning-border: light-dark(var(--bs-yellow-625), var(--bs-yellow-400)); + --warning-color: var(--bs-yellow-200); + --warning-border: var(--bs-yellow-400); --warning-border-hover: var(--bs-yellow-500); --warning-shadow: var(--eg-yellow-2); - --btn-gray-bg: light-dark(var(--bs-gray-200), var(--bs-gray-900)); - --btn-gray-bg-hover: light-dark(var(--bs-gray-300), var(--bs-gray-800)); + --secondary-bg: var(--bs-gray-700); + --btn-gray-bg: var(--bs-gray-900); + --btn-gray-bg-hover: var(--bs-gray-800); --btn-gray-color: var(--bs-body-color); - --btn-gray-border: light-dark(var(--bs-gray-400), var(--bs-gray-800)); + --btn-gray-border: var(--bs-gray-800); --row-even-bg: var(--bs-body-bg-alt); --modal-header-color: white; --modal-header-bg: var(--bs-cyan-800); - --modal-body-bg: light-dark(var(--bs-body-bg), var(--bs-body-bg-alt)); - --popover-menu-hover: light-dark(var(--bs-gray-100), var(--bs-gray-900)); - --popover-header-bg: light-dark(var(--bs-gray-100), var(--bs-gray-900)); - --dropdown-menu-bg: light-dark(white, var(--bs-gray-900)); - - --status-archived: light-dark(var(--bs-gray-600), var(--bs-gray-500)); - --star-stroke: light-dark(var(--bs-yellow-700), transparent); -} \ No newline at end of file + --modal-body-bg: var(--bs-body-bg-alt); + --popover-menu-hover: var(--bs-gray-900); + --popover-header-bg: var(--bs-gray-900); + --dropdown-menu-bg: var(--bs-gray-900); + + --status-archived: var(--bs-gray-500); + --star-stroke: transparent; +} diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css index c9b071b9c8..a2197e2625 100644 --- a/Open-ILS/src/eg2/src/styles.css +++ b/Open-ILS/src/eg2/src/styles.css @@ -168,7 +168,7 @@ a[target="_blank"]:not(:has(img)):after { flex: 1; display: flex; align-items: center; - background-color: light-dark( var(--bs-gray-100), var(--bs-gray-900) ); + background-color: var(--bs-body-bg-alt); border-radius: 5px; box-shadow: inset 0 1px 1px rgba(var(--bs-black-rgb), 0.5); padding: 4px; @@ -182,7 +182,8 @@ a[target="_blank"]:not(:has(img)):after { /* copies color/border/elements from above sans position elements */ .well-like { - background-color: light-dark( var(--bs-gray-100), var(--bs-gray-900) ); + background-color: var(--bs-light); + color: var(--bs-dark); border-radius: 5px; box-shadow: inset 0 1px 1px rgba(var(--bs-black-rgb), 0.5); } @@ -374,7 +375,11 @@ a[target="_blank"]:not(:has(img)):after { } option[disabled] { - color: light-dark(rgba(0,0,0, 0.3), rgba(255,255,255, 0.6)); + color: rgba(0,0,0, 0.3); +} + +[data-bs-theme="dark"] option[disabled] { + color: rgba(255,255,255, 0.6); } input, textarea, select, option, @@ -403,7 +408,11 @@ button.dropdown-item:is(:focus, :focus-visible) { } .form-control::placeholder { - color: light-dark(var(--bs-gray-500), var(--bs-gray-600)); + color: var(--bs-gray-500); +} + +[data-bs-theme="dark"] .form-control::placeholder { + color: var(--bs-gray-600); } .form-control:focus, @@ -439,11 +448,6 @@ input[type="checkbox"]:focus { landscape. LP#1986725 */ #eg-print-container {display: block} #eg-print-container pre {border: none} - - /* Always print in light mode */ - :root { - color-scheme: light !important; - } } /** @@ -463,7 +467,7 @@ body>.dropdown-menu {z-index: 2100;} } .ngb-dp-day:not(.disabled) .daterange-day.range, .ngb-dp-day:not(.disabled) .daterange-day:hover { background-color: var(--primary); - color: light-dark(white, black); + color: var(--bs-white); } .ngb-dp-day:not(.disabled) .daterange-day.faded { background-color: var(--bs-body-bg-highlight); @@ -526,7 +530,7 @@ body>.dropdown-menu {z-index: 2100;} * breaks a lot of styles. */ #acq-search-page ngbNav .nav.nav-tabs { - background-color: var(--nav-tab-bg); + background-color: var(--bs-body-bg); } /** @@ -599,13 +603,13 @@ button.input-group-text.text-danger { .btn-light:hover, .btn-light:focus, .show > .btn-light.dropdown-toggle { - background-color: light-dark(var(--bs-gray-100), var(--bs-body-bg-alt)); - color: light-dark(var(--bs-secondary), var(--bs-gray-100)); - border-color: light-dark(var(--bs-secondary), var(--bs-gray-100)); + background-color: var(--bs-body-bg-alt); + color: var(--bs-secondary-color); + border-color: var(--bs-secondary-color); } .btn-outline-secondary:is(:hover, :focus, :focus-visible) { - color: light-dark(var(--bs-secondary), var(--bs-gray-200)); + color: var(--bs-secondary-color); background-color: transparent; } @@ -666,20 +670,32 @@ button.input-group-text.text-danger { .btn-info { background-color: var(--bs-cyan-700); - border-color: light-dark(var(--bs-cyan-600), var(--bs-cyan-800)); + border-color: var(--bs-cyan-600); color: white; } +[data-bs-theme="dark"] .btn-info { + border-color: var(--bs-cyan-800); +} + .btn-info:is(.hover, :hover, .focus, :focus, :focus-visible), .btn-check:active + .btn-info, .btn-check:checked + .btn-info, .btn-info.active, .show > .btn-info.dropdown-toggle { background-color: var(--bs-cyan-600); - border-color: light-dark(var(--bs-cyan-600), var(--bs-cyan-800)); + border-color: var(--bs-cyan-600); color: white; } +[data-bs-theme="dark"] .btn-info:is(.hover, :hover, .focus, :focus, :focus-visible), +[data-bs-theme="dark"] .btn-check:active + .btn-info, +[data-bs-theme="dark"] .btn-check:checked + .btn-info, +[data-bs-theme="dark"] .btn-info.active, +[data-bs-theme="dark"] .show > .btn-info.dropdown-toggle { + border-color: var(--bs-cyan-800); +} + .btn-info.disabled, .btn-info:disabled { color: white !important; } @@ -815,8 +831,8 @@ button.input-group-text.text-danger { .btn-destroy:is(:active, :hover, :focus, :focus-visible), .btn-link.btn-destroy:is(:active, :hover, :focus, :focus-visible) { - color: light-dark(var(--bs-red-600),var(--bs-red-200)); - background-color: light-dark(var(--bs-gray-200), var(--bs-gray-900)); + color: var(--destroy-color); + background-color: var(--bs-body-bg-highlight); border: 1px solid var(--danger-border); box-shadow: 0 0 0 .25rem rgba(var(--bs-red-rgb), .25); } @@ -834,14 +850,14 @@ button.input-group-text.text-danger { } .btn-outline-destroy:is(:hover, :focus, :focus-visible) { - color: light-dark(var(--bs-red-600),var(--bs-red-200)); + color: var(--destroy-color); background-color: transparent; border: 1px solid var(--danger-border); box-shadow: 0 0 0 .25rem rgba(var(--bs-red-rgb), .25); } .btn-outline-destroy:active { - color: light-dark(var(--bs-red-600),var(--bs-red-200)); + color: var(--destroy-color); background-color: transparent; border: 1px solid var(--danger-border); } @@ -872,7 +888,7 @@ button.focus-border:focus-visible { .badge-secondary, .badge.text-bg-secondary { - background: light-dark(var(--bs-gray-300), var(--bs-gray-700)); + background: var(--secondary-bg); color: var(--bs-body-color); border-color: var(--border); } @@ -907,18 +923,23 @@ button.focus-border:focus-visible { .badge-light, .badge.text-bg-light { - background: var(---bs-body-bg-highlight); + background: var(--bs-body-bg-highlight); color: var(--bs-body-color); border-color: var(--border); } .badge-dark, .badge.text-bg-dark { - background: light-dark(var(--bs-gray-500), var(--bs-gray-800)); + background: var(--bs-gray-500); color: var(--bs-body-color); border-color: var(--border); } +[data-bs-theme="dark"] .badge-dark, +[data-bs-theme="dark"] .badge.text-bg-dark { + background: var(--bs-gray-800); +} + .badge.border { border: 1px solid inherit; } @@ -995,15 +1016,25 @@ a { .nav-tabs.flex-column .nav-item .nav-link:hover, .nav-tabs.flex-column .nav-item .nav-link:focus { - background-color: light-dark(rgba(0,0,100,0.075), var(--bs-body-bg-highlight)); + background-color: rgba(0,0,100,0.075); +} + +[data-bs-theme="dark"] .nav-tabs.flex-column .nav-item .nav-link:hover, +[data-bs-theme="dark"] .nav-tabs.flex-column .nav-item .nav-link:focus { + background-color: var(--bs-body-bg-highlight); } .nav-tabs.flex-column .nav-item.show .nav-link, .nav-tabs.flex-column .nav-link.active { - background-color: light-dark(rgba(var(--bs-blue-rgb),0.1), var(--bs-blue-350)); + background-color: rgba(var(--bs-blue-600-rgb), 0.1); font-weight: bold; } +[data-bs-theme="dark"] .nav-tabs.flex-column .nav-item.show .nav-link, +[data-bs-theme="dark"] .nav-tabs.flex-column .nav-link.active { + background-color: var(--bs-blue-250); +} + [data-bs-theme="dark"] .nav-tabs:not(.flex-column) .nav-link:hover, [data-bs-theme="dark"] .nav-tabs:not(.flex-column) .nav-link:focus, [data-bs-theme="dark"] .nav-tabs:not(.flex-column) .nav-link.active, @@ -1020,10 +1051,14 @@ a { /* tabs on cards should match the card */ .nav-tabs.card-nav-tabs:not(.flex-column) .nav-link { - background-color: light-dark(var(--bs-gray-200), var(--bs-body-bg)); + background-color: var(--bs-gray-200); border-color: var(--border); } +[data-bs-theme="dark"] .nav-tabs.card-nav-tabs:not(.flex-column) .nav-link { + background-color: var(--bs-body-bg); +} + .nav-tabs.card-nav-tabs:not(.flex-column) .nav-link:active, .nav-tabs.card-nav-tabs:not(.flex-column) .nav-link.active { background-color: var(--bs-body-bg-alt); @@ -1108,8 +1143,12 @@ legend, } .patron-summary-alert, .patron-summary-alert-small { - background: inherit; - color: light-dark(var(--bs-red-300), var(--bs-red-700)); + background: inherit; + color: var(--bs-red-300); +} + +[data-bs-theme="dark"] .patron-summary-alert, .patron-summary-alert-small { + color: var(--bs-red-700); } [data-bs-theme="dark"] .text-dark { diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index d3e4ec3b96..dc5f70a56e 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -50,7 +50,7 @@ body { } kbd { - background-color: light-dark(var(--bs-gray-200), var(--bs-body-bg-highlight)); + background-color: var(--bs-body-bg-highlight); border-radius: .2rem; border: none; box-shadow: 1px 1px 1px rgba(var(--box-shadow), 0.2); @@ -84,7 +84,10 @@ kbd { /* Overwrite Bootstrap's definition so the area around hovered buttons doesn't look bad in dark mode */ .nav>li>a:hover { color: var(--primary-hover); - background-color: light-dark(var(--bs-gray-200), var(--bs-gray-900)); + background-color: var(--bs-gray-200); +} +[data-bs-theme="dark"] .nav>li>a:hover { + background-color: var(--bs-gray-900); } /* .modal { @@ -118,15 +121,20 @@ kbd { /* Form Validation CSS - http://docs.angularjs.org/guide/forms * TODO: these colors are harsh and don't fit the EG color scheme */ -.form-validated input.ng-invalid.ng-dirty, -.form-validated textarea.ng-invalid.ng-dirty { - background-color: light-dark(var(--bs-red-200), var(--bs-red-900)); -} -.form-validated input.ng-valid.ng-dirty, -.form-validated textarea.ng-valid.ng-dirty { - background-color: var(--form-success-bg); -} + .form-validated .ng-valid.ng-dirty[required]:not(:is(fieldset, form)), + .form-validated .ng-valid.ng-dirty.required, + .form-validated input[formcontrolname].ng-valid.required { + border-left: 5px solid var(--bs-form-valid-border-color); + } + + .form-validated .ng-invalid.ng-dirty:not(:is(fieldset, form)), + .form-validated input[formcontrolname].ng-invalid.ng-dirty, + .form-validated .invalid.ng-dirty:not(:is(form)), + :user-invalid { + border-left: 5px solid var(--bs-form-invalid-border-color); + } + /* -------------------------------------------------------------------------- * Local style */ @@ -142,7 +150,7 @@ a { a.disabled { pointer-events: none; cursor: default; - color: #888 !important; + opacity: 0.8; } .disabled { cursor: not-allowed; @@ -281,7 +289,6 @@ table.list tr.selected td { /* deprecated? */ /* patron bill row-highlighting */ /* background colors are !important because Bootstrap 4 table striping is greedy */ -/* background colors are !important because Bootstrap 4 table striping is greedy */ .overdue-row { color: var(--bs-body-color); background-color: rgba(var(--bs-orange-rgb), 0.10); @@ -306,7 +313,13 @@ table.list tr.selected td { /* deprecated? */ .longoverdue-row a:link, .longoverdue-row a:visited, .longoverdue-row .eg-grid-cell-stock-status { - color: light-dark(var(--bs-orange-700), var(--bs-yellow-300)); + color: var(--bs-orange-700); + border-color: var(--bs-orange-700); +} + +[data-bs-theme="dark"] .longoverdue-row a:link, .longoverdue-row a:visited, +[data-bs-theme="dark"] .longoverdue-row .eg-grid-cell-stock-status { + color: var(--bs-yellow-300); border-color: var(--bs-orange-700); } @@ -497,7 +510,7 @@ input, textarea, select, option, .popover-body .dropdown-item, .tooltip-inner, .well { - background: light-dark(white, var(--bs-gray-950)); + background: var(--bs-body-bg-highlight); border-color: var(--border); color: var(--bs-body-color); } @@ -586,11 +599,16 @@ input, textarea, select, option, .badge-secondary, .badge.text-bg-secondary { - background: light-dark(var(--bs-gray-300), var(--bs-gray-700)); + background: var(--bs-gray-300); color: var(--bs-body-color); border-color: var(--border); } +[data-bs-theme="dark"] .badge-secondary, +[data-bs-theme="dark"] .badge.text-bg-secondary { + background: var(--bs-gray-700); +} + .alert-success, .badge-success, .badge.text-bg-success { @@ -632,11 +650,16 @@ input, textarea, select, option, .badge-dark, .badge.text-bg-dark { - background: light-dark(var(--bs-gray-500), var(--bs-gray-800)); + background: var(--bs-gray-500); color: var(--bs-body-color); border-color: var(--border); } +[data-bs-theme="dark"] .badge-dark, +[data-bs-theme="dark"] .badge.text-bg-dark { + background: var(--bs-gray-800); +} + /* Accessible button colors */ .btn { @@ -652,35 +675,30 @@ input, textarea, select, option, background-color: transparent; } + .btn-light:hover, .btn-light:focus, .show > .btn-light.dropdown-toggle { - background-color: light-dark(var(--bs-gray-100), var(--bs-body-bg-alt)); - color: light-dark(var(--bs-secondary), var(--bs-gray-100)); - border-color: light-dark(var(--bs-secondary), var(--bs-gray-100)); + background-color: var(--bs-body-bg-alt); + color: var(--bs-secondary-color); + border-color: var(--bs-secondary-color); } -.btn-outline-secondary:hover, -.btn-outline-secondary:focus { - color: light-dark(var(--bs-secondary), var(--bs-gray-200)); +.btn-outline-secondary:is(:hover, :focus, :focus-visible) { + color: var(--bs-secondary-color); background-color: transparent; } -.btn.btn-warning, -.btn.btn-outline-warning { - background: light-dark(var(--bs-yellow-300), var(--bs-yellow-800)); +.btn-warning, +.btn-outline-warning { + background: var(--badge-warning-bg); border-color: var(--warning-border); color: var(--bs-body-color); } -.btn.btn-warning.hover, -.btn.btn-warning:hover { - background-color: var(--badge-warning-selected-bg); -} - /* other colors' focus state shadows do not need to change */ -.btn.btn-warning.focus, -.btn.btn-warning:focus { +.btn-warning.focus, +.btn-warning:is(:hover, :focus, :focus-visible) { background-color: var(--badge-warning-hover-bg); border-color: var(--warning-border-hover); box-shadow: 0 0 0 .2rem var(--warning-shadow); @@ -692,10 +710,7 @@ input, textarea, select, option, color: var(--bs-white); } -.btn-primary:hover, -.btn-primary.hover, -.btn-primary:focus, -.btn-primary.focus, +.btn-primary:is(.hover, :hover, .focus, :focus, :focus-visible), .btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, @@ -711,10 +726,7 @@ input, textarea, select, option, color: var(--primary-border); } -.btn-outline-primary:hover, -.btn-outline-primary.hover, -.btn-outline-primary:focus, -.btn-outline-primary.focus { +.btn-outline-primary:is(.hover, :hover, .focus, :focus, :focus-visible) { background-color: var(--bs-body-bg); border-color: var(--primary-border); color: var(--primary-border); @@ -722,17 +734,7 @@ input, textarea, select, option, .btn-primary.disabled, .btn-primary:disabled { - /* We actually want white here because black is too low-contrast in dark mode */ color: var(--bs-white); - background-color: var(--primary-disabled); - border-color: var(--primary-disabled); -} - -.btn-primary.disabled:hover, -.btn-primary:disabled:hover { - color: var(--primary-disabled); - background-color: var(--bs-body-bg); - border-color: var(--primary-disabled); } .btn-outline-primary.disabled, @@ -743,27 +745,34 @@ input, textarea, select, option, } .btn-info { - background-color: light-dark(var(--bs-cyan-700), var(--bs-cyan-900)); - border-color: light-dark(var(--bs-cyan-600), var(--bs-cyan-800)); + background-color: var(--bs-cyan-700); + border-color: var(--bs-cyan-600); color: white; } -.btn-info:hover, -.btn-info.hover, -.btn-info:focus, -.btn-info.focus, +[data-bs-theme="dark"] .btn-info { + border-color: var(--bs-cyan-800); +} + +.btn-info:is(.hover, :hover, .focus, :focus, :focus-visible), .btn-check:active + .btn-info, .btn-check:checked + .btn-info, .btn-info.active, .show > .btn-info.dropdown-toggle { background-color: var(--bs-cyan-600); - border-color: light-dark(var(--bs-cyan-600), var(--bs-cyan-800)); + border-color: var(--bs-cyan-600); color: white; } +[data-bs-theme="dark"] .btn-info:is(.hover, :hover, .focus, :focus, :focus-visible), +[data-bs-theme="dark"] .btn-check:active + .btn-info, +[data-bs-theme="dark"] .btn-check:checked + .btn-info, +[data-bs-theme="dark"] .btn-info.active, +[data-bs-theme="dark"] .show > .btn-info.dropdown-toggle { + border-color: var(--bs-cyan-800); +} + .btn-info.disabled, .btn-info:disabled { - background-color: rgba(var(--bs-info-rgb), 0.5); - border-color: rgba(var(--bs-info-rgb), 0.5); color: white !important; } @@ -773,10 +782,7 @@ input, textarea, select, option, color: var(--bs-body-color); } -.btn-outline-info:hover, -.btn-outline-info.hover, -.btn-outline-info:focus, -.btn-outline-info.focus, +.btn-outline-info:is(.hover, :hover, .focus, :focus, :focus-visible), .btn-check:active+.btn-info, .btn-check:checked+.btn-info, .btn-info.active, @@ -807,10 +813,7 @@ input, textarea, select, option, color: var(--success-color); } -.btn-success:hover, -.btn-success.hover, -.btn-success:focus, -.btn-success.focus, +.btn-success:is(.hover, :hover, .focus, :focus, :focus-visible), .btn-check:active + .btn-success, .btn-check:checked + .btn-success, .btn-success.active, @@ -826,24 +829,21 @@ input, textarea, select, option, color: var(--success-color); } -.btn-outline-success:hover, -.btn-outline-success.hover, -.btn-outline-success:focus, -.btn-outline-success.focus { +.btn-outline-success:is(.hover, :hover, .focus, :focus, :focus-visible) { background-color: var(--bs-body-bg); border-color: var(--success-hover); color: var(--success-hover-color); } .btn-success.disabled, -.btn-success:disabled, .btn-success:disabled:hover { +.btn-success:disabled { color: var(--bs-white); background-color: var(--success-disabled); border-color: var(--success-disabled); } .btn-outline-success.disabled, -.btn-outline-success:disabled, .btn-outline-success:disabled:hover { +.btn-outline-success:disabled { color: var(--success-disabled); background-color: var(--bs-body-bg); border-color: var(--success-disabled); @@ -855,15 +855,98 @@ input, textarea, select, option, color: white; } -.btn-danger:hover, -.btn-danger:focus { +.btn-danger:is(.hover, :hover, .focus, :focus, :focus-visible) { background-color: var(--danger-bg-hover); } +.btn-normal, +.btn-destroy, +.btn-outline-normal:is(:active, :hover, :focus, :focus-visible) { + color: var(--btn-gray-color); + background-color: var(--btn-gray-bg); + border: 1px solid var(--btn-gray-border); +} + +.btn-normal:is(:active, :hover, :focus, :focus-visible) { + color: var(--btn-gray-color); + background-color: var(--btn-gray-bg-hover); + border: 1px solid var(--btn-gray-border); +} + +.btn-outline-normal, +.btn-outline-destroy { + color: var(--btn-gray-color); + background-color: transparent; + border: 1px solid var(--btn-gray-border); +} + +.btn-outline-normal:is(:active, :hover, :focus, :focus-visible) { + color: var(--btn-gray-color); + background-color: var(--btn-gray-bg); + border: 1px solid var(--btn-gray-border); +} + +.btn-normal[disabled], +.btn-destroy[disabled] { + color: var(--bs-body-color); + background-color: var(--btn-gray-bg); + border: 1px solid var(--btn-gray-border); +} + +.btn-outline-normal[disabled], +.btn-outline-destroy[disabled] { + color: var(--btn-gray-border); + background-color: transparent; + border: 1px solid var(--btn-gray-border); +} + +.btn-link.btn-destroy { + background-color: transparent; + border-color: transparent; +} + +.btn-destroy:is(:active, :hover, :focus, :focus-visible), +.btn-link.btn-destroy:is(:active, :hover, :focus, :focus-visible) { + color: var(--destroy-color); + background-color: var(--bs-body-bg-highlight); + border: 1px solid var(--danger-border); + box-shadow: 0 0 0 .25rem rgba(var(--bs-red-rgb), .25); +} + +.btn-destroy:active { + color: white; + background-color: var(--danger); + border: 1px solid var(--danger-border); +} + +.btn-link.btn-destroy:active { + color: var(--danger); + background-color: transparent; + border: 1px solid var(--danger-border); +} + +.btn-outline-destroy:is(:hover, :focus, :focus-visible) { + color: var(--destroy-color); + background-color: transparent; + border: 1px solid var(--danger-border); + box-shadow: 0 0 0 .25rem rgba(var(--bs-red-rgb), .25); +} + +.btn-outline-destroy:active { + color: var(--destroy-color); + background-color: transparent; + border: 1px solid var(--danger-border); +} + /* Also have to overwrite bootstrap for dark mode for these */ .form-control::placeholder { - color: light-dark(var(--bs-gray-550), var(--bs-gray-600)); + color: var(--bs-gray-550); +} + +[data-bs-theme="dark"] .form-control::placeholder { + color: var(--bs-gray-600); } + .form-control[disabled], .form-control[readonly]{ background-color: var(--bs-body-bg-highlight); } @@ -898,8 +981,14 @@ button.dropdown-toggle:focus, } .btn.btn-default:active { - color: light-dark(var(--bs-gray-800), var(--bs-gray-150)); - background-color: light-dark(#e6e6e6, var(--bs-gray-800)); + color: var(--bs-gray-800); + background-color: #e6e6e6; + border-color: #adadad; +} + +[data-bs-theme="dark"] .btn.btn-default:active { + color: var(--bs-gray-150); + background-color: var(--bs-gray-800); border-color: #adadad; } diff --git a/Open-ILS/src/templates/staff/css/styles-colors.css.tt2 b/Open-ILS/src/templates/staff/css/styles-colors.css.tt2 index 0d9533156b..738a59c32f 100644 --- a/Open-ILS/src/templates/staff/css/styles-colors.css.tt2 +++ b/Open-ILS/src/templates/staff/css/styles-colors.css.tt2 @@ -1,29 +1,30 @@ -:root { /* auto */ - color-scheme: light dark; - background-color: var(--bs-body-bg); +@media screen { + :root { /* auto */ + color-scheme: light dark; + background-color: var(--bs-body-bg); + } + :root[data-bs-theme="light"] { + color-scheme: light; + } + :root[data-bs-theme="dark"] { + color-scheme: dark; + } + [data-bs-theme="dark"] img { + filter: brightness(80%); + } + [data-bs-theme="dark"] img:hover, + [data-bs-theme="dark"] img:focus { + filter: brightness(100%); + } + /* et voila. */ } -:root[data-bs-theme="light"] { - color-scheme: light; -} -:root[data-bs-theme="dark"] { - color-scheme: dark; -} -[data-bs-theme="dark"] img { - filter: brightness(80%); -} -[data-bs-theme="dark"] img:hover, -[data-bs-theme="dark"] img:focus { - filter: brightness(100%); -} -/* et voila. */ + :root { /* Greys */ - --black: light-dark(black, white); --black-rgb: 0,0,0; - --bs-black-rgb: light-dark(var(--black-rgb), var(--white-rgb)); - --white: light-dark(white, black); --white-rgb: 255,255,255; - --bs-white: light-dark(white, black); + --bs-black-rgb: 0,0,0; + --bs-gray-dark: var(--bs-gray-800); --bs-gray-100: #f8f9fa; --bs-gray-110: #f4f5f6; @@ -44,7 +45,6 @@ --bs-gray-950: #151515; --bs-gray-975: #090909; --bs-gray: var(--bs-gray-600); - --bs-gray-dark: light-dark(var(--bs-gray-800), var(--bs-gray-200)); /* Yellows */ --bs-yellow-900: #332701; @@ -65,13 +65,15 @@ /* Orange */ --bs-orange-rgb: 253, 126, 20; - --bs-orange-750: #723809; /* custom blend between 700 and 800 */ + --bs-orange-100: #FFE5D0; + --bs-orange-600: #CA6510; --bs-orange-700: #984C0C; - + --bs-orange-750: #723809; /* custom blend between 700 and 800 */ + --bs-orange-800: #653208; /* Greens */ /* We mostly don't use Bootstrap's scale here since our brand is similar */ - --evergreen: light-dark(var(--eg-green-600), var(--eg-green-200)); /* brand color */ + --evergreen: var(--eg-green-600); /* brand color */ --evergreen-rgb: 13, 119, 100; /* blend from #ffc to #0d7764 (midpoint, 5 steps) to #062219 (4 steps) */ --eg-green-050: #D7E890; @@ -142,6 +144,8 @@ /* Purples */ --eg-purple: #C99DFF; + --bs-purple-100: #E2D9F3; + --bs-purple-800: #2C1A4D; /* Reds */ --bs-red-rgb: 220,53,69; @@ -155,118 +159,231 @@ --bs-red-300: #EA868F; --bs-red-200: #F1AFB5; --bs-red-100: #f8d7da; -} -:root{ - --black: light-dark(black, white); - --white: light-dark(white, black); - --bs-white: light-dark(white, black); - --bs-light: light-dark(var(--bs-gray-100), var(--bs-gray-850)); - --bs-dark: light-dark(var(--bs-gray-900), var(--bs-gray-100)); - --border: light-dark(var(--bs-gray-300), var(--bs-gray-700)); - --border-thick: light-dark(var(--bs-gray-400), var(--bs-gray-600)); - --inactive: light-dark(var(--bs-gray-800), var(--bs-gray-400)); - --form-check-border: light-dark(var(--bs-gray-300), var(--bs-gray-800)); - - --bs-body-color: light-dark(var(--bs-gray-900), var(--bs-gray-400)); - --bs-body-color-rgb: light-dark((33, 37, 41), (222, 226, 230)); - --bs-body-bg: light-dark(white, var(--bs-gray-925)); + + /**********************/ + /* LIGHT MODE */ + /**********************/ + --black: black; + --white: white; + --bs-white: white; + --bs-light: var(--bs-gray-100); + --bs-dark: var(--bs-gray-900); + --border: var(--bs-gray-300); + --border-thick: var(--bs-gray-400); + --inactive: var(--bs-gray-800); + --form-control-border: var(--bs-gray-500); + --form-check-border: var(--bs-gray-300); + + --bs-body-color: var(--bs-gray-900); + --bs-body-color-rgb: 33, 37, 41; + --bs-body-bg: white; --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color); - --bs-body-bg-alt: light-dark(var(--bs-gray-110), var(--bs-gray-900)); - --bs-body-bg-highlight: light-dark(var(--bs-gray-200), var(--bs-gray-850)); - --bs-text-highlight: light-dark(var(--bs-gray-700), var(--bs-gray-500)); - --bs-card-bg: light-dark(var(--bs-gray-125), var(--bs-gray-925)); - /* no light-dark() needed: */ + --bs-body-bg-alt: var(--bs-gray-110); + --bs-body-bg-highlight: var(--bs-gray-200); + --bs-text-highlight: var(--bs-gray-700); + --bs-card-bg: var(--bs-gray-125); --bs-row-alt: rgba(var(--bs-black-rgb), 0.03); --box-shadow: var(--black-rgb); --border-print: #aaa; - --success: light-dark(var(--bs-green-500), #002C1F); - --success-color: light-dark(white, var(--eg-green-100)); - --success-hover-color: light-dark(var(--eg-green-100), var(--eg-green-050)); - --success-border: light-dark(#00593d, #157146); - --success-hover: light-dark(#157146, #00593d); - --success-disabled: light-dark(#448768, #779788); /* desaturated */ + --success: var(--bs-green-500); + --success-color: white; + --success-hover-color: var(--eg-green-100); + --success-border: #00593d; + --success-hover: #157146; + --success-disabled: #448768; /* desaturated */ --success-disabled-rgb: 68, 135, 104; - --success-text-light: light-dark(#dff0d8, #003b35); + --success-text-light: #dff0d8; --success-text-light-rgb: 223, 240, 216; - --success-text-dark: light-dark(#003b35, #dff0d8); + --success-text-dark: #003b35; - --form-success-bg: light-dark(var(--bs-green-100), var(--eg-green-900)); + --form-success-bg: var(--bs-green-100); /* used in both nav and splash components: */ - --staff-navbar-a: light-dark( var(--eg-green-800), var(--bs-gray-900)); - --staff-navbar-b: light-dark( var(--eg-green-600), var(--bs-gray-975)); + --staff-navbar-a: var(--eg-green-800); + --staff-navbar-b: var(--eg-green-600); - --badge-color: light-dark(var(--bs-primary-text-dark), var(--bs-blue-200)); - --badge-bg: light-dark(var(--bs-blue-100), var(--bs-blue-900)); + --badge-color: var(--bs-blue-800); + --badge-bg: var(--bs-blue-100); - --badge-danger-bg: light-dark( var(--bs-red-100), var(--bs-red-800)); - --badge-danger-selected-bg: light-dark( var(--bs-red-200), var(--bs-red-700)); - --badge-danger-color: light-dark( var(--bs-red-800), var(--bs-red-200)); + --badge-danger-bg: var(--bs-red-100); + --badge-danger-selected-bg: var(--bs-red-200); + --badge-danger-color: var(--bs-red-800); - --badge-info-color: light-dark(var(--bs-cyan-900), var(--bs-cyan-100)); - --badge-info-bg: light-dark(var(--bs-cyan-100), var(--bs-cyan-900)); - --badge-info-border: light-dark(var(--bs-cyan-300), var(--bs-cyan-700)); + --badge-info-color: var(--bs-cyan-900); + --badge-info-bg: var(--bs-cyan-100); + --badge-info-border: var(--bs-cyan-300); --badge-success-color: var(--success-text-dark); --badge-success-bg: var(--success-text-light); - --badge-warning-bg: light-dark(var(--bs-yellow-200), var(--bs-yellow-800)); - --badge-warning-hover-bg: light-dark(var(--bs-yellow-300), var(--bs-yellow-900)); - --badge-warning-selected-bg: light-dark(var(--bs-yellow-300), var(--bs-yellow-700)); - --badge-warning-color: light-dark(var(--bs-orange-750), var(--bs-yellow-200)); + --badge-warning-bg: var(--bs-yellow-200); + --badge-warning-hover-bg: var(--bs-yellow-300); + --badge-warning-selected-bg: var(--bs-yellow-300); + --badge-warning-color: var(--bs-orange-750); - --batch-item-attr-header-bg: light-dark(var(--bs-blue-100), var(--bs-blue-900-desat)); + --batch-item-attr-header-bg: var(--bs-blue-100); --grid-color: var(--bs-body-color); - --grid-borders: light-dark(rgba(0,0,0,0.125), #292929); + --grid-borders: rgba(0,0,0,0.125); + --grid-filter-active: var(--bs-blue-900-desat); + --grid-header-row: var(--bs-gray-100); + --grid-header-button: var(--bs-blue-700); + --grid-row-selected: #004085; + --grid-row-selected-bg: var(--bs-blue-100); + --grid-row-selected-border: var(--bs-blue-125); + --row-even-bg: var(--bs-body-bg-alt); + --modal-header-color: white; + --modal-header-bg: var(--bs-cyan-800); - --grid-filter-active: light-dark(var(--bs-blue-900-desat), var(--bs-gray-900)); - --grid-header-row: light-dark(var(--bs-gray-100), var(--bs-gray-050)); + --danger: var(--bs-red-600); + --danger-bg-hover: var(--bs-red-700); + --danger-color: var(--bs-red-700); + --danger-border: var(--bs-red-700); + --destroy-color: var(--bs-red-600); + --info: var(--bs-cyan-700); + --info-border: var(--bs-cyan-300); + --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1); + --info-hover: var(--bs-cyan-200); + --primary: var(--bs-blue-600); + --primary-border: var(--bs-blue-650); + --primary-focus-outline-rgb: var(--bs-blue-600-rgb); + --primary-hover: var(--bs-blue-650); + --primary-disabled: rgba(var(--bs-blue-600-rgb), 1); - --grid-row-selected: light-dark(#004085, var(--bs-blue-100)); - --grid-row-selected-bg: light-dark(var(--bs-blue-100), var(--bs-blue-900)); - --grid-row-selected-border: light-dark(var(--bs-blue-125), var(--bs-blue-800)); + --warning-color: var(--bs-yellow-500); + --warning-border: var(--bs-yellow-625); + --warning-border-hover: var(--bs-yellow-500); + --warning-shadow: rgba(var(--bs-yellow-400-rgba), 0.5); + + --secondary-bg: var(--bs-gray-300); + --btn-gray-bg: var(--bs-gray-200); + --btn-gray-bg-hover: var(--bs-gray-300); + --btn-gray-color: var(--bs-body-color); + --btn-gray-border: var(--bs-gray-400); + + --row-even-bg: var(--bs-body-bg-alt); + --modal-header-color: white; + --modal-header-bg: var(--bs-cyan-800); + --modal-body-bg: var(--bs-body-bg); + --popover-menu-hover: var(--bs-gray-100); + --popover-header-bg: var(--bs-gray-100); + --dropdown-menu-bg: white; + + --status-archived: var(--bs-gray-600); + --star-stroke: var(--bs-yellow-700); +} - --grid-header-button: light-dark(var(--bs-blue-700), var(--bs-blue-300)); - --danger: light-dark(var(--bs-red-600), var(--bs-red-800)); +/**********************/ +/* DARK MODE */ +/**********************/ +:root[data-bs-theme="dark"] { + --black: white; + --white: black; + --bs-white: black; + --bs-light: var(--bs-gray-850); + --bs-dark: var(--bs-gray-100); + --border: var(--bs-gray-700); + --border-thick: var(--bs-gray-600); + --inactive: var(--bs-gray-400); + --form-control-border: var(--bs-gray-700); + --form-check-border: var(--bs-gray-800); + + --bs-body-color: var(--bs-gray-400); + --bs-body-color-rgb: 222, 226, 230; + --bs-body-bg: var(--bs-gray-925); + --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color); + --bs-body-bg-alt: var(--bs-gray-900); + --bs-body-bg-highlight: var(--bs-gray-850); + --bs-text-highlight: var(--bs-gray-500); + --bs-card-bg: var(--bs-gray-925); + + --evergreen: var(--eg-green-200); /* brand color */ + + --success: #002C1F; + --success-color: var(--eg-green-100); + --success-hover-color: var(--eg-green-050); + --success-border: #157146; + --success-hover: #00593d; + --success-disabled: #779788; /* desaturated */ + --success-disabled-rgb: 68, 135, 104; + --success-text-light: #003b35; + --success-text-light-rgb: 223, 240, 216; + --success-text-dark: #dff0d8; + + --form-success-bg: var(--eg-green-900); + /* used in both nav and splash components: */ + --staff-navbar-a: var(--bs-gray-900); + --staff-navbar-b: var(--bs-gray-975); + + --badge-color: var(--bs-blue-200); + --badge-bg: var(--bs-blue-900); + + --badge-danger-bg: var(--bs-red-800); + --badge-danger-selected-bg: var(--bs-red-700); + --badge-danger-color: var(--bs-red-200); + + --badge-info-color: var(--bs-cyan-100); + --badge-info-bg: var(--bs-cyan-900); + --badge-info-border: var(--bs-cyan-700); + + --badge-success-color: var(--success-text-dark); + --badge-success-bg: var(--success-text-light); + + --badge-warning-bg: var(--bs-yellow-800); + --badge-warning-hover-bg: var(--bs-yellow-900); + --badge-warning-selected-bg: var(--bs-yellow-700); + --badge-warning-color: var(--bs-yellow-200); + + --batch-item-attr-header-bg: var(--bs-blue-900-desat); + + --grid-color: var(--bs-body-color); + --grid-borders: #292929; + + --grid-filter-active: var(--bs-gray-900); + --grid-header-row: var(--bs-gray-050); + + --grid-row-selected: var(--bs-blue-100); + --grid-row-selected-bg: var(--bs-blue-900); + --grid-row-selected-border: var(--bs-blue-800); + + --grid-header-button: var(--bs-blue-300); + + --danger: var(--bs-red-800); --danger-bg-hover: var(--bs-red-700); - --danger-color: light-dark(var(--bs-red-700), var(--bs-red-300)); - --danger-border: light-dark(var(--bs-red-700), var(--bs-red-600)); - --info: light-dark(var(--bs-cyan-700), var(--bs-cyan-300)); - --info-border: light-dark(var(--bs-cyan-300), var(--bs-cyan-700)); - --info-disabled: light-dark(rgba(var(--bs-cyan-700-disabled-rgb), 1), rgba(var(--bs-cyan-700-disabled-rgb), 0.7)); - --info-hover: light-dark(var(--bs-cyan-200), var(--bs-cyan-750)); - --primary: light-dark(var(--bs-blue-600), var(--bs-blue-300)); - --primary-border: light-dark(var(--bs-blue-650), var(--bs-blue-400) ); + --danger-color: var(--bs-red-300); + --danger-border: var(--bs-red-600); + --destroy-color: var(--bs-red-200); + --info: var(--bs-cyan-300); + --info-border: var(--bs-cyan-700); + --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1); + --info-hover: var(--bs-cyan-750); + --primary: var(--bs-blue-300); + --primary-border: var(--bs-blue-400); --primary-focus-outline-rgb: var(--bs-blue-600-rgb); - --primary-hover: light-dark(var(--bs-blue-650), var(--bs-blue-400)); - --primary-disabled: light-dark(rgba(var(--bs-blue-600-rgb), 1.0), rgba(var(--bs-blue-300-rgb), 0.7)); + --primary-hover: var(--bs-blue-400); + --primary-disabled: rgba(var(--bs-blue-300-rgb), 0.6); - --warning-color: light-dark(var(--bs-yellow-500), var(--bs-yellow-200)); - --warning-border: light-dark(var(--bs-yellow-625), var(--bs-yellow-400)); + --warning-color: var(--bs-yellow-200); + --warning-border: var(--bs-yellow-400); --warning-border-hover: var(--bs-yellow-500); --warning-shadow: var(--eg-yellow-2); - --btn-gray-bg: light-dark(var(--bs-gray-200), var(--bs-gray-900)); - --btn-gray-bg-hover: light-dark(var(--bs-gray-300), var(--bs-gray-800)); + --secondary-bg: var(--bs-gray-700); + --btn-gray-bg: var(--bs-gray-900); + --btn-gray-bg-hover: var(--bs-gray-800); --btn-gray-color: var(--bs-body-color); - --btn-gray-border: light-dark(var(--bs-gray-400), var(--bs-gray-800)); + --btn-gray-border: var(--bs-gray-800); --row-even-bg: var(--bs-body-bg-alt); --modal-header-color: white; --modal-header-bg: var(--bs-cyan-800); - --modal-body-bg: light-dark(var(--bs-body-bg), var(--bs-body-bg-alt)); - --popover-menu-hover: light-dark(var(--bs-gray-100), var(--bs-gray-900)); - --popover-header-bg: light-dark(var(--bs-gray-100), var(--bs-gray-900)); - --dropdown-menu-bg: light-dark(white, var(--bs-gray-900)); + --modal-body-bg: var(--bs-body-bg-alt); + --popover-menu-hover: var(--bs-gray-900); + --popover-header-bg: var(--bs-gray-900); + --dropdown-menu-bg: var(--bs-gray-900); - --status-archived: light-dark(var(--bs-gray-600), var(--bs-gray-500)); - - --common-form-bg: var(--bs-body-bg-alt); - --common-form-border: var(--border); - --form-check-border: light-dark(var(--bs-gray-300), var(--bs-gray-800)); - --form-valid: var(--bs-green-600); - --form-invalid: var(--bs-red-600); -} \ No newline at end of file + --status-archived: var(--bs-gray-500); + --star-stroke: transparent; +} ----------------------------------------------------------------------- Summary of changes: Open-ILS/src/eg2/angular.json | 4 +- .../share/accesskey/accesskey-info.component.css | 4 +- .../share/catalog/bib-display-field.component.css | 24 +- .../daterange-select.component.css | 10 +- .../src/app/share/grid/grid-toolbar.component.css | 11 +- .../src/eg2/src/app/share/grid/grid.component.css | 2 +- .../src/eg2/src/app/share/tree/tree.component.css | 19 +- .../app/share/util/credential-input.component.html | 2 +- .../staff/acq/lineitem/lineitem-list.component.css | 28 +- .../eg2/src/app/staff/acq/po/summary.component.css | 4 +- .../app/staff/cat/authority/manage.component.ts | 5 +- .../app/staff/cat/volcopy/vol-edit.component.css | 6 +- .../staff/catalog/record/holdings.component.css | 11 +- .../app/staff/catalog/record/record.component.css | 6 +- .../app/staff/catalog/result/record.component.css | 4 +- .../src/app/staff/circ/patron/bills.component.css | 8 +- .../src/app/staff/circ/patron/patron.component.css | 45 ++- Open-ILS/src/eg2/src/app/staff/mfa.component.css | 22 -- Open-ILS/src/eg2/src/app/staff/nav.component.css | 40 ++- Open-ILS/src/eg2/src/app/staff/nav.component.ts | 12 + .../app/staff/share/marc-edit/editor.component.css | 70 +++-- .../marc-edit/fixed-fields-editor.component.css | 9 +- .../staff/share/marc-edit/rich-editor-colors.css | 15 +- .../share/marc-edit/rich-editor.component.css | 102 +++++-- .../app/staff/share/patron/summary.component.css | 112 ++++++-- .../src/eg2/src/app/staff/splash.component.css | 13 +- .../src/eg2/src/app/staff/splash.component.html | 18 -- Open-ILS/src/eg2/src/assets/css/dark.css | 107 +++++++ Open-ILS/src/eg2/src/assets/css/light.css | 112 ++++++++ Open-ILS/src/eg2/src/assets/css/styles-colors.css | 162 +++++++++++ Open-ILS/src/eg2/src/styles-colors.css | 316 ++++++++++++++------- Open-ILS/src/eg2/src/styles.css | 99 ++++--- .../staff/admin/workstation/t_stored_prefs.tt2 | 2 +- Open-ILS/src/templates/staff/base.tt2 | 4 +- Open-ILS/src/templates/staff/base_js.tt2 | 3 +- Open-ILS/src/templates/staff/css/admin.css.tt2 | 6 +- Open-ILS/src/templates/staff/css/circ.css.tt2 | 24 +- Open-ILS/src/templates/staff/css/dark.css.tt2 | 107 +++++++ Open-ILS/src/templates/staff/css/light.css.tt2 | 112 ++++++++ Open-ILS/src/templates/staff/css/nav.css.tt2 | 33 ++- Open-ILS/src/templates/staff/css/style.css.tt2 | 278 ++++++++++++------ .../src/templates/staff/css/styles-colors.css.tt2 | 168 ++--------- 42 files changed, 1566 insertions(+), 573 deletions(-) create mode 100644 Open-ILS/src/eg2/src/assets/css/dark.css create mode 100644 Open-ILS/src/eg2/src/assets/css/light.css create mode 100644 Open-ILS/src/eg2/src/assets/css/styles-colors.css create mode 100644 Open-ILS/src/templates/staff/css/dark.css.tt2 create mode 100644 Open-ILS/src/templates/staff/css/light.css.tt2 hooks/post-receive -- Evergreen ILS