From f7ad387a10a898145845221ac3fd27df1f840c12 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Tue, 13 Jun 2023 15:52:33 +0100 Subject: [PATCH] CSS: Updated status colors to be CSS variables, Added dark variants Needed some level of harcoding though due to callouts using colors, which can't be css colors as DOMPDF won't understand these. Use css variables elsewhere and added new dark variants to fit a bit better. --- resources/sass/_blocks.scss | 26 +++++++++++++------------- resources/sass/_codemirror.scss | 2 +- resources/sass/_colors.scss | 12 ++++++------ resources/sass/_components.scss | 14 +++++++------- resources/sass/_forms.scss | 4 ++-- resources/sass/_variables.scss | 23 ++++++++++++++++++----- 6 files changed, 47 insertions(+), 34 deletions(-) diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss index 1d9bfc272..a1268e6b4 100644 --- a/resources/sass/_blocks.scss +++ b/resources/sass/_blocks.scss @@ -3,7 +3,7 @@ * Callouts */ .callout { - border-inline-start: 3px solid #BBB; + border-left: 3px solid #BBB; background-color: #EEE; padding: $-s $-s $-s $-xl; display: block; @@ -24,30 +24,30 @@ opacity: 0.8; } &.success { - border-left-color: $positive; - @include lightDark(background-color, lighten($positive, 68%), darken($positive, 22%)); - @include lightDark(color, darken($positive, 16%), lighten($positive, 5%)); + @include lightDark(border-left-color, $positive, $positive-dark); + @include lightDark(background-color, lighten($positive, 68%), darken($positive-dark, 36%)); + @include lightDark(color, darken($positive, 16%), $positive-dark); } &.success:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+"); } &.danger { - border-left-color: $negative; - @include lightDark(background-color, lighten($negative, 56%), darken($negative, 30%)); - @include lightDark(color, darken($negative, 20%), lighten($negative, 5%)); + @include lightDark(border-left-color, $negative, $negative-dark); + @include lightDark(background-color, lighten($negative, 56%), darken($negative-dark, 55%)); + @include lightDark(color, darken($negative, 20%), $negative-dark); } &.danger:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg=="); } &.info { - border-left-color: $info; - @include lightDark(color, darken($info, 20%), lighten($info, 10%)); - @include lightDark(background-color, lighten($info, 50%), darken($info, 35%)); + @include lightDark(border-left-color, $info, $info-dark); + @include lightDark(color, darken($info, 20%), $info-dark); + @include lightDark(background-color, lighten($info, 50%), darken($info-dark, 34%)); } &.warning { - border-left-color: $warning; - @include lightDark(background-color, lighten($warning, 50%), darken($warning, 36%)); - @include lightDark(color, darken($warning, 20%), $warning); + @include lightDark(border-left-color, $warning, $warning-dark); + @include lightDark(background-color, lighten($warning, 50%), darken($warning-dark, 50%)); + @include lightDark(color, darken($warning, 20%), $warning-dark); } &.warning:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4="); diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss index 0fd347cf8..50f5bdc10 100644 --- a/resources/sass/_codemirror.scss +++ b/resources/sass/_codemirror.scss @@ -50,7 +50,7 @@ fill: currentColor; } &.success { - background: $positive; + background: var(--color-positive); color: #FFF; } &:focus { diff --git a/resources/sass/_colors.scss b/resources/sass/_colors.scss index aff9ff6d0..c77c1d8b3 100644 --- a/resources/sass/_colors.scss +++ b/resources/sass/_colors.scss @@ -22,18 +22,18 @@ * Status text colors */ .text-pos, .text-pos:hover, .text-pos-hover:hover { - color: $positive !important; - fill: $positive !important; + color: var(--color-positive) !important; + fill: var(--color-positive) !important; } .text-warn, .text-warn:hover, .text-warn-hover:hover { - color: $warning !important; - fill: $warning !important; + color: var(--color-warning) !important; + fill: var(--color-warning) !important; } .text-neg, .text-neg:hover, .text-neg-hover:hover { - color: $negative !important; - fill: $negative !important; + color: var(--color-negative) !important; + fill: var(--color-negative) !important; } /* diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index 321c26e88..54c9434c4 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -46,13 +46,13 @@ } } &.pos { - color: $positive; + color: var(--color-positive); } &.neg { - color: $negative; + color: var(--color-negative); } &.warning { - color: $warning; + color: var(--color-warning); } &.showing { transform: translateX(0); @@ -334,10 +334,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { line-height: 1.2; } .dropzone-file-item-status[data-status="success"] { - color: $positive; + color: var(--color-positive); } .dropzone-file-item-status[data-status="error"] { - color: $negative; + color: var(--color-negative); } .dropzone-file-item-status[data-status] + .dropzone-file-item-label { display: none; @@ -921,10 +921,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { display: inline-block; } .status-indicator-active { - background-color: $positive; + background-color: var(--color-positive); } .status-indicator-inactive { - background-color: $negative; + background-color: var(--color-negative); } .shortcut-container { diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss index 5276bb566..4722d9aa1 100644 --- a/resources/sass/_forms.scss +++ b/resources/sass/_forms.scss @@ -13,10 +13,10 @@ max-width: 100%; &.neg, &.invalid { - border: 1px solid $negative; + border: 1px solid var(--color-negative); } &.pos, &.valid { - border: 1px solid $positive; + border: 1px solid var(--color-positive); } &.disabled, &[disabled] { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==); diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss index aac9223f9..10329c700 100644 --- a/resources/sass/_variables.scss +++ b/resources/sass/_variables.scss @@ -36,6 +36,15 @@ $fs-m: 14px; $fs-s: 12px; // Colours +$positive: #0f7d15; +$negative: #ab0f0e; +$info: #0288D1; +$warning: #cf4d03; +$positive-dark: #4aa850; +$negative-dark: #e85c5b; +$info-dark: #0288D1; +$warning-dark: #de8a5a; + :root { --color-primary: #206ea7; --color-primary-light: rgba(32,110,167,0.15); @@ -47,22 +56,26 @@ $fs-s: 12px; --color-book: #077b70; --color-bookshelf: #a94747; + --color-positive: #{$positive}; + --color-negative: #{$negative}; + --color-info: #{$info}; + --color-warning: #{$warning}; + --bg-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='19' height='19' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(143)'%3E%3Crect width='100%25' height='100%25' fill='rgba(42, 67, 101,0)'/%3E%3Cpath d='M-10 30h60v20h-60zM-10-10h60v20h-60' fill='rgba(26, 32, 44,0)'/%3E%3Cpath d='M-10 10h60v20h-60zM-10-30h60v20h-60z' fill='rgba(0, 0, 0,0.05)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E"); } :root.dark-mode { --bg-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='19' height='19' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(143)'%3E%3Crect width='100%25' height='100%25' fill='rgba(42, 67, 101,0)'/%3E%3Cpath d='M-10 30h60v20h-60zM-10-10h60v20h-60' fill='rgba(26, 32, 44,0)'/%3E%3Cpath d='M-10 10h60v20h-60zM-10-30h60v20h-60z' fill='rgba(255, 255, 255,0.05)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E"); color-scheme: only dark; + + --color-positive: #4aa850; + --color-negative: #e85c5b; + --color-warning: #de8a5a; } :root:not(.dark-mode) { color-scheme: only light; } -$positive: #0f7d15; -$negative: #ab0f0e; -$info: #0288D1; -$warning: #cf4d03; - // Text colours $text-dark: #444;