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

package/scss/chip/_layout.scss

@@ -24,14 +24,13 @@
             outline-style: $kendo-chip-focus-outline-style;
             outline-offset: $kendo-chip-focus-offset;
         }
-    }
-
 
-    // Chip avatar
-    .k-chip-avatar {
-        width: $kendo-chip-avatar-width;
-        height: $kendo-chip-avatar-height;
-        flex-basis: $kendo-chip-avatar-flex-basis;
+        // Chip avatar
+        &.k-chip-avatar {
+            width: $kendo-chip-avatar-width;
+            height: $kendo-chip-avatar-height;
+            flex-basis: $kendo-chip-avatar-flex-basis;
+        }
     }
 
 }

package/scss/chip/_theme.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "../core/functions/index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/chip/_theme.scss" as *;
 
 @mixin kendo-chip--theme() {
@@ -13,96 +14,113 @@
             border-color: $kendo-chip-focus-border;
             outline-color: $kendo-chip-focus-border;
         }
-    }
-
-    .k-chip.k-chip-solid-base {
-        &.k-chip-outline:focus::after,
-        &.k-chip-outline.k-focus::after {
-            outline-color: $kendo-chip-focus-outline;
-        }
-
-        &.k-selected {
-            color: $kendo-chip-selected-text;
-            border-color: $kendo-chip-selected-border;
-        }
-
-        &:disabled,
-        &.k-disabled {
-            color: $kendo-chip-disabled-text;
-            background-color: $kendo-chip-disabled-bg;
-            border-color: $kendo-chip-disabled-border;
-        }
 
-    }
 
