@progress/kendo-theme-fluent 6.5.0-dev.1 → 6.5.0-dev.2

package/scss/window/_variables.scss

@@ -6,7 +6,7 @@
 $kendo-window-border-width: map.get( $kendo-spacing, 1 ) 0 0 !default;
 /// The border radius of the Window.
 /// @group window
-$kendo-window-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-window-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// The font family of the Window.
 /// @group window
 $kendo-window-font-family: var( --kendo-font-family, inherit ) !default;
@@ -78,7 +78,7 @@ $kendo-window-bg: var( --kendo-component-bg, initial ) !default;
 $kendo-window-text: var( --kendo-component-text, initial ) !default;
 /// The border color of the Window.
 /// @group window
-$kendo-window-border: get-theme-color-var( primary-100 ) !default;
+$kendo-window-border: k-get-theme-color-var( primary-100 ) !default;
 /// The box shadow of the Window.
 /// @group window
 $kendo-window-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
@@ -91,10 +91,10 @@ $kendo-window-focus-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
 $kendo-window-titlebar-bg: var( --kendo-component-bg, initial ) !default; // $kendo-component-header-bg
 /// The text color of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-text: get-theme-color-var( primary-100 ) !default; // $kendo-component-header-text
+$kendo-window-titlebar-text: k-get-theme-color-var( primary-100 ) !default; // $kendo-component-header-text
 /// The border color of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-border: get-theme-color-var( primary-100 ) !default;
+$kendo-window-titlebar-border: k-get-theme-color-var( primary-100 ) !default;
 
 /// The map of the width of the different Window sizes.
 /// @group window
