@progress/kendo-theme-fluent 13.1.2-dev.0 → 13.2.0-dev.0

package/scss/core/spacing/_index.scss

@@ -1,46 +1,44 @@
 @use "sass:map";
 
+/// The base spacing step used to generate the Spacing map.
+/// @group spacing
+$kendo-spacing-base: 0.25rem !default;
+
 $_default-spacing: (
     0: 0px,
     1px: 1px,
-    0.5: .125rem,
-    1: .25rem,
-    1.5: .375rem,
-    2: .5rem,
-    2.5: .625rem,
-    3: .75rem,
-    3.5: .875rem,
-    4: 1rem,
-    4.5: 1.125rem,
-    5: 1.25rem,
-    5.5: 1.375rem,
-    6: 1.5rem,
-    6.5: 1.625rem,
-    7: 1.75rem,
-    7.5: 1.875rem,
-    8: 2rem,
-    9: 2.25rem,
-    10: 2.5rem,
-    11: 2.75rem,
-    12: 3rem,
-    13: 3.25rem,
-    14: 3.5rem,
-    15: 3.75rem,
-    16: 4rem,
-    17: 4.25rem,
-    18: 4.5rem,
-    19: 4.75rem,
-    20: 5rem,
-    21: 5.25rem,
-    22: 5.5rem,
-    23: 5.75rem,
-    24: 6rem,
-    25: 7rem,
-    26: 8rem,
-    27: 9rem,
-    28: 10rem,
-    29: 11rem,
-    30: 12rem
+    0.5: calc(0.5 * var(--kendo-spacing-base)),
+    1: calc(1 * var(--kendo-spacing-base)),
+    1.5: calc(1.5 * var(--kendo-spacing-base)),
+    2: calc(2 * var(--kendo-spacing-base)),
+    2.5: calc(2.5 * var(--kendo-spacing-base)),
+    3: calc(3 * var(--kendo-spacing-base)),
+    3.5: calc(3.5 * var(--kendo-spacing-base)),
+    4: calc(4 * var(--kendo-spacing-base)),
+    4.5: calc(4.5 * var(--kendo-spacing-base)),
+    5: calc(5 * var(--kendo-spacing-base)),
+    5.5: calc(5.5 * var(--kendo-spacing-base)),
+    6: calc(6 * var(--kendo-spacing-base)),
+    6.5: calc(6.5 * var(--kendo-spacing-base)),
+    7: calc(7 * var(--kendo-spacing-base)),
+    7.5: calc(7.5 * var(--kendo-spacing-base)),
+    8: calc(8 * var(--kendo-spacing-base)),
+    9: calc(9 * var(--kendo-spacing-base)),
+    10: calc(10 * var(--kendo-spacing-base)),
+    11: calc(11 * var(--kendo-spacing-base)),
+    12: calc(12 * var(--kendo-spacing-base)),
+    13: calc(13 * var(--kendo-spacing-base)),
+    14: calc(14 * var(--kendo-spacing-base)),
+    15: calc(15 * var(--kendo-spacing-base)),
+    16: calc(16 * var(--kendo-spacing-base)),
+    17: calc(17 * var(--kendo-spacing-base)),
+    18: calc(18 * var(--kendo-spacing-base)),
+    19: calc(19 * var(--kendo-spacing-base)),
+    20: calc(20 * var(--kendo-spacing-base)),
+    21: calc(21 * var(--kendo-spacing-base)),
+    22: calc(22 * var(--kendo-spacing-base)),
+    23: calc(23 * var(--kendo-spacing-base)),
+    24: calc(24 * var(--kendo-spacing-base)),
 ) !default;
 
 /// The global default Spacing map.

package/scss/core/typography/_index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "sass:math";
 
 /// The base font size across all components.
@@ -5,6 +6,9 @@
 $kendo-font-size: 0.875rem !default;
 /// The extra extra small font size across all components.
 /// @group typography
+$kendo-font-size-xxs: 0.5rem !default;
+/// The extra extra small font size across all components.
+/// @group typography
 $kendo-font-size-xs: 0.625rem !default;
 /// The small font size across all components.
 /// @group typography