-    @each $name, $color in $kendo-chip-theme-colors {
-        .k-chip-solid-#{$name} {
-            border-color: k-color(#{$name}-subtle);
+        // Fillmode: solid
+        #{k-when-default($kendo-chip-default-fill-mode, "solid")}
+        &.k-chip-solid {
 
-            &:active,
-            &.k-active {
-                background-color: k-color(#{$name}-subtle-active);
-                border-color: k-color(#{$name}-subtle-active);
-            }
+            #{k-when-default($kendo-chip-default-theme-color, "base")}
+            &.k-chip-base {
 
-            &.k-selected {
-                border-color: k-color(#{$name}-subtle-active);
-            }
+                &.k-selected {
+                    color: $kendo-chip-selected-text;
+                    border-color: $kendo-chip-selected-border;
+                }
 
-            &:focus,
-            &.k-focus {
-                box-shadow: none;
+                &:disabled,
+                &.k-disabled {
+                    color: $kendo-chip-disabled-text;
+                    background-color: $kendo-chip-disabled-bg;
+                    border-color: $kendo-chip-disabled-border;
+                }
             }
 
-            &:hover,
-            &.k-hover {
-                background-color: k-color(#{$name}-subtle-hover);
-                border-color: k-color(#{$name}-subtle-hover);
+            @each $name in $kendo-chip-theme-colors {
+                #{k-when-default($kendo-chip-default-theme-color, $name)}
+                &.k-chip-#{$name} {
+                    border-color: k-color(#{$name}-subtle);
+
+                    &:active,
+                    &.k-active {
+                        background-color: k-color(#{$name}-subtle-active);
+                        border-color: k-color(#{$name}-subtle-active);
+                    }
+
+                    &.k-selected {
+                        border-color: k-color(#{$name}-subtle-active);
+                    }
+
+                    &:focus,
+                    &.k-focus {
+                        box-shadow: none;
+                    }
+
+                    &:hover,
+                    &.k-hover {
+                        background-color: k-color(#{$name}-subtle-hover);
+                        border-color: k-color(#{$name}-subtle-hover);
+                    }
+                }
             }
         }
 
-        .k-chip-outline-#{$name} {
-            color: k-color(#{$name}-on-subtle);
-
-            &:hover,
-            &.k-hover {
-                color: k-color(#{$name}-on-subtle);
-                background-color: color-mix(in srgb, k-color(#{$name}-hover) 3%, transparent);
-                border-color: k-color(#{$name}-on-surface);
-            }
-
-            &:focus,
-            &.k-focus {
-                box-shadow: none;
-            }
+        // Fillmode: outline
+        #{k-when-default($kendo-chip-default-fill-mode, "outline")}
+        &.k-chip-outline {
 
-            &:active,
-            &.k-active,
-            &.k-selected {
-                color: k-color(#{$name}-on-subtle);
-                background-color: color-mix(in srgb, k-color(#{$name}-active) 13%, transparent);
-                border-color: k-color(#{$name}-on-surface);
+            &:focus::after,
+            &.k-focus::after {
+                outline-color: $kendo-chip-focus-outline;
             }
 
-            @if ($name == "warning") {
-                color: k-color(#{$name}-on-surface);
-                background-color: transparent;
-                border-color: currentColor;
-            }
-
-            @if ($name == "base") {
-                border-color: $kendo-chip-border;
-
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    background-color: color-mix(in srgb, k-color(on-base) 13%, transparent);
-                    border-color: $kendo-chip-border;
-                }
 
-                &:hover,
-                &.k-hover {
-                    border-color: $kendo-chip-hover-border;
+            @each $name in $kendo-chip-theme-colors {
+                #{k-when-default($kendo-chip-default-theme-color, $name)}
+                &.k-chip-#{$name} {
+                    color: k-color(#{$name}-on-subtle);
+
+                    &:hover,
+                    &.k-hover {
+                        color: k-color(#{$name}-on-subtle);
+                        background-color: color-mix(in srgb, k-color(#{$name}-hover) 3%, transparent);
+                        border-color: k-color(#{$name}-on-surface);
+                    }
+
+                    &:focus,
+                    &.k-focus {
+                        box-shadow: none;
+                    }
+
+                    &:active,
+                    &.k-active,
+                    &.k-selected {
+                        color: k-color(#{$name}-on-subtle);
+                        background-color: color-mix(in srgb, k-color(#{$name}-active) 13%, transparent);
+                        border-color: k-color(#{$name}-on-surface);
+                    }
+
+                    @if ($name == "warning") {
+                        color: k-color(#{$name}-on-surface);
+                        background-color: transparent;
+                        border-color: currentColor;
+                    }
+
+                    @if ($name == "base") {
+                        border-color: $kendo-chip-border;
+
+                        &:active,
+                        &.k-active,
+                        &.k-selected {
+                            background-color: color-mix(in srgb, k-color(on-base) 13%, transparent);
+                            border-color: $kendo-chip-border;
+                        }
+
+                        &:hover,
+                        &.k-hover {
+                            border-color: $kendo-chip-hover-border;
+                        }
+                    }
                 }
             }
         }

package/scss/chip/_variables.scss

@@ -3,6 +3,23 @@
 
 // Chip
 
+/// The default theme color of the Chip.
+/// @group chip
+/// @role default
+$kendo-chip-default-theme-color: "base" !default;
+/// The default fill mode of the Chip.
+/// @group chip
+/// @role default
+$kendo-chip-default-fill-mode: "solid" !default;
+/// The default roundness of the Chip.
+/// @group chip
+/// @role default
+$kendo-chip-default-roundness: "md" !default;
+/// The default size of the Chip.
+/// @group chip
+/// @role default
+$kendo-chip-default-size: "md" !default;
+
 /// The width of the border around the Chip.
 /// @group chip
 $kendo-chip-border-width: var( --kendo-chip-border-width, 1px ) !default;
@@ -81,29 +98,6 @@ $kendo-chip-lg-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-chip-calc-size: calc( #{$kendo-chip-md-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
 $kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height} * 1em + #{$kendo-chip-sm-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
 
-/// The map with the sizes of the Chip.
-/// @group chip
-$kendo-chip-sizes: (
-    sm: (
-        padding-x: $kendo-chip-sm-padding-x,
-        padding-y: $kendo-chip-sm-padding-y,
-        font-size: $kendo-chip-sm-font-size,
-        line-height: $kendo-chip-sm-line-height
-    ),
-    md: (
-        padding-x: $kendo-chip-md-padding-x,
-        padding-y: $kendo-chip-md-padding-y,
-        font-size: $kendo-chip-md-font-size,
-        line-height: $kendo-chip-md-line-height
-    ),
-    lg: (
-        padding-x: $kendo-chip-lg-padding-x,
-        padding-y: $kendo-chip-lg-padding-y,
-        font-size: $kendo-chip-lg-font-size,
-        line-height: $kendo-chip-lg-line-height
-    )
-) !default;
-
 // Matrices with theme colors in the order: bg, color, border, outline
 
 // The color matrix for the base Chip
@@ -162,26 +156,21 @@ $kendo-chip-disabled-bg: var( --kendo-chip-disabled-bg, color-mix(in srgb, k-col
 /// @group chip
 $kendo-chip-disabled-border: var( --kendo-chip-disabled-border, transparent ) !default;
 
-/// The theme colors map for the Chip.
-$kendo-chip-theme-colors: (
-    "base": $kendo-chip-bg,
-    "error": k-color(error),
-    "info": k-color(info),
-    "warning": k-color(warning),
-    "success": k-color(success)
-) !default;
-
-// Chip List
-
-/// The sizes of the Chip list.
+/// The sizes of the small Chip list.
 /// @group chip
-$kendo-chip-list-sizes: (
-    sm: k-spacing(1),
-    md: k-spacing(1),
-    lg: k-spacing(1)
-) !default;
+$kendo-chip-list-size-sm: k-spacing(1) !default;
+/// The sizes of the medium Chip list.
+/// @group chip
+$kendo-chip-list-size-md: k-spacing(1) !default;
+/// The sizes of the large Chip list.
+/// @group chip
+$kendo-chip-list-size-lg: k-spacing(1) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/chip/_variables.scss" with (
+    $kendo-chip-default-theme-color: $kendo-chip-default-theme-color,
+    $kendo-chip-default-fill-mode: $kendo-chip-default-fill-mode,
+    $kendo-chip-default-roundness: $kendo-chip-default-roundness,
+    $kendo-chip-default-size: $kendo-chip-default-size,
     $kendo-chip-border-width: $kendo-chip-border-width,
     $kendo-chip-spacing: $kendo-chip-spacing,
     $kendo-chip-sm-padding-x: $kendo-chip-sm-padding-x,
@@ -199,9 +188,7 @@ $kendo-chip-list-sizes: (
     $kendo-chip-lg-line-height: $kendo-chip-lg-line-height,
     $kendo-chip-calc-size: $kendo-chip-calc-size,
     $kendo-chip-sm-calc-size: $kendo-chip-sm-calc-size,
-    $kendo-chip-sizes: $kendo-chip-sizes,
     $kendo-chip-base-bg: $kendo-chip-bg,
-    $kendo-chip-theme-colors: $kendo-chip-theme-colors,
     $kendo-chip-solid-bg: $kendo-chip-bg,
     $kendo-chip-solid-text: $kendo-chip-text,
     $kendo-chip-solid-border: $kendo-chip-border,
@@ -211,5 +198,7 @@ $kendo-chip-list-sizes: (
     $kendo-chip-disabled-bg: $kendo-chip-disabled-bg,
     $kendo-chip-disabled-text: $kendo-chip-disabled-text,
     $kendo-chip-disabled-border: $kendo-chip-disabled-border,
-    $kendo-chip-list-sizes: $kendo-chip-list-sizes
+    $kendo-chip-list-size-sm: $kendo-chip-list-size-sm,
+    $kendo-chip-list-size-md: $kendo-chip-list-size-md,
+    $kendo-chip-list-size-lg: $kendo-chip-list-size-lg
 );

package/scss/coloreditor/_layout.scss

@@ -1,31 +1,35 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "../colorpalette/_variables.scss" as *;
+@use "../core/functions/index.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/coloreditor/_layout.scss" as *;
 
 @mixin kendo-color-editor--layout() {
     @include kendo-color-editor--layout-base();
 
-    .k-coloreditor-footer.k-actions {
-        padding-block: $kendo-color-editor-footer-padding-y;
-        padding-inline: $kendo-color-editor-footer-padding-y;
-    }
-
-    @each $size, $size-props in $kendo-color-editor-sizes {
-        $_views-padding-x: map.get( $size-props, views-padding-x );
-        $_views-padding-y: map.get( $size-props, views-padding-y );
+    .k-coloreditor {
+        @each $size, $size-props in $kendo-color-editor-sizes {
+            $_views-padding-x: map.get( $size-props, views-padding-x );
+            $_views-padding-y: map.get( $size-props, views-padding-y );
 
-        .k-coloreditor-#{$size} {
+            #{k-when-default($kendo-color-editor-default-size, $size)}
+            &.k-coloreditor-#{$size} {
 
-            .k-coloreditor-header,
-            .k-coloreditor-views {
-                padding-block: $_views-padding-y;
-                padding-inline: $_views-padding-x;
+                .k-coloreditor-header,
+                .k-coloreditor-views {
+                    padding-block: $_views-padding-y;
+                    padding-inline: $_views-padding-x;
+                }
             }
         }
     }
 
+    .k-coloreditor-footer.k-actions {
+        padding-block: $kendo-color-editor-footer-padding-y;
+        padding-inline: $kendo-color-editor-footer-padding-y;
+    }
+
     .k-coloreditor-preview {
         justify-content: space-between;
     }

package/scss/coloreditor/_variables.scss

@@ -2,19 +2,24 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 
+/// The default size of the ColorEditor.
+/// @group color-editor
+/// @role default
+$kendo-color-editor-default-size: "md" !default;
+
 /// The spacer of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-spacer: var(--kendo-color-editor-spacer, k-spacing(2)) !default;
 
 /// The minimum width of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-min-width: var(--kendo-color-editor-min-width, 260px) !default;
+$kendo-color-editor-min-width: null !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-sm-min-width: var(--kendo-color-editor-sm-min-width, 236px) !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-md-min-width: var(--kendo-color-editor-md-min-width, $kendo-color-editor-min-width) !default;
+$kendo-color-editor-md-min-width: var(--kendo-color-editor-md-min-width, 260px) !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-lg-min-width: var(--kendo-color-editor-lg-min-width, 362px) !default;
@@ -84,17 +89,17 @@ $kendo-color-editor-color-preview-width: var(--kendo-color-editor-color-preview-
 $kendo-color-editor-color-preview-height: var(--kendo-color-editor-color-preview-height, 14px) !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group color-editor
-$kendo-color-editor-preview-spacing: var(--kendo-color-editor-preview-spacing, k-spacing(1)) !default;
+$kendo-color-editor-preview-gap: var(--kendo-color-editor-preview-gap, k-spacing(1)) !default;
 
 /// The spacing between the colors in the small ColorEditor preview.
 /// @group color-editor
-$kendo-color-editor-sm-preview-spacing: var(--kendo-color-editor-sm-preview-spacing, k-spacing(1)) !default;
+$kendo-color-editor-sm-preview-gap: var(--kendo-color-editor-sm-preview-gap, k-spacing(1)) !default;
 /// The spacing between the colors in the medium ColorEditor preview.
 /// @group color-editor
-$kendo-color-editor-md-preview-spacing: var(--kendo-color-editor-md-preview-spacing, $kendo-color-editor-preview-spacing) !default;
+$kendo-color-editor-md-preview-gap: var(--kendo-color-editor-md-preview-gap, $kendo-color-editor-preview-gap) !default;
 /// The spacing between the colors in the large ColorEditor preview.
 /// @group color-editor
-$kendo-color-editor-lg-preview-spacing: var(--kendo-color-editor-lg-preview-spacing, k-spacing(1)) !default;
+$kendo-color-editor-lg-preview-gap: var(--kendo-color-editor-lg-preview-gap, k-spacing(1)) !default;
 
 /// The width of the small ColorEditor preview.
 /// @group color-editor
@@ -152,43 +157,8 @@ $kendo-color-editor-color-gradient-focus-outline: var(--kendo-color-editor-color
 /// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-offset: var(--kendo-color-editor-color-gradient-focus-outline-offset, 2px) !default;
 
-/// The size map of the ColorEditor preview.
-/// @group color-editor
-$kendo-color-editor-sizes: (
-    sm: (
-        min-width: $kendo-color-editor-sm-min-width,
-        header-padding-x: $kendo-color-editor-sm-header-padding-x,
-        header-padding-y: $kendo-color-editor-sm-header-padding-y,
-        views-padding-x: $kendo-color-editor-sm-views-padding-x,
-        views-padding-y: $kendo-color-editor-sm-views-padding-y,
-        preview-gap: $kendo-color-editor-sm-preview-spacing,
-        preview-width: $kendo-color-editor-sm-color-preview-width,
-        preview-height: $kendo-color-editor-sm-color-preview-height,
-
-    ),
-    md: (
-        min-width: $kendo-color-editor-md-min-width,
-        header-padding-x: $kendo-color-editor-md-header-padding-x,
-        header-padding-y: $kendo-color-editor-md-header-padding-y,
-        views-padding-x: $kendo-color-editor-md-views-padding-x,
-        views-padding-y: $kendo-color-editor-md-views-padding-y,
-        preview-gap: $kendo-color-editor-md-preview-spacing,
-        preview-width: $kendo-color-editor-md-color-preview-width,
-        preview-height: $kendo-color-editor-md-color-preview-height,
-    ),
-    lg: (
-        min-width: $kendo-color-editor-lg-min-width,
-        header-padding-x: $kendo-color-editor-lg-header-padding-x,
-        header-padding-y: $kendo-color-editor-lg-header-padding-y,
-        views-padding-x: $kendo-color-editor-lg-views-padding-x,
-        views-padding-y: $kendo-color-editor-lg-views-padding-y,
-        preview-gap: $kendo-color-editor-lg-preview-spacing,
-        preview-width: $kendo-color-editor-lg-color-preview-width,
-        preview-height: $kendo-color-editor-lg-color-preview-height,
-    )
-) !default;
-
 @forward "@progress/kendo-theme-core/scss/components/coloreditor/_variables.scss" with (
+    $kendo-color-editor-default-size: $kendo-color-editor-default-size,
     $kendo-color-editor-spacer: $kendo-color-editor-spacer,
     $kendo-color-editor-min-width: $kendo-color-editor-min-width,
     $kendo-color-editor-sm-min-width: $kendo-color-editor-sm-min-width,
@@ -213,10 +183,10 @@ $kendo-color-editor-sizes: (
     $kendo-color-editor-lg-header-padding-x: $kendo-color-editor-lg-header-padding-x,
     $kendo-color-editor-color-preview-width: $kendo-color-editor-color-preview-width,
     $kendo-color-editor-color-preview-height: $kendo-color-editor-color-preview-height,
-    $kendo-color-editor-preview-gap: $kendo-color-editor-preview-spacing,
-    $kendo-color-editor-sm-preview-gap: $kendo-color-editor-sm-preview-spacing,
-    $kendo-color-editor-md-preview-gap: $kendo-color-editor-md-preview-spacing,
-    $kendo-color-editor-lg-preview-gap: $kendo-color-editor-lg-preview-spacing,
+    $kendo-color-editor-preview-gap: $kendo-color-editor-preview-gap,
+    $kendo-color-editor-sm-preview-gap: $kendo-color-editor-sm-preview-gap,
+    $kendo-color-editor-md-preview-gap: $kendo-color-editor-md-preview-gap,
+    $kendo-color-editor-lg-preview-gap: $kendo-color-editor-lg-preview-gap,
     $kendo-color-editor-sm-color-preview-width: $kendo-color-editor-sm-color-preview-width,
     $kendo-color-editor-sm-color-preview-height: $kendo-color-editor-sm-color-preview-height,
     $kendo-color-editor-md-color-preview-width: $kendo-color-editor-md-color-preview-width,
@@ -232,6 +202,5 @@ $kendo-color-editor-sizes: (
     $kendo-color-editor-lg-views-padding-x: $kendo-color-editor-lg-views-padding-x,
     $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color,
     $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline,
-    $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset,
-    $kendo-color-editor-sizes: $kendo-color-editor-sizes
+    $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset
 );

package/scss/colorgradient/_layout.scss

@@ -62,7 +62,7 @@
             font-size: $kendo-color-gradient-input-label-font-size
         }
 
-        .k-input-inner {
+        .k-input .k-input-inner {
             padding-inline: k-spacing(2);
             text-align: start;
             text-overflow: ellipsis;