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

package/scss/functions/_color.import.scss

@@ -1,3 +1,11 @@
+@use "sass:math";
+@use "sass:list";
+@use "sass:meta";
+@use "../_variables.scss" as *;
+
+$kendo-light-color-level-step: 8% !default;
+$kendo-dark-color-level-step: 16% !default;
+
 /// Returns the alpha channel of a color.
 /// @param {Color} $color - The color to get the alpha channel for.
 /// @return {Number} - The alpha channel of the color.
@@ -166,3 +174,524 @@
 @function k-color-invert( $color ) {
     @return invert( $color );
 }
+
+/// Set a specific jump point for requesting color jumps
+/// @group color-system
+/// @access private
+$kendo-color-level-step: 8% !default;
+
+@function k-color-level( $color, $level: 0, $_is-dark-theme: $kendo-is-dark-theme ) {
+    $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
+    $_color-level-step: if( $_dark-theme, $kendo-dark-color-level-step, $kendo-light-color-level-step );
+
+    @if ( $level == 0 ) or ( $level == 0% ) {
+        @return $color;
+    }
+
+    $base: if( $level < 0, #ffffff, #000000 );
+    $level: math.abs( $level );
+
+
+    @if ( math.unit($level) == "%" ) {
+        @return k-color-mix( $base, $color, $level );
+    }
+
+    @return k-color-mix( $base, $color, math.max( 0%, math.min( 100%, $level * $_color-level-step ) ) );
+}
+
+/// Makes a color lighter by mixing it with white
+/// @param {Color} $color - The color to lighten
+/// @param {Number} $level - The amount to lighten the color
+/// @return {Color} - The lightened color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-color-tint( #f00, 1 ); // => #ff1a1a
+@function k-color-tint( $color, $level: 1 ) {
+    @return k-color-level( $color, -$level );
+}
+
+/// Makes a color darker by mixing it with black
+/// @param {Color} $color - The color to darken
+/// @param {Number} $level - The amount to darken the color
+/// @return {Color} - The darkened color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-color-shade( #f00, 1 ); // => #e60000
+@function k-color-shade( $color, $level: 1 ) {
+    @return k-color-level( $color, $level );
+}
+
+/// Shades the color in light themes and tints it in dark themes
+/// @param {Color} $color - The color to shade or tint
+/// @param {Number} $level - The amount to shade or tint the color
+/// @return {Color} - The shaded or tinted color
+///
+/// @group color-system
+@function k-try-shade( $color, $level: 1, $_is-dark-theme: $kendo-is-dark-theme ) {
+    $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
+
+    @if $_dark-theme {
+        @return k-color-tint( $color, $level );
+    }
+
+    @return k-color-shade( $color, $level );
+}
+
+/// Tints the color in light themes and shades it in dark themes
+/// @param {Color} $color - The color to tint or shade
+/// @param {Number} $level - The amount to tint or shade the color
+/// @return {Color} - The tinted or shaded color
+///
+/// @group color-system
+@function k-try-tint( $color, $level: 1, $_is-dark-theme: $kendo-is-dark-theme ) {
+    $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
+
+    @if $_dark-theme {
+        @return k-color-shade( $color, $level );
+    }
+
+    @return k-color-tint( $color, $level );
+}
+
+/// Darkens the color in light themes and lightens it in dark themes
+/// @param {Color} $color - The color to darken or lighten
+/// @param {Number} $level - The amount to darken or lighten the color
+/// @return {Color} - The darkened or lightened color
+///
+/// @group color-system
+@function k-try-darken( $color, $amount, $_is-dark-theme: $kendo-is-dark-theme ) {
+    $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
+
+    @if $_dark-theme {
+        @return k-color-lighten( $color, $amount );
+    }
+    @return k-color-darken( $color, $amount );
+}
+
+/// Lightens the color in light themes and darkens it in dark themes
+/// @param {Color} $color - The color to lighten or darken
+/// @param {Number} $level - The amount to lighten or darken the color
+/// @return {Color} - The lightened or darkened color
+///
+/// @group color-system
+@function k-try-lighten( $color, $amount, $_is-dark-theme: $kendo-is-dark-theme ) {
+    $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
+
+    @if $_dark-theme {
+        @return k-color-darken( $color, $amount );
+    }
+    @return k-color-lighten( $color, $amount );
+}
+
+/// Converts a color with alpha to solid color mixed with a background color
+/// @param {Color} $color - The color to convert
+/// @param {Color} $bg - The background color
+/// @return {Color} - The converted color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-rgba-to-mix( rgba( #f00, 0.5 ), #fff ); // => #ff8080
+@function k-rgba-to-mix( $color, $bg ) {
+    $percent: k-color-alpha( $color ) * 100%;
+
+    @return k-color-mix( rgba( $color, 1 ), $bg, $percent );
+}
+
+// TODO: Remove this function or rethink the logic
+@function k-true-mix( $color1, $color2, $weight: 50% ) {
+    @return k-color-mix( rgba( $color1, 1 ), rgba( $color2, 1 ), $weight );
+}
+
+// Adapted from https://gist.github.com/sgomes/ccc72f71137fe29039c92c0a9fe9b657
+// Adapted from https://github.com/twbs/bootstrap/commit/03908ea37a55eaa44c12ce5694dddc1630c980b3
+
+//  Precomputed linear color channel values, for use in contrast calculations.
+//  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+//  Algorithm, for c in 0 to 255:
+//  f(c) {
+//    c = c / 255;
+//    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+//  }
+//  This lookup table is needed since there is no `pow` in SASS.
+// stylelint-disable number-max-precision
+$_linear-channel-values: (
+    0
+    .0003035269835488375
+    .000607053967097675
+    .0009105809506465125
+    .00121410793419535
+    .0015176349177441874
+    .001821161901293025
+    .0021246888848418626
+    .0024282158683907
+    .0027317428519395373
+    .003035269835488375
+    .003346535763899161
+    .003676507324047436
+    .004024717018496307
+    .004391442037410293
+    .004776953480693729
+    .005181516702338386
+    .005605391624202723
+    .006048833022857054
+    .006512090792594475
+    .006995410187265387
+    .007499032043226175
+    .008023192985384994
+    .008568125618069307
+    .009134058702220787
+    .00972121732023785
+    .010329823029626936
+    .010960094006488246
+    .011612245179743885
+    .012286488356915872
+    .012983032342173012
+    .013702083047289686
+    .014443843596092545
+    .01520851442291271
+    .01599629336550963
+    .016807375752887384
+    .017641954488384078
+    .018500220128379697
+    .019382360956935723
+    .0202885630566524
+    .021219010376003555
+    .022173884793387385
+    .02315336617811041
+    .024157632448504756
+    .02518685962736163
+    .026241221894849898
+    .027320891639074894
+    .028426039504420793
+    .0295568344378088
+    .030713443732993635
+    .03189603307301153
+    .033104766570885055
+    .03433980680868217
+    .03560131487502034
+    .03688945040110004
+    .0382043715953465
+    .03954623527673284
+    .04091519690685319
+    .042311410620809675
+    .043735029256973465
+    .04518620438567554
+    .046665086336880095
+    .04817182422688942
+    .04970656598412723
+    .05126945837404324
+    .052860647023180246
+    .05448027644244237
+    .05612849004960009
+    .05780543019106723
+    .0595112381629812
+    .06124605423161761
+    .06301001765316767
+    .06480326669290577
+    .06662593864377289
+    .06847816984440017
+    .07036009569659588
+    .07227185068231748
+    .07421356838014963
+    .07618538148130785
+    .07818742180518633
+    .08021982031446832
+    .0822827071298148
+    .08437621154414882
+    .08650046203654976
+    .08865558628577294
+    .09084171118340768
+    .09305896284668745
+    .0953074666309647
+    .09758734714186246
+    .09989872824711389
+    .10224173308810132
+    .10461648409110419
+    .10702310297826761
+    .10946171077829933
+    .1119324278369056
+    .11443537382697373
+    .11697066775851084
+    .11953842798834562
+    .12213877222960187
+    .12477181756095049
+    .12743768043564743
+    .1301364766903643
+    .13286832155381798
+    .13563332965520566
+    .13843161503245183
+    .14126329114027164
+    .14412847085805777
+    .14702726649759498
+    .14995978981060856
+    .15292615199615017
+    .1559264637078274
+    .1589608350608804
+    .162029375639111
+    .1651321945016676
+    .16826940018969075
+    .1714411007328226
+    .17464740365558504
+    .17788841598362912
+    .18116424424986022
+    .184474994500441
+    .18782077230067787
+    .19120168274079138
+    .1946178304415758
+    .19806931955994886
+    .20155625379439707
+    .20507873639031693
+    .20863687014525575
+    .21223075741405523
+    .21586050011389926
+    .2195261997292692
+    .2232279573168085
+    .22696587351009836
+    .23074004852434915
+    .23455058216100522
+    .238397573812271
+    .24228112246555486
+    .24620132670783548
+    .25015828472995344
+    .25415209433082675
+    .2581828529215958
+    .26225065752969623
+    .26635560480286247
+    .2704977910130658
+    .27467731206038465
+    .2788942634768104
+    .2831487404299921
+    .2874408377269175
+    .29177064981753587
+    .2961382707983211
+    .3005437944157765
+    .3049873140698863
+    .30946892281750854
+    .31398871337571754
+    .31854677812509186
+    .32314320911295075
+    .3277780980565422
+    .33245153634617935
+    .33716361504833037
+    .3419144249086609
+    .3467040563550296
+    .35153259950043936
+    .3564001441459435
+    .3613067797835095
+    .3662525955988395
+    .3712376804741491
+    .3762621229909065
+    .38132601143253014
+    .386429433787049
+    .39157247774972326
+    .39675523072562685
+    .4019777798321958
+    .4072402119017367
+    .41254261348390375
+    .4178850708481375
+    .4232676699860717
+    .4286904966139066
+    .43415363617474895
+    .4396571738409188
+    .44520119451622786
+    .45078578283822346
+    .45641102318040466
+    .4620769996544071
+    .467783796112159
+    .47353149614800955
+    .4793201831008268
+    .4851499400560704
+    .4910208498478356
+    .4969329950608704
+    .5028864580325687
+    .5088813208549338
+    .5149176653765214
+    .5209955732043543
+    .5271151257058131
+    .5332764040105052
+    .5394794890121072
+    .5457244613701866
+    .5520114015120001
+    .5583403896342679
+    .5647115057049292
+    .5711248294648731
+    .5775804404296506
+    .5840784178911641
+    .5906188409193369
+    .5972017883637634
+    .6038273388553378
+    .6104955708078648
+    .6172065624196511
+    .6239603916750761
+    .6307571363461468
+    .6375968739940326
+    .6444796819705821
+    .6514056374198242
+    .6583748172794485
+    .665387298282272
+    .6724431569576875
+    .6795424696330938
+    .6866853124353135
+    .6938717612919899
+    .7011018919329731
+    .7083757798916868
+    .7156935005064807
+    .7230551289219693
+    .7304607400903537
+    .7379104087727308
+    .7454042095403874
+    .7529422167760779
+    .7605245046752924
+    .768151147247507
+    .7758222183174236
+    .7835377915261935
+    .7912979403326302
+    .799102738014409
+    .8069522576692516
+    .8148465722161012
+    .8227857543962835
+    .8307698767746546
+    .83879901174074
+    .846873231509858
+    .8549926081242338
+    .8631572134541023
+    .8713671191987972
+    .8796223968878317
+    .8879231178819663
+    .8962693533742664
+    .9046611743911496
+    .9130986517934192
+    .9215818562772946
+    .9301108583754237
+    .938685728457888
+    .9473065367331999
+    .9559733532492861
+    .9646862478944651
+    .9734452903984125
+    .9822505503331171
+    .9911020971138298
+    1
+);
+// stylelint-enable number-max-precision
+
+
+/// @link https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+/// Default dark color for WCAG 2.0.
+/// @type Color
+/// @group accessibility
+$wcag-dark: black !default;
+/// Default light color for WCAG 2.0.
+/// @type Color
+/// @group accessibility
+$wcag-light: white !default;
+
+/// Calculate the relative luminance for a color.
+/// @param {Color} $color - The color to calculate the relative luminance for.
+/// @return {Number} - The relative luminance for the color.
+///
+/// @group accessibility
+///
+/// @link https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function k-color-luminance( $color ) {
+    $red: list.nth( $_linear-channel-values, k-color-red( $color ) + 1 );
+    $green: list.nth( $_linear-channel-values, k-color-green( $color ) + 1 );
+    $blue: list.nth( $_linear-channel-values, k-color-blue( $color ) + 1 );
+
+    @return .2126 * $red + .7152 * $green + .0722 * $blue;
+}
+
+/// Calculates contrast ratio between two colors
+/// @param {Color} $background - The background color
+/// @param {Color} $foreground - The foreground color
+/// @return {Number} - The contrast ratio between the two colors
+///
+/// @group accessibility
+///
+/// @link https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function k-color-contrast-ratio( $background, $foreground ) {
+    $backLum: k-color-luminance( $background ) + .05;
+    $foreLum: k-color-luminance( $foreground ) + .05;
+
+    @return math.div( math.max( $backLum, $foreLum ), math.min( $backLum, $foreLum ) );
+}
+
+/// Checks if a color is dark
+/// @param {Color} $color - The color to check
+/// @return {Boolean} - True if the color is dark, false otherwise
+///
+/// @group accessibility
+@function k-is-dark( $color ) {
+    @return if( k-color-luminance( $color ) < .5, true, false );
+}
+
+/// Checks if a color is light
+/// @param {Color} $color - The color to check
+/// @return {Boolean} - True if the color is light, false otherwise
+///
+/// @group accessibility
+@function k-is-light( $color ) {
+    @return if( k-color-luminance( $color ) < .5, false, true );
+}
+
+
+/// Calculates the contrast ratio between a background color and a foreground color.
+/// If the contrast ratio is not high enough, it will return the color with the highest contrast ratio.
+/// @param {Color} $background - The background color
+/// @param {Color} $dark - The dark color to use as a fallback
+/// @param {Color} $light - The light color to use as a fallback
+/// @param {Number} $min-ratio - The minimum contrast ratio to reach
+/// @return {Color} - The color with the highest contrast ratio
+///
+/// @group accessibility
+@function k-contrast-color( $background, $dark: $wcag-dark, $light: $wcag-light, $min-ratio: $wcag-min-contrast-ratio ) {
+    $foregrounds: $light, $dark, #ffffff, #000000;
+    $max-ratio: 0;
+    $max-ratio-color: null;
+
+    @each $color in $foregrounds {
+        $contrast-ratio: k-color-contrast-ratio( $background, $color );
+
+        @if ( $contrast-ratio > $min-ratio ) {
+            @return $color;
+        } @else if ( $contrast-ratio > $max-ratio ) {
+            $max-ratio: $contrast-ratio;
+            $max-ratio-color: $color;
+        }
+    }
+
+    @warn "Found no color leading to #{$min-ratio}:1 contrast ratio against #{$background}...";
+
+    @return $max-ratio-color;
+}
+
+
+// Legacy functions
+@function k-yiq-luma-information($color) {
+    $r: k-color-red($color);
+    $g: k-color-green($color);
+    $b: k-color-blue($color);
+
+    $yiq: math.div( (($r * 299) + ($g * 587) + ($b * 114)), 1000 );
+
+    @return $yiq;
+}
+@function k-contrast-yiq($color, $dark: $yiq-dark, $light: $yiq-light) {
+    $yiq: k-yiq-luma-information($color);
+    $out: if($yiq >= $yiq-threshold, $dark, $light);
+    // @debug yiq;
+    @return $out;
+}
+@function k-contrast-legacy($color, $dark: $wcag-dark, $light: $wcag-light) {
+    $luma: k-color-luminance($color);
+    $out: if($luma < .5, $light, $dark);
+    // @debug $luma;
+    @return $out;
+}

