chore: migrate component styles

packages/bootstrap/scss/_variables.scss

@@ -38,3 +38,19 @@ $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, bord
 // Generic styles
 
 // TODO: refactor once we extract drag drop as separate module
+
+
+/* @forward "@progress/kendo-theme-default/scss/scss/_variables.scss" with (
+    // $kendo-enable-shadows: $kendo-enable-shadows,
+    $kendo-enable-gradients: $kendo-enable-gradients,
+    $kendo-enable-transitions: $kendo-enable-transitions,
+    $kendo-enable-focus-contrast: $kendo-enable-focus-contrast,
+    $kendo-enable-typography: $kendo-enable-typography,
+    $kendo-use-input-button-width: $kendo-use-input-button-width,
+    $kendo-use-input-spinner-width: $kendo-use-input-spinner-width,
+    $kendo-use-input-spinner-icon-offset: $kendo-use-input-spinner-icon-offset,
+    $kendo-zindex-popup: $kendo-zindex-popup,
+    $kendo-zindex-window: $kendo-zindex-window,
+    $kendo-focus-shadow: $kendo-focus-shadow,
+    $kendo-transition: $kendo-transition
+); */

packages/bootstrap/scss/action-buttons/_index.scss

@@ -9,9 +9,12 @@
 @use "../core/_index.scss" as *;
 @use "../utils/_index.scss" as *;
 
+
 // Expose
