@koobiq/components 20.4.2 → 21.0.0

package/core/styles/common/_select.scss

@@ -1,5 +1,6 @@
 @use '../common/vendor-prefixes';
 @use './tokens' as *;
+@use './squircle' as *;
 
 %kbq-select-base {
     box-sizing: border-box;
@@ -132,12 +133,20 @@
             // at the boundary.
             box-sizing: content-box;
 
+            // Only shown once something is actually hidden. The measurement pass reveals it on its
+            // detached clone with the same class, never with an inline style.
+            display: none;
+
             flex: 0 0 var(--kbq-form-field-size-addon-width);
             align-self: center;
             padding-left: var(--kbq-size-xxs);
             padding-right: var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));
 
             text-align: right;
+
+            &.kbq-select__match-hidden-text_visible {
+                display: block;
+            }
         }
     }
 
@@ -152,17 +161,6 @@
         justify-content: center;
 
         min-width: var(--kbq-form-field-size-addon-width);
-
-        // When used in a box or standard appearance form-field the arrow should be shifted up 50%.
-        .kbq-form-field-appearance-fill &,
-        .kbq-form-field-appearance-standard & {
-            transform: translateY(-50%);
-        }
-
-        // When used in a outline form-field the arrow should be shifted up 25%.
-        .kbq-form-field-appearance-outline & {
-            transform: translateY(-25%);
-        }
     }
 
     &.kbq-disabled {
@@ -184,7 +182,7 @@
 
     overflow: hidden;
 
-    border-radius: var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius));
+    @include kbq-squircle(var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)));
 
     // Override option to scale based on font-size of the trigger.
     .kbq-option {
@@ -283,7 +281,7 @@
     // Transparent border, as on an option, so the row keeps the same content inset — and so the focus
     // ring below can recolour it without shifting anything.
     border: var(--kbq-size-3xs) solid transparent;
-    border-radius: var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs));
+    @include kbq-squircle(var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs)));
 
     padding: 0 kbq-difference-series-css-variables([size-m, size-3xs]);
 
@@ -322,8 +320,28 @@
     }
 }
 
