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

package/scss/checkbox/_variables.scss

@@ -81,7 +81,7 @@ $kendo-checkbox-hover-border: null !default;
 $kendo-checkbox-checked-bg: $kendo-color-primary !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: k-contrast-legacy( $kendo-checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -107,7 +107,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
 $kendo-checkbox-focus-checked-border: null !default;
 /// The box shadow of the focused and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $kendo-color-primary, .3 ) !default;
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 )) !default;
 
 /// The background color of the disabled CheckBox.
 /// @group checkbox

package/scss/chip/_theme.scss

@@ -28,24 +28,24 @@
                 }
             } @else {
                 @include fill(
-                    k-try-shade( $color, 65% ),
-                    k-try-tint( $color, 80% ),
-                    k-try-tint( $color, 25% ),
+                    if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )),
+                    if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )),
+                    if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )),
                     $kendo-chip-solid-gradient
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px rgba( $color, .16 ) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), rgba( $color, .16 )) );
                 }
 
                 &:hover,
                 &.k-hover {
-                    @include fill( $bg: k-try-tint($color, 65% ) );
+                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) );
                 }
 
                 &.k-selected {
-                    @include fill( $bg: k-try-tint( $color, 50% ) );
+                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) );
                 }
             }
         }
@@ -83,54 +83,56 @@
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text),
-                    if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ),
-                    if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
+                    if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
+                    if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
+                    if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
-                        $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
+                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
+                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
-                        $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
+                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
+                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                     );
                 }
             } @else {
                 @include fill(
-                    k-try-shade( $color, 25% ),
-                    if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ),
-                    k-try-shade( $color, 25% )
+                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )),
+                    if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
+                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% ))
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
-                        $bg: k-try-shade( $color, 25% )
+                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
+                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )),
+                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% ))
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
-                        $bg: k-try-shade( $color, 25% )
+                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
+                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )),
+                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% ))
                     );
                 }
             }

package/scss/chip/_variables.scss

@@ -92,7 +92,7 @@ $kendo-chip-sizes: (
 
 /// The base background of the Chip.
 /// @group chip
-$kendo-chip-base-bg: $kendo-button-bg !default;
+$kendo-chip-base-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) !default;
 
 /// The theme colors map for the Chip.
 /// @group chip
@@ -115,7 +115,7 @@ $kendo-chip-solid-text: $kendo-button-text !default;
 $kendo-chip-solid-border: $kendo-button-border !default;
 /// The base shadow of the solid Chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
 /// The base gradient of the solid Chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
@@ -129,7 +129,7 @@ $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of the hovered solid Chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: $kendo-button-hover-bg !default;
+$kendo-chip-solid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg) !default;
 /// The base text color of the hovered solid Chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
@@ -152,14 +152,14 @@ $kendo-chip-outline-text: $kendo-chip-solid-text !default;
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of the outline Chip.
 /// @group chip
-$kendo-chip-outline-shadow: 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
 
 /// The base background color of the hovered outline Chip.
 /// @group chip
 $kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
 /// The base text color of the hovered outline Chip.
 /// @group chip
-$kendo-chip-outline-hover-text: k-contrast-legacy( $kendo-chip-outline-hover-bg ) !default;
+$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) !default;
 
 /// The base background color of the selected outline Chip.
 /// @group chip

package/scss/core/_index.scss

@@ -3,8 +3,14 @@ $wcag-min-contrast-ratio: 4.5 !default;
 // Variables
 @import "../_variables.scss";
 
+// Color System
+@import "./color-system/_swatch.scss";
+
 @import "@progress/kendo-theme-core/scss/index.import.scss";
 
