@koobiq/components 17.0.0-rc.5 → 17.0.0-rc.7

package/core/styles/visual/_layout.scss

@@ -3,11 +3,9 @@
 
 @use '../../styles/common/rtl';
 
-@use '../tokens';
+@use '../common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 /*
 *  Responsive attributes
 *
@@ -456,19 +454,19 @@ $tokens: meta.module-variables(tokens) !default;
 
 @mixin layout-indents() {
     $sizes: (
-        '3xs': map.get($tokens, size-3xs),
-        'xxs': map.get($tokens, size-xxs),
-        'xs': map.get($tokens, size-xs),
-        's': map.get($tokens, size-s),
-        'm': map.get($tokens, size-m),
-        'l': map.get($tokens, size-l),
-        'xl': map.get($tokens, size-xl),
-        'xxl': map.get($tokens, size-xxl),
-        '3xl': map.get($tokens, size-3xl),
-        '4xl': map.get($tokens, size-4xl),
-        '5xl': map.get($tokens, size-5xl),
-        '6xl': map.get($tokens, size-6xl),
-        '7xl': map.get($tokens, size-7xl)
+        '3xs': kbq-css-variable(size-3xs),
+        'xxs': kbq-css-variable(size-xxs),
+        'xs': kbq-css-variable(size-xs),
+        's': kbq-css-variable(size-s),
+        'm': kbq-css-variable(size-m),
+        'l': kbq-css-variable(size-l),
+        'xl': kbq-css-variable(size-xl),
+        'xxl': kbq-css-variable(size-xxl),
+        '3xl': kbq-css-variable(size-3xl),
+        '4xl': kbq-css-variable(size-4xl),
+        '5xl': kbq-css-variable(size-5xl),
+        '6xl': kbq-css-variable(size-6xl),
+        '7xl': kbq-css-variable(size-7xl)
     );
 
     $indents: 'padding', 'margin';

package/datepicker/_datepicker-theme.scss

@@ -3,85 +3,70 @@
 
 @use '../core/styles/theming/theming';
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-$kbq-datepicker-selected-fade-amount: 0.6;
-$kbq-datepicker-today-fade-amount: 0.2;
-
 @mixin kbq-datepicker-theme($theme) {
     $datepicker: map.get(map.get($theme, components), datepicker);
 
-    $container: map.get($datepicker, container);
-    $header: map.get($datepicker, header);
-    $cell: map.get($datepicker, cell);
-
     .kbq-datepicker__content {
-        background: map.get($container, background);
-        box-shadow: map.get($container, box-shadow);
+        background: kbq-css-variable(datepicker-container-background, map.get($datepicker, container, background));
+        box-shadow: kbq-css-variable(datepicker-container-bo-shadow, map.get($datepicker, container, box-shadow));
     }
 
     .kbq-calendar__table-header {
-        color: map.get($header, text);
+        color: kbq-css-variable(datepicker-header-text, map.get($datepicker, header, text));
     }
 
     .kbq-calendar__table-header-divider::after {
-        background: map.get($header, divider);
+        background: kbq-css-variable(datepicker-header-divider, map.get($datepicker, header, divider));
     }
 
     .kbq-calendar__body-cell-content {
-        $default: map.get($cell, default);
-
-        background: map.get($default, background);
-        color: map.get($default, text);
+        background: kbq-css-variable(
+            datepicker-cell-default-background, map.get($datepicker, cell, default, background));
+        color: kbq-css-variable(datepicker-cell-default-text, map.get($datepicker, cell, default, text));
 
         &.kbq-calendar__body-today {
-            $today: map.get($cell, today);
-
-            background: map.get($today, background);
-            color: map.get($today, text);
+            background: kbq-css-variable(
+                datepicker-cell-today-background, map.get($datepicker, cell, today, background));
+            color: kbq-css-variable(datepicker-cell-today-text, map.get($datepicker, cell, today, text));
         }
 
         &:hover:not(.kbq-disabled) {
-            $hover: map.get($cell, hover);
-
-            background: map.get($hover, background);
+            background: kbq-css-variable(
+                datepicker-cell-hover-background, map.get($datepicker, cell, hover, background));
         }
 
         &:active:not(.kbq-disabled) {
-            $active: map.get($cell, active);
-
-            background: map.get($active, background);
+            background: kbq-css-variable(
+                datepicker-cell-active-background, map.get($datepicker, cell, active, background));
         }
 
         &.kbq-selected:not(.kbq-disabled) {
-            $selected: map.get($cell, selected);
-
-            background: map.get($selected, background);
-            color: map.get($selected, text);
+            background: kbq-css-variable(
+                datepicker-cell-selected-background, map.get($datepicker, cell, selected, background));
+            color: kbq-css-variable(datepicker-cell-selected-text, map.get($datepicker, cell, selected, text));
 
             &:hover {
-                $selected-hover: map.get($cell, selected-hover);
-
-                background: map.get($selected-hover, background);
+                background: kbq-css-variable(
+                    datepicker-cell-selected-hover-background, map.get($datepicker, cell, selected-hover, background));
             }
         }
 
         &.kbq-disabled {
-            $disabled: map.get($cell, disabled);
-
-            background: map.get($disabled, background);
+            background: kbq-css-variable(
+                datepicker-cell-disabled-background, map.get($datepicker, cell, disabled, background));
         }
     }
 }
 
 @mixin kbq-datepicker-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-calendar {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-font-text));