@@ -38,12 +42,21 @@ $kendo-line-height-lg: 1.33 !default;
 /// @group typography
 $kendo-line-height-em: calc( #{$kendo-line-height} * 1em) !default;
 
+/// The base font weight across all components.
+/// @group typography
+$kendo-font-weight: 400 !default;
+/// The thin font weight across all components.
+/// @group typography
+$kendo-font-weight-thin: 100 !default;
+/// The extra light font weight across all components.
+/// @group typography
+$kendo-font-weight-extra-light: 200 !default;
 /// The light font weight across all components.
 /// @group typography
 $kendo-font-weight-light: 300 !default;
-/// The base font weight across all components.
+/// The normal font weight across all components.
 /// @group typography
-$kendo-font-weight-normal: 400 !default;
+$kendo-font-weight-normal: $kendo-font-weight !default;
 /// The medium font weight across all components.
 /// @group typography
 $kendo-font-weight-medium: 500 !default;
@@ -53,16 +66,57 @@ $kendo-font-weight-semibold: 600 !default;
 /// The bold font weight across all components.
 /// @group typography
 $kendo-font-weight-bold: 700 !default;
+/// The extra bold font weight across all components.
+/// @group typography
+$kendo-font-weight-extra-bold: 800 !default;
+/// The most pronounced font weight across all components.
+/// @group typography
+$kendo-font-weight-black: 900 !default;
 
 /// The base letter spacing across all components.
 /// @group typography
 $kendo-letter-spacing: normal !default;
+/// The tightest letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tightest: -.15px !default;
+/// Slightly looser than the tighter letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tighter: -.10px !default;
+/// Moderately tight letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tight: -.5px !default;
+/// The normal letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-normal: 0px !default;
+/// Wide letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-wide: .5px !default;
+/// Slightly wider than the wide letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-wider: .10px !default;
+/// The widest letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-widest: .15px !default;
 
-/// The font family across all components.
+/// The sans font family across all components.
+/// @group typography
+$kendo-font-family-sans: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans !default;
+/// The serif font family across all components.
+/// @group typography
+$kendo-font-family-serif: "Times New Roman", Georgia, Garamond, Palatino, Baskerville !default;
+/// The sans-serif font family across all components.
+/// @group typography
+$kendo-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+/// The monospace font family across all components.
+/// @group typography
+$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+
+/// The base font family across all components.
 /// @group typography
 $kendo-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !default;
 
 $_default-font-sizes: (
+    xxs: $kendo-font-size-xxs,
     xs: $kendo-font-size-xs,
     sm: $kendo-font-size-sm,
     md: $kendo-font-size-md,
@@ -78,17 +132,55 @@ $_default-line-heights: (
 ) !default;
 
 $_default-font-weights: (
+    thin: $kendo-font-weight-thin,
+    extra-light: $kendo-font-weight-extra-light,
     light: $kendo-font-weight-light,
     normal: $kendo-font-weight-normal,
     medium: $kendo-font-weight-medium,
     semibold: $kendo-font-weight-semibold,
-    bold: $kendo-font-weight-bold
+    bold: $kendo-font-weight-bold,
+    extra-bold: $kendo-font-weight-extra-bold,
+    "black": $kendo-font-weight-black
+) !default;
+
+$_default-letter-spacings: (
+    tightest: $kendo-letter-spacing-tightest,
+    tighter: $kendo-letter-spacing-tighter,
+    tight: $kendo-letter-spacing-tight,
+    normal: $kendo-letter-spacing-normal,
+    wide: $kendo-letter-spacing-wide,
+    wider: $kendo-letter-spacing-wider,
+    widest: $kendo-letter-spacing-widest
+) !default;
+
+$_default-font-families: (
+    sans: $kendo-font-family-sans,
+    serif: $kendo-font-family-serif,
+    sans-serif: $kendo-font-family-sans-serif,
+    monospace: $kendo-font-family-monospace
 ) !default;
 
 /// The font sizes map
 /// @group typography
 $kendo-font-sizes: $_default-font-sizes !default;
+$kendo-font-sizes: map.merge( $_default-font-sizes, $kendo-font-sizes );
 
 /// The line heights map
 /// @group typography
 $kendo-line-heights: $_default-line-heights !default;
+$kendo-line-heights: map.merge( $_default-line-heights, $kendo-line-heights );
+
+/// The font weights map
+/// @group typography
+$kendo-font-weights: $_default-font-weights !default;
+$kendo-font-weights: map.merge( $_default-font-weights, $kendo-font-weights );
+
+/// The letter spacings map
+/// @group typography
+$kendo-letter-spacings: $_default-letter-spacings !default;
+$kendo-letter-spacings: map.merge( $_default-letter-spacings, $kendo-letter-spacings );
+
+/// The font families map
+/// @group typography
+$kendo-font-families: $_default-font-families !default;
+$kendo-font-families: map.merge( $_default-font-families, $kendo-font-families );

package/scss/dataviz/_variables.scss

@@ -375,7 +375,7 @@ $kendo-chart-no-data-font-weight: var( --kendo-chart-no-data-font-weight, var(--
 $kendo-chart-no-data-text: var( --kendo-chart-no-data-text, k-color(on-app-surface) ) !default;
 /// The vertical padding of the Chart no data message.
 /// @group charts
-$kendo-chart-no-data-padding-y: var( --kendo-chart-no-data-padding-y, k-spacing( 25 ) ) !default;
+$kendo-chart-no-data-padding-y: var( --kendo-chart-no-data-padding-y, 7rem ) !default;
 
 // Gauge
 /// Color of the Gauge Pointer.

package/scss/imageeditor/_variables.scss

@@ -48,7 +48,7 @@ $kendo-image-editor-content-text: var( --kendo-image-editor-content-text, inheri
 $kendo-image-editor-content-border: var( --kendo-image-editor-content-border, inherit ) !default;
 /// Imageeditor content border width.
 /// @group image-editor
-$kendo-image-editor-content-border-width: 0 !default;
+$kendo-image-editor-content-border-width: 0px !default;
 
 /// Imageeditor action pane background color.
 /// @group image-editor
@@ -67,7 +67,7 @@ $kendo-image-editor-action-pane-padding-y: var( --kendo-image-editor-action-pane
 $kendo-image-editor-action-pane-padding-x: var( --kendo-image-editor-action-pane-padding-x, #{k-spacing(3)} ) !default;
 /// Imageeditor action pane width.
 /// @group image-editor
-$kendo-image-editor-action-pane-width: var( --kendo-image-editor-action-pane-width, if( #{$kendo-image-editor-content-border-width} == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) ) ) !default;
+$kendo-image-editor-action-pane-width: var( --kendo-image-editor-action-pane-width, calc( 270px + #{$kendo-image-editor-content-border-width}) ) !default;
 
 /// Crop background color of the imageeditor.
 /// @group image-editor

package/scss/typography/_variables.scss

@@ -37,7 +37,7 @@ $kendo-h3-font-family: var(--kendo-font-family) !default;
 /// @group typography-component
 $kendo-h4-font-family: var(--kendo-font-family) !default;
 /// The font family of the fifth highest level heading.
-///
+/// @group typography-component
 $kendo-h5-font-family: var(--kendo-font-family) !default;
 /// The font family of the sixth highest level heading.
 /// @group typography-component
@@ -59,14 +59,15 @@ $kendo-h4-line-height: 40px !default;
 /// @group typography-component
 $kendo-h5-line-height: 36px !default;
 /// The line height of the sixth highest level heading.
+/// @group typography-component
 $kendo-h6-line-height: 32px !default;
 
 /// The font weight of the highest level heading.
 /// @group typography-component
-$kendo-h2-font-weight: var(--kendo-font-weight-semibold) !default;
+$kendo-h1-font-weight: var(--kendo-font-weight-semibold) !default;
 /// The font weight of the second highest level heading.
 /// @group typography-component
-$kendo-h1-font-weight: var(--kendo-font-weight-semibold) !default;
+$kendo-h2-font-weight: var(--kendo-font-weight-semibold) !default;
 /// The font weight of the third highest level heading.
 /// @group typography-component
 $kendo-h3-font-weight: var(--kendo-font-weight-semibold) !default;

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

@@ -1,305 +0,0 @@
-@use "sass:map";
-
-// Palettes
-$_default-palette-neutral-gray: (
-    "white": #ffffff,
-    1: #fafafa,
-    2: #f5f5f5,
-    3: #f0f0f0,
-    4: #ebebeb,
-    5: #e0e0e0,
-    6: #d1d1d1,
-    7: #c7c7c7,
-    8: #b3b3b3,
-    9: #9e9e9e,
-    10: #8a8a8a,
-    11: #707070,
-    12: #616161,
-    13: #424242,
-    14: #333333,
-    15: #242424,
-    "black": #000000,
-);
-
-$_default-palette-blue: (
-    1: #ebf3fc,
-    2: #cfe4fa,
-    3: #abd1f8,
-    4: #96c6fa,
-    5: #479ef5,
-    6: #1988f0,
-    7: #0f6cbd,
-    8: #115ea3,
-    9: #0f548c,
-    10: #0e4775,
-    11: #1e3345,
-    12: #0a2e4a,
-    13: #082338,
-    14: #061724,
-    15: #061724,
-);
-
-$_default-palette-berry: (
-    1: #fdf5fc,
-    2: #f5daf2,
-    3: #edbbe7,
-    4: #e59edd,
-    5: #e090d5,
-    6: #da7ed0,
-    7: #d161c4,
-    8: #cb4dbd,
-    9: #c239b3,
-    10: #af33a1,
-    11: #962c8a,
-    12: #6d2064,
-    13: #53184c,
-    14: #3a1136,
-    15: #20091d,
-);
-
-$_default-palette-green: (
-    1: #f1faf1,
-    2: #c9eac9,
-    3: #9fd89f,
-    4: #84cd84,
-    5: #70c270,
-    6: #64b964,
-    7: #54b054,
-    8: #479e47,
-    9: #359735,
-    10: #258d25,
-    11: #107c10,
-    12: #0e700e,
-    13: #0c5e0c,
-    14: #094509,
-    15: #052505,
-);
-
-$_default-palette-cranberry: (
-    1: #fdf3f4,
-    2: #f6d1d5,
-    3: #f4c3c7,
-    4: #eeacb2,
-    5: #e78890,
-    6: #dc626d,
-    7: #ce3b47,
-    8: #c50f1f,
-    9: #b10e1c,
-    10: #960b18,
-    11: #810812,
-    12: #6e0811,
-    13: #4b0206,
-    14: #3b0509,
-    15: #200205,
-);
-
-$_default-palette-orange: (
-    1: #fff9f5,
-    2: #fee5d7,
-    3: #fdcfb4,
-    4: #fcb992,
-    5: #faa06b,
-    6: #f98845,
-    7: #f87528,
-    8: #f7630c,
-    9: #de590b,
-    10: #bc4b09,
-    11: #a04008,
-    12: #8a3707,
-    13: #612705,
-    14: #4a1e04,
-    15: #200e04,
-);
-
-$_default-palette-steel-blue: (
-    1: #f6fafe,
-    2: #dcedfa,
-    3: #bfddf5,
-    4: #a3cdf0,
-    5: #83bdeb,
-    6: #65ade5,
-    7: #4fa1e1,
-    8: #3a96dd,
-    9: #3991d5,
-    10: #3487c7,
-    11: #2c72a8,
-    12: #20547c,
-    13: #174169,
-    14: #112d4e,
-    15: #091823,
-);
-
-$_default-palette-techno-teal: (
-    1: #eaf5f6,
-    2: #d4eced,
-    3: #bfe2e3,
-    4: #a9d9da,
-    5: #94cfd1,
-    6: #7bc4c6,
-    7: #5fb8bb,
-    8: #42afb3,
-    9: #2aa0a4,
-    10: #268e92,
-    11: #20787b,
-    12: #1a6365,
-    13: #155052,
-    14: #0f3739,
-    15: #091f20,
-);
-
-$_default-palette-saffron-forge: (
-    1: #faf8ef,
-    2: #f0ead0,
-    3: #e6dcb2,
-    4: #dfd19a,
-    5: #d7c580,
-    6: #ceb964,
-    7: #c2a940,
-    8: #b69a2b,
-    9: #ae8c00,
-    10: #997a00,
-    11: #826900,
-    12: #6b5600,
-    13: #574600,
-    14: #3d3100,
-    15: #292100,
-);
-
-$_default-palette-electric-fuchsia: (
-    1: #fdedf7,
-    2: #fbdaee,
-    3: #f8bfe2,
-    4: #f49ad1,
-    5: #f180c5,
-    6: #ed5eb6,
-    7: #ea40a9,
-    8: #e61e99,
-    9: #e3008c,
-    10: #c7007b,
-    11: #aa0069,
-    12: #8f0058,
-    13: #720046,
-    14: #520032,
-    15: #290019,
-);
-
-$_default-palette-bright-basil: (
-    1: #f1f9f0,
-    2: #dbf1da,
-    3: #c5e8c4,
-    4: #b0e0ae,
-    5: #9ad798,
-    6: #89d086,
-    7: #6fc66c,
-    8: #4eb94a,
-    9: #2eb22a,
-    10: #13a10e,
-    11: #118d0c,
-    12: #0e790b,
-    13: #0c6709,
-    14: #0a5107,
-    15: #062f04,
-);
-
-$_default-palette-iris-purple: (
-    1: #edf0fd,
-    2: #dfe4fc,
-    3: #d1d8fa,
-    4: #bec9f8,
-    5: #c3b1db,
-    6: #99aaf4,
-    7: #a58bca,
-    8: #758bf0,
-    9: #637cef,
-    10: #516Ad6,
-    11: #4a5db3,
-    12: #3d4d94,
-    13: #323e78,
-    14: #242c56,
-    15: #12162b,
-);
-
-$_default-palette-terracotta-heat: (
-    1: #FAF0EA,
-    2: #F6E0D5,
-    3: #F0CDBC,
-    4: #EBBBA3,
-    5: #E5A787,
-    6: #DD9269,
-    7: #D77C4C,
-    8: #D66529,
-    9: #CA5010,
-    10: #B3480F,
-    11: #973C0C,
-    12: #7F330A,
-    13: #652808,
-    14: #4B1E06,
-    15: #260F03,
-);
-
-// stylelint-disable scss/no-global-function-names
-/// The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
-/// @group palette
-$kendo-palette-neutral-gray: $_default-palette-neutral-gray !default;
-$kendo-palette-neutral-gray: map.merge($_default-palette-neutral-gray, $kendo-palette-neutral-gray);
-
-/// The Blue Palette provides colors to the Primary variable group.
-/// @group palette
-$kendo-palette-blue: $_default-palette-blue !default;
-$kendo-palette-blue: map.merge($_default-palette-blue, $kendo-palette-blue);
-
-/// The Berry Palette provides colors to the Tertiary variable group.
-/// @group palette
-$kendo-palette-berry: $_default-palette-berry !default;
-$kendo-palette-berry: map.merge($_default-palette-berry, $kendo-palette-berry);
-
-/// The Green Palette provides colors to the Success variable group.
-/// @group palette
-$kendo-palette-green: $_default-palette-green !default;
-$kendo-palette-green: map.merge($_default-palette-green, $kendo-palette-green);
-
-/// The Cranberry Palette provides colors to the Error variable group.
-/// @group palette
-$kendo-palette-cranberry: $_default-palette-cranberry !default;
-$kendo-palette-cranberry: map.merge($_default-palette-cranberry, $kendo-palette-cranberry);
-
-/// The Orange Palette provides colors to the Warning variable group.
-/// @group palette
-$kendo-palette-orange: $_default-palette-orange !default;
-$kendo-palette-orange: map.merge($_default-palette-orange, $kendo-palette-orange);
-
-/// The Steel Blue Palette provides colors to the Info variable group.
-/// @group palette
-$kendo-palette-steel-blue: $_default-palette-steel-blue !default;
-$kendo-palette-steel-blue: map.merge($_default-palette-steel-blue, $kendo-palette-steel-blue);
-
-/// The Sapphire Blue Palette provides colors to the Series A variable group.
-/// @group palette
-$kendo-palette-techno-teal: $_default-palette-techno-teal !default;
-$kendo-palette-techno-teal: map.merge($_default-palette-techno-teal, $kendo-palette-techno-teal);
-
-/// The Saffron Forge Palette provides colors to the Series B variable group.
-/// @group palette
-$kendo-palette-saffron-forge: $_default-palette-saffron-forge !default;
-$kendo-palette-saffron-forge: map.merge($_default-palette-saffron-forge, $kendo-palette-saffron-forge);
-
-/// The Electric Fuchsia Palette provides colors to the Series C variable group.
-/// @group palette
-$kendo-palette-electric-fuchsia: $_default-palette-electric-fuchsia !default;
-$kendo-palette-electric-fuchsia: map.merge($_default-palette-electric-fuchsia, $kendo-palette-electric-fuchsia);
-
-/// The Bright Basil Palette provides colors to the Series D variable group.
-/// @group palette
-$kendo-palette-bright-basil: $_default-palette-bright-basil !default;
-$kendo-palette-bright-basil: map.merge($_default-palette-bright-basil, $kendo-palette-bright-basil);
-
-// The Iris Purple Palette provides colors to the Series E variable group.
-/// @group palette
-$kendo-palette-iris-purple: $_default-palette-iris-purple !default;
-$kendo-palette-iris-purple: map.merge($_default-palette-iris-purple, $kendo-palette-iris-purple);
-
-// The Iris Purple Palette provides colors to the Series F variable group.
-/// @group palette
-$kendo-palette-terracotta-heat: $_default-palette-terracotta-heat !default;
-$kendo-palette-terracotta-heat: map.merge($_default-palette-terracotta-heat, $kendo-palette-terracotta-heat);
-// stylelint-enable scss/no-global-function-names