feat: refactor all demo styles

package.json

@@ -62,7 +62,7 @@
     "sweep": "rm -rf ./dist ./results ./sassdoc",
     "postinstall": "node packageScripts/postinstall.mjs",
     "jest": "jest",
-    "test": "npm-run-all scss:lint build:sass:test css:lint jest",
+    "test": "npm-run-all jest",
     "serve": "npm run build:sassdoc && node scripts/live-server.js",
     "watch": "nodemon -e scss --watch tests --watch src --exec npm run build:dev",
     "prepare": "husky"

src/elementDemoStyles/demoWrapper.scss

@@ -6,7 +6,7 @@
 
 // matches max-width of AS.com and Auro docsite width specs
 
-@import './../../node_modules/@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables.scss';
+@import './../../node_modules/@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables';
 
 body {
   padding: var(--ds-size-400, $ds-size-400);

src/elementDemoStyles/elementDemoStyles.scss

@@ -16,8 +16,7 @@
 @import './../normalize';
 @import './../headings';
 @import './../blockquote';
-@import "./../componentSupport/table";
-$paragraph: true;
+@import './../componentSupport/table';
 @import './../focus-visible';
 @import './../essentials/legacy/auro-classic';
 
@@ -60,71 +59,252 @@ $paragraph: true;
     }
   }
 
-  *:not(auro-table):not([auro-table]) > table {
+  table {
     @extend .auro_table;
   }
 }
 
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// Code / syntax highlighting
 // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 
