@koobiq/components 16.0.0-beta.7 → 16.0.0-beta.9

package/core/styles/theming/_theming.scss

@@ -37,8 +37,8 @@
         $background: map.get($theme, background);
         $foreground: map.get($theme, foreground);
 
-        background-color: kbq-color($background, background);
-        color: kbq-color($foreground, text);
+        background-color: kbq-color($background, bg);
+        color: kbq-color($foreground, contrast);
     }
 
     .kbq-theme-loaded-marker {
@@ -46,52 +46,205 @@
     }
 }
 
-@function _theme_states($tokens, $scheme) {
-    @return (
-        focused-color: map.get($tokens, '#{$scheme}-states-focused-color'),
-        selected-color: map.get($tokens, '#{$scheme}-states-selected-color'),
-        pressed-shadow: map.get($tokens, '#{$scheme}-states-pressed-shadow'),
-        disabled-opacity: map.get($tokens, '#{$scheme}-states-disabled-opacity')
-    );
-}
-
 @function _theme_foreground($tokens, $scheme) {
     @return (
+        white: map.get($tokens, '#{$scheme}-foreground-white'),
+        white-secondary: map.get($tokens, '#{$scheme}-foreground-white-secondary'),
+        theme: map.get($tokens, '#{$scheme}-foreground-theme'),
+        theme-secondary: map.get($tokens, '#{$scheme}-foreground-theme-secondary'),
+        on-contrast: map.get($tokens, '#{$scheme}-foreground-on-contrast'),
+        contrast: map.get($tokens, '#{$scheme}-foreground-contrast'),
+        contrast-secondary: map.get($tokens, '#{$scheme}-foreground-contrast-secondary'),
+        contrast-tertiary: map.get($tokens, '#{$scheme}-foreground-contrast-tertiary'),
+        success: map.get($tokens, '#{$scheme}-foreground-success'),
+        // будет удалено, после удаления из компонентов ↓
+        success-less: map.get($tokens, '#{$scheme}-foreground-success-less'),
+        success-secondary: map.get($tokens, '#{$scheme}-foreground-success-secondary'),
+        warning: map.get($tokens, '#{$scheme}-foreground-warning'),
+        warning-secondary: map.get($tokens, '#{$scheme}-foreground-warning-secondary'),
+        error: map.get($tokens, '#{$scheme}-foreground-error'),
+        error-secondary: map.get($tokens, '#{$scheme}-foreground-error-secondary'),
+        error-tertiary: map.get($tokens, '#{$scheme}-foreground-error-tertiary'),
+        visited: map.get($tokens, '#{$scheme}-foreground-visited'),
+        // будет удалено, после удаления из компонентов ↓
+        error-less: map.get($tokens, '#{$scheme}-foreground-error-less'),
+        // будет удалено, после удаления из компонентов ↓
         text: map.get($tokens, '#{$scheme}-foreground-text'),
         text-less-contrast: map.get($tokens, '#{$scheme}-foreground-text-less-contrast'),
         text-disabled: map.get($tokens, '#{$scheme}-foreground-text-disabled'),
         text-error: map.get($tokens, '#{$scheme}-foreground-text-error'),
         text-success: map.get($tokens, '#{$scheme}-foreground-text-success'),
-
         divider: map.get($tokens, '#{$scheme}-foreground-divider'),
         border: map.get($tokens, '#{$scheme}-foreground-border'),
-        icon: map.get($tokens, '#{$scheme}-foreground-icon'),
-
-        contrast: map.get($tokens, '#{$scheme}-foreground-contrast'),
+        icon: map.get($tokens, '#{$scheme}-foreground-icon')
     );
 }
 
 @function _theme_background($tokens, $scheme) {
     @return (
-        background: map.get($tokens, '#{$scheme}-background-background'),
         bg: map.get($tokens, '#{$scheme}-background-bg'),
+        bg-secondary: map.get($tokens, '#{$scheme}-background-bg-secondary'),
+        card: map.get($tokens, '#{$scheme}-background-card'),
+        contrast: map.get($tokens, '#{$scheme}-background-contrast'),
+        contrast-fade: map.get($tokens, '#{$scheme}-background-contrast-fade'),
+        night: map.get($tokens, '#{$scheme}-background-night'),
+        error: map.get($tokens, '#{$scheme}-background-error'),
+        error-fade: map.get($tokens, '#{$scheme}-background-error-fade'),
+        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'),
         background-less-contrast: map.get($tokens, '#{$scheme}-background-background-less-contrast'),
         background-under: map.get($tokens, '#{$scheme}-background-background-under'),
-
+        overlay: map.get($tokens, '#{$scheme}-background-overlay'),
+        overlay-inverse: map.get($tokens, '#{$scheme}-background-overlay-inverse'),
         overlay-hover: map.get($tokens, '#{$scheme}-background-overlay-hover'),
         overlay-active: map.get($tokens, '#{$scheme}-background-overlay-active'),
         overlay-disabled: map.get($tokens, '#{$scheme}-background-overlay-disabled')
     );
 }
 
