Merge pull request #10700 from quarto-dev/revealjs/kbd-style

Author: cderv

news/changelog-1.6.md

@@ -12,13 +12,18 @@ All changes included in 1.6:
 - ([#10328](https://github.com/quarto-dev/quarto-cli/issues/10328)): Interpret subcells as subfloats when subcap count matches subcell count.
 - ([#10624](https://github.com/quarto-dev/quarto-cli/issues/10624)): Don't crash when proof environments are empty in `pdf`.
 
+## `html` Format
+
+- Fix `kbd` element styling on dark themes.
+
 ## `revealjs` Format
 
 - Update to Reveal JS 5.1.0.
 - Prevent empty SASS built css file to be included in header.
 - Remove wrong `sourceMappingUrl` entry in SASS built css.
 - ([#7715](https://github.com/quarto-dev/quarto-cli/issues/7715)): Revealjs don't support anymore special Pandoc syntax making BulletList in Blockquotes become incremental list. This was confusing and unexpected behavior. Supported syntax for incremental list is documented at <https://quarto.org/docs/presentations/revealjs/#incremental-lists>.
 - ([#9742](https://github.com/quarto-dev/quarto-cli/issues/9742)): Links to cross-referenced images correctly works.
+- ([#6012](https://github.com/quarto-dev/quarto-cli/issues/6012)): Add styling for `kbd` element in Revealjs slides.
 
 ## `typst` Format
 

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -1294,7 +1294,11 @@ $indent: 1.2em;
 kbd,
 .kbd {
   color: $body-color;
-  background-color: $gray-100;
+  @if (quarto-color.blackness($body-bg) > $code-block-theme-dark-threshhold) {
+    background-color: shift-color($gray-100, 70%);
+  } @else {
+    background-color: $gray-100;
+  }
   border: 1px solid;
   border-radius: 5px;
   border-color: $table-border-color;

src/resources/formats/revealjs/quarto.scss

@@ -18,6 +18,11 @@ $body-bg: #fff !default;
 $body-color: #222 !default;
 $text-muted: lighten($body-color, 30%) !default;
 
+// grey colors (like in bootstrap)
+$gray-200: #e9ecef !default;
+$gray-100: #f8f9fa !default;
+$gray-900: #212529 !default;
+
 // link colors
 $primary: #2a76dd !default;
 $link-color: $primary !default;
@@ -156,15 +161,48 @@ $overlayElementFgColor: 0, 0, 0 !default;
 
 // -- END setting.scss --
 
+// KBD variables
+$kbd-padding-y: 0.4rem !default;
+$kbd-padding-x: 0.4rem !default;
+$kbd-font-size: $presentation-font-size-root !default;
+$kbd-color: $body-color !default;
+$kbd-bg: $gray-100 !default; // like in bootstrap style
+
 /*-- scss:functions --*/
 
 @function colorToRGB($color) {
   @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
     ")";
 }
 
+@function tint-color($color, $weight) {
+  @return mix(white, $color, $weight);
+}
+
+@function shade-color($color, $weight) {
+  @return mix(black, $color, $weight);
+}
+
+@function shift-color($color, $weight) {
+  @return if(
+    $weight > 0,
+    shade-color($color, $weight),
+    tint-color($color, -$weight)
+  );
+}
+
 /*-- scss:mixins --*/
 
+@mixin shift_to_dark($property, $color) {
+  @if (
+    sass-color.blackness($backgroundColor) > $code-block-theme-dark-threshhold
+  ) {
+    #{$property}: shift-color($color, 70%);
+  } @else {
+    #{$property}: $color;
+  }
+}
+
 // -- START setting.scss --
 
 // Generates the presentation background, can be overridden
@@ -738,3 +776,16 @@ div.cell-output-display div.pagedtable-wrapper table.table {
 .reveal .scrollable ol li:first-child:nth-last-child(n + 10) ~ li {
   margin-left: 1em;
 }
+
+/* kbd rules */
+
+kbd {
+  font-family: $font-family-monospace;
+  font-size: $kbd-font-size;
+  color: $kbd-color;
+  @include shift_to_dark("background-color", $kbd-bg);
+  border: 1px solid;
+  border-color: $code-block-border-color;
+  border-radius: 5px;
+  padding: $kbd-padding-y $kbd-padding-x;
+}