@progress/kendo-theme-bootstrap 8.0.0-dev.0 → 8.0.0-dev.10

package/scss/coloreditor/_variables.scss

@@ -2,7 +2,7 @@
 
 /// The spacer of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-spacer: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-color-editor-spacer: k-spacing(4) !default;
 
 /// The minimum width of the ColorEditor.
 /// @group coloreditor
@@ -12,16 +12,16 @@ $kendo-color-editor-min-width: 328px !default;
 $kendo-color-editor-border-width: 1px !default;
 /// The border radius of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-border-radius: $kendo-border-radius-md !default;
+$kendo-color-editor-border-radius: k-border-radius(md) !default;
 /// The font family of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-font-family: $kendo-font-family !default;
+$kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-font-size: $kendo-font-size-md !default;
+$kendo-color-editor-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-line-height: $kendo-line-height-md !default;
+$kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorEditor.
 /// @group coloreditor
 $kendo-color-editor-text: $kendo-component-text !default;
@@ -47,7 +47,7 @@ $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
 $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
 /// The spacing between the ColorEditor header actions.
 /// @group coloreditor
-$kendo-color-editor-header-actions-gap: k-math-div( $kendo-color-editor-spacer, 2 ) !default;
+$kendo-color-editor-header-actions-gap: calc( #{$kendo-color-editor-spacer} / 2 ) !default;
 
 /// The width of the ColorEditor preview.
 /// @group coloreditor
@@ -57,7 +57,7 @@ $kendo-color-editor-color-preview-width: 32px !default;
 $kendo-color-editor-color-preview-height: 12px !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group coloreditor
-$kendo-color-editor-preview-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-color-editor-preview-gap: k-spacing(1) !default;
 
 /// The vertical padding of the ColorEditor views container.
 /// @group coloreditor
@@ -77,4 +77,4 @@ $kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !defau
 $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused ColorGradient.
 /// @group coloreditor
-$kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
+$kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;

package/scss/colorgradient/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The spacer of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-spacer: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-color-gradient-spacer: k-spacing(4) !default;
 
 /// The width of the ColorGradient.
 /// @group cologradient
@@ -14,7 +14,7 @@ $kendo-color-gradient-width: 328px !default;
 $kendo-color-gradient-border-width: 1px !default;
 /// The border radius of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-border-radius: $kendo-border-radius-md !default;
+$kendo-color-gradient-border-radius: k-border-radius(md) !default;
 /// The vertical padding of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
@@ -26,13 +26,13 @@ $kendo-color-gradient-padding-x: $kendo-color-gradient-padding-y !default;
 $kendo-color-gradient-gap: $kendo-color-gradient-spacer !default;
 /// The font family of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-font-family: $kendo-font-family !default;
+$kendo-color-gradient-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-font-size: $kendo-font-size-md !default;
+$kendo-color-gradient-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-line-height: $kendo-line-height-md !default;
+$kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-text: $kendo-component-text !default;
@@ -52,10 +52,10 @@ $kendo-color-gradient-focus-shadow: null !default;
 
 /// The border radius of the ColorGradient canvas.
 /// @group cologradient
-$kendo-color-gradient-canvas-border-radius: $kendo-border-radius-md !default;
+$kendo-color-gradient-canvas-border-radius: k-border-radius(md) !default;
 /// The spacing between the items of the ColorGradient canvas.
 /// @group cologradient
-$kendo-color-gradient-canvas-gap: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-color-gradient-canvas-gap: k-spacing(3) !default;
 /// The height the ColorGradient canvas hsv rectangle.
 /// @group cologradient
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
@@ -126,17 +126,17 @@ $kendo-color-gradient-canvas-draghandle-margin-x: - k-math-div( $kendo-color-gra
 $kendo-color-gradient-input-width: 56px !default;
 /// The spacing between the ColorGradient inputs.
 /// @group cologradient
-$kendo-color-gradient-input-gap: k-math-div( $kendo-color-gradient-spacer, 2 ) !default;
+$kendo-color-gradient-input-gap: calc( #{$kendo-color-gradient-spacer} / 2 ) !default;
 /// The spacing between the ColorGradient inputs and their labels.
 /// @group cologradient
-$kendo-color-gradient-input-label-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-color-gradient-input-label-gap: k-spacing(1) !default;
 /// The text color of the ColorGradient input labels.
 /// @group cologradient
 $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group cologradient
-$kendo-color-gradient-contrast-ratio-font-weight: $kendo-font-weight-bold !default;
+$kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group cologradient
-$kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer, 2 ) !default;
+$kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 2 ) !default;

package/scss/colorpalette/_variables.scss

@@ -2,17 +2,17 @@
 
 /// The font family of the ColorPalette.
 /// @group colorpalette
-$kendo-color-palette-font-family: $kendo-font-family !default;
+$kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorPalette.
 /// @group colorpalette
-$kendo-color-palette-font-size: $kendo-font-size-md !default;
+$kendo-color-palette-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the ColorPalette.
 /// @group colorpalette
 $kendo-color-palette-line-height: 0 !default;
 
 /// The width of the ColorPalette tile.
 /// @group colorpalette
-$kendo-color-palette-tile-width: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
 /// @group colorpalette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;

package/scss/core/_index.scss

@@ -3,12 +3,20 @@ $wcag-min-contrast-ratio: 4.5 !default;
 // Color System
 @import "./color-system/_swatch.scss";
 
+@import "./typography/index.import.scss";
+
 // Variables
 @import "../_variables.scss";
 
 // Elevation
 @import "./elevation/index.import.scss";
 
+// Spacing
+@import "./spacing/index.import.scss";
+
+// Radii
+@import "./border-radii/index.import.scss";
+
 @import "@progress/kendo-theme-core/scss/index.import.scss";
 
 // Backward compatibility
@@ -20,4 +28,10 @@ $wcag-min-contrast-ratio: 4.5 !default;
 
     // Elevation System
     @include kendo-elevation--styles();
+    // Typography
+    @include kendo-core--typography--styles();
+    // Spacing
+    @include kendo-spacing--styles();
+    // Radii
+    @include kendo-border-radius--styles();
 }

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

