@progress/kendo-theme-core 9.1.1-dev.2 → 10.0.0-dev.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "9.1.1-dev.2",
+  "version": "10.0.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -32,7 +32,6 @@
     "build": "sass-build",
     "watch": "node ../../scripts/watch-theme",
     "sass": "sass-build",
-    "sass:flat": "gulp dist:flat && sass-build -c sass-flat.config.js",
     "docs": "node ../../scripts/sassdoc.js",
     "predocs": "npm run resolve-variables",
     "resolve-variables": "node ../../scripts/resolve-variables.js",
@@ -44,5 +43,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "ce826b0f553eb3a49efdef386c2f488ca4fbc8d1"
+  "gitHead": "a7d870863610924d89ac6d01cdc1fb97a26da5e9"
 }

package/scss/_variables.scss

@@ -1,11 +1,13 @@
-@import "./functions/index.import.scss";
-
 // Options
+$kendo-enable-color-system: true !default;
+$kendo-is-dark-theme: false !default;
 $kendo-enable-shadows: true !default;
 $kendo-enable-rounded: true !default;
 $kendo-enable-gradients: true !default;
 $kendo-enable-transitions: true !default;
-$kendo-nested-disabled: false !default;
+$kendo-nested-disabled: true !default;
+$kendo-enable-focus-contrast: false !default;
+$wcag-min-contrast-ratio: 4.5 !default;
 
 // Equilateral triangle variables
 // stylelint-disable number-max-precision

package/scss/all.scss

@@ -1,3 +1,4 @@
-@import "./index.import.scss";
+@forward "./index.import.scss";
+@use "./index.import.scss" as *;
 
-@include kendo-core--styles();
+@include core-styles();

package/scss/border-radii/index.import.scss

@@ -1,27 +1,30 @@
+@use "sass:map";
+@use "../spacing/index.import.scss" as *;
+
 /// The none border radius used across the Components.
 /// @group radii
-$kendo-border-radius-none: k-map-get($kendo-spacing, 0) !default;
+$kendo-border-radius-none: map.get($kendo-spacing, 0) !default;
 /// The extra small border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xs: k-map-get($kendo-spacing, 1px) !default;
+$kendo-border-radius-xs: map.get($kendo-spacing, 1px) !default;
 /// The small border radius used across the Components.
 /// @group radii
-$kendo-border-radius-sm: k-map-get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-sm: map.get($kendo-spacing, 0.5) !default;
 /// The medium border radius used across the Components.
 /// @group radii
-$kendo-border-radius-md: k-map-get($kendo-spacing, 1) !default;
+$kendo-border-radius-md: map.get($kendo-spacing, 1) !default;
 /// The large border radius used across the Components.
 /// @group radii
-$kendo-border-radius-lg: k-map-get($kendo-spacing, 1.5) !default;
+$kendo-border-radius-lg: map.get($kendo-spacing, 1.5) !default;
 /// The extra large border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xl: k-map-get($kendo-spacing, 2) !default;
+$kendo-border-radius-xl: map.get($kendo-spacing, 2) !default;
 /// The third largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxl: k-map-get($kendo-spacing, 3) !default;
+$kendo-border-radius-xxl: map.get($kendo-spacing, 3) !default;
 /// The second largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxxl: k-map-get($kendo-spacing, 4) !default;
+$kendo-border-radius-xxxl: map.get($kendo-spacing, 4) !default;
 /// The largest border radius used across the Components.
 /// @group radii
 $kendo-border-radius-full: 9999px !default;
@@ -44,11 +47,11 @@ $kendo-border-radii: $_default-border-radii !default;
 
 /// The global radii Map.
 /// @group radii
