From a225edaac309986c407877085ba755ff44ddeb2f Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 21 Jun 2023 14:09:28 -0500
Subject: [PATCH] make all css custom properties consistent in naming style

---
 source/assets/sass/components/_alerts.scss    | 20 +++---
 source/assets/sass/components/_buttons.scss   | 50 +++++++--------
 source/assets/sass/components/_callouts.scss  | 22 ++++---
 source/assets/sass/components/_lists.scss     |  2 +-
 .../sass/components/_mac-stadium-icon.scss    |  2 +-
 .../assets/sass/components/_playground.scss   | 62 ++++++++++++-------
 source/assets/sass/config/_scale.scss         |  4 +-
 source/assets/sass/config/color/_content.scss | 10 ++-
 source/assets/sass/layout/_containers.scss    | 10 +--
 source/assets/sass/visual-design/_theme.scss  | 22 +++----
 10 files changed, 115 insertions(+), 89 deletions(-)

diff --git a/source/assets/sass/components/_alerts.scss b/source/assets/sass/components/_alerts.scss
index 51f9f32..f823604 100644
--- a/source/assets/sass/components/_alerts.scss
+++ b/source/assets/sass/components/_alerts.scss
@@ -4,12 +4,12 @@
 @use '../visual-design/typography';
 
 .sl-c-alert {
-  background: var(--alert-bg, var(--sl-color--highlight));
+  background: var(--sl-background--alert, var(--sl-color--highlight));
   color: var(--sl-color--white);
   font-size: var(--sl-font-size--small);
-  padding-bottom: var(--alert-padding-block, var(--sl-gutter--minus));
-  padding-top: var(--alert-padding-block, var(--sl-gutter--minus));
-  text-align: var(--alert-align, center);
+  padding-bottom: var(--sl-padding-block--alert, var(--sl-gutter--minus));
+  padding-top: var(--sl-padding-block--alert, var(--sl-gutter--minus));
+  text-align: var(--sl-align--alert, center);
 
   p,
   ul,
@@ -30,8 +30,8 @@
   }
 
   a {
-    --sl-color-text--link: var(--sl-color--white);
-    --sl-color-background--link-state: rgba(0, 0, 0, 6.25%);
+    --sl-color--link: var(--sl-color--white);
+    --sl-background--link-state: rgba(0, 0, 0, 6.25%);
     --sl-border-color--link: #{rgba(
         brand.$sl-color--white,
         var(--opacity-border, 0.5)
@@ -51,13 +51,13 @@
 }
 
 .sl-c-alert--info {
-  --alert-bg: var(--sl-color--midnight-blue);
+  --sl-background--alert: var(--sl-color--midnight-blue);
 }
 
 .sl-c-alert--special {
-  --alert-align: left;
-  --alert-bg: black;
-  --alert-padding-block: var(--sl-gutter--triple);
+  --sl-align--alert: left;
+  --sl-background--alert: black;
+  --sl-padding-block--alert: var(--sl-gutter--triple);
 }
 
 .sl-c-alert-title {
diff --git a/source/assets/sass/components/_buttons.scss b/source/assets/sass/components/_buttons.scss
index aa2f207..a907736 100644
--- a/source/assets/sass/components/_buttons.scss
+++ b/source/assets/sass/components/_buttons.scss
@@ -4,13 +4,13 @@
 .sl-c-button {
   align-items: center;
   border: 0;
-  border-radius: var(--radius-button, var(--sl-border-radius--large));
-  background: var(--color-button-background, var(--sl-color--iron));
+  border-radius: var(--sl-radius--button, var(--sl-border-radius--large));
+  background: var(--sl-background--button, var(--sl-color--iron));
   box-shadow: 0 2px 1px var(--sl-color--shadow);
-  color: var(--color-button-text, var(--sl-color--highlight));
+  color: var(--sl-color--button, var(--sl-color--highlight));
   cursor: pointer;
-  display: var(--display-button, inline-block);
-  font-weight: var(--font-weight-button);
+  display: var(--sl-display--button, inline-block);
+  font-weight: var(--sl-font-weight--button);
   justify-content: center;
   margin: 0;
   padding: var(--sl-gutter--minus) var(--sl-gutter);
@@ -18,41 +18,41 @@
   &:hover,
   &:focus {
     background: var(
-      --color-button-background-state,
-      var(--color-button-background, var(--sl-color--link-action))
+      --sl-background--button-state,
+      var(--sl-background--button, var(--sl-color--link-action))
     );
 
-    --color-button-text: var(--sl-color--action);
+    --sl-color--button: var(--sl-color--action);
 
-    color: var(--color-button-text-state, var(--color-button-text));
+    color: var(--sl-color--button-state, var(--sl-color--button));
   }
 
   &:active {
     background: var(
-      --color-button-background-active,
+      --sl-background--button-active,
       var(--sl-color--link-action)
     );
-    color: var(--color-button-text-active, var(--sl-color--highlight));
+    color: var(--sl-color--button-active, var(--sl-color--highlight));
   }
 
   &--primary {
-    --color-button-background: var(--sl-color--highlight);
-    --color-button-background-active: var(--sl-color--active);
-    --color-button-background-state: var(--sl-color--action);
-    --color-button-text: var(--sl-color--white);
-    --color-button-text-active: var(--sl-color--white);
-    --color-button-text-state: var(--sl-color--white);
+    --sl-background--button: var(--sl-color--highlight);
+    --sl-background--button-active: var(--sl-color--active);
+    --sl-background--button-state: var(--sl-color--action);
+    --sl-color--button: var(--sl-color--white);
+    --sl-color--button-active: var(--sl-color--white);
+    --sl-color--button-state: var(--sl-color--white);
   }
 
   &--tab {
-    --color-button-background: var(--sl-color--code-background-darker);
-    --color-button-background-active: var(--color-button-background-state);
-    --color-button-background-state: transparent;
-    --color-button-text: var(--sl-color--highlight);
-    --color-button-text-active: inherit;
-    --color-button-text-state: var(--sl-color--midnight-blue);
-    --font-weight-button: #{typography.$sl-font-weight--bold};
-    --radius-button: 0;
+    --sl-background--button: var(--sl-color--code-background-darker);
+    --sl-background--button-active: var(--sl-background--button-state);
+    --sl-background--button-state: transparent;
+    --sl-color--button: var(--sl-color--highlight);
+    --sl-color--button-active: var(--sl-color--midnight-blue);
+    --sl-color--button-state: var(--sl-color--midnight-blue);
+    --sl-font-weight--button: #{typography.$sl-font-weight--bold};
+    --sl-radius--button: 0;
 
     box-shadow: none;
   }
diff --git a/source/assets/sass/components/_callouts.scss b/source/assets/sass/components/_callouts.scss
index dc463ef..eb5569c 100644
--- a/source/assets/sass/components/_callouts.scss
+++ b/source/assets/sass/components/_callouts.scss
@@ -3,21 +3,25 @@
 @use '../config/color/brand';
 
 .sl-c-callout {
-  margin: var(--sl-c-callout--block-margin, var(--sl-gutter--sesqui)) 0;
-  padding: var(--sl-c-callout--block-padding, var(--sl-gutter--sesqui))
+  margin: var(--sl-block-margin--callout, var(--sl-gutter--sesqui)) 0;
+  padding: var(--sl-block-padding--callout, var(--sl-gutter--sesqui))
     var(--sl-gutter);
-  background: color.adjust(brand.$sl-color--pale-sky, $lightness: 60%);
+  background: var(--sl-background--callout, color.adjust(brand.$sl-color--pale-sky, $lightness: 60%));
+  border-color: var(--sl-border-color--callout);
+  border-style: var(--sl-border-style--callout, solid);
+  border-width: var(--sl-border-width--callout, 0);
   border-radius: var(--sl-border-radius--small);
 
   &--warning {
-    background: color.adjust(brand.$sl-color--hopbush, $lightness: 38%);
-    border: var(--sl-border--small) solid var(--sl-color--border-blush);
+    --sl-background--callout: var(--sl-color--warning-lighter);
+    --sl-border-color--callout: var(--sl-color--warning-light);
+    --sl-border-width--callout: var(--sl-border--small);
   }
 
   &--fun-fact {
-    background: color.adjust(brand.$sl-color--patina, $lightness: 47%);
-    border: var(--sl-border--small) solid
-      color.adjust(brand.$sl-color--patina, $lightness: 32%);
+    --sl-background--callout: var(--sl-color--info-lighter);
+    --sl-border-color--callout: var(--sl-color--info-light);
+    --sl-border-width--callout: var(--sl-border--small);
   }
 
   &--function {
@@ -38,7 +42,7 @@
     padding: var(--sl-gutter--minus);
 
     .sl-c-callout & {
-      background: color.adjust(brand.$sl-color--pale-sky, $lightness: 53%);
+      --sl-background--callout: #{color.adjust(brand.$sl-color--pale-sky, $lightness: 53%)};
     }
   }
 
diff --git a/source/assets/sass/components/_lists.scss b/source/assets/sass/components/_lists.scss
index 88105ca..d561b03 100644
--- a/source/assets/sass/components/_lists.scss
+++ b/source/assets/sass/components/_lists.scss
@@ -56,7 +56,7 @@
       }
 
       a {
-        --sl-color-background--link-state: var(--sl-color--dawn-pink);
+        --sl-background--link-state: var(--sl-color--dawn-pink);
 
         border: none;
         cursor: pointer;
diff --git a/source/assets/sass/components/_mac-stadium-icon.scss b/source/assets/sass/components/_mac-stadium-icon.scss
index b0e9cab..fff2f58 100644
--- a/source/assets/sass/components/_mac-stadium-icon.scss
+++ b/source/assets/sass/components/_mac-stadium-icon.scss
@@ -1,4 +1,4 @@
 .mac-stadium-icon {
   margin-block: 0;
-  width: var(--mac-stadium-icon-width);
+  width: var(--sl-width--mac-stadium-icon);
 }
diff --git a/source/assets/sass/components/_playground.scss b/source/assets/sass/components/_playground.scss
index 46951c5..cf1dca1 100644
--- a/source/assets/sass/components/_playground.scss
+++ b/source/assets/sass/components/_playground.scss
@@ -4,7 +4,7 @@
 @use '../visual-design/typography';
 
 .playground {
-  --sl-container-max-width: 100vw;
+  --sl-max-width--container: 100vw;
 
   display: grid;
   grid-template:
@@ -47,8 +47,8 @@
 }
 
 .sl-l-section--playground {
-  --container-inline-padding: 0;
-  --container-inline-padding-large: 0;
+  --sl-inline-padding--container: 0;
+  --sl-inline-padding--container-large: 0;
 
   border-bottom: 1px solid var(--sl-color--iron);
   display: inherit;
@@ -87,7 +87,7 @@
 
 // Playground banner actions alert message
 .sl-r-banner__playground-alert {
-  --alert-padding-block: 0;
+  --sl-padding-block--alert: 0;
 
   grid-area: alert;
   height: 0;
@@ -98,7 +98,7 @@
   visibility: hidden;
 
   &.show {
-    --alert-padding-block: var(--sl-gutter--minus);
+    --sl-padding-block--alert: var(--sl-gutter--minus);
 
     height: 100%;
     opacity: 1;
@@ -108,8 +108,8 @@
 
 // Playground Editor area
 .sl-c-playground {
-  --sl-c-callout--block-margin: 0;
-  --sl-c-callout--block-padding: var(--sl-gutter--quarter);
+  --sl-block-margin--callout: 0;
+  --sl-block-padding--callout: var(--sl-gutter--quarter);
 
   display: grid;
   gap: var(--sl-gutter);
@@ -144,23 +144,23 @@
 
 // Precompiled and Compiled code container
 .sl-c-playground__code-editor-wrapper {
-  background-color: var(--sl-color-editor-background);
+  background-color: var(--sl-background--editor);
   border: var(--sl-border--small) solid var(--sl-color--code-background-darker);
 }
 
 [data-code='precompiled'] {
-  --sl-color-editor-background: var(--sl-color--white);
+  --sl-background--editor: var(--sl-color--white);
 
   grid-area: sass;
 }
 
 [data-code='compiled'] {
-  --sl-color-editor-background: var(--sl-color--code-background);
+  --sl-background--editor: var(--sl-color--code-background);
 }
 
 // Codemirror overrides
 .cm-editor {
-  background-color: var(--sl-color-editor-background);
+  background-color: var(--sl-background--editor);
   color: var(--sl-color--code-base, var(--sl-color--code-text));
   font-size: var(--sl-font-size--x-small);
   height: 100%;
@@ -168,7 +168,7 @@
   overflow-y: inherit;
 
   .cm-gutters {
-    background-color: var(--sl-color-editor-background);
+    background-color: var(--sl-background--editor);
     border-right: none;
   }
 
@@ -191,7 +191,7 @@
 
   .cm-activeLineGutter,
   .cm-activeLine {
-    background-color: var(--sl-color--highlight-blush);
+    background-color: var(--sl-color--warning-highlight);
 
     [data-code='compiled'] & {
       background-color: var(--sl-color--code-background);
@@ -200,7 +200,7 @@
 
   &.cm-focused {
     [data-code='precompiled'] & {
-      outline: 1px solid var(--sl-color--border-blush);
+      outline: 1px solid var(--sl-color--warning-light);
     }
 
     [data-code='compiled'] & {
@@ -208,6 +208,23 @@
     }
   }
 
+  .cm-diagnostic {
+    color: var(--sl-color--code-text);
+    background: var(--sl-color--code-background-darker);
+  }
+
+  .cm-diagnostic-error {
+    border-color: var(--sl-color--error);
+  }
+
+  .cm-diagnostic-warning {
+    border-color: var(--sl-color--warn);
+  }
+
+  .cm-diagnostic-info {
+    border-color: var(--sl-color--success);
+  }
+
   .sl-code-is-precompiled & {
     cursor: text;
   }
@@ -264,21 +281,20 @@
   grid-area: editor-tabbar;
 
   [data-active='true'] {
-    --color-button-text-focus: var(--color-button-tab-active);
-    --color-button-text: var(--sl-color--pale-sky);
+    --sl-color--button: var(--sl-color--pale-sky);
   }
 
   [data-code='precompiled'] & {
     [data-active='true'] {
-      --color-button-background: var(--sl-color--white);
-      --color-button-background-state: var(--sl-color--white);
+      --sl-background--button: var(--sl-color--white);
+      --sl-background--button-state: var(--sl-color--white);
     }
   }
 
   [data-code='compiled'] & {
     [data-active='true'] {
-      --color-button-background: var(--sl-color--code-background);
-      --color-button-background-state: var(--sl-color--code-background);
+      --sl-background--button: var(--sl-color--code-background);
+      --sl-background--button-state: var(--sl-color--code-background);
     }
   }
 }
@@ -308,11 +324,11 @@
   align-items: center;
   display: grid;
   gap: var(--sl-gutter);
-  grid-template-columns: minmax(var(--twitter-link-width), auto) 1fr;
+  grid-template-columns: minmax(var(--sl-width--twitter-link), auto) 1fr;
 
   @include breakpoints.sl-breakpoint--large {
-    grid-template-columns: minmax(var(--twitter-link-width), auto) minmax(
-        var(--mac-stadium-icon-width),
+    grid-template-columns: minmax(var(--sl-width--twitter-link), auto) minmax(
+        var(--sl-width--mac-stadium-icon),
         auto
       );
   }
diff --git a/source/assets/sass/config/_scale.scss b/source/assets/sass/config/_scale.scss
index a00d57b..ae9355a 100644
--- a/source/assets/sass/config/_scale.scss
+++ b/source/assets/sass/config/_scale.scss
@@ -57,5 +57,5 @@ $sl-playground-heading: 2.75rem;
 
 // Component Sizes Custom
 // ----------------------
-$mac-stadium-icon-width: 7rem;
-$twitter-link-width: 8rem;
+$sl-width--mac-stadium-icon: 7rem;
+$sl-width--twitter-link: 8rem;
diff --git a/source/assets/sass/config/color/_content.scss b/source/assets/sass/config/color/_content.scss
index 626fb8e..0cc1035 100644
--- a/source/assets/sass/config/color/_content.scss
+++ b/source/assets/sass/config/color/_content.scss
@@ -17,11 +17,17 @@ $sl-color--code-muted: #656556;
 $sl-color--code-base: #066;
 $sl-color--code-cool: #458;
 $sl-color--code-dark: black;
-$sl-color--border-blush: color.adjust(
+$sl-color--warning-light: color.adjust(
   brand.$sl-color--hopbush,
   $lightness: 27%
 );
-$sl-color--highlight-blush: rgba($sl-color--border-blush, 0.2);
+$sl-color--warning-lighter: color.adjust(
+  brand.$sl-color--hopbush,
+  $lightness: 38%
+);
+$sl-color--warning-highlight: rgba($sl-color--warning-light, 0.2);
+$sl-color--info-light: color.adjust(brand.$sl-color--patina, $lightness: 32%);
+$sl-color--info-lighter: color.adjust(brand.$sl-color--patina, $lightness: 47%);
 $sl-color--error: #cf0254;
 $sl-color--warn: #c14e00;
 $sl-color--success: #168073;
diff --git a/source/assets/sass/layout/_containers.scss b/source/assets/sass/layout/_containers.scss
index e647438..bf36326 100644
--- a/source/assets/sass/layout/_containers.scss
+++ b/source/assets/sass/layout/_containers.scss
@@ -4,17 +4,17 @@
 .sl-l-container {
   margin-left: auto;
   margin-right: auto;
-  max-width: var(--sl-container-max-width, functions.sl-px-to-rem(1920px));
-  padding-left: var(--container-inline-padding, var(--sl-gutter));
-  padding-right: var(--container-inline-padding, var(--sl-gutter));
+  max-width: var(--sl-max-width--container, functions.sl-px-to-rem(1920px));
+  padding-left: var(--sl-inline-padding--container, var(--sl-gutter));
+  padding-right: var(--sl-inline-padding--container, var(--sl-gutter));
 
   @include breakpoints.sl-breakpoint--small {
     padding-left: var(
-      --container-inline-padding-large,
+      --sl-inline-padding--container-large,
       var(--sl-gutter--double)
     );
     padding-right: var(
-      --container-inline-padding-large,
+      --sl-inline-padding--container-large,
       var(--sl-gutter--double)
     );
   }
diff --git a/source/assets/sass/visual-design/_theme.scss b/source/assets/sass/visual-design/_theme.scss
index f590c80..5f57d72 100644
--- a/source/assets/sass/visual-design/_theme.scss
+++ b/source/assets/sass/visual-design/_theme.scss
@@ -36,13 +36,13 @@ body {
 }
 
 a {
-  --sl-color-text--link: var(--sl-color--midnight-blue);
-  --sl-color-background--link: transparent;
+  --sl-color--link: var(--sl-color--midnight-blue);
+  --sl-background--link: transparent;
 
-  background: var(--sl-color-background--link);
+  background: var(--sl-background--link);
   border-bottom: var(--sl-border-width--link, var(--sl-border--small)) solid
     var(--sl-border-color--link, rgba(brand.$sl-color--iron, 0.5));
-  color: var(--sl-color-text--link);
+  color: var(--sl-color--link);
 
   .c1 & {
     color: inherit;
@@ -51,8 +51,8 @@ a {
   &:hover,
   &:focus {
     background: var(
-      --sl-color-background--link-state,
-      var(--sl-color--link-action, var(--sl-color-background--link))
+      --sl-background--link-state,
+      var(--sl-color--link-action, var(--sl-background--link))
     );
     border-bottom-color: var(
       --sl-border-color--link-state,
@@ -62,13 +62,13 @@ a {
       --sl-border-width--link-state,
       var(--sl-border-width--link, var(--sl-border--small))
     );
-    color: var(--sl-color-text--link-state, var(--sl-color-text--link));
+    color: var(--sl-color--link-state, var(--sl-color--link));
   }
 
   &:active {
     background: var(
-      --sl-color-background--link-active,
-      var(--sl-color-background--link)
+      --sl-background--link-active,
+      var(--sl-background--link)
     );
     border-bottom-color: var(
       --sl-border-color--link-active,
@@ -78,12 +78,12 @@ a {
       --sl-border-width--link-active,
       var(--sl-border-width--link, var(--sl-border--small))
     );
-    color: var(--sl-color-text--link-active, var(--sl-color-text--link));
+    color: var(--sl-color--link-active, var(--sl-color--link));
   }
 }
 
 .sl-image-link {
-  --sl-color-background--link-state: transparent;
+  --sl-background--link-state: transparent;
   --sl-border-color--link-state: transparent;
   --sl-border-width--link: 0;
 }