+@function _theme_icon($tokens, $scheme) {
+    @return (
+        on-contrast: map.get($tokens, '#{$scheme}-icon-on-contrast'),
+        white: map.get($tokens, '#{$scheme}-icon-white'),
+        theme: map.get($tokens, '#{$scheme}-icon-theme'),
+        contrast: map.get($tokens, '#{$scheme}-icon-contrast'),
+        contrast-fade: map.get($tokens, '#{$scheme}-icon-contrast-fade'),
+        success: map.get($tokens, '#{$scheme}-icon-success'),
+        warning: map.get($tokens, '#{$scheme}-icon-warning'),
+        error: map.get($tokens, '#{$scheme}-icon-error'),
+        visited: map.get($tokens, '#{$scheme}-icon-visited')
+    );
+}
+
+@function _theme_line($tokens, $scheme) {
+    @return (
+        theme: map.get($tokens, '#{$scheme}-line-theme'),
+        theme-fade: map.get($tokens, '#{$scheme}-line-theme-fade'),
+        contrast: map.get($tokens, '#{$scheme}-line-contrast'),
+        contrast-fade: map.get($tokens, '#{$scheme}-line-contrast-fade'),
+        success: map.get($tokens, '#{$scheme}-line-success'),
+        success-fade: map.get($tokens, '#{$scheme}-line-success-fade'),
+        warning: map.get($tokens, '#{$scheme}-line-warning'),
+        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'),
+    );
+}
+
+@function _theme_states-background($tokens, $scheme) {
+    @return (
+        disabled: map.get($tokens, '#{$scheme}-states-background-disabled'),
+        transparent-hover: map.get($tokens, '#{$scheme}-states-background-transparent-hover'),
+        transparent-active: map.get($tokens, '#{$scheme}-states-background-transparent-active'),
+        contrast-hover: map.get($tokens, '#{$scheme}-states-background-contrast-hover'),
+        contrast-active: map.get($tokens, '#{$scheme}-states-background-contrast-active'),
+        contrast-fade-hover: map.get($tokens, '#{$scheme}-states-background-contrast-fade-hover'),
+        contrast-fade-active: map.get($tokens, '#{$scheme}-states-background-contrast-fade-active'),
+        theme-hover: map.get($tokens, '#{$scheme}-states-background-theme-hover'),
+        theme-active: map.get($tokens, '#{$scheme}-states-background-theme-active'),
+        theme-fade-hover: map.get($tokens, '#{$scheme}-states-background-theme-fade-hover'),
+        theme-fade-active: map.get($tokens, '#{$scheme}-states-background-theme-fade-active'),
+        error-hover: map.get($tokens, '#{$scheme}-states-background-error-hover'),
+        error-active: map.get($tokens, '#{$scheme}-states-background-error-active'),
+        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')
+    );
+}
+
+@function _theme_states-foreground($tokens, $scheme) {
+    @return (
+        disabled: map.get($tokens, '#{$scheme}-states-foreground-disabled'),
+        theme-hover: map.get($tokens, '#{$scheme}-states-foreground-theme-hover'),
+        theme-active: map.get($tokens, '#{$scheme}-states-foreground-theme-active'),
+        visited-hover: map.get($tokens, '#{$scheme}-states-foreground-visited-hover'),
+        visited-active: map.get($tokens, '#{$scheme}-states-foreground-visited-active')
+    );
+}
+
+@function _theme_states-icon($tokens, $scheme) {
+    @return (
+        theme-hover: map.get($tokens, '#{$scheme}-states-icon-theme-hover'),
+        theme-active: map.get($tokens, '#{$scheme}-states-icon-theme-active'),
+        contrast-hover: map.get($tokens, '#{$scheme}-states-icon-contrast-hover'),
+        contrast-active: map.get($tokens, '#{$scheme}-states-icon-contrast-active'),
+        contrast-fade-hover: map.get($tokens, '#{$scheme}-states-icon-contrast-fade-hover'),
+        contrast-fade-active: map.get($tokens, '#{$scheme}-states-icon-contrast-fade-active'),
+        error-hover: map.get($tokens, '#{$scheme}-states-icon-error-hover'),
+        error-active: map.get($tokens, '#{$scheme}-states-icon-error-active'),
+        success-hover: map.get($tokens, '#{$scheme}-states-icon-success-hover'),
+        success-active: map.get($tokens, '#{$scheme}-states-icon-success-active'),
+        disabled: map.get($tokens, '#{$scheme}-states-icon-disabled'),
+        warning-hover: map.get($tokens, '#{$scheme}-states-icon-warning-hover'),
+        warning-active: map.get($tokens, '#{$scheme}-states-icon-warning-active'),
+        visited-hover: map.get($tokens, '#{$scheme}-states-icon-visited-hover'),
+        visited-active: map.get($tokens, '#{$scheme}-states-icon-visited-active')
+    );
+}
+
+@function _theme_states-line($tokens, $scheme) {
+    @return (
+        focus: map.get($tokens, '#{$scheme}-states-line-focus'),
+        focus-theme: map.get($tokens, '#{$scheme}-states-line-focus-theme'),
+        focus-error: map.get($tokens, '#{$scheme}-states-line-focus-error'),
+        disabled: map.get($tokens, '#{$scheme}-states-line-disabled')
+    );
+}
+
+@function _theme_states-others($tokens, $scheme) {
+    @return (
+        brand: map.get($tokens, '#{$scheme}-states-others-brand')
+    );
+}
+
+@function _theme_states($tokens, $scheme) {
+    @return (
+        background: _theme_states-background($tokens, $scheme),
+        foreground: _theme_states-foreground($tokens, $scheme),
+        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'),
+        selected-color: map.get($tokens, '#{$scheme}-states-selected-color'),
+        pressed-shadow: map.get($tokens, '#{$scheme}-states-pressed-shadow'),
+        disabled-opacity: map.get($tokens, '#{$scheme}-states-disabled-opacity')
+    );
+}
+
 @function kbq-palette($base-palette, $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')
+        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'),
     )
 }
 
