@koobiq/components 20.4.2 → 21.0.0

package/core/option/option.scss

@@ -1,6 +1,7 @@
 @use '../styles/common/list';
 @use '../styles/common/vendor-prefixes';
 @use './option-theme' as *;
+@use '../styles/common/squircle' as *;
 
 .kbq-option {
     @include list.kbq-list-item-base();
@@ -11,7 +12,7 @@
         align-self: baseline;
     }
 
-    border-radius: var(--kbq-option-border-radius);
+    @include kbq-squircle(var(--kbq-option-border-radius));
 
     &:not(.kbq-disabled) {
         cursor: pointer;

package/core/pop-up/_pop-up.scss

@@ -89,40 +89,3 @@
         right: $arrow-padding;
     }
 }
-
-@mixin popup-arrow-borders-color($name, $value) {
-    &.#{$name}_placement-top,
-    &.#{$name}_placement-top-left,
-    &.#{$name}_placement-top-right {
-        & .kbq-tooltip__arrow {
-            border-bottom-color: $value;
-            border-right-color: $value;
-        }
-    }
-    &.#{$name}_placement-right,
-    &.#{$name}_placement-right-top,
-    &.#{$name}_placement-right-bottom {
-        & .kbq-tooltip__arrow {
-            border-left-color: $value;
-            border-bottom-color: $value;
-        }
-    }
-
-    &.#{$name}_placement-left,
-    &.#{$name}_placement-left-top,
-    &.#{$name}_placement-left-bottom {
-        & .kbq-tooltip__arrow {
-            border-right-color: $value;
-            border-top-color: $value;
-        }
-    }
-
-    &.#{$name}_placement-bottom,
-    &.#{$name}_placement-bottom-left,
-    &.#{$name}_placement-bottom-right {
-        & .kbq-tooltip__arrow {
-            border-top-color: $value;
-            border-left-color: $value;
-        }
-    }
-}

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -1,3 +1,4 @@
+@use '../../styles/common/squircle' as *;
 @use '../../styles/common/tokens' as *;
 
 @use './pseudo-checkbox-theme' as *;
@@ -14,11 +15,12 @@
     height: var(--kbq-checkbox-size-normal-width);
 
     border: {
-        radius: var(--kbq-checkbox-size-normal-border-radius);
         width: var(--kbq-checkbox-size-normal-border-width);
         style: solid;
     }
 
+    @include kbq-squircle(var(--kbq-checkbox-size-normal-border-radius));
+
     cursor: pointer;
 
     vertical-align: middle;
@@ -29,11 +31,6 @@
         display: none;
     }
 
-    &.kbq-pseudo-checkbox-checked,
-    &.kbq-pseudo-checkbox-indeterminate {
-        border-color: transparent;
-    }
-
     &.kbq-checked {
         .kbq-checkbox-checkmark {
             display: inline-block;
@@ -55,10 +52,8 @@
     width: var(--kbq-checkbox-size-big-width);
     height: var(--kbq-checkbox-size-big-width);
 
-    border: {
-        radius: var(--kbq-checkbox-size-big-border-radius);
-        width: var(--kbq-checkbox-size-big-border-width);
-    }
+    border-width: var(--kbq-checkbox-size-big-border-width);
+    @include kbq-squircle(var(--kbq-checkbox-size-big-border-radius));
 }
 
 @include kbq-pseudo-checkbox-theme();

package/core/styles/_core.scss

@@ -1,3 +1,4 @@
+@use 'common/animation' as *;
 @use 'common/overlay' as *;
 @use 'common/connected-overlay' as *;
 @use 'common/visually-hidden' as *;
@@ -7,4 +8,6 @@
     @include a11y-visually-hidden();
     @include overlay();
     @include kbq-connected-overlay-gap();
+    // Shared `.kbq-progress` utility; depended on by `button` and `toggle`.
+    @include kbq-progress();
 }

package/core/styles/_koobiq-theme.scss

@@ -3,7 +3,7 @@
 
 @use 'theming/scrollbar-theme' as *;
 
-@use '../../link/link-theme';
+@use '../../link/deprecated/link-theme';
 @use '../../markdown/markdown-theme' as *;
 @use '../../tabs/tabs-theme' as *;
 @use '../../tags/tag-theme' as *;
