fix(typography): align code and pre tags with UX

projects/element-theme/src/styles/bootstrap/_reboot.scss

@@ -268,22 +268,21 @@ pre,
 code,
 kbd,
 samp {
-  font-family: variables.$font-family-code;
-  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+  font-family: $font-family-code;
+  font-size: variables.$code-font-size;
+  line-height: variables.$code-line-height;
   direction: ltr;
   unicode-bidi: bidi-override;
 }
 
-// 1. Remove browser default top margin
-// 2. Reset browser default of `1em` to use `rem`s
-// 3. Don't allow content to break outside
-
 pre {
   display: block;
-  margin-block: 0 1rem; // 1 // 2
-  overflow: auto; // 3
-  font-size: variables.$code-font-size;
+  padding-block: variables.$pre-padding-y;
+  padding-inline: variables.$pre-padding-x;
+  border-radius: variables.$pre-border-radius;
+  overflow: auto;
   color: variables.$pre-color;
+  border: variables.$pre-border-color variables.$pre-border-width solid;
 
   // Account for some code outputs that place code tags in pre tags
   code {
@@ -294,9 +293,12 @@ pre {
 }
 
 code {
-  font-size: variables.$code-font-size;
+  background: variables.$code-background;
   color: variables.$code-color;
   word-wrap: break-word;
+  padding-block: variables.$code-padding-y;
+  padding-inline: variables.$code-padding-x;
+  border-radius: variables.$code-border-radius;
 
   // Streamline the style when inside anchors to avoid broken underline and more
   a > & {
@@ -307,14 +309,12 @@ code {
 kbd {
   padding-block: variables.$kbd-padding-y;
   padding-inline: variables.$kbd-padding-x;
-  font-size: variables.$kbd-font-size;
   color: variables.$kbd-color;
   background-color: variables.$kbd-bg;
   border-radius: variables.$border-radius-sm;
 
   kbd {
     padding: 0;
-    font-size: 1em;
     font-weight: variables.$nested-kbd-font-weight;
   }
 }

projects/element-theme/src/styles/bootstrap/_variables.scss

@@ -645,13 +645,22 @@ $breadcrumb-border-radius: 0 !default;
 
 // Code
 
-$code-font-size: 87.5% !default;
-$code-color: semantic-tokens.$element-data-11 !default;
+$code-font-size: typography.$si-font-size-body !default;
+$code-line-height: typography.$si-line-height-body !default;
+$code-color: semantic-tokens.$element-text-primary !default;
+$code-background: semantic-tokens.$element-ui-4 !default;
+$code-padding-y: map.get(spacers.$spacers, 1) !default;
+$code-padding-x: map.get(spacers.$spacers, 2) !default;
+$code-border-radius: semantic-tokens.$element-radius-1 !default;
 
 $kbd-padding-y: 0.2rem !default;
 $kbd-padding-x: 0.4rem !default;
-$kbd-font-size: $code-font-size !default;
-$kbd-color: semantic-tokens.$element-base-1 !default;
+$kbd-color: semantic-tokens.$element-text-primary !default;
 $kbd-bg: semantic-tokens.$element-ui-1 !default;
 
 $pre-color: semantic-tokens.$element-text-primary !default;
+$pre-padding-y: map.get(spacers.$spacers, 4) !default;
+$pre-padding-x: map.get(spacers.$spacers, 4) !default;
+$pre-border-color: semantic-tokens.$element-ui-4 !default;
+$pre-border-width: $border-width !default;
+$pre-border-radius: semantic-tokens.$element-radius-1 !default;