@koobiq/components 17.0.0-rc.8 → 17.0.0

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

@@ -1,13 +1,18 @@
+/* stylelint-disable selector-pseudo-class-no-unknown */
+
 @use 'sass:meta';
 @use 'sass:map';
 
 @use '../functions/string' as *;
 
-
 @mixin kbq-scrollbar($tokens) {
     $border-width: calc(
-        (var(--kbq-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension)) -
-        var(--kbq-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width))) / 2
+        (
+                var(--kbq-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension)) - var(
+                        --kbq-scrollbar-size-thumb-width,
+                        map.get($tokens, scrollbar-size-thumb-width)
+                    )
+            ) / 2
     );
 
     //firefox
@@ -29,7 +34,6 @@
         }
     }
 
-    /* stylelint-disable no-descending-specificity */
     &::-webkit-scrollbar-thumb,
     ::-webkit-scrollbar-thumb {
         width: var(--kbq-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
@@ -57,7 +61,6 @@
     }
 }
 
-
 @mixin kbq-scrollbar-theme($theme) {
     $scrollbar: map.get(map.get($theme, components), scrollbar);
 

package/core/styles/theming/_theming.scss

@@ -8,11 +8,21 @@
 }
 
 @function kbq-palette($base-palette, $default) {
-    $result: map.merge($base-palette, (default: $default));
+    $result: map.merge(
+        $base-palette,
+        (
+            default: $default
+        )
+    );
 
     // For each hue in the palette, add a "-contrast" color to the map.
     @each $hue, $color in $base-palette {
-        $result: map.merge($result, ('#{$hue}-contrast': kbq-contrast($base-palette, $hue)));
+        $result: map.merge(
+            $result,
+            (
+                '#{$hue}-contrast': kbq-contrast($base-palette, $hue)
+            )
+        );
     }
 
     @return $result;
@@ -99,7 +109,6 @@
         warning: map.get($tokens, '#{$scheme}-background-warning'),
         warning-fade: map.get($tokens, '#{$scheme}-background-warning-fade'),
         transparent: map.get($tokens, '#{$scheme}-background-transparent'),
-
         // будет удалено, после удаления из компонентов ↓
         background: map.get($tokens, '#{$scheme}-background-background'),
         background-disabled: map.get($tokens, '#{$scheme}-background-background-disabled'),
@@ -140,7 +149,7 @@
         warning-fade: map.get($tokens, '#{$scheme}-line-warning-fade'),
         error: map.get($tokens, '#{$scheme}-line-error'),
         error-fade: map.get($tokens, '#{$scheme}-line-error-fade'),
-        visited: map.get($tokens, '#{$scheme}-line-visited'),
+        visited: map.get($tokens, '#{$scheme}-line-visited')
     );
 }
 
@@ -206,9 +215,7 @@
 }
 
 @function _theme_states-others($tokens, $scheme) {
-    @return (
-        brand: map.get($tokens, '#{$scheme}-states-others-brand')
-    );
+    @return (brand: map.get($tokens, '#{$scheme}-states-others-brand'));
 }
 
 @function _theme_states($tokens, $scheme) {
@@ -218,7 +225,6 @@
         icon: _theme_states-icon($tokens, $scheme),
         line: _theme_states-line($tokens, $scheme),
         others: _theme_states-others($tokens, $scheme),
-
         // будет удалено, после удаления из компонентов ↓
         focused-color: map.get($tokens, '#{$scheme}-states-focused-color'),
         focused-color-error: map.get($tokens, '#{$scheme}-states-focused-color-error'),
@@ -229,21 +235,23 @@
 }
 
 @function kbq-palette($base-palette, $default) {
-    @return map.merge($base-palette, (default: $default));
+    @return map.merge(
+        $base-palette,
+        (
+            default: $default
+        )
+    );
 }
 
 @function _theme_palette($tokens, $scheme, $name) {
     @return kbq-palette(
         map.get($tokens, '#{$scheme}-#{$name}-palette'),
         map.get($tokens, '#{$scheme}-#{$name}-default')
-    )
+    );
 }
 
 @function _theme_palette_neutral($tokens, $scheme) {
-    @return (
-        white: map.get($tokens, '#{$scheme}-neutral-white'),
-        black: map.get($tokens, '#{$scheme}-neutral-black'),
-    )
+    @return (white: map.get($tokens, '#{$scheme}-neutral-white'), black: map.get($tokens, '#{$scheme}-neutral-black'));
 }
 
 @function kbq-light-theme($tokens) {
@@ -257,7 +265,6 @@
         icon: _theme_icon($tokens, $scheme),
         line: _theme_line($tokens, $scheme),
         states: _theme_states($tokens, $scheme),
-
         theme: _theme_palette($tokens, $scheme, theme),
         success: _theme_palette($tokens, $scheme, success),
         warning: _theme_palette($tokens, $scheme, warning),
@@ -268,11 +275,9 @@
         black: _theme_palette($tokens, $scheme, black),
         brand: _theme_palette($tokens, $scheme, brand),
         purple: _theme_palette($tokens, $scheme, purple),
-
         // будет удалено, после удаления из компонентов ↓
         info: _theme_palette($tokens, $scheme, info),
         // будет удалено, после удаления из компонентов ↑
-
         components: kbq-components-theme($tokens, $scheme),
         tokens: $tokens
     );
