From 2f34701e46b4cf4db4b88127c9631170d4ef43d8 Mon Sep 17 00:00:00 2001 From: Wies de Graaf Date: Fri, 25 Oct 2024 11:49:16 +0200 Subject: [PATCH] hugo: Modified blue tint for base styling The darker blue tint used across the site has been replaced by the brighter blue version. To compare, see: https://cuelang.org/examples/shortcodes/info/ https://cuelang.org/examples/shortcodes/buttons/ Fixes cue-lang/cue#3503 Signed-off-by: Wies de Graaf --- hugo/assets/scss/base/base.scss | 2 +- hugo/assets/scss/components/cards.scss | 2 +- hugo/assets/scss/components/nav.scss | 2 +- hugo/assets/scss/components/note.scss | 2 +- hugo/assets/scss/components/tabs-nav.scss | 2 +- hugo/assets/scss/components/teaser.scss | 2 +- hugo/assets/scss/components/toc.scss | 2 +- hugo/assets/scss/components/tree.scss | 4 ++-- hugo/assets/scss/config/colors.scss | 7 +++---- playground/src/scss/components/button.scss | 4 ++-- 10 files changed, 14 insertions(+), 15 deletions(-) diff --git a/hugo/assets/scss/base/base.scss b/hugo/assets/scss/base/base.scss index 672c1bb265..ffe59a6b14 100644 --- a/hugo/assets/scss/base/base.scss +++ b/hugo/assets/scss/base/base.scss @@ -37,7 +37,7 @@ --scrollbar-color-hover: #{ $c-scrollbar-color-hover }; --table-head-background: #{ $c-blue--lightest }; --table-row-background: #{ $c-blue--lightest }; - --table-border-color: #{ transparentize($c-blue--light, 0.85) }; + --table-border-color: #{ transparentize($c-blue, 0.85) }; } html, diff --git a/hugo/assets/scss/components/cards.scss b/hugo/assets/scss/components/cards.scss index 823eb4e6f4..e697238402 100644 --- a/hugo/assets/scss/components/cards.scss +++ b/hugo/assets/scss/components/cards.scss @@ -32,7 +32,7 @@ &:focus, &:hover { background-color: transparentize($c-blue--lighter, 0.4); - border: 1px solid transparentize($c-blue--light, 0.8); + border: 1px solid transparentize($c-blue, 0.8); #{ $self }__readmore { --cards-icon-color: #{ $c-yellow }; diff --git a/hugo/assets/scss/components/nav.scss b/hugo/assets/scss/components/nav.scss index 1c1735f03b..ee9b546dd9 100644 --- a/hugo/assets/scss/components/nav.scss +++ b/hugo/assets/scss/components/nav.scss @@ -221,7 +221,7 @@ &--index { #{ $self }__title { - color: $c-blue--light; + color: $c-blue; margin: 0; padding: 0.5rem; } diff --git a/hugo/assets/scss/components/note.scss b/hugo/assets/scss/components/note.scss index 702aedb403..1e67237194 100644 --- a/hugo/assets/scss/components/note.scss +++ b/hugo/assets/scss/components/note.scss @@ -11,7 +11,7 @@ --text-color: #{ $c-white }; --text-link-color: #{ $c-white }; - background-color: var(--note-bg-color, $c-blue--light); + background-color: var(--note-bg-color, $c-blue); border-radius: 3px; color: var(--text-color); margin: 0 0 1.25em; diff --git a/hugo/assets/scss/components/tabs-nav.scss b/hugo/assets/scss/components/tabs-nav.scss index f69fe31102..86f21ea902 100644 --- a/hugo/assets/scss/components/tabs-nav.scss +++ b/hugo/assets/scss/components/tabs-nav.scss @@ -36,7 +36,7 @@ &:focus, &:hover { .icon { - fill: $c-blue--light; + fill: $c-blue; } } } diff --git a/hugo/assets/scss/components/teaser.scss b/hugo/assets/scss/components/teaser.scss index dcba5121f7..8c3ab068e6 100644 --- a/hugo/assets/scss/components/teaser.scss +++ b/hugo/assets/scss/components/teaser.scss @@ -127,7 +127,7 @@ } &--search { - --teaser-title-color: #{$c-blue--light}; + --teaser-title-color: #{$c-blue}; --teaser-excerpt-color: #{$c-grey-blue--dark}; padding: $p-gutter; diff --git a/hugo/assets/scss/components/toc.scss b/hugo/assets/scss/components/toc.scss index d4194b6767..b42b83f217 100644 --- a/hugo/assets/scss/components/toc.scss +++ b/hugo/assets/scss/components/toc.scss @@ -38,7 +38,7 @@ &:hover, &:focus { - color: $c-blue--light; + color: $c-blue; #{ $self }__text { background-position-x: 0; diff --git a/hugo/assets/scss/components/tree.scss b/hugo/assets/scss/components/tree.scss index 13bf5b1c64..3ef174c6ec 100644 --- a/hugo/assets/scss/components/tree.scss +++ b/hugo/assets/scss/components/tree.scss @@ -84,7 +84,7 @@ &.is-active, &.is-active-path { - background: $c-grey--light-mid; + background: $c-blue--light; border-radius: $b-radius 0 0 $b-radius; box-shadow: 4px 4px 10px 0 transparentize($c-black, 0.98) inset; padding-bottom: 1.5rem; @@ -119,7 +119,7 @@ &:hover, &:focus { #{ $self }__text { - color: $c-blue--light; + color: $c-blue; } } } diff --git a/hugo/assets/scss/config/colors.scss b/hugo/assets/scss/config/colors.scss index a316a946d3..67506b79c3 100644 --- a/hugo/assets/scss/config/colors.scss +++ b/hugo/assets/scss/config/colors.scss @@ -1,8 +1,7 @@ $c-blue--lightest: #f8f9fd; $c-blue--lighter: #f0f2fb; -$c-grey--light-mid: #e6e8f3; -$c-blue--light: #1b3987; -$c-blue: #232a68; +$c-blue--light: #e6e8f3; +$c-blue: #1b3987; $c-blue--bright: #063AC0; $c-blue--dark: #0c2c65; $c-blue--darker: #0f1333; @@ -67,7 +66,7 @@ $c-scrollbar-background: $c-grey--lightest; // Shadows $shadow--light: 0 4px 4px transparentize($c-black, .25); $shadow: 0 4px 34px transparentize($c-black, .35); -$shadow--blue: 0 10px 24px transparentize($c-blue--light, .85); +$shadow--blue: 0 10px 24px transparentize($c-blue, .85); $shadow--header: 0 3px 12px transparentize($c-blue--dark, .8); $shadow--drawer: 0 3px 12px transparentize($c-blue--dark, .8); diff --git a/playground/src/scss/components/button.scss b/playground/src/scss/components/button.scss index 8f0e6a0856..d29d84d32a 100644 --- a/playground/src/scss/components/button.scss +++ b/playground/src/scss/components/button.scss @@ -9,8 +9,8 @@ @include button-base; @include button-style( - var(--button-background, #{ $c-blue--light }), - var(--button-border, #{ $c-blue--light }), + var(--button-background, #{ $c-blue }), + var(--button-border, #{ $c-blue }), var(--button-color, #{ $c-white }), var(--button-background-hover, #{ $c-blue }), var(--button-border-hover, #{ $c-blue }),