@@ -131,7 +131,7 @@ $kendo-window-theme-colors: () !default;
     @each $brand-color, $palette in $kendo-window-brand-colors {
         $kendo-window-theme-colors: map.deep-merge(
             $kendo-window-theme-colors,
-            generate-theme-variation( $brand-color, $palette, $ui-states )
+            k-generate-theme-variation( $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -139,13 +139,13 @@ $kendo-window-theme-colors: () !default;
 @each $ui-states in $_tc-window-dark-matrix {
     $kendo-window-theme-colors: map.deep-merge(
         $kendo-window-theme-colors,
-        generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, neutral, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-window-light-matrix {
     $kendo-window-theme-colors: map.deep-merge(
         $kendo-window-theme-colors,
-        generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, neutral, $ui-states )
     );
 }

package/scss/wizard/_variables.scss

@@ -50,4 +50,4 @@ $kendo-wizard-buttons-margin-y: map.get( $kendo-spacing, 6 ) !default;
 
 /// Outline of the focused wizard step.
 /// @group wizard
-$kendo-wizard-step-focus-border: get-theme-color-var( neutral-130 ) !default;
+$kendo-wizard-step-focus-border: k-get-theme-color-var( neutral-130 ) !default;

package/scss/core/_layout.scss

@@ -1,13 +0,0 @@
-@use "./mixins" as *;
-@use "./_variables.scss" as *;
-
-.k-body {
-    @include typography(
-        var( --kendo-font-size, inherit ),
-        var( --kendo-font-family, inherit ),
-        var( --kendo-line-height, normal ),
-        var( --kendo-font-weight, normal ),
-        var( --kendo-letter-spacing, normal ),
-    );
-    margin: 0;
-}

package/scss/core/_theme.scss

@@ -1,9 +0,0 @@
-@use "./mixins" as *;
-@use "./color-system" as *;
-
-.k-body {
-    @include fill(
-        var( --kendo-body-text, initial ),
-        var( --kendo-body-bg, initial )
-    );
-}

package/scss/core/color-system/_variables.scss

@@ -1,172 +0,0 @@
-@use "sass:map";
-@use "./utils" as *;
-@use "./palettes" as *;
-
-// Constants
-$kendo-color-white: #ffffff;
-$kendo-color-black: #000000;
-$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 );
-$kendo-gradient-transparent-to-black: rgba( black, 0), black;
-$kendo-gradient-transparent-to-white: rgba( white, 0), white;
-$kendo-gradient-black-to-transparent: black, rgba( black, 0);
-$kendo-gradient-white-to-transparent: white, rgba( white, 0);
-$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000;
-
-// Root styles
-$kendo-body-bg: $kendo-color-white !default;
-$kendo-body-text: get-theme-color-var( neutral-160 ) !default;
-
-// Component styles
-$kendo-component-bg: $kendo-body-bg !default;
-$kendo-component-text: $kendo-body-text !default;
-$kendo-component-border: get-theme-color-var( neutral-30 ) !default;
-
-// States styles
-$kendo-hover-bg: get-theme-color-var( neutral-20 ) !default;
-$kendo-hover-text: get-theme-color-var( neutral-190 ) !default;
-$kendo-hover-border: get-theme-color-var( neutral-20 ) !default;
-
-$kendo-selected-bg: get-theme-color-var( neutral-30 ) !default;
-$kendo-selected-text: get-theme-color-var( neutral-160 ) !default;
-$kendo-selected-border: get-theme-color-var( neutral-130 ) !default;
-
-$kendo-selected-hover-bg: get-theme-color-var( neutral-40 ) !default;
-$kendo-selected-hover-text: get-theme-color-var( neutral-190 ) !default;
-$kendo-selected-hover-border: get-theme-color-var( neutral-130 ) !default;
-
-$kendo-focus-outline: get-theme-color-var( neutral-130 ) !default;
-
-$kendo-subtle-text: get-theme-color-var( neutral-130 ) !default;
-
-// Shadows
-
-/// Shadow for cards and grid item thumbnails.
-/// Equivalent to fluent depth 4.
-$kendo-box-shadow-depth-1: 0 1.6px 3.6px rgba( $kendo-color-black, 0.132 ), 0 0.3px 0.9px rgba( $kendo-color-black, 0.108 ) !default;
-/// Shadow for command bars and dropdowns.
-/// Equivalent to fluent depth 8.
-$kendo-box-shadow-depth-2: 0 3.2px 7.2px rgba( $kendo-color-black, 0.132 ), 0 0.6px 1.8px rgba( $kendo-color-black, 0.108 ) !default;
-/// Shadow for teaching callouts and hover cards / tooltips.
-/// Equivalent to fluent depth 16.
-$kendo-box-shadow-depth-3: 0 6.4px 14.4px rgba( $kendo-color-black, 0.132 ), 0 1.2px 3.6px rgba( $kendo-color-black, 0.108 ) !default;
-/// Shadow for panels and pop up dialogs.
-/// Equivalent to fluent depth 64.
-$kendo-box-shadow-depth-4: 0 25.6px 57.6px rgba( $kendo-color-black, 0.22 ), 0 4.8px 14.4px rgba( $kendo-color-black, 0.18 ) !default;
-
-// Link
-$kendo-link-text: get-theme-color-var( primary-100 ) !default;
-$kendo-link-hover-text: get-theme-color-var( primary-120 ) !default;
-
-// Validator
-$kendo-invalid-bg: initial !default;
-$kendo-invalid-text: get-theme-color-var( error-190 ) !default;
-$kendo-invalid-border: get-theme-color-var( error-190 ) !default;
-$kendo-invalid-shadow: none !default;
-
-// Disabled Styling
-$kendo-disabled-bg: get-theme-color-var( neutral-20 ) !default;
-$kendo-disabled-text: get-theme-color-var( neutral-90 ) !default;
-$kendo-disabled-border: transparent !default;
-
-// Loading
-$kendo-loading-bg: $kendo-component-bg !default;
-$kendo-loading-text: currentColor !default;
-
-
-// Theme colors
-$kendo-theme-colors: (
-    primary: (
-        text: get-theme-color-var( primary-130 ),
-        bg: get-theme-color-var( primary-20 ),
-        border: get-theme-color-var( primary-20 )
-    ),
-    info: (
-        text: get-theme-color-var( info-190 ),
-        bg: get-theme-color-var( info-20 ),
-        border: get-theme-color-var( info-20 )
-    ),
-    success: (
-        text: get-theme-color-var( success-190 ),
-        bg: get-theme-color-var( success-20 ),
-        border: get-theme-color-var( success-20 )
-    ),
-    warning: (
-        text: get-theme-color-var( neutral-160 ),
-        bg: get-theme-color-var( warning-20 ),
-        border: get-theme-color-var( warning-20 )
-    ),
-    error: (
-        text: get-theme-color-var( error-190 ),
-        bg: get-theme-color-var( error-20 ),
-        border: get-theme-color-var( error-20 )
-    )
-) !default;
-
-
-@mixin color-system-styles() {
-    :root {
-        @include css-vars( $kendo-fluent-palettes );
-        @include css-vars( $kendo-theme-colors );
-
-        --kendo-body-bg: #{$kendo-body-bg};
-        --kendo-body-text: #{$kendo-body-text};
-
-        --kendo-component-bg: #{$kendo-component-bg};
-        --kendo-component-text: #{$kendo-component-text};
-        --kendo-component-border: #{$kendo-component-border};
-
-        --kendo-box-shadow-depth-1: #{$kendo-box-shadow-depth-1};
-        --kendo-box-shadow-depth-2: #{$kendo-box-shadow-depth-2};
-        --kendo-box-shadow-depth-3: #{$kendo-box-shadow-depth-3};
-        --kendo-box-shadow-depth-4: #{$kendo-box-shadow-depth-4};
-
-        --kendo-link-text: #{$kendo-link-text};
-        --kendo-link-hover-text: #{$kendo-link-hover-text};
-
-        --kendo-disabled-bg: #{$kendo-disabled-bg};
-        --kendo-disabled-text: #{$kendo-disabled-text};
-        --kendo-disabled-border: #{$kendo-disabled-border};
-
-        --kendo-hover-bg: #{$kendo-hover-bg};
-        --kendo-hover-text: #{$kendo-hover-text};
-        --kendo-hover-border: #{$kendo-hover-border};
-
-        --kendo-selected-bg: #{$kendo-selected-bg};
-        --kendo-selected-text: #{$kendo-selected-text};
-        --kendo-selected-border: #{$kendo-selected-border};
-
-        --kendo-selected-hover-bg: #{$kendo-selected-hover-bg};
-        --kendo-selected-hover-text: #{$kendo-selected-hover-text};
-        --kendo-selected-hover-border: #{$kendo-selected-hover-border};
-
-        --kendo-focus-outline: #{$kendo-focus-outline};
-
-        --kendo-subtle-text: #{$kendo-subtle-text};
-
-        --kendo-invalid-bg: #{$kendo-invalid-bg};
-        --kendo-invalid-text: #{$kendo-invalid-text};
-        --kendo-invalid-border: #{$kendo-invalid-border};
-        --kendo-invalid-shadow: #{$kendo-invalid-shadow};
-    }
-
-    // Text colors
-    @each $theme-color, $color-props in $kendo-theme-colors {
-        $_color: map.get( $color-props, text );
-
-        .k-text-#{$theme-color},
-        .k-color-#{$theme-color} {
-            color: var( --kendo-text-#{$theme-color}, #{$_color} );
-        }
-        .\!k-text-#{$theme-color},
-        .\!k-color-#{$theme-color} {
-            color: var( --kendo-text-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
-        }
-
-        .k-bg-#{$theme-color} {
-            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} );
-        }
-        .\!k-bg-#{$theme-color} {
-            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
-        }
-    };
-}