@@ -289,7 +294,6 @@
         icon: _theme_icon($tokens, $scheme),
         line: _theme_line($tokens, $scheme),
         states: _theme_states($tokens, $scheme),
-
         theme: _theme_palette($tokens, $scheme, theme),
         success: _theme_palette($tokens, $scheme, success),
         warning: _theme_palette($tokens, $scheme, warning),
@@ -300,11 +304,9 @@
         black: _theme_palette($tokens, $scheme, black),
         brand: _theme_palette($tokens, $scheme, brand),
         purple: _theme_palette($tokens, $scheme, purple),
-
         // будет удалено, после удаления из компонентов ↓
         info: _theme_palette($tokens, $scheme, info),
         // будет удалено, после удаления из компонентов ↑
-
         components: kbq-components-theme($tokens, $scheme),
         tokens: $tokens
     );

package/core/styles/typography/_typography-utils.scss

@@ -2,12 +2,12 @@
 @use 'sass:meta';
 @use 'sass:string';
 
-
 @function kbq-typography-level(
     $font-size,
     $line-height: $font-size,
     $letter-spacing: normal,
     $font-weight: normal,
+    $font-style: normal,
     $font-family: null,
     $text-transform: null,
     $font-feature-settings: null
@@ -16,6 +16,7 @@
         font-size: $font-size,
         line-height: $line-height,
         font-weight: $font-weight,
+        font-style: $font-style,
         font-family: $font-family,
         letter-spacing: $letter-spacing,
         text-transform: $text-transform,
@@ -39,6 +40,10 @@
     @return _kbq-get-type-value($config, $level, font-weight);
 }
 
+@function kbq-font-style($config, $level) {
+    @return _kbq-get-type-value($config, $level, font-style);
+}
+
 @function kbq-letter-spacing($config, $level) {
     @return _kbq-get-type-value($config, $level, letter-spacing);
 }