-// A mixin of its own: the row's structure is only extended under `.kbq-select__panel`, and emitting its
-// colours anywhere else would paint a half-styled control.
+// Theme rules shared by every select-shaped panel (`kbq-select`, `kbq-tree-select`). They style global,
+// unencapsulated class names, so having each package restate them means the two can drift apart while
+// still rendering the same markup.
+@mixin kbq-select-shared-theme() {
+    .kbq-select__placeholder {
+        text-overflow: ellipsis;
+
+        color: var(--kbq-form-field-default-placeholder);
+    }
+
+    .kbq-select__search-container {
+        border-bottom-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
+    }
+
+    .kbq-select__no-options-message {
+        color: var(--kbq-foreground-contrast-secondary);
+    }
+}
+
+// Kept apart from `kbq-select-shared-theme()`, which both the select and the tree-select include: the
+// row's structure is only extended under `.kbq-select__panel`, and emitting its colours anywhere else
+// would paint a half-styled control.
 @mixin kbq-select-footer-item-theme() {
     .kbq-select__footer-item {
         color: var(--kbq-foreground-contrast);

package/core/styles/common/_squircle.scss

@@ -0,0 +1,63 @@
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+
+// Squircle corners (`corner-shape: squircle`). A squircle looks smaller than a circular arc of the same radius, so
+// the radius is scaled: ×1.85 up to 8px, ×2 from 12px, linear in between. The three lines of `clamp()` avoid
+// dividing a length by a length, which some browsers that support `corner-shape` cannot do. Browsers without
+// `corner-shape` keep the radius as given.
+
+@function _kbq-squircle-corner($radius) {
+    @if meta.type-of($radius) == number {
+        @if math.is-unitless($radius) and $radius == 0 {
+            @return $radius;
+        }
+
+        @if math.unit($radius) == '%' {
+            @error 'kbq-squircle: a percentage radius (#{$radius}) would turn a circle into a squircle.';
+        }
+    } @else if meta.type-of($radius) == string and string.index($radius, 'var(') != 1 {
+        @error 'kbq-squircle: `#{$radius}` is not a length; use kbq-squircle-inherit() for `inherit`.';
+    }
+
+    @return clamp($radius * 1.85, $radius * 2.3 - 3.6px, $radius * 2);
+}
+
+// Scales every value of a `border-radius` list (1–4 lengths, no `/`) for a squircle corner.
+@function kbq-squircle-radius($radius) {
+    $result: ();
+
+    @each $value in $radius {
+        $result: list.append($result, _kbq-squircle-corner($value), space);
+    }
+
+    @return $result;
+}
+
+// Sets `$radius` on `$properties` and, where `corner-shape` is supported, a squircle with the scaled radius.
+// Pass corner longhands as `$properties` to round only some corners.
+@mixin kbq-squircle($radius, $properties: border-radius) {
+    @each $property in $properties {
+        #{$property}: $radius;
+    }
+
+    @supports (corner-shape: squircle) {
+        & {
+            corner-shape: squircle;
+
+            @each $property in $properties {
+                #{$property}: kbq-squircle-radius($radius);
+            }
+        }
+    }
+}
+
+// Takes both the radius and the corner shape from the parent: `corner-shape` is not inherited on its own.
+@mixin kbq-squircle-inherit($properties: border-radius) {
+    @each $property in $properties {
+        #{$property}: inherit;
+    }
+
+    corner-shape: inherit;
+}

package/core/styles/common/_tokens.scss

@@ -4,17 +4,6 @@
     #{$font-property}: var(--kbq-#{$component}-#{$font}#{$component-property}-#{$font-property});
 }
 
-@mixin kbq-typography-css-variables($component, $property) {
-    @include kbq-css-font-variable($component, $property, font-size, font-);
-    @include kbq-css-font-variable($component, $property, font-style, font-);
-    @include kbq-css-font-variable($component, $property, font-weight, font-);
-    @include kbq-css-font-variable($component, $property, line-height, font-);
-    @include kbq-css-font-variable($component, $property, font-family, font-);
-    @include kbq-css-font-variable($component, $property, text-transform, font-);
-    @include kbq-css-font-variable($component, $property, font-feature-settings, font-);
-    @include kbq-css-font-variable($component, $property, letter-spacing, font-);
-}
-
 @mixin kbq-typography-level-to-styles-css-variables($component, $property) {
     @include kbq-css-font-variable($component, $property, font-size, '');
     @include kbq-css-font-variable($component, $property, font-style, '');

package/core/styles/common/_vendor-prefixes.scss

@@ -1,24 +1,4 @@
 @mixin user-select($value) {
     -webkit-user-select: $value;
-    -moz-user-select: $value;
-    -ms-user-select: $value;
     user-select: $value;
 }
-
-@mixin input-placeholder {
-    &::placeholder {
-        @content;
-    }
-
-    &::-moz-placeholder {
-        @content;
-    }
-
-    &::-webkit-input-placeholder {
-        @content;
-    }
-
-    &:-ms-input-placeholder {
-        @content;
-    }
-}

package/core/styles/functions/_timing.scss

@@ -2,29 +2,7 @@
  * CSS cubic-bezier timing functions
  * http://bourbon.io/docs/#timing-functions
  */
-$ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-$ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-$ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-$ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
-$ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-$ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
-
-$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
-$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
-$ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
-$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
 $ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
-$ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
 $ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
-$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
-$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
-$ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-$ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
 $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-$ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);

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

@@ -1,7 +1,12 @@
+// @deprecated The `.kbq-scrollbar` selector and related mixins are deprecated.
+// Will be removed in 22.0.0.
+// Use `[kbqNativeScrollbar]` to customize the browser-rendered scrollbar, or `<kbq-scrollbar>`
+// when a custom track and thumb, visibility modes, or programmatic scrolling are required.
+// No `@warn`: `koobiq-theme()` includes these styles for every consumer, whether or not the class is used.
+
 /* stylelint-disable selector-pseudo-class-no-unknown */
 
 @use '../common/tokens';
-@use './scrollbar-tokens';
 
 @mixin _scrollbar-state($state, $color) {
     &.kbq-#{$state} {

package/core/styles/theming/_theming.scss

@@ -1,50 +1,7 @@
 @use 'sass:map';
-@use 'sass:meta';
-
-// @deprecated Unused internally. Will be removed in the next major version.
-@function kbq-contrast($palette, $hue) {
-    @return map.get(map.get($palette, contrast), $hue);
-}
-
-// @deprecated @TODO: unused. Will be removed in the next major version.
-@function kbq-palette($base-palette, $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)
-            )
-        );
-    }
-
-    @return $result;
-}
-
-// @deprecated @TODO: unused. Will be removed in the next major version.
-@function kbq-color($palette, $hue: default, $opacity: null) {
-    // If hueKey is a number between zero and one, then it actually contains an
-    // opacity value, so recall this function with the default hue and that given opacity.
-    @if meta.type-of($hue) == number and $hue >= 0 and $hue <= 1 {
-        @return kbq-color($palette, default, $hue);
-    }
-
-    $color: map.get($palette, $hue);
-    $opacity: if($opacity == null, opacity($color), $opacity);
-
-    @return rgba($color, $opacity);
-}
 
 // Mixin that renders all of the core styles that depend on the theme.
