@koobiq/components 18.5.2 → 18.6.0

package/core/styles/typography/_typography.scss

@@ -10,34 +10,9 @@
     $typography: map.get(map.get($tokens, koobiq), typography);
 
     $config: (
-        //legacy will be deleted
-        display-1: map.get($typography, display-1),
-        display-2: map.get($typography, display-2),
-        display-3: map.get($typography, display-3),
-        display-1-strong: map.get($typography, display-1-strong),
-        display-2-strong: map.get($typography, display-2-strong),
-        display-3-strong: map.get($typography, display-3-strong),
         headline: map.get($typography, headline),
         subheading: map.get($typography, subheading),
         title: map.get($typography, title),
-        body: map.get($typography, body),
-        body-strong: map.get($typography, body-strong),
-        body-caps: map.get($typography, body-caps),
-        body-mono: map.get($typography, body-mono),
-        body-mono-strong: map.get($typography, body-mono-strong),
-        body-tabular: map.get($typography, body-tabular),
-        caption: map.get($typography, caption),
-        caption-strong: map.get($typography, caption-strong),
-        caption-caps: map.get($typography, caption-caps),
-        caption-mono: map.get($typography, caption-mono),
-        caption-mono-strong: map.get($typography, caption-mono-strong),
-        caption-tabular: map.get($typography, caption-tabular),
-        //small-text:             map.get($typography, small-text),
-        extra-small-text: map.get($typography, extra-small-text),
-        extra-small-text-caps: map.get($typography, extra-small-text-caps),
-        extra-small-text-mono: map.get($typography, extra-small-text-mono),
-        extra-small-text-strong: map.get($typography, extra-small-text-strong),
-        //new
         display-big: map.get($typography, display-big),
         display-normal: map.get($typography, display-normal),
         display-compact: map.get($typography, display-compact),
@@ -154,258 +129,244 @@
 }
 
 @mixin kbq-base-typography() {
-    //legacy will be deleted
-    .kbq-display-1 {
-        @include kbq-typography-level-to-styles_css-variables(typography, display-1);
-    }
-
-    .kbq-display-2 {
-        @include kbq-typography-level-to-styles_css-variables(typography, display-2);
-    }
-
-    .kbq-display-3 {
-        @include kbq-typography-level-to-styles_css-variables(typography, display-3);
-    }
-
-    .kbq-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_css-variables(typography, display-2-strong);
-    }
-
-    .kbq-display-3-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, display-3-strong);
-    }
-
     .kbq-headline {
-        @include kbq-typography-level-to-styles_css-variables(typography, headline);
+        @include kbq-typography-level-to-styles-css-variables(typography, headline);
     }
 
     .kbq-subheading {
-        @include kbq-typography-level-to-styles_css-variables(typography, subheading);
+        @include kbq-typography-level-to-styles-css-variables(typography, subheading);
     }
 
     .kbq-title {
-        @include kbq-typography-level-to-styles_css-variables(typography, title);
-    }
-
-    .kbq-body {
-        @include kbq-typography-level-to-styles_css-variables(typography, body);
-    }
-
-    .kbq-body_tabular {
-        @include kbq-typography-level-to-styles_css-variables(typography, body-tabular);
-    }
-
-    .kbq-body_strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, body-strong);
-    }
-
-    .kbq-body_caps {
-        @include kbq-typography-level-to-styles_css-variables(typography, body-caps);
-    }
-
-    .kbq-body_mono {
-        @include kbq-typography-level-to-styles_css-variables(typography, body-mono);
-    }
-
-    .kbq-body_mono_strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, body-mono-strong);
-    }
-
-    .kbq-caption {
-        @include kbq-typography-level-to-styles_css-variables(typography, caption);
-    }
-
-    .kbq-caption_tabular {
-        @include kbq-typography-level-to-styles_css-variables(typography, caption-tabular);
-    }
-
-    .kbq-caption_strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, caption-strong);
-    }
-
-    .kbq-caption_caps {
-        @include kbq-typography-level-to-styles_css-variables(typography, caption-caps);
-    }
-
-    .kbq-caption_mono {
-        @include kbq-typography-level-to-styles_css-variables(typography, caption-mono);
-    }
-
-    .kbq-caption_mono_strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, caption-mono-strong);
-    }
-
-    //.kbq-small-text {
-    //    @include kbq-typography-level-to-styles_css-variables(typography,config, small-text);
-    //}
-
-    .kbq-extra-small-text {
-        @include kbq-typography-level-to-styles_css-variables(typography, extra-small-text);
+        @include kbq-typography-level-to-styles-css-variables(typography, title);
     }
 
