feat(docs): rewrite theming guide, simplified docs styles (#DS-2304)

apps/docs/src/app/app.component.scss

@@ -23,6 +23,8 @@
     bottom: 0;
     left: 0;
     right: 0;
+
+    background: var(--kbq-background-overlay);
 }
 
 @media (width <= 768px) {

apps/docs/src/app/components/anchors/anchors.component.scss

@@ -30,3 +30,33 @@
 .docs-anchors__element_2 {
     padding-left: 48px;
 }
+
+.docs-anchors {
+    background-color: var(--kbq-background-bg);
+}
+
+.docs-anchors__link {
+    outline: none;
+    text-decoration: none;
+    color: inherit;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.docs-anchors__element {
+    &:first-child {
+        padding: 0 0 0 var(--kbq-size-l);
+        margin: 0;
+
+        & .docs-anchors__link {
+            padding: var(--kbq-size-xs) var(--kbq-size-l) var(--kbq-size-xs) 0;
+        }
+    }
+
+    &.docs-anchors__element_active {
+        box-shadow: inset 3px 0 0 var(--kbq-foreground-contrast-secondary);
+    }
+}

apps/docs/src/app/components/component-viewer/component-viewer.scss

@@ -1,3 +1,5 @@
+@use '../dist/components/core/styles/common/tokens';
+
 .kbq-docs-pre {
     position: relative;
 }
@@ -251,3 +253,113 @@
         }
     }
 }
+
+.docs-component-header {
+    background: var(--kbq-background-bg);
+}
+
+.docs-api__section {
+    border-color: var(--kbq-background-contrast-fade);
+}
+
+.docs-api__section_directive .docs-api_method-name {
+    color: var(--kbq-line-warning) !important;
+}
+
+.docs-api__input-marker {
+    color: var(--kbq-line-success) !important;
+}
+
+.docs-api__output-marker {
+    color: var(--kbq-foreground-theme) !important;
+}
+
+.kbq-docs-table {
+    & .kbq-markdown__code {
+        background: transparent !important;
+    }
+
+    &.kbq-table > tbody > tr:hover {
+        background: none;
+    }
+}
+
+// header
+.docs-component-name {
+    @include tokens.kbq-typography-level-to-styles-css-variables(typography, display-compact-strong);
+}
+
+.docs-api__class-name {
+    font-family: var(--kbq-font-family-mono);
+    font-size: 20px;
+    line-height: 28px;
+    letter-spacing: normal;
+    font-weight: 700;
+    text-transform: none;
+    font-feature-settings: initial;
+}
+
+.docs-component-overview {
+    // first level
+    & .docs-header-link.kbq-markdown__h3 {
+        font-family: var(--kbq-font-family-base);
+        font-size: 24px;
+        line-height: 32px;
+        letter-spacing: normal;
+        font-weight: 700;
+        text-transform: none;
+        font-feature-settings:
+            'ss01' on,
+            'ss04' on;
+    }
+
+    // second level
+    & .docs-api__section_method .docs-api_method-name,
+    & .docs-header-link.kbq-markdown__h4 {
+        font-family: var(--kbq-font-family-base);
+        font-size: 20px;
+        line-height: 28px;
+        letter-spacing: normal;
+        font-weight: 600;
+        text-transform: none;
+        font-feature-settings:
+            'ss01' on,
+            'ss04' on;
+    }
+
+    // third level
+    & .docs-header-link.kbq-markdown__h5 {
+        font-family: var(--kbq-font-family-base);
+        font-size: 17px;
+        line-height: 20px;
+        letter-spacing: normal;
+        font-weight: 600;
+        text-transform: none;
+        font-feature-settings:
+            'ss01' on,
+            'ss04' on;
+    }
+}
+
+// `.kbq-tab-nav-bar` is in the selector for weight: the library sets `.kbq-tab-link` typography from
+// `koobiq-typography()`, which is emitted inside `.docs`, so two class names here would only tie with it.
+.docs-component-navbar .kbq-tab-nav-bar .kbq-tab-link {
+    @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
+}
+
+.docs-api__class-selector-name,
+.docs-api__input-marker,
+.docs-api__output-marker,
+.docs-api_property-name {
+    @include tokens.kbq-typography-level-to-styles-css-variables(typography, mono-big);
+}
+
+.docs-api_method-name {
+    @include tokens.kbq-typography-level-to-styles-css-variables(typography, mono-big-strong);
+}
+
+.docs-api {
+    .kbq-markdown__code {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, mono-big);
+    }
+}

apps/docs/src/app/components/footer/footer.component.html

@@ -5,7 +5,7 @@
     <div>
         <div
             #languageDropdownTrigger="kbqDropdownTrigger"
-            class="docs-footer__control"
+            class="docs-footer__control kbq-text-big"
             [class.kbq-active]="languageDropdownTrigger.opened"
             [kbqDropdownTriggerFor]="languageDropdown"
         >
@@ -65,7 +65,7 @@
             #versionDropdownDropdownTrigger="kbqDropdownTrigger"
             #versionPicker="docsVersionPicker"
             docsVersionPicker
-            class="docs-footer__control"
+            class="docs-footer__control kbq-text-big"
             [class.kbq-active]="versionDropdownDropdownTrigger.opened"
             [kbqDropdownTriggerFor]="versionDropdown"
         >