@chassis-ui/docs 0.2.0 → 0.3.0

package/src/scss/_toc.scss

@@ -1,117 +1,121 @@
-// stylelint-disable selector-max-type, selector-no-qualifying-type
+@use "@chassis-ui/css/scss/mixins" as *;
 
-.cxd-toc {
-  @include media-breakpoint-up(large) {
-    position: sticky;
-    top: 4rem;
-    right: 0;
-    z-index: 2;
-    // height: subtract(100vh, 7rem);
-    height: 100vh;
-    padding: 1rem;
-    padding-right: 0;
-    overflow-y: auto;
-    color: var(--cx-fg-subtle);
-    // border-image: linear-gradient(var(--cx-border-subtle) 25%, var(--cx-transparent-color) 50%) 1;
-    // border-width: 0;
-    // border-style: solid;
-    border-left: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
-  }
-  @include media-breakpoint-between(medium, large) {
-    padding: .5rem 1rem;
-    margin-bottom: 1rem;
-    background-color: var(--cx-bg-even);
-    border: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
-    @include border-radius(var(--cx-border-radius));
-  }
-
-  nav {
-    @include font-size(.875rem);
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+@layer custom {
+
+  .cxd-toc {
+    @include media-breakpoint-up(large) {
+      position: sticky;
+      top: 4rem;
+      right: 0;
+      z-index: 2;
+      // height: subtract(100vh, 7rem);
+      height: calc(100vh - 4rem);
+      padding: 1rem;
+      padding-inline-end: 0;
+      overflow-y: auto;
+      color: var(--cx-fg-subtle);
+      // border-image: linear-gradient(var(--cx-border-subtle) 25%, var(--cx-transparent-color) 50%) 1;
+      // border-width: 0;
+      // border-style: solid;
+      border-inline-start: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
+    }
+    @include media-breakpoint-between(medium, large) {
+      padding: .5rem 1rem;
+      margin-block-end: 1rem;
+      background-color: var(--cx-bg-even);
+      border: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
+      @include border-radius(var(--cx-border-radius-medium));
+    }
 
-    ul {
-      padding-left: 0;
-      margin-bottom: 0;
-      list-style: none;
+    nav {
+      @include font-size(.875rem);
 
       ul {
-        padding-left: 2rem;
-        margin-left: -1rem;
-      }
-    }
+        padding-inline-start: 0;
+        margin-block-end: 0;
+        list-style: none;
 
-    a {
-      display: block;
-      padding: .125rem 0 .125rem .5rem;
-      color: inherit;
-      text-decoration: none;
-      border-left: .125rem solid transparent;
-
-      @each $i in 1, 2, 3, 4, 5, 6 {
-        &.level-#{$i} {
-          padding-left: $i * 1rem;
-          margin-left: $i * -1rem;
+        ul {
+          padding-inline-start: 2rem;
+          margin-inline-start: -1rem;
         }
       }
 
-      &:hover,
-      &.active {
-        color: var(--cxd-toc-color);
-        border-left-color: var(--cxd-toc-color);
-      }
+      a {
+        display: block;
+        padding: .125rem 0 .125rem .5rem;
+        color: inherit;
+        text-decoration: none;
+        border-inline-start: .125rem solid transparent;
+
+        @each $i in 1, 2, 3, 4, 5, 6 {
+          &.level-#{$i} {
+            padding-inline-start: $i * 1rem;
+            margin-inline-start: $i * -1rem;
+          }
+        }
 
-      &.active {
-        font-weight: 500;
-      }
+        &:hover,
+        &.active {
+          color: var(--cxd-toc-color);
+          border-left-color: var(--cxd-toc-color);
+        }
 
-      code {
-        font: inherit;
+        &.active {
+          font-weight: 500;
+        }
+
+        code {
+          font: inherit;
+        }
       }
     }
   }
-}
 
-.cxd-toc-toggle {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-
-  @include media-breakpoint-down(small) {
-    justify-content: space-between;
-    width: 100%;
-  }
+  .cxd-toc-toggle {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
 
-  @include media-breakpoint-down(medium) {
-    color: var(--cx-fg-color);
-    border: var(--cx-border-width) var(--cx-border-style) var(--cx-border-color);
-    @include border-radius(var(--cx-border-radius));
-
-    &:hover,
-    &:focus,
-    &:active,
-    &[aria-expanded="true"] {
-      color: var(--cxd-subtle);
-      background-color: var(--cx-bg-color);
-      // border-color: var(--cxd-subtle);
+    @include media-breakpoint-down(small) {
+      justify-content: space-between;
+      width: 100%;
     }
 
-    &:focus,
-    &[aria-expanded="true"] {
-      box-shadow: 0 0 0 3px #{to-opacity(var(--cxd-subtle), .25)};
+    @include media-breakpoint-down(medium) {
+      color: var(--cx-fg-color);
+      border: var(--cx-border-width) var(--cx-border-style) var(--cx-border-color);
+      @include border-radius(var(--cx-border-radius-medium));
+
+      &:hover,
+      &:focus,
+      &:active,
+      &[aria-expanded="true"] {
+        color: var(--cxd-subtle);
+        background-color: var(--cx-bg-color);
+        // border-color: var(--cxd-subtle);
+      }
+
+      &:focus,
+      &[aria-expanded="true"] {
+        box-shadow: 0 0 0 3px #{to-opacity(var(--cxd-subtle), .25)};
+      }
     }
   }
-}
 
-.cxd-toc-collapse {
-  @include media-breakpoint-down(medium) {
-    nav {
-      padding: 1.25rem 1.25rem 1.25rem 1rem;
-      background-color: var(--cx-bg-even);
-      border: var(--cx-border-width) solid var(--cx-border-subtle);
-      @include border-radius(var(--cx-border-radius));
+  .cxd-toc-collapse {
+    @include media-breakpoint-down(medium) {
+      nav {
+        padding: 1.25rem 1.25rem 1.25rem 1rem;
+        background-color: var(--cx-bg-even);
+        border: var(--cx-border-width) solid var(--cx-border-subtle);
+        @include border-radius(var(--cx-border-radius-medium));
+      }
     }
-  }
 
-  @include media-breakpoint-up(medium) {
-    display: block !important; // stylelint-disable-line declaration-no-important
+    @include media-breakpoint-up(medium) {
+      display: block;
+    }
   }
 }

package/src/scss/_vars.scss

@@ -0,0 +1,89 @@
+// Local docs variables
+@use "@chassis-ui/css/scss/functions" as *;
+@use "@chassis-ui/css/scss/mixins" as *;
+
+$aqua:       #0cc !default;
+$black:      #000 !default;
+$blue:       #00f !default;
+$cyan:       #0cf !default;
+$green:      #090 !default;
+$gray:       #999 !default;
+$graydark:   #666 !default;
+$fuchsia:    #c0c !default;
+$indigo:     #639 !default;
+$olive:      #990 !default;
+$orange:     #f90 !default;
+$red:        #f00 !default;
+$pink:       #f39 !default;
+$purple:     #90f !default;
+$teal:       #099 !default;
+$violet:     #c3c !default;
+$white:      #fff !default;
+$yellow:     #fc0 !default;
+
+$cxd-gutter-x: 2rem;
+$cxd-callout-variants: info, warning, danger, default !default;
+
+:root {
+  --cxd-code-color: var(--cx-secondary-fg-main);
+  --cxd-main: var(--cx-primary);
+  --cxd-subtle: light-dark(var(--cx-primary-40), var(--cx-primary-60));
+  --cxd-pink-rgb: #{to-rgb($pink)};
+  --cxd-teal-rgb: #{to-rgb($teal)};
+  --cxd-main-bg: var(--cxd-main);
+  --cxd-subtle-bg: var(--cxd-subtle);
+  --cxd-toc-color: var(--cxd-main);
+  --cxd-sidebar-link-bg: var(--cx-bg-highlight);
+  // --cxd-callout-link: #{to-color($blue-600)};
+  // --cxd-callout-code-color: var(--cx-base-color);
+  // --cxd-pre-bg: var(--cx-bg-even);
+}
+
+
+@layer custom {
+
+  // @if $enable-dark-mode {
+  //   @include color-mode(dark, true) {
+  //     // color-scheme: dark;
+  //     // --cxd-toc-color: var(--cx-fg-subtle);
+  //     --cxd-sidebar-link-bg: var(--cx-primary-40);
+  //     // --cxd-callout-link: #{to-color($blue-300)};
+  //     // --cxd-callout-code-color: #{to-color($pink-300)};
+  //     //--cxd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
+  //     // --cxd-pre-bg: var(--cx-bg-evident);
+  //   }
+  // }
+
+  // @import "../../../tokens/default.scss";
+  //  h1:not(.cxd-example h1),
+  //  h2:not(.cxd-example h2),
+  //  h3:not(.cxd-example h3),
+  //  h4:not(.cxd-example h4),
+  //  h5:not(.cxd-example h5),
+  //  h6:not(.cxd-example h6) {
+  //    & ~ p,
+  //    & ~ ol,
+  //    & ~ ul {
+  //      font-family: var(--cx-font-family-display) !important;
+  //    }
+  //  }
+
+  // .cxd-intro h1 {
+  //   line-height: 1.25em;
+  // }
+  // .cxd-intro h1,
+  // .cxd-content > h1,
+  // .cxd-content > h2,
+  // .cxd-content > h3,
+  // .cxd-content > h4 {
+  //   font-family: var(--cx-font-family-display) !important;
+  //   font-weight: var(--cx-font-weight-display-strong) !important;
+  // }
+  //
+  // .cxd-playground textarea {
+  //   font-family: var(--cx-font-family-code) !important;
+  //   //font-size: var(--cx-font-small) !important;
+  //   background-color: var(--cx-default-bg-even) !important;
+  //   border-color: var(--cx-default-border-subtle);
+  // }
+}

package/src/scss/main.scss

@@ -1,101 +1,96 @@
-@import "settings";
+@use "@chassis-ui/css/scss/mixins" as *;
 
-@import "colors";
-@import "variables";
-@import "fonts";
+@forward "./fonts";
+@forward "./navbar";
+@forward "./content";
+@forward "./skippy";
+@forward "./sidebar";
+@forward "./layout";
+@forward "./toc";
+@forward "./footer";
+@forward "./snippets";
+@forward "./callouts";
+@forward "./placeholder-img";
+@forward "./scrolling";
 
-@import "navbar";
-@import "content";
-@import "skippy";
-@import "sidebar";
-@import "layout";
-@import "toc";
-@import "footer";
-@import "buttons";
-@import "code";
-@import "callouts";
-@import "brand";
-@import "clipboard-js";
-@import "placeholder-img";
-@import "scrolling";
+@forward "./shiki";
+@forward "./anchor";
+@forward "./search";
 
-@import "syntax";
-@import "anchor";
-
-@import "@docsearch/css/dist/style";
-@import "docsearch";
-
-/* Hide light-mode things when in dark mode */
-.visible-light {
-  [data-cx-theme="dark"] &:not([data-cx-theme="dark"] [data-cx-theme="light"] &) {
-    display: none;
+@layer custom {
+  /* Hide light-mode things when in dark mode */
+  .visible-light {
+    [data-cx-theme="dark"] &:not([data-cx-theme="dark"] [data-cx-theme="light"] &) {
+      display: none;
+    }
   }
-}
 
-/* Hide dark-mode things when in light mode */
-.visible-dark {
-  [data-cx-theme="light"] &:not([data-cx-theme="light"] [data-cx-theme="dark"] &) {
-    display: none;
+  /* Hide dark-mode things when in light mode */
+  .visible-dark {
+    [data-cx-theme="light"] &:not([data-cx-theme="light"] [data-cx-theme="dark"] &) {
+      display: none;
+    }
   }
-}
 
-.docs-body .navbar,
-.docs-body .cxd-footer {
-  .container.#{\32 xlarge} {
-    max-width: 100%;
+  .docs-body .navbar,
+  .docs-body .cxd-footer {
+    .container.#{\32 xlarge} {
+      max-width: 100%;
+    }
   }
-  .cxd-search {
-    @include media-breakpoint-up(2xlarge) {
-      right: 12rem;
-      left: auto;
+
+  code {
+    color: var(--cxd-code-color, var(--cx-code-color));
+    pre & {
+      color: inherit;
     }
   }
-}
 
-.home-section {
-  overflow: hidden;
-}
+  .home-section {
+    overflow: hidden;
+  }
 
-.section-content:has(.gallery-image) > div {
-  height: var(--gallery-image-height, 256px);
-  border: var(--#{$prefix}border-width-medium) solid var(--#{$prefix}bg-evident);
-}
+  .section-content:has(.gallery-image) > div {
+    height: var(--gallery-image-height, 256px);
+    border: var(--cx-border-width-medium) solid var(--cx-bg-evident);
+  }
 
-.gallery-image {
-  display: flex;
-  align-items: center;
+  .gallery-image {
+    display: flex;
+    align-items: center;
 
-  @include media-breakpoint-down(medium) {
-    margin-top: -25%;
-  }
+    @include media-breakpoint-down(medium) {
+      margin--block-start: -25%;
+    }
 
-  > img {
-    vertical-align: middle;
-    zoom: 1.5;
-    transform: rotate(30deg) skewX(-30deg) scaleY(.866);
+    > img {
+      vertical-align: middle;
+      zoom: 1.5;
+      transform: rotate(30deg) skewX(-30deg) scaleY(.866);
+    }
   }
-}
 
-.feature-item .cxd-code-snippet {
-  --cxicon-color: var(--#{$prefix}fg-color);
-  --cx-icon-size: 1em;
-  margin-bottom: 0;
-  background-color: var(--#{$prefix}bg-even);
-  border: 0;
+  .feature-item .cxd-code-snippet {
+    --cx-icon-color: var(--cx-fg-color);
+    --cx-icon-size: 1em;
+    margin-block-end: 0;
+    background-color: var(--cx-bg-even);
+    border: 0;
 
-  .highlight {
-    padding: var(--#{$prefix}space-medium);
-    background-color: var(--#{$prefix}bg-even);
-  }
-  pre {
-    padding: 0;
-    margin: 0;
-  }
-  > .cxd-clipboard {
-    display: none;
-  }
+    .cxd-code {
+      padding: var(--cx-space-medium);
+      background-color: var(--cx-bg-even);
+    }
+    pre {
+      padding: 0;
+      margin: 0;
+    }
+    > .cxd-clipboard {
+      display: none;
+    }
 
-  .token.comment {
-    color: var(--#{$prefix}fg-subtle);
+    .token.comment {
+      color: var(--cx-fg-subtle);
+    }
   }
 }