-@mixin action-buttons-styles() {
+@mixin kendo-action-buttons--styles() {
     @include import-once( "action-buttons" ) {
+        @include core-styles();
+        @include kendo-button--styles();
         @include kendo-action-buttons--layout();
         @include kendo-action-buttons--theme();
         @include kendo-utils--flex-grid--justify-content();

packages/bootstrap/scss/action-buttons/_layout.scss

@@ -1,5 +1,6 @@
+@use "../_variables.scss" as *;
 @use "./_variables.scss" as *;
-@import "@progress/kendo-theme-default/scss/action-buttons/_layout.scss";
+@use "@progress/kendo-theme-default/scss/action-buttons/_layout.scss" as *;
 
 @mixin kendo-action-buttons--layout() {
     @include kendo-action-buttons--layout-base();

packages/bootstrap/scss/action-buttons/_theme.scss

@@ -1,6 +1,5 @@
-@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
-@import "@progress/kendo-theme-default/scss/action-buttons/_theme.scss";
+@use "@progress/kendo-theme-default/scss/action-buttons/_theme.scss" as *;
 
 
 @mixin kendo-action-buttons--theme() {

packages/bootstrap/scss/action-buttons/_variables.scss

@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "../core/_index.scss" as *;
 
 // Actions
@@ -12,3 +11,16 @@ $kendo-actions-bg: null !default;
 $kendo-actions-text: null !default;
 $kendo-actions-border: null !default;
 $kendo-actions-gradient: null !default;
+
+
+@forward "@progress/kendo-theme-default/scss/action-buttons/_variables.scss" with (
+    $kendo-actions-margin-top: $kendo-actions-margin-top,
+    $kendo-actions-padding-x: $kendo-actions-padding-x,
+    $kendo-actions-padding-y: $kendo-actions-padding-y,
+    $kendo-actions-border-width: $kendo-actions-border-width,
+    $kendo-actions-button-spacing: $kendo-actions-button-spacing,
+    $kendo-actions-bg: $kendo-actions-bg,
+    $kendo-actions-text: $kendo-actions-text,
+    $kendo-actions-border: $kendo-actions-border,
+    $kendo-actions-gradient: $kendo-actions-gradient
+);

packages/bootstrap/scss/action-sheet/_index.scss

@@ -13,8 +13,12 @@
 
 
 // Expose
-@mixin action-sheet-styles() {
+@mixin kendo-action-sheet--styles() {
     @include import-once( "action-sheet" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-listgroup--styles();
+        @include kendo-popup--styles();
         @include kendo-action-sheet--layout();
         @include kendo-action-sheet--theme();
         @include kendo-utils--layout--overflow();

packages/bootstrap/scss/action-sheet/_layout.scss

@@ -1,6 +1,6 @@
-@use "../core/_index.scss" as *;
+@use "../_variables.scss" as *;
 @use "./_variables.scss" as *;
-@import "@progress/kendo-theme-default/scss/action-sheet/_layout.scss";
+@use "@progress/kendo-theme-default/scss/action-sheet/_layout.scss" as *;
 
 
 @mixin kendo-action-sheet--layout() {

packages/bootstrap/scss/action-sheet/_theme.scss

@@ -1,6 +1,5 @@
-@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
-@import "@progress/kendo-theme-default/scss/action-sheet/_theme.scss";
+@use "@progress/kendo-theme-default/scss/action-sheet/_theme.scss" as *;
 
 
 @mixin kendo-action-sheet--theme() {

packages/bootstrap/scss/action-sheet/_variables.scss

@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "../core/_index.scss" as *;
 
 // Action sheet
@@ -86,3 +85,70 @@ $kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default;
 
 $kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default;
 $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/action-sheet/_variables.scss" with (
+    $kendo-actionsheet-padding-x: $kendo-actionsheet-padding-x,
+    $kendo-actionsheet-padding-y: $kendo-actionsheet-padding-y,
+    $kendo-actionsheet-width: $kendo-actionsheet-width,
+    $kendo-actionsheet-max-width: $kendo-actionsheet-max-width,
+    $kendo-actionsheet-height: $kendo-actionsheet-height,
+    $kendo-actionsheet-max-height: $kendo-actionsheet-max-height,
+    $kendo-actionsheet-border-width: $kendo-actionsheet-border-width,
+    $kendo-actionsheet-border-radius: $kendo-actionsheet-border-radius,
+    $kendo-actionsheet-font-size: $kendo-actionsheet-font-size,
+    $kendo-actionsheet-font-family: $kendo-actionsheet-font-family,
+    $kendo-actionsheet-line-height: $kendo-actionsheet-line-height,
+    $kendo-actionsheet-bg: $kendo-actionsheet-bg,
+    $kendo-actionsheet-text: $kendo-actionsheet-text,
+    $kendo-actionsheet-border: $kendo-actionsheet-border,
+    $kendo-actionsheet-shadow: $kendo-actionsheet-shadow,
+    $kendo-actionsheet-titlebar-padding-x: $kendo-actionsheet-titlebar-padding-x,
+    $kendo-actionsheet-titlebar-padding-y: $kendo-actionsheet-titlebar-padding-y,
+    $kendo-actionsheet-titlebar-border-width: $kendo-actionsheet-titlebar-border-width,
+    $kendo-actionsheet-titlebar-font-size: $kendo-actionsheet-titlebar-font-size,
+    $kendo-actionsheet-titlebar-font-family: $kendo-actionsheet-titlebar-font-family,
+    $kendo-actionsheet-titlebar-line-height: $kendo-actionsheet-titlebar-line-height,
+    $kendo-actionsheet-titlebar-gap: $kendo-actionsheet-titlebar-gap,
+    $kendo-actionsheet-titlebar-bg: $kendo-actionsheet-titlebar-bg,
+    $kendo-actionsheet-titlebar-text: $kendo-actionsheet-titlebar-text,
+    $kendo-actionsheet-titlebar-border: $kendo-actionsheet-titlebar-border,
+    $kendo-actionsheet-titlebar-gradient: $kendo-actionsheet-titlebar-gradient,
+    $kendo-actionsheet-titlebar-shadow: $kendo-actionsheet-titlebar-shadow,
+    $kendo-actionsheet-subtitle-font-size: $kendo-actionsheet-subtitle-font-size,
+    $kendo-actionsheet-subtitle-line-height: $kendo-actionsheet-subtitle-line-height,
+    $kendo-actionsheet-subtitle-text: $kendo-actionsheet-subtitle-text,
+    $kendo-actionsheet-item-min-height: $kendo-actionsheet-item-min-height,
+    $kendo-actionsheet-item-padding-x: $kendo-actionsheet-item-padding-x,
+    $kendo-actionsheet-item-padding-y: $kendo-actionsheet-item-padding-y,
+    $kendo-actionsheet-item-border-width: $kendo-actionsheet-item-border-width,
+    $kendo-actionsheet-item-spacing: $kendo-actionsheet-item-spacing,
+    $kendo-actionsheet-item-title-font-weight: $kendo-actionsheet-item-title-font-weight,
+    $kendo-actionsheet-item-title-text-transform: $kendo-actionsheet-item-title-text-transform,
+    $kendo-actionsheet-item-description-font-size: $kendo-actionsheet-item-description-font-size,
+    $kendo-actionsheet-item-description-text: $kendo-actionsheet-item-description-text,
+    $kendo-actionsheet-item-hover-bg: $kendo-actionsheet-item-hover-bg,
+    $kendo-actionsheet-item-hover-text: $kendo-actionsheet-item-hover-text,
+    $kendo-actionsheet-item-hover-border: $kendo-actionsheet-item-hover-border,
+    $kendo-actionsheet-item-hover-gradient: $kendo-actionsheet-item-hover-gradient,
+    $kendo-actionsheet-item-hover-shadow: $kendo-actionsheet-item-hover-shadow,
+    $kendo-actionsheet-item-focus-bg: $kendo-actionsheet-item-focus-bg,
+    $kendo-actionsheet-item-focus-text: $kendo-actionsheet-item-focus-text,
+    $kendo-actionsheet-item-focus-border: $kendo-actionsheet-item-focus-border,
+    $kendo-actionsheet-item-focus-gradient: $kendo-actionsheet-item-focus-gradient,
+    $kendo-actionsheet-item-focus-shadow: $kendo-actionsheet-item-focus-shadow,
+    $kendo-actionsheet-item-disabled-bg: $kendo-actionsheet-item-disabled-bg,
+    $kendo-actionsheet-item-disabled-text: $kendo-actionsheet-item-disabled-text,
+    $kendo-actionsheet-item-disabled-border: $kendo-actionsheet-item-disabled-border,
+    $kendo-actionsheet-item-disabled-gradient: $kendo-actionsheet-item-disabled-gradient,
+    $kendo-actionsheet-item-disabled-shadow: $kendo-actionsheet-item-disabled-shadow,
+    $kendo-adaptive-actionsheet-font-size: $kendo-adaptive-actionsheet-font-size,
+    $kendo-adaptive-actionsheet-titlebar-border-width: $kendo-adaptive-actionsheet-titlebar-border-width,
+    $kendo-adaptive-actionsheet-titlebar-padding-y: $kendo-adaptive-actionsheet-titlebar-padding-y,
+    $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-x,
+    $kendo-adaptive-actionsheet-titlebar-border: $kendo-adaptive-actionsheet-titlebar-border,
+    $kendo-adaptive-actionsheet-content-padding-y: $kendo-adaptive-actionsheet-content-padding-y,
+    $kendo-adaptive-actionsheet-content-padding-x: $kendo-adaptive-actionsheet-content-padding-x,
+    $kendo-adaptive-actionsheet-footer-padding-y: $kendo-adaptive-actionsheet-footer-padding-y,
+    $kendo-adaptive-actionsheet-footer-padding-x: $kendo-adaptive-actionsheet-footer-padding-x
+);

packages/bootstrap/scss/adaptive/_index.scss

@@ -4,7 +4,7 @@
 @use "./_theme.scss" as *;
 
 
-// Dependencies
+// Dependencies (TODO: extract variables)
 @use "../core/_index.scss" as *;
 @use "../listgroup/_index.scss" as *;
 @use "../checkbox/_index.scss" as *;
@@ -14,8 +14,14 @@
 
 
 // Expose
-@mixin adaptive-styles() {
+@mixin kendo-adaptive--styles() {
     @include import-once( "adaptive" ) {
+        @include core-styles();
+        @include kendo-listgroup--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-radio--styles();
+        @include kendo-switch--styles();
+        @include kendo-toolbar--styles();
         @include kendo-adaptive--layout();
         @include kendo-adaptive--theme();
     }

packages/bootstrap/scss/adaptive/_layout.scss

@@ -1,8 +1,6 @@
-@use "../core/_index.scss" as *;
+@use "../_variables.scss" as *;
 @use "./_variables.scss" as *;
-@use "../toolbar/_variables.scss" as *;
-@use "../listgroup/_variables.scss" as *;
-@import "@progress/kendo-theme-default/scss/adaptive/_layout.scss";
+@use "@progress/kendo-theme-default/scss/adaptive/_layout.scss" as *;
 
 
 @mixin kendo-adaptive--layout() {

packages/bootstrap/scss/adaptive/_theme.scss

@@ -1,6 +1,5 @@
-@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
-@import "@progress/kendo-theme-default/scss/adaptive/_theme.scss";
+@use "@progress/kendo-theme-default/scss/adaptive/_theme.scss" as *;
 
 
 @mixin kendo-adaptive--theme() {

packages/bootstrap/scss/adaptive/_variables.scss

@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "../core/_index.scss" as *;
 
 // Adaptive Common
@@ -29,3 +28,25 @@ $kendo-adaptive-grid-sort-text: $kendo-color-primary !default;
 $kendo-adaptive-scheduler-current-text: $kendo-color-primary !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
 $kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;
+
+
+@forward "@progress/kendo-theme-default/scss/adaptive/_variables.scss" with (
+    $kendo-adaptive-bg: $kendo-adaptive-bg,
+    $kendo-adaptive-text: $kendo-adaptive-text,
+    $kendo-adaptive-border: $kendo-adaptive-border,
+    $kendo-adaptive-content-bg: $kendo-adaptive-content-bg,
+    $kendo-adaptive-content-text: $kendo-adaptive-content-text,
+    $kendo-adaptive-menu-bg: $kendo-adaptive-menu-bg,
+    $kendo-adaptive-menu-text: $kendo-adaptive-menu-text,
+    $kendo-adaptive-menu-clear-text: $kendo-adaptive-menu-clear-text,
+    $kendo-adaptive-menu-item-border: $kendo-adaptive-menu-item-border,
+    $kendo-adaptive-menu-title-text: $kendo-adaptive-menu-title-text,
+    $kendo-adaptive-border-width: $kendo-adaptive-border-width,
+    $kendo-adaptive-font-family: $kendo-adaptive-font-family,
+    $kendo-adaptive-font-size: $kendo-adaptive-font-size,
+    $kendo-adaptive-line-height: $kendo-adaptive-line-height,
+    $kendo-adaptive-grid-sort-text: $kendo-adaptive-grid-sort-text,
+    $kendo-adaptive-scheduler-current-text: $kendo-adaptive-scheduler-current-text,
+    $kendo-adaptive-scheduler-base-text: $kendo-adaptive-scheduler-base-text,
+    $kendo-adaptive-scheduler-subtle-text: $kendo-adaptive-scheduler-subtle-text
+);

packages/bootstrap/scss/appbar/_index.scss

@@ -9,8 +9,9 @@
 
 
 // Expose
-@mixin appbar-styles() {
+@mixin kendo-appbar--styles() {
     @include import-once( "appbar" ) {
+        @include core-styles();
         @include kendo-appbar--layout();
         @include kendo-appbar--theme();
     }

packages/bootstrap/scss/appbar/_layout.scss

@@ -1,6 +1,6 @@
-@use "../core/_index.scss" as *;
+@use "../_variables.scss" as *;
 @use "./_variables.scss" as *;
-@import "@progress/kendo-theme-default/scss/appbar/_layout.scss";
+@use "@progress/kendo-theme-default/scss/appbar/_layout.scss" as *;
 
 
 @mixin kendo-appbar--layout() {

packages/bootstrap/scss/appbar/_theme.scss

@@ -1,6 +1,5 @@
-@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
-@import "@progress/kendo-theme-default/scss/appbar/_theme.scss";
+@use "@progress/kendo-theme-default/scss/appbar/_theme.scss" as *;
 
 
 @mixin kendo-appbar--theme() {

packages/bootstrap/scss/appbar/_variables.scss

@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "../core/_index.scss" as *;
 // AppBar
 
@@ -54,3 +53,23 @@ $kendo-appbar-box-shadow: k-elevation(4) !default;
 /// The box shadow of the AppBar with bottom position.
 /// @group appbar
 $kendo-appbar-bottom-box-shadow: k-elevation(4) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/appbar/_variables.scss" with (
+    $kendo-appbar-margin-x: $kendo-appbar-margin-x,
+    $kendo-appbar-margin-y: $kendo-appbar-margin-y,
+    $kendo-appbar-padding-x: $kendo-appbar-padding-x,
+    $kendo-appbar-padding-y: $kendo-appbar-padding-y,
+    $kendo-appbar-border-width: $kendo-appbar-border-width,
+    $kendo-appbar-zindex: $kendo-appbar-zindex,
+    $kendo-appbar-font-family: $kendo-appbar-font-family,
+    $kendo-appbar-font-size: $kendo-appbar-font-size,
+    $kendo-appbar-line-height: $kendo-appbar-line-height,
+    $kendo-appbar-gap: $kendo-appbar-gap,
+    $kendo-appbar-light-bg: $kendo-appbar-light-bg,
+    $kendo-appbar-light-text: $kendo-appbar-light-text,
+    $kendo-appbar-dark-bg: $kendo-appbar-dark-bg,
+    $kendo-appbar-dark-text: $kendo-appbar-dark-text,
+    $kendo-appbar-box-shadow: $kendo-appbar-box-shadow,
+    $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow
+);

packages/bootstrap/scss/autocomplete/_index.scss

@@ -4,6 +4,7 @@
 @use "./_theme.scss" as *;
 
 
+
 // Dependencies
 @use "../core/_index.scss" as *;
 @use "../input/_index.scss" as *;
@@ -14,8 +15,14 @@
 
 
 // Expose
-@mixin autocomplete-styles() {
+@mixin kendo-autocomplete--styles() {
     @include import-once( "autocomplete" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-icon--styles();
         @include kendo-autocomplete--layout();
         @include kendo-autocomplete--theme();
     }

packages/bootstrap/scss/autocomplete/_layout.scss

@@ -1,4 +1,6 @@
-@import "@progress/kendo-theme-default/scss/autocomplete/_layout.scss";
+@use "../_variables.scss" as *;
+@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-default/scss/autocomplete/_layout.scss" as *;
 
 
 @mixin kendo-autocomplete--layout() {

packages/bootstrap/scss/autocomplete/_theme.scss

@@ -1,4 +1,5 @@
-@import "@progress/kendo-theme-default/scss/autocomplete/_theme.scss";
+@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-default/scss/autocomplete/_theme.scss" as *;
 
 
 @mixin kendo-autocomplete--theme() {

packages/bootstrap/scss/avatar/_index.scss

@@ -9,8 +9,9 @@
 
 
 // Expose
-@mixin avatar-styles() {
+@mixin kendo-avatar--styles() {
     @include import-once( "avatar" ) {
+        @include core-styles();
         @include kendo-avatar--layout();
         @include kendo-avatar--theme();
     }

packages/bootstrap/scss/avatar/_layout.scss

@@ -1,5 +1,6 @@
+@use "../_variables.scss" as *;
 @use "./_variables.scss" as *;
-@import "@progress/kendo-theme-default/scss/avatar/_layout.scss";
+@use "@progress/kendo-theme-default/scss/avatar/_layout.scss" as *;
 
 
 @mixin kendo-avatar--layout() {

packages/bootstrap/scss/avatar/_theme.scss

@@ -1,6 +1,5 @@
-@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
-@import "@progress/kendo-theme-default/scss/avatar/_theme.scss";
+@use "@progress/kendo-theme-default/scss/avatar/_theme.scss" as *;
 
 
 @mixin kendo-avatar--theme() {

packages/bootstrap/scss/avatar/_variables.scss

@@ -28,3 +28,13 @@ $kendo-avatar-sizes: (
 /// The theme colors map of the Avatar.
 /// @group avatar
 $kendo-avatar-theme-colors: $kendo-theme-colors !default;
+
+
+@forward "@progress/kendo-theme-default/scss/avatar/_variables.scss" with (
+    $kendo-avatar-border-width: $kendo-avatar-border-width,
+    $kendo-avatar-font-family: $kendo-avatar-font-family,
+    $kendo-avatar-font-size: $kendo-avatar-font-size,
+    $kendo-avatar-line-height: $kendo-avatar-line-height,
+    $kendo-avatar-sizes: $kendo-avatar-sizes,
+    $kendo-avatar-theme-colors: $kendo-avatar-theme-colors
+);