package/scss/functions/_list.import.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 /// Returns a copy of `$list` with `$val` appended to the end.
 /// @param {List} $list - The list to process.
 /// @param {Any} $val - The value to append to `$list`.
@@ -7,7 +9,7 @@
 /// @example scss - Usage
 ///   @debug k-list-append( ( "foo", "bar" ), "baz" ); // => "foo, bar, baz"
 @function k-list-append( $list, $val, $separator: auto ) {
-    @return append( $list, $val, $separator );
+    @return list.append( $list, $val, $separator );
 }
 
 /// Checks whether `$list` contains `$value`.
@@ -30,7 +32,7 @@
 /// @example scss - Usage
 ///   @debug k-list-index( ( "foo", "bar" ), "foo" ); // => 1
 @function k-list-index( $list, $value ) {
-    @return index( $list, $value );
+    @return list.index( $list, $value );
 }
 
 /// Returns whether `$list` is bracketed.
@@ -41,7 +43,7 @@
 ///   @debug k-list-is-bracketed( ( "foo", "bar" ) ); // => false
 ///   @debug k-list-is-bracketed( [ "foo", "bar" ] ); // => true
 @function k-list-is-bracketed( $list ) {
-    @return is-bracketed( $list );
+    @return list.is-bracketed( $list );
 }
 
 /// Joins two lists together.
