CSS: Updated status colors to be CSS variables, Added dark variants

[bookstack] / resources / sass / _variables.scss

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;