Skip to content

Commit

Permalink
feat(material): migrate theme to the dart-sass module system
Browse files Browse the repository at this point in the history
BREAKING CHANGE

Starting with the R4 2024 release, all Kendo themes are now migrated to
the SASS module system. This breaking change is due to the `node-sass`
package reaching its official end of life.

For more information, please refer to the following links:

* https://sass-lang.com/blog/the-module-system-is-launched/
* sass/node-sass@107ded9
  • Loading branch information
zhpenkov authored and epetrow committed Nov 1, 2024
1 parent 81d6fe3 commit a04a40c
Show file tree
Hide file tree
Showing 446 changed files with 6,711 additions and 4,868 deletions.
2 changes: 2 additions & 0 deletions packages/material/sass-standalone.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ module.exports = {
build: [
{
entry: [ 'scss/!(common|styling)*/_index.scss' ],
api: "modern",
compiler: "sass",
sassOptions: {
loadPaths: [
'../../node_modules/'
Expand Down
5 changes: 5 additions & 0 deletions packages/material/sass-swatches.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@ module.exports = {
build: [
{
entry: [ 'dist/!(_|variables)*.scss' ],
api: "modern",
compiler: "sass",
sassOptions: {
loadPaths: [
'../../node_modules/'
],
minify: true
}
}
Expand Down
2 changes: 2 additions & 0 deletions packages/material/sass.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ module.exports = {
{
file: 'scss/all.scss',
outFile: 'dist/all.css',
compiler: "sass",
api: "modern",
sassOptions: {
loadPaths: [
'../../node_modules/'
Expand Down
72 changes: 0 additions & 72 deletions packages/material/scss/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,81 +1,9 @@
@import "./core/functions/index.import.scss";

// Options
$kendo-enable-rounded: true !default;
$kendo-enable-shadows: true !default;
$kendo-enable-gradients: false !default;
$kendo-enable-transitions: true !default;
$kendo-enable-focus-contrast: false !default;
$kendo-enable-typography: false !default;

$kendo-use-input-button-width: false !default;
$kendo-use-input-spinner-width: false !default;
$kendo-use-input-spinner-icon-offset: false !default;

$kendo-auto-bootstrap: true !default;

$kendo-nested-disabled: true !default;

// Shadows

/// Shadow for switch.
/// Equivalent to material elevation 1.
/// @group shadows
/// @deprecated Use the `$kendo-elevation` map instead.
$box-shadow-depth-1: k-elevation(1) !default;
/// Shadow for resting state of button, card and other widgets.
/// Equivalent to material elevation 2.
/// @group shadows
/// @deprecated Use the `$kendo-elevation` map instead.
$box-shadow-depth-2: k-elevation(2) !default;
/// Shadow for menu, popups and raised state of button and card.
/// Equivalent to material elevation 3.
/// @group shadows
/// @deprecated Use the `$kendo-elevation` map instead.
$box-shadow-depth-3: k-elevation(3) !default;
/// Shadow for drawers and other overlaying elements.
/// Equivalent to material elevation 4.
/// @group shadows
/// @deprecated Use the `$kendo-elevation` map instead.
$box-shadow-depth-4: k-elevation(4) !default;
/// Shadow for window and dialog.
/// Equivalent to material elevation 6.
/// @group shadows
/// @deprecated Use the `$kendo-elevation` map instead.
$box-shadow-depth-5: k-elevation(5) !default;
/// Shadow for window and dialog.
/// Equivalent to material elevation 8.
/// @group shadows
/// @deprecated Use the `$kendo-elevation` map instead.
$box-shadow-depth-6: k-elevation(6) !default;
/// Shadow for window and dialog.
/// Equivalent to material elevation 12.
/// @group shadows
/// @deprecated Use the `$kendo-elevation` map instead.
$box-shadow-depth-7: k-elevation(7) !default;
/// Shadow for window and dialog.
/// Equivalent to material elevation 16.
/// @group shadows
/// @deprecated Use the `$kendo-elevation` map instead.
$box-shadow-depth-8: k-elevation(8) !default;
/// Shadow for window and dialog.
/// Equivalent to material elevation 24.
/// @group shadows
/// @deprecated Use the `$kendo-elevation` map instead.
$box-shadow-depth-9: k-elevation(9) !default;


// Icons
$kendo-icon-size: 16px !default;

$kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
$kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
$kendo-icon-size-md: $kendo-icon-size !default;
$kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
$kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
$kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
$kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;

$kendo-zindex-popup: 1 !default;
$kendo-zindex-window: 2 !default;

Expand Down
40 changes: 9 additions & 31 deletions packages/material/scss/action-buttons/_index.scss
Original file line number Diff line number Diff line change
@@ -1,41 +1,19 @@
@import "../core/_index.scss";
@import "../utils/_index.scss";


// Module meta
$_kendo-module-meta: (
name: "action-buttons",
dependencies: (
"button",
"icon"
)
);


// Dependencies
@import "../button/_index.scss";

@use "../core/_index.scss" as *;
@use "../utils/_index.scss" as *;
@use "../button/_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-action-buttons--styles() {
@include module-render( "action-buttons" ) {
@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();
}
}

@if $kendo-auto-bootstrap {
@include kendo-action-buttons--styles();
}
3 changes: 2 additions & 1 deletion packages/material/scss/action-buttons/_layout.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "@progress/kendo-theme-default/scss/action-buttons/_layout.scss";
@use "../core/_index.scss" as *;
@use "@progress/kendo-theme-default/scss/action-buttons/_layout.scss" as *;


@mixin kendo-action-buttons--layout() {
Expand Down
5 changes: 4 additions & 1 deletion packages/material/scss/action-buttons/_theme.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
@import "@progress/kendo-theme-default/scss/action-buttons/_theme.scss";
@use "../core/_index.scss" as *;
@use "../button/_variables.scss" as *;
@use "../core/functions/index.import.scss" as *;
@use "@progress/kendo-theme-default/scss/action-buttons/_theme.scss" as *;


@mixin kendo-action-buttons--theme() {
Expand Down
14 changes: 13 additions & 1 deletion packages/material/scss/action-buttons/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "../button/_variables.scss";
@use "../core/_index.scss" as *;


// Actions
Expand All @@ -12,3 +12,15 @@ $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
);
46 changes: 13 additions & 33 deletions packages/material/scss/action-sheet/_index.scss
Original file line number Diff line number Diff line change
@@ -1,45 +1,25 @@
@import "../core/_index.scss";
@import "../utils/_index.scss";


// Module meta
$_kendo-module-meta: (
name: "action-sheet",
dependencies: (
"icon",
"listgroup",
"popup"
)
);


// Dependencies
@import "../icons/_index.scss";
@import "../listgroup/_index.scss";
@import "../popup/_index.scss";

@use "../core/_index.scss" as *;
@use "../icons/_index.scss" as *;
@use "../utils/_index.scss" as *;
@use "../listgroup/_index.scss" as *;
@use "../popup/_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-action-sheet--styles() {
@include module-render( "action-sheet" ) {
@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();
@include kendo-utils--typography--text-align();
}
}

@if $kendo-auto-bootstrap {
@include kendo-action-sheet--styles();
}
2 changes: 1 addition & 1 deletion packages/material/scss/action-sheet/_layout.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@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() {
Expand Down
2 changes: 1 addition & 1 deletion packages/material/scss/action-sheet/_theme.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@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() {
Expand Down
77 changes: 74 additions & 3 deletions packages/material/scss/action-sheet/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@use "sass:math";
@use "../core/_index.scss" as *;

// Action sheet

$kendo-actionsheet-padding-x: null !default;
Expand All @@ -12,12 +15,12 @@ $kendo-actionsheet-border-radius: 0px !default;

$kendo-actionsheet-font-size: var( --kendo-font-size, inherit ) !default;
$kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default;
$kendo-actionsheet-line-height: k-math-div( 20, 14 ) !default;
$kendo-actionsheet-line-height: math.div( 20, 14 ) !default;

$kendo-actionsheet-bg: $kendo-component-bg !default;
$kendo-actionsheet-text: $kendo-component-text !default;
$kendo-actionsheet-border: $kendo-component-border !default;
$kendo-actionsheet-shadow: $box-shadow-depth-7 !default;
$kendo-actionsheet-shadow: k-elevation(7) !default;


// Actionsheet header
Expand Down Expand Up @@ -73,7 +76,6 @@ $kendo-actionsheet-item-disabled-shadow: null !default;

$kendo-actionsheet-item-hover-background: rgba( black, .04 ) !default;
$kendo-actionsheet-item-focus-background: rgba( black, .12 ) !default;
$kendo-actionsheet-item-focus-shadow: null !default;
$kendo-actionsheet-item-disabled-opacity: .42 !default;


Expand All @@ -89,3 +91,72 @@ $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-actionsheet-item-hover-background: $kendo-actionsheet-item-hover-background,
$kendo-actionsheet-item-focus-background: $kendo-actionsheet-item-focus-background,
$kendo-actionsheet-item-disabled-opacity: $kendo-actionsheet-item-disabled-opacity,
$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
);
Loading

0 comments on commit a04a40c

Please sign in to comment.