@@ -103,16 +256,25 @@
 
         background: _theme_background($tokens, $scheme),
         foreground: _theme_foreground($tokens, $scheme),
+        icon: _theme_icon($tokens, $scheme),
+        line: _theme_line($tokens, $scheme),
+        states: _theme_states($tokens, $scheme),
 
         theme: _theme_palette($tokens, $scheme, theme),
-        secondary: _theme_palette($tokens, $scheme, secondary),
-        error: _theme_palette($tokens, $scheme, error),
-
-        warning: _theme_palette($tokens, $scheme, warning),
         success: _theme_palette($tokens, $scheme, success),
+        warning: _theme_palette($tokens, $scheme, warning),
+        error: _theme_palette($tokens, $scheme, error),
+        contrast: _theme_palette($tokens, $scheme, contrast),
+        neutral: _theme_palette_neutral($tokens, $scheme),
+        white: _theme_palette($tokens, $scheme, white),
+        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),
-
-        states: _theme_states($tokens, $scheme),
+        // будет удалено, после удаления из компонентов ↑
 
         components: kbq-components-theme($tokens, $scheme),
         tokens: $tokens
@@ -127,16 +289,25 @@
 
         background: _theme_background($tokens, $scheme),
         foreground: _theme_foreground($tokens, $scheme),
+        icon: _theme_icon($tokens, $scheme),
+        line: _theme_line($tokens, $scheme),
+        states: _theme_states($tokens, $scheme),
 
         theme: _theme_palette($tokens, $scheme, theme),
-        secondary: _theme_palette($tokens, $scheme, secondary),
-        error: _theme_palette($tokens, $scheme, error),
-
-        warning: _theme_palette($tokens, $scheme, warning),
         success: _theme_palette($tokens, $scheme, success),
+        warning: _theme_palette($tokens, $scheme, warning),
+        error: _theme_palette($tokens, $scheme, error),
+        contrast: _theme_palette($tokens, $scheme, contrast),
+        neutral: _theme_palette_neutral($tokens, $scheme),
+        white: _theme_palette($tokens, $scheme, white),
+        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),
-
-        states: _theme_states($tokens, $scheme),
+        // будет удалено, после удаления из компонентов ↑
 
         components: kbq-components-theme($tokens, $scheme),
         tokens: $tokens

package/core/styles/typography/_typography.scss

@@ -8,6 +8,7 @@
     $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),
@@ -30,11 +31,46 @@
         caption-mono-strong:    map.get($typography, caption-mono-strong),
         caption-tabular:        map.get($typography, caption-tabular),
 
