@progress/kendo-theme-fluent 5.7.0

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

@@ -0,0 +1,316 @@
+// Palettes
+$kendo-fluent-palettes: (
+    primary: (
+        10: #eff6fc,
+        20: #deecf9,
+        30: #c7e0f4,
+        40: #abd1ef,
+        50: #8ec2eb,
+        60: #72b3e6,
+        70: #55a5e2,
+        80: #3996dd,
+        90: #1c87d9,
+        100: #0078d4,
+        110: #106ebe,
+        120: #005a9e,
+        130: #004578,
+        140: #0f416c,
+        150: #153b60,
+        160: #173655,
+        170: #18304a,
+        180: #182a3f,
+        190: #162435,
+        200: #131d29,
+        210: #0e151e,
+        220: #070B10
+    ),
+    neutral: (
+        10: #faf9f8,
+        20: #f3f2f1,
+        30: #edebe9,
+        40: #e1dfdd,
+        50: #d2d0ce,
+        60: #c8c6c4,
+        70: #bdbbb8,
+        80: #b3b0ad,
+        90: #a19f9d,
+        100: #979593,
+        110: #8a8886,
+        120: #797775,
+        130: #605e5c,
+        140: #484644,
+        150: #3b3a39,
+        160: #323130,
+        170: #292827,
+        180: #252423,
+        190: #201f1e,
+        200: #1b1a19,
+        210: #161514,
+        220: #11100f
+    ),
+    error: (
+        10: #fef3f4,
+        20: #fde7e9,
+        30: #fcdbde,
+        40: #fbcfd3,
+        50: #fac3c8,
+        60: #f9b7bd,
+        70: #f8abb2,
+        80: #f79fa7,
+        90: #f6939c,
+        100: #f58791,
+        110: #e8797f,
+        120: #df6b6f,
+        130: #d75e5f,
+        140: #ce5250,
+        150: #c64541,
+        160: #be3a34,
+        170: #b73029,
+        180: #af251f,
+        190: #a80000,
+        200: #77231c,
+        210: #4d211d,
+        220: #251616
+    ),
+    success: (
+        10: #effbee,
+        20: #dff6dd,
+        30: #cff2cc,
+        40: #bfedbb,
+        50: #afe8aa,
+        60: #9fe499,
+        70: #8fdf88,
+        80: #7fdb77,
+        90: #6fd666,
+        100: #5fd255,
+        110: #66b150,
+        120: #5da94c,
+        130: #54a248,
+        140: #4b9b44,
+        150: #429541,
+        160: #388f3e,
+        170: #2e893b,
+        180: #238338,
+        190: #107c10,
+        200: #1d5d34,
+        210: #193e2c,
+        220: #10211d
+    ),
+    warning: (
+        10: #fff9e7,
+        20: #fff4ce,
+        30: #ffefb6,
+        40: #ffe99d,
+        50: #ffe384,
+        60: #ffde6c,
+        70: #ffd954,
+        80: #ffd33b,
+        90: #ffcd23,
+        100: #ffc80a,
+        110: #eebd2f,
+        120: #deb341,
+        130: #cfaa4e,
+        140: #c0a059,
+        150: #b19862,
+        160: #a38f69,
+        170: #94876e,
+        180: #877f72,
+        190: #797775,
+        200: #555557,
+        210: #35373b,
+        220: #1a1c20
+    ),
+    info: (
+        10: #e7f2ff,
+        20: #cee5ff,
+        30: #b6d8ff,
+        40: #9dcbff,
+        50: #84bfff,
+        60: #6cb2ff,
+        70: #54a5ff,
+        80: #3b98ff,
+        90: #238bff,
+        100: #0a7eff,
+        110: #0974eb,
+        120: #086bd8,
+        130: #0861c4,
+        140: #0757b1,
+        150: #064e9d,
+        160: #054489,
+        170: #053a76,
+        180: #043062,
+        190: #03274e,
+        200: #021d3b,
+        210: #021327,
+        220: #010a14
+    ),
+    tertiary: (
+        10: #eaf3fb,
+        20: #deecf9,
+        30: #bfdbf3,
+        40: #aacfef,
+        50: #95c3ec,
+        60: #80b8e8,
+        70: #6bace4,
+        80: #55a0e0,
+        90: #4094dc,
+        100: #2b88d8,
+        110: #287ec7,
+        120: #2473b7,
+        130: #2169a6,
+        140: #1e5e96,
+        150: #1a5485,
+        160: #174974,
+        170: #143f64,
+        180: #113453,
+        190: #0d2a42,
+        200: #0a1f32,
+        210: #071521,
+        220: #030a11
+    ),
+    series-a: (
+        10: #bfe6ee,
+        20: #aadde8,
+        30: #95d4e3,
+        40: #80ccde,
+        50: #6bc9de,
+        60: #55c5df,
+        70: #40b3cd,
+        80: #2bb4d4,
+        90: #15a7c8,
+        100: #0099bc,
+        110: #008cac,
+        120: #00809d,
+        130: #00738d,
+        140: #00667d,
+        150: #00596e,
+        160: #004d5e,
+        170: #003f4e,
+        180: #00333f,
+        190: #00262f,
+        200: #001c23,
+        210: #001318,
+        220: #000a0c
+    ),
+    series-b: (
+        10: #f9d1d5,
+        20: #f7c2c7,
+        30: #f5b2b9,
+        40: #f3a4ab,
+        50: #f1949d,
+        60: #ef858e,
+        70: #ed7680,
+        80: #eb6772,
+        90: #e95764,
+        100: #e74856,
+        110: #d4424f,
+        120: #c03c47,
+        130: #ad3641,
+        140: #9a3039,
+        150: #862a32,
+        160: #74242b,
+        170: #601e24,
+        180: #4d181c,
+        190: #3a1216,
+        200: #2c0e10,
+        210: #1d090b,
+        220: #0f0505
+    ),
+    series-c: (
+        10: #ffeebf,
+        20: #ffe7aa,
+        30: #ffe295,
+        40: #ffdc80,
+        50: #ffd66b,
+        60: #ffd055,
+        70: #ffcb40,
+        80: #ffc42b,
+        90: #ffbf15,
+        100: #ffb900,
+        110: #eaaa00,
+        120: #d49a00,
+        130: #bf8b00,
+        140: #aa7b00,
+        150: #956c00,
+        160: #805d00,
+        170: #6b4d00,
+        180: #553d00,
+        190: #402e00,
+        200: #302300,
+        210: #201700,
+        220: #100c00
+    ),
+    series-d: (
+        10: #bfddf5,
+        20: #aadde8,
+        30: #95c6ee,
+        40: #80bceb,
+        50: #6bb0e8,
+        60: #55a5e4,
+        70: #409ae1,
+        80: #2b8fde,
+        90: #1583da,
+        100: #0078d7,
+        110: #006ec5,
+        120: #0064b3,
+        130: #005aa1,
+        140: #00508f,
+        150: #00467d,
+        160: #003c6c,
+        170: #003259,
+        180: #002848,
+        190: #001e36,
+        200: #001623,
+        210: #000f1b,
+        220: #00080e
+    ),
+    series-e: (
+        10: #e1d8ed,
+        20: #d7cbe7,
+        30: #cdbee1,
+        40: #c3b2dc,
+        50: #b9a4d5,
+        60: #af98d0,
+        70: #a58bca,
+        80: #9b7ec4,
+        90: #9171be,
+        100: #8764b8,
+        110: #7c5ca9,
+        120: #705399,
+        130: #654b8a,
+        140: #5a437b,
+        150: #4e3a6b,
+        160: #44325c,
+        170: #382a4d,
+        180: #2d213d,
+        190: #22192e,
+        200: #1a1323,
+        210: #110d17,
+        220: #09060c
+    ),
+    series-f: (
+        10: #bff2da,
+        20: #aaeecd,
+        30: #95e9c1,
+        40: #80e6b5,
+        50: #6be1a8,
+        60: #55dd9b,
+        70: #40d98f,
+        80: #2bd583,
+        90: #15d076,
+        100: #00cc6a,
+        110: #00bb61,
+        120: #00aa58,
+        130: #009950,
+        140: #008846,
+        150: #00773e,
+        160: #006635,
+        170: #00552c,
+        180: #004423,
+        190: #00331b,
+        200: #002614,
+        210: #001a0d,
+        220: #000d07
+    )
+
+) !default;

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