-    .kbq-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_css-variables(typography, display-big);
+        @include kbq-typography-level-to-styles-css-variables(typography, display-big);
     }
 
     .kbq-display-big-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, display-big-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, display-big-strong);
     }
 
     .kbq-display-normal {
-        @include kbq-typography-level-to-styles_css-variables(typography, display-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, display-normal);
     }
 
     .kbq-display-normal-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, display-normal-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, display-normal-strong);
     }
 
     .kbq-display-compact {
-        @include kbq-typography-level-to-styles_css-variables(typography, display-compact);
+        @include kbq-typography-level-to-styles-css-variables(typography, display-compact);
     }
 
     .kbq-display-compact-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, display-compact-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, display-compact-strong);
     }
 
     .kbq-text-big {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-big);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-big);
     }
 
     .kbq-text-big-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-big-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-big-strong);
     }
 
     .kbq-text-big-medium {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-big-medium);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-big-medium);
     }
 
     .kbq-text-normal {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
     .kbq-text-normal-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-strong);
     }
 
     .kbq-text-normal-medium {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
 
     .kbq-text-compact {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 
     .kbq-text-compact-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-compact-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-compact-strong);
     }
 
     .kbq-text-compact-medium {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-compact-medium);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-compact-medium);
     }
 
     .kbq-caps-big {
-        @include kbq-typography-level-to-styles_css-variables(typography, caps-big);
+        @include kbq-typography-level-to-styles-css-variables(typography, caps-big);
     }
 
     .kbq-caps-big-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, caps-big-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, caps-big-strong);
     }
 
     .kbq-caps-normal {
-        @include kbq-typography-level-to-styles_css-variables(typography, caps-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, caps-normal);
     }
 
     .kbq-caps-normal-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, caps-normal-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, caps-normal-strong);
     }
 
     .kbq-caps-compact {
-        @include kbq-typography-level-to-styles_css-variables(typography, caps-compact);
+        @include kbq-typography-level-to-styles-css-variables(typography, caps-compact);
     }
 
     .kbq-caps-compact-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, caps-compact-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, caps-compact-strong);
     }
 
     .kbq-mono-big {
-        @include kbq-typography-level-to-styles_css-variables(typography, mono-big);
+        @include kbq-typography-level-to-styles-css-variables(typography, mono-big);
     }
 
     .kbq-mono-big-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, mono-big-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, mono-big-strong);
     }
 
     .kbq-mono-normal {
-        @include kbq-typography-level-to-styles_css-variables(typography, mono-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, mono-normal);
     }
 
     .kbq-mono-normal-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, mono-normal-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, mono-normal-strong);
     }
 
     .kbq-mono-compact {
-        @include kbq-typography-level-to-styles_css-variables(typography, mono-compact);
+        @include kbq-typography-level-to-styles-css-variables(typography, mono-compact);
     }
 
     .kbq-mono-compact-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, mono-compact-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, mono-compact-strong);
     }
 
     .kbq-tabular-big {
-        @include kbq-typography-level-to-styles_css-variables(typography, tabular-big);
+        @include kbq-typography-level-to-styles-css-variables(typography, tabular-big);
     }
 
     .kbq-tabular-big-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, tabular-big-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, tabular-big-strong);
     }
 
     .kbq-tabular-normal {
-        @include kbq-typography-level-to-styles_css-variables(typography, tabular-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, tabular-normal);
     }
 
     .kbq-tabular-normal-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, tabular-normal-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, tabular-normal-strong);
     }
 
     .kbq-tabular-compact {
-        @include kbq-typography-level-to-styles_css-variables(typography, tabular-compact);
+        @include kbq-typography-level-to-styles-css-variables(typography, tabular-compact);
     }
 
     .kbq-tabular-compact-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, tabular-compact-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, tabular-compact-strong);
     }
 
     .kbq-italic-big {
-        @include kbq-typography-level-to-styles_css-variables(typography, italic-big);
+        @include kbq-typography-level-to-styles-css-variables(typography, italic-big);
     }
 
     .kbq-italic-big-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, italic-big-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, italic-big-strong);
     }
 
     .kbq-italic-normal {
-        @include kbq-typography-level-to-styles_css-variables(typography, italic-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, italic-normal);
     }
 
     .kbq-italic-normal-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, italic-normal-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, italic-normal-strong);
     }
 
     .kbq-italic-compact {
-        @include kbq-typography-level-to-styles_css-variables(typography, italic-compact);
+        @include kbq-typography-level-to-styles-css-variables(typography, italic-compact);
     }
 
     .kbq-italic-compact-strong {
-        @include kbq-typography-level-to-styles_css-variables(typography, italic-compact-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, italic-compact-strong);
+    }
+
+    [lang='zh-CN'] {
+        .kbq-text-normal-strong {
+            font-weight: var(--kbq-zh-cn-text-normal-strong-font-weight);
+        }
+
+        .kbq-mono-normal-strong {
+            font-weight: var(--kbq-zh-cn-mono-normal-strong-font-weight);
+        }
+
+        .kbq-text-compact-strong {
+            font-weight: var(--kbq-zh-cn-text-compact-strong-font-weight);
+        }
+
+        .kbq-mono-compact-strong {
+            font-weight: var(--kbq-zh-cn-mono-compact-strong-font-weight);
+        }
+    }
+
+    [lang='fa-IR'] {
+        .kbq-display-big {
+            font-family: var(--kbq-font-fa-ir-accent);
+        }
+
+        .kbq-display-normal {
+            font-family: var(--kbq-font-fa-ir-accent);
+        }
+
+        .kbq-display-compact {
+            font-family: var(--kbq-font-fa-ir-accent);
+        }
+
+        .kbq-title {
+            font-family: var(--kbq-font-fa-ir-accent);
+        }
+
+        .kbq-subheading {
+            font-family: var(--kbq-font-fa-ir-base);
+        }
+
+        .kbq-text-normal {
+            font-family: var(--kbq-font-fa-ir-base);
+        }
+
+        .kbq-tabular-normal {
+            font-family: var(--kbq-font-fa-ir-base);
+        }
+
+        .kbq-text-normal-strong {
+            font-family: var(--kbq-font-fa-ir-base);
+        }
+
+        .kbq-caps-normal {
+            font-family: var(--kbq-font-fa-ir-base);
+        }
+
+        .kbq-text-compact {
+            font-family: var(--kbq-font-fa-ir-base);
+        }
+
+        .kbq-tabular-compact {
+            font-family: var(--kbq-font-fa-ir-base);
+        }
+
+        .kbq-text-compact-strong {
+            font-family: var(--kbq-font-fa-ir-base);
+        }
+
+        .kbq-caps-compact {
+            font-family: var(--kbq-font-fa-ir-base);
+        }
     }
 }
 
