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.

diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss
index 1d9bfc272e9b806d69b6206f729ab3e6478c1d52..a1268e6b471ca97620eda28c32f68bedb67773ba 100644 (file)
--- 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 0fd347cf893a3bc37f1f5379e849aa6140f552a9..50f5bdc10e0f9f356f4f19fd9be2759ef3e85f97 100644 (file)
--- 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 aff9ff6d05917ee3722483f045245832240000fc..c77c1d8b3880ea53d55a9accf5169e8cedeb206e 100644 (file)
--- 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 321c26e881a00c8c6113403c5a7e644db0ebd052..54c9434c4a8e92b8a89b532d569461a44724b899 100644 (file)
--- 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 5276bb566b0c8839a58376017fa79fed23166638..4722d9aa10f254398c930b03c931a4975bd4ecda 100644 (file)
--- 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 aac9223f9ff4e268155a1c9106758b4ae0524a82..10329c700f4b3cdf480804d8cf69070f90e579fe 100644 (file)
--- 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;