@chassis-ui/docs 0.1.10 → 0.3.0

package/src/scss/_docsearch.scss

@@ -1,212 +0,0 @@
-// stylelint-disable selector-class-pattern
-
-:root {
-  /* Colors */
-  --docsearch-primary-color: var(--cx-primary);
-  --docsearch-soft-primary-color: var(--cx-primary-fg-subtle);
-  --docsearch-subtle-color: var(--cx-border-subtle);
-  --docsearch-text-color: var(--cx-fg-main);
-  --docsearch-error-color: var(--cx-danger-fg-main);
-  --docsearch-success-color: var(--cx-success-fg-main);
-  --docsearch-secondary-text-color: var(--cx-fg-subtle);
-  --docsearch-background-color: var(--cx-bg-main);
-  --docsearch-icon-color: var(--cx-fg-subtle);
-  --docsearch-container-background: var(--cx-black-dim-main);
-  --docsearch-logo-color: var(--cx-primary);
-  --docsearch-muted-color: var(--cx-fg-subtle);
-  --docsearch-muted-color-darker: var(--cx-fg-slight);
-
-  /* Spacing & Layout */
-  --docsearch-spacing: var(--cx-space-medium);
-  --docsearch-border-radius: var(--cx-border-radius-medium);
-  --docsearch-icon-stroke-width: var(--cx-border-width-medium);
-
-  /* Highlights & Focus */
-  --docsearch-focus-color: var(--cx-primary);
-  --docsearch-highlight-color: var(--cx-primary);
-
-  /* Button */
-  --docsearch-search-button-background: var(--cx-bg-main);
-  --docsearch-search-button-text-color: var(--cx-fg-subtle);
-
-  /* Modal */
-  --docsearch-modal-width: 640px;
-  // --docsearch-modal-height: 600px;
-  // --docsearch-modal-variable-height: 60dvh;
-  --docsearch-modal-background: var(--cx-bg-even);
-  --docsearch-modal-shadow: var(--cx-box-shadow-large);
-
-  /* Searchbox */
-  // --docsearch-searchbox-height: 56px;
-  // --docsearch-searchbox-initial-height: 56px;
-  --docsearch-searchbox-background: var(--cx-bg-even);
-  --docsearch-searchbox-focus-background: var(--cx-bg-main);
-  // --docsearch-actions-width: 99px;
-  // --docsearch-actions-height: 44px;
-
-  /* Hit */
-  // --docsearch-hit-height: 56px;
-  --docsearch-hit-color: var(--cx-fg-main);
-  --docsearch-hit-highlight-color: var(--cx-bg-highlight);
-  --docsearch-hit-background: var(--cx-bg-main);
-
-  /* Key */
-  --docsearch-key-background: var(--cx-bg-main);
-  --docsearch-key-color: var(--cx-fg-subtle);
-  --docsearch-key-pressed-shadow: var(--cx-box-shadow-small);
-
-  /* Footer */
-  --docsearch-footer-height: 52px;
-  --docsearch-footer-background: var(--cx-bg-evident);
-  --docsearch-footer-shadow: var(--cx-box-shadow-small);
-
-  /* Dropdown Menu */
-  --docsearch-dropdown-menu-background: var(--docsearch-hit-background);
-  --docsearch-dropdown-menu-item-hover-background: var(--docsearch-modal-background);
-}
-
-.cxd-search {
-  position: relative;
-
-  @include media-breakpoint-up(large) {
-    position: absolute;
-    top: 20%;
-    right: 12rem;
-    width: 200px;
-  }
-  @include media-breakpoint-up(2xlarge) {
-    left: 50%;
-    margin-left: 16rem;
-  }
-}
-
-.DocSearch-Container {
-  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 {
-  width: 100%;
-  height: 38px; // Match Chassis 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 {
-    .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: .125rem .5rem;
-  background: var(--cx-bg-evident);
-  @include border-radius(var(--cx-border-radius-small));
-}
-
-.DocSearch-Button-Key {
-  top: 0;
-  width: auto;
-  padding: 0;
-  @include font-size(.875rem);
-  background: none;
-  border: 0;
-  box-shadow: none;
-}
-
-.DocSearch-Commands-Key {
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  color: var(--cx-icon-subtle);
-  background: none;
-  box-shadow: none;
-  @include border-radius(var(--cx-border-radius-small));
-  .DocSearch-Escape-Key {
-    @include font-size(var(--cx-font-size-xsmall));
-  }
-}
-
-.DocSearch-Action:hover,
-.DocSearch-AskAi-Return:hover {
-  background: none;
-}
-
-.DocSearch-Hit {
-  padding-bottom: 0;
-  @include border-radius(0);
-
-  a {
-    @include border-radius(0);
-    border: solid var(--cx-border-subtle);
-    border-width: 0 var(--cx-border-width) var(--cx-border-width);
-  }
-
-  &:first-child a {
-    @include border-top-radius(var(--cx-border-radius));
-    border-top-width: var(--cx-border-width);
-  }
-  &:last-child a {
-    @include border-bottom-radius(var(--cx-border-radius));
-  }
-}
-
-.DocSearch-Hit-icon {
-  display: flex;
-  align-items: center;
-  margin-right: var(--cx-space-xsmall);
-}
-
-.DocSearch-Hit-content-wrapper {
-  gap: 0;
-}
-
-.DocSearch-Hit-action-button:focus,
-.DocSearch-Hit-action-button:hover {
-  color: var(--cx-primary-fg-main);
-  background: none;
-}
-
-.DocSearch-Hit-action-button:focus path,
-.DocSearch-Hit-action-button:hover path {
-  fill: none;
-}
-
-// 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/_masthead.scss

@@ -1,124 +0,0 @@
-.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;
-    }
-  }
-}

