From eceb4268310bc4f6dc94c15d4a1df320ac211e0b Mon Sep 17 00:00:00 2001 From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com> Date: Thu, 20 Oct 2022 09:49:35 +0200 Subject: [PATCH] Prevent multiple inclusion of variables in CSS files --- qt/aqt/BUILD.bazel | 2 +- qt/aqt/data/web/css/BUILD.bazel | 2 +- qt/aqt/data/web/css/deckbrowser.scss | 18 ++++---- qt/aqt/data/web/css/reviewer-bottom.scss | 3 +- qt/aqt/data/web/css/toolbar.scss | 2 + qt/tools/extract_sass_vars.py | 8 ++-- sass/BUILD.bazel | 4 +- sass/{_colors.scss => _color-palette.scss} | 2 +- sass/_root-vars.scss | 34 +++++++++++++++ sass/_vars.scss | 46 +++----------------- sass/base.scss | 20 +++++---- ts/change-notetype/change-notetype-base.scss | 1 - ts/components/Popover.svelte | 14 +++--- ts/editor/legacy.scss | 1 - ts/fields/fields-base.scss | 1 - ts/import-csv/import-csv-base.scss | 1 - ts/tag-editor/AutocompleteItem.svelte | 1 - 17 files changed, 80 insertions(+), 80 deletions(-) rename sass/{_colors.scss => _color-palette.scss} (99%) create mode 100644 sass/_root-vars.scss diff --git a/qt/aqt/BUILD.bazel b/qt/aqt/BUILD.bazel index d95f5bbb2..74b55ae52 100644 --- a/qt/aqt/BUILD.bazel +++ b/qt/aqt/BUILD.bazel @@ -14,7 +14,7 @@ genrule( genrule( name = "extract_sass_vars", srcs = [ - "//sass:_vars.css", + "//sass:_root-vars.css", ], outs = [ "colors.py", diff --git a/qt/aqt/data/web/css/BUILD.bazel b/qt/aqt/data/web/css/BUILD.bazel index 4067c5502..abc01cd03 100644 --- a/qt/aqt/data/web/css/BUILD.bazel +++ b/qt/aqt/data/web/css/BUILD.bazel @@ -9,7 +9,7 @@ compile_sass( group = "css_local", visibility = ["//visibility:private"], deps = [ - "//sass:vars_lib", + "//sass:base_lib", "//sass:buttons_lib", "//sass:card_counts_lib", "//sass:scrollbar_lib", diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss index 4d424eddf..f0d805df5 100644 --- a/qt/aqt/data/web/css/deckbrowser.scss +++ b/qt/aqt/data/web/css/deckbrowser.scss @@ -1,11 +1,11 @@ /* Copyright: Ankitects Pty Ltd and contributors * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ - -@use "sass/vars"; +@use "sass/base"; +@use "sass/vars" as *; @use "sass/card-counts"; a.deck { - color: var(--fg); + color: color(fg); text-decoration: none; min-width: 5em; display: inline-block; @@ -16,7 +16,7 @@ a.deck:hover { } tr.deck td { - border-bottom: 1px solid var(--border-subtle); + border-bottom: 1px solid color(border-subtle); } tr.top-level-drag-row td { @@ -28,7 +28,7 @@ td { } tr.drag-hover td { - border-bottom: 1px solid var(--border); + border-bottom: 1px solid color(border); } body { @@ -37,7 +37,7 @@ body { } .current { - background-color: var(--shadow-subtle); + background-color: color(shadow-subtle); } .decktd { @@ -56,14 +56,14 @@ body { } .collapse { - color: var(--fg); + color: color(fg); text-decoration: none; display: inline-block; width: 1em; } .filtered { - color: var(--accent-link) !important; + color: color(accent-link) !important; } .gears { @@ -81,7 +81,7 @@ body { } .callout { - background: var(--border); + background: color(border); padding: 1em; margin: 1em; diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss index a62907826..516d39e7e 100644 --- a/qt/aqt/data/web/css/reviewer-bottom.scss +++ b/qt/aqt/data/web/css/reviewer-bottom.scss @@ -1,11 +1,12 @@ /* Copyright: Ankitects Pty Ltd and contributors * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ +@use "sass/base"; @use "vars"; @use "sass/card-counts"; :root { - --focus-color: #{vars.palette-of(button-focus)}; + --focus-color: #{vars.palette-of(border-focus)}; .isMac { --focus-color: rgba(0 103 244 / 0.247); diff --git a/qt/aqt/data/web/css/toolbar.scss b/qt/aqt/data/web/css/toolbar.scss index 351b7b4e5..64458043e 100644 --- a/qt/aqt/data/web/css/toolbar.scss +++ b/qt/aqt/data/web/css/toolbar.scss @@ -1,6 +1,8 @@ /* Copyright: Ankitects Pty Ltd and contributors * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ +@use "sass/base"; + #header { padding: 3px; font-weight: bold; diff --git a/qt/tools/extract_sass_vars.py b/qt/tools/extract_sass_vars.py index 7d59fe878..2019359d5 100644 --- a/qt/tools/extract_sass_vars.py +++ b/qt/tools/extract_sass_vars.py @@ -7,7 +7,7 @@ import re import sys # bazel genrule "srcs" -vars_css = sys.argv[1] +root_vars_css = sys.argv[1] # bazel genrule "outs" colors_py = sys.argv[2] @@ -17,7 +17,7 @@ colors = {} props = {} reached_props = False -for line in re.split(r"[;\{\}]", open(vars_css).read()): +for line in re.split(r"[;\{\}]", open(root_vars_css).read()): line = line.strip() if not line: @@ -54,7 +54,7 @@ copyright_notice = """\ with open(colors_py, "w") as buf: buf.write(copyright_notice) - buf.write("# this file is auto-generated from _vars.scss and _colors.scss\n") + buf.write("# this file is auto-generated from _root-vars.scss\n") for color, val in colors.items(): day = val[0] @@ -66,7 +66,7 @@ with open(colors_py, "w") as buf: with open(props_py, "w") as buf: buf.write(copyright_notice) - buf.write("# this file is auto-generated from _vars.scss\n") + buf.write("# this file is auto-generated from _root-vars.scss\n") for prop, val in props.items(): day = val[0] diff --git a/sass/BUILD.bazel b/sass/BUILD.bazel index 9171d5f9d..91a9c434b 100644 --- a/sass/BUILD.bazel +++ b/sass/BUILD.bazel @@ -17,7 +17,7 @@ sass_library( sass_library( name = "vars_lib", srcs = [ - "_colors.scss", + "_color-palette.scss", "_functions.scss", "_vars.scss", ], @@ -103,7 +103,7 @@ sass_library( ) compile_sass( - srcs = ["_vars.scss"], + srcs = ["_root-vars.scss"], group = "vars_css", visibility = ["//visibility:public"], ) diff --git a/sass/_colors.scss b/sass/_color-palette.scss similarity index 99% rename from sass/_colors.scss rename to sass/_color-palette.scss index 17226fbdf..9c2c7e9d4 100644 --- a/sass/_colors.scss +++ b/sass/_color-palette.scss @@ -5,7 +5,7 @@ * custom gray, rest from Tailwind CSS v3 palette * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ -$colors: ( +$color-palette: ( lightgray: ( 0: #fcfcfc, 1: #fafafa, diff --git a/sass/_root-vars.scss b/sass/_root-vars.scss new file mode 100644 index 000000000..6c0f90c64 --- /dev/null +++ b/sass/_root-vars.scss @@ -0,0 +1,34 @@ +/* Copyright: Ankitects Pty Ltd and contributors + * License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html */ + +@use "sass:map"; +@use "vars" as *; +@use "functions" as *; + +/*! colors */ +:root { + $colors: map.get($vars, colors); + @each $name, $val in create-vars-from-map($colors, light) { + #{$name}: #{$val}; + } + color-scheme: light; + &.night-mode { + @each $name, $val in create-vars-from-map($colors, dark) { + #{$name}: #{$val}; + } + color-scheme: dark; + } +} + +/*! props */ +:root { + $props: map.get($vars, props); + @each $name, $val in create-vars-from-map($props, light) { + #{$name}: #{$val}; /*! #{$name} */ + } + &.night-mode { + @each $name, $val in create-vars-from-map($props, dark) { + #{$name}: #{$val}; + } + } +} diff --git a/sass/_vars.scss b/sass/_vars.scss index 5e4c8f2a1..559664134 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -4,10 +4,10 @@ @use "sass:map"; @use "sass:color"; @use "functions" as *; -@use "colors" as *; +@use "color-palette" as *; @function palette($key, $shade) { - $color: map.get($colors, $key); + $color: map.get($color-palette, $key); @return map.get($color, $shade); } @@ -290,6 +290,10 @@ $vars: ( ), ); +@function prop($keyword) { + @return var(--#{$keyword}); +} + @function color($keyword) { @return var(--#{$keyword}); } @@ -298,41 +302,3 @@ $vars: ( $colors: map.get($vars, colors); @return get-value-from-map($colors, $keyword, $theme); } - -@function prop($keyword) { - @return var(--#{$keyword}); -} - -/*! colors */ -:root { - $colors: map.get($vars, colors); - @each $name, $val in create-vars-from-map($colors, light) { - #{$name}: #{$val}; - } - color-scheme: light; - &.night-mode { - @each $name, $val in create-vars-from-map($colors, dark) { - #{$name}: #{$val}; - } - color-scheme: dark; - } -} - -/*! props */ -:root { - $props: map.get($vars, props); - @each $name, $val in create-vars-from-map($props, default) { - #{$name}: #{$val}; - } - @each $name, $val in create-vars-from-map($props, light) { - #{$name}: #{$val}; - } - &.night-mode { - @each $name, $val in create-vars-from-map($props, default) { - #{$name}: #{$val}; - } - @each $name, $val in create-vars-from-map($props, dark) { - #{$name}: #{$val}; - } - } -} diff --git a/sass/base.scss b/sass/base.scss index e01bbb45f..711e02603 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -1,11 +1,12 @@ -@use "vars"; +@use "vars" as *; +@use "root-vars"; @use "scrollbar"; @use "button-mixins" as button; -$body-color: var(--fg); -$body-bg: var(--canvas); +$body-color: color(fg); +$body-bg: color(canvas); -$link-hover-color: var(--accent-link); +$link-hover-color: color(accent-link); $link-hover-decoration: none; $utilities: ( @@ -53,6 +54,7 @@ body { button { /* override transition for instant hover response */ transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; + border-radius: prop(border-radius); } pre, @@ -82,12 +84,12 @@ samp { } .form-select:focus { outline: none; - border: 1px solid var(--border-focus); + border: 1px solid color(border-focus); box-shadow: none !important; } .night-mode .form-select:disabled { - background-color: var(--fg-disabled); + background-color: color(fg-disabled); } .reduced-motion * { @@ -104,10 +106,10 @@ select { &:focus, &.focus { - border: 1px solid var(--border-focus); + border: 1px solid color(border-focus); } option { - background: var(--canvas-elevated); - color: var(--fg); + background: color(canvas-elevated); + color: color(fg); } } diff --git a/ts/change-notetype/change-notetype-base.scss b/ts/change-notetype/change-notetype-base.scss index a03b67bf1..2d930a8b1 100644 --- a/ts/change-notetype/change-notetype-base.scss +++ b/ts/change-notetype/change-notetype-base.scss @@ -1,4 +1,3 @@ -@use "sass/vars"; @use "sass/bootstrap-dark"; @import "sass/base"; diff --git a/ts/components/Popover.svelte b/ts/components/Popover.svelte index 4763635f2..31615d331 100644 --- a/ts/components/Popover.svelte +++ b/ts/components/Popover.svelte @@ -20,10 +20,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html