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

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;
@@ -94,14 +104,11 @@
         error-less: map.get($tokens, '#{$scheme}-background-error-less'),
         success: map.get($tokens, '#{$scheme}-background-success'),
         success-fade: map.get($tokens, '#{$scheme}-background-success-fade'),
-        // surfacce — удалить после удаления из компонентов
-        surface: map.get($tokens, '#{$scheme}-background-surface'),
         theme: map.get($tokens, '#{$scheme}-background-theme'),
         theme-fade: map.get($tokens, '#{$scheme}-background-theme-fade'),
         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'),
@@ -122,6 +129,7 @@
         theme: map.get($tokens, '#{$scheme}-icon-theme'),
         contrast: map.get($tokens, '#{$scheme}-icon-contrast'),
         contrast-fade: map.get($tokens, '#{$scheme}-icon-contrast-fade'),
+        contrast-fade-hover: map.get($tokens, '#{$scheme}-icon-contrast-fade-hover'),
         success: map.get($tokens, '#{$scheme}-icon-success'),
         warning: map.get($tokens, '#{$scheme}-icon-warning'),
         error: map.get($tokens, '#{$scheme}-icon-error'),
@@ -141,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')
     );
 }
 
@@ -163,9 +171,7 @@
         error-fade-hover: map.get($tokens, '#{$scheme}-states-background-error-fade-hover'),
         error-fade-active: map.get($tokens, '#{$scheme}-states-background-error-fade-active'),
         // будет удалено, после удаления из компонентов ↓
-        error-less: map.get($tokens, '#{$scheme}-states-background-error-less'),
-        ghost-hover: map.get($tokens, '#{$scheme}-states-background-ghost-hover'),
-        ghost-active: map.get($tokens, '#{$scheme}-states-background-ghost-active')
+        error-less: map.get($tokens, '#{$scheme}-states-background-error-less')
     );
 }
 
@@ -209,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) {
@@ -221,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'),
@@ -232,25 +235,27 @@
 }
 
 @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) {
-    $scheme: 'light-color-scheme';
+    $scheme: 'light';
 
     @return (
         is-dark: false,
@@ -260,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),
@@ -271,19 +275,16 @@
         black: _theme_palette($tokens, $scheme, black),
         brand: _theme_palette($tokens, $scheme, brand),
         purple: _theme_palette($tokens, $scheme, purple),
-
         // будет удалено, после удаления из компонентов ↓
-        secondary: _theme_palette($tokens, $scheme, secondary),
         info: _theme_palette($tokens, $scheme, info),
         // будет удалено, после удаления из компонентов ↑
-
         components: kbq-components-theme($tokens, $scheme),
         tokens: $tokens
     );
 }
 
 @function kbq-dark-theme($tokens) {
-    $scheme: 'dark-color-scheme';
+    $scheme: 'dark';
 
     @return (
         is-dark: true,
@@ -293,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),
@@ -304,12 +304,9 @@
         black: _theme_palette($tokens, $scheme, black),
         brand: _theme_palette($tokens, $scheme, brand),
         purple: _theme_palette($tokens, $scheme, purple),
-
         // будет удалено, после удаления из компонентов ↓
-        secondary: _theme_palette($tokens, $scheme, secondary),
         info: _theme_palette($tokens, $scheme, info),
         // будет удалено, после удаления из компонентов ↑
-
         components: kbq-components-theme($tokens, $scheme),
         tokens: $tokens
     );

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

@@ -2,7 +2,6 @@
 @use 'sass:meta';
 @use 'sass:string';
 
-
 @function kbq-typography-level(
     $font-size,
     $line-height: $font-size,
@@ -55,7 +54,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);
     }
 

package/core/styles/typography/_typography.scss

@@ -2,89 +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),
-
-        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),
-        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) {
@@ -92,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 {
@@ -132,6 +161,18 @@
         @include kbq-typography-level-to-styles($config, display-3);
     }
 
+    .kbq-display-1-strong {
+        @include kbq-typography-level-to-styles($config, display-1-strong);
+    }
+
+    .kbq-display-2-strong {
+        @include kbq-typography-level-to-styles($config, display-2-strong);
+    }
+
+    .kbq-display-3-strong {
+        @include kbq-typography-level-to-styles($config, display-3-strong);
+    }
+
     .kbq-headline {
         @include kbq-typography-level-to-styles($config, headline);
     }
@@ -209,14 +250,26 @@
         @include kbq-typography-level-to-styles($config, display-big);
     }
 
+    .kbq-display-big-strong {
+        @include kbq-typography-level-to-styles($config, display-big-strong);
+    }
+
     .kbq-display-normal {
         @include kbq-typography-level-to-styles($config, display-normal);
     }
 
+    .kbq-display-normal-strong {
+        @include kbq-typography-level-to-styles($config, display-normal-strong);
+    }
+
     .kbq-display-compact {
         @include kbq-typography-level-to-styles($config, display-compact);
     }
 
+    .kbq-display-compact-strong {
+        @include kbq-typography-level-to-styles($config, display-compact-strong);
+    }
+
     .kbq-text-big {
         @include kbq-typography-level-to-styles($config, text-big);
     }

package/core/styles/visual/_body.scss

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