-// @TODO: Argument is unused. will be removed in next major release
-@mixin kbq-core-theme($theme: null) {
+@mixin kbq-core-theme() {
     .kbq-app-background {
         background: var(--kbq-background-bg);
         color: var(--kbq-foreground-contrast);
@@ -70,7 +27,7 @@
     }
 }
 
-// @deprecated @TODO: unused. Will be removed in next major release
+// The helpers below build the maps of `kbq-light-theme()` and `kbq-dark-theme()` and go with them.
 @function _theme_foreground($tokens, $scheme) {
     @return (
         white: map.get($tokens, '#{$scheme}-foreground-white'),
@@ -96,7 +53,6 @@
     );
 }
 
-// @deprecated @TODO: unused. Will be removed in next major release
 @function _theme_background($tokens, $scheme) {
     @return (
         bg: map.get($tokens, '#{$scheme}-background-bg'),
@@ -121,7 +77,6 @@
     );
 }
 
-// @deprecated @TODO: unused. Will be removed in next major release
 @function _theme_icon($tokens, $scheme) {
     @return (
         on-contrast: map.get($tokens, '#{$scheme}-icon-on-contrast'),
@@ -137,7 +92,6 @@
     );
 }
 
-// @deprecated @TODO: unused. Will be removed in next major release
 @function _theme_line($tokens, $scheme) {
     @return (
         theme: map.get($tokens, '#{$scheme}-line-theme'),
@@ -155,7 +109,6 @@
     );
 }
 
-// @deprecated @TODO: unused. Will be removed in next major release
 @function _theme_states-background($tokens, $scheme) {
     @return (
         disabled: map.get($tokens, '#{$scheme}-states-background-disabled'),
@@ -176,7 +129,6 @@
     );
 }
 
-// @deprecated @TODO: unused. Will be removed in next major release
 @function _theme_states-foreground($tokens, $scheme) {
     @return (
         disabled: map.get($tokens, '#{$scheme}-states-foreground-disabled'),
@@ -187,7 +139,6 @@
     );
 }
 
-// @deprecated @TODO: unused. Will be removed in next major release
 @function _theme_states-icon($tokens, $scheme) {
     @return (
         theme-hover: map.get($tokens, '#{$scheme}-states-icon-theme-hover'),
@@ -208,7 +159,6 @@
     );
 }
 
-// @deprecated @TODO: unused. Will be removed in next major release
 @function _theme_states-line($tokens, $scheme) {
     @return (
         focus: map.get($tokens, '#{$scheme}-states-line-focus'),
@@ -218,7 +168,6 @@
     );
 }
 
-// @deprecated @TODO: unused. Will be removed in next major release
 @function _theme_states($tokens, $scheme) {
     @return (
         background: _theme_states-background($tokens, $scheme),
@@ -230,25 +179,20 @@
     );
 }
 
-// @deprecated @TODO: unused. Will be removed in next major release
-@function kbq-palette($base-palette, $default) {
+@function _theme_palette($tokens, $scheme, $name) {
     @return map.merge(
-        $base-palette,
+        map.get($tokens, '#{$scheme}-#{$name}-palette'),
         (
-            default: $default
+            default: map.get($tokens, '#{$scheme}-#{$name}-default')
         )
     );
 }
 
-// @deprecated @TODO: unused. Will be removed in next major release
-@function _theme_palette($tokens, $scheme, $name) {
-    @return kbq-palette(
-        map.get($tokens, '#{$scheme}-#{$name}-palette'),
-        map.get($tokens, '#{$scheme}-#{$name}-default')
-    );
-}
-
+// @deprecated Nothing in the library reads the theme map since `koobiq-theme()` takes no argument. Will be
+// removed in 22.0.0: use the CSS variables of the theme.
 @function kbq-light-theme($tokens) {
+    @warn '`kbq-light-theme()` is deprecated and will be removed in 22.0.0: nothing in the library reads the theme map. Use the CSS variables of the theme instead, for example `var(--kbq-foreground-contrast)`.';
+
     $scheme: 'light';
 
     @return (
@@ -271,7 +215,11 @@
     );
 }
 
+// @deprecated Nothing in the library reads the theme map since `koobiq-theme()` takes no argument. Will be
+// removed in 22.0.0: use the CSS variables of the theme.
 @function kbq-dark-theme($tokens) {
+    @warn '`kbq-dark-theme()` is deprecated and will be removed in 22.0.0: nothing in the library reads the theme map. Use the CSS variables of the theme instead, for example `var(--kbq-foreground-contrast)`.';
+
     $scheme: 'dark';
 
     @return (

package/core/styles/typography/_index.scss

@@ -1,2 +1 @@
 @forward 'typography';
-@forward 'typography-utils';

package/core/styles/typography/_typography.scss

@@ -1,131 +1,5 @@
-@use 'sass:map';
-@use 'typography-utils' as *;
 @use '../common/tokens' as *;
 
-// TODO: REMOVE
-@function kbq-typography-config($tokens) {
-    $font-family: map.get($tokens, font-family-base);
-    $typography: map.get(map.get($tokens, koobiq), typography);
-
-    $config: (
-        headline: map.get($typography, headline),
-        subheading: map.get($typography, subheading),
-        title: map.get($typography, 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-big-medium: map.get($typography, text-big-medium),
-        text-normal: map.get($typography, text-normal),
-        text-normal-strong: map.get($typography, text-normal-strong),
-        text-normal-medium: map.get($typography, text-normal-medium),
-        text-compact: map.get($typography, text-compact),
-        text-compact-strong: map.get($typography, text-compact-strong),
-        text-compact-medium: map.get($typography, text-compact-medium),
-        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 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
-        )
-    );
-}
-
-@function kbq-markdown-typography-config($tokens) {
-    $font-family: map.get($tokens, font-family-base);
-    $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)
-    );
-
-    @each $key, $level in $config {
-        @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
-        )
-    );
-}
-
 @mixin kbq-base-typography() {
     .kbq-headline {
         @include kbq-typography-level-to-styles-css-variables(typography, headline);
@@ -307,44 +181,27 @@
 @mixin kbq-markdown-base-typography() {
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
-        // DEPRECATED: .md-h# class is deprecated, use .kbq-md-h# instead
-        .md-h#{$i},
         .kbq-md-h#{$i} {
             @include kbq-typography-level-to-styles-css-variables(md-typography, md-h#{$i});
         }
     }
 
-    // DEPRECATED: .md-body class is deprecated, use .kbq-md-body instead
-    /* stylelint-disable-next-line selector-class-pattern */
-    .md-body,
     .kbq-md-body {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
     }
 
-    // DEPRECATED: .md-body-mono class is deprecated, use .kbq-md-body-mono instead
-    /* stylelint-disable-next-line selector-class-pattern */
-    .md-body-mono,
     .kbq-md-body-mono {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body-mono);
     }
 
-    // DEPRECATED: .md-caption class is deprecated, use .kbq-md-caption instead
-    /* stylelint-disable-next-line selector-class-pattern */
-    .md-caption,
     .kbq-md-caption {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-caption);
     }
 
-    // DEPRECATED: .md-table-cell class is deprecated, use .kbq-md-table-cell instead
-    /* stylelint-disable-next-line selector-class-pattern */
-    .md-table-cell,
     .kbq-md-table-cell {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-cell);
     }
 
