From 610ad0d613513d8f83eb05a0ba099700846af7c6 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Wed, 14 Jun 2023 12:53:48 +0100 Subject: [PATCH] Updated fonts to be defined via CSS variables Exports system remains separate due to lacking css variable support. --- resources/sass/_codemirror.scss | 4 ++++ resources/sass/_components.scss | 2 +- resources/sass/_text.scss | 9 +++++---- resources/sass/_tinymce.scss | 2 +- resources/sass/_variables.scss | 36 +++++++++++++++++++-------------- 5 files changed, 32 insertions(+), 21 deletions(-) diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss index 50f5bdc10..c4b0e2e89 100644 --- 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 // 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 54c9434c4..dab74341a 100644 --- 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 adfc87ad1..b00f51cd7 100644 --- 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 7170f8101..13b6f676b 100644 --- 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 10329c700..5892237d9 100644 --- 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