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

package/scss/checkbox/_variables.scss

@@ -64,7 +64,7 @@ $kendo-checkbox-bg: null !default;
 $kendo-checkbox-text: null !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 ) !default;
+$kendo-checkbox-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .54 ) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
@@ -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-color( $kendo-checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg )) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -117,7 +117,7 @@ $kendo-checkbox-disabled-bg: null !default;
 $kendo-checkbox-disabled-text: null !default;
 /// The border color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-border: k-try-shade( $kendo-component-bg, 4 ) !default;
+$kendo-checkbox-disabled-border: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 4 )) !default;
 
 
 /// The background color of the disabled and checked CheckBox.
@@ -125,7 +125,7 @@ $kendo-checkbox-disabled-border: k-try-shade( $kendo-component-bg, 4 ) !default;
 $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
 /// The text color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-text: k-contrast-color( $kendo-checkbox-disabled-checked-bg ) !default;
+$kendo-checkbox-disabled-checked-text: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-checkbox-disabled-checked-bg )) !default;
 /// The border color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;

package/scss/chip/_theme.scss

@@ -27,56 +27,59 @@
                 &:focus,
                 &.k-focus {
                     @include box-shadow( none );
-                    @include fill( $bg: k-try-tint( $color, 88% ) );
+                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 88% )) );
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    $color: if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
+                    $color: if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text))
                 );
 
                 &:focus,
                 &.k-focus {
                     @include box-shadow( none );
-                    @include fill( $bg: k-try-tint( $color, 65% ) );
+                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $bg: k-try-tint( $color, 80% ),
-                        $color: if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
+                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint( $color, 80% )),
+                        $color: if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text))
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $bg: k-try-tint( $color, 65% ),
-                        $color: if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
+                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )),
+                        $color: if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text))
                     );
                 }
             } @else {
                 @include fill(
-                    $color: k-try-shade( $color, 50% )
+                    $color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 50% ))
                 );
 
                 &:focus,
                 &.k-focus {
                     @include box-shadow( none );
-                    @include fill( $bg: k-try-tint( $color, 65% ) );
+                    @include fill(
+                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )),
+                        $color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 50% ))
+                    );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $bg: k-try-tint( $color, 80% ),
-                        $color: k-try-shade( $color, 50% )
+                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint( $color, 80% )),
+                        $color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 50% ))
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $bg: k-try-tint( $color, 65% ),
-                        $color: k-try-shade( $color, 50% )
+                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )),
+                        $color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 50% ))
                     );
                 }
             }

package/scss/chip/_variables.scss

@@ -92,7 +92,7 @@ $kendo-chip-sizes: (
 
 /// The base background of the Chip.
 /// @group chip
-$kendo-chip-base-bg: if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black) !default;
+$kendo-chip-base-bg: if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black)) !default;
 
 /// The theme colors map for the Chip.
 /// @group chip
@@ -106,7 +106,7 @@ $kendo-chip-theme-colors: (
 
 /// The base background color of the solid Chip.
 /// @group chip
-$kendo-chip-solid-bg: if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% )) !default;
+$kendo-chip-solid-bg: if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% ))) !default;
 /// The base text color of the solid Chip.
 /// @group chip
 $kendo-chip-solid-text: $kendo-button-text !default;
@@ -122,21 +122,21 @@ $kendo-chip-solid-gradient: $kendo-button-gradient !default;
 
 /// The base background color of the focused solid Chip.
 /// @group chip
-$kendo-chip-solid-focus-bg: k-try-tint( $kendo-chip-base-bg, 80% ) !default;
+$kendo-chip-solid-focus-bg: if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 80% )) !default;
 /// The base text color of the focused solid Chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of the hovered solid Chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
+$kendo-chip-solid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 84% )) !default;
 /// The base text color of the hovered solid Chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
 
 /// The base background color of the selected solid Chip.
 /// @group chip
-$kendo-chip-solid-selected-bg: k-try-tint( $kendo-chip-base-bg, 76% ) !default;
+$kendo-chip-solid-selected-bg: if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 76% )) !default;
 /// The base text color of the selected solid Chip.
 /// @group chip
 $kendo-chip-solid-selected-text: null !default;
@@ -156,14 +156,14 @@ $kendo-chip-outline-shadow: null !default;
 
 /// The base background color of the hovered outline Chip.
 /// @group chip