@@ -55,7 +57,7 @@
 ///   @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ) ); // => "foo, bar, baz, qux"
 ///   @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ), " " ); // => "foo bar baz qux"
 @function k-list-join( $list1, $list2, $separator: auto, $bracketed: auto ) {
-    @return join( $list1, $list2, $separator, $bracketed );
+    @return list.join( $list1, $list2, $separator, $bracketed );
 }
 
 /// Returns the length of `$list`.
@@ -65,7 +67,7 @@
 /// @example scss - Usage
 ///   @debug k-list-length( ( "foo", "bar" ) ); // => 2
 @function k-list-length( $list ) {
-    @return length( $list );
+    @return list.length( $list );
 }
 
 /// Returns the nth item in `$list`.
@@ -76,7 +78,7 @@
 /// @example scss - Usage
 ///   @debug k-list-nth( ( "foo", "bar" ), 1 ); // => "foo"
 @function k-list-nth( $list, $n ) {
-    @return nth( $list, $n );
+    @return list.nth( $list, $n );
 }
 
 /// Reverse the order of items in `$list`.
@@ -109,7 +111,7 @@
 /// @example scss - Usage
 ///   @debug k-list-separator( ( "foo", "bar" ) ); // => ","
 @function k-list-separator( $list ) {
-    @return list-separator( $list );
+    @return list.list-separator( $list );
 }
 
 /// Returns a copy of `$list` with `$val` inserted at `$n`.
