@chassis-ui/docs 0.1.0

package/src/scss/_variables.scss

@@ -0,0 +1,78 @@
+// 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);
+// }

package/src/scss/fonts.scss

@@ -0,0 +1 @@
+@import "https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Inter:wght@100..900&family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap";

package/src/scss/main.scss

@@ -0,0 +1,90 @@
+@use "@chassis-ui/tokens/dist/web/chassis-docs/number-large" as large;
+@use "@chassis-ui/tokens/dist/web/chassis-docs/number-medium" as medium;
+@use "@chassis-ui/tokens/dist/web/chassis-docs/number-small" as small;
+// $prefix: cx- !default;
+
+/*!
+ * Chassis - CSS Docs (https://ozgurgunes.github.io/chassis-css//)
+ * Copyright 2025 Chassis
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+// Dev notes
+//
+// Background information on nomenclature and architecture decisions here.
+//
+// - Chassis - CSS functions, variables, and mixins are included for easy reuse.
+//   Doing so gives us access to the same core utilities provided by Chassis - CSS.
+//   For example, consistent media queries through those mixins.
+//
+// - Chassis - CSS's **docs variables** are prefixed with `$cxd-`.
+//   These custom colors avoid collision with the components Chassis - CSS provides.
+//
+// - Classes are prefixed with `.cxd-`.
+//   These classes indicate custom-built or modified components for the design
+//   and layout of the Chassis - CSS docs. They are not included in our builds.
+//
+// Happy Chassis - CSSing!
+
+// Load Chassis - CSS variables and mixins
+//@import "chassis-css/scss/functions";
+// fusv-disable
+$enable-grid-classes: true;
+$enable-cssgrid: true;
+//@import "colors";
+// @import "../../../chassis-tokens/dist/tokens/web/chassis_docs_light";
+
+@import "settings";
+@import "@chassis-ui/tokens/dist/web/chassis-docs/main";
+
+@import "@chassis-ui/css/scss/functions";
+@import "@chassis-ui/css/scss/tokens";
+@import "@chassis-ui/css/scss/variables";
+@import "@chassis-ui/css/scss/rfs";
+@import "@chassis-ui/css/scss/maps";
+@import "@chassis-ui/css/scss/mixins";
+@import "@chassis-ui/css/scss/grid";
+
+
+// fusv-enable
+
+
+@import "colors";
+@import "variables";
+@import "fonts";
+
+// @import "@chassis-ui/css/scss/core";
+
+// Load docs components
+//@import "colors";
+@import "navbar";
+@import "masthead";
+@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";
+
+// Load docs dependencies
+@import "syntax";
+@import "anchor";
+
+
+/* Hide light-mode things when in dark mode */
+[data-cx-theme="dark"] .display-light {
+  display: none;
+}
+
+/* Hide dark-mode things when in light mode */
+[data-cx-theme="light"] .display-dark {
+  display: none;
+}

package/src/scss/search.scss

@@ -0,0 +1,26 @@
+$prefix: cx- !default;
+
+/*!
+ * Chassis - CSS Docs (https://ozgurgunes.github.io/chassis-css//)
+ * Copyright 2025 Chassis
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+//@import "../../../chassis-tokens/dist/tokens/web/chassis_docs_light";
+
+@import "settings";
+@import "@chassis-ui/tokens/dist/web/chassis-docs/main";
+
+@import "@chassis-ui/css/scss/functions";
+@import "@chassis-ui/css/scss/tokens";
+@import "@chassis-ui/css/scss/variables";
+@import "@chassis-ui/css/scss/rfs";
+@import "@chassis-ui/css/scss/maps";
+@import "@chassis-ui/css/scss/mixins";
+@import "@chassis-ui/css/scss/grid";
+
+@import "variables";
+
+@import "@docsearch/css/dist/style";
+@import "docsearch";