@progress/kendo-theme-core 7.1.0-dev.8 → 7.1.0-dev.9

package/dist/all.css

@@ -265,16 +265,13 @@ kendo-sortable {
     text-indent: -4000px;
     text-align: center;
     position: absolute;
-    color: currentColor;
 }
 
 .k-loading-image {
     z-index: 2;
-    color: currentColor;
 }
 
 .k-loading-color {
-    background-color: #ffffff;
     opacity: 0.3;
 }
 
@@ -290,7 +287,6 @@ kendo-sortable {
     position: relative;
     background-color: transparent;
     box-sizing: border-box;
-    color: currentColor;
 }
 
 .k-i-loading::before, .k-i-loading::after {
@@ -371,12 +367,7 @@ kendo-sortable {
 }
 
 .k-marquee-color {
-    color: var(--kendo-neutral-160, inherit);
-    background-color: var(--kendo-primary-60, var(--kendo-neutral-30, inherit));
-    border-color: var(--kendo-primary-100, var(--kendo-neutral-130, inherit));
+    background-color: var(--kendo-primary-60, );
+    border-color: var(--kendo-primary-100, );
     opacity: .6;
 }
-
-.k-marquee-text {
-    color: var(--kendo-neutral-160, inherit);
-}

package/dist/all.scss

@@ -706,6 +706,28 @@ $kendo-color-level-step: 8% !default;
     @return k-color-mix( rgba( $color1, 1 ), rgba( $color2, 1 ), $weight );
 }
 
+/// Generates all color variations of a given main color
+/// @param {String} $name - The name of the main color
+/// @param {Color} $level - The color value to be assigned to the main color
+/// @return {Map} - A map with the generated keys and values
+///
+/// @group color-system
+@function k-generate-colors( $name, $color ) {
+    $_variations: (
+        #{$name}-subtle: k-try-tint( $color, 80% ),
+        #{$name}-subtle-hover: k-try-tint( $color, 65% ),
+        #{$name}-subtle-active: k-try-tint( $color, 50% ),
+        #{$name}: $color,
+        #{$name}-hover: k-try-shade( $color, 0.5 ),
+        #{$name}-active: k-try-shade( $color, 1.5 ),
+        #{$name}-emphasis: k-try-tint( $color, 4.5 ),
+        #{$name}-on-subtle: k-try-shade( $color, 8 ),
+        on-#{$name}: k-contrast-legacy( $color ),
+        #{$name}-on-surface: $color,
+    );
+    
+    @return $_variations;
+}
 // #endregion
 // #region @import "./_custom-properties.import.scss"; -> scss/functions/_custom-properties.import.scss
 @function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
