@koobiq/components 17.4.0 → 17.6.0

package/markdown/_markdown-theme.scss

@@ -1,103 +1,89 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/theming/theming' as *;
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-markdown-theme($theme) {
-    $markdown: map.get($theme, components, markdown);
+@use './markdown-tokens';
 
+@mixin kbq-markdown-theme() {
     .kbq-markdown {
-        color: kbq-css-variable(foreground-contrast, map.get($theme, foreground, contrast));
-        background: kbq-css-variable(background-bg, map.get($theme, background, bg));
+        color: kbq-css-variable(foreground-contrast);
+        background: kbq-css-variable(background-bg);
 
         // h1, h2, h3, h4, h5, h6
         @for $i from 1 through 6 {
             .kbq-markdown__h#{$i} {
-                color: kbq-css-variable(markdown-h#{$i}-color, map.get($markdown, h#{$i}-color));
+                color: kbq-css-variable(markdown-h#{$i}-color);
             }
         }
 
         .kbq-markdown__p {
-            color: kbq-css-variable(markdown-p-color, map.get($markdown, p-color));
+            color: kbq-css-variable(markdown-p-color);
         }
 
         .kbq-markdown__ul,
         .kbq-markdown__ol {
-            color: kbq-css-variable(markdown-list-color, map.get($markdown, list-color));
+            color: kbq-css-variable(markdown-list-color);
         }
 
         .kbq-markdown__blockquote {
-            color: kbq-css-variable(markdown-blockquote-text, map.get($markdown, blockquote-text));
-            background: kbq-css-variable(markdown-blockquote-background, map.get($markdown, blockquote-background));
-            border-color: kbq-css-variable(markdown-blockquote-border, map.get($markdown, blockquote-border));
-            border-left-color: kbq-css-variable(markdown-blockquote-line, map.get($markdown, blockquote-line));
+            color: kbq-css-variable(markdown-blockquote-text);
+            background: kbq-css-variable(markdown-blockquote-background);
+            border-color: kbq-css-variable(markdown-blockquote-border);
+            border-left-color: kbq-css-variable(markdown-blockquote-line);
         }
 
         .kbq-markdown__pre,
         .kbq-markdown__p > .kbq-markdown__code {
-            color: kbq-css-variable(markdown-code-text, map.get($markdown, code-text));
-            background-color: kbq-css-variable(markdown-code-background, map.get($markdown, code-background));
-            border-color: kbq-css-variable(markdown-code-border, map.get($markdown, code-border));
+            color: kbq-css-variable(markdown-code-text);
+            background-color: kbq-css-variable(markdown-code-background);
+            border-color: kbq-css-variable(markdown-code-border);
         }
 
         .kbq-markdown__a {
-            color: kbq-css-variable(markdown-link-text, map.get($markdown, link-text));
-            border-bottom-color: kbq-css-variable(markdown-link-border-bottom, map.get($markdown, link-border-bottom));
+            color: kbq-css-variable(markdown-link-text);
+            border-bottom-color: kbq-css-variable(markdown-link-border-bottom);
 
             &:visited {
-                color: kbq-css-variable(markdown-link-state-visited-text, map.get($markdown, link-state-visited-text));
-                border-bottom-color: kbq-css-variable(
-                    markdown-link-state-visited-border-bottom,
-                    map.get($markdown, link-state-visited-border-bottom)
-                );
+                color: kbq-css-variable(markdown-link-state-visited-text);
+                border-bottom-color: kbq-css-variable(markdown-link-state-visited-border-bottom);
             }
 
             &:hover {
-                color: kbq-css-variable(markdown-link-state-hover-text, map.get($markdown, link-state-hover-text));
+                color: kbq-css-variable(markdown-link-state-hover-text);
                 transition: color 0ms;
-                border-bottom-color: kbq-css-variable(
-                    markdown-link-state-hover-border-bottom,
-                    map.get($markdown, link-state-hover-border-bottom)
-                );
+                border-bottom-color: kbq-css-variable(markdown-link-state-hover-border-bottom);
             }
 
             &:active {
-                color: kbq-css-variable(markdown-link-state-active, map.get($markdown, link-state-active-text));
+                color: kbq-css-variable(markdown-link-state-active);
             }
 
             &:focus {
-                outline: kbq-css-variable(
-                        markdown-link-state-focused-outline,
-                        map.get($markdown, link-state-focused-outline)
-                    )
-                    solid kbq-css-variable(markdown-link-size-state-focused-outline-width);
+                outline: kbq-css-variable(markdown-link-state-focused-outline) solid
+                    kbq-css-variable(markdown-link-size-state-focused-outline-width);
 
                 outline-offset: kbq-css-variable(markdown-link-size-state-focused-outline-offset);
             }
         }
 
         .kbq-markdown__img + em {
-            color: kbq-css-variable(markdown-image-caption-text, map.get($markdown, image-caption-text));
+            color: kbq-css-variable(markdown-image-caption-text);
         }
 
         .kbq-markdown__hr {
-            border-bottom-color: kbq-css-variable(markdown-hr-color, map.get($markdown, hr-color));
+            border-bottom-color: kbq-css-variable(markdown-hr-color);
         }
 
         .kbq-markdown__table > .kbq-markdown__thead {
-            color: kbq-css-variable(markdown-table-header, map.get($markdown, table-header));
-            border-bottom-color: kbq-css-variable(markdown-table-border, map.get($markdown, table-border));
+            color: kbq-css-variable(markdown-table-header);
+            border-bottom-color: kbq-css-variable(markdown-table-border);
         }
 
         .kbq-markdown__table > .kbq-markdown__tbody {
-            color: kbq-css-variable(markdown-table-body, map.get($markdown, table-body));
+            color: kbq-css-variable(markdown-table-body);
         }
     }
 }
 
-@mixin kbq-markdown-typography($config) {
+@mixin kbq-markdown-typography() {
     .kbq-markdown {
         // h1, h2, h3, h4, h5, h6
         @for $i from 1 through 6 {

package/markdown/markdown-tokens.scss

@@ -0,0 +1,252 @@
+.kbq-markdown {
+    --kbq-markdown-h1-size-max-width: 650px;
+    --kbq-markdown-h1-size-margin-top: 0;
+    --kbq-markdown-h1-size-margin-bottom: 16px;
+    --kbq-markdown-h1-font-default-font-size: 36px;
+    --kbq-markdown-h1-font-default-line-height: 44px;
+    --kbq-markdown-h1-font-default-letter-spacing: normal;
+    --kbq-markdown-h1-font-default-font-weight: 400;
+    --kbq-markdown-h1-font-default-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-markdown-h1-font-default-text-transform: null;
+    --kbq-markdown-h1-font-default-font-feature-settings: 'calt', 'kern', 'liga';
+    --kbq-markdown-h2-size-max-width: 650px;
+    --kbq-markdown-h2-size-margin-top: 24px;
+    --kbq-markdown-h2-size-margin-bottom: 12px;
+    --kbq-markdown-h2-font-default-font-size: 24px;
+    --kbq-markdown-h2-font-default-line-height: 32px;
+    --kbq-markdown-h2-font-default-letter-spacing: normal;
+    --kbq-markdown-h2-font-default-font-weight: 700;
+    --kbq-markdown-h2-font-default-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-markdown-h2-font-default-text-transform: null;
+    --kbq-markdown-h2-font-default-font-feature-settings: 'calt', 'kern', 'liga';
+    --kbq-markdown-h3-size-max-width: 650px;
+    --kbq-markdown-h3-size-margin-top: 24px;
+    --kbq-markdown-h3-size-margin-bottom: 12px;
+    --kbq-markdown-h3-font-default-font-size: 20px;
+    --kbq-markdown-h3-font-default-line-height: 28px;
+    --kbq-markdown-h3-font-default-letter-spacing: normal;
+    --kbq-markdown-h3-font-default-font-weight: 700;
+    --kbq-markdown-h3-font-default-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-markdown-h3-font-default-text-transform: null;
+    --kbq-markdown-h3-font-default-font-feature-settings: 'calt', 'kern', 'liga';
+    --kbq-markdown-h4-size-max-width: 650px;
+    --kbq-markdown-h4-size-margin-top: 24px;
+    --kbq-markdown-h4-size-margin-bottom: 12px;
+    --kbq-markdown-h4-font-default-font-size: 18px;
+    --kbq-markdown-h4-font-default-line-height: 26px;
+    --kbq-markdown-h4-font-default-letter-spacing: normal;
+    --kbq-markdown-h4-font-default-font-weight: 700;
+    --kbq-markdown-h4-font-default-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-markdown-h4-font-default-text-transform: null;
+    --kbq-markdown-h4-font-default-font-feature-settings: 'calt', 'kern', 'liga';
+    --kbq-markdown-h5-size-max-width: 650px;
+    --kbq-markdown-h5-size-margin-top: 24px;
+    --kbq-markdown-h5-size-margin-bottom: 8px;
+    --kbq-markdown-h5-font-default-font-size: 16px;
+    --kbq-markdown-h5-font-default-line-height: 24px;
+    --kbq-markdown-h5-font-default-letter-spacing: -0.011em;
+    --kbq-markdown-h5-font-default-font-weight: 700;
+    --kbq-markdown-h5-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-markdown-h5-font-default-text-transform: null;
+    --kbq-markdown-h5-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-markdown-h6-size-max-width: 650px;
+    --kbq-markdown-h6-size-margin-top: 24px;
+    --kbq-markdown-h6-size-margin-bottom: 8px;
+    --kbq-markdown-h6-font-default-font-size: 14px;
+    --kbq-markdown-h6-font-default-line-height: 20px;
+    --kbq-markdown-h6-font-default-letter-spacing: 0.08em;
+    --kbq-markdown-h6-font-default-font-weight: 500;
+    --kbq-markdown-h6-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-markdown-h6-font-default-text-transform: uppercase;
+    --kbq-markdown-h6-font-default-font-feature-settings: 'calt', 'case', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-markdown-p-size-max-width: 650px;
+    --kbq-markdown-p-size-margin-top: 12px;
+    --kbq-markdown-p-size-margin-bottom: 12px;
+    --kbq-markdown-p-font-default-font-size: 16px;
+    --kbq-markdown-p-font-default-line-height: 24px;
+    --kbq-markdown-p-font-default-letter-spacing: -0.011em;
+    --kbq-markdown-p-font-default-font-weight: normal;
+    --kbq-markdown-p-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-markdown-p-font-default-text-transform: null;
+    --kbq-markdown-p-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-markdown-list-size-max-width: 650px;
+    --kbq-markdown-list-size-margin-top: 12px;
+    --kbq-markdown-list-size-margin-bottom: 12px;
+    --kbq-markdown-list-size-margin-top-after-paragraph: -8px;
+    --kbq-markdown-list-size-ol-number-padding-right: 4px;
+    --kbq-markdown-list-size-ul-padding: 0 0 0 24px;
+    --kbq-markdown-list-size-item-margin-bottom: 4px;
+    --kbq-markdown-list-font-default-font-size: 16px;
+    --kbq-markdown-list-font-default-line-height: 24px;
+    --kbq-markdown-list-font-default-letter-spacing: -0.011em;
+    --kbq-markdown-list-font-default-font-weight: normal;
+    --kbq-markdown-list-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-markdown-list-font-default-text-transform: null;
+    --kbq-markdown-list-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-markdown-blockquote-size-max-width: 650px;
+    --kbq-markdown-blockquote-size-margin-top: 12px;
+    --kbq-markdown-blockquote-size-margin-bottom: 12px;
+    --kbq-markdown-blockquote-size-padding: 2px 12px;
+    --kbq-markdown-blockquote-size-line-width: 4px;
+    --kbq-markdown-blockquote-size-border-radius: 0;
+    --kbq-markdown-blockquote-size-border-width: 0;
+    --kbq-markdown-blockquote-font-default-font-size: 16px;
+    --kbq-markdown-blockquote-font-default-line-height: 24px;
+    --kbq-markdown-blockquote-font-default-letter-spacing: -0.011em;
+    --kbq-markdown-blockquote-font-default-font-weight: normal;
+    --kbq-markdown-blockquote-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-markdown-blockquote-font-default-text-transform: null;
+    --kbq-markdown-blockquote-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-markdown-code-size-max-width: 650px;
+    --kbq-markdown-code-size-multiline-margin-top: 12px;
+    --kbq-markdown-code-size-multiline-margin-bottom: 24px;
+    --kbq-markdown-code-size-inline-padding: 0 4px;
+    --kbq-markdown-code-size-multiline-padding: 12px 16px;
+    --kbq-markdown-code-size-border-radius: 8px;
+    --kbq-markdown-code-size-border-width: 1px;
+    --kbq-markdown-code-font-default-font-size: 16px;
+    --kbq-markdown-code-font-default-line-height: 24px;
+    --kbq-markdown-code-font-default-letter-spacing: normal;
+    --kbq-markdown-code-font-default-font-weight: normal;
+    --kbq-markdown-code-font-default-font-family: 'JetBrains Mono', 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco',
+        monospace;
+    --kbq-markdown-code-font-default-text-transform: null;
+    --kbq-markdown-code-font-default-font-feature-settings: initial;
+    --kbq-markdown-link-size-icon-margin: 2px;
+    --kbq-markdown-link-size-state-focused-outline-offset: 0px;
+    --kbq-markdown-link-size-state-focused-outline-width: 2px;
+    --kbq-markdown-link-font-default-font-size: 16px;
+    --kbq-markdown-link-font-default-line-height: 24px;
+    --kbq-markdown-link-font-default-letter-spacing: -0.011em;
+    --kbq-markdown-link-font-default-font-weight: normal;
+    --kbq-markdown-link-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-markdown-link-font-default-text-transform: null;
+    --kbq-markdown-link-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-markdown-image-size-max-width: 650px;
+    --kbq-markdown-image-size-margin-top: 12px;
+    --kbq-markdown-image-size-margin-bottom: 12px;
+    --kbq-markdown-image-size-caption-margin-top: -8px;
+    --kbq-markdown-image-size-caption-margin-bottom: 24px;
+    --kbq-markdown-image-font-caption-font-size: 14px;
+    --kbq-markdown-image-font-caption-line-height: 20px;
+    --kbq-markdown-image-font-caption-letter-spacing: -0.006em;
+    --kbq-markdown-image-font-caption-font-weight: normal;
+    --kbq-markdown-image-font-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-markdown-image-font-caption-text-transform: null;
+    --kbq-markdown-image-font-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-markdown-hr-size-width: 1px;
+    --kbq-markdown-hr-size-margin-vertical: 24px;
+    --kbq-markdown-table-size-border-width: 1px;
+    --kbq-markdown-table-size-padding: 8px;
+    --kbq-markdown-table-size-margin-bottom: 12px;
+    --kbq-markdown-table-font-header-font-size: 14px;
+    --kbq-markdown-table-font-header-line-height: 20px;
+    --kbq-markdown-table-font-header-letter-spacing: -0.006em;
+    --kbq-markdown-table-font-header-font-weight: normal;
+    --kbq-markdown-table-font-header-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-markdown-table-font-header-text-transform: null;
+    --kbq-markdown-table-font-header-font-feature-settings: 'calt', 'ss01', 'ss04', 'tnum';
+    --kbq-markdown-table-font-body-font-size: 16px;
+    --kbq-markdown-table-font-body-line-height: 24px;
+    --kbq-markdown-table-font-body-letter-spacing: normal;
+    --kbq-markdown-table-font-body-font-weight: normal;
+    --kbq-markdown-table-font-body-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-markdown-table-font-body-text-transform: null;
+    --kbq-markdown-table-font-body-font-feature-settings: 'calt', 'ss01', 'ss04', 'tnum';
+    --kbq-markdown-size-max-width: 650px;
+    --kbq-markdown-font-default-font-size: 16px;
+    --kbq-markdown-font-default-line-height: 24px;
+    --kbq-markdown-font-default-letter-spacing: -0.011em;
+    --kbq-markdown-font-default-font-weight: normal;
+    --kbq-markdown-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-markdown-font-default-text-transform: null;
+    --kbq-markdown-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-background-bg: hsla(0, 0%, 100%, 100%);
+    --kbq-background-bg-secondary: hsla(229, 15%, 95%, 100%);
+    --kbq-background-bg-tertiary: hsla(229, 15%, 97%, 100%);
+    --kbq-foreground-contrast: hsla(229, 15%, 15%, 100%);
+    --kbq-foreground-contrast-secondary: hsla(229, 15%, 50%, 100%);
+    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 60%, 100%);
+    --kbq-markdown-h1-color: hsla(229, 15%, 15%, 100%);
+    --kbq-markdown-h2-color: hsla(229, 15%, 15%, 100%);
+    --kbq-markdown-h3-color: hsla(229, 15%, 15%, 100%);
+    --kbq-markdown-h4-color: hsla(229, 15%, 15%, 100%);
+    --kbq-markdown-h5-color: hsla(229, 15%, 15%, 100%);
+    --kbq-markdown-h6-color: hsla(229, 15%, 15%, 100%);
+    --kbq-markdown-p-color: hsla(229, 15%, 15%, 100%);
+    --kbq-markdown-list-color: hsla(229, 15%, 15%, 100%);
+    --kbq-markdown-blockquote-text: hsla(229, 15%, 15%, 100%);
+    --kbq-markdown-blockquote-line: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-blockquote-background: transparent;
+    --kbq-markdown-blockquote-border: transparent;
+    --kbq-markdown-code-text: hsla(229, 15%, 15%, 100%);
+    --kbq-markdown-code-background: hsla(229, 15%, 95%, 100%);
+    --kbq-markdown-code-border: hsla(229, 15%, 6%, 12%);
+    --kbq-markdown-link-text: hsla(216, 100%, 50%, 100%);
+    --kbq-markdown-link-border-bottom: hsla(216, 100%, 85%, 100%);
+    --kbq-markdown-link-state-visited-text: hsla(277, 72%, 45%, 100%);
+    --kbq-markdown-link-state-visited-border-bottom: hsla(277, 72%, 80%, 100%);
+    --kbq-markdown-link-state-hover-text: hsla(216, 100%, 45%, 100%);
+    --kbq-markdown-link-state-hover-border-bottom: hsla(216, 100%, 85%, 100%);
+    --kbq-markdown-link-state-active: hsla(216, 100%, 40%, 100%);
+    --kbq-markdown-link-state-focused-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-markdown-image-caption-text: hsla(229, 15%, 50%, 100%);
+    --kbq-markdown-hr-color: hsla(229, 15%, 6%, 12%);
+    --kbq-markdown-table-header: hsla(229, 15%, 50%, 100%);
+    --kbq-markdown-table-body: hsla(229, 15%, 15%, 100%);
+    --kbq-markdown-table-border: hsla(229, 15%, 6%, 12%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-background-bg: hsla(229, 15%, 12%, 100%);
+    --kbq-background-bg-secondary: hsla(229, 15%, 16%, 100%);
+    --kbq-background-bg-tertiary: hsla(229, 15%, 14%, 100%);
+    --kbq-foreground-contrast: hsla(229, 15%, 80%, 100%);
+    --kbq-foreground-contrast-secondary: hsla(229, 15%, 60%, 100%);
+    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 45%, 100%);
+    --kbq-markdown-h1-color: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-h2-color: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-h3-color: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-h4-color: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-h5-color: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-h6-color: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-p-color: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-list-color: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-blockquote-text: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-blockquote-line: hsla(229, 15%, 30%, 100%);
+    --kbq-markdown-blockquote-background: transparent;
+    --kbq-markdown-blockquote-border: transparent;
+    --kbq-markdown-code-text: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-code-background: hsla(229, 15%, 95%, 100%);
+    --kbq-markdown-code-border: hsla(229, 15%, 22%, 100%);
+    --kbq-markdown-link-text: hsla(216, 100%, 65%, 100%);
+    --kbq-markdown-link-border-bottom: hsla(216, 100%, 27%, 100%);
+    --kbq-markdown-link-state-visited-text: hsla(277, 72%, 50%, 100%);
+    --kbq-markdown-link-state-visited-border-bottom: hsla(277, 72%, 30%, 100%);
+    --kbq-markdown-link-state-hover-text: hsla(216, 100%, 65%, 100%);
+    --kbq-markdown-link-state-hover-border-bottom: hsla(216, 100%, 27%, 100%);
+    --kbq-markdown-link-state-active: hsla(216, 100%, 70%, 100%);
+    --kbq-markdown-link-state-focused-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-markdown-image-caption-text: hsla(229, 15%, 50%, 100%);
+    --kbq-markdown-hr-color: hsla(229, 15%, 22%, 100%);
+    --kbq-markdown-table-header: hsla(229, 15%, 50%, 100%);
+    --kbq-markdown-table-body: hsla(229, 15%, 80%, 100%);
+    --kbq-markdown-table-border: hsla(229, 15%, 22%, 100%);
+}

package/markdown/markdown.scss

@@ -1,11 +1,5 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-markdown {
     display: block;
 
@@ -22,6 +16,12 @@ $tokens: meta.module-variables(tokens) !default;
         .kbq-markdown__h#{$i} {
             margin-top: kbq-css-variable(markdown-h#{$i}-size-margin-top);
             margin-bottom: kbq-css-variable(markdown-h#{$i}-size-margin-bottom);
+
+            @for $i from 1 through 6 {
+                & + .kbq-markdown__h#{$i} {
+                    margin-top: 0;
+                }
+            }
         }
     }
 

package/modal/_modal-confirm.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/tokens' as *;
 
 .kbq-confirm {

package/modal/_modal-theme.scss

@@ -4,43 +4,41 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-modal-theme($theme) {
-    $modal: map.get(map.get($theme, components), modal);
-
+@mixin kbq-modal-theme() {
     .kbq-modal {
-        background: kbq-css-variable(modal-container-background, map.get($modal, container-background));
-        box-shadow: kbq-css-variable(modal-container-box-shadow, map.get($modal, container-box-shadow));
+        background: kbq-css-variable(modal-container-background);
+        box-shadow: kbq-css-variable(modal-container-box-shadow);
 
         .kbq-modal-header {
             & .kbq-modal-title {
-                color: kbq-css-variable(modal-header-text-color, map.get($modal, header));
+                color: kbq-css-variable(modal-header-text-color);
             }
 
             & .kbq-modal-close {
-                color: kbq-css-variable(modal-close-button-color, map.get($modal, close-button));
+                color: kbq-css-variable(modal-close-button-color);
             }
         }
 
         .kbq-modal-content {
-            color: kbq-css-variable(modal-content-text-color, map.get($modal, content));
+            color: kbq-css-variable(modal-content-text-color);
         }
 
         // FIXME: default token doesn't exist
         .kbq-modal-header.kbq-modal-body_top-overflow {
-            box-shadow: kbq-css-variable(modal-body-top-shadow, map.get($modal, body-top-shadow));
+            box-shadow: kbq-css-variable(modal-body-top-shadow);
         }
         // FIXME: default token doesn't exist
         .kbq-modal-footer.kbq-modal-body_bottom-overflow {
-            box-shadow: kbq-css-variable(modal-body-bottom-shadow, map.get($modal, body-bottom-shadow));
+            box-shadow: kbq-css-variable(modal-body-bottom-shadow);
         }
     }
 
     .kbq-modal-mask {
-        background-color: kbq-css-variable(modal-overlay-background, map.get($modal, overlay));
+        background-color: kbq-css-variable(modal-overlay-background);
     }
 }
 
-@mixin kbq-modal-typography($config) {
+@mixin kbq-modal-typography() {
     .kbq-modal-title {
         @include kbq-typography-css-variables(modal, header);
     }

package/modal/modal-ref.class.d.ts

@@ -4,9 +4,9 @@ import { KbqModalComponent } from './modal.component';
  * API class that public to users to handle the modal instance.
  * KbqModalRef is aim to avoid accessing to the modal instance directly by users.
  */
-export declare abstract class KbqModalRef<C = any, R = any> {
+export declare abstract class KbqModalRef<C = any, R = unknown> {
     abstract afterOpen: Observable<void>;
-    abstract afterClose: Observable<R>;
+    abstract afterClose: Observable<R | undefined>;
     abstract open(): void;
     abstract close(result?: R): void;
     abstract destroy(result?: R): void;

package/modal/modal-tokens.scss

@@ -0,0 +1,53 @@
+.kbq-modal {
+    --kbq-modal-size-small-width: 400px;
+    --kbq-modal-size-medium-width: 640px;
+    --kbq-modal-size-large-width: 960px;
+    --kbq-modal-size-border-radius: 8px;
+    --kbq-modal-size-header-padding-vertical: 16px;
+    --kbq-modal-size-header-padding-left: 24px;
+    --kbq-modal-size-header-padding-right: 48px;
+    --kbq-modal-size-close-button-margin-left: 8px;
+    --kbq-modal-size-content-padding-horizontal: 24px;
+    --kbq-modal-size-content-padding-top: 0;
+    --kbq-modal-size-content-padding-bottom: 8px;
+    --kbq-modal-size-content-padding-top-without-header: 24px;
+    --kbq-modal-size-content-padding-bottom-without-footer: 40px;
+    --kbq-modal-size-footer-padding-horizontal: 24px;
+    --kbq-modal-size-footer-padding-vertical: 20px;
+    --kbq-modal-size-footer-content-gap-horizontal: 16px;
+    --kbq-modal-font-header-font-size: 20px;
+    --kbq-modal-font-header-line-height: 28px;
+    --kbq-modal-font-header-letter-spacing: normal;
+    --kbq-modal-font-header-font-weight: 700;
+    --kbq-modal-font-header-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-modal-font-header-text-transform: null;
+    --kbq-modal-font-header-font-feature-settings: 'calt', 'kern', 'liga';
+    --kbq-modal-font-content-font-size: 14px;
+    --kbq-modal-font-content-line-height: 20px;
+    --kbq-modal-font-content-letter-spacing: -0.006em;
+    --kbq-modal-font-content-font-weight: normal;
+    --kbq-modal-font-content-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-modal-font-content-text-transform: null;
+    --kbq-modal-font-content-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-modal-overlay-background: hsla(229, 15%, 20%, 32%);
+    --kbq-modal-container-background: hsla(229, 15%, 100%, 100%);
+    --kbq-modal-container-box-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 3px 16px hsla(229, 15%, 6%, 6%),
+        0 4px 32px hsla(229, 15%, 6%, 12%);
+    --kbq-modal-close-button-color: hsla(229, 15%, 15%, 100%);
+    --kbq-modal-header-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-modal-content-text-color: hsla(229, 15%, 15%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-modal-overlay-background: hsla(229, 15%, 6%, 64%);
+    --kbq-modal-container-background: hsla(229, 15%, 15%, 100%);
+    --kbq-modal-container-box-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-modal-close-button-color: hsla(229, 15%, 80%, 100%);
+    --kbq-modal-header-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-modal-content-text-color: hsla(229, 15%, 80%, 100%);
+}

package/modal/modal.component.d.ts

@@ -47,7 +47,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     kbqMaskStyle: object;
     kbqBodyStyle: object;
     kbqAfterOpen: EventEmitter<void>;
-    kbqAfterClose: EventEmitter<R>;
+    kbqAfterClose: EventEmitter<R | undefined>;
     kbqOkText: string;
     kbqOkType: KbqComponentColors;
     kbqRestoreFocus: boolean;
@@ -70,7 +70,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     modalAnimationClassMap: object;
     transformOrigin: string;
     get afterOpen(): Observable<void>;
-    get afterClose(): Observable<R>;
+    get afterClose(): Observable<R | undefined>;
     get okText(): string;
     get cancelText(): string;
     get hidden(): boolean;

package/modal/modal.scss

@@ -5,6 +5,8 @@
 
 @use './modal-confirm';
 
+@use './modal-theme' as *;
+
 .kbq-modal {
     box-sizing: border-box;
 
@@ -143,3 +145,6 @@
 .kbq-modal-open {
     overflow: hidden;
 }
+
+@include kbq-modal-theme();
+@include kbq-modal-typography();

package/modal/modal.service.d.ts

@@ -1,16 +1,20 @@
 import { Overlay } from '@angular/cdk/overlay';
+import { InjectionToken, Injector } from '@angular/core';
 import { Observable } from 'rxjs';
 import { KbqModalControlService } from './modal-control.service';
 import { KbqModalRef } from './modal-ref.class';
 import { KbqModalComponent } from './modal.component';
 import { ConfirmType, IModalOptionsForService } from './modal.type';
 import * as i0 from "@angular/core";
+/** Injection token that can be used to access the data that was passed in to a modal. */
+export declare const KBQ_MODAL_DATA: InjectionToken<unknown>;
 export declare class ModalBuilderForService {
     private readonly overlay;
     readonly options: IModalOptionsForService;
+    private readonly injector;
     private modalRef;
     private overlayRef;
-    constructor(overlay: Overlay, options?: IModalOptionsForService);
+    constructor(overlay: Overlay, options: IModalOptionsForService, injector: Injector);
     getInstance(): KbqModalComponent | null;
     destroyModal(): void;
     private changeProps;
@@ -19,15 +23,16 @@ export declare class ModalBuilderForService {
 export declare class KbqModalService {
     private readonly overlay;
     private readonly modalControl;
+    private injector;
     get openModals(): KbqModalRef[];
     get afterAllClose(): Observable<void>;
-    constructor(overlay: Overlay, modalControl: KbqModalControlService);
+    constructor(overlay: Overlay, modalControl: KbqModalControlService, injector: Injector);
     closeAll(): void;
-    create<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
-    confirm<C, R>(options?: IModalOptionsForService<C>, confirmType?: ConfirmType): KbqModalRef<C, R>;
-    open<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
-    success<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
-    delete<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    create<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    confirm<C, R = unknown>(options?: IModalOptionsForService<C>, confirmType?: ConfirmType): KbqModalRef<C, R>;
+    open<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    success<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    delete<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqModalService>;
 }

package/modal/modal.type.d.ts

@@ -19,6 +19,7 @@ export interface ModalOptions<C = any, R = any> {
     kbqTitle?: string | TemplateRef<{}>;
     kbqContent?: string | TemplateRef<{}> | Type<C>;
     kbqComponent?: Type<C>;
+    /** deprecated. Use field data and KBQ_MODAL_DATA */
     kbqComponentParams?: any;
     kbqClosable?: boolean;
     kbqMask?: boolean;
@@ -38,6 +39,8 @@ export interface ModalOptions<C = any, R = any> {
     kbqCancelText?: string;
     kbqCancelLoading?: boolean;
     kbqOnCancel?: EventEmitter<C> | OnClickCallback<C>;
+    /** Data being injected into the child component. */
+    data?: any;
 }
 export interface IModalOptionsForService<T = any> extends ModalOptions<T> {
     kbqOnOk?: OnClickCallback<T>;