use namespacing, automatic sl- prefix added

sass · Feb 21, 2023 · 5f48137 · 5f48137
1 parent 94edd2b
commit 5f48137
Show file tree

Hide file tree

Showing 18 changed files with 130 additions and 130 deletions.
diff --git a/source/assets/sass/components/_alerts.scss b/source/assets/sass/components/_alerts.scss
@@ -12,8 +12,8 @@
   font-size: var(--sl-font-size--small);
 
   padding: {
-    top: var(--alert-padding-block, var(--gutter-minus));
-    bottom: var(--alert-padding-block, var(--gutter-minus));
+    top: var(--alert-padding-block, var(--sl-gutter--minus));
+    bottom: var(--alert-padding-block, var(--sl-gutter--minus));
   }
 
   text-align: var(--alert-align, center);
@@ -60,7 +60,7 @@
 .sl-c-alert--special {
   --alert-align: left;
   --alert-bg: black;
-  --alert-padding-block: var(--gutter-triple);
+  --alert-padding-block: var(--sl-gutter--triple);
 }
 
 .sl-c-alert-title {

diff --git a/source/assets/sass/components/_attribution.scss b/source/assets/sass/components/_attribution.scss
@@ -6,7 +6,7 @@
 
   &:first-child {
     text-align: center;
-    margin-top: var(--gutter-triple-negative);
-    margin-bottom: var(--gutter-double);
+    margin-top: var(--sl-gutter--triple-negative);
+    margin-bottom: var(--sl-gutter--double);
   }
 }
diff --git a/source/assets/sass/components/_buttons.scss b/source/assets/sass/components/_buttons.scss
@@ -8,8 +8,8 @@
   justify-content: center;
   margin: 0;
   border: 0;
-  border-radius: var(--border-radius-large);
-  padding: var(--gutter-minus) var(--gutter);
+  border-radius: var(--sl-border-radius--large);
+  padding: var(--sl-gutter--minus) var(--sl-gutter);
   background: theme.$sl-color--iron;
   box-shadow: 0 2px 1px rgba(theme.$sl-color--midnight-blue, 0.125);
   color: color.adjust(theme.$sl-color--hopbush, $lightness: -10%);