+        @include kbq-typography-css-variables(datepicker, text);
     }
 
     .kbq-calendar__table-header th {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-font-text));
+        @include kbq-typography-css-variables(datepicker, text);
     }
 }

package/datepicker/calendar-body.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -33,14 +34,8 @@ $tokens: meta.module-variables(tokens) !default;
     // Prevents text being off-center on Android.
     line-height: 1;
 
-    border-radius: var(
-        --kbq-datepicker-size-grid-cell-border-radius,
-        map.get($tokens, datepicker-size-grid-cell-border-radius)
-    );
+    border-radius: kbq-css-variable(datepicker-size-grid-cell-border-radius);
 
-    margin-bottom: var(
-        --kbq-datepicker-size-grid-content-gap-vertical,
-        map.get($tokens, datepicker-size-grid-content-gap-vertical)
-    );
+    margin-bottom: kbq-css-variable(datepicker-size-grid-content-gap-vertical);
 }
 

package/datepicker/calendar-header.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -11,17 +12,11 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: row;
     justify-content: space-between;
 
-    padding-right: var(
-        --kbq-datepicker-size-header-padding-horizontal, map.get($tokens, datepicker-size-header-padding-horizontal)
-    );
+    padding-right: kbq-css-variable(datepicker-size-header-padding-horizontal);
 
-    padding-left: var(
-        --kbq-datepicker-size-header-padding-horizontal, map.get($tokens, datepicker-size-header-padding-horizontal)
-    );
+    padding-left: kbq-css-variable(datepicker-size-header-padding-horizontal);
 
-    margin-bottom: var(
-        --kbq-datepicker-size-header-margin-bottom, map.get($tokens, datepicker-size-header-margin-bottom)
-    );
+    margin-bottom: kbq-css-variable(datepicker-size-header-margin-bottom);
 }
 
 .kbq-calendar-header__select {

package/datepicker/calendar.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -11,15 +12,9 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-calendar__content {
-    padding-right: var(
-        --kbq-datepicker-size-grid-padding-horizontal,
-        map.get($tokens, datepicker-size-grid-padding-horizontal)
-    );
+    padding-right: kbq-css-variable(datepicker-size-grid-padding-horizontal);
 
-    padding-left: var(
-        --kbq-datepicker-size-grid-padding-horizontal,
-        map.get($tokens, datepicker-size-grid-padding-horizontal)
-    );
+    padding-left: kbq-css-variable(datepicker-size-grid-padding-horizontal);
 
     outline: none;
 }
@@ -38,10 +33,7 @@ $tokens: meta.module-variables(tokens) !default;
         position: relative;
 
         box-sizing: border-box;
-        height: var(
-            --kbq-datepicker-size-grid-content-gap-vertical,
-            map.get($tokens, datepicker-size-grid-content-gap-vertical)
-        );;
+        height: kbq-css-variable(datepicker-size-grid-content-gap-vertical);;
 
         $horizontal-padding: map.get($tokens, datepicker-size-grid-padding-horizontal);
         // We use an absolutely positioned pseudo-element as the divider line for the table header so we
@@ -54,10 +46,7 @@ $tokens: meta.module-variables(tokens) !default;
             left: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
             right: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
 
-            height: var(
-                --kbq-datepicker-size-grid-divider-height,
-                map.get($tokens, datepicker-size-grid-divider-height)
-            );
+            height: kbq-css-variable(datepicker-size-grid-divider-height);
         }
     }
 }

