@progress/kendo-theme-core 7.3.0-dev.1 → 8.0.0-dev.1

package/dist/all.css

@@ -11,17 +11,6 @@
     opacity: 0;
 }
 
-.k-body {
-    font-size: var(--kendo-font-size, inherit);
-    font-family: var(--kendo-font-family, inherit);
-    line-height: var(--kendo-line-height, normal);
-    font-weight: var(--kendo-font-weight, normal);
-    letter-spacing: var(--kendo-letter-spacing, normal);
-    color: var(--kendo-body-text, initial);
-    background-color: var(--kendo-body-bg, initial);
-    margin: 0;
-}
-
 .k-hstack, .k-hbox {
     display: flex;
     flex-flow: row nowrap;
@@ -122,7 +111,7 @@ script {
 }
 
 .k-hr {
-    margin-block: 1rem;
+    margin-block: var(--kendo-spacing-4, 1rem);
     padding: 0;
     height: 0;
     border-width: 1px 0 0;

package/dist/all.scss

@@ -766,7 +766,7 @@ $kendo-color-level-step: 8% !default;
                 #{$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-color( $color )),
+                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% )),
             );
 
@@ -3604,16 +3604,6 @@ $_kendo-imported-modules: () !default;
     }
 }
 
-// #endregion
-// #region @import "./_typography.scss"; -> scss/mixins/_typography.scss
-@mixin typography( $font-size: null, $font-family: null, $line-height: null, $font-weight: null, $letter-spacing: null ) {
-    font-size: $font-size;
-    font-family: $font-family;
-    line-height: $line-height;
-    font-weight: $font-weight;
-    letter-spacing: $letter-spacing;
-}
-
 // #endregion
 
 @mixin background-image( $background-image: null ) {
@@ -4341,21 +4331,6 @@ $_imported: () !default;
 // #endregion
 // #region @import "./_layout.scss"; -> scss/styles/_layout.scss
 @mixin kendo-core--styles--layout() {
-    .k-body {
-        @include typography(
-            var( --kendo-font-size, inherit ),
-            var( --kendo-font-family, inherit ),
-            var( --kendo-line-height, normal ),
-            var( --kendo-font-weight, normal ),
-            var( --kendo-letter-spacing, normal ),
-        );
-        @include fill(
-            var( --kendo-body-text, initial ),
-            var( --kendo-body-bg, initial )
-        );
-        margin: 0;
-    }
-
     // Basic layout
     .k-hstack {
         display: flex;
@@ -4488,7 +4463,7 @@ $_imported: () !default;
 
     // Horizontal line
     .k-hr {
-        margin-block: k-map-get( $kendo-spacing, 4 );
+        margin-block: k-spacing(4);
         padding: 0;
         height: 0;
         border-width: 1px 0 0;
@@ -4603,6 +4578,7 @@ $_imported: () !default;
         inset-inline-end: 0;
     }
 }
+
 // #endregion
 // #region @import "./_loading.scss"; -> scss/styles/_loading.scss
 @mixin kendo-core--styles--loading() {
@@ -4854,27 +4830,253 @@ $kendo-elevation: k-map-merge($_default-elevation, $kendo-elevation);
 }
 
 // #endregion
-// #region @import "./_variables.scss"; -> scss/_variables.scss
-// #region @import "./functions/index.import.scss"; -> scss/functions/index.import.scss
+// #region @import "./typography/index.import.scss"; -> scss/typography/index.import.scss
+// #region @import "../functions/index.import.scss"; -> scss/functions/index.import.scss
 // File already imported_once. Skipping output.
 // #endregion
 
-// Options
-$kendo-enable-shadows: true !default;
-$kendo-enable-rounded: true !default;
-$kendo-enable-gradients: true !default;
-$kendo-enable-transitions: true !default;
+/// The base font size across all components.
+/// @group typography
+$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 small font size across all components.
+/// @group typography
+$kendo-font-size-xs: 0.625rem !default;
+/// The small font size across all components.
+/// @group typography
+$kendo-font-size-sm: 0.75rem !default;
+/// The medium font size across all components.
+/// @group typography
+$kendo-font-size-md: $kendo-font-size !default;
+/// The large font size across all components.
+/// @group typography
+$kendo-font-size-lg: 1rem !default;
+/// The extra large font size across all components.
+/// @group typography
+$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;
+/// The extra small line height across all components.
+/// @group typography
+$kendo-line-height-xs: 1 !default;
+/// The small line height across all components.
+$kendo-line-height-sm: 1.25 !default;
+/// The medium line height across all components.
+/// @group typography
+$kendo-line-height-md: $kendo-line-height !default;
+/// The large line height across all components.
+/// @group typography
+$kendo-line-height-lg: 1.5 !default;
+/// The base line height in ems across all components.
+/// @group typography
+$kendo-line-height-em: calc( #{$kendo-line-height-md} * 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 normal font weight across all components.
+/// @group typography
+$kendo-font-weight-normal: $kendo-font-weight !default;
+/// The medium font weight across all components.
+/// @group typography
+$kendo-font-weight-medium: 500 !default;
+/// The semibold font weight across all components.
+/// @group typography
+$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: null !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 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: inherit !default;
+
+$_default-font-sizes: (
+    xxs: $kendo-font-size-xxs,
+    xs: $kendo-font-size-xs,
+    sm: $kendo-font-size-sm,
+    md: $kendo-font-size-md,
+    lg: $kendo-font-size-lg,
+    xl: $kendo-font-size-xl
+) !default;
+
+$_default-line-heights: (
+    xs: $kendo-line-height-xs,
+    sm: $kendo-line-height-sm,
+    md: $kendo-line-height-md,
+    lg: $kendo-line-height-lg,
+) !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
+) !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;
+
+$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-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-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-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-font-families: $_default-font-families !default;
+
+/// The font families map
+/// @group typography
+$kendo-font-families: k-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;
+    font-family: $font-family;
+    line-height: $line-height;
+    font-weight: $font-weight;
+    letter-spacing: $letter-spacing;
+}
+
+
+@mixin kendo-core--typography--styles() {
+    :root {
 
-$kendo-spacing: (
-    0: 0,
+        --kendo-font-family: #{k-meta-inspect($kendo-font-family)};
+        --kendo-font-size: #{$kendo-font-size};
+        --kendo-line-height: #{$kendo-line-height};
+        --kendo-font-weight: #{$kendo-font-weight};
+        --kendo-letter-spacing: #{$kendo-letter-spacing};
+
+        @each $size, $value in $kendo-font-sizes {
+            --kendo-font-size-#{$size}: #{$value};
+        }
+
+        @each $size, $value in $kendo-line-heights {
+            --kendo-line-height-#{$size}: #{$value};
+        }
+
+        @each $weight, $value in $kendo-font-weights {
+            --kendo-font-weight-#{$weight}: #{$value};
+        }
+
+        @each $spacing, $value in $kendo-letter-spacings {
+            --kendo-letter-spacing-#{$spacing}: #{$value};
+        }
+
+        @each $family, $value in $kendo-font-families {
+            --kendo-font-family-#{$family}: #{$value};
+        }
+    }
+}
+
+// #endregion
+// #region @import "./spacing/index.import.scss"; -> scss/spacing/index.import.scss
+// #region @import "../functions/index.import.scss"; -> scss/functions/index.import.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+$_default-spacing: (
+    0: 0px,
     1px: 1px,
-    0.5: 0.125rem,
-    1: 0.25rem,
-    1.5: 0.375rem,
-    2: 0.5rem,
-    2.5: 0.625rem,
-    3: 0.75rem,
-    3.5: 0.875rem,
+    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,
@@ -4900,33 +5102,126 @@ $kendo-spacing: (
     22: 5.5rem,
     23: 5.75rem,
     24: 6rem,
+    25: 7rem,
+    26: 8rem,
+    27: 9rem,
+    28: 10rem,
+    29: 11rem,
+    30: 12rem
 ) !default;
 
-/// Border radius for all components.
-$kendo-border-radius: k-map-get($kendo-spacing, 0.5) !default;
-$kendo-border-radius-sm: k-math-div($kendo-border-radius, 2) !default;
-$kendo-border-radius-md: $kendo-border-radius !default;
-$kendo-border-radius-lg: ($kendo-border-radius * 2) !default;
-
-$kendo-border-radii: (
-    DEFAULT: var(--kendo-border-radius-md, $kendo-border-radius-md),
-    0: 0,
-    sm: var(--kendo-border-radius-sm, $kendo-border-radius-sm),
-    md: var(--kendo-border-radius-md, $kendo-border-radius-md),
-    lg: var(--kendo-border-radius-lg, $kendo-border-radius-lg),
-    none: 0,
-    full: 9999px,
+/// The global default Spacing map.
+/// @group spacing
+$kendo-spacing: $_default-spacing !default;
+
+$kendo-spacing: k-map-merge($_default-spacing, $kendo-spacing);
+
+
+@function k-spacing($step) {
+    $spacing: k-map-get($kendo-spacing, $step);
+    $_step: k-escape-class-name( $step );
+    @return var(--kendo-spacing-#{$_step}, #{$spacing});
+}
+
+// Generate a CSS variable for each value in the Spacing map
+@mixin kendo-spacing--styles() {
+    :root {
+        @each $step, $spacing in $kendo-spacing {
+            $_step: k-escape-class-name( $step );
+            --kendo-spacing-#{$_step}: #{$spacing};
+        }
+    }
+}
+
+$kendo-sizing: k-map-merge( $kendo-spacing, (
+    "auto": auto,
+    "1/2": 50%,
+    "1/3": 33.333333%,
+    "2/3": 66.666667%,
+    "1/4": 25%,
+    "2/4": 50%,
+    "3/4": 75%,
+    "1/5": 20%,
+    "2/5": 40%,
+    "3/5": 60%,
+    "4/5": 80%,
+    "1/6": 16.666667%,
+    "2/6": 33.333333%,
+    "3/6": 50%,
+    "4/6": 66.666667%,
+    "5/6": 83.333333%,
+    "1/12": 8.333333%,
+    "2/12": 16.666667%,
+    "3/12": 25%,
+    "4/12": 33.333333%,
+    "5/12": 41.666667%,
+    "6/12": 50%,
+    "7/12": 58.333333%,
+    "8/12": 66.666667%,
+    "9/12": 75%,
+    "10/12": 83.333333%,
+    "11/12": 91.666667%,
+    "full": 100%,
+    "min": min-content,
+    "max": max-content,
+    "fit": fit-content
+)) !default;
+
+// #endregion
+// #region @import "./border-radii/index.import.scss"; -> scss/border-radii/index.import.scss
+$kendo-border-radius-none: k-map-get($kendo-spacing, 0) !default;
+$kendo-border-radius-xs: k-map-get($kendo-spacing, 1px) !default;
+$kendo-border-radius-sm: k-map-get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-md: k-map-get($kendo-spacing, 1) !default;
+$kendo-border-radius-lg: k-map-get($kendo-spacing, 1.5) !default;
+$kendo-border-radius-xl: k-map-get($kendo-spacing, 2) !default;
+$kendo-border-radius-xxl: k-map-get($kendo-spacing, 3) !default;
+$kendo-border-radius-xxxl: k-map-get($kendo-spacing, 4) !default;
+$kendo-border-radius-full: 9999px !default;
+
+
+$_default-border-radii: (
+    none: $kendo-border-radius-none,
+    xs: $kendo-border-radius-xs,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
+    lg: $kendo-border-radius-lg,
+    xl: $kendo-border-radius-xl,
+    xxl: $kendo-border-radius-xxl,
+    xxxl: $kendo-border-radius-xxxl,
+    full: $kendo-border-radius-full
+
 ) !default;
 
-// Metrics
-$kendo-padding-x: k-map-get($kendo-spacing, 2) !default;
-$kendo-padding-y: k-map-get($kendo-spacing, 1) !default;
-$kendo-padding-sm-x: k-map-get($kendo-spacing, 1) !default;
-$kendo-padding-sm-y: k-map-get($kendo-spacing, 0.5) !default;
-$kendo-padding-md-x: k-map-get($kendo-spacing, 2) !default;
-$kendo-padding-md-y: k-map-get($kendo-spacing, 1) !default;
-$kendo-padding-lg-x: k-map-get($kendo-spacing, 3) !default;
-$kendo-padding-lg-y: k-map-get($kendo-spacing, 1.5) !default;
+$kendo-border-radii: $_default-border-radii !default;
+
+$kendo-border-radii: k-map-merge($_default-border-radii, $kendo-border-radii);
+
+
+@function k-border-radius($key) {
+    $_border-radius: k-map-get($kendo-border-radii, $key);
+    @return var(--kendo-border-radius-#{$key}, $_border-radius);
+}
+
+@mixin kendo-border-radius--styles() {
+    :root {
+        @each $key, $value in $kendo-border-radii {
+            --kendo-border-radius-#{$key}: #{$value};
+        }
+    }
+}
+
+// #endregion
+// #region @import "./_variables.scss"; -> scss/_variables.scss
+// #region @import "./functions/index.import.scss"; -> scss/functions/index.import.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+// Options
+$kendo-enable-shadows: true !default;
+$kendo-enable-rounded: true !default;
+$kendo-enable-gradients: true !default;
+$kendo-enable-transitions: true !default;
 
 // Equilateral triangle variables
 // stylelint-disable number-max-precision
@@ -4937,6 +5232,7 @@ $equilateral-height: 0.8660254038 !default;
 // Loading
 $kendo-loading-opacity: .3 !default;
 $kendo-zindex-loading: 100 !default;
+
 // #endregion
 
 // #endregion