X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/e2fa6d83c6828b54bf12d9b4265c57c6b78369e7..refs/pull/5280/head:/resources/sass/_variables.scss

diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index 6b57147ef..35586bf58 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -2,6 +2,7 @@
 ///////////////
 
 // Screen breakpoints
+$xxxl: 1700px;
 $xxl: 1400px;
 $xl: 1100px;
 $l: 1000px;
@@ -27,30 +28,23 @@ $-xxs: 3px;
 $spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl), ('auto', auto));
 
 // Fonts
-$text: -apple-system, BlinkMacSystemFont,
+$font-body: -apple-system, BlinkMacSystemFont,
 "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell",
 "Fira Sans", "Droid Sans", "Helvetica Neue",
 sans-serif;
-$mono: "Lucida Console", "DejaVu Sans Mono", "Ubuntu Mono", Monaco, monospace;
+$font-mono: "Lucida Console", "DejaVu Sans Mono", "Ubuntu Mono", Monaco, monospace;
 $fs-m: 14px;
 $fs-s: 12px;
 
 // Colours
-:root {
-  --color-primary: #206ea7;
-  --color-primary-light: rgba(32,110,167,0.15);
-
-  --color-page: #206ea7;
-  --color-page-draft: #7e50b1;
-  --color-chapter: #af4d0d;
-  --color-book: #077b70;
-  --color-bookshelf: #a94747;
-}
-
 $positive: #0f7d15;
 $negative: #ab0f0e;
 $info: #0288D1;
 $warning: #cf4d03;
+$positive-dark: #4aa850;
+$negative-dark: #e85c5b;
+$info-dark: #0288D1;
+$warning-dark: #de8a5a;
 
 // Text colours
 $text-dark: #444;
@@ -63,3 +57,38 @@ $bs-large: 0 1px 6px 1px rgba(22, 22, 22, 0.2);
 $bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
 $bs-card-dark: 0 1px 6px -1px rgba(0, 0, 0, 0.5);
 $bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);
+
+// CSS root variables
+:root {
+  --font-body: #{$font-body};
+  --font-code: #{$font-mono};
+
+  --color-primary: #206ea7;
+  --color-primary-light: rgba(32,110,167,0.15);
+  --color-link: #206ea7;
+
+  --color-page: #206ea7;
+  --color-page-draft: #7e50b1;
+  --color-chapter: #af4d0d;
+  --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;
+}
\ No newline at end of file