@progress/kendo-theme-core 12.3.1-dev.8 → 13.0.0-dev.0

package/scss/components/calendar/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "sass:math";
 @use "../../color-system/_constants.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../mixins/index.scss" as *;
 @use "../../z-index/index.scss" as *;
 @use "../../motion/index.scss" as *;
@@ -18,8 +19,6 @@
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-calendar-font-family;
-        font-size: $kendo-calendar-font-size;
-        line-height: $kendo-calendar-line-height;
         position: relative;
         overflow: hidden;
         display: inline-flex;
@@ -33,6 +32,49 @@
         > .k-calendar {
             border: 0;
         }
+
+        // Calendar sizes
+        @each $size, $size-props in $kendo-calendar-sizes {
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+            $_cell-size: map.get( $size-props, cell-size );
+            $_cell-padding-x: map.get( $size-props, cell-padding-x );
+            $_cell-padding-y: map.get( $size-props, cell-padding-y );
+
+            $_month-cell-size: $_cell-size;
+            $_year-cell-size: calc( 2 * #{$_cell-size} );
+            $_decade-cell-size: calc( 2 * #{$_cell-size} );
+            $_century-cell-size: calc( 2 * #{$_cell-size} );
+
+            #{k-when-default($kendo-calendar-default-size, $size)}
+            &.k-calendar-#{$size} {
+                --INTERNAL--kendo-calendar-view-width: calc( 8 * #{$_cell-size} );
+                --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
+                --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+                &.k-month-calendar,
+                .k-calendar-monthview {
+                    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
+                }
+                &.k-year-calendar,
+                .k-calendar-yearview {
+                    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
+                }
+                &.k-decade-calendar,
+                .k-calendar-decadeview {
+                    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
+                }
+                &.k-century-calendar,
+                .k-calendar-centuryview {
+                    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
+                }
+            }
+        }
+
+        font-size: $kendo-calendar-font-size;
+        line-height: $kendo-calendar-line-height;
     }
 
 
@@ -284,56 +326,12 @@
 
 
 
-    // Calendar sizes
-    @each $size, $size-props in $kendo-calendar-sizes {
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_cell-size: map.get( $size-props, cell-size );
-        $_cell-padding-x: map.get( $size-props, cell-padding-x );
-        $_cell-padding-y: map.get( $size-props, cell-padding-y );
-
-        $_month-cell-size: $_cell-size;
-        $_year-cell-size: calc( 2 * #{$_cell-size} );
-        $_decade-cell-size: calc( 2 * #{$_cell-size} );
-        $_century-cell-size: calc( 2 * #{$_cell-size} );
-
-        .k-calendar-#{$size} {
-            --INTERNAL--kendo-calendar-view-width: calc( 8 * #{$_cell-size} );
-            --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
-            --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            &.k-month-calendar,
-            .k-calendar-monthview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
-            }
-            &.k-year-calendar,
-            .k-calendar-yearview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
-            }
-            &.k-decade-calendar,
-            .k-calendar-decadeview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
-            }
-            &.k-century-calendar,
-            .k-calendar-centuryview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
-            }
-        }
-    }
-
-
-
-
     // Legacy aliases
     .k-link {
         @extend .k-calendar-cell-inner !optional;
     }
 
 
-
-
     // Infinite calendar
     .k-calendar-infinite {
         box-sizing: content-box;

package/scss/components/calendar/_variables.scss

@@ -1,5 +1,7 @@
 // Calendar
 
+$kendo-calendar-default-size: null !default;
+
 $kendo-calendar-border-width: null !default;
 
 $kendo-calendar-font-family: null !default;
@@ -138,4 +140,28 @@ $kendo-calendar-lg-cell-size: null !default;
 $kendo-calendar-lg-cell-padding-x: null !default;
 $kendo-calendar-lg-cell-padding-y: null !default;
 
-$kendo-calendar-sizes: null !default;
+/// The sizes map of the Calendar.
+/// @group calendar
+$kendo-calendar-sizes: (
+    sm: (
+        font-size: $kendo-calendar-sm-font-size,
+        line-height: $kendo-calendar-sm-line-height,
+        cell-size: $kendo-calendar-sm-cell-size,
+        cell-padding-x: $kendo-calendar-sm-cell-padding-x,
+        cell-padding-y: $kendo-calendar-sm-cell-padding-y
+    ),
+    md: (
+        font-size: $kendo-calendar-md-font-size,
+        line-height: $kendo-calendar-md-line-height,
+        cell-size: $kendo-calendar-md-cell-size,
+        cell-padding-x: $kendo-calendar-md-cell-padding-x,
+        cell-padding-y: $kendo-calendar-md-cell-padding-y
+    ),
+    lg: (
+        font-size: $kendo-calendar-lg-font-size,
+        line-height: $kendo-calendar-lg-line-height,
+        cell-size: $kendo-calendar-lg-cell-size,
+        cell-padding-x: $kendo-calendar-lg-cell-padding-x,
+        cell-padding-y: $kendo-calendar-lg-cell-padding-y
+    )
+) !default;

package/scss/components/card/_theme.scss

@@ -33,6 +33,22 @@
         &.k-selected {
             @include box-shadow( $kendo-card-focus-shadow );
         }
+
+
+        // Card theme colors
+        @each $name in $kendo-card-theme-colors {
+            #{k-when-default($kendo-card-default-theme-color, $name)}
+            &.k-card-#{$name} {
+                background-color: k-color(#{$name}-subtle);
+                color: k-color(#{$name}-on-subtle);
+                border-color: k-color(#{$name}-emphasis);
+
+                .k-card-subtitle {
+                    color: inherit;
+                }
+            }
+        }
+
     }
 
 
@@ -70,21 +86,6 @@
         color: $kendo-card-subtitle-text;
     }
 
-
-    // Card theme colors
-    @each $name, $color in $kendo-card-theme-colors {
-        .k-card-#{$name} {
-            background-color: k-color(#{$name}-subtle);
-            color: k-color(#{$name}-on-subtle);
-            border-color: k-color(#{$name}-emphasis);
-
-            .k-card-subtitle {
-                color: inherit;
-            }
-        }
-    }
-
-
     .k-card-wrap {
         &:focus,
         &.k-focus,

package/scss/components/card/_variables.scss

@@ -1,5 +1,7 @@
 // Card
 
+$kendo-card-default-theme-color: null !default;
+
 $kendo-card-padding-x: null !default;
 $kendo-card-padding-y: null !default;
 $kendo-card-border-width: null !default;
@@ -70,4 +72,6 @@ $kendo-card-deck-scroll-button-offset: null !default;
 $kendo-card-callout-width: null !default;
 $kendo-card-callout-height: null !default;
 
-$kendo-card-theme-colors: null !default;
+/// The theme colors map of the Card.
+/// @group card
+$kendo-card-theme-colors: ("primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;

package/scss/components/checkbox/_layout.scss

@@ -2,7 +2,9 @@
 @use "../../spacing/index.scss" as *;
 @use "../../z-index/index.scss" as *;
 @use "../../motion/index.scss" as *;
+@use "../../border-radii/index.scss" as *;
 @use "../../_variables.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-checkbox--layout-base() {
@@ -25,8 +27,31 @@
         cursor: pointer;
         -webkit-appearance: none;
         transition: background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid);
-    }
 
+        // Checkbox size
+        @each $size, $size-props in $kendo-checkbox-sizes {
+            $_size: map.get( $size-props, size );
+            $_glyph-size: map.get( $size-props, glyph-size );
+
+            #{k-when-default($kendo-checkbox-default-size, $size)}
+            &.k-checkbox-#{$size} {
+                width: $_size;
+                height: $_size;
+
+                &::before {
+                    font-size: $_glyph-size;
+                }
+            }
+        }
+
+        // Roundness
+        @each $roundness in $kendo-checkbox-roundness {
+            #{k-when-default($kendo-checkbox-default-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+                border-radius: k-border-radius($roundness);
+            }
+        }
+    }
 
     // Checkbox indicator
     .k-checkbox::before {
@@ -201,27 +226,17 @@
         }
     }
 
