@chassis-ui/docs 0.1.0

package/src/scss/_colors.scss

@@ -0,0 +1,140 @@
+// Colors used in Chassis Docs for custom components and syntax highlighting.
+
+$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;
+
+// $gray-100: #f8f9fa !default;
+// $gray-200: #e9ecef !default;
+// $gray-300: #dee2e6 !default;
+// $gray-400: #ced4da !default;
+// $gray-500: #adb5bd !default;
+// $gray-600: #6c757d !default;
+// $gray-700: #495057 !default;
+// $gray-800: #343a40 !default;
+// $gray-900: #212529 !default;
+
+$gray-100: tint-color($gray, 80%) !default;
+$gray-200: tint-color($gray, 60%) !default;
+$gray-300: tint-color($gray, 40%) !default;
+$gray-400: tint-color($gray, 20%) !default;
+$gray-500: $gray !default;
+$gray-600: shade-color($gray, 20%) !default;
+$gray-700: shade-color($gray, 40%) !default;
+$gray-800: shade-color($gray, 60%) !default;
+$gray-900: shade-color($gray, 80%) !default;
+
+$blue-100: tint-color($blue, 80%) !default;
+$blue-200: tint-color($blue, 60%) !default;
+$blue-300: tint-color($blue, 40%) !default;
+$blue-400: tint-color($blue, 20%) !default;
+$blue-500: $blue !default;
+$blue-600: shade-color($blue, 20%) !default;
+$blue-700: shade-color($blue, 40%) !default;
+$blue-800: shade-color($blue, 60%) !default;
+$blue-900: shade-color($blue, 80%) !default;
+
+$indigo-100: tint-color($indigo, 80%) !default;
+$indigo-200: tint-color($indigo, 60%) !default;
+$indigo-300: tint-color($indigo, 40%) !default;
+$indigo-400: tint-color($indigo, 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: shade-color($indigo, 20%) !default;
+$indigo-700: shade-color($indigo, 40%) !default;
+$indigo-800: shade-color($indigo, 60%) !default;
+$indigo-900: shade-color($indigo, 80%) !default;
+
+$purple-100: tint-color($purple, 80%) !default;
+$purple-200: tint-color($purple, 60%) !default;
+$purple-300: tint-color($purple, 40%) !default;
+$purple-400: tint-color($purple, 20%) !default;
+$purple-500: $purple !default;
+$purple-600: shade-color($purple, 20%) !default;
+$purple-700: shade-color($purple, 40%) !default;
+$purple-800: shade-color($purple, 60%) !default;
+$purple-900: shade-color($purple, 80%) !default;
+
+$pink-100: tint-color($pink, 80%) !default;
+$pink-200: tint-color($pink, 60%) !default;
+$pink-300: tint-color($pink, 40%) !default;
+$pink-400: tint-color($pink, 20%) !default;
+$pink-500: $pink !default;
+$pink-600: shade-color($pink, 20%) !default;
+$pink-700: shade-color($pink, 40%) !default;
+$pink-800: shade-color($pink, 60%) !default;
+$pink-900: shade-color($pink, 80%) !default;
+
+$red-100: tint-color($red, 80%) !default;
+$red-200: tint-color($red, 60%) !default;
+$red-300: tint-color($red, 40%) !default;
+$red-400: tint-color($red, 20%) !default;
+$red-500: $red !default;
+$red-600: shade-color($red, 20%) !default;
+$red-700: shade-color($red, 40%) !default;
+$red-800: shade-color($red, 60%) !default;
+$red-900: shade-color($red, 80%) !default;
+
+$orange-100: tint-color($orange, 80%) !default;
+$orange-200: tint-color($orange, 60%) !default;
+$orange-300: tint-color($orange, 40%) !default;
+$orange-400: tint-color($orange, 20%) !default;
+$orange-500: $orange !default;
+$orange-600: shade-color($orange, 20%) !default;
+$orange-700: shade-color($orange, 40%) !default;
+$orange-800: shade-color($orange, 60%) !default;
+$orange-900: shade-color($orange, 80%) !default;
+
+$yellow-100: tint-color($yellow, 80%) !default;
+$yellow-200: tint-color($yellow, 60%) !default;
+$yellow-300: tint-color($yellow, 40%) !default;
+$yellow-400: tint-color($yellow, 20%) !default;
+$yellow-500: $yellow !default;
+$yellow-600: shade-color($yellow, 20%) !default;
+$yellow-700: shade-color($yellow, 40%) !default;
+$yellow-800: shade-color($yellow, 60%) !default;
+$yellow-900: shade-color($yellow, 80%) !default;
+
+$green-100: tint-color($green, 80%) !default;
+$green-200: tint-color($green, 60%) !default;
+$green-300: tint-color($green, 40%) !default;
+$green-400: tint-color($green, 20%) !default;
+$green-500: $green !default;
+$green-600: shade-color($green, 20%) !default;
+$green-700: shade-color($green, 40%) !default;
+$green-800: shade-color($green, 60%) !default;
+$green-900: shade-color($green, 80%) !default;
+
+$teal-100: tint-color($teal, 80%) !default;
+$teal-200: tint-color($teal, 60%) !default;
+$teal-300: tint-color($teal, 40%) !default;
+$teal-400: tint-color($teal, 20%) !default;
+$teal-500: $teal !default;
+$teal-600: shade-color($teal, 20%) !default;
+$teal-700: shade-color($teal, 40%) !default;
+$teal-800: shade-color($teal, 60%) !default;
+$teal-900: shade-color($teal, 80%) !default;
+
+$cyan-100: tint-color($cyan, 80%) !default;
+$cyan-200: tint-color($cyan, 60%) !default;
+$cyan-300: tint-color($cyan, 40%) !default;
+$cyan-400: tint-color($cyan, 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: shade-color($cyan, 20%) !default;
+$cyan-700: shade-color($cyan, 40%) !default;
+$cyan-800: shade-color($cyan, 60%) !default;
+$cyan-900: shade-color($cyan, 80%) !default;

package/src/scss/_content.scss

@@ -0,0 +1,141 @@
+//
+// Chassis - CSS docs content theming
+//
+
+.cxd-content {
+  padding-bottom: 2rem;
+  > h2,
+  > h3,
+  > h4 {
+    --cx-heading-color: var(--cx-fg-main);
+  }
+
+  // Offset content from fixed navbar when jumping to headings
+  > h2:not(:first-child) {
+    margin-top: 3rem;
+  }
+
+  > h3 {
+    margin-top: 2rem;
+  }
+
+  > ul li,
+  > ol li {
+    margin-bottom: .25rem;
+
+    // stylelint-disable selector-max-type, selector-max-compound-selectors
+    > p ~ ul {
+      margin-top: -.5rem;
+      margin-bottom: 1rem;
+    }
+    // stylelint-enable selector-max-type, selector-max-compound-selectors
+  }
+
+  // Override Chassis - CSS defaults
+  > .table,
+  > .table-responsive .table {
+    // --cx-table-border-color: var(--cx-border-color);
+
+    max-width: 100%;
+    margin-bottom: 1.5rem;
+    @include font-size(.875rem);
+
+    @include media-breakpoint-down(large) {
+      &.table-bordered {
+        border: 0;
+      }
+    }
+
+    thead {
+      border-bottom: 2px solid currentcolor;
+    }
+
+    tbody:not(:first-child) {
+      border-top: 2px solid currentcolor;
+    }
+
+    th,
+    td {
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:not(:last-child) {
+        padding-right: 1.5rem;
+      }
+    }
+
+    th {
+      color: var(--cx-fg-main);
+    }
+
+    strong {
+      color: var(--cx-fg-main);
+    }
+
+    // Prevent breaking of code
+    th,
+    td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
+      white-space: nowrap;
+    }
+  }
+}
+
+.table-options {
+  td:nth-child(2) {
+    min-width: 160px;
+  }
+}
+
+.table-options td:last-child,
+.table-utilities td:last-child {
+  min-width: 280px;
+}
+
+.table-swatches {
+  th {
+    color: var(--cx-fg-main);
+  }
+
+  td code {
+    white-space: nowrap;
+  }
+}
+
+.cxd-title {
+  --cx-heading-color: var(--cx-fg-main);
+  --cx-font-size: 3rem;
+}
+
+.cxd-subtitle {
+  @include map-font($font-context-lead, "blockquote");
+  @include font();
+  // font-size: 1.2rem;
+  // line-height: 1.5em;
+  // font-family: var(--cx-font-family-display) !important;
+}
+
+.bi {
+  width: 1em;
+  height: 1em;
+  vertical-align: -.125em;
+  fill: currentcolor;
+}
+
+.border-large-start {
+  @include media-breakpoint-up(large) {
+    border-left: var(--cx-border-width) solid var(--cx-border-color);
+  }
+}
+
+// stylelint-disable selector-no-qualifying-type
+.cxd-summary-link {
+  color: var(--cx-link-color);
+
+  &:hover,
+  details[open] > & {
+    color: var(--cx-hover-color);
+  }
+}
+// stylelint-enable selector-no-qualifying-type
+

package/src/scss/_docsearch.scss

@@ -0,0 +1,174 @@
+// stylelint-disable selector-class-pattern
+
+:root {
+  --docsearch-primary-color: var(--cxd-subtle);
+  --docsearch-logo-color: var(--cxd-subtle);
+}
+
+@include color-mode(dark, true) {
+  // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
+  // in html[data-theme="dark"] selector
+  // and are slightly modified for formatting purpose
+  --docsearch-text-color: var(--cx-fg-main);
+  --docsearch-container-background: rgba(9, 10, 17, .8);
+  --docsearch-modal-background: #15172a;
+  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  --docsearch-searchbox-background: var(--cx-bg-main, #fc0);
+  --docsearch-searchbox-focus-background:
+    var(--cx-bg-hover, #fc0)
+    --docsearch-hit-color: #bec3c9;
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-background: #090a11;
+  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
+  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
+  --docsearch-footer-background: #1e2136;
+  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
+  --docsearch-muted-color: #7f8497;
+}
+
+.cxd-search {
+  position: relative;
+
+  @include media-breakpoint-up(large) {
+    position: absolute;
+    top: 20%;
+    right: 12rem;
+    width: 200px;
+  }
+  @include media-breakpoint-up(xlarge) {
+    // left: 50%;
+    width: 280px;
+    // margin-left: 12rem;
+  }
+
+
+}
+
+.DocSearch-Container {
+  // --docsearch-muted-color: var(--cx-fg-subtle);
+  // --docsearch-hit-shadow: none;
+
+  position: fixed;
+  z-index: 2000; // Make sure to be over all components showcased in the documentation
+  cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
+
+  @include media-breakpoint-up(large) {
+    padding-top: 4rem;
+  }
+}
+
+.DocSearch-Button {
+  --docsearch-searchbox-background: var(--cx-bg-main);
+  --docsearch-searchbox-color: var(--cx-fg-subtle);
+  --docsearch-searchbox-focus-background: var(--cx-bg-hover);
+  --docsearch-searchbox-shadow: none;
+  --docsearch-text-color: var(--cx-fg-subtle);
+  --docsearch-muted-color: var(--cx-fg-subtle);
+
+  width: 100%;
+  height: 38px; // Match Chassis - CSS inputs
+  margin: 0;
+  border: var(--cx-border-width-medium) solid var(--cx-border-subtle);
+  @include border-radius(var(--cx-border-radius-medium));
+
+  .DocSearch-Search-Icon {
+    opacity: .65;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    // border-color: rgba($cxd-accent, 1);
+
+    .DocSearch-Search-Icon {
+      opacity: 1;
+    }
+  }
+
+  @include media-breakpoint-down(large) {
+    &,
+    &:hover,
+    &:focus {
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+    }
+    &:focus {
+      box-shadow: var(--docsearch-searchbox-shadow);
+    }
+  }
+}
+
+.DocSearch-Button-Keys,
+.DocSearch-Button-Placeholder {
+  @include media-breakpoint-down(large) {
+    display: none;
+  }
+}
+
+.DocSearch-Button-Keys {
+  min-width: 0;
+  padding: .25rem;
+  background: var(--cx-bg-evident);
+  @include border-radius(var(--cx-border-radius-small));
+}
+
+.DocSearch-Button-Key {
+  top: 0;
+  width: auto;
+  // height: 1.25rem;
+  padding-right: .125rem;
+  padding-left: .125rem;
+  margin-right: 0;
+  // font-size: .875rem;
+  background: none;
+  box-shadow: none;
+}
+
+.DocSearch-Commands-Key {
+  // padding-left: 1px;
+  // font-size: .875rem;
+  // background-color: rgba($black, .1);
+  background-image: none;
+  box-shadow: none;
+}
+
+.DocSearch-Form {
+  @include border-radius(var(--cx-border-radius));
+}
+
+.DocSearch-Hits {
+  mark {
+    padding: 0;
+  }
+}
+
+.DocSearch-Hit {
+  padding-bottom: 0;
+  @include border-radius(0);
+
+  a {
+    @include border-radius(0);
+    border: solid var(--cx-border-color);
+    border-width: 0 1px 1px;
+  }
+
+  &:first-child a {
+    @include border-top-radius(var(--cx-border-radius));
+    border-top-width: 1px;
+  }
+  &:last-child a {
+    @include border-bottom-radius(var(--cx-border-radius));
+  }
+}
+
+.DocSearch-Hit-icon {
+  display: flex;
+  align-items: center;
+}
+
+// Fix --docsearch-logo-color that doesn't do anything
+.DocSearch-Logo svg .cls-1,
+.DocSearch-Logo svg .cls-2 {
+  fill: var(--docsearch-logo-color);
+}

package/src/scss/_footer.scss

@@ -0,0 +1,29 @@
+//
+// Footer
+//
+
+.cxd-footer {
+  // margin-top: 0 !important;
+  // margin-top: 4rem;
+  --cx-fg-color: var(--cx-fg-subtle);
+  background-color: var(--cx-bg-evident);
+  // border-top: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
+  .nav {
+    display: block;
+    > li {
+      display: list-item;
+      margin-bottom: var(--cx-space-xsmall);
+    }
+  }
+
+  a {
+    color: var(--cx-fg-color);
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: var(--cx-hover-color);
+      text-decoration: underline;
+    }
+  }
+}

package/src/scss/_layout.scss

@@ -0,0 +1,72 @@
+.cxd-gutter {
+  --cx-gutter-x: #{$cxd-gutter-x};
+}
+
+.cxd-layout {
+  // padding: 1rem !important;
+
+  @include media-breakpoint-up(large) {
+    display: grid;
+    grid-template-areas: "sidebar main";
+    // grid-template-columns: 1.5fr 6.5fr;
+    grid-template-columns: 14rem auto;
+    // gap: $grid-gutter-width;
+    gap: $cxd-gutter-x;
+    padding: 0 1rem !important; // stylelint-disable-line declaration-no-important
+    margin: 0 auto;
+  }
+}
+
+.cxd-sidebar {
+  grid-area: sidebar;
+}
+
+.cxd-intro {
+  grid-area: intro;
+  margin-top: 2rem;
+}
+
+.cxd-main {
+  grid-area: main;
+  order: 1;
+
+  @include media-breakpoint-down(large) {
+    // max-width: 760px;
+    margin-inline: auto;
+  }
+
+  @include media-breakpoint-up(medium) {
+    display: grid;
+    grid-template-areas:
+      "intro"
+      "toc"
+      "content";
+    grid-template-rows: auto auto 1fr;
+    gap: inherit;
+  }
+
+  @include media-breakpoint-up(large) {
+    grid-template-areas:
+      "intro   toc"
+      "content toc";
+    grid-template-rows: auto 1fr;
+    grid-template-columns: auto 14rem;
+  }
+}
+
+.cxd-toc {
+  grid-area: toc;
+}
+
+.cxd-content {
+  grid-area: content;
+  min-width: 1px; // Fix width when cxd-content contains a `<pre>` https://github.com/chassis-ui/css/issues/25410
+}
+
+.cxd-content,
+.cxd-intro {
+  width: 100%;
+  max-width: 960px;
+  margin-right: auto;
+  margin-left: auto;
+}

package/src/scss/_masthead.scss

@@ -0,0 +1,124 @@
+.cxd-masthead {
+  --cxd-pink-rgb: #{to-rgb($pink)};
+  padding: 3rem 0;
+  // stylelint-disable
+  background-image: linear-gradient(180deg, rgba(var(--cx-bg-main-rgb), .01), rgba(var(--cx-bg-main-rgb), 1) 85%),
+                    radial-gradient(ellipse at top left, rgba(var(--cx-primary-rgb), .25), transparent 50%),
+                    radial-gradient(ellipse at top right, rgba(var(--cx-secondary-rgb), .25), transparent 50%),
+                    radial-gradient(ellipse at center right, rgba(var(--cx-secondary-rgb), .25), transparent 50%),
+                    radial-gradient(ellipse at center left, rgba(var(--cx-secondary-rgb), .25), transparent 50%);
+  // stylelint-enable
+
+  h1 {
+    --cx-heading-color: var(--cx-fg-color);
+    @include font-size(4rem);
+    line-height: 1.25em;
+  }
+
+  .lead {
+    @include font-size(1rem);
+    font-family: var(--cx-font-family-display);
+    font-weight: 400;
+    line-height: 1.5em;
+    color: var(--cx-fg-subtle);
+  }
+
+  .cxd-code-snippet {
+    width: 24rem;
+    margin: 0;
+    text-align: left;
+    border-color: var(--cx-border-subtle);
+    border-width: 1px;
+    @include border-radius(.5rem);
+  }
+
+  // .highlight {
+  //   width: 100%;
+  //   padding: .5rem 1rem;
+  //   overflow: hidden;
+  //   text-overflow: ellipsis;
+  //   white-space: nowrap;
+  //   background-color: rgba(var(--cx-fg-color-rgb), .075);
+  //   @include border-radius(calc(.5rem - 1px));
+
+  //   @include media-breakpoint-up(large) {
+  //     padding-right: 4rem;
+  //   }
+
+  //   pre {
+  //     padding: 0;
+  //     margin: .625rem 0;
+  //     overflow: hidden;
+  //   }
+  // }
+  // .button-clipboard {
+  //   position: absolute;
+  //   top: -.625rem;
+  //   right: 0;
+  //   background-color: transparent;
+  // }
+
+  #carbonads { // stylelint-disable-line selector-max-id
+    margin-inline: auto;
+  }
+
+  @include media-breakpoint-up(medium) {
+    .lead {
+      @include font-size(1.5rem);
+    }
+  }
+}
+
+.masthead-followup {
+  h2,
+  h3,
+  h4 {
+    --cx-heading-color: var(--cx-fg-color);
+  }
+
+  .lead {
+    @include font-size(1rem);
+  }
+
+  @include media-breakpoint-up(medium) {
+    .lead {
+      @include font-size(1.25rem);
+    }
+  }
+}
+
+.masthead-followup-icon {
+  padding: 1rem;
+  color: rgba(var(--bg-rgb), 1);
+  background-color: rgba(var(--bg-rgb), .1);
+  background-blend-mode: multiple;
+  @include border-radius(1rem);
+  mix-blend-mode: darken;
+
+  svg {
+    filter: drop-shadow(0 1px 1px var(--cx-bg-color));
+  }
+}
+
+.masthead-notice {
+  background-color: var(--cxd-accent);
+  box-shadow: inset 0 -1px 1px rgba(var(--cx-fg-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--cx-bg-color-rgb), .75);
+}
+
+.animate-image {
+  > img {
+    @include transition(transform .2s ease-in-out);
+  }
+
+  &:hover > img {
+    transform: scale(1.1);
+  }
+}
+
+@if $enable-dark-mode {
+  [data-cx-theme="dark"] {
+    .masthead-followup-icon {
+      mix-blend-mode: lighten;
+    }
+  }
+}