@@ -0,0 +1,169 @@
+@use "utils" as *;
+@use "palettes" as *;
+
+// Constants
+$white: #ffffff;
+$black: #000000;
+$rgba-transparent: rgba( 0, 0, 0, 0 );
+$gradient-transparent-to-black: rgba( black, 0), black;
+$gradient-transparent-to-white: rgba( white, 0), white;
+$gradient-black-to-transparent: black, rgba( black, 0);
+$gradient-white-to-transparent: white, rgba( white, 0);
+$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000;
+
+// Root styles
+$kendo-body-bg: $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: 0px 0.3px 0.9px rgba( $black, 0.1 ), 0px 1.6px 3.6px rgba( $black, 0.13 ) !default;
+/// Shadow for command bars and dropdowns.
+/// Equivalent to fluent depth 8.
+$kendo-box-shadow-depth-2: 0px 0.6px 1.8px rgba( $black, 0.1 ), 0px 3.2px 7.2px rgba( $black, 0.13 ) !default;
+/// Shadow for teaching callouts and hover cards / tooltips.
+/// Equivalent to fluent depth 16.
+$kendo-box-shadow-depth-3: 0px 1.2px 3.6px rgba( $black, 0.1 ), 0px 6.4px 14.4px rgba( $black, 0.13 ) !default;
+/// Shadow for panels and pop up dialogs.
+/// Equivalent to fluent depth 64.
+$kendo-box-shadow-depth-4: 0px 4.8px 14.4px rgba( $black, 0.18 ), 0px 25.6px 57.6px rgba( $black, 0.22 ) !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;
+
+
+// Text colors
+@each $theme-color, $color-props in $kendo-theme-colors {
+    // sass-lint:disable-line no-important
+    // sass-lint:disable-line class-name-format
+    $_color: map-get( $color-props, text );
+
+    .k-text-#{$theme-color} {
+        color: var( --kendo-text-#{$theme-color}, #{$_color} );
+    }
+    .\!k-text-#{$theme-color} {
+        color: var( --kendo-text-#{$theme-color}, #{$_color} ) !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;
+    }
+};
+
+: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};
+}