+    .k-ripple-container .k-checkbox {
+        @each $size, $size-props in $kendo-checkbox-sizes {
+            $_ripple-size: map.get( $size-props, ripple-size );
 
-    // Checkbox size
-    @each $size, $size-props in $kendo-checkbox-sizes {
-        $_size: map.get( $size-props, size );
-        $_glyph-size: map.get( $size-props, glyph-size );
-        $_ripple-size: map.get( $size-props, ripple-size );
-
-        .k-checkbox-#{$size} {
-            width: $_size;
-            height: $_size;
-
-            &::before {
-                font-size: $_glyph-size;
-            }
-        }
-        .k-ripple-container {
-            .k-checkbox-#{$size}::after {
-                width: $_ripple-size;
-                height: $_ripple-size;
+            #{k-when-default($kendo-checkbox-default-size, $size)}
+            &.k-checkbox-#{$size} {
+                &::after {
+                    width: $_ripple-size;
+                    height: $_ripple-size;
+                }
             }
         }
     }
-
 }

package/scss/components/checkbox/_variables.scss

@@ -14,8 +14,25 @@ $kendo-checkbox-sm-ripple-size: null !default;
 $kendo-checkbox-md-ripple-size: null !default;
 $kendo-checkbox-lg-ripple-size: null !default;
 