-    // DEPRECATED: .md-table-header class is deprecated, use .kbq-md-table-header instead
-    /* stylelint-disable-next-line selector-class-pattern */
-    .md-table-header,
     .kbq-md-table-header {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-header);
     }

package/core/styles/visual/_body.scss

@@ -8,13 +8,8 @@
     }
 
     html {
-        // Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+        // Prevent adjustments of font size after orientation changes in iOS.
         -webkit-text-size-adjust: 100%;
-        -ms-text-size-adjust: 100%;
-
-        // Setting @viewport causes scrollbars to overlap content in Edge, so
-        // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
-        -ms-overflow-style: scrollbar;
 
         -moz-osx-font-smoothing: grayscale;
 

package/core/styles/visual/_layout.scss

@@ -12,14 +12,6 @@
 *  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
 *  5) http://godban.com.ua/projects/flexgrid
 */
-@-moz-document url-prefix() {
-    .layout-fill {
-        margin: 0;
-        width: 100%;
-        min-height: 100%;
-        height: 100%;
-    }
-}
 
 @mixin flex-order-for-name($sizes: null) {
     @if not $sizes {
@@ -138,10 +130,6 @@
     .layout#{$name},
     .layout#{$name}-column,
     .layout#{$name}-row {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -moz-box;
-        display: -ms-flexbox;
         display: flex;
 
         min-width: 0;

package/datepicker/calendar-body.scss

@@ -1,3 +1,5 @@
+@use '../core/styles/common/squircle' as *;
+
 .kbq-calendar__body-cell {
     position: relative;
     height: 0;
@@ -24,7 +26,7 @@
     // Prevents text being off-center on Android.
     line-height: 1;
 
-    border-radius: var(--kbq-datepicker-size-grid-cell-border-radius);
+    @include kbq-squircle(var(--kbq-datepicker-size-grid-cell-border-radius));
 
     margin-bottom: var(--kbq-datepicker-size-grid-content-gap-vertical);
 }

package/datepicker/calendar-header.scss

@@ -1,4 +1,3 @@
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
 .kbq-calendar-header {