@@ -2803,6 +2825,31 @@ $kendo-palettes: (
     @return var( --#{$prefix}#{$name}, #{$fallback} );
 }
 
+@function k-get-swatch-color( $name, $color ) {
+    $map: (
+        app-surface: k-color( app-surface ),
+        on-app-surface: k-color( on-app-surface ),
+        subtle: k-color( subtle ),
+        surface: k-color( surface ),
+        surface-alt: k-color( surface-alt ),
+        border: k-color( border ),
+        border-alt: k-color( border-alt ),
+        color-subtle: k-color( #{$color}-subtle ),
+        color-subtle-hover: k-color( #{$color}-subtle-hover ),
+        color-subtle-active: k-color( #{$color}-subtle-active ),
+        color: k-color( #{$color} ),
+        color-hover: k-color( #{$color}-hover ),
+        color-active: k-color( #{$color}-active ),
+        color-emphasis: k-color( #{$color}-emphasis ),
+        color-on-subtle: k-color( #{$color}-on-subtle ),
+        on-color: k-color( on-#{$color} ),
+        color-on-surface: k-color( #{$color}-on-surface ),
+        on-color-disabled: rgba( k-color( on-#{$color}, true ), .46)
+    );
+
+    @return if( k-map-has-key( $map, $name ), k-map-get( $map, $name ), $name );
+};
+
 @function k-generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
     $temp: ( );
 
@@ -2814,9 +2861,9 @@ $kendo-palettes: (
         $border-prop: k-list-nth($indices, 3);
 
         // Take value from the palette only if it is a number
-        $bg: if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop );
-        $text: if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop );
-        $border: if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop );
+        $bg: if($kendo-enable-color-system, k-get-swatch-color( $bg-prop, $source-palette-name ), if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop ));
+        $text: if($kendo-enable-color-system, k-get-swatch-color( $text-prop, $source-palette-name ), if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop ));
+        $border: if($kendo-enable-color-system, k-get-swatch-color( $border-prop, $source-palette-name ), if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop ));
 
 
         $temp: k-map-deep-merge( $temp, (
@@ -2828,7 +2875,7 @@ $kendo-palettes: (
         // Add outline if provided in the map
         @if ( k-list-length($indices) > 3 ) {
             $outline-prop: k-list-nth($indices, 4);
-            $outline: if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop );
+            $outline: if($kendo-enable-color-system, k-get-swatch-color( $outline-prop, $source-palette-name ), if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop ));
 
             $temp: k-map-deep-merge( $temp, (
                 #{$prefix}outline: $outline
@@ -2855,6 +2902,18 @@ $kendo-palettes: (
     @return $result;
 }
 
+@function k-hex-to-rgb( $color ) {
+    @if($color) {
+        $r: k-color-red($color);
+        $g: k-color-green($color);
+        $b: k-color-blue($color);
+
+        @return $r, $g, $b;
+    } @else {
+        @return null;
+    }
+}
+
 // #endregion
 // #region @import "./_mixins.import.scss"; -> scss/color-system/_mixins.import.scss
 @mixin k-css-vars($map) {
@@ -2866,7 +2925,215 @@ $kendo-palettes: (
 }
 
 // #endregion
-// #region @import "./_variables.scss"; -> scss/color-system/_variables.scss
+// #region @import "./_swatch.scss"; -> scss/color-system/_swatch.scss
+// #region @import "./_functions.import.scss"; -> scss/color-system/_functions.import.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+// Config
+$kendo-enable-color-system: false !default;
+
+// Colors
+$_default-colors: (
+    // Misc
+    app-surface: null,
+    on-app-surface: null,
+    subtle: null,
+    surface: null,
+    surface-alt: null,
+    border: null,
+    border-alt: null,
+    // Base
+    base-subtle: null,
+    base-subtle-hover: null,
+    base-subtle-active: null,
+    base: null,
+    base-hover: null,
+    base-active: null,
+    base-emphasis: null,
+    base-on-subtle: null,
+    on-base: null,
+    base-on-surface: null,
+    // Primary
+    primary-subtle: null,
+    primary-subtle-hover: null,
+    primary-subtle-active: null,
+    primary: null,
+    primary-hover: null,
+    primary-active: null,
+    primary-emphasis: null,
+    primary-on-subtle: null,
+    on-primary: null,
+    primary-on-surface: null,
+    // Secondary
+    secondary-subtle: null,
+    secondary-subtle-hover: null,
+    secondary-subtle-active: null,
+    secondary: null,
+    secondary-hover: null,
+    secondary-active: null,
+    secondary-emphasis: null,
+    secondary-on-subtle: null,
+    on-secondary: null,
+    secondary-on-surface: null,
+    // Tertiary
+    tertiary-subtle: null,
+    tertiary-subtle-hover: null,
+    tertiary-subtle-active: null,
+    tertiary: null,
+    tertiary-hover: null,
+    tertiary-active: null,
+    tertiary-emphasis: null,
+    tertiary-on-subtle: null,
+    on-tertiary: null,
+    tertiary-on-surface: null,
+    // Info
+    info-subtle: null,
+    info-subtle-hover: null,
+    info-subtle-active: null,
+    info: null,
+    info-hover: null,
+    info-active: null,
+    info-emphasis: null,
+    info-on-subtle: null,
+    on-info: null,
+    info-on-surface: null,
+    // Success
+    success-subtle: null,
+    success-subtle-hover: null,
+    success-subtle-active: null,
+    success: null,
+    success-hover: null,
+    success-active: null,
+    success-emphasis: null,
+    success-on-subtle: null,
+    on-success: null,
+    success-on-surface: null,
+    // Warning
+    warning-subtle: null,
+    warning-subtle-hover: null,
+    warning-subtle-active: null,
+    warning: null,
+    warning-hover: null,
+    warning-active: null,
+    warning-emphasis: null,
+    warning-on-subtle: null,
+    on-warning: null,
+    warning-on-surface: null,
+    // Error
+    error-subtle: null,
+    error-subtle-hover: null,
+    error-subtle-active: null,
+    error: null,
+    error-hover: null,
+    error-active: null,
+    error-emphasis: null,
+    error-on-subtle: null,
+    on-error: null,
+    error-on-surface: null,
+    // Light
+    light-subtle: null,
+    light-subtle-hover: null,
+    light-subtle-active: null,
+    light: null,
+    light-hover: null,
+    light-active: null,
+    light-emphasis: null,
+    light-on-subtle: null,
+    on-light: null,
+    light-on-surface: null,
+    // Dark
+    dark-subtle: null,
+    dark-subtle-hover: null,
+    dark-subtle-active: null,
+    dark: null,
+    dark-hover: null,
+    dark-active: null,
+    dark-emphasis: null,
+    dark-on-subtle: null,
+    on-dark: null,
+    dark-on-surface: null,
+    // Inverse
+    inverse-subtle: null,
+    inverse-subtle-hover: null,
+    inverse-subtle-active: null,
+    inverse: null,
+    inverse-hover: null,
+    inverse-active: null,
+    inverse-emphasis: null,
+    inverse-on-subtle: null,
+    on-inverse: null,
+    inverse-on-surface: null,
+    // Series A
+    series-a: null,
+    series-a-bold: null,
+    series-a-bolder: null,
+    series-a-subtle: null,
+    series-a-subtler: null,
+    // Series B
+    series-b: null,
+    series-b-bold: null,
+    series-b-bolder: null,
+    series-b-subtle: null,
+    series-b-subtler: null,
+    // Series C
+    series-c: null,
+    series-c-bold: null,
+    series-c-bolder: null,
+    series-c-subtle: null,
+    series-c-subtler: null,
+    // Series D
+    series-d: null,
+    series-d-bold: null,
+    series-d-bolder: null,
+    series-d-subtle: null,
+    series-d-subtler: null,
+    // Series Е
+    series-e: null,
+    series-e-bold: null,
+    series-e-bolder: null,
+    series-e-subtle: null,
+    series-e-subtler: null,
+    // Series F
+    series-f: null,
+    series-f-bold: null,
+    series-f-bolder: null,
+    series-f-subtle: null,
+    series-f-subtler: null,
+) !default;
+
+/// The global default Colors map.
+/// @group color-system
+$kendo-colors: $_default-colors !default;
+$kendo-colors: k-map-merge($_default-colors, $kendo-colors);
+
+@function k-color($key, $rgb: false) {
+    $_color: k-map-get($kendo-colors, $key);
+
+    @if ($_color) {
+        @if ($rgb) {
+            @return var(--kendo-color-#{$key}-rgb, k-hex-to-rgb($_color));
+        } @else {
+            @return var(--kendo-color-#{$key}, $_color);
+        }
+    } @else {
+        @error "Color Variable \`#{$key}\` does not exists in the color collection.";
+    }
+}
+
+@mixin color-system--styles() {
+    :root {
+        @each $key, $value in $kendo-colors {
+            @if($value) {
+                --kendo-color-#{$key}: #{$value};
+                --kendo-color-#{$key}-rgb: #{k-hex-to-rgb($value)};
+            }
+        }
+    }
+}
+
+// #endregion
+// #region @import "./_constants.scss"; -> scss/color-system/_constants.scss
 // Color constants
 
 /// The color white.
@@ -2885,31 +3152,31 @@ $kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-defa
 /// Note: you cannot change this value.
 /// @type Color
 /// @group color-system
-$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
+$kendo-color-rgba-transparent: rgba(0, 0, 0, 0); // stylelint-disable-line scss/dollar-variable-default
 
 /// A gradient that goes from transparent to black.
 /// Note: you cannot change this value.
 /// @type Gradient
 /// @group color-system
-$kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
+$kendo-gradient-transparent-to-black: rgba(black, 0), black; // stylelint-disable-line scss/dollar-variable-default
 
 /// A gradient that goes from transparent to white.
 /// Note: you cannot change this value.
 /// @type Gradient
 /// @group color-system
-$kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
+$kendo-gradient-transparent-to-white: rgba(white, 0), white; // stylelint-disable-line scss/dollar-variable-default
 
 /// A gradient that goes from black to transparent.
 /// Note: you cannot change this value.
 /// @type Gradient
 /// @group color-system
-$kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
+$kendo-gradient-black-to-transparent: black, rgba(black, 0); // stylelint-disable-line scss/dollar-variable-default
 
 /// A gradient that goes from white to transparent.
 /// Note: you cannot change this value.
 /// @type Gradient
 /// @group color-system
-$kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
+$kendo-gradient-white-to-transparent: white, rgba(white, 0); // stylelint-disable-line scss/dollar-variable-default
 
 /// A gradient that cycles through the colors of the rainbow.
 /// Note: you cannot change this value.
@@ -2917,153 +3184,84 @@ $kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disa
 /// @group color-system
 $kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
 
+// #endregion
+// #region @import "./_swatch-legacy.scss"; -> scss/color-system/_swatch-legacy.scss
+$kendo-is-dark-theme: false !default;
 
 // Root styles
-$kendo-body-bg: $kendo-color-white !default;
-$kendo-body-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-body-bg: null !default;
+$kendo-body-text: null !default;
 
 // Component styles
-$kendo-component-bg: $kendo-body-bg !default;
-$kendo-component-text: $kendo-body-text !default;
-$kendo-component-border: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-component-bg: null !default;
+$kendo-component-text: null !default;
+$kendo-component-border: null !default;
 
 // States styles
-$kendo-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
-$kendo-hover-text: k-get-theme-color-var( neutral-190 ) !default;
-$kendo-hover-border: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-hover-bg: null !default;
+$kendo-hover-text: null !default;
+$kendo-hover-border: null !default;
 
-$kendo-selected-bg: k-get-theme-color-var( neutral-30 ) !default;
-$kendo-selected-text: k-get-theme-color-var( neutral-160 ) !default;
-$kendo-selected-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-selected-bg: null !default;
+$kendo-selected-text: null !default;
+$kendo-selected-border: null !default;
 
-$kendo-selected-hover-bg: k-get-theme-color-var( neutral-40 ) !default;
-$kendo-selected-hover-text: k-get-theme-color-var( neutral-190 ) !default;
-$kendo-selected-hover-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-selected-hover-bg: null !default;
+$kendo-selected-hover-text: null !default;
+$kendo-selected-hover-border: null !default;
 
-$kendo-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-focus-outline: null !default;
 
-$kendo-subtle-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-subtle-text: null !default;
 
 // Link
-$kendo-link-text: k-get-theme-color-var( primary-100 ) !default;
-$kendo-link-hover-text: k-get-theme-color-var( primary-120 ) !default;
+$kendo-link-text: null !default;
+$kendo-link-hover-text: null !default;
 
 // Validator
-$kendo-invalid-bg: initial !default;
-$kendo-invalid-text: k-get-theme-color-var( error-190 ) !default;
-$kendo-invalid-border: k-get-theme-color-var( error-190 ) !default;
+$kendo-invalid-bg: null !default;
+$kendo-invalid-text: null !default;
+$kendo-invalid-border: null !default;
 $kendo-invalid-shadow: null !default;
 
-$kendo-valid-bg: initial !default;
-$kendo-valid-text: k-get-theme-color-var( success-190 ) !default;
-$kendo-valid-border: k-get-theme-color-var( success-190 ) !default;
-$kendo-valid-shadow: null !default;
-
 // Disabled Styling
-$kendo-disabled-bg: k-get-theme-color-var( neutral-20 ) !default;
-$kendo-disabled-text: k-get-theme-color-var( neutral-90 ) !default;
-$kendo-disabled-border: transparent !default;
+$kendo-disabled-bg: null !default;
+$kendo-disabled-text: null !default;
+$kendo-disabled-border: null !default;
 
 // Loading
-$kendo-loading-bg: $kendo-component-bg !default;
-$kendo-loading-text: currentColor !default;
-
-
-// Theme colors
-$kendo-theme-colors: (
-    primary: (
-        text: k-get-theme-color-var( primary-130 ),
-        bg: k-get-theme-color-var( primary-20 ),
-        border: k-get-theme-color-var( primary-20 )
-    ),
-    info: (
-        text: k-get-theme-color-var( info-190 ),
-        bg: k-get-theme-color-var( info-20 ),
-        border: k-get-theme-color-var( info-20 )
-    ),
-    success: (
-        text: k-get-theme-color-var( success-190 ),
-        bg: k-get-theme-color-var( success-20 ),
-        border: k-get-theme-color-var( success-20 )
-    ),
-    warning: (
-        text: k-get-theme-color-var( neutral-160 ),
-        bg: k-get-theme-color-var( warning-20 ),
-        border: k-get-theme-color-var( warning-20 )
-    ),
-    error: (
-        text: k-get-theme-color-var( error-190 ),
-        bg: k-get-theme-color-var( error-20 ),
-        border: k-get-theme-color-var( error-20 )
-    )
-) !default;
+$kendo-loading-bg: null !default;
+$kendo-loading-text: null !default;
 
+$kendo-palettes: () !default;
+$kendo-theme-colors: () !default;
 
 @mixin color-system-styles() {
     :root {
-        @include k-css-vars( $kendo-palettes );
-        @include k-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-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};
+        @include k-css-vars($kendo-palettes);
+        @include k-css-vars($kendo-theme-colors);
 
-        --kendo-subtle-text: #{$kendo-subtle-text};
+        // Text colors
+        @each $theme-color, $color-props in $kendo-theme-colors {
+            $_color: k-map-get($color-props, 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};
-
-        --kendo-border-radius-sm: #{$kendo-border-radius-sm};
-        --kendo-border-radius-md: #{$kendo-border-radius-md};
-        --kendo-border-radius-lg: #{$kendo-border-radius-lg};
-    }
-
-    // Text colors
-    @each $theme-color, $color-props in $kendo-theme-colors {
-        $_color: k-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-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
+            .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
+            }
         }
-    };
+    }
 }
 
 // #endregion
@@ -4466,9 +4664,17 @@ $_imported: () !default;
     }
 }
 // #endregion
+// #region @import "./_colors.scss"; -> scss/styles/_colors.scss
+@mixin kendo-core--styles--colors() {
+    @if ($kendo-enable-color-system) {
+        @include color-system--styles();
+    }
+}
 
+// #endregion
 
 @mixin kendo-core--styles() {
+    @include kendo-core--styles--colors();
     @include kendo-core--styles--accessibility();
     @include kendo-core--styles--asp-fallback();
     @include kendo-core--styles--layout();