-// A map with the different CheckBox sizes.
-$kendo-checkbox-sizes: null !default;
+/// The sizes map of the CheckBox.
+/// @group checkbox
+$kendo-checkbox-sizes: (
+    sm: (
+        size: $kendo-checkbox-sm-size,
+        glyph-size: $kendo-checkbox-sm-glyph-size,
+        ripple-size: $kendo-checkbox-sm-ripple-size
+    ),
+    md: (
+        size: $kendo-checkbox-md-size,
+        glyph-size: $kendo-checkbox-md-glyph-size,
+        ripple-size: $kendo-checkbox-md-ripple-size
+    ),
+    lg: (
+        size: $kendo-checkbox-lg-size,
+        glyph-size: $kendo-checkbox-lg-glyph-size,
+        ripple-size: $kendo-checkbox-lg-ripple-size
+    )
+) !default;
 
 $kendo-checkbox-bg: null !default;
 $kendo-checkbox-text: null !default;
@@ -49,6 +66,10 @@ $kendo-checkbox-disabled-checked-border: null !default;
 $kendo-checkbox-invalid-text: null !default;
 $kendo-checkbox-invalid-border: null !default;
 
+$kendo-checkbox-default-size: null !default;
+$kendo-checkbox-default-roundness: null !default;
+
+$kendo-checkbox-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
 
 // CheckBox indicator
 

package/scss/components/chip/_layout.scss

@@ -1,20 +1,18 @@
 @use "sass:map";
 @use "./_variables.scss" as *;
+@use "../../functions/index.scss" as *;
+@use "../../border-radii/index.scss" as *;
 @use "../../motion/index.scss" as *;
 
 @mixin kendo-chip--layout-base() {
 
     // Chip
     .k-chip {
-        padding-block: $kendo-chip-md-padding-y;
-        padding-inline: $kendo-chip-md-padding-x;
         border-width: $kendo-chip-border-width;
         border-style: solid;
         outline: 0;
         font-family: var( --kendo-font-family, inherit );
         font-weight: $kendo-chip-font-weight;
-        font-size: $kendo-chip-font-size;
-        line-height: $kendo-chip-line-height;
         display: inline-flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -35,6 +33,37 @@
         .k-selected-icon-wrapper {
             display: none !important; // stylelint-disable-line declaration-no-important
         }
+
+        // Roundness
+        @each $roundness in $kendo-chip-roundness {
+            #{k-when-default($kendo-chip-default-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+                border-radius: k-border-radius($roundness);
+            }
+        }
+
+        // Sizes
+        @each $size, $size-props in $kendo-chip-sizes {
+            $_padding-x: map.get( $size-props, padding-x );
+            $_padding-y: map.get( $size-props, padding-y );
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+
+            #{k-when-default($kendo-chip-default-size, $size)}
+            &.k-chip-#{$size} {
+                padding-block: $_padding-y;
+                padding-inline: $_padding-x;
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+                .k-chip-action {
+                    padding: $_padding-y;
+                }
+            }
+        }
+
+        font-size: $kendo-chip-font-size;
+        line-height: $kendo-chip-line-height;
     }
 
 
@@ -79,6 +108,9 @@
         background-size: cover;
         background-position: center;
         flex: none;
+        width: 1em;
+        height: 1em;
+        flex-basis: 1em;
     }
 
 
@@ -129,38 +161,14 @@
         position: relative;
     }
 
-    // Sizes
-    @each $size, $size-props in $kendo-chip-sizes {
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_avatar-size: 1em;
-
-        .k-chip-#{$size} {
-            padding-block: $_padding-y;
-            padding-inline: $_padding-x;
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            .k-chip-action {
-                padding: $_padding-y;
+    .k-chip-list {
+        // Sizes
+        @each $name, $size in $kendo-chip-list-sizes {
+            #{k-when-default($kendo-chip-default-size, $name)}
+            &.k-chip-list-#{$name} {
+                gap: $size;
             }
         }
-
-        .k-chip-avatar {
-            width: $_avatar-size;
-            height: $_avatar-size;
-            flex-basis: $_avatar-size;
-        }
-
-    }
-
-    // Sizes
-    @each $name, $size in $kendo-chip-list-sizes {
-        .k-chip-list-#{$name} {
-            gap: $size;
-        }
     }
 
 }