package/src/scss/_settings.scss

@@ -1,29 +0,0 @@
-$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-exclude-strokes:        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;

package/src/scss/_syntax.scss

@@ -1,160 +0,0 @@
-:root,
-[data-cx-theme="light"] {
-  // GitHub Light Theme
-  --base00: #fff;
-  --base01: #f6f8fa;
-  --base02: #e1e4e8;
-  --base03: #6a737d; // Comments
-  --base04: #586069;
-  --base05: #24292e; // Default text
-  --base06: #24292e;
-  --base07: #22863a; // Tags/Classes
-  --base08: #d73a49; // Keywords/Important
-  --base09: #005cc5; // Numbers/Properties
-  --base0A: #005cc5; // Variables
-  --base0B: #6f42c1; // Functions
-  --base0C: #032f62; // Strings
-  --base0D: #6f42c1; // Attributes
-  --base0E: #d73a49; // Keywords
-  --base0F: #e36209; // References
-}
-
-@include color-mode(dark, true) {
-  // GitHub Dark Theme
-  --base00: #0d1117;
-  --base01: #161b22;
-  --base02: #21262d;
-  --base03: #8b949e; // Comments
-  --base04: #6e7681;
-  --base05: #c9d1d9; // Default text
-  --base06: #c9d1d9;
-  --base07: #7ee787; // Tags/Classes
-  --base08: #ff7b72; // Keywords/Important
-  --base09: #79c0ff; // Numbers/Properties
-  --base0A: #79c0ff; // Variables
-  --base0B: #d2a8ff; // Functions
-  --base0C: #a5d6ff; // Strings
-  --base0D: #d2a8ff; // Attributes
-  --base0E: #ff7b72; // Keywords
-  --base0F: #ffa657; // References
-}
-
-// 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/_variables.scss

@@ -1,78 +0,0 @@
-// Local docs variables
-// $cxd-main:        $primary-base-color;
-// $cxd-subtle:        lighten(saturate($cxd-main, 5%), 15%); // stylelint-disable-line function-disallowed-list
-// $cxd-main-light:  lighten(saturate($cxd-main, 5%), 45%); // stylelint-disable-line function-disallowed-list
-// $cxd-accent:        $secondary-base-color;
-$cxd-main:        var(--cx-primary-base-color);
-$cxd-subtle:      var(--cx-primary-bg-evident);
-$cxd-main-light:  var(--cx-primary-fg-main);
-$cxd-accent:      var(--cx-primary-base-color);
-
-$cxd-gutter-x: 2rem;
-$cxd-callout-variants: info, warning, danger, default !default;
-
-:root,
-[data-cx-theme="light"] {
-  --cxd-main: #{$cxd-main};
-  --cxd-subtle: #{$cxd-subtle};
-  --cxd-accent: #{$cxd-accent};
-  --cxd-main-rgb: var(--cx-primary-base-color-rgb);
-  --cxd-subtle-rgb: var(--cx-primary-40-rgb);
-  --cxd-accent-rgb: var(--cx-secondary-base-color-rgb);
-  --cxd-pink-rgb: #{to-rgb($pink-500)};
-  --cxd-teal-rgb: #{to-rgb($teal-500)};
-  --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-rgb($blue-600)};
-  --cxd-callout-code-color: #{$pink-600};
-  // --cxd-pre-bg: var(--cx-bg-even);
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark, true) {
-    color-scheme: dark;
-    --cxd-subtle: var(--cx-primary-60-rgb);
-    --cxd-subtle-bg: #{$cxd-subtle};
-    // --cxd-toc-color: var(--#{$prefix}fg-subtle);
-    --cxd-sidebar-link-bg: var(--cx-primary-40);
-    --cxd-callout-link: #{to-rgb($blue-300)};
-    --cxd-callout-code-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);
-// }