pre { tab-size: 2; } 🎉 (#1910)

Author: tylersticka

.changeset/lazy-rockets-swim.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Set the `tab-size` for `pre` elements to `2` to encourage more accessible code samples without compromising horizontal real estate

src/base/_defaults.scss

@@ -129,6 +129,8 @@ audio {
  * Code blocks
  *
  * 1. Don't allow code blocks to overflow willy-nilly.
+ * 2. Set a shallower tab size to encourage accessible code samples without
+ *    compromising horizontal real estate.
  */
 
 pre {
@@ -137,6 +139,7 @@ pre {
   color: color.$text-light;
   overflow: auto; /* 1 */
   padding: ms.step(1);
+  tab-size: 2; /* 2 */
 }
 
 /**

src/design/defaults.stories.mdx

@@ -106,7 +106,7 @@ For syntax highlighting, see [our Prism theme](/docs/vendor-prism--bash-shell).
   <Story name="Code block">
     {() => {
       const example = `* {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }`;
       return `<pre><code>${example}</code></pre>`;
     }}