@progress/kendo-theme-bootstrap 9.1.1-dev.2 → 10.0.0-dev.1

package/scss/combobox/_index.scss

@@ -1,47 +1,26 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "combobox",
-    dependencies: (
-        "button",
-        "floating-label",
-        "icon",
-        "input",
-        "list",
-        "popup"
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../icons/_index.scss";
-@import "../popup/_index.scss";
-@import "../list/_index.scss";
-
+@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 "../list/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-combobox--styles() {
-    @include module-render( "combobox" ) {
+    @include import-once( "combobox" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-icon--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
         @include kendo-combobox--layout();
         @include kendo-combobox--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-combobox--styles();
-}

package/scss/combobox/_layout.scss

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

package/scss/combobox/_theme.scss

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

package/scss/core/_index.scss

@@ -1,37 +1,52 @@
-$wcag-min-contrast-ratio: 4.5 !default;
-
 // Color System
-@import "./color-system/_swatch.scss";
-
-@import "./typography/index.import.scss";
-
-// Variables
-@import "../_variables.scss";
+@use "./color-system/_swatch.scss" as *;
 
 // Elevation
-@import "./elevation/index.import.scss";
+@use "./elevation/index.import.scss" as *;
+
+// Typography
+@use "./typography/index.import.scss" as *;
 
 // Spacing
-@import "./spacing/index.import.scss";
+@use "./spacing/index.import.scss" as *;
 
 // Radii
-@import "./border-radii/index.import.scss";
+@use "./border-radii/index.import.scss" as *;
 
-@import "@progress/kendo-theme-core/scss/index.import.scss";
+@forward "../_variables.scss";
 
-// Backward compatibility
-@import "./color-system/_swatch-legacy.scss";
-
-// Expose
-@include exports("kendo-core-styles") {
-    @include kendo-core--styles();
-
-    // Elevation System
-    @include kendo-elevation--styles();
+// Variables
+@forward "@progress/kendo-theme-core/scss/index.import.scss" with (
+    // Color System Switch
+    $kendo-enable-color-system: $kendo-enable-color-system !default,
+    // Color System
+    $_default-colors: $kendo-colors,
+    $kendo-colors: $kendo-colors !default,
+    // Elevation
+    $_default-elevation: $kendo-elevation,
+    $kendo-elevation: $kendo-elevation !default,
     // Typography
-    @include kendo-core--typography--styles();
+    $_default-font-sizes: $kendo-font-sizes,
+    $kendo-font-sizes: $kendo-font-sizes !default,
+    $kendo-font-size: $kendo-font-size !default,
+
+    $_default-line-heights: $kendo-line-heights,
+    $kendo-line-heights: $kendo-line-heights !default,
+    $kendo-line-height: $kendo-line-height !default,
+
+    $_default-font-families: $kendo-font-families,
+    $kendo-font-families: $kendo-font-families !default,
+    $kendo-font-family: $kendo-font-family !default,
+
+    $_default-font-weights: $kendo-font-weights,
+    $kendo-font-weights: $kendo-font-weights !default,
+    // Border Radii
+    $_default-border-radii: $kendo-border-radii,
+    $kendo-border-radii: $kendo-border-radii !default,
     // Spacing
-    @include kendo-spacing--styles();
-    // Radii
-    @include kendo-border-radius--styles();
-}
+    $_default-spacing: $kendo-spacing,
+    $kendo-spacing: $kendo-spacing !default,
+);
+
+// Backward compatibility
+@forward "./color-system/_swatch-legacy.scss";

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

@@ -1,37 +1,40 @@
+@use "sass:map";
+@use "../spacing/index.import.scss" as *;
+
 /// The global border radius used across the Components.
 /// @group radii
-$kendo-border-radius: $border-radius !default;
+$kendo-border-radius: map.get($kendo-spacing, 1.5) !default;
 /// The none border radius used across the Components.
 /// @group radii
-$kendo-border-radius-none: k-map-get($kendo-spacing, 0) !default;
+$kendo-border-radius-none: 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;
+$kendo-border-radius-xs: 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;
+$kendo-border-radius-sm: map.get($kendo-spacing, 1) !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;
+$kendo-border-radius-lg: map.get($kendo-spacing, 2) !default;
 /// The extra large border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xl: k-map-get($kendo-spacing, 3) !default;
+$kendo-border-radius-xl: 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;
+$kendo-border-radius-xxl: 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;
+$kendo-border-radius-xxxl: 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: (
+$_default-border-radii: (
     none: $kendo-border-radius-none,
     xs: $kendo-border-radius-xs,
     sm: $kendo-border-radius-sm,
@@ -43,4 +46,7 @@ $kendo-border-radii: (
     full: $kendo-border-radius-full
 ) !default;
 
-@import "@progress/kendo-theme-core/scss/border-radii/index.import.scss";
+/// The global radii Map.
+/// @group radii
+$kendo-border-radii: $_default-border-radii !default;
+$kendo-border-radii: map.merge($_default-border-radii, $kendo-border-radii);

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

@@ -1,5 +1,7 @@
+@use "sass:map";
+
 $_default-palette-gray: (
-    white: #ffffff,
+    "white": #ffffff,
     1: #f8f9fa,
     2: #e9ecef,
     3: #dee2e6,
@@ -15,9 +17,8 @@ $_default-palette-gray: (
     13: #2B2F32,
     14: #212529,
     15: #121417,
-    black: #000000,
+    "black": #000000,
 );
-
 $_default-palette-blue: (
     1: #ecf4ff,
     2: #cfe2ff,
@@ -35,7 +36,6 @@ $_default-palette-blue: (
     14: #012151,
     15: #031633,
 );
-
 $_default-palette-yellow: (
     1: #fff9e6,
     2: #fff3cd,
@@ -53,7 +53,6 @@ $_default-palette-yellow: (
     14: #523e02,
     15: #332701,
 );
-
 $_default-palette-red: (
     1: #fceeef,
     2: #f8d7da,
@@ -71,7 +70,6 @@ $_default-palette-red: (
     14: #421015,
     15: #2c0b0e,
 );
-
 $_default-palette-cyan: (
     1: #e7fafe,
     2: #cff4fc,
@@ -89,7 +87,6 @@ $_default-palette-cyan: (
     14: #04414d,
     15: #032830,
 );
-
 $_default-palette-green: (
     1: #e8f3ee,
     2: #d1e7dd,
@@ -107,7 +104,6 @@ $_default-palette-green: (
     14: #0A3622,
     15: #051b11,
 );
-
 $_default-palette-indigo: (
     1: #f0e7fe,
     2: #e2d9f3,
@@ -125,7 +121,6 @@ $_default-palette-indigo: (
     14: #21143b,
     15: #160d27,
 );
-
 $_default-palette-teal: (
     1: #ebfaf6,
     2: #e8dbfd,
@@ -143,45 +138,37 @@ $_default-palette-teal: (
     14: #0a3e2e,
     15: #06281e,
 );
-
 // 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-gray: $_default-palette-gray !default;
-$kendo-palette-gray: map-merge($_default-palette-gray, $kendo-palette-gray);
-
+$kendo-palette-gray: map.merge($_default-palette-gray, $kendo-palette-gray);
 /// The Blue Palette provides colors to the Primary and Series A variable groups.
 /// @group palette
 $kendo-palette-blue: $_default-palette-blue !default;
-$kendo-palette-blue: map-merge($_default-palette-blue, $kendo-palette-blue);
-
+$kendo-palette-blue: map.merge($_default-palette-blue, $kendo-palette-blue);
 /// The Yellow Palette provides colors to the Warning and Series F variable groups.
 /// @group palette
 $kendo-palette-yellow: $_default-palette-yellow !default;
-$kendo-palette-yellow: map-merge($_default-palette-yellow, $kendo-palette-yellow);
-
+$kendo-palette-yellow: map.merge($_default-palette-yellow, $kendo-palette-yellow);
 /// The Red Palette provides colors to the Error and Series E variable groups.
 /// @group palette
 $kendo-palette-red: $_default-palette-red !default;
-$kendo-palette-red: map-merge($_default-palette-red, $kendo-palette-red);
-
+$kendo-palette-red: map.merge($_default-palette-red, $kendo-palette-red);
 /// The Cyan Palette provides colors to the Info variable group.
 /// @group palette
 $kendo-palette-cyan: $_default-palette-cyan !default;
-$kendo-palette-cyan: map-merge($_default-palette-cyan, $kendo-palette-cyan);
-
+$kendo-palette-cyan: map.merge($_default-palette-cyan, $kendo-palette-cyan);
 /// The Green Palette provides colors to the Success and Series D variable groups.
 /// @group palette
 $kendo-palette-green: $_default-palette-green !default;
-$kendo-palette-green: map-merge($_default-palette-green, $kendo-palette-green);
-
+$kendo-palette-green: map.merge($_default-palette-green, $kendo-palette-green);
 /// The Indigo Palette provides colors to the Tertiary and Series B variable groups.
 /// @group palette
 $kendo-palette-indigo: $_default-palette-indigo !default;
-$kendo-palette-indigo: map-merge($_default-palette-indigo, $kendo-palette-indigo);
-
+$kendo-palette-indigo: map.merge($_default-palette-indigo, $kendo-palette-indigo);
 /// The Teal Palette provides colors to the Series C variable group.
 /// @group palette
 $kendo-palette-teal: $_default-palette-teal !default;
-$kendo-palette-teal: map-merge($_default-palette-teal, $kendo-palette-teal);
+$kendo-palette-teal: map.merge($_default-palette-teal, $kendo-palette-teal);
 // stylelint-enable scss/no-global-function-names