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

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

@@ -1,6 +1,4 @@
 @use "sass:map";
-@use "@progress/kendo-theme-core/scss/color-system/_functions.import.scss" as functions;
-@use "@progress/kendo-theme-core/scss/color-system/_constants.scss" as constants;
 @use "./palettes.scss" as *;
 @forward "./palettes.scss";
 
@@ -10,18 +8,18 @@ $kendo-enable-color-system: true !default;
 // Colors
 $_default-colors: (
     // Misc
-    app-surface: map.get( $kendo-palette-gray, white ),
+    app-surface: map.get( $kendo-palette-gray, "white" ),
     on-app-surface: map.get( $kendo-palette-gray, 14 ),
     subtle: map.get( $kendo-palette-gray, 11 ),
     surface: map.get( $kendo-palette-gray, 1 ),
-    surface-alt: map.get( $kendo-palette-gray, white ),
+    surface-alt: map.get( $kendo-palette-gray, "white" ),
     border: map.get( $kendo-palette-gray, 9 ),
     border-alt: map.get( $kendo-palette-gray, 14 ),
     // Base
     base-subtle: map.get( $kendo-palette-gray, 3 ),
     base-subtle-hover: map.get( $kendo-palette-gray, 4 ),
     base-subtle-active: map.get( $kendo-palette-gray, 5 ),
-    base: map.get( $kendo-palette-gray, white ),
+    base: map.get( $kendo-palette-gray, "white" ),
     base-hover: map.get( $kendo-palette-gray, 2 ),
     base-active: map.get( $kendo-palette-gray, 3 ),
     base-emphasis: map.get( $kendo-palette-gray, 11 ),
@@ -37,7 +35,7 @@ $_default-colors: (
     primary-active: map.get( $kendo-palette-ocean-blue, 10 ),
     primary-emphasis: map.get( $kendo-palette-ocean-blue, 11 ),
     primary-on-subtle: map.get( $kendo-palette-ocean-blue, 14 ),
-    on-primary: map.get( $kendo-palette-gray, white ),
+    on-primary: map.get( $kendo-palette-gray, "white" ),
     primary-on-surface: map.get( $kendo-palette-ocean-blue, 8 ),
     // Secondary
     secondary-subtle: map.get( $kendo-palette-gray, 1 ),
@@ -48,7 +46,7 @@ $_default-colors: (
     secondary-active: map.get( $kendo-palette-gray, 10 ),
     secondary-emphasis: map.get( $kendo-palette-gray, 11 ),
     secondary-on-subtle: map.get( $kendo-palette-gray, 14 ),
-    on-secondary: map.get( $kendo-palette-gray, white ),
+    on-secondary: map.get( $kendo-palette-gray, "white" ),
     secondary-on-surface: map.get( $kendo-palette-gray, 11 ),
     // Tertiary
     tertiary-subtle: map.get( $kendo-palette-azure-blue, 2 ),
@@ -59,7 +57,7 @@ $_default-colors: (
     tertiary-active: map.get( $kendo-palette-azure-blue, 10 ),
     tertiary-emphasis: map.get( $kendo-palette-azure-blue, 11 ),
     tertiary-on-subtle: map.get( $kendo-palette-azure-blue, 14 ),
-    on-tertiary: map.get( $kendo-palette-gray, white ),
+    on-tertiary: map.get( $kendo-palette-gray, "white" ),
     tertiary-on-surface: map.get( $kendo-palette-azure-blue, 8 ),
     // Info
     info-subtle: map.get( $kendo-palette-cobalt-blue, 2 ),
@@ -70,7 +68,7 @@ $_default-colors: (
     info-active: map.get( $kendo-palette-cobalt-blue, 10 ),
     info-emphasis: map.get( $kendo-palette-cobalt-blue, 11 ),
     info-on-subtle: map.get( $kendo-palette-cobalt-blue, 14 ),
-    on-info: map.get( $kendo-palette-gray, white ),
+    on-info: map.get( $kendo-palette-gray, "white" ),
     info-on-surface: map.get( $kendo-palette-cobalt-blue, 9 ),
     // Success
     success-subtle: map.get( $kendo-palette-forest-green, 2 ),
@@ -81,7 +79,7 @@ $_default-colors: (
     success-active: map.get( $kendo-palette-forest-green, 10 ),
     success-emphasis: map.get( $kendo-palette-forest-green, 11 ),
     success-on-subtle: map.get( $kendo-palette-forest-green, 14 ),
-    on-success: map.get( $kendo-palette-gray, white ),
+    on-success: map.get( $kendo-palette-gray, "white" ),
     success-on-surface: map.get( $kendo-palette-forest-green, 11 ),
     // Warning
     warning-subtle: map.get( $kendo-palette-dandelion-yellow, 2 ),
@@ -103,7 +101,7 @@ $_default-colors: (
     error-active: map.get( $kendo-palette-crimson-red, 10 ),
     error-emphasis: map.get( $kendo-palette-crimson-red, 11 ),
     error-on-subtle: map.get( $kendo-palette-crimson-red, 14 ),
-    on-error: map.get( $kendo-palette-gray, white ),
+    on-error: map.get( $kendo-palette-gray, "white" ),
     error-on-surface: map.get( $kendo-palette-crimson-red, 11 ),
     // Light
     light-subtle: map.get( $kendo-palette-gray, 1 ),
@@ -122,10 +120,10 @@ $_default-colors: (
     dark-subtle-active: map.get( $kendo-palette-gray, 9 ),
     dark: map.get( $kendo-palette-gray, 14 ),
     dark-hover: map.get( $kendo-palette-gray, 15 ),
-    dark-active: map.get( $kendo-palette-gray, black ),
+    dark-active: map.get( $kendo-palette-gray, "black" ),
     dark-emphasis: map.get( $kendo-palette-gray, 10 ),
     dark-on-subtle: map.get( $kendo-palette-gray, 15 ),
-    on-dark: map.get( $kendo-palette-gray, white ),
+    on-dark: map.get( $kendo-palette-gray, "white" ),
     dark-on-surface: map.get( $kendo-palette-gray, 14 ),
     // Inverse
     inverse-subtle: map.get( $kendo-palette-gray, 7 ),
@@ -133,10 +131,10 @@ $_default-colors: (
     inverse-subtle-active: map.get( $kendo-palette-gray, 9 ),
     inverse: map.get( $kendo-palette-gray, 14 ),
     inverse-hover: map.get( $kendo-palette-gray, 15 ),
-    inverse-active: map.get( $kendo-palette-gray, black ),
+    inverse-active: map.get( $kendo-palette-gray, "black" ),
     inverse-emphasis: map.get( $kendo-palette-gray, 10 ),
     inverse-on-subtle: map.get( $kendo-palette-gray, 15 ),
-    on-inverse: map.get( $kendo-palette-gray, white ),
+    on-inverse: map.get( $kendo-palette-gray, "white" ),
     inverse-on-surface: map.get( $kendo-palette-gray, 14 ),
     // Series A
     series-a: map.get( $kendo-palette-sapphire-blue, 9 ),
@@ -428,88 +426,4 @@ $_default-colors: (
 /// @prop {Color} series-f-subtler - The subtler series F color variable.
 $kendo-colors: $_default-colors !default;
 
-// Legacy
-
-// Root styles
-$kendo-body-bg: constants.$kendo-color-white !default;
-$kendo-body-text: functions.k-get-theme-color-var(neutral-160) !default;
-
-// Component styles
-$kendo-component-bg: $kendo-body-bg !default;
-$kendo-component-text: $kendo-body-text !default;
-$kendo-component-border: functions.k-get-theme-color-var(neutral-30) !default;
-
-// States styles
-$kendo-hover-bg: functions.k-get-theme-color-var(neutral-20) !default;
-$kendo-hover-text: functions.k-get-theme-color-var(neutral-190) !default;
-$kendo-hover-border: functions.k-get-theme-color-var(neutral-20) !default;
-
-$kendo-selected-bg: functions.k-get-theme-color-var(neutral-30) !default;
-$kendo-selected-text: functions.k-get-theme-color-var(neutral-160) !default;
-$kendo-selected-border: functions.k-get-theme-color-var(neutral-130) !default;
-
-$kendo-selected-hover-bg: functions.k-get-theme-color-var(neutral-40) !default;
-$kendo-selected-hover-text: functions.k-get-theme-color-var(neutral-190) !default;
-$kendo-selected-hover-border: functions.k-get-theme-color-var(neutral-130) !default;
-
-$kendo-focus-outline: functions.k-get-theme-color-var(neutral-130) !default;
-
-$kendo-subtle-text: functions.k-get-theme-color-var(neutral-130) !default;
-
-// Link
-$kendo-link-text: functions.k-get-theme-color-var(primary-100) !default;
-$kendo-link-hover-text: functions.k-get-theme-color-var(primary-120) !default;
-
-// Validator
-$kendo-invalid-bg: initial !default;
-$kendo-invalid-text: functions.k-get-theme-color-var(error-190) !default;
-$kendo-invalid-border: functions.k-get-theme-color-var(error-190) !default;
-$kendo-invalid-shadow: null !default;
-
-$kendo-valid-bg: initial !default;
-$kendo-valid-text: k-get-theme-color-var( success-190 ) !default;
-$kendo-valid-border: k-get-theme-color-var( success-190 ) !default;
-$kendo-valid-shadow: null !default;
-
-// Disabled Styling
-$kendo-disabled-bg: functions.k-get-theme-color-var(neutral-20) !default;
-$kendo-disabled-text: functions.k-get-theme-color-var(neutral-90) !default;
-$kendo-disabled-border: transparent !default;
-$kendo-disabled-opacity: null !default;
-$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-theme-colors: (
-    primary: (
-        text: functions.k-get-theme-color-var(primary-130),
-        bg: functions.k-get-theme-color-var(primary-20),
-        border: functions.k-get-theme-color-var(primary-20),
-    ),
-    info: (
-        text: functions.k-get-theme-color-var(info-190),
-        bg: functions.k-get-theme-color-var(info-20),
-        border: functions.k-get-theme-color-var(info-20),
-    ),
-    success: (
-        text: functions.k-get-theme-color-var(success-190),
-        bg: functions.k-get-theme-color-var(success-20),
-        border: functions.k-get-theme-color-var(success-20),
-    ),
-    warning: (
-        text: functions.k-get-theme-color-var(neutral-160),
-        bg: functions.k-get-theme-color-var(warning-20),
-        border: functions.k-get-theme-color-var(warning-20),
-    ),
-    error: (
-        text: functions.k-get-theme-color-var(error-190),
-        bg: functions.k-get-theme-color-var(error-20),
-        border: functions.k-get-theme-color-var(error-20),
-    ),
-) !default;
+$kendo-colors: map.merge($_default-colors, $kendo-colors);

package/scss/core/color-system/utils/_functions.scss

@@ -1,5 +1,3 @@
 @use '../palettes.scss' as *;
 
-@forward "@progress/kendo-theme-core/scss/color-system/functions.import.scss" with (
-    $kendo-palettes: $kendo-fluent-palettes
-)
+@forward "@progress/kendo-theme-core/scss/color-system/functions.import.scss";

package/scss/core/elevation/_legacy.scss

@@ -33,7 +33,7 @@ $kendo-box-shadow-depth-8: var( --kendo-elevation-8, none ) !default;
 /// @deprecated Use the `$kendo-elevation` map instead.
 $kendo-box-shadow-depth-9: var( --kendo-elevation-8, none ) !default;
 
-@mixin elevation--styles-legacy() {
+@mixin kendo-elevation--styles-legacy() {
     :root {
         --kendo-box-shadow-depth-1: #{$kendo-box-shadow-depth-1};
         --kendo-box-shadow-depth-2: #{$kendo-box-shadow-depth-2};

package/scss/core/spacing/_index.scss

@@ -1,28 +1,51 @@
 @use "sass:map";
-@use "@progress/kendo-theme-core/scss/spacing/index.import.scss" as *;
 
-/// Horizontal padding.
-/// @group common
-$kendo-padding-x: k-spacing(2) !default;
-/// Vertical padding.
-/// @group common
-$kendo-padding-y: k-spacing(1) !default;
-/// Small horizontal padding.
-/// @group common
-$kendo-padding-sm-x: k-spacing(1) !default;
-/// Small vertical padding.
-/// @group common
-$kendo-padding-sm-y: k-spacing(0.5) !default;
-/// Medium horizontal padding.
-/// @group common
-$kendo-padding-md-x: k-spacing(2) !default;
-/// Medium vertical padding.
-/// @group common
-$kendo-padding-md-y: k-spacing(1) !default;
-/// Large horizontal padding.
-/// @group common
-$kendo-padding-lg-x: k-spacing(3) !default;
-/// Large vertical padding.
-/// @group common
-$kendo-padding-lg-y: k-spacing(1.5) !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
+) !default;
+
+/// The global default Spacing map.
+/// @group spacing
+$kendo-spacing: $_default-spacing !default;
+
+$kendo-spacing: map.merge($_default-spacing, $kendo-spacing);
 

package/scss/dataviz/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../tooltip/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-dataviz--styles() {
+    @include import-once( "dataviz" ) {
+        @include core-styles();
+        @include kendo-popup--styles();
+        @include kendo-tooltip--styles();
+        @include kendo-dataviz--layout();
+        @include kendo-dataviz--theme();
+    }
+}

package/scss/dataviz/_layout.scss

@@ -102,8 +102,8 @@
     .k-chart-tooltip td {
         width: auto;
         text-align: start;
-        padding-inline: var( --kendo-padding-x-sm, #{$kendo-padding-sm-x} );
-        padding-block: var( --kendo-padding-y-sm, #{$kendo-padding-sm-y} );
+        padding-inline: var( --kendo-chart-tooltip-padding-x, #{k-spacing(1)} );
+        padding-block: var( --kendo-chart-tooltip-padding-y, #{k-spacing(0.5)} );
         line-height: var( --kendo-chart-tooltip-line-height, #{$kendo-chart-tooltip-line-height} );
         vertical-align: middle;
     }
@@ -333,8 +333,8 @@
 
         // Title
         .k-treemap-title {
-            padding-inline: var( --kendo-padding-x-sm, #{$kendo-padding-sm-x} );
-            padding-block: var( --kendo-padding-y-sm, #{$kendo-padding-sm-y} );
+            padding-inline: var( --kendo-treemap-title-padding-x, #{k-spacing(1)} );
+            padding-block: var( --kendo-treemap-title-padding-y, #{k-spacing(0.5)} );
             border-width: 0 0 1px;
             border-style: solid;
             border-color: inherit;
@@ -343,8 +343,8 @@
             background-repeat: repeat-x;
         }
         .k-treemap-title-vertical {
-            padding-inline: var( --kendo-padding-y-sm, #{$kendo-padding-sm-y} );
-            padding-block: var( --kendo-padding-x-sm, #{$kendo-padding-sm-x} );
+            padding-inline: var( --kendo-treemap-padding-y, #{k-spacing(1)} );
+            padding-block: var( --kendo-treemap-title-padding-x, #{k-spacing(1)} );
             width: var( --kendo-line-height-em, #{$kendo-line-height-em} );
             white-space: nowrap;
             overflow: hidden;
@@ -375,16 +375,16 @@
             right: 0;
         }
         .k-treemap-title + .k-treemap-wrap {
-            inset-block-start: calc( calc( #{$kendo-padding-sm-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
+            inset-block-start: calc( calc( #{k-spacing(0.5)} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
         }
         .k-treemap-title-vertical + .k-treemap-wrap {
-            inset-inline-start: calc( calc( #{$kendo-padding-sm-y} * 2 ) + calc( var( --kendo-line-height, normal) * var( --kendo-font-size, inherit) ) + 1px);
+            inset-inline-start: calc( calc( #{k-spacing(0.5)} * 2 ) + calc( var( --kendo-line-height, normal) * var( --kendo-font-size, inherit) ) + 1px);
         }
 
 
         // Leaf
         .k-leaf {
-            padding: var( --kendo-padding-x-sm, #{$kendo-padding-sm-x} );
+            padding: var( --kendo-treemap-leaf-padding, #{k-spacing(1)} );
         }
     }
 

package/scss/dateinput/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-date-input--styles() {
+    @include import-once( "date-input" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-date-input--layout();
+        @include kendo-date-input--theme();
+    }
+}

package/scss/datepicker/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../calendar/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-date-picker--styles() {
+    @include import-once( "date-picker" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-popup--styles();
+        @include kendo-calendar--styles();
+        @include kendo-date-picker--layout();
+        @include kendo-date-picker--theme();
+    }
+}

package/scss/daterangepicker/_index.scss

@@ -0,0 +1,24 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-date-range-picker--styles() {
+    @include import-once( "date-range-picker" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-popup--styles();
+        @include kendo-icon--styles();
+        @include kendo-date-range-picker--layout();
+        @include kendo-date-range-picker--theme();
+    }
+}

package/scss/datetimepicker/_index.scss

@@ -0,0 +1,30 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+@use "../calendar/_index.scss" as *;
+@use "../timeselector/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-date-time-picker--styles() {
+    @include import-once( "date-time-picker" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-button--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-calendar--styles();
+        @include kendo-time-selector--styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-date-time-picker--layout();
+        @include kendo-date-time-picker--theme();
+    }
+}

package/scss/dialog/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../window/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-dialog--styles() {
+    @include import-once( "dialog" ) {
+        @include core-styles();
+        @include kendo-window--styles();
+        @include kendo-dialog--layout();
+        @include kendo-dialog--theme();
+    }
+}

package/scss/dock-manager/_index.scss

@@ -1,26 +1,21 @@
-// Module meta
-$_kendo-module-meta: (
-    name: "dock-manager",
-    dependencies: (
-        "splitter",
-        "tabstrip",
-        "toolbar"
-    )
-);
-
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
 @use "./_layout.scss" as *;
 @use "./_theme.scss" as *;
 
-// Register
-@use "../core/module-system/index.scss" as module;
-@include module.register( $_kendo-module-meta... );
-
 // Expose
-@mixin dock-manager-styles() {
-    @include module.render( "dock-manager" ) {
+@mixin kendo-dock-manager--styles() {
+    @include import-once("dock-manager") {
+        @include core-styles();
+        @include kendo-splitter--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-tabstrip--styles();
         @include kendo-dock-manager--layout();
         @include kendo-dock-manager--theme();
         @include kendo-dock-indicator--layout();

package/scss/draggable/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-draggable--styles() {
+    @include import-once( "draggable" ) {
+        @include core-styles();
+        @include kendo-draggable--layout();
+        @include kendo-draggable--theme();
+    }
+}

package/scss/draggable/_variables.scss

@@ -13,10 +13,10 @@ $kendo-drag-clue-border-width: 0px !default;
 $kendo-drag-clue-border-style: solid !default;
 /// Horizontal padding of the drag clue.
 /// @group draggable
-$kendo-drag-clue-padding-x: $kendo-padding-lg-x !default;
+$kendo-drag-clue-padding-x: k-spacing(3) !default;
 /// Vertical padding of the drag clue.
 /// @group draggable
-$kendo-drag-clue-padding-y: $kendo-padding-lg-y !default;
+$kendo-drag-clue-padding-y: k-spacing(1.5) !default;
 /// Font family of the drag clue.
 /// @group draggable
 $kendo-drag-clue-font-family: var( --kendo-font-family, inherit ) !default;

package/scss/drawer/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../overlay/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-drawer--styles() {
+    @include import-once( "drawer" ) {
+        @include core-styles();
+        @include kendo-overlay--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-list--styles();
+        @include kendo-drawer--layout();
+        @include kendo-drawer--theme();
+    }
+}

package/scss/drawer/_variables.scss

@@ -52,7 +52,7 @@ $kendo-drawer-scrollbar-hover-color: if($kendo-enable-color-system, color-mix(in
 $kendo-drawer-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-y: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
+$kendo-drawer-item-padding-y: k-spacing(2) !default;
 /// The font size of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-font-size: $kendo-drawer-font-size !default;

package/scss/dropdowngrid/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../table/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-dropdown-grid--styles() {
+    @include import-once( "dropdown-grid" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-popup--styles();
+        @include kendo-table--styles();
+        @include kendo-dropdown-grid--layout();
+        @include kendo-dropdown-grid--theme();
+    }
+}

package/scss/dropdownlist/_index.scss

@@ -0,0 +1,24 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-dropdown-list--styles() {
+    @include import-once( "dropdown-list" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-dropdown-list--layout();
+        @include kendo-dropdown-list--theme();
+    }
+}