-:not(pre) > code[class*="language-"], pre[class*="language-"] {
-  background: var(--ds-basic-color-surface-neutral-medium, $ds-basic-color-surface-neutral-medium);
+.hljs {
+  background-color: unset !important;
+  padding: unset !important;
 }
 
-// !important because that libraries that inline CSS SUCK!
-pre  {
-  background: var(--ds-basic-color-surface-neutral-medium, $ds-basic-color-surface-neutral-medium) !important;
+pre {
+  background: var(--ds-color-brand-gray-100, $ds-color-brand-gray-100) !important;
   border: unset !important;
+  padding: var(--ds-size-200) !important;
   margin-bottom: var(--ds-size-300, $ds-size-300) !important;
-  padding-left: var(--ds-size-150, $ds-size-150) !important;
-  padding-top: var(--ds-size-200, $ds-size-200) !important;
-  padding-bottom: var(--ds-size-200, $ds-size-200) !important;
+  border-style: solid !important;
+  border-width: 1px !important;
+  border-color: var(--ds-color-border-secondary-default) !important;
+  border-radius: .5rem;
+  margin-top: var(--ds-size-200) !important;
+  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+  overflow-x: scroll !important;
 
   code {
     font-size: .85rem !important;
+    font-family: monospace;
+    text-shadow: none;
   }
 }
 
-auro-accordion {
-  pre {
-    background: none !important;
-    margin-top: 0 !important;
-    margin-bottom: 1rem !important;
-    padding: 0 !important;
-  }
+.pre-wrapper:last-of-type pre {
+  margin-bottom: 0 !important;
+}
+
+code:not(.html):not(.css):not(.js):not([class*='language-']) {
+  color: var(--ds-color-brand-flamingo-500, $ds-color-brand-flamingo-500);
+  margin-bottom: 0 !important;
+}
+
+.token.operator {
+  background-color: unset !important;
+}
+
+auro-accordion:not(.section) {
+  margin-top: 1rem !important;
+  display: block;
+}
+
+auro-accordion:not(.section):nth-child(2) {
+  margin-block-start: 0;
+}
+
+auro-accordion[class~="section"]::part(accordion) {
+  padding-right: 2px;
+  display: block;
+}
+
+.accordion-content {
+  padding-top: 1rem;
 }
 
-auro-accordion + .exampleWrapper,
-auro-accordion + p {
-  margin-top: 2rem !important;
+.token.operator {
+  background-color: unset !important;
 }
 
-code[class*="language-"], pre[class*="language-"] {
-  font-family: monospace;
+auro-accordion:not(auro-accordion-group *) {
+  margin-top: 1rem !important;
+  display: block;
 }
 
-code:not(.html):not(.css):not(.js) {
-  color: var(--ds-color-utility-pink-default, $ds-color-utility-pink-default);
+.pre-wrapper {
+  position: relative;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  background: var(--ds-color-container-primary-default, #fff);
+  border: 1px solid var(--ds-color-border-secondary-default, #ccc);
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--ds-color-text-secondary-default, #333);
+  z-index: 1;
+
+  &:hover {
+    background: var(--ds-color-container-secondary-default, #f0f0f0);
+  }
 }
 
+.pre-wrapper:hover .copy-btn {
+  opacity: 1;
+}
+
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// Example wrappers
 // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 
-.exampleWrapper,
+.exampleWrapper {
+  background-color: var(--ds-basic-color-surface-default);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  margin-top: 1rem;
+}
+
 .exampleWrapper--ondark {
-  padding: 2rem;
+  background-color: var(--ds-basic-color-surface-inverse);
+  padding: 1rem;
   border-radius: 0.5rem;
-  border-width: 1px;
-  margin-bottom: 1rem;
-
-  box-shadow: var(--ds-elevation-100, 0px 2px 4px $ds-elevation-100);
+  margin-top: 1rem;
 }
-.exampleWrapper {
-  margin-bottom: 1rem;
-  border-style: solid;
-  border-color: var(--ds-basic-color-border-subtle, $ds-basic-color-border-subtle);
-  background: var(--ds-basic-color-surface-default, $ds-basic-color-surface-default);
+
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// Tables
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+table {
+  --ds-color-container-secondary-default: transparent;
+
+  &.compressed {
+    width: unset !important;
+    margin: var(--ds-size-50) 0 var(--ds-size-100) !important;
+
+    th,
+    td {
+      padding: var(--ds-size-50) !important;
+    }
+  }
 }
 
-.exampleWrapper--ondark {
-  background: var(--ds-basic-color-surface-inverse, $ds-basic-color-surface-inverse);
+tr:not(:last-of-type) {
+  border-bottom: 1px solid var(--ds-color-border-tertiary-default);
 }
+
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// Layout
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+body {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 25px;
+  align-items: flex-start;
+
+   > nav {
+    width: 200px;
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    overflow-y: auto;
+
+    auro-nav {
+      display: block;
+    }
+  }
+}
+
+// .contentWrapper > nav {
+//   width: 200px;
+//   flex-shrink: 0;
+//   position: sticky;
+//   top: 0;
+//   height: 100vh;
+//   overflow-y: auto;
+// }
+
+// .contentWrapper > nav auro-nav {
+//   display: block;
+// }
+
+.mainContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  flex-basis: 0;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.scrollWrapper {
+  flex: 1;
+  min-height: 0;
+}
+
+auro-nav {
+  max-width: 200px;
+  position: sticky;
+  top: 2rem;
+  align-self: flex-start;
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
+}
+
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// Misc elements
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+auro-anchorlink[class~="level2"] {
+  padding-left: var(--ds-size-200);
+}
+
+p:first-of-type {
+  margin-top: 0;
+}
+
+.note,
+.warning {
+  margin: 10px 0;
+  padding: 10px;
+  border-radius: 6px;
+  font-style: italic;
+}
+
+.note{
+  background-color: var(--ds-basic-color-surface-neutral-subtle);
+  color: var(--ds-basic-color-texticon-muted);
+}
+
+.warning {
+  background-color: var(--ds-basic-color-status-error-subtle);
+  color: var(--ds-basic-color-status-error)
+}
+
+auro-header {
+  margin-top: 1rem;
+}

tests/grids.spec.scss

@@ -236,7 +236,6 @@
           padding-right: 0;
           max-width: 1232px;
           gap: 2rem;
-          grid-template-areas: "breadcrumbs" "anchornav" "main";
         }
         @media screen and (min-width: 576px) {
           .pageLayout-2colAnchorNav {
@@ -258,6 +257,9 @@
             gap: var(--ds-grid-gutter-xl, 2rem);
           }
         }
+        .pageLayout-2colAnchorNav {
+          grid-template-areas: "breadcrumbs" "anchornav" "main";
+        }
       }
     }
   }
@@ -289,7 +291,6 @@
           padding-right: 0;
           max-width: 1232px;
           gap: 2rem;
-          grid-template-areas: "breadcrumbs" "sidenav" "main";
         }
         @media screen and (min-width: 576px) {
           .pageLayout-2colSideNav {
@@ -311,6 +312,9 @@
             gap: var(--ds-grid-gutter-xl, 2rem);
           }
         }
+        .pageLayout-2colSideNav {
+          grid-template-areas: "breadcrumbs" "sidenav" "main";
+        }
       }
     }
   }
@@ -343,7 +347,6 @@
           padding-right: 0;
           max-width: 1232px;
           gap: 2rem;
-          grid-template-areas: "breadcrumbs" "sidenav" "anchornav" "main";
         }
         @media screen and (min-width: 576px) {
           .pageLayout-3col {
@@ -365,6 +368,9 @@
             gap: var(--ds-grid-gutter-xl, 2rem);
           }
         }
+        .pageLayout-3col {
+          grid-template-areas: "breadcrumbs" "sidenav" "anchornav" "main";
+        }
       }
     }
   }

tests/scss.spec.js

@@ -9,9 +9,10 @@ describe('Sass', () => {
 
   // Requires describe and it methods provided
   sassTestFiles.forEach(file =>
-    sassTrue.runSass({
+    sassTrue.runSass(
+      { describe, it },
       file,
-      includePaths: [path.resolve(process.cwd(), 'node_modules')]
-    }, { describe, it })
+      { loadPaths: [path.resolve(process.cwd(), 'node_modules'), process.cwd()] }
+    )
   )
 })