@koobiq/components 17.2.0 → 17.3.0

package/core/option/_option-theme.scss

@@ -10,15 +10,15 @@
     background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: kbq-css-variable(list-#{$style-name}-text, map.get($state, text));
+        color: kbq-css-variable(list-#{$style-name}-text-color, map.get($state, text));
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(list-#{$style-name}-icon-button, map.get($state, icon-button));
+        color: kbq-css-variable(list-#{$style-name}-icon-button-color, map.get($state, icon-button));
     }
 
     .kbq-option-caption {
-        color: kbq-css-variable(list-#{$style-name}-caption, map.get($state, caption));
+        color: kbq-css-variable(list-#{$style-name}-caption-color, map.get($state, caption));
     }
 }
 
@@ -34,7 +34,10 @@
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: map.get($list-item, states-focused, focus-outline);
+            border-color: kbq-css-variable(
+                list-states-focused-focus-outline-color,
+                map.get($list-item, states-focused, focus-outline)
+            );
         }
 
         &.kbq-selected {

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -16,18 +16,18 @@
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        border-color: kbq-css-variable(#{$base}-checked-border, map.get($style, checked, border));
-        background: kbq-css-variable(#{$base}-checked-background, map.get($style, checked, background));
+        border-color: kbq-css-variable(#{$base}-states-checked-border, map.get($style, checked, border));
+        background: kbq-css-variable(#{$base}-states-checked-background, map.get($style, checked, background));
     }
 
     &.kbq-disabled {
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: kbq-css-variable(#{$base}-disabled-color, map.get($style, disabled, color));
+            color: kbq-css-variable(#{$base}-states-disabled-color, map.get($style, disabled, color));
         }
 
-        border-color: kbq-css-variable(#{$base}-disabled-border, map.get($style, disabled, border));
-        background: kbq-css-variable(#{$base}-disabled-background, map.get($style, disabled, background));
+        border-color: kbq-css-variable(#{$base}-states-disabled-border, map.get($style, disabled, border));
+        background: kbq-css-variable(#{$base}-states-disabled-background, map.get($style, disabled, background));
     }
 }
 

package/core/styles/_koobiq-theme.scss

@@ -119,8 +119,8 @@
         $md-config: kbq-markdown-typography-config($tokens);
     }
 
-    @include kbq-base-typography($config);
-    @include kbq-markdown-base-typography($md-config);
+    @include kbq-base-typography();
+    @include kbq-markdown-base-typography();
 
     @include kbq-alert-typography($config);
     @include kbq-badge-typography($config);

package/core/styles/theming/_components-theming.scss

@@ -254,7 +254,7 @@
             )
         ),
         transparent: (
-            theme: (
+            theme-fade-on: (
                 border: map.get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-border'),
                 foreground: map.get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-foreground'),
                 background: map.get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-background'),
@@ -271,7 +271,7 @@
                 states-disabled-right-icon:
                     map.get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-states-disabled-right-icon')
             ),
-            contrast: (
+            contrast-fade-on: (
                 border: map.get($tokens, 'button-#{$scheme}-transparent-contrast-fade-on-border'),
                 foreground: map.get($tokens, 'button-#{$scheme}-transparent-contrast-fade-on-foreground'),
                 background: map.get($tokens, 'button-#{$scheme}-transparent-contrast-fade-on-background'),
@@ -885,10 +885,8 @@
     );
 
     $link: (
-        default: (
-            text: map.get($tokens, 'link-#{$scheme}-text'),
-            border-bottom: map.get($tokens, 'link-#{$scheme}-border-bottom')
-        ),
+        text: map.get($tokens, 'link-#{$scheme}-text'),
+        border-bottom: map.get($tokens, 'link-#{$scheme}-border-bottom'),
         state-visited: (
             text: map.get($tokens, 'link-#{$scheme}-state-visited-text'),
             border-bottom: map.get($tokens, 'link-#{$scheme}-state-visited-border-bottom')
@@ -1019,25 +1017,25 @@
                 icon-left: map.get($tokens, 'navbar-item-#{$scheme}-default-content-icon-left'),
                 icon-right: map.get($tokens, 'navbar-item-#{$scheme}-default-content-icon-right')
             ),
-            hover: (
+            states-hover: (
                 background: map.get($tokens, 'navbar-item-#{$scheme}-states-hover-content-background'),
                 text: map.get($tokens, 'navbar-item-#{$scheme}-states-hover-content-text'),
                 icon-left: map.get($tokens, 'navbar-item-#{$scheme}-states-hover-content-icon-left'),
                 icon-right: map.get($tokens, 'navbar-item-#{$scheme}-states-hover-content-icon-right')
             ),
-            selected: (
+            states-selected: (
                 background: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-content-background'),
                 text: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-content-text'),
                 icon-left: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-content-icon-left'),
                 icon-right: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-content-icon-right')
             ),
-            selected-hover: (
+            states-selected-hover: (
                 background: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-background'),
                 text: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-text'),
                 icon-left: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-icon-left'),
                 icon-right: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-icon-right')
             ),
-            disabled: (
+            states-disabled: (
                 background: map.get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-background'),
                 text: map.get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-text'),
                 icon-left: map.get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-icon-left'),
@@ -1531,20 +1529,20 @@
                 icon: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-default-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-default-close-button')
             ),
-            hover: (
+            states-hover: (
                 background: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-close-button')
             ),
-            focus: (
+            states-focus: (
                 background: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-close-button'),
                 outline: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-outline')
             ),
-            disabled: (
+            states-disabled: (
                 background: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-disabled-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-disabled-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-disabled-icon'),
@@ -1558,20 +1556,20 @@
                 icon: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-default-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-default-close-button')
             ),
-            hover: (
+            states-hover: (
                 background: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-close-button')
             ),
-            focus: (
+            states-focus: (
                 background: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-close-button'),
                 outline: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-outline')
             ),
-            disabled: (
+            states-disabled: (
                 background: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-disabled-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-disabled-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-disabled-icon'),
@@ -1585,20 +1583,20 @@
                 icon: map.get($tokens, 'tag-#{$scheme}-error-fade-on-default-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-error-fade-on-default-close-button')
             ),
-            hover: (
+            states-hover: (
                 background: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-close-button')
             ),
-            focus: (
+            states-focus: (
                 background: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-close-button'),
                 outline: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-outline')
             ),
-            disabled: (
+            states-disabled: (
                 background: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-disabled-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-disabled-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-disabled-icon'),

package/core/styles/theming/_scrollbar-theme.scss

@@ -58,7 +58,8 @@
 
         // firefox
         @supports not selector(::-webkit-scrollbar) {
-            scrollbar-color: map.get($scrollbar, default) transparent;
+            scrollbar-color: kbq-css-variable(scrollbar-thumb-default-background, map.get($scrollbar, default))
+                transparent;
         }
 
         // webkit
@@ -72,18 +73,18 @@
             border-color: transparent;
 
             background-clip: content-box;
-            background-color: map.get($scrollbar, default);
+            background-color: kbq-css-variable(scrollbar-thumb-default-background, map.get($scrollbar, default));
 
             &:hover {
-                background-color: map.get($scrollbar, hover);
+                background-color: kbq-css-variable(scrollbar-thumb-hover-background, map.get($scrollbar, hover));
             }
 
             &:disabled {
-                background-color: map.get($scrollbar, disabled);
+                background-color: kbq-css-variable(scrollbar-thumb-disabled-background, map.get($scrollbar, disabled));
             }
 
             &:active {
-                background-color: map.get($scrollbar, active);
+                background-color: kbq-css-variable(scrollbar-thumb-active-background, map.get($scrollbar, active));
             }
         }
     }

package/core/styles/typography/_typography.scss

@@ -2,6 +2,8 @@
 
 @use 'typography-utils' as *;
 
+@use '../common/tokens' as *;
+
 @function kbq-typography-config($tokens) {
     $font-family: map.get($tokens, font-family-base);
     $typography: map.get(map.get($tokens, koobiq), typography);
@@ -147,275 +149,275 @@
     );
 }
 
-@mixin kbq-base-typography($config) {
+@mixin kbq-base-typography() {
     //legacy will be deleted
     .kbq-display-1 {
-        @include kbq-typography-level-to-styles($config, display-1);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-1);
     }
 
     .kbq-display-2 {
-        @include kbq-typography-level-to-styles($config, display-2);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-2);
     }
 
     .kbq-display-3 {
-        @include kbq-typography-level-to-styles($config, display-3);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-3);
     }
 
     .kbq-display-1-strong {
-        @include kbq-typography-level-to-styles($config, display-1-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-1-strong);
     }
 
     .kbq-display-2-strong {
-        @include kbq-typography-level-to-styles($config, display-2-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-2-strong);
     }
 
     .kbq-display-3-strong {
-        @include kbq-typography-level-to-styles($config, display-3-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-3-strong);
     }
 
     .kbq-headline {
-        @include kbq-typography-level-to-styles($config, headline);
+        @include kbq-typography-level-to-styles_css-variables(typography, headline);
     }
 
     .kbq-subheading {
-        @include kbq-typography-level-to-styles($config, subheading);
+        @include kbq-typography-level-to-styles_css-variables(typography, subheading);
     }
 
     .kbq-title {
-        @include kbq-typography-level-to-styles($config, title);
+        @include kbq-typography-level-to-styles_css-variables(typography, title);
     }
 
     .kbq-body {
-        @include kbq-typography-level-to-styles($config, body);
+        @include kbq-typography-level-to-styles_css-variables(typography, body);
     }
 
     .kbq-body_tabular {
-        @include kbq-typography-level-to-styles($config, body-tabular);
+        @include kbq-typography-level-to-styles_css-variables(typography, body-tabular);
     }
 
     .kbq-body_strong {
-        @include kbq-typography-level-to-styles($config, body-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, body-strong);
     }
 
     .kbq-body_caps {
-        @include kbq-typography-level-to-styles($config, body-caps);
+        @include kbq-typography-level-to-styles_css-variables(typography, body-caps);
     }
 
     .kbq-body_mono {
-        @include kbq-typography-level-to-styles($config, body-mono);
+        @include kbq-typography-level-to-styles_css-variables(typography, body-mono);
     }
 
     .kbq-body_mono_strong {
-        @include kbq-typography-level-to-styles($config, body-mono-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, body-mono-strong);
     }
 
     .kbq-caption {
-        @include kbq-typography-level-to-styles($config, caption);
+        @include kbq-typography-level-to-styles_css-variables(typography, caption);
     }
 
     .kbq-caption_tabular {
-        @include kbq-typography-level-to-styles($config, caption-tabular);
+        @include kbq-typography-level-to-styles_css-variables(typography, caption-tabular);
     }
 
     .kbq-caption_strong {
-        @include kbq-typography-level-to-styles($config, caption-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, caption-strong);
     }
 
     .kbq-caption_caps {
-        @include kbq-typography-level-to-styles($config, caption-caps);
+        @include kbq-typography-level-to-styles_css-variables(typography, caption-caps);
     }
 
     .kbq-caption_mono {
-        @include kbq-typography-level-to-styles($config, caption-mono);
+        @include kbq-typography-level-to-styles_css-variables(typography, caption-mono);
     }
 
     .kbq-caption_mono_strong {
-        @include kbq-typography-level-to-styles($config, caption-mono-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, caption-mono-strong);
     }
 
     //.kbq-small-text {
-    //    @include kbq-typography-level-to-styles($config, small-text);
+    //    @include kbq-typography-level-to-styles_css-variables(typography,config, small-text);
     //}
 
     .kbq-extra-small-text {
-        @include kbq-typography-level-to-styles($config, extra-small-text);
+        @include kbq-typography-level-to-styles_css-variables(typography, extra-small-text);
     }
 
     .kbq-extra-small-text-strong {
-        @include kbq-typography-level-to-styles($config, extra-small-text-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, extra-small-text-strong);
     }
 
     // new
     .kbq-display-big {
-        @include kbq-typography-level-to-styles($config, display-big);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-big);
     }
 
     .kbq-display-big-strong {
-        @include kbq-typography-level-to-styles($config, display-big-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-big-strong);
     }
 
     .kbq-display-normal {
-        @include kbq-typography-level-to-styles($config, display-normal);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-normal);
     }
 
     .kbq-display-normal-strong {
-        @include kbq-typography-level-to-styles($config, display-normal-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-normal-strong);
     }
 
     .kbq-display-compact {
-        @include kbq-typography-level-to-styles($config, display-compact);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-compact);
     }
 
     .kbq-display-compact-strong {
-        @include kbq-typography-level-to-styles($config, display-compact-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, display-compact-strong);
     }
 
     .kbq-text-big {
-        @include kbq-typography-level-to-styles($config, text-big);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-big);
     }
 
     .kbq-text-big-strong {
-        @include kbq-typography-level-to-styles($config, text-big-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-big-strong);
     }
 
     .kbq-text-normal {
-        @include kbq-typography-level-to-styles($config, text-normal);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
     }
 
     .kbq-text-normal-strong {
-        @include kbq-typography-level-to-styles($config, text-normal-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-strong);
     }
 
     .kbq-text-compact {
-        @include kbq-typography-level-to-styles($config, text-compact);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
     }
 
     .kbq-text-compact-strong {
-        @include kbq-typography-level-to-styles($config, text-compact-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-compact-strong);
     }
 
     .kbq-caps-big {
-        @include kbq-typography-level-to-styles($config, caps-big);
+        @include kbq-typography-level-to-styles_css-variables(typography, caps-big);
     }
 
     .kbq-caps-big-strong {
-        @include kbq-typography-level-to-styles($config, caps-big-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, caps-big-strong);
     }
 
     .kbq-caps-normal {
-        @include kbq-typography-level-to-styles($config, caps-normal);
+        @include kbq-typography-level-to-styles_css-variables(typography, caps-normal);
     }
 
     .kbq-caps-normal-strong {
-        @include kbq-typography-level-to-styles($config, caps-normal-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, caps-normal-strong);
     }
 
     .kbq-caps-compact {
-        @include kbq-typography-level-to-styles($config, caps-compact);
+        @include kbq-typography-level-to-styles_css-variables(typography, caps-compact);
     }
 
     .kbq-caps-compact-strong {
-        @include kbq-typography-level-to-styles($config, caps-compact-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, caps-compact-strong);
     }
 
     .kbq-mono-big {
-        @include kbq-typography-level-to-styles($config, mono-big);
+        @include kbq-typography-level-to-styles_css-variables(typography, mono-big);
     }
 
     .kbq-mono-big-strong {
-        @include kbq-typography-level-to-styles($config, mono-big-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, mono-big-strong);
     }
 
     .kbq-mono-normal {
-        @include kbq-typography-level-to-styles($config, mono-normal);
+        @include kbq-typography-level-to-styles_css-variables(typography, mono-normal);
     }
 
     .kbq-mono-normal-strong {
-        @include kbq-typography-level-to-styles($config, mono-normal-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, mono-normal-strong);
     }
 
     .kbq-mono-compact {
-        @include kbq-typography-level-to-styles($config, mono-compact);
+        @include kbq-typography-level-to-styles_css-variables(typography, mono-compact);
     }
 
     .kbq-mono-compact-strong {
-        @include kbq-typography-level-to-styles($config, mono-compact-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, mono-compact-strong);
     }
 
     .kbq-tabular-big {
-        @include kbq-typography-level-to-styles($config, tabular-big);
+        @include kbq-typography-level-to-styles_css-variables(typography, tabular-big);
     }
 
     .kbq-tabular-big-strong {
-        @include kbq-typography-level-to-styles($config, tabular-big-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, tabular-big-strong);
     }
 
     .kbq-tabular-normal {
-        @include kbq-typography-level-to-styles($config, tabular-normal);
+        @include kbq-typography-level-to-styles_css-variables(typography, tabular-normal);
     }
 
     .kbq-tabular-normal-strong {
-        @include kbq-typography-level-to-styles($config, tabular-normal-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, tabular-normal-strong);
     }
 
     .kbq-tabular-compact {
-        @include kbq-typography-level-to-styles($config, tabular-compact);
+        @include kbq-typography-level-to-styles_css-variables(typography, tabular-compact);
     }
 
     .kbq-tabular-compact-strong {
-        @include kbq-typography-level-to-styles($config, tabular-compact-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, tabular-compact-strong);
     }
 
     .kbq-italic-big {
-        @include kbq-typography-level-to-styles($config, italic-big);
+        @include kbq-typography-level-to-styles_css-variables(typography, italic-big);
     }
 
     .kbq-italic-big-strong {
-        @include kbq-typography-level-to-styles($config, italic-big-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, italic-big-strong);
     }
 
     .kbq-italic-normal {
-        @include kbq-typography-level-to-styles($config, italic-normal);
+        @include kbq-typography-level-to-styles_css-variables(typography, italic-normal);
     }
 
     .kbq-italic-normal-strong {
-        @include kbq-typography-level-to-styles($config, italic-normal-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, italic-normal-strong);
     }
 
     .kbq-italic-compact {
-        @include kbq-typography-level-to-styles($config, italic-compact);
+        @include kbq-typography-level-to-styles_css-variables(typography, italic-compact);
     }
 
     .kbq-italic-compact-strong {
-        @include kbq-typography-level-to-styles($config, italic-compact-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, italic-compact-strong);
     }
 }
 
-@mixin kbq-markdown-base-typography($config) {
+@mixin kbq-markdown-base-typography() {
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
         .md-h#{$i} {
-            @include kbq-typography-level-to-styles($config, md-h#{$i});
+            @include kbq-typography-level-to-styles_css-variables(typography, md-h#{$i});
         }
     }
 
     .md-body {
-        @include kbq-typography-level-to-styles($config, md-body);
+        @include kbq-typography-level-to-styles_css-variables(typography, md-body);
     }
 
     .md-body-mono {
-        @include kbq-typography-level-to-styles($config, md-body-mono);
+        @include kbq-typography-level-to-styles_css-variables(typography, md-body-mono);
     }
 
     .md-caption {
-        @include kbq-typography-level-to-styles($config, md-caption);
+        @include kbq-typography-level-to-styles_css-variables(typography, md-caption);
     }
 
     .md-table-cell {
-        @include kbq-typography-level-to-styles($config, md-table-cell);
+        @include kbq-typography-level-to-styles_css-variables(typography, md-table-cell);
     }
 
     .md-table-header {
-        @include kbq-typography-level-to-styles($config, md-table-header);
+        @include kbq-typography-level-to-styles_css-variables(typography, md-table-header);
     }
 }