@@ -0,0 +1,45 @@
+/// The global border radius used across the Components.
+/// @group radii
+$kendo-border-radius: $border-radius !default;
+/// The none border radius used across the Components.
+/// @group radii
+$kendo-border-radius-none: k-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, 0.5) !default;
+/// The small border radius used across the Components.
+/// @group radii
+$kendo-border-radius-sm: $border-radius-sm !default;
+/// The medium border radius used across the Components.
+/// @group radii
+$kendo-border-radius-md: $kendo-border-radius !default;
+/// The large border radius used across the Components.
+/// @group radii
+$kendo-border-radius-lg: $border-radius-lg !default;
+/// The extra large border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xl: k-map-get($kendo-spacing, 3) !default;
+/// The third largest border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xxl: k-map-get($kendo-spacing, 4) !default;
+/// The second largest border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xxxl: k-map-get($kendo-spacing, 8) !default;
+/// The largest border radius used across the Components.
+/// @group radii
+$kendo-border-radius-full: 50rem !default;
+
+/// The global radii Map.
+/// @group radii
+$kendo-border-radii: (
+    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;
+
+@import "@progress/kendo-theme-core/scss/border-radii/index.import.scss";

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

@@ -6,13 +6,13 @@ $_default-palette-gray: (
     4: #ced4da,
     5: #bdc4cb,
     6: #adb5bd,
-    7: #8d959d,
-    8: #6c757d,
-    9: #606970,
-    10: #555c64,
+    7: #9aa3ac,
+    8: #8b959f,
+    9: #6c757d,
+    10: #596169,
     11: #495057,
     12: #343a40,
-    13: #2c3035,
+    13: #2B2F32,
     14: #212529,
     15: #121417,
     black: #000000,
@@ -25,14 +25,14 @@ $_default-palette-blue: (
     4: #9ec5fe,
     5: #86b6fe,
     6: #6ea8fe,
-    7: #4992fd,
-    8: #207afd,
-    9: #0d6efd,
-    10: #0b5ed7,
-    11: #0a58ca,
-    12: #0a53be,
-    13: #084298,
-    14: #052c65,
+    7: #3d8bfd,
+    8: #0d6efd,
+    9: #0c64e4,
+    10: #0a58ca,
+    11: #094cae,
+    12: #084298,
+    13: #052c65,
+    14: #012151,
     15: #031633,
 );
 
@@ -55,11 +55,11 @@ $_default-palette-yellow: (
 );
 
 $_default-palette-red: (
-    1: #fcebec,
-    2: #fae1e3,
-    3: #f8d7da,
-    4: #f5c2c7,
-    5: #f1aeb5,
+    1: #fceeef,
+    2: #f8d7da,
+    3: #f5c2c7,
+    4: #f1aeb5,
+    5: #ed969f,
     6: #ea868f,
     7: #e35d6a,
     8: #dc3545,
@@ -69,13 +69,13 @@ $_default-palette-red: (
     12: #6e1b23,
     13: #58151c,
     14: #421015,
-    15: #21080a,
+    15: #2c0b0e,
 );
 
 $_default-palette-cyan: (
     1: #e7fafe,
     2: #cff4fc,
-    3: #aaecfa,
+    3: #b7eefa,
     4: #9eeaf9,
     5: #86e5f8,
     6: #6edff6,
@@ -97,14 +97,14 @@ $_default-palette-green: (
     4: #a3cfbb,
     5: #8cc3aa,
     6: #75b798,
-    7: #479f76,
-    8: #198754,
-    9: #146c43,
-    10: #125f3b,
-    11: #0f5132,
-    12: #0d442a,
-    13: #0a3622,
-    14: #08291a,
+    7: #5BAE87,
+    8: #479F76,
+    9: #319064,
+    10: #198754,
+    11: #146C43,
+    12: #0F5132,
+    13: #0D442A,
+    14: #0A3622,
     15: #051b11,
 );
 

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

@@ -13,11 +13,11 @@ $_default-colors: (
     // Misc
     app-surface: k-map-get( $kendo-palette-gray, white ),
     on-app-surface: k-map-get( $kendo-palette-gray, 14 ),
-    subtle: k-map-get( $kendo-palette-gray, 9 ),
+    subtle: k-map-get( $kendo-palette-gray, 10 ),
     surface: k-map-get( $kendo-palette-gray, 1 ),
     surface-alt: k-map-get( $kendo-palette-gray, white ),
-    border: k-map-get( $kendo-palette-gray, 3 ),
-    border-alt: k-map-get( $kendo-palette-gray, 4 ),
+    border: rgba( k-map-get( $kendo-palette-gray, 14 ), .13),
+    border-alt: rgba( k-map-get( $kendo-palette-gray, 14 ), .20),
     // Base
     base-subtle: k-map-get( $kendo-palette-gray, 2 ),
     base-subtle-hover: k-map-get( $kendo-palette-gray, 3 ),
@@ -25,7 +25,7 @@ $_default-colors: (
     base: k-map-get( $kendo-palette-gray, 3 ),
     base-hover: k-map-get( $kendo-palette-gray, 4 ),
     base-active: k-map-get( $kendo-palette-gray, 5 ),
-    base-emphasis: k-map-get( $kendo-palette-gray, 6 ),
+    base-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .34),
     base-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
     on-base: k-map-get( $kendo-palette-gray, 14 ),
     base-on-surface: k-map-get( $kendo-palette-gray, 14 ),
@@ -33,24 +33,24 @@ $_default-colors: (
     primary-subtle: k-map-get( $kendo-palette-blue, 2 ),
     primary-subtle-hover: k-map-get( $kendo-palette-blue, 3 ),
     primary-subtle-active: k-map-get( $kendo-palette-blue, 4 ),
-    primary: k-map-get( $kendo-palette-blue, 9 ),
-    primary-hover: k-map-get( $kendo-palette-blue, 10 ),
-    primary-active: k-map-get( $kendo-palette-blue, 11 ),
-    primary-emphasis: k-map-get( $kendo-palette-blue, 6 ),
-    primary-on-subtle: k-map-get( $kendo-palette-blue, 14 ),
+    primary: k-map-get( $kendo-palette-blue, 8 ),
+    primary-hover: k-map-get( $kendo-palette-blue, 9 ),
+    primary-active: k-map-get( $kendo-palette-blue, 10 ),
+    primary-emphasis: rgba( k-map-get( $kendo-palette-blue, 8 ), .40),
+    primary-on-subtle: k-map-get( $kendo-palette-blue, 13 ),
     on-primary: k-map-get( $kendo-palette-gray, white ),
-    primary-on-surface: k-map-get( $kendo-palette-blue, 9 ),
+    primary-on-surface: k-map-get( $kendo-palette-blue, 8 ),
     // Secondary
     secondary-subtle: k-map-get( $kendo-palette-gray, 3 ),
     secondary-subtle-hover: k-map-get( $kendo-palette-gray, 4 ),
     secondary-subtle-active: k-map-get( $kendo-palette-gray, 5 ),
-    secondary: k-map-get( $kendo-palette-gray, 8 ),
-    secondary-hover: k-map-get( $kendo-palette-gray, 9 ),
-    secondary-active: k-map-get( $kendo-palette-gray, 10 ),
-    secondary-emphasis: k-map-get( $kendo-palette-gray, 7 ),
-    secondary-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
+    secondary: k-map-get( $kendo-palette-gray, 9 ),
+    secondary-hover: k-map-get( $kendo-palette-gray, 10 ),
+    secondary-active: k-map-get( $kendo-palette-gray, 11 ),
+    secondary-emphasis: rgba( k-map-get( $kendo-palette-gray, 9 ), .40),
+    secondary-on-subtle: k-map-get( $kendo-palette-gray, 13 ),
     on-secondary: k-map-get( $kendo-palette-gray, white ),
-    secondary-on-surface: k-map-get( $kendo-palette-gray, 14 ),
+    secondary-on-surface: k-map-get( $kendo-palette-gray, 9 ),
     // Tertiary
     tertiary-subtle: k-map-get( $kendo-palette-indigo, 2 ),
     tertiary-subtle-hover: k-map-get( $kendo-palette-indigo, 3 ),
@@ -58,123 +58,123 @@ $_default-colors: (
     tertiary: k-map-get( $kendo-palette-indigo, 8 ),
     tertiary-hover: k-map-get( $kendo-palette-indigo, 9 ),
     tertiary-active: k-map-get( $kendo-palette-indigo, 10 ),
-    tertiary-emphasis: k-map-get( $kendo-palette-indigo, 6 ),
-    tertiary-on-subtle: k-map-get( $kendo-palette-indigo, 14 ),
+    tertiary-emphasis: rgba( k-map-get( $kendo-palette-indigo, 8 ), .40),
+    tertiary-on-subtle: k-map-get( $kendo-palette-indigo, 11 ),
     on-tertiary: k-map-get( $kendo-palette-gray, white ),
     tertiary-on-surface: k-map-get( $kendo-palette-indigo, 8 ),
     // Info
     info-subtle: k-map-get( $kendo-palette-cyan, 2 ),
     info-subtle-hover: k-map-get( $kendo-palette-cyan, 3 ),
-    info-subtle-active: k-map-get( $kendo-palette-cyan, 5 ),
+    info-subtle-active: k-map-get( $kendo-palette-cyan, 4 ),
     info: k-map-get( $kendo-palette-cyan, 8 ),
-    info-hover: k-map-get( $kendo-palette-cyan, 9 ),
-    info-active: k-map-get( $kendo-palette-cyan, 10 ),
-    info-emphasis: k-map-get( $kendo-palette-cyan, 7 ),
-    info-on-subtle: k-map-get( $kendo-palette-cyan, 14 ),
-    on-info: k-map-get( $kendo-palette-gray, white ),
+    info-hover: k-map-get( $kendo-palette-cyan, 7 ),
+    info-active: k-map-get( $kendo-palette-cyan, 6 ),
+    info-emphasis: rgba( k-map-get( $kendo-palette-cyan, 8 ), .40),
+    info-on-subtle: k-map-get( $kendo-palette-cyan, 13 ),
+    on-info: k-map-get( $kendo-palette-gray, black ),
     info-on-surface: k-map-get( $kendo-palette-cyan, 8 ),
     // Success
     success-subtle: k-map-get( $kendo-palette-green, 2 ),
     success-subtle-hover: k-map-get( $kendo-palette-green, 3 ),
-    success-subtle-active: k-map-get( $kendo-palette-green, 5 ),
-    success: k-map-get( $kendo-palette-green, 9 ),
-    success-hover: k-map-get( $kendo-palette-green, 10 ),
-    success-active: k-map-get( $kendo-palette-green, 11 ),
-    success-emphasis: k-map-get( $kendo-palette-green, 7 ),
+    success-subtle-active: k-map-get( $kendo-palette-green, 4 ),
+    success: k-map-get( $kendo-palette-green, 10 ),
+    success-hover: k-map-get( $kendo-palette-green, 11 ),
+    success-active: k-map-get( $kendo-palette-green, 12 ),
+    success-emphasis: rgba( k-map-get( $kendo-palette-green, 10 ), .40),
     success-on-subtle: k-map-get( $kendo-palette-green, 14 ),
     on-success: k-map-get( $kendo-palette-gray, white ),
-    success-on-surface: k-map-get( $kendo-palette-green, 11 ),
+    success-on-surface: k-map-get( $kendo-palette-green, 10 ),
     // Warning
-    warning-subtle: k-map-get( $kendo-palette-yellow, 3 ),
-    warning-subtle-hover: k-map-get( $kendo-palette-yellow, 4 ),
-    warning-subtle-active: k-map-get( $kendo-palette-yellow, 5 ),
+    warning-subtle: k-map-get( $kendo-palette-yellow, 2 ),
+    warning-subtle-hover: k-map-get( $kendo-palette-yellow, 3 ),
+    warning-subtle-active: k-map-get( $kendo-palette-yellow, 4 ),
     warning: k-map-get( $kendo-palette-yellow, 8 ),
-    warning-hover: k-map-get( $kendo-palette-yellow, 9 ),
-    warning-active: k-map-get( $kendo-palette-yellow, 10 ),
-    warning-emphasis: k-map-get( $kendo-palette-yellow, 7 ),
-    warning-on-subtle: k-map-get( $kendo-palette-yellow, 14 ),
+    warning-hover: k-map-get( $kendo-palette-yellow, 7 ),
+    warning-active: k-map-get( $kendo-palette-yellow, 6 ),
+    warning-emphasis: rgba( k-map-get( $kendo-palette-yellow, 8 ), .40),
+    warning-on-subtle: k-map-get( $kendo-palette-yellow, 13 ),
     on-warning: k-map-get( $kendo-palette-gray, black ),
     warning-on-surface: k-map-get( $kendo-palette-yellow, 8 ),
     // Error
-    error-subtle: k-map-get( $kendo-palette-red, 3 ),
-    error-subtle-hover: k-map-get( $kendo-palette-red, 4 ),
-    error-subtle-active: k-map-get( $kendo-palette-red, 5 ),
+    error-subtle: k-map-get( $kendo-palette-red, 2 ),
+    error-subtle-hover: k-map-get( $kendo-palette-red, 3 ),
+    error-subtle-active: k-map-get( $kendo-palette-red, 4 ),
     error: k-map-get( $kendo-palette-red, 8 ),
     error-hover: k-map-get( $kendo-palette-red, 9 ),
     error-active: k-map-get( $kendo-palette-red, 10 ),
-    error-emphasis: k-map-get( $kendo-palette-red, 7 ),
-    error-on-subtle: k-map-get( $kendo-palette-red, 14 ),
+    error-emphasis: rgba( k-map-get( $kendo-palette-red, 8 ), .40),
+    error-on-subtle: k-map-get( $kendo-palette-red, 13 ),
     on-error: k-map-get( $kendo-palette-gray, white ),
     error-on-surface: k-map-get( $kendo-palette-red, 8 ),
     // Light
-    light-subtle: k-map-get( $kendo-palette-gray, 1 ),
-    light-subtle-hover: k-map-get( $kendo-palette-gray, 2 ),
-    light-subtle-active: k-map-get( $kendo-palette-gray, 3 ),
+    light-subtle: k-map-get( $kendo-palette-gray, white ),
+    light-subtle-hover: k-map-get( $kendo-palette-gray, 1 ),
+    light-subtle-active: k-map-get( $kendo-palette-gray, 2 ),
     light: k-map-get( $kendo-palette-gray, 1 ),
     light-hover: k-map-get( $kendo-palette-gray, 2 ),
     light-active: k-map-get( $kendo-palette-gray, 3 ),
-    light-emphasis: k-map-get( $kendo-palette-gray, 5 ),
-    light-on-subtle: k-map-get( $kendo-palette-gray, 12 ),
+    light-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .10),
+    light-on-subtle: k-map-get( $kendo-palette-gray, 11 ),
     on-light: k-map-get( $kendo-palette-gray, black ),
-    light-on-surface: k-map-get( $kendo-palette-gray, 4 ),
+    light-on-surface: k-map-get( $kendo-palette-gray, 1 ),
     // Dark
-    dark-subtle: k-map-get( $kendo-palette-gray, 8 ),
-    dark-subtle-hover: k-map-get( $kendo-palette-gray, 9 ),
-    dark-subtle-active: k-map-get( $kendo-palette-gray, 10 ),
+    dark-subtle: k-map-get( $kendo-palette-gray, 11 ),
+    dark-subtle-hover: k-map-get( $kendo-palette-gray, 10 ),
+    dark-subtle-active: k-map-get( $kendo-palette-gray, 9 ),
     dark: k-map-get( $kendo-palette-gray, 14 ),
-    dark-hover: k-map-get( $kendo-palette-gray, 13 ),
-    dark-active: k-map-get( $kendo-palette-gray, 12 ),
-    dark-emphasis: k-map-get( $kendo-palette-gray, 12 ),
+    dark-hover: k-map-get( $kendo-palette-gray, 12 ),
+    dark-active: k-map-get( $kendo-palette-gray, 11 ),
+    dark-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .40),
     dark-on-subtle: k-map-get( $kendo-palette-gray, white ),
     on-dark: k-map-get( $kendo-palette-gray, white ),
-    dark-on-surface: k-map-get( $kendo-palette-gray, 15 ),
+    dark-on-surface: k-map-get( $kendo-palette-gray, 14 ),
     // Inverse
-    inverse-subtle: k-map-get( $kendo-palette-gray, 8 ),
-    inverse-subtle-hover: k-map-get( $kendo-palette-gray, 9 ),
-    inverse-subtle-active: k-map-get( $kendo-palette-gray, 10 ),
+    inverse-subtle: k-map-get( $kendo-palette-gray, 11 ),
+    inverse-subtle-hover: k-map-get( $kendo-palette-gray, 10 ),
+    inverse-subtle-active: k-map-get( $kendo-palette-gray, 9 ),
     inverse: k-map-get( $kendo-palette-gray, 14 ),
-    inverse-hover: k-map-get( $kendo-palette-gray, 13 ),
-    inverse-active: k-map-get( $kendo-palette-gray, 12 ),
-    inverse-emphasis: k-map-get( $kendo-palette-gray, 12 ),
+    inverse-hover: k-map-get( $kendo-palette-gray, 12 ),
+    inverse-active: k-map-get( $kendo-palette-gray, 11 ),
+    inverse-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .40),
     inverse-on-subtle: k-map-get( $kendo-palette-gray, white ),
     on-inverse: k-map-get( $kendo-palette-gray, white ),
-    inverse-on-surface: k-map-get( $kendo-palette-gray, 15 ),
+    inverse-on-surface: k-map-get( $kendo-palette-gray, 14 ),
     // Series A
     series-a: k-map-get( $kendo-palette-blue, 9 ),
     series-a-bold: k-map-get( $kendo-palette-blue, 12 ),
-    series-a-bolder: k-map-get( $kendo-palette-blue, 14 ),
-    series-a-subtle: k-map-get( $kendo-palette-blue, 5 ),
-    series-a-subtler: k-map-get( $kendo-palette-blue, 7 ),
+    series-a-bolder: k-map-get( $kendo-palette-blue, 13 ),
+    series-a-subtle: k-map-get( $kendo-palette-blue, 7 ),
+    series-a-subtler: k-map-get( $kendo-palette-blue, 5 ),
     // Series B
     series-b: k-map-get( $kendo-palette-indigo, 8 ),
     series-b-bold: k-map-get( $kendo-palette-indigo, 10 ),
     series-b-bolder: k-map-get( $kendo-palette-indigo, 12 ),
-    series-b-subtle: k-map-get( $kendo-palette-indigo, 5 ),
-    series-b-subtler: k-map-get( $kendo-palette-indigo, 7 ),
+    series-b-subtle: k-map-get( $kendo-palette-indigo, 7 ),
+    series-b-subtler: k-map-get( $kendo-palette-indigo, 5 ),
     // Series C
     series-c: k-map-get( $kendo-palette-teal, 8 ),
-    series-c-bold: k-map-get( $kendo-palette-teal, 10 ),
-    series-c-bolder: k-map-get( $kendo-palette-teal, 12 ),
-    series-c-subtle: k-map-get( $kendo-palette-teal, 5 ),
-    series-c-subtler: k-map-get( $kendo-palette-teal, 7 ),
+    series-c-bold: k-map-get( $kendo-palette-teal, 11 ),
+    series-c-bolder: k-map-get( $kendo-palette-teal, 13 ),
+    series-c-subtle: k-map-get( $kendo-palette-teal, 6 ),
+    series-c-subtler: k-map-get( $kendo-palette-teal, 4 ),
     // Series D
-    series-d: k-map-get( $kendo-palette-green, 8 ),
-    series-d-bold: k-map-get( $kendo-palette-green, 10 ),
-    series-d-bolder: k-map-get( $kendo-palette-green, 12 ),
-    series-d-subtle: k-map-get( $kendo-palette-green, 5 ),
-    series-d-subtler: k-map-get( $kendo-palette-green, 7 ),
+    series-d: k-map-get( $kendo-palette-green, 10 ),
+    series-d-bold: k-map-get( $kendo-palette-green, 12 ),
+    series-d-bolder: k-map-get( $kendo-palette-green, 14 ),
+    series-d-subtle: k-map-get( $kendo-palette-green, 8 ),
+    series-d-subtler: k-map-get( $kendo-palette-green, 5 ),
     // Series Е
     series-e: k-map-get( $kendo-palette-red, 8 ),
     series-e-bold: k-map-get( $kendo-palette-red, 10 ),
     series-e-bolder: k-map-get( $kendo-palette-red, 12 ),
-    series-e-subtle: k-map-get( $kendo-palette-red, 5 ),
-    series-e-subtler: k-map-get( $kendo-palette-red, 7 ),
+    series-e-subtle: k-map-get( $kendo-palette-red, 7 ),
+    series-e-subtler: k-map-get( $kendo-palette-red, 4 ),
     // Series F
     series-f: k-map-get( $kendo-palette-yellow, 8 ),
     series-f-bold: k-map-get( $kendo-palette-yellow, 10 ),
     series-f-bolder: k-map-get( $kendo-palette-yellow, 12 ),
-    series-f-subtle: k-map-get( $kendo-palette-yellow, 5 ),
-    series-f-subtler: k-map-get( $kendo-palette-yellow, 7 ),
+    series-f-subtle: k-map-get( $kendo-palette-yellow, 7 ),
+    series-f-subtler: k-map-get( $kendo-palette-yellow, 5 ),
 ) !default;
 
 /// The global default Colors map.

package/scss/core/spacing/index.import.scss

@@ -0,0 +1,14 @@
+@import "@progress/kendo-theme-core/scss/spacing/index.import.scss";
+
+$kendo-icon-spacing: k-spacing(2) !default;
+$kendo-icon-padding: k-spacing(1) !default;
+
+// Metrics
+$kendo-padding-x: k-spacing(4) !default;
+$kendo-padding-y: k-spacing(2) !default;
+$kendo-padding-sm-x: k-spacing(2) !default;
+$kendo-padding-sm-y: k-spacing(1) !default;
+$kendo-padding-md-x: k-spacing(4) !default;
+$kendo-padding-md-y: k-spacing(2) !default;
+$kendo-padding-lg-x: k-spacing(6) !default;
+$kendo-padding-lg-y: k-spacing(3) !default;