@koobiq/components 17.5.0 → 17.6.1

package/loader-overlay/_loader-overlay-theme.scss

@@ -1,52 +1,37 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-loader-overlay-theme($theme) {
-    $loader-overlay: map.get(map.get($theme, components), loader-overlay);
-
+@mixin kbq-loader-overlay-theme() {
     // FIXME: move to unified mixin if necessary
     .kbq-loader-overlay_filled {
         &.kbq-loader-overlay {
-            background: kbq-css-variable(
-                loader-overlay-filled-overlay-background,
-                map.get($loader-overlay, filled, background)
-            );
+            background: kbq-css-variable(loader-overlay-filled-overlay-background);
         }
 
         & .kbq-loader-overlay-text {
-            color: kbq-css-variable(loader-overlay-filled-text-color, map.get($loader-overlay, filled, text));
+            color: kbq-css-variable(loader-overlay-filled-text-color);
         }
 
         & .kbq-loader-overlay-caption {
-            color: kbq-css-variable(loader-overlay-filled-caption-color, map.get($loader-overlay, filled, caption));
+            color: kbq-css-variable(loader-overlay-filled-caption-color);
         }
     }
 
     .kbq-loader-overlay_transparent {
         &.kbq-loader-overlay {
-            background: kbq-css-variable(
-                loader-overlay-transparent-overlay-background,
-                map.get($loader-overlay, transparent, background)
-            );
+            background: kbq-css-variable(loader-overlay-transparent-overlay-background);
         }
 
         & .kbq-loader-overlay-text {
-            color: kbq-css-variable(loader-overlay-transparent-text-color, map.get($loader-overlay, transparent, text));
+            color: kbq-css-variable(loader-overlay-transparent-text-color);
         }
 
         & .kbq-loader-overlay-caption {
-            color: kbq-css-variable(
-                loader-overlay-transparent-caption-color,
-                map.get($loader-overlay, transparent, caption)
-            );
+            color: kbq-css-variable(loader-overlay-transparent-caption-color);
         }
     }
 }
 
-@mixin kbq-loader-overlay-typography($config) {
+@mixin kbq-loader-overlay-typography() {
     .kbq-loader-overlay_big {
         & .kbq-loader-overlay-text {
             @include kbq-typography-css-variables(loader-overlay, big-text);

package/loader-overlay/loader-overlay-tokens.scss

@@ -0,0 +1,58 @@
+.kbq-loader-overlay {
+    --kbq-loader-overlay-size-big-overlay-padding-horizontal: 32px;
+    --kbq-loader-overlay-size-big-loader-margin-bottom: 24px;
+    --kbq-loader-overlay-size-big-content-content-gap-vertical: 4px;
+    --kbq-loader-overlay-size-compact-overlay-padding-horizontal: 32px;
+    --kbq-loader-overlay-size-compact-loader-margin-bottom: 8px;
+    --kbq-loader-overlay-size-compact-content-content-gap-vertical: 2px;
+    --kbq-loader-overlay-font-big-text-font-size: 18px;
+    --kbq-loader-overlay-font-big-text-line-height: 26px;
+    --kbq-loader-overlay-font-big-text-letter-spacing: normal;
+    --kbq-loader-overlay-font-big-text-font-weight: 600;
+    --kbq-loader-overlay-font-big-text-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-loader-overlay-font-big-text-text-transform: null;
+    --kbq-loader-overlay-font-big-text-font-feature-settings: 'calt', 'kern', 'liga';
+    --kbq-loader-overlay-font-big-caption-font-size: 14px;
+    --kbq-loader-overlay-font-big-caption-line-height: 20px;
+    --kbq-loader-overlay-font-big-caption-letter-spacing: -0.006em;
+    --kbq-loader-overlay-font-big-caption-font-weight: normal;
+    --kbq-loader-overlay-font-big-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-loader-overlay-font-big-caption-text-transform: null;
+    --kbq-loader-overlay-font-big-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-loader-overlay-font-compact-text-font-size: 14px;
+    --kbq-loader-overlay-font-compact-text-line-height: 20px;
+    --kbq-loader-overlay-font-compact-text-letter-spacing: -0.006em;
+    --kbq-loader-overlay-font-compact-text-font-weight: normal;
+    --kbq-loader-overlay-font-compact-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-loader-overlay-font-compact-text-text-transform: null;
+    --kbq-loader-overlay-font-compact-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-loader-overlay-font-compact-caption-font-size: 12px;
+    --kbq-loader-overlay-font-compact-caption-line-height: 16px;
+    --kbq-loader-overlay-font-compact-caption-letter-spacing: normal;
+    --kbq-loader-overlay-font-compact-caption-font-weight: normal;
+    --kbq-loader-overlay-font-compact-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-loader-overlay-font-compact-caption-text-transform: null;
+    --kbq-loader-overlay-font-compact-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-loader-overlay-transparent-overlay-background: hsla(229, 15%, 99%, 88%);
+    --kbq-loader-overlay-transparent-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-loader-overlay-transparent-caption-color: hsla(229, 15%, 50%, 100%);
+    --kbq-loader-overlay-filled-overlay-background: hsla(0, 0%, 100%, 100%);
+    --kbq-loader-overlay-filled-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-loader-overlay-filled-caption-color: hsla(229, 15%, 50%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-loader-overlay-transparent-overlay-background: hsla(229, 15%, 12%, 80%);
+    --kbq-loader-overlay-transparent-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-loader-overlay-transparent-caption-color: hsla(229, 15%, 60%, 100%);
+    --kbq-loader-overlay-filled-overlay-background: hsla(229, 15%, 12%, 100%);
+    --kbq-loader-overlay-filled-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-loader-overlay-filled-caption-color: hsla(229, 15%, 60%, 100%);
+}

package/loader-overlay/loader-overlay.scss

@@ -1,10 +1,6 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './loader-overlay-theme' as *;
 
 .kbq-loader-overlay_parent {
     position: relative;
@@ -72,3 +68,6 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
+
+@include kbq-loader-overlay-theme();
+@include kbq-loader-overlay-typography();

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;
 

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-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%);
+}