]> BookStack Code Mirror - bookstack/commitdiff
projects / bookstack / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side (parent: 56a40f1)
Updated fonts to be defined via CSS variables
authorDan Brown <redacted>
Wed, 14 Jun 2023 11:53:48 +0000 (12:53 +0100)
committerDan Brown <redacted>
Wed, 14 Jun 2023 11:53:48 +0000 (12:53 +0100)
Exports system remains separate due to lacking css variable support.

resources/sass/_codemirror.scss patch | blob | history
resources/sass/_components.scss patch | blob | history
resources/sass/_text.scss patch | blob | history
resources/sass/_tinymce.scss patch | blob | history
resources/sass/_variables.scss patch | blob | history

diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss
index 50f5bdc10e0f9f356f4f19fd9be2759ef3e85f97..c4b0e2e8958635b15aec5ff66c288d642f0f0108 100644 (file)
--- a/resources/sass/_codemirror.scss
+++ b/resources/sass/_codemirror.scss
@@ -14,6 +14,10 @@
   border-radius: 4px;
 }
 
+.cm-editor .cm-line, .cm-editor .cm-gutter {
+  font-family: var(--font-code);
+}
+
 // Manual dark-mode definition so that it applies to code blocks within the shadow
 // dom which are used within the WYSIWYG editor, as the .dark-mode on the parent
 // <html> node are not applies so instead we have the class on the parent element.
diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 54c9434c4a8e92b8a89b532d569461a44724b899..dab74341a7a2b26a30cea253871cb58202de98b6 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -574,7 +574,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   cursor: pointer;
   width: 100%;
   text-align: left;
-  font-family: $mono;
+  font-family: var(--font-code);
   font-size: 0.7rem;
   padding-left: 24px + $-xs;
   &:hover, &.active {
diff --git a/resources/sass/_text.scss b/resources/sass/_text.scss
index adfc87ad15a580345aca13cac6ca4fb231ac4372..b00f51cd7ff83578d4ba23542aaf91560ce88a64 100644 (file)
--- a/resources/sass/_text.scss
+++ b/resources/sass/_text.scss
@@ -3,10 +3,10 @@
  */
 
 body, button, input, select, label, textarea {
-  font-family: $text;
+  font-family: var(--font-body);
 }
-.Codemirror, pre, #markdown-editor-input, .text-mono, .code-base {
-  font-family: $mono;
+pre, #markdown-editor-input, .text-mono, .code-base {
+  font-family: var(--font-code);
 }
 
 /*
@@ -42,6 +42,7 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 400;
   position: relative;
   display: block;
+  font-family: var(--font-heading);
   @include lightDark(color, #222, #BBB);
   .subheader {
     font-size: 0.5em;
@@ -226,7 +227,7 @@ blockquote {
 }
 
 .text-mono {
-  font-family: $mono;
+  font-family: var(--font-code);
 }
 
 .text-uppercase {
diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss
index 7170f8101db3c8b8594bdab3179a8ef310fdc594..13b6f676b695380b4e4833d50e4c223f4691a4ab 100644 (file)
--- a/resources/sass/_tinymce.scss
+++ b/resources/sass/_tinymce.scss
@@ -110,7 +110,7 @@ body.page-content.mce-content-body  {
   border-left: 3px solid currentColor !important;
 }
 .tox-menu .tox-collection__item[title^="<"] > div > div {
-  font-family: $mono !important;
+  font-family: var(--font-code) !important;
   border: 1px solid #DDD !important;
   background-color: #EEE !important;
   padding: 4px 6px !important;
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index 10329c700f4b3cdf480804d8cf69070f90e579fe..5892237d91473321d7a83cd7cf6fa3865a9d2ccb 100644 (file)
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -27,11 +27,11 @@ $-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;
 
@@ -45,7 +45,25 @@ $negative-dark: #e85c5b;
 $info-dark: #0288D1;
 $warning-dark: #de8a5a;
 
+// Text colours
+$text-dark: #444;
+
+// Shadows
+$bs-light: 0 0 4px 1px #CCC;
+$bs-dark: 0 0 4px 1px rgba(0, 0, 0, 0.5);
+$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
+$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-heading: #{$font-body};
+  --font-code: #{$font-mono};
+
+
   --color-primary: #206ea7;
   --color-primary-light: rgba(32,110,167,0.15);
   --color-link: #206ea7;
@@ -74,16 +92,4 @@ $warning-dark: #de8a5a;
 }
 :root:not(.dark-mode) {
   color-scheme: only light;
-}
-
-// Text colours
-$text-dark: #444;
-
-// Shadows
-$bs-light: 0 0 4px 1px #CCC;
-$bs-dark: 0 0 4px 1px rgba(0, 0, 0, 0.5);
-$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
-$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);
+}
\ No newline at end of file
The core source code for the BookStack project.