@@ -413,27 +374,27 @@
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
         .md-h#{$i} {
-            @include kbq-typography-level-to-styles_css-variables(typography, md-h#{$i});
+            @include kbq-typography-level-to-styles-css-variables(md-typography, md-h#{$i});
         }
     }
 
     .md-body {
-        @include kbq-typography-level-to-styles_css-variables(typography, md-body);
+        @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
     }
 
     .md-body-mono {
-        @include kbq-typography-level-to-styles_css-variables(typography, md-body-mono);
+        @include kbq-typography-level-to-styles-css-variables(md-typography, md-body-mono);
     }
 
     .md-caption {
-        @include kbq-typography-level-to-styles_css-variables(typography, md-caption);
+        @include kbq-typography-level-to-styles-css-variables(md-typography, md-caption);
     }
 
     .md-table-cell {
-        @include kbq-typography-level-to-styles_css-variables(typography, md-table-cell);
+        @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-cell);
     }
 
     .md-table-header {
-        @include kbq-typography-level-to-styles_css-variables(typography, md-table-header);
+        @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-header);
     }
 }

package/core/styles/visual/_layout.scss

@@ -475,7 +475,7 @@
         '7xl': var(--kbq-size-7xl)
     );
 
-    $indents: 'padding', 'margin';
+    $indents: 'padding', 'margin', 'gap';
 
     @each $indent in $indents {
         @each $name, $value in $sizes {

package/datepicker/_datepicker-theme.scss

@@ -49,10 +49,10 @@
 
 @mixin kbq-datepicker-typography() {
     .kbq-calendar {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
     .kbq-calendar__table-header th {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 }

package/dl/_dl-theme.scss

@@ -13,11 +13,11 @@
 @mixin kbq-dl-typography() {
     .kbq-dl {
         & .kbq-dt {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
         & .kbq-dd {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
     }
 }

package/dl/dl-tokens.scss

@@ -6,11 +6,11 @@
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-description-list-term-color: var(--kbq-foreground-text-less-contrast);
+    --kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);
     --kbq-description-list-description-color: var(--kbq-foreground-contrast);
 }
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-description-list-term-color: var(--kbq-foreground-text-less-contrast);
+    --kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);
     --kbq-description-list-description-color: var(--kbq-foreground-contrast);
 }

package/dropdown/_dropdown-theme.scss

@@ -5,6 +5,10 @@
     background: var(--kbq-list-#{$style-name}-container-background);
     color: var(--kbq-list-#{$style-name}-text-color);
 
+    .kbq-icon:not(.kbq-icon-button, .kbq-icon-item) {
+        color: var(--kbq-list-#{$style-name}-text-color);
+    }
+
     .kbq-dropdown-item__caption {
         color: var(--kbq-list-#{$style-name}-caption-color);
     }
@@ -55,18 +59,18 @@
 @mixin kbq-dropdown-typography() {
     .kbq-dropdown-item,
     .kbq-dropdown__content {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
 
         .kbq-dropdown-item__caption {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
         }
     }
 
     .kbq-dropdown__group-header {
-        @include kbq-typography-level-to-styles_css-variables(typography, big-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, big-strong);
 
         &.kbq-dropdown__group-header_small {
-            @include kbq-typography-level-to-styles_css-variables(typography, caps-compact-strong);
+            @include kbq-typography-level-to-styles-css-variables(typography, caps-compact-strong);
         }
     }
 }

package/empty-state/_empty-state-theme.scss

@@ -30,21 +30,21 @@
 
     .kbq-empty-state_normal {
         .kbq-empty-state-title {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-big-strong);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-big-strong);
         }
 
         .kbq-empty-state-text {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
     }
 
     .kbq-empty-state_big {
         .kbq-empty-state-title {
-            @include kbq-typography-level-to-styles_css-variables(typography, headline);
+            @include kbq-typography-level-to-styles-css-variables(typography, headline);
         }
 
         .kbq-empty-state-text {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
     }
 }