-$kendo-chip-outline-hover-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
+$kendo-chip-outline-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 92% )) !default;
 /// The base text color of the hovered outline Chip.
 /// @group chip
-$kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-outline-hover-bg ) !default;
+$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg )) !default;
 
 /// The base background color of the selected outline Chip.
 /// @group chip
-$kendo-chip-outline-selected-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
+$kendo-chip-outline-selected-bg: if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 84% )) !default;
 /// The base text color of the selected outline Chip.
 /// @group chip
 $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;

package/scss/core/_index.scss

@@ -1,7 +1,7 @@
 $wcag-min-contrast-ratio: 4.5 !default;
 
 // Color system
-@import "./color-system/index.import.scss";
+@import "./color-system/_swatch.scss";
 
 // Elevation
 @import "./elevation/index.import.scss";
@@ -11,6 +11,9 @@ $wcag-min-contrast-ratio: 4.5 !default;
 
 @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/_functions.scss

@@ -0,0 +1,101 @@
+@import "./_palettes-legacy.scss";
+
+@function get-base-palette($name) {
+    @return k-map-get($palettes, $name);
+}
+
+@function get-base-hue($palette, $hue) {
+    @return k-map-get(get-base-palette($palette), $hue);
+}
+
+@function get-base-contrast($palette, $hue) {
+    @return k-map-get(k-map-get(get-base-palette($palette), contrast), $hue);
+}
+
+// For a given hue in a palette, return the contrast color from the map of contrast palettes.
+@function material-contrast($palette, $hue) {
+    @return k-map-get(k-map-get($palette, contrast), $hue);
+}
+
+// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
+// of the Material Design hues.
+@function material-palette($base-palette, $main: 500, $lighter: 300, $darker: 700, $adjust-contrast: true) {
+    @if not(k-meta-type-of($base-palette) == map) {
+        $base-palette: get-base-palette($base-palette);
+    }
+
+    $main-contrast: material-contrast($base-palette, $main);
+
+    @if ($adjust-contrast == true) {
+        @if ($theme-type == dark) and ($main-contrast == $light-primary-text) {
+            $main: 200;
+            $lighter: 100;
+            $darker: 300;
+        }
+
+        @if ($theme-type == light) and ($main-contrast == $dark-primary-text) {
+            $main: 800;
+            $lighter: 700;
+            $darker: 900;
+        }
+    }
+
+    // stylelint-disable-next-line function-comma-newline-after
+    $result: k-map-merge(
+        $base-palette,
+        (
+            main: k-map-get($base-palette, $main),
+            lighter: k-map-get($base-palette, $lighter),
+            darker: k-map-get($base-palette, $darker),
+            main-contrast: material-contrast($base-palette, $main),
+            lighter-contrast: material-contrast($base-palette, $lighter),
+            darker-contrast: material-contrast($base-palette, $darker),
+        )
+    );
+
+    // For each hue in the palette, add a "-contrast" color to the map.
+    @each $hue, $color in $base-palette {
+        // stylelint-disable-next-line function-comma-newline-after
+        $result: k-map-merge(
+            $result,
+            (
+                "#{$hue}-contrast": material-contrast($base-palette, $hue),
+            )
+        );
+    }
+
+    @return $result;
+}
+
+// Gets a color from a theme palette (the output of material-palette).
+// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
+// hues (main, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+@function material-color($palette, $hue: main, $opacity: null) {
+    @if not(k-meta-type-of($palette) == map) {
+        $palette: get-base-palette($palette);
+    }
+
+    // If hueKey is a number between zero and one, then it actually contains an
+    // opacity value, so recall this function with the default hue and that given opacity.
+    @if k-meta-type-of($hue) == number and $hue >= 0 and $hue <= 1 {
+        @return material-color($palette, main, $hue);
+    }
+
+    $color: k-map-get($palette, $hue);
+    $opacity: if($opacity == null, k-color-alpha($color), $opacity);
+
+    @return rgba($color, $opacity);
+}
+
+// Creates a container object for a light theme to be given to individual component theme mixins.
+@function material-theme($kendo-color-primary, $kendo-color-secondary, $theme-type, $warn: material-palette(red)) {
+    $complimentary: if($theme-type == dark, $material-dark-complimentary, $material-light-complimentary);
+    @return k-map-merge(
+        (
+            primary: $kendo-color-primary,
+            secondary: $kendo-color-secondary,
+            warn: $warn,
+        ),
+        $complimentary
+    );
+}