diff --git a/source/assets/sass/components/_callouts.scss b/source/assets/sass/components/_callouts.scss
@@ -3,39 +3,39 @@
 @use '../visual-design/theme';
 
 .sl-c-callout {
-  margin: var(--gutter-sesqui) 0;
-  padding: var(--gutter-sesqui) var(--gutter);
+  margin: var(--sl-gutter--sesqui) 0;
+  padding: var(--sl-gutter--sesqui) var(--sl-gutter);
   background: color.adjust(theme.$sl-color--pale-sky, $lightness: 60%);
-  border-radius: var(--border-radius-small);
+  border-radius: var(--sl-border-radius--small);
 
   &--warning {
     background: color.adjust(theme.$sl-color--hopbush, $lightness: 38%);
-    border: var(--border-small) solid
+    border: var(--sl-border--small) solid
       color.adjust(theme.$sl-color--hopbush, $lightness: 27%);
   }
 
   &--fun-fact {
     background: color.adjust(theme.$sl-color--patina, $lightness: 47%);
-    border: var(--border-small) solid
+    border: var(--sl-border--small) solid
       color.adjust(theme.$sl-color--patina, $lightness: 32%);
   }
 
   &--function {
-    padding-bottom: var(--gutter-quarter);
+    padding-bottom: var(--sl-gutter--quarter);
     padding-top: 0;
 
     .signature {
       // Make sure permalinks are visible.
       overflow: visible;
-      margin-left: var(--gutter-negative);
-      margin-right: var(--gutter-negative);
+      margin-left: var(--sl-gutter--negative);
+      margin-right: var(--sl-gutter--negative);
     }
   }
 
   &--impl-status {
-    font-size: var(--status-text-size);
-    margin-top: var(--gutter-negative);
-    padding: var(--gutter-minus);
+    font-size: var(--sl-status-text-size);
+    margin-top: var(--sl-gutter--negative);
+    padding: var(--sl-gutter--minus);
 
     .sl-c-callout & {
       background: color.adjust(theme.$sl-color--pale-sky, $lightness: 53%);

diff --git a/source/assets/sass/components/_inputs.scss b/source/assets/sass/components/_inputs.scss
@@ -3,13 +3,13 @@
 
 input {
   display: block;
-  margin: 0 var(--gutter);
-  border: var(--border-small) solid theme.$sl-color--iron;
-  padding: var(--gutter-quarter) var(--gutter);
+  margin: 0 var(--sl-gutter);
+  border: var(--sl-border--small) solid theme.$sl-color--iron;
+  padding: var(--sl-gutter--quarter) var(--sl-gutter);
   width: 100%;
 
   @include breakpoints.sl-breakpoint--large {
-    top: var(--gutter-half);
+    top: var(--sl-gutter--half);
     margin: 0;
   }
 }
diff --git a/source/assets/sass/components/_link-header.scss b/source/assets/sass/components/_link-header.scss
@@ -12,7 +12,7 @@ h6,
     float: left;
     vertical-align: middle;
     margin-top: -3px;
-    width: var(--gutter-sesqui);
+    width: var(--sl-gutter--sesqui);
     background: none;
     border: 0;
 
@@ -36,7 +36,7 @@ h4,
 h5,
 h6 {
   a.anchor {
-    margin-left: var(--gutter-sesqui-negative);
+    margin-left: var(--sl-gutter--sesqui-negative);
   }
 
   &:target {
@@ -57,7 +57,7 @@ h6 {
 
 .signature {
   a.anchor {
-    margin-left: var(--gutter-double-sesqui-negative);
+    margin-left: var(--sl-gutter--double-sesqui-negative);
   }
 
   .sl-c-callout--function:target & {

diff --git a/source/assets/sass/components/_lists.scss b/source/assets/sass/components/_lists.scss
@@ -16,22 +16,22 @@
     @include breakpoints.sl-breakpoint--medium {
       // add margin-bottom space
       // to the twitter follow button
-      margin-bottom: var(--gutter);
+      margin-bottom: var(--sl-gutter);
     }
 
     @include breakpoints.sl-breakpoint--large {
       ul {
         display: flex;
         margin: {
-          right: var(--gutter-half-negative);
-          left: var(--gutter-half-negative);
+          right: var(--sl-gutter--half-negative);
+          left: var(--sl-gutter--half-negative);
         }
       }
 
       li {
         padding: {
-          right: var(--gutter-half);
-          left: var(--gutter-half);
+          right: var(--sl-gutter--half);
+          left: var(--sl-gutter--half);
         }
       }
     }
@@ -41,30 +41,30 @@
     position: relative;
 
     li {
-      margin: var(--gutter-half) 0;
+      margin: var(--sl-gutter--half) 0;
       line-height: 1.25;
     }
 
     &--collapsible {
       user-select: none;
 
       ul ul a {
-        padding-left: var(--gutter);
+        padding-left: var(--sl-gutter);
       }
 
       ul ul ul a {
-        padding-left: var(--gutter-double);
+        padding-left: var(--sl-gutter--double);
       }
 
       ul ul ul ul a {
-        padding-left: var(--gutter-triple);
+        padding-left: var(--sl-gutter--triple);
       }
 
       a {
         border: none;
         cursor: pointer;
         display: block;
-        margin: var(--gutter-half-negative) 0;
+        margin: var(--sl-gutter--half-negative) 0;
         padding: 0.3rem;
         width: 100%;
 
@@ -90,7 +90,7 @@
             text-align: center;
             margin-top: 5px;
             transition: transform 0.1s;
-            width: var(--gutter-plus);
+            width: var(--sl-gutter--plus);
           }
 
           &.open::after {
@@ -120,8 +120,8 @@
 
 .sl-c-description-list--horizontal {
   margin: {
-    right: var(--gutter-negative);
-    left: var(--gutter-negative);
+    right: var(--sl-gutter--negative);
+    left: var(--sl-gutter--negative);
   }
 
   &,
@@ -130,8 +130,8 @@
   }
 
   > div {
-    border-left: var(--border-small) solid theme.$sl-color--iron;
-    padding: 0 var(--gutter);
+    border-left: var(--sl-border--small) solid theme.$sl-color--iron;
+    padding: 0 var(--sl-gutter);
 
     &:first-child {
       border: 0;
@@ -150,16 +150,16 @@
 
   dt,
   dd {
-    padding-left: var(--gutter);
+    padding-left: var(--sl-gutter);
 
     &:first-child {
       padding-left: 0;
     }
   }
 
   &.impl-status {
-    font-size: var(--status-text-size);
-    margin-top: var(--gutter-negative);
+    font-size: var(--sl-status-text-size);
+    margin-top: var(--sl-gutter--negative);
 
     dt {
       word-break: normal;
@@ -170,7 +170,7 @@
       border-bottom: none;
       background: none;
       cursor: pointer;
-      width: var(--gutter-plus);
+      width: var(--sl-gutter--plus);
       text-align: center;
 
       &.expanded {

diff --git 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 {
   width: 7rem;
-  margin-top: var(--gutter);
+  margin-top: var(--sl-gutter);
 }
diff --git a/source/assets/sass/components/_sass-syntax-switcher.scss b/source/assets/sass/components/_sass-syntax-switcher.scss
@@ -57,8 +57,8 @@
 
   .ui-tabs-nav {
     font-size: var(--sl-font-size--small);
-    margin-top: var(--gutter-negative);
-    margin-left: var(--gutter-negative);
+    margin-top: var(--sl-gutter--negative);
+    margin-left: var(--sl-gutter--negative);
 
     a {
       border: 0;
@@ -82,7 +82,7 @@
       &.css-tab {
         &,
         &.ui-tabs-active {
-          margin-left: var(--gutter-double);
+          margin-left: var(--sl-gutter--double);
         }
 
         a::before {
@@ -92,13 +92,13 @@
           font-weight: typography.$sl-font-weight--bold;
           left: -1.2em;
           position: absolute;
-          top: var(--gutter-minus);
+          top: var(--sl-gutter--minus);
         }
       }
     }
 
     .ui-tabs-anchor {
-      padding: var(--gutter-minus) var(--gutter);
+      padding: var(--sl-gutter--minus) var(--sl-gutter);
     }
   }
 

diff --git a/source/assets/sass/components/_tables.scss b/source/assets/sass/components/_tables.scss
@@ -1,15 +1,15 @@
 @use '../breakpoints';
 
 .sl-c-table {
-  margin: var(--gutter-sesqui) 0;
+  margin: var(--sl-gutter--sesqui) 0;
   border: 0;
   width: 100%;
   max-width: 100%;
 
   td,
   th {
     border: 0;
-    padding: var(--gutter-minus) var(--table-cell-padding);
+    padding: var(--sl-gutter--minus) var(--sl-table-cell-padding);
     vertical-align: top;
   }
 
@@ -20,7 +20,7 @@
 
   @include breakpoints.sl-breakpoint--medium-max {
     &-responsive {
-      margin-bottom: var(--gutter-sesqui);
+      margin-bottom: var(--sl-gutter--sesqui);
       width: 100%;
       overflow: {
         x: auto;