Ensure we use PST colours throughout (#1927)

Co-authored-by: gabalafou <[email protected]>

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 <https://sphinx-design.readthedocs.io/en/pydata-theme/index.html>_` (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 <https://sphinx-design.readthedocs.io/en/pydata-theme/index.html>`_ (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

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 {

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;

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} {

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 {