+// Backward compatibility
+@import "./color-system/_swatch-legacy.scss";
+
 // Expose
 @include exports("kendo-core-styles") {
     @include kendo-core--styles();

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

@@ -0,0 +1,256 @@
+$_default-palette-gray: (
+    white: #ffffff,
+    1: #fafafa,
+    2: #f5f5f5,
+    3: #ebebeb,
+    4: #e0e0e0,
+    5: #d6d6d6,
+    6: #c2c2c2,
+    7: #adadad,
+    8: #999999,
+    9: #808080,
+    10: #666666,
+    11: #525252,
+    12: #3d3d3d,
+    13: #292929,
+    14: #1f1f1f,
+    15: #141414,
+    black: #000000,
+);
+
+$_default-palette-coral: (
+    1: #fff6f5,
+    2: #ffeceb,
+    3: #ffdedb,
+    4: #ffc8c4,
+    5: #ffb1ac,
+    6: #ff9d97,
+    7: #ff8a82,
+    8: #ff766d,
+    9: #ff6358,
+    10: #ea5a51,
+    11: #d45349,
+    12: #bf4a42,
+    13: #a33f38,
+    14: #80322c,
+    15: #5c201c,
+);
+
+$_default-palette-sky-blue: (
+    1: #ebf8fe,
+    2: #d8f1fd,
+    3: #c5eafc,
+    4: #a3dffb,
+    5: #81d4fA,
+    6: #61c9f9,
+    7: #42bff7,
+    8: #22b3f5,
+    9: #03a9f4,
+    10: #039ae0,
+    11: #028ccb,
+    12: #027fb7,
+    13: #026999,
+    14: #02557a,
+    15: #023f5c,
+);
+
+$_default-palette-green: (
+    1: #edf8e9,
+    2: #dcf0d3,
+    3: #cbe9bf,
+    4: #b7e1a5,
+    5: #9bda80,
+    6: #81d15f,
+    7: #69c740,
+    8: #4ebe1f,
+    9: #37b400,
+    10: #32a500,
+    11: #2d9600,
+    12: #298700,
+    13: #227100,
+    14: #1c5a00,
+    15: #1c5a00,
+);
+
+$_default-palette-blue: (
+    1: #e9f0fd,
+    2: #d2e2fb,
+    3: #bdd4f8,
+    4: #9ec0f6,
+    5: #80acf4,
+    6: #6098f2,
+    7: #4082ef,
+    8: #206eec,
+    9: #0058e9,
+    10: #0052d6,
+    11: #004ac2,
+    12: #0042af,
+    13: #003892,
+    14: #002c75,
+    15: #002259,
+);
+
+$_default-palette-yellow: (
+    1: #fffae9,
+    2: #fff4d3,
+    3: #ffeebd,
+    4: #ffe79e,
+    5: #ffe080,
+    6: #ffd760,
+    7: #ffd040,
+    8: #ffc720,
+    9: #ffc000,
+    10: #eaaf00,
+    11: #d49f00,
+    12: #bf9000,
+    13: #a07800,
+    14: #806000,
+    15: #5e4700,
+);
+
+$_default-palette-red: (
+    1: #feeeed,
+    2: #fcddda,
+    3: #fbc8c3,
+    4: #faaaa2,
+    5: #f98b80,
+    6: #f76f60,
+    7: #f65140,
+    8: #f43520,
+    9: #f31700,
+    10: #df1600,
+    11: #ca1400,
+    12: #b61100,
+    13: #980f00,
+    14: #7a0c00,
+    15: #7a0c00,
+);
+
+$_default-palette-lemon-yellow: (
+    1: #fffcf1,
+    2: #fffae2,
+    3: #fff7d4,
+    4: #fff4c2,
+    5: #fff0b1,
+    6: #ffed9d,
+    7: #ffe989,
+    8: #ffe676,
+    9: #ffe162,
+    10: #ead05a,
+    11: #d4bc52,
+    12: #bfa94a,
+    13: #a3913f,
+    14: #807131,
+    15: #5c5223,
+);
+
+$_default-palette-spring-green: (
+    1: #effaf3,
+    2: #e0f6e8,
+    3: #d1f1dd,
+    4: #c0edd1,
+    5: #a6e8c0,
+    6: #8fe2af,
+    7: #79dda0,
+    8: #62d78f,
+    9: #4cd180,
+    10: #46c074,
+    11: #3fae6a,
+    12: #399d60,
+    13: #2f834f,
+    14: #266940,
+    15: #1c4f30,
+);
+
+$_default-palette-royal-blue: (
+    1: #f0f2ff,
+    2: #e1e4fe,
+    3: #d2d7fe,
+    4: #bbc3fd,
+    5: #a5affd,
+    6: #8e9bfc,
+    7: #7887fb,
+    8: #6173fb,
+    9: #4b5ffa,
+    10: #4558e5,
+    11: #3f50d1,
+    12: #3847bc,
+    13: #2f3c9d,
+    14: #26307d,
+    15: #1c245e,
+);
+
+$_default-palette-lavender-purple: (
+    1: #f7f0ff,
+    2: #f0e0ff,
+    3: #e8d1ff,
+    4: #dfbfff,
+    5: #d6acff,
+    6: #cc97ff,
+    7: #c182ff,
+    8: #b76dff,
+    9: #ac58ff,
+    10: #9e51ea,
+    11: #8f49d4,
+    12: #8142bf,
+    13: #6b37a0,
+    14: #562c80,
+    15: #3f205e,
+);
+
+$_default-palette-flamingo-pink: (
+    1: #fff0f5,
+    2: #ffe1eb,
+    3: #ffd1e1,
+    4: #ffbfd6,
+    5: #ffacc9,
+    6: #ff97bb,
+    7: #ff82ae,
+    8: #ff6da0,
+    9: #ff5892,
+    10: #ea5186,
+    11: #d4497a,
+    12: #bf426e,
+    13: #a0375c,
+    14: #802c49,
+    15: #5e2036,
+);
+
+
+// stylelint-disable scss/no-global-function-names
+$kendo-palette-gray: $_default-palette-gray !default;
+$kendo-palette-gray: map-merge($_default-palette-gray, $kendo-palette-gray);
+
+$kendo-palette-coral: $_default-palette-coral !default;
+$kendo-palette-coral: map-merge($_default-palette-coral, $kendo-palette-coral);
+
+$kendo-palette-sky-blue: $_default-palette-sky-blue !default;
+$kendo-palette-sky-blue: map-merge($_default-palette-sky-blue, $kendo-palette-sky-blue);
+
+$kendo-palette-green: $_default-palette-green !default;
+$kendo-palette-green: map-merge($_default-palette-green, $kendo-palette-green);
+
+$kendo-palette-blue: $_default-palette-blue !default;
+$kendo-palette-blue: map-merge($_default-palette-blue, $kendo-palette-blue);
+
+$kendo-palette-yellow: $_default-palette-yellow !default;
+$kendo-palette-yellow: map-merge($_default-palette-yellow, $kendo-palette-yellow);
+
+$kendo-palette-red: $_default-palette-red !default;
+$kendo-palette-red: map-merge($_default-palette-red, $kendo-palette-red);
+
+$kendo-palette-lemon-yellow: $_default-palette-lemon-yellow !default;
+$kendo-palette-lemon-yellow: map-merge($_default-palette-lemon-yellow, $kendo-palette-lemon-yellow);
+
+$kendo-palette-spring-green: $_default-palette-spring-green !default;
+$kendo-palette-spring-green: map-merge($_default-palette-spring-green, $kendo-palette-spring-green);
+
+$kendo-palette-royal-blue: $_default-palette-royal-blue !default;
+$kendo-palette-royal-blue: map-merge($_default-palette-royal-blue, $kendo-palette-royal-blue);
+
+$kendo-palette-lavender-purple: $_default-palette-lavender-purple !default;
+$kendo-palette-lavender-purple: map-merge($_default-palette-lavender-purple, $kendo-palette-lavender-purple);
+
+$kendo-palette-flamingo-pink: $_default-palette-flamingo-pink !default;
+$kendo-palette-flamingo-pink: map-merge($_default-palette-flamingo-pink, $kendo-palette-flamingo-pink);
+// stylelint-enable scss/no-global-function-names

package/scss/core/color-system/_swatch-legacy.scss

@@ -0,0 +1,62 @@
+@if ($kendo-enable-color-system) {
+    $kendo-color-primary: k-color( primary );
+    $kendo-color-primary-contrast: k-color( on-primary );
+    $kendo-color-secondary: k-color( secondary );
+    $kendo-color-tertiary: k-color( tertiary );
+    $kendo-color-info: k-color( info );
+    $kendo-color-success: k-color( success );
+    $kendo-color-warning: k-color( warning );
+    $kendo-color-error: k-color( error );
+    $kendo-color-dark: k-color( dark );
+    $kendo-color-light: k-color( light );
+    $kendo-color-inverse: $kendo-color-dark;
+    $kendo-body-bg: k-color( app-surface );
+    $kendo-body-text: k-color( on-app-surface );
+    $kendo-subtle-text: k-color( subtle );
+    $kendo-app-bg: k-color( surface );
+    $kendo-app-text: $kendo-body-text;
+    $kendo-app-border: k-color( border );
+    $kendo-link-text: $kendo-color-primary;
+    $kendo-link-hover-text: k-color( primary-hover );
+    $kendo-component-bg: $kendo-body-bg;
+    $kendo-component-text: $kendo-body-text;
+    $kendo-component-border: $kendo-app-border;
+    $kendo-base-bg: k-color( surface );
+    $kendo-base-text: $kendo-body-text;
+    $kendo-base-border: $kendo-app-border;
+    $kendo-base-gradient: null;
+    $kendo-hover-bg: k-color( base-hover );
+    $kendo-hover-text: $kendo-base-text;
+    $kendo-hover-border: $kendo-base-border;
+    $kendo-hover-gradient: null;
+    $kendo-selected-bg: $kendo-color-primary;
+    $kendo-selected-text: $kendo-color-primary-contrast;
+    $kendo-selected-border: $kendo-base-border;
+    $kendo-selected-gradient: $kendo-base-gradient;
+    $kendo-selected-hover-bg: k-color( primary-hover );
+    $kendo-selected-hover-text: $kendo-selected-text;
+    $kendo-selected-hover-border: $kendo-base-border;
+    $kendo-selected-hover-gradient: $kendo-base-gradient;
+    $kendo-disabled-text: k-color( on-app-surface );
+    $kendo-component-header-bg: $kendo-base-bg;
+    $kendo-component-header-text: $kendo-base-text;
+    $kendo-component-header-border: $kendo-base-border;
+    $kendo-component-header-gradient: null;
+    $kendo-invalid-bg: null;
+    $kendo-invalid-text: $kendo-color-error;
+    $kendo-invalid-border: $kendo-color-error;
+    $kendo-invalid-shadow: null;
+
+    $kendo-theme-colors: (
+        "primary": $kendo-color-primary,
+        "secondary": $kendo-color-secondary,
+        "tertiary": $kendo-color-tertiary,
+        "info": $kendo-color-info,
+        "success": $kendo-color-success,
+        "warning": $kendo-color-warning,
+        "error": $kendo-color-error,
+        "dark": $kendo-color-dark,
+        "light": $kendo-color-light,
+        "inverse": $kendo-color-inverse,
+    );
+}