@chassis-ui/docs 0.1.10 → 0.3.0

package/src/scss/_sidebar.scss

@@ -1,161 +1,166 @@
-.cxd-sidebar {
-  --#{$prefix}cue-main: var(--cx-secondary-cue-main);
-  --#{$prefix}bg-active: var(--cx-secondary-bg-solid);
-  --#{$prefix}fg-active: var(--cx-secondary-fg-solid);
-  --#{$prefix}bg-highlight: var(--cx-default-bg-highlight);
-  --#{$prefix}fg-highlight: var(--cx-fg-main);
-
-  @include media-breakpoint-up(large) {
-    position: sticky;
-    top: 4rem;
-    // background-color: var(--cx-bg-main);
-    // Override collapse behaviors
-    // stylelint-disable-next-line declaration-no-important
-    display: block !important;
-    height: subtract(100vh, 3rem);
-    padding: 1.5rem 0;
-    padding-right: .5rem;
-    overflow-x: visible;
-    // Prevent focus styles to be cut off:
-    overflow-y: auto;
-    border-right: var(--cx-border-width) solid var(--cx-border-subtle);
-  }
+@use "@chassis-ui/css/scss/config" as *;
+@use "@chassis-ui/css/scss/mixins" as *;
+
+@layer custom {
+  .cxd-sidebar {
+    --cx-cue-main: var(--cx-secondary-cue-main);
+    --cx-bg-active: var(--cx-secondary-bg-solid);
+    --cx-fg-active: var(--cx-secondary-fg-solid);
+    --cx-bg-highlight: var(--cx-default-bg-highlight);
+    --cx-fg-highlight: var(--cx-fg-main);
+
+    @include media-breakpoint-up(large) {
+      position: sticky;
+      top: 4rem;
+      display: block;
+      max-height: #{calc(100vh - 3rem)};
+      padding: 1.5rem 0;
+      padding-inline-end: .5rem;
+      overflow-x: visible;
+      // Prevent focus styles to be cut off:
+      overflow-y: auto;
+      border-inline-end: var(--cx-border-width) solid var(--cx-border-subtle);
+    }
 
-  @include media-breakpoint-down(large) {
-    .offcanvas-large {
-      border-right-color: var(--cx-border-color);
-      box-shadow: var(--cx-box-shadow-large);
+    @include media-breakpoint-down(large) {
+      .#{large-down\:}drawer {
+        border-right-color: var(--cx-border-color);
+        box-shadow: var(--cx-box-shadow-large);
+      }
     }
   }
-}
 
-.cxd-links {
-  position: relative;
-}
-
-.cxd-links-group {
-  // @include border-radius(var(--cx-border-radius));
-  padding: 0;
-  margin: 0;
-  margin-bottom: 1.5rem;
-  list-style: none;
-
-  &.active {
-    padding-right: .5rem;
-    margin-right: -.5rem;
-    // background-color: var(--cx-secondary-bg-main);
-    // border-right: var(--cx-indicator-size) var(--cx-border-style) var(--cx-cue-main);
+  .cxd-links {
+    position: relative;
   }
 
-  ul {
+  .cxd-links-group {
     padding: 0;
-    margin: .25rem 0;
+    margin: 0;
+    margin-block-end: 1rem;
     list-style: none;
-  }
 
-  @include media-breakpoint-up(large) {
-    li:has(.active) {
-      // --#{$prefix}cue-main: var(--cx-secondary-fg-main);
-    }
-    li::before {
-      position: absolute;
-      width: 1px;
-      height: 2em;
-      // margin-top: -.25rem;
-      margin-left: .4rem;
-      // content: "\F1AB";
-      font-family: var(--cx-font-family-icon);
-      content: " ";
-      background-color: var(--cx-cue-main);
+    &.active {
+      padding-inline-end: .5rem;
+      margin-inline-end: -.5rem;
     }
 
-    li:first-child::before {
-      height: 2em;
-      margin-top: .8em;
+    ul {
+      padding: 0;
+      margin: .25rem 0;
+      list-style: none;
     }
 
-    li:last-child::before {
-      height: .8em;
-    }
-
-    li:only-child::before {
-      height: .8em;
-      margin-top: .4em;
-    }
-
-    li::after {
-      //border-left: 8px var(--cx-border-style) var(--cx-secondary-base-color);
-      position: absolute;
-      left: 0;
-      width: .5rem;
-      height: 1px;
-      margin-top: .8em;
-      content: " ";
-      background-color: var(--cx-cue-main);
-      @include border-radius(50%);
+    @include media-breakpoint-up(large) {
+      li:has(.active) {
+        // --cx-cue-main: var(--cx-secondary-contrast-color);
+      }
+      li:not(.cxd-links-subgroup)::before {
+        position: absolute;
+        width: 1px;
+        height: 2em;
+        margin-inline-start: .4rem;
+        font-family: var(--cx-font-family-icon);
+        content: "";
+        background-color: var(--cx-cue-main);
+      }
+
+      li:not(.cxd-links-subgroup):first-child::before,
+      .cxd-links-subgroup + li::before {
+        height: 2em;
+        margin-block-start: .8em;
+      }
+
+      li:last-child::before,
+      li:has(+ .cxd-links-subgroup)::before {
+        height: .8em;
+      }
+
+      li:only-child::before {
+        height: .8em;
+        margin-block-start: .4em;
+      }
+
+      li:not(.cxd-links-subgroup)::after {
+        position: absolute;
+        left: 0;
+        width: .5rem;
+        height: 1px;
+        margin-block-start: .8em;
+        content: "";
+        background-color: var(--cx-cue-main);
+        @include border-radius(50%);
+        [dir="rtl"] & {
+          right: 0;
+          left: auto;
+        }
+      }
     }
   }
-}
-
-.cxd-links-heading {
-  --cx-icon-color: var(--cx-fg-main);
-  --cx-icon-size: var(--cx-icon-xsmall);
-  display: flex;
-  gap: var(--cx-space-xsmall);
-  align-items: center;
-  color: var(--cx-fg-main);
-}
 
+  .cxd-links-heading {
+    --cx-icon-color: var(--cx-fg-main);
+    --cx-icon-size: var(--cx-icon-xsmall);
+    display: flex;
+    gap: var(--cx-space-xsmall);
+    align-items: center;
+    color: var(--cx-fg-main);
+  }
 
-.cxd-links-nav {
-  @include media-breakpoint-down(large) {
-    @include font-size(.875rem);
+  .cxd-links-subgroup {
+    @include font-size(var(--cx-font-size-small));
+    @include line-height(var(--cx-line-height-small));
+    --cx-icon-size: var(--cx-icon-xsmall);
+    padding-inline-start: .5em;
+    margin-block: .5em .25em;
+    font-weight: var(--cx-font-weight-strong);
   }
 
-  @include media-breakpoint-between(xsmall, large) {
-    column-count: 2;
-    column-gap: 1.5rem;
 
-    .cxd-links-group {
-      break-inside: avoid;
+  .cxd-links-nav {
+    @include media-breakpoint-down(large) {
+      @include font-size(.875rem);
     }
 
-    .cxd-links-span-all {
-      column-span: all;
-    }
-  }
-}
+    @include media-breakpoint-between(xsmall, large) {
+      column-count: 2;
+      column-gap: 1.5rem;
 
-.cxd-links-link {
-  display: inline-block;
-  width: 100%;
-  padding: .15rem .5rem;
-  padding-left: 1.5rem;
-  margin-left: 0;
-  //margin-left: 1.125rem;
-  color: var(--cx-fg-color);
-  text-decoration: if($link-decoration == none, null, none);
-  @include font-size(var(--cx-font-size-small));
-  @include border-radius(var(--cx-border-radius));
-
-  &:hover,
-  &:focus {
-    color: var(--cx-fg-highlight);
-    //text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: var(--cx-bg-highlight);
-  }
+      .cxd-links-group {
+        break-inside: avoid;
+      }
 
-  &.active {
-    font-weight: 600;
-    color: var(--cx-fg-active);
-    background-color: var(--cx-bg-active);
+      .cxd-links-span-all {
+        column-span: all;
+      }
+    }
   }
-  // .active &:not(.active):hover {
-  //   color: var(--cx-fg-color);
-  //   background-color: var(--cx-dim-slight);
-  // }
 
-  &:visited:not(.active):not(:hover):not(:focus) {
+  .cxd-links-link {
+    display: inline-block;
+    width: 100%;
+    padding: .15rem .5rem;
+    padding-inline-start: 1.5rem;
+    margin-inline-start: 0;
     color: var(--cx-fg-color);
+    text-decoration: if(sass($link-decoration == none): null; else: none);
+    @include font-size(var(--cx-font-size-small));
+    @include border-radius(var(--cx-border-radius-medium));
+
+    &:hover,
+    &:focus {
+      color: var(--cx-fg-highlight);
+      background-color: var(--cx-bg-highlight);
+    }
+
+    &.active {
+      font-weight: 600;
+      color: var(--cx-fg-active);
+      background-color: var(--cx-bg-active);
+    }
+
+    &:visited:not(.active):not(:hover):not(:focus) {
+      color: var(--cx-fg-color);
+    }
   }
 }

package/src/scss/_skippy.scss

@@ -1,7 +1,9 @@
-.skippy {
-  background-color: $cxd-main;
+@layer custom {
+  .skippy {
+    background-color: var(--cx-primary-base-color);
 
-  a {
-    color: $white;
+    a {
+      color: var(--cx-primary-contrast-color);
+    }
   }
 }

package/src/scss/_snippets.scss

@@ -0,0 +1,181 @@
+@use "./vars" as *;
+@use "@chassis-ui/css/scss/mixins" as *;
+
+//
+// Docs examples
+//
+
+@layer custom {
+  .cxd-code-snippet {
+    //background-color: var(--cx-bg-evident);
+    position: relative;
+    margin: 0 ($cxd-gutter-x * -.5) 1rem;
+    border: solid var(--cx-border-subtle);
+    border-width: 1px 0;
+
+    @include media-breakpoint-up(medium) {
+      margin-inline: 0;
+      border-width: 1px;
+      @include border-radius(var(--cx-border-radius-medium));
+    }
+  }
+
+  .cxd-example {
+    --cxd-example-padding: 1rem;
+    position: relative;
+    display: flow-root;
+    padding: var(--cxd-example-padding);
+    margin: 0 ($cxd-gutter-x * -.5) 1rem;
+    background-color: var(--cx-bg-main);
+    border: solid var(--cx-border-subtle);
+    border-width: 1px 0;
+    // @include clearfix();
+
+    @include media-breakpoint-up(medium) {
+      --cxd-example-padding: 1.5rem;
+      margin-inline: 0;
+      border-width: 1px;
+      @include border-radius(var(--cx-border-radius-medium));
+      &:has(~ .cxd-snippet-toolbar) {
+        @include border-bottom-radius(0);
+      }
+    }
+
+    + p {
+      margin-block-start: 2rem;
+    }
+  }
+
+  .cxd-pattern-dots {
+    // background-color: var(--cx-bg-even);
+    background-image: radial-gradient(var(--cx-dim-slight) 2px, transparent 2px);
+    background-size: 12px 12px;
+  }
+
+  .cxd-pattern-diagonal {
+    // background-color: var(--cx-bg-even);
+    background-image: repeating-linear-gradient(-45deg, var(--cx-border-subtle) 0 1px, transparent 0 50%);
+    background-clip: padding-box;
+    background-size: 8px 8px;
+  }
+
+
+  //
+  // Code snippets
+  //
+
+  .cxd-code {
+    --cxd-code-padding: 1.25rem;
+    position: relative;
+    background-color: var(--cxd-pre-bg, var(--cx-bg-even));
+
+    @include media-breakpoint-up(medium) {
+      @include border-radius(calc(var(--cx-border-radius-medium) - 1px));
+    }
+
+    .cxd-clipboard ~ & {
+      padding-inline-end: 3rem;
+    }
+
+    pre {
+      padding: var(--cxd-code-padding);
+      margin-block-end: 0;
+      overflow: overlay;
+      @include font-size(var(--cx-font-size-code-small));
+      line-height: var(--cx-line-height-code-small);
+      white-space: pre;
+      background-color: transparent;
+      border: 0;
+    }
+
+    pre code {
+      color: var(--cx-fg-color); // Effectively the base text color
+      word-wrap: normal;
+    }
+  }
+
+  .cxd-example-snippet .cxd-code pre {
+    margin-inline-end: 0;
+  }
+
+  .cxd-snippet-toolbar {
+    display: flex;
+    gap: var(--cx-space-xsmall);
+    align-items: center;
+    padding-block: var(--cx-space-2xsmall);
+    padding-inline: var(--cx-space-small) var(--cx-space-xsmall);
+    background-color: var(--cxd-pre-bg, var(--cx-bg-even));
+    border-block-end: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
+    .cxd-example ~ & {
+      border-block-start: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
+    }
+
+    + .cxd-code {
+      @include border-top-radius(0);
+    }
+
+    > a {
+      @include font-size(var(--cx-font-size-small));
+    }
+  }
+
+  .cxd-file-ref {
+    .cxd-snippet-toolbar {
+      border-block-start: 0;
+      @include media-breakpoint-up(medium) {
+        @include border-top-radius(calc(var(--cx-border-radius-medium) - 1px));
+      }
+    }
+  }
+
+  .cxd-content .cxd-code-snippet {
+    margin-block-end: 1rem;
+  }
+
+  //
+  // Snippet buttons
+  //
+  .cxd-clipboard,
+  .cxd-edit,
+  .cxd-mode {
+    position: absolute;
+    inset-block-start: 1rem;
+    inset-inline-end: .75rem;
+    z-index: 3;
+    display: block;
+  }
+  .cxd-mode {
+    inset-block-start: .75rem;
+    &:not(.cxd-example:hover &) {
+      display: none;
+    }
+  }
+
+  .button-mode,
+  .button-clipboard,
+  .button-edit {
+    --cx-icon-color: var(--cx-fg-subtle);
+    --cx-icon-size: var(--cx-icon-small);
+    display: block;
+    padding: .25em;
+    line-height: 1;
+    background-color: transparent;
+    border: 0;
+    @include border-radius(.25rem);
+
+    &:hover {
+      color: var(--cx-hover-color);
+    }
+
+    &:focus {
+      z-index: 3;
+    }
+  }
+
+  .button-mode,
+  .button-clipboard {
+    position: relative;
+    z-index: 2;
+  }
+
+}