package/datepicker/datepicker-content.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -18,23 +19,14 @@ $kbq-datepicker-non-touch-calendar-height: 270px;
 .kbq-datepicker__content {
     display: block;
 
-    border-radius: var(
-        --kbq-datepicker-size-container-border-radius,
-        map.get($tokens, datepicker-size-container-border-radius)
-    );
+    border-radius: kbq-css-variable(datepicker-size-container-border-radius);
 
     .kbq-calendar {
         width: $kbq-datepicker-non-touch-calendar-width;
         height: $kbq-datepicker-non-touch-calendar-height;
 
-        padding-top: var(
-            --kbq-datepicker-size-container-padding-vertical,
-            map.get($tokens, datepicker-size-container-padding-vertical)
-        );
+        padding-top: kbq-css-variable(datepicker-size-container-padding-vertical);
 
-        padding-bottom: var(
-            --kbq-datepicker-size-container-padding-vertical,
-            map.get($tokens, datepicker-size-container-padding-vertical)
-        );
+        padding-bottom: kbq-css-variable(datepicker-size-container-padding-vertical);
     }
 }

package/datepicker/datepicker-input.scss

@@ -1,10 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
 
 .kbq-form-field-type-datepicker {
     width: auto;

package/datepicker/datepicker-toggle.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -11,8 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-datepicker-toggle__button.kbq-button-icon {
-    width: var(--kbq-datepicker-toggle-size-width, map.get($tokens, datepicker-toggle-size-width));
-    height: var(--kbq-datepicker-toggle-size-height, map.get($tokens, datepicker-toggle-size-height));
+    width: kbq-css-variable(datepicker-toggle-size-width);
+    height: kbq-css-variable(datepicker-toggle-size-height);
     margin-left: 2px;
 }
 

package/divider/_divider-theme.scss

@@ -1,10 +1,12 @@
 @use 'sass:map';
 
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin kbq-divider-theme($theme) {
     $divider: map.get(map.get($theme, components), divider);
 
     .kbq-divider {
-        background: map.get($divider, color);
+        background: kbq-css-variable(divider-color, map.get($divider, color));
     }
 }

package/divider/divider.scss

@@ -1,10 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 
 .kbq-divider {
@@ -12,36 +9,23 @@ $tokens: meta.module-variables(tokens) !default;
     margin: 0;
 
     &.kbq-divider_horizontal {
-        height: var(--kbq-divider-size-horizontal-width, map.get($tokens, divider-size-horizontal-width));
+        height: kbq-css-variable(divider-size-horizontal-width);
 
         &.kbq-divider_paddings {
-            margin-top: var(
-                --kbq-divider-size-horizontal-margin-vertical,
-                map.get($tokens, divider-size-horizontal-margin-vertical)
-            );
-
-            margin-bottom: var(
-                --kbq-divider-size-horizontal-margin-vertical,
-                map.get($tokens, divider-size-horizontal-margin-vertical)
-            );
+            margin-top: kbq-css-variable(divider-size-horizontal-margin-vertical);
+
+            margin-bottom: kbq-css-variable(divider-size-horizontal-margin-vertical);
         }
     }
 
     &.kbq-divider_vertical {
-        width: var(--kbq-divider-size-vertical-width, map.get($tokens, divider-size-vertical-width));
+        width: kbq-css-variable(divider-size-vertical-width);
         height: 100%;
 
         &.kbq-divider_paddings {
-            margin-left: var(
-                --kbq-divider-size-vertical-margin-horizontal,
-                map.get($tokens, divider-size-vertical-margin-horizontal)
-            );
-
-            margin-right: var(
-                --kbq-divider-size-vertical-margin-horizontal,
-                map.get($tokens, divider-size-vertical-margin-horizontal)
-            );
+            margin-left: kbq-css-variable(divider-size-vertical-margin-horizontal);
+
+            margin-right: kbq-css-variable(divider-size-vertical-margin-horizontal);
         }
     }
-
 }

package/dl/_dl-theme.scss

@@ -2,30 +2,29 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin kbq-dl-theme($theme) {
     $dl: map.get(map.get($theme, components), dl);
 
     .kbq-dt {
-        color: map.get($dl, dt);
+        color: kbq-css-variable(dl-dt, map.get($dl, dt));
     }
 
     .kbq-dd {
-        color: map.get($dl, dd);
+        color: kbq-css-variable(dl-dd, map.get($dl, dd));
     }
 }
 
 @mixin kbq-dl-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-dl {
         & .kbq-dt {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, description-list-font-term));
+            @include kbq-typography-css-variables(description-list, term);
         }
 
         & .kbq-dd {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, description-list-font-description));
