@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

package/markdown/_markdown-theme.scss

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

package/markdown/markdown.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -20,11 +20,9 @@ $tokens: meta.module-variables(tokens) !default;
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
         .kbq-markdown__h#{$i} {
-            max-width: var(--kbq-markdown-h#{$i}-size-max-width, map.get($tokens, markdown-h#{$i}-size-max-width));
-            margin-top: var(--kbq-markdown-h#{$i}-size-margin-top, map.get($tokens, markdown-h#{$i}-size-margin-top));
-            margin-bottom: var(
-                --kbq-markdown-h#{$i}-size-margin-bottom, map.get($tokens, markdown-h#{$i}-size-margin-bottom)
-            );
+            max-width: kbq-css-variable(markdown-h#{$i}-size-max-width);
+            margin-top: kbq-css-variable(markdown-h#{$i}-size-margin-top);
+            margin-bottom: kbq-css-variable(markdown-h#{$i}-size-margin-bottom);
         }
     }
 
@@ -40,29 +38,26 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-markdown__p {
-        max-width: var(--kbq-markdown-p-size-max-width, map.get($tokens, markdown-p-size-max-width));
-        margin-top: var(--kbq-markdown-p-size-margin-top, map.get($tokens, markdown-p-size-margin-top));
-        margin-bottom: var(--kbq-markdown-p-size-margin-bottom, map.get($tokens, markdown-p-size-margin-bottom));
+        max-width: kbq-css-variable(markdown-p-size-max-width);
+        margin-top: kbq-css-variable(markdown-p-size-margin-top);
+        margin-bottom: kbq-css-variable(markdown-p-size-margin-bottom);
     }
 
     .kbq-markdown__ul,
     .kbq-markdown__ol {
-        max-width: var(--kbq-markdown-list-size-max-width, map.get($tokens, markdown-list-size-max-width));
-        margin-top: var(--kbq-markdown-list-size-margin-top, map.get($tokens, markdown-list-size-margin-top));
-        margin-bottom: var(--kbq-markdown-list-size-margin-bottom, map.get($tokens, markdown-list-size-margin-bottom));
+        max-width: kbq-css-variable(markdown-list-size-max-width);
+        margin-top: kbq-css-variable(markdown-list-size-margin-top);
+        margin-bottom: kbq-css-variable(markdown-list-size-margin-bottom);
 
         > li {
-            margin-bottom: var(
-                --kbq-markdown-list-size-item-margin-bottom,
-                map.get($tokens, markdown-list-size-item-margin-bottom)
-            );
+            margin-bottom: kbq-css-variable(markdown-list-size-item-margin-bottom);
         }
     }
 
     .kbq-markdown__ul {
         position: relative;
         list-style: none;
-        padding: var(--kbq-markdown-list-size-ul-padding, map.get($tokens, markdown-list-size-ul-padding));
+        padding: kbq-css-variable(markdown-list-size-ul-padding);
     }
 
     .kbq-markdown__ul > li:before {
@@ -75,19 +70,15 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-markdown__ol {
-        //padding: var(--kbq-markdown-list-size-ol-padding, map.get($tokens, markdown-list-size-ol-padding));
         list-style: none;
         padding: 0;
         counter-reset: li;
 
         > li {
             &:before {
-                content:counter(li) ".";
+                content: counter(li) '.';
                 counter-increment: li;
-                padding-right: var(
-                    --kbq-markdown-list-size-ol-number-padding-right,
-                    map.get($tokens, markdown-list-size-ol-number-padding-right)
-                );
+                padding-right: kbq-css-variable(markdown-list-size-ol-number-padding-right);
             }
 
             > * {
@@ -98,36 +89,21 @@ $tokens: meta.module-variables(tokens) !default;
 
     .kbq-markdown__p + .kbq-markdown__ul,
     .kbq-markdown__p + .kbq-markdown__ol {
-        margin-top: var(
-            --kbq-markdown-list-size-margin-top-after-paragraph,
-            map.get($tokens, markdown-list-size-margin-top-after-paragraph)
-        );
+        margin-top: kbq-css-variable(markdown-list-size-margin-top-after-paragraph);
     }
 
     .kbq-markdown__blockquote {
-        max-width: var(
-            --kbq-markdown-blockquote-size-max-width, map.get($tokens, markdown-blockquote-size-max-width)
-        );
-        margin-top: var(
-            --kbq-markdown-blockquote-size-margin-top, map.get($tokens, markdown-blockquote-size-margin-top)
-        );
-
-        margin-bottom: var(
-            --kbq-markdown-blockquote-size-margin-bottom, map.get($tokens, markdown-blockquote-size-margin-bottom)
-        );
+        max-width: kbq-css-variable(markdown-blockquote-size-max-width);
+        margin-top: kbq-css-variable(markdown-blockquote-size-margin-top);
+        margin-left: 0;
+        margin-bottom: kbq-css-variable(markdown-blockquote-size-margin-bottom);
+        margin-right: 0;
 
-        border-left-width: var(
-            --kbq-markdown-blockquote-size-line-width, map.get($tokens, markdown-blockquote-size-line-width)
-        );
+        border-left-width: kbq-css-variable(markdown-blockquote-size-line-width);
 
         border-left-style: solid;
 
-        padding: var(
-            --kbq-markdown-blockquote-size-padding, map.get($tokens, markdown-blockquote-size-padding)
-        );
-
-        margin-left: 0;
-        margin-right: 0;
+        padding: kbq-css-variable(markdown-blockquote-size-padding);
     }
 
     .kbq-markdown__blockquote > .kbq-markdown__p {
@@ -139,53 +115,33 @@ $tokens: meta.module-variables(tokens) !default;
         position: relative;
         overflow-x: auto;
 
-        margin-top: var(
-            --kbq-markdown-code-size-multiline-margin-top,
-            map.get($tokens, markdown-code-size-multiline-margin-top)
-        );
-        margin-bottom: var(
-            --kbq-markdown-code-size-multiline-margin-bottom,
-            map.get($tokens, markdown-code-size-multiline-margin-bottom)
-        );
+        margin-top: kbq-css-variable(markdown-code-size-multiline-margin-top);
+        margin-bottom: kbq-css-variable(markdown-code-size-multiline-margin-bottom);
 
-        padding: var(
-            --kbq-markdown-code-size-multiline-padding,
-            map.get($tokens, markdown-code-size-multiline-padding)
-        );
+        padding: kbq-css-variable(markdown-code-size-multiline-padding);
     }
 
     .kbq-markdown__pre,
     .kbq-markdown__p > .kbq-markdown__code {
-        border-radius: var(
-            --kbq-markdown-code-size-border-radius, map.get($tokens, markdown-code-size-border-radius)
-        );
-        border-width: var(
-            --kbq-markdown-code-size-border-width, map.get($tokens, markdown-code-size-border-width)
-        );
+        border-radius: kbq-css-variable(markdown-code-size-border-radius);
+        border-width: kbq-css-variable(markdown-code-size-border-width);
         border-style: solid;
     }
 
     .kbq-markdown__p > .kbq-markdown__code {
-        max-width: var(--kbq-markdown-code-size-max-width, map.get($tokens, markdown-code-size-max-width));
-        padding: var(--kbq-markdown-code-size-inline-padding, map.get($tokens, markdown-code-size-inline-padding));
+        max-width: kbq-css-variable(markdown-code-size-max-width);
+        padding: kbq-css-variable(markdown-code-size-inline-padding);
     }
 
     .kbq-markdown__img {
-        max-width: var(--kbq-markdown-image-size-max-width, map.get($tokens, markdown-image-size-max-width));
-        margin-top: var(--kbq-markdown-image-size-margin-top, map.get($tokens, markdown-image-size-margin-top));
-        margin-bottom: var(
-            --kbq-markdown-image-size-margin-bottom, map.get($tokens, markdown-image-size-margin-bottom)
-        );
+        max-width: kbq-css-variable(markdown-image-size-max-width);
+        margin-top: kbq-css-variable(markdown-image-size-margin-top);
+        margin-bottom: kbq-css-variable(markdown-image-size-margin-bottom);
 
         + em {
             display: block;
-            margin-top: var(
-                --kbq-markdown-image-size-caption-margin-top, map.get($tokens, markdown-image-size-caption-margin-top)
-            );
-            margin-bottom: var(
-                --kbq-markdown-image-size-caption-margin-bottom,
-                map.get($tokens, markdown-image-size-caption-margin-bottom)
-            );
+            margin-top: kbq-css-variable(markdown-image-size-caption-margin-top);
+            margin-bottom: kbq-css-variable(markdown-image-size-caption-margin-bottom);
         }
     }
 
@@ -194,10 +150,8 @@ $tokens: meta.module-variables(tokens) !default;
         border-left: none;
         border-right: none;
         border-bottom-style: solid;
-        border-bottom-width: var(--kbq-markdown-hr-size-width, map.get($tokens, markdown-hr-size-width));
-        margin: var(
-            --kbq-markdown-hr-size-margin-vertical, map.get($tokens, markdown-hr-size-margin-vertical)
-        ) 0;
+        border-bottom-width: kbq-css-variable(markdown-hr-size-width);
+        margin: kbq-css-variable(markdown-hr-size-margin-vertical) 0;
     }
 
     .kbq-markdown__table {
@@ -205,26 +159,22 @@ $tokens: meta.module-variables(tokens) !default;
         overflow-x: auto;
         display: table;
         border-collapse: collapse;
-        margin-bottom: var(
-            --kbq-markdown-table-size-margin-bottom,
-            map.get($tokens, markdown-table-size-margin-bottom)
-        );
+        margin-bottom: kbq-css-variable(markdown-table-size-margin-bottom);
 
         td {
             vertical-align: top;
         }
 
-        th, td {
-            padding: var(--kbq-markdown-table-size-padding, map.get($tokens, markdown-table-size-padding));
+        th,
+        td {
+            padding: kbq-css-variable(markdown-table-size-padding);
             font-weight: 400;
         }
     }
 
     .kbq-markdown__table > .kbq-markdown__thead {
         border-bottom-style: solid;
-        border-bottom-width: var(
-            --kbq-markdown-table-size-border-width, map.get($tokens, markdown-table-size-border-width)
-        );
+        border-bottom-width: kbq-css-variable(markdown-table-size-border-width);
 
         text-align: left;
 

package/modal/README.md

@@ -1,6 +1,5 @@
 The dialog is currently divided into 3 modes - `default`, `confirm box`, `custom`.
 
-
 #### Using service to create Confirm Mode
 
 ```ts
@@ -18,14 +17,16 @@ showConfirm() {
 
 ```ts
 let dialogRef = modalService.open({
-    kbqComponent: CustomComponent
+    kbqComponent: CustomComponent,
 });
 ```
 
 ```ts
-@Component({/* ... */})
+@Component({
+    /* ... */
+})
 export class CustomComponent {
-    constructor(private dialogRef: KbqModalRef) { }
+    constructor(private dialogRef: KbqModalRef) {}
 
     closeDialog() {
         this.modal.destroy({ data: 'this the result data' });

package/modal/_modal-animation.scss

@@ -1,6 +1,5 @@
 @use '../core/styles/functions/timing' as *;
 
-
 $animation-duration-base: 0.3s;
 
 @mixin _motion-common($duration: $animation-duration-base) {

package/modal/_modal-confirm.scss

@@ -1,10 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-confirm {
     .kbq-modal-close {
@@ -14,8 +11,6 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-confirm-footer {
         display: flex;
 
-        gap: var(
-            --kbq-modal-size-footer-content-gap-horizontal, map.get($tokens, modal-size-footer-content-gap-horizontal)
-        );
+        gap: kbq-css-variable(modal-size-footer-content-gap-horizontal);
     }
 }

package/modal/_modal-theme.scss

@@ -2,51 +2,49 @@
 @use 'sass:map';
 
 @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);
 
     .kbq-modal {
-        background: map.get($modal, container-background);
-        box-shadow: map.get($modal, container-box-shadow);
+        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));
 
         .kbq-modal-header {
             & .kbq-modal-title {
-                color: map.get($modal, header);
+                color: kbq-css-variable(modal-header, map.get($modal, header));
             }
 
             & .kbq-modal-close {
-                color: map.get($modal, close-button);
+                color: kbq-css-variable(modal-close-button, map.get($modal, close-button));
             }
         }
 
         .kbq-modal-content {
-            color: map.get($modal, content);
+            color: kbq-css-variable(modal-content, map.get($modal, content));
         }
 
         .kbq-modal-header.kbq-modal-body_top-overflow {
-            box-shadow: map.get($modal, body-top-shadow);
+            box-shadow: kbq-css-variable(modal-body-top-shadow, map.get($modal, body-top-shadow));
         }
 
         .kbq-modal-footer.kbq-modal-body_bottom-overflow {
-            box-shadow: map.get($modal, body-bottom-shadow);
+            box-shadow: kbq-css-variable(modal-body-bottom-shadow, map.get($modal, body-bottom-shadow));
         }
     }
 
     .kbq-modal-mask {
-        background-color: map.get($modal, overlay);
+        background-color: kbq-css-variable(modal-overlay, map.get($modal, overlay));
     }
 }
 
 @mixin kbq-modal-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-modal-title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, modal-font-header));
+        @include kbq-typography-css-variables(modal, header);
     }
 
     .kbq-modal-body {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, modal-font-content));
+        @include kbq-typography-css-variables(modal, content);
     }
 }

package/modal/modal.component.d.ts

@@ -122,7 +122,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private createDynamicComponent;
     private updateTransformOrigin;
     /**
-     * Take care of the body's overflow to decide the existense of scrollbar
+     * Take care of the body's overflow to decide the existence of scrollbar
      * @param plusNum The number that the openModals.length will increase soon
      */
     private changeBodyOverflow;