use namespacing on classes, edit playground layout

source/_includes/playground/playground_header.liquid

@@ -6,17 +6,19 @@
 
   <div class="sl-c-pop-stripe"></div>
   <div class="sl-l-container">
-    <div class="sl-l-grid sl-l-grid--full sl-l-small-grid--fit sl-l-small-grid--center sl-l-small-grid--gutters">
+    <div class="sl-l-grid sl-l-grid--full sl-l-small-grid--fit sl-l-large-grid--center sl-l-small-grid--justify-space-between sl-l-small-grid--gutters">
       <p class="sl-l-grid__column sl-r-banner__brand">
         <a href="/"><img
             height="24"
             alt="Sass"
             src="/assets/img/logos/logo.svg"></a>
       </p>
-      <h1 class="sl-l-grid__column">{{ title }}</h1>
+      <h1 class="sl-l-grid__column sl-l-large-grid--center">{{ title }}</h1>
-      <div class="sl-l-grid__column">
+      <div class="sl-l-grid sl-l-grid__column sl-l-large-grid--center  playground-actions">
-        <button type="button" id="playground-copy-url">Copy URL</button>
+        <button type="button" id="playground-copy-url" class="sl-c-button">Copy URL</button>
-        <div class="alert" id="playground-copied-alert">URL copied to clipboard</div>
+        <div class="sl-c-alert playground-alert" id="playground-copied-alert">
+          URL copied to clipboard
+        </div>
       </div>
     </div>
   </>

source/assets/sass/components/_buttons.scss

@@ -1,9 +1,10 @@
 @use 'sass:color';
+@use '../visual-design/typography';
 
 .sl-c-button {
   align-items: center;
   border: 0;
-  border-radius: var(--sl-border-radius--large);
+  border-radius: var(--radius-button, var(--sl-border-radius--large));
   background: var(--color-button-bg, var(--sl-color--iron));
   box-shadow: 0 2px 1px var(--sl-color--shadow);
   color: var(--color-button-text, var(--sl-color--highlight));
@@ -43,6 +44,14 @@
     }
   }
 
+  &--tab {
+    --color-button-bg: var(--color-tab-bg, --sl-color--code-background);
+    --color-button-text: var(--text, var(--sl-color--pale-sky));
+    --radius-button: 0;
+    box-shadow: none;
+    font-weight: typography.$sl-font-weight--bold;
+  }
+
   &:has(.caps) {
     --display-btn: inline;
   }

source/assets/sass/components/_callouts.scss

@@ -3,7 +3,7 @@
 @use '../config/color/brand';
 
 .sl-c-callout {
-  margin: var(--sl-gutter--sesqui) 0;
+  margin: var(--sl-c-callout--block-margin, var(--sl-gutter--sesqui)) 0;
   padding: var(--sl-gutter--sesqui) var(--sl-gutter);
   background: color.adjust(brand.$sl-color--pale-sky, $lightness: 60%);
   border-radius: var(--sl-border-radius--small);

source/assets/sass/components/_playground.scss

@@ -3,26 +3,48 @@
 @use '../config/color/brand';
 @use '../visual-design/typography';
 
+.playground {
+  display: grid;
+  grid-template:
+    'header' auto
+    'main' 1fr
+    'footer' auto / 100%;
+  min-height: 100vh;
+
+  #main-content {
+    display: grid;
+    grid-template:
+    'editor' 1fr
+    'alert' min-content;
+  }
+}
+
 // Use smaller sizes for condensed header
 .sl-r-banner-playground {
   --h1-size: var(--sl-font-size--xx-large);
   --h1-size-lg: var(--sl-playground-heading);
 }
 
+.sl-l-section-playground {
+  display: grid;
+  width: 100%;
+}
 
-  button#playground-copy-url {
+.playground-actions {
-    float: right;
+  flex-direction: row-reverse;
+}
+
+#playground-copied-alert {
+  opacity: 0;
+  transition: opacity 0.3s linear;
+
+  &.show {
+    opacity: 1;
   }
+}
 
-  #playground-copied-alert {
+.playground-actions {
-    opacity: 0;
+  gap: var(--sl-gutter--double);
-    float: right;
-    transition: opacity 0.3s linear;
-
-    &.show {
-      opacity: 1;
-    }
-  }
 }
 
 .playground-alert {
@@ -30,98 +52,107 @@
   padding-right: var(--sl-gutter);
 }
 
-.code-editor-wrapper {
+
-  // Duplicated from fun fact- should this be defined elsewhere?
+// Playground Editor area
-  border: var(--sl-border--small) solid var(--sl-color--code-background-darker);
+.sl-c-playground {
-.playground-wrapper {
+  --sl-c-callout--block-margin: 0;
-  display: flex;
+  display: grid;
-  flex-flow: row wrap;
   gap: var(--sl-gutter);
 
-    flex-grow: 1;
+  @include breakpoints.sl-breakpoint--medium {
-    min-width: calc((100% - var(--sl-gutter)) / 2);
+    grid-template:
+      'sass  css' 1fr
+      'debug debug' minmax(0, auto) / 50% 50%;
+  }
+}
+
+// Precompiled and Compiled code container
+.sl-c-playground__code-editor-wrapper {
+  background-color: var(--sl-color-editor-background);
+  border: var(--sl-border--small) solid var(--sl-color--code-background-darker);
+  display: grid;
+}
+
+.sl-c-playground__console-wrapper {
+  grid-area: debug;
+  min-width: calc((100% - var(--sl-gutter)) / 2);
+}
+
+[data-code='precompiled'] {
+  --sl-color-editor-background: var(--sl-color--white);
+  grid-template-rows: min-content 1fr;
+}
+
+[data-code='compiled']  {
+  --sl-color-editor-background: var(--sl-color--code-background);
+  grid-template-rows: min-content minmax(0, auto) 1fr;
+}
+
+
+  .ͼ1 {
+    height: 100%;
   }
 
-  #editor {
+#editor {
-    --sl-color-editor-background: var(--sl-color--white);
+  cursor: text;
 
-    cursor: text;
+}
-  }
 