@@ -121,7 +123,7 @@
 /// @example scss - Usage
 ///   @debug k-list-set-nth( ( "foo", "bar" ), 1, "baz" ); // => "baz, bar"
 @function k-list-set-nth( $list, $n, $value ) {
-    @return set-nth( $list, $n, $value );
+    @return list.set-nth( $list, $n, $value );
 }
 
 /// Combines two lists into a single list of two-item lists.
@@ -132,5 +134,5 @@
 /// @example scss - Usage
 ///   @debug k-list-zip( ( "foo", "bar" ), ( "baz", "qux" ) ); // => ((foo, baz), (bar, qux))
 @function k-list-zip( $lists... ) {
-    @return zip( $lists... );
+    @return list.zip( $lists... );
 }

package/scss/functions/_map.import.scss

@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "sass:map";
+
 /// Returns the value at `$key` in `$map`.
 /// @param {Map} $map - The map to get the value from.
 /// @param {Any} $key - The key to get the value for.
@@ -6,7 +9,7 @@
 ///   @debug k-map-get( ( "foo": "bar" ), "foo" ); // => "bar"
 @function k-map-get( $map, $keys... ) {
     @each $key in $keys {
-        $map: map-get( $map, $key ); // stylelint-disable-line
+        $map: map.get( $map, $key ); // stylelint-disable-line
     }
     @return $map;
 }