+            @include kbq-typography-css-variables(description-list, description);
         }
     }
 }

package/dl/dl.scss

@@ -1,21 +1,13 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-dl {
     display: grid;
-    column-gap: var(
-        --kbq-description-list-size-horizontal-content-gap-horizontal,
-        map.get($tokens, description-list-size-horizontal-content-gap-horizontal)
-    );
-    row-gap: var(
-        --kbq-description-list-size-horizontal-gap-vertical,
-        map.get($tokens, description-list-size-horizontal-gap-vertical)
-    );
+    column-gap: kbq-css-variable(description-list-size-horizontal-content-gap-horizontal);
+    row-gap: kbq-css-variable(description-list-size-horizontal-gap-vertical);
 
     grid-template-columns: repeat(4, 1fr);
 
@@ -42,10 +34,7 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-dl_vertical {
         grid-template-columns: repeat(1, 1fr);
 
-        row-gap: var(
-            --kbq-description-list-size-vertical-content-gap-vertical,
-            map.get($tokens, description-list-size-vertical-content-gap-vertical)
-        );
+        row-gap: kbq-css-variable(description-list-size-vertical-content-gap-vertical);
 
         .kbq-dt,
         .kbq-dd {
@@ -53,10 +42,7 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         .kbq-dd {
-            margin-bottom: var(
-                --kbq-description-list-size-vertical-gap-vertical,
-                map.get($tokens, description-list-size-vertical-gap-vertical)
-            );
+            margin-bottom: kbq-css-variable(description-list-size-vertical-gap-vertical);
         }
     }
 }

package/dropdown/_dropdown-theme.scss

@@ -3,50 +3,58 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-dropdown-item-state($state) {
-    background: map.get($state, container-background);
-    color: map.get($state, text);
+@mixin kbq-dropdown-item-state($component, $style-name) {
+    $state: map.get($component, $style-name);
+
+    background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
+    color: kbq-css-variable(list-#{$style-name}-text, map.get($state, text));
 
     .kbq-dropdown-item__caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(list-#{$style-name}-caption, map.get($state, caption));
     }
 }
 
 @mixin kbq-dropdown-theme($theme) {
     $dropdown: map.get(map.get($theme, components), dropdown);
-    $divider: map.get(map.get($theme, components), divider);
 
     .kbq-dropdown__panel {
-        box-shadow: map.get($dropdown, box-shadow);
-        background: map.get($dropdown, background);
+        box-shadow: kbq-css-variable(dropdown-box-shadow, map.get($dropdown, box-shadow));
+        background: kbq-css-variable(dropdown-background, map.get($dropdown, background));
     }
 
     .kbq-dropdown-item {
-        $dropdown-item: map.get(map.get($theme, components), list-item);
+        $list-item: map.get(map.get($theme, components), list-item);
 
-        @include kbq-dropdown-item-state(map.get($dropdown-item, default));
+        @include kbq-dropdown-item-state($list-item, default);
 
         &.kbq-dropdown-item_highlighted,
         &:hover:not(.kbq-disabled) {
-            @include kbq-dropdown-item-state(map.get($dropdown-item, hover));
+            @include kbq-dropdown-item-state($list-item, states-hover);
         }
 
         &.cdk-keyboard-focused {
-            border-color: map.get(map.get($dropdown-item, focused), focus-outline);
+            border-color: kbq-css-variable(list-focused-focus-outline, map.get($list-item, focused, focus-outline));
         }
 
         &.kbq-selected {
-            @include kbq-dropdown-item-state(map.get($dropdown-item, selected));
+            @include kbq-dropdown-item-state($list-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-dropdown-item-state(map.get($dropdown-item, selected-hover));
+                @include kbq-dropdown-item-state($list-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-dropdown-item-state(map.get($dropdown-item, disabled));
+            @include kbq-dropdown-item-state($list-item, states-disabled);
+        }
+    }
+
+    .kbq-dropdown__group-header {
+        &.kbq-dropdown__group-header_small {
+            color: kbq-css-variable(foreground-contrast-secondary, map.get($theme, foreground, contrast-secondary));
         }
     }
 
@@ -56,22 +64,20 @@
 }
 
 @mixin kbq-dropdown-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-dropdown-item,
     .kbq-dropdown__content {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
-    }
+        @include kbq-typography-css-variables(list, text);
 
-    .kbq-dropdown-item__caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
+        .kbq-dropdown-item__caption {
+            @include kbq-typography-css-variables(list, caption);
+        }
     }
 
     .kbq-dropdown__group-header {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-header));
+        @include kbq-typography-css-variables(list, header);
 
         &.kbq-dropdown__group-header_small {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-subheading));
+            @include kbq-typography-css-variables(list, subheading);
         }
     }
 }