-  #css-view {
+.console {
-    --sl-color-editor-background: var(--sl-color--code-background);
+  font-family: 'Source Code Pro', 'SF Mono', monaco, inconsolata, 'Fira Mono',
-  }
+    'Droid Sans Mono', monospace;
+  min-height: 2em;
+  max-height: 500px;
+  margin: 0;
 
-  .console {
+  hr,
-    font-family: 'Source Code Pro', 'SF Mono', monaco, inconsolata, 'Fira Mono',
+  p {
-      'Droid Sans Mono', monospace;
-    min-height: 2em;
-    max-height: 500px;
     margin: 0;
+  }
 
-    hr,
+  $console-type-colors: (
-    p {
+    'error': red,
-      margin: 0;
+    'warn': orange,
-    }
+    'debug': green,
+  );
 
-    $console-type-colors: (
+  @each $name, $color in $console-type-colors {
-      'error': red,
+    .console-type-#{$name} {
-      'warn': orange,
+      color: $color;
-      'debug': green,
-    );
-
-    @each $name, $color in $console-type-colors {
-      .console-type-#{$name} {
-        color: $color;
-      }
     }
   }
 }
 
 
-.code-editor-tabbar {
+
+.sl-c-playground__editor-tabbar {
   background-color: var(--sl-color--code-background-darker);
 
-  button {
-    background-color: var(--sl-color--tab-bg, --sl-color--code-background);
-    border: 0;
-    color: var(--text, var(--sl-color--pale-sky));
-    cursor: pointer;
-    font-weight: typography.$sl-font-weight--bold;
-    padding: var(--sl-gutter--half);
-
-    &:hover {
-      // TODO- add hover styles
-    }
-  }
-
   $sassoptions: 'scss', 'indented';
-
   @each $option in $sassoptions {
     &[data-active='#{$option}'] [data-value='#{$option}'] {
-      --sl-color--tab-bg: var(--sl-color--white);
+      --color-tab-bg: var(--sl-color--white);
+      --color-button-text: var(--text, var(--sl-color--pale-sky));
+
+      &:hover,
+      &:focus {
+        --color-tab-bg: var(--sl-color--white);
+        --color-button-text: var(--text, var(--sl-color--pale-sky));
+      }
     }
   }
 
   $cssoptions: 'expanded', 'compressed';
   @each $option in $cssoptions {
     &[data-active='#{$option}'] [data-value='#{$option}'] {
-      --sl-color--tab-bg: var(--sl-color--code-background);
+      --color-tab-bg: var(--sl-color--code-background);
+      --color-button-text: var(--text, var(--sl-color--pale-sky));
     }
   }
 }
 
 #code-editor-error-alert {
   display: none;
-
-  // From warning callout
-  background: color.adjust(brand.$sl-color--hopbush, $lightness: 38%);
-  border: var(--sl-border--small) solid
-  var(--sl-color--code-background);
-  font-family: typography.$sl-font-family--code;
-
-
-  // TODO Font weight bold not imported from Google Fonts
   font-weight: typography.$sl-font-weight--bold;
 }
 

source/playground.liquid

@@ -3,29 +3,30 @@ layout: base
 title: 'Playground'
 is_playground: true
 ---
-<div id="docsearch"></div>
+<div class="sl-c-playground" data-compiler-has-error="false">
-<div class="playground-wrapper" data-compiler-has-error="false">
+  <div class="sl-c-playground__code-editor-wrapper" data-code="precompiled">
-  <div class="code-editor-wrapper">
     <div
-      class="code-editor-tabbar playground-precompiled"
+      class="sl-c-playground__editor-tabbar"
       data-active="scss"
       data-setting="inputFormat">
       <button
         type="button"
         data-value="scss"
         data-tabbar="item"
+        class="sl-c-button sl-c-button--tab"
         data-setting="inputFormat">SCSS</button>
       <button
         type="button"
         data-value="indented"
         data-tabbar="item"
+        class="sl-c-button sl-c-button--tab"
         data-setting="inputFormat">Sass</button>
     </div>
     <div id="editor"></div>
   </div>
-  <div class="code-editor-wrapper">
+  <div class="sl-c-playground__code-editor-wrapper" data-code="compiled">
     <div
-      class="code-editor-tabbar"
+      class="sl-c-playground__editor-tabbar"
       data-active="expanded"
       data-setting="outputFormat">
       <span data-tabbar="item">
@@ -36,20 +37,22 @@ is_playground: true
         type="button"
         data-value="expanded"
         data-tabbar="item"
+        class="sl-c-button sl-c-button--tab"
         data-setting="outputFormat">Expanded</button>
       <button
         type="button"
         data-value="compressed"
         data-tabbar="item"
+        class="sl-c-button sl-c-button--tab"
         data-setting="outputFormat">Compressed</button>
     </div>
-    <div id="code-editor-error-alert">Please resolve error to view compiled CSS.</div>
+    <div id="code-editor-error-alert" class="sl-c-callout sl-c-callout--warning">Please resolve error to view compiled CSS.</div>
-    <div id="css-view"></div>
+    <div id="css-view" class="is-compiled"></div>
   </div>
-  <div class="console-wrapper">
+  <div class="sl-c-playground__console-wrapper">
-    <div class="code-editor-tabbar">
+    <div class="sl-c-playground__editor-tabbar">
       <span data-tabbar="item">
-        Debug Console
+        Console
       </span>
     </div>
     <pre class="console"></pre>