@chassis-ui/docs 0.1.0

package/src/scss/_navbar.scss

@@ -0,0 +1,138 @@
+.cxd-navbar {
+  // box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+  padding: 0;
+  // padding: .75rem 0;
+  background-color: rgba(var(--cx-bg-main-rgb), var(--cx-opacity-dim-main));
+  backdrop-filter: blur(24px);
+  border-bottom: var(--cx-border-width-medium) solid var(--cx-border-subtle);
+
+  // @media (forced-colors) {
+  //   background-color: Canvas;
+  // }
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    display: block;
+    content: "";
+    // background-image: linear-gradient(rgba(var(--cxd-subtle-rgb), 1), rgba(var(--cxd-subtle-rgb), .95));
+  }
+
+  .cxd-navbar-toggle {
+    @include media-breakpoint-down(large) {
+      width: 4.25rem;
+    }
+  }
+
+  .navbar-toggler {
+    padding: 0;
+    margin-right: -.5rem;
+    border: 0;
+
+    &:first-child {
+      margin-left: -.5rem;
+    }
+
+    .bi {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .navbar-brand {
+    color: $white;
+    @include transition(transform .2s ease-in-out);
+
+    // &:hover {
+    //   transform: rotate(-5deg) scale(1.1);
+    // }
+  }
+
+  .navbar-toggler,
+  .nav-link {
+    --cx-caret-color: var(--cx-fg-color);
+    @include font-size(var(--cx-font-size-small));
+    font-weight: var(--cx-font-weight-strong);
+    // line-height: 1.75em;
+    text-transform: uppercase;
+    .icon {
+      --cx-icon-color: var(--cx-fg-color);
+      height: 24px;
+      vertical-align: -.275em;
+    }
+
+    @include media-breakpoint-up(large) {
+      padding: var(--cx-space-large);
+      &.active {
+        padding-bottom: var(--cx-space-medium);
+        border-bottom: var(--cx-border-width-2xlarge) solid var(--cx-primary-cue-main);
+      }
+    }
+
+  }
+
+  .navbar-nav-svg {
+    display: inline-block;
+    vertical-align: -.125rem;
+  }
+
+  .offcanvas-large {
+    background-color: var(--cxd-subtle-bg);
+    border-left: 0;
+
+    @include media-breakpoint-down(large) {
+      height: 100vh;
+      box-shadow: var(--cx-box-shadow-large);
+    }
+  }
+
+  .dropdown-toggle {
+    &:focus:not(:focus-visible) {
+      outline: 0;
+    }
+  }
+
+  .dropdown-menu {
+    --cx-dropdown-min-width: 12rem;
+    --cx-dropdown-padding-x: .25rem;
+    --cx-dropdown-padding-y: .25rem;
+    --cx-dropdown-link-hover-bg: rgba(var(--cxd-subtle-rgb), .1);
+    --cx-dropdown-link-active-bg: rgba(var(--cxd-subtle-rgb), 1);
+    @include rfs(.875rem, --cx-dropdown-font-size);
+    @include font-size(.875rem);
+    @include border-radius(.5rem);
+    position: absolute;
+    box-shadow: $dropdown-box-shadow;
+
+    li + li {
+      margin-top: .125rem;
+    }
+
+    .dropdown-item {
+      @include border-radius(.25rem);
+
+      &:active {
+        .icon {
+          color: inherit !important; // stylelint-disable-line declaration-no-important
+        }
+      }
+    }
+
+    .active {
+      font-weight: 600;
+
+      .icon {
+        display: block !important; // stylelint-disable-line declaration-no-important
+      }
+    }
+  }
+
+  .dropdown-menu-end {
+    --cx-dropdown-min-width: 8rem;
+  }
+}

package/src/scss/_placeholder-img.scss

@@ -0,0 +1,15 @@
+//
+// Placeholder svg used in the docs.
+//
+
+// Remember to update `site/_layouts/examples.html` too if this changes!
+
+.cxd-placeholder-image {
+  @include font-size(1.125rem);
+  user-select: none;
+  text-anchor: middle;
+}
+
+.cxd-placeholder-image-large {
+  @include font-size(3.5rem);
+}

package/src/scss/_scrolling.scss

@@ -0,0 +1,16 @@
+// When navigating with the keyboard, prevent focus from landing behind the sticky header
+
+main {
+  a,
+  button,
+  input,
+  select,
+  textarea,
+  h2,
+  h3,
+  h4,
+  [tabindex="0"] {
+    scroll-margin-top: 80px;
+    scroll-margin-bottom: 100px;
+  }
+}

package/src/scss/_settings.scss

@@ -0,0 +1,37 @@
+$prefix: cx- !default;
+
+$color-mode-type:               data !default; // `data` or `media-query`
+
+$enable-accordion-sizes:        true !default;
+$enable-accordion-contexts:     true !default;
+$enable-button-pointers:        true !default;
+$enable-component-gradients:    false !default;
+$enable-component-shadows:      false !default;
+$enable-container-classes:      true !default;
+$enable-cssgrid:                true !default;
+$enable-dark-mode:              true !default;
+$enable-deprecation-messages:   true !default;
+$enable-elevation-shadows:      true !default;
+$enable-grid-classes:           true !default;
+$enable-important-utilities:    true !default;
+$enable-negative-margins:       true !default;
+$enable-padding-box:            true !default;
+$enable-reduced-motion:         true !default;
+$enable-rfs:                    false !default;
+$enable-rounded-borders:        true !default;
+$enable-smooth-scroll:          true !default;
+$enable-table-active-border:    true !default;
+$enable-table-border-radius:    true !default;
+$enable-table-font-tokens:      true !default;
+$enable-transitions:            true !default;
+$enable-validation-icons:       true !default;
+$enable-visited-links:          false !default;
+
+//
+// Icons
+//
+$icon-url-prefix:                "/icons/svgs/" !default;
+$icon-url-suffix:                ".svg" !default;
+
+// Import tokens from the Chassis Tokens package
+// @import "../node_modules/@chassis-ui/tokens/dist/tokens/web/chassis-docs/allTokens";

package/src/scss/_sidebar.scss

@@ -0,0 +1,161 @@
+.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);
+  }
+
+  @include media-breakpoint-down(large) {
+    .offcanvas-large {
+      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);
+  }
+
+  ul {
+    padding: 0;
+    margin: .25rem 0;
+    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);
+    }
+
+    li:first-child::before {
+      height: 2em;
+      margin-top: .8em;
+    }
+
+    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%);
+    }
+  }
+}
+
+.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);
+  }
+
+  @include media-breakpoint-between(xsmall, large) {
+    column-count: 2;
+    column-gap: 1.5rem;
+
+    .cxd-links-group {
+      break-inside: avoid;
+    }
+
+    .cxd-links-span-all {
+      column-span: all;
+    }
+  }
+}
+
+.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);
+  }
+
+  &.active {
+    font-weight: 600;
+    color: var(--cx-fg-active);
+    background-color: var(--cx-bg-active);
+  }
+  // .active &:not(.active):hover {
+  //   color: var(--cx-fg-color);
+  //   background-color: var(--cx-dim-slight);
+  // }
+
+  &:visited:not(.active):not(:hover):not(:focus) {
+    color: var(--cx-fg-color);
+  }
+}