@@ -11,23 +11,22 @@
 @use '../forms/forms-theme' as *;
 @use '../highlight/highlight-theme' as *;
 
-// @TODO: Argument is unused. will be removed in next major release
-@mixin koobiq-theme($theme: null) {
+@mixin koobiq-theme() {
     @include kbq-core-theme();
 
     @include kbq-forms-theme();
     @include kbq-highlight-theme();
     @include kbq-highlight-background-theme();
-    // link is a directive, so styles for it should be applied globally
+    // The deprecated link directive has no stylesheet of its own
     @include link-theme.kbq-link-theme();
     @include kbq-markdown-theme();
+    // @deprecated Will be removed in 22.0.0, with `scrollbar/deprecated`.
     @include kbq-scrollbar-theme();
     @include kbq-tabs-theme();
     @include kbq-tag-theme();
 }
 
-// @TODO: Argument is unused. will be removed in next major release
-@mixin koobiq-typography($tokens: null, $config: null, $md-config: null) {
+@mixin koobiq-typography() {
     @include kbq-base-typography();
     @include kbq-markdown-base-typography();
     @include kbq-markdown-typography();

package/core/styles/common/_animation.scss

@@ -1,12 +1,4 @@
-@keyframes kbq-progress {
-    from {
-        background-position: 0 0;
-    }
-
-    to {
-        background-position: 64px 0;
-    }
-}
+@use './squircle' as *;
 
 // Renders the striped "loading" shimmer used by .kbq-progress. Extracted into a mixin so
 // components whose `::before`/`::after` pseudo-elements are already spoken for (e.g. kbq-dropdown-item's
@@ -14,7 +6,7 @@
 @mixin kbq-progress-overlay() {
     content: '';
     position: absolute;
-    border-radius: inherit;
+    @include kbq-squircle-inherit();
 
     top: 0;
     right: 0;
@@ -38,14 +30,50 @@
     animation: kbq-progress 1s linear infinite;
 }
 
-.kbq-progress {
-    position: relative;
+/**
+ * Global `.kbq-progress` loading indicator.
+ *
+ * Shared utility, not owned by any single component: `button` and `toggle` both rely on it.
+ * Emitted once from `kbq-core()` — do not scope it under a component selector.
+ *
+ * Also emits the `kbq-progress` keyframes driving `kbq-progress-overlay()`, so components applying
+ * that mixin on their own rely on the core styles being present.
+ */
+@mixin kbq-progress() {
+    @keyframes kbq-progress {
+        from {
+            background-position: 0 0;
+        }
+
+        to {
+            background-position: 64px 0;
+        }
+    }
+
+    .kbq-progress {
+        position: relative;
 
-    &:after {
-        @include kbq-progress-overlay();
+        &:after {
+            @include kbq-progress-overlay();
 
-        @media (prefers-reduced-motion: reduce) {
-            animation: none;
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+            }
         }
     }
 }
+
+/// Takes the motion off an element a component animates: while the component has animations disabled
+/// (`kbqAnimationsDisabled()`, bound as `.kbq-animations-disabled`) and while the user asks for reduced
+/// motion. A component that waits for the animation to end then finds none and goes on at once.
+@mixin kbq-animations-off() {
+    &.kbq-animations-disabled {
+        animation: none;
+        transition: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        transition: none;
+    }
+}

package/core/styles/common/_groups-mixins.scss

@@ -1,23 +1,25 @@
 @use 'sass:map';
+@use './squircle' as *;
 
-@mixin border-top-radius($radius) {
-    border-top-right-radius: $radius;
-    border-top-left-radius: $radius;
+/* Logical corner pairs: the leading/trailing edges follow `dir`. */
+@mixin border-inline-end-radius($radius) {
+    border-start-end-radius: $radius;
+    border-end-end-radius: $radius;
 }
 
-@mixin border-bottom-radius($radius) {
-    border-bottom-right-radius: $radius;
-    border-bottom-left-radius: $radius;
+@mixin border-inline-start-radius($radius) {
+    border-start-start-radius: $radius;
+    border-end-start-radius: $radius;
 }
 
-@mixin border-right-radius($radius) {
-    border-bottom-right-radius: $radius;
-    border-top-right-radius: $radius;
+@mixin border-block-start-radius($radius) {
+    border-start-start-radius: $radius;
+    border-start-end-radius: $radius;
 }
 
-@mixin border-left-radius($radius) {
-    border-bottom-left-radius: $radius;
-    border-top-left-radius: $radius;
+@mixin border-block-end-radius($radius) {
+    border-end-start-radius: $radius;
+    border-end-end-radius: $radius;
 }
 
 @mixin group($item-selector: '.kbq-group-item') {
@@ -32,15 +34,15 @@
         }
 
         #{$item-selector} + #{$item-selector} {
-            margin-left: calc(-1 * #{var(--kbq-size-border-width)});
+            margin-inline-start: calc(-1 * #{var(--kbq-size-border-width)});
         }
 
         & > #{$item-selector}:first-child:not(:last-child) {
-            @include border-right-radius(0);
+            @include border-inline-end-radius(0);
         }
 
         & > #{$item-selector}:last-child:not(:first-child) {
-            @include border-left-radius(0);
+            @include border-inline-start-radius(0);
         }
 
         & > #{$item-selector}:not(:first-child):not(:last-child) {
@@ -56,15 +58,15 @@
 
         > #{$item-selector} {
             &:first-child:not(:last-child) {
-                @include border-bottom-radius(0);
+                @include border-block-end-radius(0);
 
-                border-top-right-radius: var(--kbq-size-border-radius);
+                @include kbq-squircle(var(--kbq-size-border-radius), border-start-end-radius);
             }
 
             &:last-child:not(:first-child) {
-                @include border-top-radius(0);
+                @include border-block-start-radius(0);
 
-                border-bottom-left-radius: var(--kbq-size-border-radius);
+                @include kbq-squircle(var(--kbq-size-border-radius), border-end-start-radius);
             }
 
             &:not(:first-child):not(:last-child) {

package/core/styles/common/_groups.scss

@@ -1,45 +1,17 @@
 @use './groups-mixins';
 
-@mixin border-top-radius($radius) {
-    border-top: {
-        right-radius: $radius;
-        left-radius: $radius;
-    }
-}
-
-@mixin border-bottom-radius($radius) {
-    border-bottom: {
-        right-radius: $radius;
-        left-radius: $radius;
-    }
-}
-
-@mixin border-right-radius($radius) {
-    border: {
-        bottom-right-radius: $radius;
-        top-right-radius: $radius;
-    }
-}
-
-@mixin border-left-radius($radius) {
-    border: {
-        bottom-left-radius: $radius;
-        top-left-radius: $radius;
-    }
-}
-
 .kbq-group {
     @include groups-mixins.group();
 
     & > .kbq-group-item:first-child:not(:last-child) {
         .kbq-form-field__container {
-            @include border-right-radius(0);
+            @include groups-mixins.border-inline-end-radius(0);
         }
     }
 
     & > .kbq-group-item:last-child:not(:first-child) {
         .kbq-form-field__container {
-            @include border-left-radius(0);
+            @include groups-mixins.border-inline-start-radius(0);
         }
     }
 
@@ -56,13 +28,13 @@
     > .kbq-group-item {
         &:first-child:not(:last-child) {
             .kbq-form-field__container {
-                @include border-bottom-radius(0);
+                @include groups-mixins.border-block-end-radius(0);
             }
         }
 
         &:last-child:not(:first-child) {
             .kbq-form-field__container {
-                @include border-top-radius(0);
+                @include groups-mixins.border-block-start-radius(0);
             }
         }
 

package/core/styles/common/_index.scss

@@ -1,12 +1,10 @@
 @forward 'animation';
 @forward 'button';
-@forward 'clearfix';
 @forward 'groups';
 @forward 'input';
 @forward 'layout';
 @forward 'list';
 @forward 'overlay';
-@forward 'popup';
 @forward 'rtl';
 @forward 'size';
 @forward 'vendor-prefixes';

package/core/styles/common/_link.scss

@@ -0,0 +1,117 @@
+// The look of a link, shared by the `KbqLink` component, the links of markdown and the browse link of file-upload
+
+@mixin kbq-link-tokens() {
+    --kbq-link-size-state-focused-outline-offset: 0px;
+    --kbq-link-size-state-focused-outline-width: 2px;
+    --kbq-link-size-multiline-hit-area-gap: calc((1lh - 1em) / 2);
+    --kbq-link-size-compact-content-padding: var(--kbq-size-xxs);
+    --kbq-link-size-normal-content-padding: var(--kbq-size-xxs);
+    --kbq-link-size-big-content-padding: var(--kbq-size-xxs);
+    --kbq-link-underline-width: 1px;
+    /* THEME TOKENS */
+    --kbq-link-text: var(--kbq-foreground-theme);
+    --kbq-link-border-bottom: var(--kbq-line-theme-fade);
+    --kbq-link-state-visited-text: var(--kbq-foreground-visited);
+    --kbq-link-state-visited-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
+    --kbq-link-state-visited-hover-text: var(--kbq-states-foreground-visited-hover);
+    --kbq-link-state-visited-hover-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
+    --kbq-link-state-visited-active-text: var(--kbq-states-foreground-visited-active);
+    --kbq-link-state-visited-active-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
+    --kbq-link-state-hover-text: var(--kbq-states-foreground-theme-hover);
+    --kbq-link-state-hover-border-bottom: var(--kbq-line-theme-fade);
+    --kbq-link-state-active-text: var(--kbq-states-foreground-theme-active);
+    --kbq-link-state-active-border-bottom: var(--kbq-line-theme-fade);
+    --kbq-link-state-focused-outline: var(--kbq-states-line-focus-theme);
+    --kbq-link-state-disabled-text: var(--kbq-states-foreground-disabled);
+    --kbq-link-state-disabled-border-bottom: var(--kbq-states-line-disabled);
+}
+
+// Like a native link, it changes colors at once, without a transition
+@mixin kbq-link-root() {
+    cursor: pointer;
+
+    outline-offset: var(--kbq-link-size-state-focused-outline-offset);
+
+    &:focus {
+        outline: none;
+    }
+}
+
+// The underline itself: its color comes from the states
+@mixin kbq-link-text() {
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: var(--kbq-link-underline-width);
+    text-underline-offset: calc(var(--kbq-link-size-multiline-hit-area-gap) + var(--kbq-link-underline-width));
+}
+
+@mixin kbq-link-keyboard-focus-outline() {
+    outline-style: solid;
+    outline-width: var(--kbq-link-size-state-focused-outline-width);
+    outline-color: var(--kbq-link-state-focused-outline);
+}
+
+// `$underline` is the element that draws the underline, `&` for the link itself. Its color is set on that element
+// directly: Chromium does not pass a visited `text-decoration-color` on through `inherit`.
+@mixin kbq-link-states($underline) {
+    color: var(--kbq-link-text);
+
+    #{$underline} {
+        text-decoration-color: var(--kbq-link-border-bottom);
+    }
+
+    &:hover,
+    &.kbq-hovered {
+        color: var(--kbq-link-state-hover-text);
+
+        #{$underline} {
+            text-decoration-color: var(--kbq-link-state-hover-border-bottom);
+        }
+    }
+
+    &:active,
+    &.kbq-active {
+        color: var(--kbq-link-state-active-text);
+
+        #{$underline} {
+            text-decoration-color: var(--kbq-link-state-active-border-bottom);
+        }
+    }
+
+    &.kbq-disabled {
+        cursor: default;
+        pointer-events: none;
+        color: var(--kbq-link-state-disabled-text);
+
+        #{$underline} {
+            text-decoration-color: var(--kbq-link-state-disabled-border-bottom);
+        }
+    }
+}
+
+// Included under the selector that marks the link visited
+@mixin kbq-link-visited-states($underline) {
+    color: var(--kbq-link-state-visited-text);
+
+    #{$underline} {
+        text-decoration-color: var(--kbq-link-state-visited-border-bottom);
+    }
+
+    &:hover,
+    &.kbq-hovered {
+        color: var(--kbq-link-state-visited-hover-text);
+
+        #{$underline} {
+            text-decoration-color: var(--kbq-link-state-visited-hover-border-bottom);
+        }
+    }
+
+    &:active,
+    &.kbq-active {
+        color: var(--kbq-link-state-visited-active-text);
+
+        #{$underline} {
+            text-decoration-color: var(--kbq-link-state-visited-active-border-bottom);
+        }
+    }
+}

package/core/styles/common/_list.scss

@@ -1,6 +1,4 @@
-@use '../tokens';
 @use './tokens' as *;
-@use './vendor-prefixes';
 
 // This mixin will ensure that lines that overflow the container will hide the overflow and
 // truncate neatly with an ellipsis.
@@ -89,30 +87,6 @@
     }
 }
 
-@mixin kbq-list-subheading-base() {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    min-height: 32px;
-
-    border-left: var(--kbq-size-3xs) solid transparent;
-    border-right: var(--kbq-size-3xs) solid transparent;
-
-    padding-top: var(--kbq-size-m);
-    padding-left: kbq-difference-series-css-variables([size-m, size-3xs]);
-    padding-right: kbq-difference-series-css-variables([size-m, size-3xs]);
-    padding-bottom: var(--kbq-size-xxs);
-
-    .kbq-list-text {
-        @include kbq-list-text();
-    }
-}
-
 .kbq-truncate-line {
     @include kbq-truncate-line();
 }
-
-.kbq-no-select {
-    @include vendor-prefixes.user-select(none);
-}

package/core/styles/common/_overlay.scss

@@ -4,6 +4,8 @@
 $overlay-container-z-index: 1000 !default;
 $overlay-z-index: 1000 !default;
 $overlay-backdrop-z-index: 1000 !default;
+// Layer of `kbqOverlayLayer`: below the sticky top-bar and navbar (990), above the page content.
+$overlay-layer-z-index: 980 !default;
 
 // Background color for all of the backdrops
 $overlay-backdrop-color: rgba(0, 0, 0, 0.5) !default;
@@ -31,7 +33,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         position: fixed;
         z-index: $overlay-container-z-index;
 
-        // todo перепроверить
+        // Keeps the global element styles of a page off the overlay structure.
         box-sizing: border-box;
         margin: 0;
         padding: 0;
@@ -42,8 +44,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
             display: none;
         }
 
-        &.cdk-overlay-container_dropdown {
-            z-index: calc($overlay-container-z-index - 1);
+        &.kbq-overlay-layer {
+            z-index: var(--kbq-overlay-layer-z-index, #{$overlay-layer-z-index});
         }
     }
 
@@ -72,7 +74,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         max-width: 100%;
         max-height: 100%;
 
-        // todo перепроверить
+        // Keeps the global element styles of a page off the overlay structure.
         margin: 0;
         padding: 0;
 
@@ -82,7 +84,6 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     }
 
     .cdk-overlay-backdrop {
-        // TODO(jelbourn): reuse sidenav fullscreen mixin.
         position: absolute;
         top: 0;
         bottom: 0;
@@ -95,7 +96,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
         opacity: 0;
 
-        // todo перепроверить
+        // Keeps the global element styles of a page off the overlay structure.
         box-sizing: border-box;
         margin: 0;
         padding: 0;
@@ -103,9 +104,6 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         &.cdk-overlay-backdrop-showing {
             opacity: 1;
 
-            // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
-            // this file will be copied to the top-level `cdk` package when putting together the files
-            // for npm. Any relative import paths we use here will become invalid once the file is copied.
             .cdk-high-contrast-active & {
                 // In high contrast mode the rgba background will become solid
                 // so we need to fall back to making it opaque using `opacity`.
@@ -159,7 +157,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         min-width: 1px;
         min-height: 1px;
 
-        // todo перепроверить
+        // Keeps the global element styles of a page off the overlay structure.
         box-sizing: border-box;
         margin: 0;
         padding: 0;

package/core/styles/common/_rtl.scss

@@ -1,4 +1,3 @@
-@use 'sass:list';
 // mixin definition ; sets LTR and RTL within the same style call
 // @see https://css-tricks.com/almanac/properties/d/direction/
 
@@ -18,16 +17,3 @@
         #{$rtl-prop}: $value;
     }
 }
-
-// To reverse padding (top left bottom right) -> (top right bottom left)
-@function rtl-value($list) {
-    @if list.length($list) == 4 {
-        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2);
-    }
-
-    @if list.length($list) == 5 {
-        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2) list.nth($list, 5);
-    }
-
-    @return $list;
-}