From 082e3b51a1031cb402dd0119754662b9e30c74bb Mon Sep 17 00:00:00 2001 From: Deimos Date: Mon, 28 Sep 2020 17:03:02 -0600 Subject: [PATCH] CSS: replace some custom props with native values This isn't perfectly equivalent in some cases, but it's a barely noticeable difference, and it's nice to not have all of these extra custom properties like "--button-darkened-8-color" for an extremely niche usage. --- tildes/scss/modules/_btn.scss | 12 ++++----- tildes/scss/modules/_topic.scss | 3 +-- tildes/scss/themes/_default.scss | 4 +-- tildes/scss/themes/_theme_mixins.scss | 39 +++++++++++---------------- 4 files changed, 22 insertions(+), 36 deletions(-) diff --git a/tildes/scss/modules/_btn.scss b/tildes/scss/modules/_btn.scss index 9d32f26..3d1ef53 100644 --- a/tildes/scss/modules/_btn.scss +++ b/tildes/scss/modules/_btn.scss @@ -105,7 +105,7 @@ &.btn-used:hover { background-color: $color; - color: var(--white-color); + color: #fff; } } @@ -205,8 +205,7 @@ border-color: var(--button-color); &:hover { - background-color: var(--button-darkened-10-color); - border-color: var(--button-darkened-10-color); + filter: brightness(90%); } &:visited { @@ -216,11 +215,10 @@ .btn-used { color: var(--button-used-color); - border-color: var(--button-used-darkened-3-color); + border-color: var(--button-used-color); &:hover { - background-color: var(--button-used-darkened-3-color); - border-color: var(--button-used-darkened-8-color); - color: var(--white-color); + filter: brightness(95%); + color: #fff; } } diff --git a/tildes/scss/modules/_topic.scss b/tildes/scss/modules/_topic.scss index fe26d79..474ee9b 100644 --- a/tildes/scss/modules/_topic.scss +++ b/tildes/scss/modules/_topic.scss @@ -209,8 +209,7 @@ border-color: transparent; &:hover { - background-color: var(--button-darkened-3-color); - border-color: var(--button-darkened-8-color); + background-color: var(--button-color); } .topic-voting-votes { diff --git a/tildes/scss/themes/_default.scss b/tildes/scss/themes/_default.scss index 2d92f8a..d620171 100644 --- a/tildes/scss/themes/_default.scss +++ b/tildes/scss/themes/_default.scss @@ -3,7 +3,6 @@ $default-theme: ( "alert": #e66b00, "background-primary": #fff, "background-secondary": #eee, - "black": #000, "border": #ccc, "button": #1460aa, "comment-label-exemplary": #1460aa, @@ -26,8 +25,7 @@ $default-theme: ( "syntax-literal": #2aa198, // Solarized "syntax-string": #2aa198, // Solarized "topic-tag-spoiler": #e66b00, - "warning": #e66b00, - "white": #fff + "warning": #e66b00 ); body { diff --git a/tildes/scss/themes/_theme_mixins.scss b/tildes/scss/themes/_theme_mixins.scss index d217cb1..7feac09 100644 --- a/tildes/scss/themes/_theme_mixins.scss +++ b/tildes/scss/themes/_theme_mixins.scss @@ -188,32 +188,26 @@ --button-by-brightness-color: #{choose-by-brightness( map-get($theme, "button"), - map-get($theme, "black"), - map-get($theme, "white") + #000, + #fff )}; --button-transparent-color: #{rgba(map-get($theme, "button"), 0.2)}; - --button-darkened-3-color: #{darken(map-get($theme, "button"), 3%)}; - --button-darkened-8-color: #{darken(map-get($theme, "button"), 8%)}; - --button-darkened-10-color: #{darken(map-get($theme, "button"), 10%)}; - --button-used-color: #{map-get($theme, "button-used")}; - --button-used-darkened-3-color: #{darken(map-get($theme, "button-used"), 3%)}; - --button-used-darkened-8-color: #{darken(map-get($theme, "button-used"), 8%)}; --error-color: #{map-get($theme, "error")}; --error-by-brightness-color: #{choose-by-brightness( map-get($theme, "error"), - map-get($theme, "black"), - map-get($theme, "white") + #000, + #fff )}; --foreground-extreme-color: #{choose-by-brightness( map-get($theme, "background-primary"), - map-get($theme, "black"), - map-get($theme, "white") + #000, + #fff )}; --foreground-highlight-color: #{map-get($theme, "foreground-highlight")}; --foreground-mixed-color: @@ -225,7 +219,7 @@ --foreground-secondary-color: #{map-get($theme, "foreground-secondary")}; --link-color: #{map-get($theme, "link")}; - --link-hover-color: #{darken(map-get($theme, "link"), 5%)}; + --link-hover-color: #{map-get($theme, "link-hover")}; --link-visited-color: #{map-get($theme, "link-visited")}; --stripe-mine-color: #{map-get($theme, "stripe-mine")}; @@ -243,11 +237,11 @@ // Colors for the special topic tags @if $is-light { --topic-tag-nsfw-color: #{map-get($theme, "topic-tag-nsfw")}; - --topic-tag-nsfw-foreground-color: #{map-get($theme, "white")}; + --topic-tag-nsfw-foreground-color: #fff; --topic-tag-nsfw-border-color: transparent; --topic-tag-spoiler-color: #{map-get($theme, "topic-tag-spoiler")}; - --topic-tag-spoiler-foreground-color: #{map-get($theme, "white")}; + --topic-tag-spoiler-foreground-color: #fff; --topic-tag-spoiler-border-color: transparent; } @else { --topic-tag-nsfw-color: transparent; @@ -264,15 +258,12 @@ // Colors for warning toasts @if $is-light { --warning-background-color: #{rgba(map-get($theme, "warning"), 0.9)}; - --warning-foreground-color: #{map-get($theme, "black")}; + --warning-foreground-color: #000; } @else { --warning-background-color: transparent; --warning-foreground-color: #{map-get($theme, "warning")}; } - // Colors that were hardcoded in previously. - --white-color: #{map-get($theme, "white")}; - // Variables for the comment labels. @if $is-light { --background-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")}; @@ -287,11 +278,11 @@ --comment-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")}; --comment-label-malice-color: #{map-get($theme, "comment-label-malice")}; - --foreground-label-exemplary-color: #{map-get($theme, "white")}; - --foreground-label-joke-color: #{map-get($theme, "white")}; - --foreground-label-noise-color: #{map-get($theme, "white")}; - --foreground-label-offtopic-color: #{map-get($theme, "white")}; - --foreground-label-malice-color: #{map-get($theme, "white")}; + --foreground-label-exemplary-color: #fff; + --foreground-label-joke-color: #fff; + --foreground-label-noise-color: #fff; + --foreground-label-offtopic-color: #fff; + --foreground-label-malice-color: #fff; } @else { --background-label-exemplary-color: transparent; --background-label-joke-color: transparent;