package/src/scss/_skippy.scss

@@ -0,0 +1,7 @@
+.skippy {
+  background-color: $cxd-main;
+
+  a {
+    color: $white;
+  }
+}

package/src/scss/_syntax.scss

@@ -0,0 +1,158 @@
+:root,
+[data-cx-theme="light"] {
+  // --base00: #fff;
+  // --base01: #f5f5f5;
+  --base02: #c8c8fa;
+  --base03: #565c64;
+  --base04: #666;
+  --base05: #333;
+  --base06: #fff;
+  --base07: #{$teal-700}; // #9a6700
+  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+  --base09: #{$cyan-700}; // #087990
+  --base0A: #{$purple-500}; // #795da3
+  --base0B: #{$blue-700}; // #183691
+  --base0C: #{$blue-700}; // #183691
+  --base0D: #{$purple-500}; // #795da3
+  --base0E: #{$pink-600}; // #a71d5d
+  --base0F: #333;
+}
+
+@include color-mode(dark, true) {
+  // --base00: #282c34;
+  // --base01: #353b45;
+  --base02: #3e4451;
+  --base03: #868e96;
+  --base04: #868e96;
+  --base05: #abb2bf;
+  --base06: #b6bdca;
+  --base07: #{$orange-300}; // #d19a66
+  --base08: #{$cyan-300};
+  --base09: #{$orange-300}; // #d19a66
+  --base0A: #{$yellow-200}; // #e5c07b
+  --base0B: #{$teal-300}; // #98c379
+  --base0C: #{$teal-300}; // #56b6c2
+  --base0D: #{$blue-300}; // #61afef
+  --base0E: #{$indigo-200}; // #c678dd
+  --base0F: #{$red-300}; // #be5046
+}
+
+// Shell prompts
+.language-bash .line::before,
+.language-sh .line::before {
+  display: inline-block;
+  color: var(--base03);
+  content: "$ ";
+  user-select: none;
+}
+
+.language-powershell .line::before {
+  display: inline-block;
+  color: var(--base0C);
+  content: "PM> ";
+  user-select: none;
+}
+
+// Token styles
+.token {
+  &.comment,
+  &.prolog,
+  &.doctype,
+  &.cdata {
+    color: var(--base03);
+  }
+
+  &.punctuation {
+    color: var(--base05);
+  }
+
+  &.property {
+    color: var(--base0A);
+  }
+
+  &.tag {
+    color: var(--base08);
+  }
+
+  &.boolean,
+  &.number {
+    color: var(--base09);
+  }
+
+  &.constant,
+  &.symbol,
+  &.deleted {
+    color: var(--base08);
+  }
+
+  &.attr-name,
+  &.string,
+  &.char,
+  &.builtin,
+  &.inserted {
+    color: var(--base0C);
+  }
+
+  &.operator,
+  &.entity,
+  &.url {
+    color: var(--base05);
+  }
+
+  &.atrule,
+  &.attr-value,
+  &.keyword {
+    color: var(--base0E);
+  }
+
+  &.function {
+    color: var(--base0B);
+  }
+
+  &.selector,
+  &.class-name {
+    color: var(--base07);
+  }
+
+  &.regex,
+  &.important {
+    color: var(--base0A);
+  }
+
+  &.variable {
+    color: var(--base08);
+  }
+
+  &.important,
+  &.bold {
+    font-weight: $font-weight-bold;
+  }
+
+  &.italic {
+    font-style: italic;
+  }
+
+  &.entity {
+    cursor: help;
+  }
+}
+
+.language-diff {
+  .token {
+    &.deleted {
+      color: $red-400;
+      background-color: transparent;
+    }
+    &.inserted {
+      color: $green-400;
+      background-color: transparent;
+    }
+  }
+}
+
+.language-bash,
+.language-sh {
+  .token.comment {
+    color: var(--base03);
+  }
+}

package/src/scss/_toc.scss

@@ -0,0 +1,117 @@
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+
+.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);
+
+    ul {
+      padding-left: 0;
+      margin-bottom: 0;
+      list-style: none;
+
+      ul {
+        padding-left: 2rem;
+        margin-left: -1rem;
+      }
+    }
+
+    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;
+        }
+      }
+
+      &:hover,
+      &.active {
+        color: var(--cxd-toc-color);
+        border-left-color: var(--cxd-toc-color);
+      }
+
+      &.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%;
+  }
+
+  @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);
+    }
+
+    &:focus,
+    &[aria-expanded="true"] {
+      box-shadow: 0 0 0 3px rgba(var(--cxd-subtle-rgb), .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));
+    }
+  }
+
+  @include media-breakpoint-up(medium) {
+    display: block !important; // stylelint-disable-line declaration-no-important
+  }
+}