package/scss/core/color-system/utils/_functions.scss

@@ -0,0 +1,67 @@
+@use "sass:map";
+@use "sass:list";
+@use "../palettes" as *;
+
+@function get-theme-palette($name) {
+    @return map-get( $kendo-fluent-palettes, $name );
+}
+
+@function get-theme-color($palette, $hue) {
+    @return map-get( get-theme-palette( $palette ), $hue );
+}
+
+@function get-theme-color-var($name, $fallback: "inherit", $prefix: "kendo") {
+    @return var( --#{$prefix}-#{$name}, #{$fallback} );
+}
+
+@function generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
+    $temp: ();
+
+    @each $ui-state, $indices in $mapping {
+        $prefix: if( $ui-state == normal, '', '#{$ui-state}-' );
+
+        $bg-prop: list.nth($indices, 1);
+        $text-prop: list.nth($indices, 2);
+        $border-prop: list.nth($indices, 3);
+
+        // Take value from the palette only if it is a number
+        $bg: if( type_of($bg-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop );
+        $text: if( type_of($text-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop );
+        $border: if( type_of($border-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop );
+
+        $temp: map.deep-merge( $temp, (
+            #{$prefix}bg: $bg,
+            #{$prefix}text: $text,
+            #{$prefix}border: $border
+        ));
+
+        // Add outline if provided in the map
+        @if(list.length($indices) > 3) {
+            $outline-prop: list.nth($indices, 4);
+            $outline: if( type_of($outline-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop );
+
+            $temp: map.deep-merge( $temp, (
+                #{$prefix}outline: $outline
+            ));
+        }
+    }
+
+    $map: (
+        #{$theme-color}: $temp
+    );
+
+    @return $map;
+
+};
+
+
+@function generate-fill-mode-theme-variation( $fill-mode, $theme-color, $source-palette-name, $mapping ) {
+
+    $map: generate-theme-variation( $theme-color, $source-palette-name, $mapping );
+
+    $result: (
+       #{$fill-mode}: $map
+    );
+
+    @return $result;
+}

package/scss/core/color-system/utils/_index.scss

@@ -0,0 +1,2 @@
+@forward "functions";
+@forward "mixins";

package/scss/core/color-system/utils/_mixins.scss

@@ -0,0 +1,9 @@
+@use "sass:meta";
+
+@mixin css-vars($map) {
+    @each $group, $values in $map {
+        @each $key, $value in $values {
+            --kendo-#{meta.inspect($group)}-#{$key}: #{$value};
+        }
+    }
+}

package/scss/core/functions/_index.scss

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

package/scss/core/functions/_strings.scss

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