-        small-text:             map.get($typography, small-text),
+        //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-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)
     );
 
     @each $key, $level in $config {
@@ -80,6 +116,7 @@
 
 
 @mixin kbq-base-typography($config) {
+    //legacy will be deleted
     .kbq-display-1 {
         @include kbq-typography-level-to-styles($config, display-1);
     }
@@ -152,13 +189,146 @@
         @include kbq-typography-level-to-styles($config, caption-mono-strong);
     }
 
-    .kbq-small-text {
-        @include kbq-typography-level-to-styles($config, small-text);
-    }
+    //.kbq-small-text {
+    //    @include kbq-typography-level-to-styles($config, small-text);
+    //}
 
     .kbq-extra-small-text {
         @include kbq-typography-level-to-styles($config, extra-small-text);
     }
+
+    // new
+    .kbq-display-big {
+        @include kbq-typography-level-to-styles($config, display-big);
+    }
+
+    .kbq-display-normal {
+        @include kbq-typography-level-to-styles($config, display-normal);
+    }
+
+    .kbq-display-compact {
+        @include kbq-typography-level-to-styles($config, display-compact);
+    }
+
+    .kbq-text-big {
+        @include kbq-typography-level-to-styles($config, text-big);
+    }
+
+    .kbq-text-big-strong {
+        @include kbq-typography-level-to-styles($config, text-big-strong);
+    }
+
+    .kbq-text-normal {
+        @include kbq-typography-level-to-styles($config, text-normal);
+    }
+
+    .kbq-text-normal-strong {
+        @include kbq-typography-level-to-styles($config, text-normal-strong);
+    }
+
+    .kbq-text-compact {
+        @include kbq-typography-level-to-styles($config, text-compact);
+    }
+
+    .kbq-text-compact-strong {
+        @include kbq-typography-level-to-styles($config, text-compact-strong);
+    }
+
+    .kbq-caps-big {
+        @include kbq-typography-level-to-styles($config, caps-big);
+    }
+
+    .kbq-caps-big-strong {
+        @include kbq-typography-level-to-styles($config, caps-big-strong);
+    }
+
+    .kbq-caps-normal {
+        @include kbq-typography-level-to-styles($config, caps-normal);
+    }
+
+    .kbq-caps-normal-strong {
+        @include kbq-typography-level-to-styles($config, caps-normal-strong);
+    }
+
+    .kbq-caps-compact {
+        @include kbq-typography-level-to-styles($config, caps-compact);
+    }
+
+    .kbq-caps-compact-strong {
+        @include kbq-typography-level-to-styles($config, caps-compact-strong);
+    }
+
+    .kbq-mono-big {
+        @include kbq-typography-level-to-styles($config, mono-big);
+    }
+
+    .kbq-mono-big-strong {
+        @include kbq-typography-level-to-styles($config, mono-big-strong);
+    }
+
+    .kbq-mono-normal {
+        @include kbq-typography-level-to-styles($config, mono-normal);
+    }
+
+    .kbq-mono-normal-strong {
+        @include kbq-typography-level-to-styles($config, mono-normal-strong);
+    }
+
+    .kbq-mono-compact {
+        @include kbq-typography-level-to-styles($config, mono-compact);
+    }
+
+    .kbq-mono-compact-strong {
+        @include kbq-typography-level-to-styles($config, mono-compact-strong);
+    }
+
+    .kbq-tabular-big {
+        @include kbq-typography-level-to-styles($config, tabular-big);
+    }
+
+    .kbq-tabular-big-strong {
+        @include kbq-typography-level-to-styles($config, tabular-big-strong);
+    }
+
+    .kbq-tabular-normal {
+        @include kbq-typography-level-to-styles($config, tabular-normal);
+    }
+
+    .kbq-tabular-normal-strong {
+        @include kbq-typography-level-to-styles($config, tabular-normal-strong);
+    }
+
+    .kbq-tabular-compact {
+        @include kbq-typography-level-to-styles($config, tabular-compact);
+    }
+
+    .kbq-tabular-compact-strong {
+        @include kbq-typography-level-to-styles($config, tabular-compact-strong);
+    }
+
+    .kbq-italic-big {
+        @include kbq-typography-level-to-styles($config, italic-big);
+    }
+
+    .kbq-italic-big-strong {
+        @include kbq-typography-level-to-styles($config, italic-big-strong);
+    }
+
+    .kbq-italic-normal {
+        @include kbq-typography-level-to-styles($config, italic-normal);
+    }
+
+    .kbq-italic-normal-strong {
+        @include kbq-typography-level-to-styles($config, italic-normal-strong);
+    }
+
+    .kbq-italic-compact {
+        @include kbq-typography-level-to-styles($config, italic-compact);
+    }
+
+    .kbq-italic-compact-strong {
+        @include kbq-typography-level-to-styles($config, italic-compact-strong);
+    }
 }
 
 @mixin kbq-markdown-base-typography($config) {

package/datepicker/_datepicker-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/common/popup';
 @use '../core/styles/theming/theming';
 @use '../core/styles/typography/typography-utils' as *;
 
@@ -10,77 +9,68 @@ $kbq-datepicker-selected-fade-amount: 0.6;
 $kbq-datepicker-today-fade-amount: 0.2;
 
 @mixin kbq-datepicker-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
-    $primary: map.get($theme, theme);
-    $secondary: map.get($theme, secondary);
-
     $datepicker: map.get(map.get($theme, components), datepicker);
 
-    .kbq-calendar__table-header {
-        color: theming.kbq-color($secondary, 60);
-    }
+    $container: map.get($datepicker, container);
+    $header: map.get($datepicker, header);
+    $cell: map.get($datepicker, cell);
 
-    .kbq-datepicker-toggle__button.kbq-button-icon {
-        border-color: transparent;
-        border-radius: 0;
-        background: transparent;
-        opacity: 1;
+    .kbq-datepicker__content {
+        background: map.get($container, background);
+        box-shadow: map.get($container, box-shadow);
+    }
 
-        .kbq-icon {
-            color: theming.kbq-color($foreground, icon);
-        }
+    .kbq-calendar__table-header {
+        color: map.get($header, text);
     }
 
     .kbq-calendar__table-header-divider::after {
-        background: map.get($foreground, divider);
+        background: map.get($header, divider);
     }
 
     .kbq-calendar__body-cell-content {
-        color: map.get($foreground, text);
-        border-color: transparent;
-    }
+        $default: map.get($cell, default);
 
-    .kbq-calendar__body_disabled > .kbq-calendar__body-cell-content:not(.kbq-selected) {
-        color: map.get($foreground, text-disabled);
-    }
+        background: map.get($default, background);
+        color: map.get($default, text);
 
-    .cdk-keyboard-focused .kbq-calendar__body_active,
-    .cdk-program-focused .kbq-calendar__body_active {
-        & > .kbq-calendar__body-cell-content {
-            border-color: map.get(map.get($theme, states), focused-color);
-            box-shadow: 0 0 0 1px map.get(map.get($theme, states), focused-color);
+        &.kbq-calendar__body-today {
+            $today: map.get($cell, today);
+
+            background: map.get($today, background);
+            color: map.get($today, text);
         }
-    }
 
-    .kbq-calendar__body-cell:not(.kbq-calendar__body_disabled):hover {
-        & > .kbq-calendar__body-cell-content:not(.kbq-selected) {
-            background-color: theming.kbq-color($secondary, A8);
+        &:hover:not(.kbq-disabled) {
+            $hover: map.get($cell, hover);
+
+            background: map.get($hover, background);
         }
-    }
 
-    .kbq-calendar__body-today {
-        color: map.get($datepicker, state-selected-today-color);
-    }
+        &:active:not(.kbq-disabled) {
+            $active: map.get($cell, active);
 
-    .kbq-calendar__body_disabled > .kbq-calendar__body-today:not(.kbq-selected) {
-        border-color: map.get($background, background-disabled);
-    }
+            background: map.get($active, background);
+        }
 
-    .kbq-calendar__body-cell-content.kbq-selected {
-        background: map.get($datepicker, state-selected-background);
-        color: map.get($datepicker, state-selected-color);
-    }
+        &.kbq-selected:not(.kbq-disabled) {
+            $selected: map.get($cell, selected);
 
-    .kbq-calendar__body_disabled > .kbq-selected {
-        background-color: map.get($datepicker, state-selected-background);
-    }
+            background: map.get($selected, background);
+            color: map.get($selected, text);
 
-    .kbq-datepicker__content {
-        @include popup.popup-params($theme);
+            &:hover {
+                $selected-hover: map.get($cell, selected-hover);
 
-        color: map.get($foreground, text);
+                background: map.get($selected-hover, background);
+            }
+        }
+
+        &.kbq-disabled {
+            $disabled: map.get($cell, disabled);
+
+            background: map.get($disabled, background);
+        }
     }
 }
 
@@ -88,14 +78,10 @@ $kbq-datepicker-today-fade-amount: 0.2;
     $tokens: map.get($config, tokens);
 
     .kbq-calendar {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-font-text));
     }
 
     .kbq-calendar__table-header th {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-header));
-    }
-
-    .kbq-calendar__body-today {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-body-font-today));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-font-text));
     }
 }