From d47b30c38533c358890e48396ab782fe01ca9b6e Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Tue, 6 Aug 2024 11:26:50 +0100 Subject: [PATCH] Ensure we use PST colours throughout (#1927) Co-authored-by: gabalafou --- docs/user_guide/web-components.rst | 24 ++++++++++++++--- .../assets/styles/base/_base.scss | 4 +-- .../assets/styles/content/_code.scss | 6 ----- .../styles/extensions/_sphinx_design.scss | 26 +++++++++++++++---- .../assets/styles/sections/_announcement.scss | 6 ++++- 5 files changed, 49 insertions(+), 17 deletions(-) diff --git a/docs/user_guide/web-components.rst b/docs/user_guide/web-components.rst index 2515af91d..484166a83 100644 --- a/docs/user_guide/web-components.rst +++ b/docs/user_guide/web-components.rst @@ -7,9 +7,9 @@ Sphinx Design Components On this page, you will find user interface components such as badges, buttons, cards, and tabs. -The components on this page are **not provided by PyData Theme**. They are -provided by `Sphinx Design _` (a Sphinx extension). This means that if you wish -to use the components on this page, you must install Sphinx Design separately and add it to your `conf.py`. +The components on this page are **not provided by PyData Theme**. +They are provided by `Sphinx Design `_ (a Sphinx extension). +This means that if you wish to use the components on this page, you must install Sphinx Design separately and add it to your `conf.py`. .. seealso:: @@ -111,6 +111,24 @@ Here are some of the available button-style links, also using semantic colors: Dark + .. grid-item:: + + .. button-ref:: badges-buttons + :ref-type: ref + :color: secondary + :shadow: + + Secondary + + .. grid-item:: + + .. button-ref:: badges-buttons + :ref-type: ref + :color: primary + :shadow: + + Primary + .. note:: `Sphinx Design buttons diff --git a/src/pydata_sphinx_theme/assets/styles/base/_base.scss b/src/pydata_sphinx_theme/assets/styles/base/_base.scss index 4fb0b0600..c50dc32d0 100644 --- a/src/pydata_sphinx_theme/assets/styles/base/_base.scss +++ b/src/pydata_sphinx_theme/assets/styles/base/_base.scss @@ -194,8 +194,8 @@ pre { @include link-style-hover; text-decoration-thickness: 1px; - background-color: var(--pst-violet-600); - color: var(--pst-color-secondary-text); + background-color: var(--pst-color-secondary-highlight); + color: var(--pst-color-secondary-highlight-text); } &:focus-visible { diff --git a/src/pydata_sphinx_theme/assets/styles/content/_code.scss b/src/pydata_sphinx_theme/assets/styles/content/_code.scss index 84080928d..6371097ea 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_code.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_code.scss @@ -61,12 +61,6 @@ a > code { color: var(--pst-color-inline-code-links); } -// Fix for Sphinx's "highlight" directive - this is an issue with our accessible pygments theme -// and the colour we are using for the background of the code blocks. -html[data-theme="light"] .highlight .nf { - color: #0078a1 !important; -} - // Minimum opacity needed for linenos to be WCAG AA conformant span.linenos { opacity: 0.8 !important; diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss index 3902a1006..46d7bb8b2 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss @@ -66,25 +66,33 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors); @mixin create-sd-colors($value, $name) { // define the pst variables, so that downstream user overrides will work + @debug "Creating color variables for semantic color: #{$name}"; + --pst-color-#{$name}: #{$value}; // we are now using a11y-combination to calculate the text color - this is based // on the WCAG color contrast guidelines --pst-color-#{$name}-text: #{a11y-combination($value)}; - // TODO: highlight seems to be used for buttons @trallard to fix on a11y follow-up work - --pst-color-#{$name}-highlight: #{color.adjust($value, $lightness: -15%)}; + // highlight is used for hover effects on buttons, here we make some fluid scaling + // to avoid jarring effects -- we create a local variable that we can access + // later to calculate the text color + $highlight-color: color.scale($value, $lightness: -15%, $saturation: 5%); + + --pst-color-#{$name}-highlight: #{$highlight-color}; // override the sphinx-design variables --sd-color-#{$name}: var(--pst-color-#{$name}); --sd-color-#{$name}-text: var(--pst-color-#{$name}-text); - - // TODO: highlight seems to be used for buttons @trallard to fix on a11y follow-up work --sd-color-#{$name}-highlight: var(--pst-color-#{$name}-highlight); + + // calculate the text color for the highlight color + --pst-color-#{$name}-highlight-text: #{a11y-combination($highlight-color)}; } // Now we override the --sd-color-* variables. @each $mode in (light, dark) { + @debug "Creating color variables for mode: #{$mode}"; html[data-theme="#{$mode}"] { // check if this color is defined differently for light/dark @each $name in $sd-semantic-color-names { @@ -99,7 +107,7 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors); @if string.index($key, "bg") { --sd-color-#{$name}-bg: #{$value}; - // create local variable + // create local variable -- needed to calculate the text color $value: check-color($value); --sd-color-#{$name}-bg-text: #{a11y-combination($value)}; @@ -341,6 +349,14 @@ html { } } + @each $name in $sd-semantic-color-names { + .sd-btn-#{$name} { + &:hover { + color: var(--pst-color-#{$name}-highlight-text) !important; + } + } + } + @each $name in $sd-semantic-color-names { .sd-btn-#{$name}, .sd-btn-outline-#{$name} { diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss index c3cc62549..8fa66565e 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss @@ -53,9 +53,13 @@ border-radius: 0.25rem; &:hover { + // applying the same style as the SD "buttons" + @include link-style-hover; + + text-decoration-thickness: 1px; background-color: $hover-background-color; border-color: $hover-background-color; - color: $color; + color: var(--pst-color-danger-highlight-text); } &:focus-visible {