@@ -55,7 +60,7 @@
 @function kbq-font-family($config, $level: null) {
     $font-family: map.get($config, font-family);
 
-    @if $level != null {
+    @if $level {
         $font-family: _kbq-get-type-value($config, $level, font-family);
     }
 
@@ -66,12 +71,13 @@
 @mixin kbq-typography-level-to-styles($config, $level) {
     $font-size: kbq-font-size($config, $level);
     $font-weight: kbq-font-weight($config, $level);
+    $font-style: kbq-font-style($config, $level);
     $line-height: kbq-line-height($config, $level);
     $font-family: kbq-font-family($config, $level);
     $text-transform: kbq-text-transform($config, $level);
     $font-feature-settings: kbq-font-feature-settings($config, $level);
 
-    font: $font-weight #{$font-size}/#{$line-height} $font-family;
+    font: $font-weight $font-style #{$font-size}/#{$line-height} $font-family;
     letter-spacing: kbq-letter-spacing($config, $level);
     text-transform: kbq-text-transform($config, $level);
     font-feature-settings: kbq-font-feature-settings($config, $level);

package/core/styles/typography/_typography.scss

@@ -2,98 +2,104 @@
 
 @use 'typography-utils' as *;
 
-
 @function kbq-typography-config($tokens) {
     $font-family: map.get($tokens, font-family-base);
     $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),
-
+        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),
-
+        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),
-
-        display-big-strong:      map.get($typography, display-big-strong),
-        display-normal-strong:   map.get($typography, display-normal-strong),
-        display-compact-strong:  map.get($typography, display-compact-strong),
-
-        text-big:                map.get($typography, text-big),
-        text-big-strong:         map.get($typography, text-big-strong),
-        text-normal:             map.get($typography, text-normal),
-        text-normal-strong:      map.get($typography, text-normal-strong),
-        text-compact:            map.get($typography, text-compact),
-        text-compact-strong:     map.get($typography, text-compact-strong),
-        caps-big:                map.get($typography, caps-big),
-        caps-big-strong:         map.get($typography, caps-big-strong),
-        caps-normal:             map.get($typography, caps-normal),
-        caps-normal-strong:      map.get($typography, caps-normal-strong),
-        caps-compact:            map.get($typography, caps-compact),
-        caps-compact-strong:     map.get($typography, caps-compact-strong),
-        mono-big:                map.get($typography, mono-big),
-        mono-big-strong:         map.get($typography, mono-big-strong),
-        mono-normal:             map.get($typography, mono-normal),
-        mono-normal-strong:      map.get($typography, mono-normal-strong),
-        mono-compact:            map.get($typography, mono-compact),
-        mono-compact-strong:     map.get($typography, mono-compact-strong),
-        tabular-big:             map.get($typography, tabular-big),
-        tabular-big-strong:      map.get($typography, tabular-big-strong),
-        tabular-normal:          map.get($typography, tabular-normal),
-        tabular-normal-strong:   map.get($typography, tabular-normal-strong),
-        tabular-compact:         map.get($typography, tabular-compact),
-        tabular-compact-strong:  map.get($typography, tabular-compact-strong),
-        italic-big:              map.get($typography, italic-big),
-        italic-big-strong:       map.get($typography, italic-big-strong),
-        italic-normal:           map.get($typography, italic-normal),
-        italic-normal-strong:    map.get($typography, italic-normal-strong),
-        italic-compact:          map.get($typography, italic-compact),
-        italic-compact-strong:   map.get($typography, italic-compact-strong),
-        mono-codeblock:          map.get($typography, mono-codeblock),
-
-        navbar-title:            map.get($typography, navbar-title)
+        display-big: map.get($typography, display-big),
+        display-normal: map.get($typography, display-normal),
+        display-compact: map.get($typography, display-compact),
+        display-big-strong: map.get($typography, display-big-strong),
+        display-normal-strong: map.get($typography, display-normal-strong),
+        display-compact-strong: map.get($typography, display-compact-strong),
+        text-big: map.get($typography, text-big),
+        text-big-strong: map.get($typography, text-big-strong),
+        text-normal: map.get($typography, text-normal),
+        text-normal-strong: map.get($typography, text-normal-strong),
+        text-compact: map.get($typography, text-compact),
+        text-compact-strong: map.get($typography, text-compact-strong),
+        caps-big: map.get($typography, caps-big),
+        caps-big-strong: map.get($typography, caps-big-strong),
+        caps-normal: map.get($typography, caps-normal),
+        caps-normal-strong: map.get($typography, caps-normal-strong),
+        caps-compact: map.get($typography, caps-compact),
+        caps-compact-strong: map.get($typography, caps-compact-strong),
+        mono-big: map.get($typography, mono-big),
+        mono-big-strong: map.get($typography, mono-big-strong),
+        mono-normal: map.get($typography, mono-normal),
+        mono-normal-strong: map.get($typography, mono-normal-strong),
+        mono-compact: map.get($typography, mono-compact),
+        mono-compact-strong: map.get($typography, mono-compact-strong),
+        tabular-big: map.get($typography, tabular-big),
+        tabular-big-strong: map.get($typography, tabular-big-strong),
+        tabular-normal: map.get($typography, tabular-normal),
+        tabular-normal-strong: map.get($typography, tabular-normal-strong),
+        tabular-compact: map.get($typography, tabular-compact),
+        tabular-compact-strong: map.get($typography, tabular-compact-strong),
+        italic-big: map.get($typography, italic-big),
+        italic-big-strong: map.get($typography, italic-big-strong),
+        italic-normal: map.get($typography, italic-normal),
+        italic-normal-strong: map.get($typography, italic-normal-strong),
+        italic-compact: map.get($typography, italic-compact),
+        italic-compact-strong: map.get($typography, italic-compact-strong),
+        mono-codeblock: map.get($typography, mono-codeblock),
+        navbar-title: map.get($typography, navbar-title)
     );
 
     @each $key, $level in $config {
-        @if map.get($level, font-family) == null {
-            $new-level: map.merge($level, (font-family: $font-family));
-            $config: map.merge($config, ($key: $new-level));
+        @if not map.get($level, font-family) {
+            $new-level: map.merge(
+                $level,
+                (
+                    font-family: $font-family
+                )
+            );
+            $config: map.merge(
+                $config,
+                (
+                    $key: $new-level
+                )
+            );
         }
     }
 
     // Add the base font family to the config.
-    @return map.merge($config, (font-family: $font-family, tokens: $tokens));
+    @return map.merge(
+        $config,
+        (
+            font-family: $font-family,
+            tokens: $tokens
+        )
+    );
 }
 
 @function kbq-markdown-typography-config($tokens) {
@@ -101,32 +107,46 @@
     $md-typography: map.get(map.get($tokens, md-typography), md-typography);
 
     $config: (
-        md-h1:              map.get($md-typography, md-h1),
-        md-h2:              map.get($md-typography, md-h2),
-        md-h3:              map.get($md-typography, md-h3),
-        md-h4:              map.get($md-typography, md-h4),
-        md-h5:              map.get($md-typography, md-h5),
-        md-h6:              map.get($md-typography, md-h6),
-
-        md-body:            map.get($md-typography, md-body),
-        md-body-mono:       map.get($md-typography, md-body-mono),
-        md-caption:         map.get($md-typography, md-caption),
-        md-table-cell:      map.get($md-typography, md-table-cell),
-        md-table-header:    map.get($md-typography, md-table-header),
+        md-h1: map.get($md-typography, md-h1),
+        md-h2: map.get($md-typography, md-h2),
+        md-h3: map.get($md-typography, md-h3),
+        md-h4: map.get($md-typography, md-h4),
+        md-h5: map.get($md-typography, md-h5),
+        md-h6: map.get($md-typography, md-h6),
+        md-body: map.get($md-typography, md-body),
+        md-body-mono: map.get($md-typography, md-body-mono),
+        md-caption: map.get($md-typography, md-caption),
+        md-table-cell: map.get($md-typography, md-table-cell),
+        md-table-header: map.get($md-typography, md-table-header)
     );
 
     @each $key, $level in $config {
-        @if map.get($level, font-family) == null {
-            $new-level: map.merge($level, (font-family: $font-family));
-            $config: map.merge($config, ($key: $new-level));
+        @if not map.get($level, font-family) {
+            $new-level: map.merge(
+                $level,
+                (
+                    font-family: $font-family
+                )
+            );
+            $config: map.merge(
+                $config,
+                (
+                    $key: $new-level
+                )
+            );
         }
     }
 
     // Add the base font family to the config.
-    @return map.merge($config, (font-family: $font-family, tokens: $tokens));
+    @return map.merge(
+        $config,
+        (
+            font-family: $font-family,
+            tokens: $tokens
+        )
+    );
 }
 
-
 @mixin kbq-base-typography($config) {
     //legacy will be deleted
     .kbq-display-1 {

package/core/styles/visual/_body.scss

@@ -1,8 +1,6 @@
 @use '../../styles/common/size';
 
-
 @mixin body-html() {
-
     // HTML & Body reset
     html,
     body {

package/core/styles/visual/_layout.scss

@@ -5,7 +5,6 @@
 
 @use '../common/tokens' as *;
 
-
 /*
 *  Responsive attributes
 *
@@ -26,7 +25,7 @@
 }
 
 @mixin flex-order-for-name($sizes: null) {
-    @if $sizes == null {
+    @if not $sizes {
         $sizes: '';
 
         .flex-order {
@@ -54,8 +53,8 @@
     }
 }
 
-@mixin offset-for-name($sizes:null) {
-    @if $sizes == null {
+@mixin offset-for-name($sizes: null) {
+    @if not $sizes {
         $sizes: '';
     }
 
@@ -70,8 +69,7 @@
                 $suffix: '#{$i * 5}';
             }
 
-            $offsets:
-                '.offset-#{$suffix}, ' +
+            $offsets: '.offset-#{$suffix}, ' +
                 '.flex-offset-#{$suffix}, ' +
                 '.layout-margin .flex-offset-#{$suffix}, ' +
                 '.layout-margin .offset-#{$suffix}';
@@ -97,8 +95,7 @@
                 $suffix: '#{$i}';
             }
 
-            $offsets:
-                '.offset-#{$suffix}, ' +
+            $offsets: '.offset-#{$suffix}, ' +
                 '.flex-offset-#{$suffix}, ' +
                 '.layout-margin .flex-offset-#{$suffix}, ' +
                 '.layout-margin .offset-#{$suffix}';
@@ -120,8 +117,7 @@
                 $suffix: '#{$i}';
             }
 
-            $offsets:
-                '.offset-#{$suffix}, ' +
+            $offsets: '.offset-#{$suffix}, ' +
                 '.flex-offset-#{$suffix}, ' +
                 '.layout-margin .flex-offset-#{$suffix}, ' +
                 '.layout-margin .offset-#{$suffix}';
@@ -134,7 +130,7 @@
 }
 
 @mixin layout-for-name($name: null) {
-    @if $name == null {
+    @if not $name {
         $name: '';
     }
 
@@ -167,7 +163,7 @@
 @mixin flex-properties-for-name($name: null) {
     $flexName: 'flex';
 
-    @if $name != null {
+    @if $name {
         $flexName: 'flex-#{$name}';
         $name: '-#{$name}';
     } @else {
@@ -175,13 +171,27 @@
     }
 
     // === flex: 1 1 0%;
-    .#{$flexName}             { flex: 1; }
-    .#{$flexName}-grow        { flex: 1 1 100%; }
-    .#{$flexName}-initial     { flex: 0 1 auto; }
-    .#{$flexName}-auto        { flex: 1 1 auto; }
-    .#{$flexName}-none        { flex: 0 0 auto; }
-    .#{$flexName}-no-shrink    { flex: 1 0 auto; }
-    .#{$flexName}-no-grow      { flex: 0 1 auto; }
+    .#{$flexName} {
+        flex: 1;
+    }
+    .#{$flexName}-grow {
+        flex: 1 1 100%;
+    }
+    .#{$flexName}-initial {
+        flex: 0 1 auto;
+    }
+    .#{$flexName}-auto {
+        flex: 1 1 auto;
+    }
+    .#{$flexName}-none {
+        flex: 0 0 auto;
+    }
+    .#{$flexName}-no-shrink {
+        flex: 1 0 auto;
+    }
+    .#{$flexName}-no-grow {
+        flex: 0 1 auto;
+    }
 
     // (1-20) * 5 = 0-100%
     @for $i from 0 through 20 {
@@ -332,7 +342,6 @@
 }
 
 @mixin layout-align-for-name($suffix: null) {
-
     // Alignment attributes for layout containers' children
     // Arrange on the Main Axis
     // center, start, end, space-between, space-around
@@ -340,7 +349,7 @@
     // ------------------------------
 
     $name: 'layout-align';
-    @if $suffix != null {
+    @if $suffix {
         $name: 'layout-align-#{$suffix}';
     }
 
@@ -522,4 +531,3 @@
 
     @include layout-indents();
 }
-

package/core/utils/data-size/index.d.ts

@@ -1,3 +1,3 @@
 export * from './config';
-export * from './size';
 export * from './data-size.pipe';
+export * from './size';

package/core/utils/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './utils';
 export * from './data-size';
+export * from './utils';