package/dropdown/dropdown-item.scss

@@ -3,11 +3,9 @@
 
 @use '../core/styles/common';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-dropdown-item {
     @include common.user-select(none);
     @include common.kbq-list-item-base();
@@ -19,19 +17,13 @@ $tokens: meta.module-variables(tokens) !default;
     text-align: left;
 
     & > .kbq-icon:first-child {
-        $outline-width: map.get($tokens, list-size-container-focus-outline-width);
-        $padding-vertical: map.get($tokens, list-size-container-padding-vertical);
-
         align-self: flex-start;
 
-        margin-top: var(--kbq-list-size-container-padding-vertical, $padding-vertical);
+        margin-top: kbq-css-variable(list-size-container-padding-vertical);
     }
 
     & .kbq-dropdown-item__caption {
-        padding-top: var(
-            --kbq-list-size-container-content-gap-vertical,
-            map.get($tokens, list-size-container-content-gap-vertical)
-        );
+        padding-top: kbq-css-variable(list-size-container-content-gap-vertical);
     }
 }
 

package/dropdown/dropdown.scss

@@ -1,11 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left {
     & .kbq-icon_left {
         margin-right: 2px;
@@ -23,20 +21,14 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-dropdown__panel {
     margin-top: 2px;
 
-    min-width: var(--kbq-dropdown-size-container-width-min, map.get($tokens, dropdown-size-container-width-min));
-    max-width: var(--kbq-dropdown-size-container-width-max, map.get($tokens, dropdown-size-container-width-max));
+    min-width: kbq-css-variable(dropdown-size-container-width-min);
+    max-width: kbq-css-variable(dropdown-size-container-width-max);
 
-    border-radius: var(
-        --kbq-dropdown-size-container-border-radius, map.get($tokens, dropdown-size-container-border-radius)
-    );
+    border-radius: kbq-css-variable(dropdown-size-container-border-radius);
 
-    padding-top: var(
-        --kbq-dropdown-size-container-padding-vertical, map.get($tokens, dropdown-size-container-padding-vertical)
-    );
+    padding-top: kbq-css-variable(dropdown-size-container-padding-vertical);
 
-    padding-bottom: var(
-        --kbq-dropdown-size-container-padding-vertical, map.get($tokens, dropdown-size-container-padding-vertical)
-    );
+    padding-bottom: kbq-css-variable(dropdown-size-container-padding-vertical);
 
     // Prevent users from interacting with the panel while it's animating. Note that
     // people won't be able to click through it, because the overlay pane will catch the click.