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

package/scss/typography/index.import.scss

@@ -1,4 +1,6 @@
-@import "../functions/index.import.scss";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
 
 /// The base font size across all components.
 /// @group typography
@@ -24,7 +26,7 @@ $kendo-font-size-xl: 1.25rem !default;
 
 /// The base line height across all components.
 /// @group typography
-$kendo-line-height: k-math-div( 20, 14 ) !default;
+$kendo-line-height: math.div( 20, 14 ) !default;
 /// The extra small line height across all components.
 /// @group typography
 $kendo-line-height-xs: 1 !default;
@@ -161,31 +163,31 @@ $kendo-font-sizes: $_default-font-sizes !default;
 
 /// The font sizes map
 /// @group typography
-$kendo-font-sizes: k-map-merge( $_default-font-sizes, $kendo-font-sizes );
+$kendo-font-sizes: map.merge( $_default-font-sizes, $kendo-font-sizes );
 
 $kendo-line-heights: $_default-line-heights !default;
 
 /// The line heights map
 /// @group typography
-$kendo-line-heights: k-map-merge( $_default-line-heights, $kendo-line-heights );
+$kendo-line-heights: map.merge( $_default-line-heights, $kendo-line-heights );
 
 $kendo-font-weights: $_default-font-weights !default;
 
 /// The font weights map
 /// @group typography
-$kendo-font-weights: k-map-merge( $_default-font-weights, $kendo-font-weights );
+$kendo-font-weights: map.merge( $_default-font-weights, $kendo-font-weights );
 
 $kendo-letter-spacings: $_default-letter-spacings !default;
 
 /// The letter spacings map
 /// @group typography
-$kendo-letter-spacings: k-map-merge( $_default-letter-spacings, $kendo-letter-spacings );
+$kendo-letter-spacings: map.merge( $_default-letter-spacings, $kendo-letter-spacings );
 
 $kendo-font-families: $_default-font-families !default;
 
 /// The font families map
 /// @group typography
-$kendo-font-families: k-map-merge( $_default-font-families, $kendo-font-families );
+$kendo-font-families: map.merge( $_default-font-families, $kendo-font-families );
 
 @mixin typography( $font-size: null, $font-family: null, $line-height: null, $font-weight: null, $letter-spacing: null ) {
     font-size: $font-size;
@@ -199,7 +201,7 @@ $kendo-font-families: k-map-merge( $_default-font-families, $kendo-font-families
 @mixin kendo-core--typography--styles() {
     :root {
 
-        --kendo-font-family: #{k-meta-inspect($kendo-font-family)};
+        --kendo-font-family: #{meta.inspect($kendo-font-family)};
         --kendo-font-size: #{$kendo-font-size};
         --kendo-line-height: #{$kendo-line-height};
         --kendo-font-weight: #{$kendo-font-weight};

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

@@ -1,90 +0,0 @@
-$kendo-is-dark-theme: false !default;
-
-// Root styles
-$kendo-body-bg: null !default;
-$kendo-body-text: null !default;
-
-// Component styles
-$kendo-component-bg: null !default;
-$kendo-component-text: null !default;
-$kendo-component-border: null !default;
-
-// States styles
-$kendo-hover-bg: null !default;
-$kendo-hover-text: null !default;
-$kendo-hover-border: null !default;
-
-$kendo-selected-bg: null !default;
-$kendo-selected-text: null !default;
-$kendo-selected-border: null !default;
-
-$kendo-selected-hover-bg: null !default;
-$kendo-selected-hover-text: null !default;
-$kendo-selected-hover-border: null !default;
-
-$kendo-focus-outline: null !default;
-
-$kendo-subtle-text: null !default;
-
-// Link
-$kendo-link-text: null !default;
-$kendo-link-hover-text: null !default;
-
-// Validator
-$kendo-invalid-bg: null !default;
-$kendo-invalid-text: null !default;
-$kendo-invalid-border: null !default;
-$kendo-invalid-shadow: null !default;
-
-// Disabled Styling
-
-/// The background color of disabled items.
-$kendo-disabled-bg: null !default;
-/// The text color of disabled items.
-$kendo-disabled-text: null !default;
-/// The border color of disabled items.
-$kendo-disabled-border: null !default;
-/// The opacity of disabled items.
-$kendo-disabled-opacity: null !default;
-/// The filter of disabled items.
-$kendo-disabled-filter: null !default;
-
-$kendo-disabled-styling: (
-    bg: $kendo-disabled-bg,
-    color: $kendo-disabled-text,
-    border: $kendo-disabled-border,
-    opacity: $kendo-disabled-opacity,
-    filter: $kendo-disabled-filter
-) !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);
-
-        // 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-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
-            }
-        }
-    }
-}

package/scss/functions/_color-contrast.import.scss

@@ -1,393 +0,0 @@
-// 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
-
-/// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
-/// Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
-/// @type Number
-/// @group accessibility
-///
-/// @link https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
-/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
-$wcag-min-contrast-ratio: 7 !default;
-/// 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: k-list-nth( $_linear-channel-values, k-color-red( $color ) + 1 );
-    $green: k-list-nth( $_linear-channel-values, k-color-green( $color ) + 1 );
-    $blue: k-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 k-math-div( k-math-max( $backLum, $foreLum ), k-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: k-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/_color-manipulation.import.scss

@@ -1,134 +0,0 @@
-$kendo-light-color-level-step: 8% !default;
-$kendo-dark-color-level-step: 16% !default;
-
-/// 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 ) {
-    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-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: k-math-abs( $level );
-
-
-    @if ( k-math-unit($level) == "%" ) {
-        @return k-color-mix( $base, $color, $level );
-    }
-
-    @return k-color-mix( $base, $color, k-math-clamp( $level * $_color-level-step, 0%, 100% ) );
-}
-
-/// 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 ) {
-    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-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 ) {
-    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-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 ) {
-    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-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 ) {
-    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-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 );
-}