-$kendo-border-radii: k-map-merge($_default-border-radii, $kendo-border-radii);
+$kendo-border-radii: map.merge($_default-border-radii, $kendo-border-radii);
 
 
 @function k-border-radius($key) {
-    $_border-radius: k-map-get($kendo-border-radii, $key);
+    $_border-radius: map.get($kendo-border-radii, $key);
     @return var(--kendo-border-radius-#{$key}, $_border-radius);
 }
 

package/scss/color-system/_functions.import.scss

@@ -1,28 +1,37 @@
-@import "./_palettes.scss";
+@use "sass:map";
+@use "sass:list";
+@use "sass:string";
+@use "sass:meta";
+@use "../functions/_string.import.scss" as *;
+@use "../functions/_map.import.scss" as *;
+@use "../functions/_color.import.scss" as *;
+@use "./_palettes.scss" as *;
+@use "./_swatch.scss" as *;
+@use "../_variables.scss" as *;
 
 @function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
     $result: ();
 
     @each $ui-state, $indices in $matrix {
         $prefix: if( $ui-state == DEFAULT, "", "#{$ui-state}-" );
-        $indices-count: k-list-length( $indices );
+        $indices-count: list.length( $indices );
 
-        $bg-prop: k-list-nth( $indices, 1 );
-        $text-prop: k-list-nth( $indices, 2 );
-        $border-prop: k-list-nth( $indices, 3 );
-        $gradient-prop: if( $indices-count > 3, k-list-nth( $indices, 4 ), null );
-        $shadow-prop: if( $indices-count > 4, k-list-nth( $indices, 5 ), null );
-        $outline-prop: if( $indices-count > 5, k-list-nth( $indices, 6 ), null );
+        $bg-prop: list.nth( $indices, 1 );
+        $text-prop: list.nth( $indices, 2 );
+        $border-prop: list.nth( $indices, 3 );
+        $gradient-prop: if( $indices-count > 3, list.nth( $indices, 4 ), null );
+        $shadow-prop: if( $indices-count > 4, list.nth( $indices, 5 ), null );
+        $outline-prop: if( $indices-count > 5, list.nth( $indices, 6 ), null );
 
         // Take value from the palette only if it is a number
-        $bg: if( k-meta-type-of( $bg-prop ) == number, k-get-theme-color( $src-palette-name, $bg-prop ), $bg-prop );
-        $text: if( k-meta-type-of( $text-prop ) == number, k-get-theme-color( $src-palette-name, $text-prop ), $text-prop );
-        $border: if( k-meta-type-of( $border-prop ) == number, k-get-theme-color( $src-palette-name, $border-prop ), $border-prop );
+        $bg: if( meta.type-of( $bg-prop ) == number, k-get-theme-color( $src-palette-name, $bg-prop ), $bg-prop );
+        $text: if( meta.type-of( $text-prop ) == number, k-get-theme-color( $src-palette-name, $text-prop ), $text-prop );
+        $border: if( meta.type-of( $border-prop ) == number, k-get-theme-color( $src-palette-name, $border-prop ), $border-prop );
         $gradient: $gradient-prop;
         $shadow: $shadow-prop;
         $outline: $outline-prop;
 
-        $result: k-map-merge($result, (
+        $result: map.merge($result, (
             #{$prefix}bg: $bg,
             #{$prefix}text: $text,
             #{$prefix}border: $border,
@@ -48,25 +57,25 @@
     // @debug $palette-matrix;
 
     @each $variant, $definition in $theme-matrix {
-        $tc-index: k-string-index( $variant, "THEME_COLOR" );
-        $src-palette-name: k-map-get( $definition, PALETTE );
-        $matrix: k-map-remove( $definition, PALETTE );
+        $tc-index: string.index( $variant, "THEME_COLOR" );
+        $src-palette-name: map.get( $definition, PALETTE );
+        $matrix: map.remove( $definition, PALETTE );
 
         @if ($tc-index == null ) { // stylelint-disable-line
             $tmp-result: k-generate-theme-variant( $variant, $matrix, $src-palette-name );
-            $result: k-map-merge( $result, $tmp-result);
+            $result: map.merge( $result, $tmp-result);
         } @else {
             @each $color, $palette in $palette-matrix {
                 $variant-name: k-string-replace( $variant, THEME_COLOR, $color);
-                $palette-name: k-string-unquote($src-palette-name + "");
+                $palette-name: string.unquote($src-palette-name + "");
 
                 @if ($palette-name == THEME_COLOR) {
                     $palette-name: k-string-replace( $palette-name, THEME_COLOR, $color );
-                    $palette-name: k-map-get( $palette-matrix, $palette-name );
+                    $palette-name: map.get( $palette-matrix, $palette-name );
                 }
 
                 $tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
-                $result: k-map-merge( $result, $tmp-result );
+                $result: map.merge( $result, $tmp-result );
             }
         }
     }
@@ -76,15 +85,15 @@
 
 
 @function k-get-theme-palette( $name ) {
-    @return k-map-get( $kendo-palettes, $name );
+    @return map.get( $kendo-palettes, $name );
 }
 
 @function k-get-theme-color( $palette, $hue ) {
-    @if ( k-meta-type-of( $palette ) == "map" ) {
-        @return k-map-get( $palette, $hue );
+    @if ( meta.type-of( $palette ) == "map" ) {
+        @return map.get( $palette, $hue );
     }
 
-    @return k-map-get( k-get-theme-palette( $palette ), $hue );
+    @return map.get( k-get-theme-palette( $palette ), $hue );
 }
 
 @function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
@@ -113,7 +122,7 @@
         on-color-disabled: color-mix(in srgb, k-color( on-#{$color} ) 46%, transparent)
     );
 
-    @return if( k-map-has-key( $map, $name ), k-map-get( $map, $name ), $name );
+    @return if( map.has-key( $map, $name ), map.get( $map, $name ), $name );
 };
 
 @function k-generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
@@ -122,14 +131,14 @@
     @each $ui-state, $indices in $mapping {
         $prefix: if( $ui-state == normal, '', '#{$ui-state}-' );
 
-        $bg-prop: k-list-nth($indices, 1);
-        $text-prop: k-list-nth($indices, 2);
-        $border-prop: k-list-nth($indices, 3);
+        $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($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 ));
+        $bg: if($kendo-enable-color-system, k-get-swatch-color( $bg-prop, $source-palette-name ), if( 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( 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( meta.type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop ));
 
 
         $temp: k-map-deep-merge( $temp, (
@@ -139,9 +148,9 @@
         ));
 
         // Add outline if provided in the map
-        @if ( k-list-length($indices) > 3 ) {
-            $outline-prop: k-list-nth($indices, 4);
-            $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 ));
+        @if ( list.length($indices) > 3 ) {
+            $outline-prop: list.nth($indices, 4);
+            $outline: if($kendo-enable-color-system, k-get-swatch-color( $outline-prop, $source-palette-name ), if( 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
@@ -179,3 +188,143 @@
         @return null;
     }
 }
+
+/// Generates all color variations of a given main color
+/// @param {String} $name - The name of the main color
+/// @param {Color} $color - The color value to be assigned to the main color
+/// @param {String} $theme - The theme the colors will be generated for
+/// @return {Map} - A map with the generated keys and values
+///
+/// @group color-system
+@function k-generate-color-variations( $name, $color, $theme: null ) {
+    $result: ();
+
+    // DataViz
+    @if (
+            $name == 'series-a' or
+            $name == 'series-b' or
+            $name == 'series-c' or
+            $name == 'series-d' or
+            $name == 'series-e' or
+            $name == 'series-f'
+        ) {
+        $_variations: (
+            #{$name}: $color,
+            #{$name}-bold: k-color-mix(black, $color, 25%),
+            #{$name}-bolder: k-color-mix(black, $color, 50%),
+            #{$name}-subtle: k-color-mix(white, $color, 25%),
+            #{$name}-subtler: k-color-mix(white, $color, 50%),
+        );
+
+        $result: map.merge($result, $_variations);
+    } @else {
+        // Default
+        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), 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: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: map.merge($result, $_variations);
+        }
+
+        // Bootstrap
+        @if ( $theme == 'bootstrap' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-color-darken( $color, 7.5% ),
+                #{$name}-active: k-color-darken( $color, 10% ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: map.merge($result, $_variations);
+        }
+
+        // Material
+        @if ( $theme == 'material' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), 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: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),
+            );
+
+            $result: map.merge($result, $_variations);
+        }
+
+        // Fluent
+        @if ( $theme == 'fluent' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), 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: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: map.merge($result, $_variations);
+        }
+
+        // Classic
+        @if ( $theme == 'classic' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-try-shade( $color, 1 ),
+                #{$name}-active: k-try-shade( $color, 2 ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: map.merge($result, $_variations);
+        }
+    }
+
+    @return $result;
+}
+
+/// Takes a color name from the $kendo-colors map as a parameter
+/// and returns a CSS variable with the actual color as a fallback
+/// @param {String} $key - The name of a color/key in the $kendo-colors map
+/// @return {String} - CSS variable with the actual color as a fallback
+///
+/// @group color-system
+@function k-color($key) {
+    $_color: map.get($kendo-colors, $key);
+
+    @if ($_color) {
+        @return var(--kendo-color-#{$key}, $_color);
+    } @else {
+        @error "Color Variable \`#{$key}\` does not exists in the color collection.";
+    }
+}
+

package/scss/color-system/_mixins.import.scss

@@ -1,7 +1,13 @@
+@use "sass:meta";
+
 @mixin k-css-vars($map) {
     @each $group, $values in $map {
-        @each $key, $value in $values {
-            --kendo-#{k-meta-inspect($group)}-#{$key}: #{$value};
+        @if meta.type-of($values) != 'map' {
+            --kendo-text-#{$group}: #{$values};
+        } @else {
+            @each $key, $value in $values {
+                --kendo-#{meta.inspect($group)}-#{$key}: #{$value};
+            }
         }
     }
 }