@@ -20,7 +23,7 @@
 ///   @debug k-map-has( ( "foo": "bar" ), "foo" ); // => true
 ///   @debug k-map-has( ( "foo": "bar" ), "bar" ); // => false
 @function k-map-has-key( $map, $key ) {
-    @return map-has-key( $map, $key );
+    @return map.has-key( $map, $key );
 }
 
 /// Returns a comma separated list of the keys in `$map`.
@@ -30,7 +33,7 @@
 /// @example scss - Usage
 ///   @debug k-map-keys( ( "foo": "bar", "baz": "qux" ) ); // => "foo, baz"
 @function k-map-keys( $map ) {
-    @return map-keys( $map );
+    @return map.keys( $map );
 }
 
 /// Returns a map with the keys and values from `$map` and `$args`.
@@ -42,7 +45,7 @@
 ///   @debug k-map-merge( ( "foo": "bar" ), ( "baz": "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
 @function k-map-merge( $map, $args... ) {
     @each $arg in $args {
-        $map: map-merge( $map, $arg ); // stylelint-disable-line
+        $map: map.merge( $map, $arg ); // stylelint-disable-line
     }
     @return $map;
 }
@@ -58,9 +61,9 @@
 
     @each $map in $maps {
       @each $key, $val in $map {
-        @if (k-meta-type-of($val) == 'map') {
+        @if (meta.type-of($val) == 'map') {
           $current: k-map-get($merged, $key);
-          @if (k-meta-type-of($current) == 'map') {
+          @if (meta.type-of($current) == 'map') {
             $val: k-map-deep-merge($current, $val);
             $map: k-map-merge(
               $map,
@@ -85,7 +88,7 @@
 /// @example scss - Usage
 ///   @debug k-map-remove( ( "foo": "bar", "baz": "qux" ), "foo" ); // => ( "baz": "qux" )
 @function k-map-remove( $map, $keys... ) {
-    @return map-remove( $map, $keys... );
+    @return map.remove( $map, $keys... );
 }
 
 /// Sets a single key and value in `$map`.
@@ -107,7 +110,7 @@
 /// @example scss - Usage
 ///   @debug k-map-values( ( "foo": "bar", "baz": "qux" ) ); // => "bar, qux"
 @function k-map-values( $map ) {
-    @return map-values( $map );
+    @return map.values( $map );
 }
 
 /// Returns negative values of a number or numbers in a list.
@@ -119,13 +122,13 @@
 @function k-map-negate($map) {
     $_map-neg: ();
 
-    @if( k-meta-type-of($map) != map ) {
-        @error "expected type of #{$map} is map, was #{k-meta-type-of($map)}";
+    @if( meta.type-of($map) != map ) {
+        @error "expected type of #{$map} is map, was #{meta.type-of($map)}";
     };
     @each $key, $value in $map {
         $_key-neg: "-" + $key;
 
-        @if( k-meta-type-of($value) == number and $value != 0) {
+        @if( meta.type-of($value) == number and $value != 0 and $_key-neg != "-0" ) {
             $_map-neg: k-map-set($_map-neg, $_key-neg, -1 * $value );
         }
     }