package/scss/core/functions/_index.scss

@@ -1,3 +0,0 @@
-
-// @forward "./misc";
-@forward "./_strings.scss";

package/scss/core/functions/_strings.scss

@@ -1,37 +0,0 @@
-@use "sass:string";
-
-$svg-escaped-characters: (
-    ("%", "%25"),
-    ("<", "%3c"),
-    (">", "%3e"),
-    ("#", "%23"),
-    ("(", "%28"),
-    (")", "%29")
-) !default;
-
-// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
-@function str-replace($string, $search, $replace: "") {
-    $index: string.index($string, $search);
-
-    @if $index {
-        @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
-    }
-
-    @return $string;
-}
-
-// See https://codepen.io/kevinweber/pen/dXWoRw
-@function escape-svg($string) {
-    @if string.index($string, "data:image/svg+xml") {
-        @each $char, $encoded in $svg-escaped-characters {
-            // Do not escape the url brackets
-            @if string.index($string, "url(") == 1 {
-                $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
-            } @else {
-                $string: str-replace($string, $char, $encoded);
-            }
-        }
-    }
-
-    @return $string;
-}

package/scss/core/helpers/_base.scss

@@ -1,136 +0,0 @@
-@use "sass:map";
-@use "../mixins" as *;
-@use "../variables" as *;
-@use "../color-system" as *;
-
-// Disabled state
-.k-disabled,
-.k-widget[disabled],
-.k-disabled {
-    @include disabled(
-        $color: var( --kendo-disabled-text, inherit ),
-        $border: var( --kendo-disabled-border, inherit )
-    );
-
-    .k-link {
-        cursor: default;
-        outline: 0;
-    }
-}
-
-// Horizontal line
-.k-hr {
-    margin-block: map.get( $kendo-spacing, 4 );
-    padding: 0;
-    height: 0;
-    border-width: 1px 0 0;
-    border-style: solid;
-    border-color: var( --kendo-component-border, inherit );
-    display: block;
-    float: none;
-    clear: both;
-}
-
-// Horizontal rule
-.k-d-flex-row > .k-hr {
-    margin: 0;
-    width: 0;
-    height: auto;
-    border-width: 0 0 0 1px;
-    flex: 0 0 auto;
-}
-
-// Vertical rule
-.k-d-flex-col > .k-hr {
-    margin: 0;
-    flex: 0 0 auto;
-}
-
-.k-sprite {
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    overflow: hidden;
-    background-repeat: no-repeat;
-    font-size: 0;
-    line-height: 0;
-    text-align: center;
-}
-
-.k-image {
-    display: inline-block;
-}
-
-// Layout
-.k-reset {
-    margin: 0;
-    padding: 0;
-    border-width: 0;
-    outline: 0;
-    text-decoration: none;
-    font: inherit;
-    list-style: none;
-}
-
-kendo-sortable {
-    display: block;
-}
-
-
-// Links
-.k-link,
-.k-link:hover {
-    color: inherit;
-    text-decoration: none;
-    outline: 0;
-    cursor: pointer;
-}
-
-// Outline
-.k-content {
-    outline: 0;
-}
-
-// Centering
-.k-centered {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-// Disable mouse events
-.k-no-click {
-    pointer-events: none;
-}
-
-// Off-screen container used during PDF export
-.k-pdf-export-shadow {
-    position: absolute;
-    overflow: hidden;
-    left: -15000px;
-    width: 14400px;
-}
-
-// PDF export icons fix
-.kendo-pdf-hide-pseudo-elements::before,
-.kendo-pdf-hide-pseudo-elements::after {
-    display: none !important; // stylelint-disable-line declaration-no-important
-}
-
-// Dirty indicator
-.k-dirty {
-    margin: 0;
-    padding: 0;
-    width: 0;
-    height: 0;
-    border-width: 3px;
-    border-style: solid;
-    border-block-start-color: currentColor;
-    border-block-end-color: transparent;
-    border-inline-start-color: transparent;
-    border-inline-end-color: currentColor;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-}

package/scss/core/helpers/_layout.scss

@@ -1,64 +0,0 @@
-// Basic layout
-.k-hbox,
-.k-hstack {
-    display: flex;
-    flex-flow: row nowrap;
-}
-
-.k-vbox,
-.k-vstack {
-    display: flex;
-    flex-flow: column nowrap;
-}
-
-.k-flex,
-.k-spacer {
-    flex: 1 0 0%;
-}
-
-
-// Stack layout
-.k-stack-layout {}
-
-
-// Flex layout
-.k-flex-layout {
-    display: flex;
-}
-
-
-// Grid layout
-.k-grid-layout {
-    display: grid;
-}
-
-
-// Separator
-.k-separator {
-    width: auto;
-    height: 0;
-    border-width: 1px 0 0;
-    border-style: solid;
-    border-color: inherit;
-    display: block;
-    flex-grow: 0 !important; // stylelint-disable-line declaration-no-important
-    flex-shrink: 0 !important; // stylelint-disable-line declaration-no-important
-    align-self: stretch;
-}
-.k-separator-horizontal,
-.k-vstack > .k-separator {
-    width: auto;
-    height: 0;
-    border-width: 1px 0 0;
-}
-.k-separator-vertical,
-.k-hstack > .k-separator {
-    width: 0;
-    height: auto;
-    border-width: 0 0 0 1px;
-}
-
-hr.k-separator {
-    margin: 0;
-    padding: 0;
-}

package/scss/core/helpers/_loading.scss

@@ -1,120 +0,0 @@
-@use "../variables" as *;
-@use "../color-system" as *;
-
-// Loading mask
-.k-loading-mask,
-.k-loading-image,
-.k-loading-color {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    *,
-    *::before,
-    *::after,
-    &::before,
-    &::after {
-        box-sizing: border-box;
-    }
-}
-
-.k-loading-mask {
-    z-index: $kendo-zindex-loading;
-
-    &.k-opaque {
-        .k-loading-color {
-            opacity: 1;
-        }
-    }
-}
-.k-loading-text {
-    text-indent: -4000px;
-    text-align: center;
-    position: absolute;
-    color: $kendo-loading-text;
-}
-.k-loading-image {
-    z-index: 2;
-    color: $kendo-loading-text;
-}
-.k-loading-color {
-    background-color: $kendo-loading-bg;
-    opacity: $kendo-loading-opacity;
-}
-
-// Loading indicator
-.k-i-loading {
-    position: relative;
-    background-color: transparent;
-    box-sizing: border-box;
-    color: $kendo-loading-text;
-
-    &::before,
-    &::after {
-        box-sizing: border-box;
-    }
-}
-
-.k-i-loading::before,
-.k-i-loading::after,
-.k-loading-image::before,
-.k-loading-image::after {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    display: inline-block;
-    content: "";
-    box-sizing: inherit;
-    border-radius: 50%;
-    border-width: .05em;
-    border-style: solid;
-    border-color: currentColor;
-    border-top-color: transparent;
-    border-bottom-color: transparent;
-    background-color: transparent;
-}
-
-.k-icon.k-i-loading::before,
-.k-icon.k-i-loading::after {
-    content: "";
-}
-
-.k-i-loading::before,
-.k-loading-image::before {
-    margin-top: -.5em;
-    margin-left: -.5em;
-    width: 1em;
-    height: 1em;
-    animation: k-loading-animation .7s linear infinite;
-}
-
-.k-i-loading::after,
-.k-loading-image::after {
-    margin-top: -.25em;
-    margin-left: -.25em;
-    width: .5em;
-    height: .5em;
-    animation: k-loading-animation reverse 1.4s linear infinite;
-}
-
-.k-loading-image::before,
-.k-loading-image::after {
-    content: "";
-    // See https://github.com/telerik/kendo-themes/issues/1925
-    border-width: 1px; // TODO: Remove once we drop IE support
-    border-width: clamp( .015em, 1px, 1px );
-    font-size: 4em;
-}
-
-// Loading animation
-@keyframes k-loading-animation {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}

package/scss/core/helpers/_selection.scss

@@ -1,27 +0,0 @@
-@use "../color-system" as *;
-
-.k-marquee {
-    border-width: 1px;
-    border-style: solid;
-    border-color: get-theme-color-var( primary-100 );
-    position: absolute;
-    z-index: 100000;
-}
-
-.k-marquee-color,
-.k-marquee-text {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.k-marquee-color {
-    color: $kendo-color-white;
-    background-color: get-theme-color-var( primary-100 );
-    opacity: .3;
-}
-.k-marquee-text {
-    color: $kendo-color-white;
-}