@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/chip/_theme.scss

@@ -1,92 +1,91 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/chip/_theme.scss" as *;
 
 @mixin kendo-chip--theme() {
 
-    .k-chip {
-        border-color: var( --kendo-chip-border, initial );
-        color: var( --kendo-chip-text, initial );
-        background-color: var( --kendo-chip-bg, initial );
+    @include kendo-chip--theme-base();
+
+    .k-chip.k-chip-solid-base {
+        border-color: $kendo-chip-border;
+        color: $kendo-chip-text;
+        background-color: $kendo-chip-bg;
 
         &:hover,
         &.k-hover {
-            --kendo-chip-text: var( --kendo-chip-hover-text );
-            --kendo-chip-bg: var( --kendo-chip-hover-bg );
-            --kendo-chip-border: var( --kendo-chip-hover-border );
+            color: $kendo-chip-hover-text;
+            background-color: $kendo-chip-hover-bg;
+            border-color: $kendo-chip-hover-border;
         }
 
         &:focus,
         &.k-focus {
-            --kendo-chip-text: var( --kendo-chip-focus-text );
-            --kendo-chip-bg: var( --kendo-chip-focus-bg );
-            --kendo-chip-border: var( --kendo-chip-focus-border );
+            color: $kendo-chip-focus-text;
+            background-color: $kendo-chip-focus-bg;
+            border-color: $kendo-chip-focus-border;
         }
 
         &.k-chip-outline:focus::after,
         &.k-chip-outline.k-focus::after {
-            outline-color: var( --kendo-chip-focus-outline, initial);
+            outline-color: $kendo-chip-focus-outline;
         }
 
         &.k-selected {
-            --kendo-chip-text: var( --kendo-chip-selected-text );
-            --kendo-chip-bg: var( --kendo-chip-selected-bg );
-            --kendo-chip-border: var( --kendo-chip-selected-border );
+            color: $kendo-chip-selected-text;
+            background-color: $kendo-chip-selected-bg;
+            border-color: $kendo-chip-selected-border;
         }
 
         &:disabled,
         &.k-disabled {
-            --kendo-chip-text: var( --kendo-chip-disabled-text );
-            --kendo-chip-bg: var( --kendo-chip-disabled-bg );
-            --kendo-chip-border: var( --kendo-chip-disabled-border );
+            color: $kendo-chip-disabled-text;
+            background-color: $kendo-chip-disabled-bg;
+            border-color: $kendo-chip-disabled-border;
         }
 
     }
 
-    @each $fill-mode, $theme-colors in $kendo-chip-theme-colors {
-        @each $theme-color, $color-props in $theme-colors {
-            $_text-color: map.get( $color-props, text );
-            $_bg: map.get( $color-props, bg );
-            $_border-color: map.get( $color-props, border );
-
-            $_hover-text: map.get( $color-props, hover-text );
-            $_hover-bg: map.get( $color-props, hover-bg );
-            $_hover-border: map.get( $color-props, hover-border );
-
-            $_focus-text: map.get( $color-props, focus-text );
-            $_focus-bg: map.get( $color-props, focus-bg );
-            $_focus-border: map.get( $color-props, focus-border );
-            $_focus-outline: map.get( $color-props, focus-outline );
-
-            $_selected-text: map.get( $color-props, selected-text );
-            $_selected-bg: map.get( $color-props, selected-bg );
-            $_selected-border: map.get( $color-props, selected-border );
-
-            $_disabled-text: map.get( $color-props, disabled-text );
-            $_disabled-bg: map.get( $color-props, disabled-bg );
-            $_disabled-border: map.get( $color-props, disabled-border );
-
-            .k-chip-#{$fill-mode}-#{$theme-color} {
-                --kendo-chip-text: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );
-                --kendo-chip-bg: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
-                --kendo-chip-border: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-border, #{$_border-color} );
+    @each $name, $color in $kendo-chip-theme-colors {
+        .k-chip-solid-#{$name} {
+            border-color: k-color(#{$name}-subtle);
+            &:hover,
+            &.k-hover {
+                border-color: k-color(#{$name}-subtle-hover);
+            }
+            &:focus,
+            &.k-focus {
+                border-color: k-color(#{$name}-on-subtle);
+                box-shadow: none;
+            }
+            &.k-selected {
+                border-color: k-color(#{$name}-subtle-active);
+            }
+        }
 
-                --kendo-chip-hover-text: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-hover-text, #{$_hover-text} );
-                --kendo-chip-hover-bg: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-hover-bg, #{$_hover-bg} );
-                --kendo-chip-hover-border: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-hover-border, #{$_hover-border} );
+        .k-chip-outline-#{$name} {
+            &:hover,
+            &.k-hover {
+                color: k-color(app-surface);
+                background-color: k-color(#{$name}-on-surface);
+                border-color: k-color(#{$name}-on-surface);
+            }
 
-                --kendo-chip-focus-text: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-focus-text, #{$_focus-text} );
-                --kendo-chip-focus-bg: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-focus-bg, #{$_focus-bg} );
-                --kendo-chip-focus-border: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-focus-border, #{$_focus-border} );
-                --kendo-chip-focus-outline: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-focus-outline, #{$_focus-outline} );
+            &:focus,
+            &.k-focus {
+                box-shadow: none;
+            }
 
-                --kendo-chip-selected-text: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-selected-text, #{$_selected-text} );
-                --kendo-chip-selected-bg: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-selected-bg, #{$_selected-bg} );
-                --kendo-chip-selected-border: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-selected-border, #{$_selected-border} );
+            &.k-selected {
+                color: k-color(app-surface);
+                background-color: k-color(#{$name}-on-surface);
+                border-color: k-color(#{$name}-on-surface);
+            }
 
-                --kendo-chip-disabled-text: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-disabled-text, #{$_disabled-text} );
-                --kendo-chip-disabled-bg: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-disabled-bg, #{$_disabled-bg} );
-                --kendo-chip-disabled-border: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-disabled-border, #{$_disabled-border} );
+            @if ($name == "warning") {
+                color: k-color(#{$name}-on-surface);
+                background-color: transparent;
+                border-color: currentColor;
             }
         }
     }

package/scss/chip/_variables.scss

@@ -5,27 +5,27 @@
 
 /// The width of the border around the Chip.
 /// @group chip
-$kendo-chip-border-width: 1px !default;
+$kendo-chip-border-width: var( --kendo-chip-border-width, 1px ) !default;
 /// The spacing between the text and the icons of the Chip.
 /// @group chip
-$kendo-chip-spacing: k-spacing(1) !default;
+$kendo-chip-spacing: var( --kendo-chip-spacing, k-spacing(1) ) !default;
 
 /// The font family of the Chip.
 /// @group chip
-$kendo-chip-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-chip-font-family: var( --kendo-chip-font-family, var( --kendo-font-family, inherit ) ) !default;
 
 /// The width of the Chip' avatar.
 /// @group chip
-$kendo-chip-avatar-width: 1em !default;
+$kendo-chip-avatar-width: var( --kendo-chip-avatar-width, 1em ) !default;
 /// The height of the Chip' avatar.
 /// @group chip
-$kendo-chip-avatar-height: 1em !default;
+$kendo-chip-avatar-height: var( --kendo-chip-avatar-height, 1em ) !default;
 /// The flex basis of the Chip' avatar.
 /// @group chip
 $kendo-chip-avatar-flex-basis: 1em !default;
 /// The text color of the disabled Chip.
 /// @group chip
-$kendo-chip-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-chip-disabled-text: var( --kendo-chip-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
 
 /// The offset of the outline focused Chip.
 /// @group chip
@@ -42,7 +42,7 @@ $kendo-chip-focus-outline-style: solid !default;
 $kendo-chip-sm-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium Chip.
 /// @group chip
-$kendo-chip-md-padding-x: k-spacing(2) !default;
+$kendo-chip-md-padding-x: var( --kendo-chip-padding-x, k-spacing(2) ) !default;
 /// The horizontal padding of the large Chip.
 /// @group chip
 $kendo-chip-lg-padding-x: k-spacing(2) !default;
@@ -52,21 +52,21 @@ $kendo-chip-lg-padding-x: k-spacing(2) !default;
 $kendo-chip-sm-padding-y: k-spacing(0.5) !default;
 /// The vertical padding of the medium Chip.
 /// @group chip
-$kendo-chip-md-padding-y: k-spacing(1) !default;
+$kendo-chip-md-padding-y: var( --kendo-chip-padding-y, k-spacing(1) ) !default;
 /// The vertical padding of the large Chip.
 /// @group chip
 $kendo-chip-lg-padding-y: k-spacing(1.5) !default;
 
 /// The font weight of the Chip.
 /// @group chip
-$kendo-chip-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+$kendo-chip-font-weight: var(--kendo-chip-font-weight, var( --kendo-font-weight-normal, normal ) ) !default;
 
 /// The font size of the small Chip.
 /// @group chip
 $kendo-chip-sm-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the medium Chip.
 /// @group chip
-$kendo-chip-md-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chip-md-font-size: var( --kendo-chip-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The font size of the large Chip.
 /// @group chip
 $kendo-chip-lg-font-size: var( --kendo-font-size, inherit ) !default;
@@ -76,7 +76,7 @@ $kendo-chip-lg-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-chip-sm-line-height: var( --kendo-line-height, normal ) !default;
 /// The medium Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-md-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-chip-md-line-height: var( --kendo-chip-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The large Chip's line height that is related to the $kendo-font-size.
 /// @group chip
 $kendo-chip-lg-line-height: var( --kendo-line-height, normal ) !default;
@@ -109,9 +109,6 @@ $kendo-chip-sizes: (
     )
 ) !default;
 
-
-$kendo-chip-brand-colors: ( error, success, info ) !default;
-
 // Matrices with theme colors in the order: bg, color, border, outline
 
 // The color matrix for the base Chip
@@ -124,91 +121,66 @@ $_tc-base-matrix: (
         selected: (k-color(primary), k-color(on-primary), k-color(primary)),
         selected-hover: (k-color(primary), k-color(on-primary), k-color(primary)),
         disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
-    ),
-    outline: (
-        normal: (transparent, color-on-surface, currentColor),
-        hover: (color-on-surface, app-surface, color-on-surface),
-        focus: (transparent, color-on-surface, currentColor, inherit),
-        focus-hover: (color-on-surface, app-surface, color-on-surface, inherit),
-        selected: (color-on-surface, app-surface, color-on-surface),
-        selected-hover: (color-subtle, color-on-surface, color-on-subtle),
-        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
-    ),
-) !default;
-
-// The color matrix for the error, success and info Chips
-$_tc-brand-matrix: (
-    solid: (
-        normal: (color-subtle, color-on-subtle, color-subtle),
-        hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
-        focus: (color-subtle, color-on-subtle, color-on-subtle),
-        focus-hover: (color-subtle, color-on-subtle, color-on-subtle),
-        selected: (color-subtle-active, color-on-subtle, color-subtle-active),
-        selected-hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
-        disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
-    ),
-    outline: (
-        normal: (transparent, color-on-surface, currentColor),
-        hover: (color-on-surface, app-surface, color-on-surface),
-        focus: (transparent, color-on-surface, color-on-surface, inherit),
-        focus-hover: (color-on-surface, app-surface, color-on-surface, inherit),
-        selected: (color-on-surface, app-surface, color-on-surface),
-        selected-hover: (color-on-surface, app-surface, color-on-surface),
-        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
     )
 ) !default;
 
-// The color matrix for the warning Chips
-$_tc-warning-matrix: (
-    solid: (
-        normal: (color-subtle, color-on-subtle, color-subtle),
-        hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
-        focus: (color-subtle, color-on-subtle, color-on-subtle),
-        focus-hover: (color-subtle, color-on-subtle, color-on-subtle),
-        selected: (color-subtle-active, color-on-subtle, color-subtle-active),
-        selected-hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
-        disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
-    ),
-    outline: (
-        normal: (transparent, color-on-surface, currentColor),
-        hover: (color-on-surface, app-surface, color-on-surface),
-        focus: (transparent, color-on-surface, color-on-surface, inherit),
-        focus-hover: (color-on-surface, app-surface, color-on-surface, inherit),
-        selected: (color-on-surface, app-surface, color-on-surface),
-        selected-hover: (color-on-surface, app-surface, color-on-surface),
-        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
-    )
-) !default;
+/// The base text color of the solid Chip.
+/// @group chip
+$kendo-chip-text: var( --kendo-chip-text, k-color(base-on-subtle) ) !default;
+/// The base background color of the solid Chip.
+/// @group chip
+$kendo-chip-bg: var( --kendo-chip-bg, k-color(base-subtle) ) !default;
+/// The base border color of the solid Chip.
+/// @group chip
+$kendo-chip-border: var( --kendo-chip-border, k-color(base-subtle) ) !default;
+/// The base text color of the hovered solid Chip.
+/// @group chip
+$kendo-chip-hover-text: var( --kendo-chip-hover-text, k-color(base-on-subtle) ) !default;
+/// The base background color of the hovered solid Chip.
+/// @group chip
+$kendo-chip-hover-bg: var( --kendo-chip-hover-bg, k-color(base-subtle-hover) ) !default;
+/// The base border color of the hovered solid Chip.
+/// @group chip
+$kendo-chip-hover-border: var( --kendo-chip-hover-border, k-color(base-subtle-hover) ) !default;
+/// The base text color of the focused solid Chip.
+/// @group chip
+$kendo-chip-focus-text: var( --kendo-chip-focused-text, k-color(base-on-subtle) ) !default;
+/// The base background color of the focused solid Chip.
+/// @group chip
+$kendo-chip-focus-bg: var( --kendo-chip-focused-bg, k-color(base-subtle) ) !default;
+/// The base border color of the focused solid Chip.
+/// @group chip
+$kendo-chip-focus-border: var( --kendo-chip-focused-border, k-color(base-on-subtle) ) !default;
+/// The base outline color of the focused solid Chip.
+/// @group chip
+$kendo-chip-focus-outline: var( --kendo-chip-focus-outline, initial) !default;
+/// The base text color of the selected solid Chip.
+/// @group chip
+$kendo-chip-selected-text: var( --kendo-chip-selected-text, k-color(on-primary) ) !default;
+/// The base background color of the selected solid Chip.
+/// @group chip
+$kendo-chip-selected-bg: var( --kendo-chip-selected-bg, k-color(primary) )  !default;
+/// The base border color of the selected solid Chip.
+/// @group chip
+$kendo-chip-selected-border: var( --kendo-chip-selected-border, k-color(primary) ) !default;
+/// The base text color of the disabled solid Chip.
+/// @group chip
+$kendo-chip-disabled-text: var( --kendo-chip-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+/// The base background color of the disabled solid Chip.
+/// @group chip
+$kendo-chip-disabled-bg: var( --kendo-chip-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 6%, transparent) )  !default;
+/// The base border color of the disabled solid Chip.
+/// @group chip
+$kendo-chip-disabled-border: var( --kendo-chip-disabled-border, transparent ) !default;
 
 /// The theme colors map for the Chip.
-$kendo-chip-theme-colors: () !default;
-
-// Map for the base theme color
-@each $fill-mode, $ui-states in $_tc-base-matrix {
-    $kendo-chip-theme-colors: map.deep-merge(
-        $kendo-chip-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, base, base, $ui-states )
-    );
-}
-
-// Map for the brand theme colors
-@each $fill-mode, $ui-states in $_tc-brand-matrix {
-    @each $brand-color in $kendo-chip-brand-colors {
-        $kendo-chip-theme-colors: map.deep-merge(
-            $kendo-chip-theme-colors,
-            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $brand-color, $ui-states )
-        )
-    }
-}
-
-// Map for the warning theme color
-@each $fill-mode, $ui-states in $_tc-warning-matrix {
-    $kendo-chip-theme-colors: map.deep-merge(
-        $kendo-chip-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
-    );
-}
-
+$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
 
@@ -219,3 +191,36 @@ $kendo-chip-list-sizes: (
     md: k-spacing(1),
     lg: k-spacing(1)
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/chip/_variables.scss" with (
+    $kendo-chip-border-width: $kendo-chip-border-width,
+    $kendo-chip-spacing: $kendo-chip-spacing,
+    $kendo-chip-sm-padding-x: $kendo-chip-sm-padding-x,
+    $kendo-chip-md-padding-x: $kendo-chip-md-padding-x,
+    $kendo-chip-lg-padding-x: $kendo-chip-lg-padding-x,
+    $kendo-chip-sm-padding-y: $kendo-chip-sm-padding-y,
+    $kendo-chip-md-padding-y: $kendo-chip-md-padding-y,
+    $kendo-chip-lg-padding-y: $kendo-chip-lg-padding-y,
+    $kendo-chip-font-weight: $kendo-chip-font-weight,
+    $kendo-chip-sm-font-size: $kendo-chip-sm-font-size,
+    $kendo-chip-md-font-size: $kendo-chip-md-font-size,
+    $kendo-chip-lg-font-size: $kendo-chip-lg-font-size,
+    $kendo-chip-sm-line-height: $kendo-chip-sm-line-height,
+    $kendo-chip-md-line-height: $kendo-chip-md-line-height,
+    $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,
+    $kendo-chip-solid-focus-bg: $kendo-chip-focus-bg,
+    $kendo-chip-solid-hover-bg: $kendo-chip-hover-bg,
+    $kendo-chip-solid-selected-bg: $kendo-chip-selected-bg,
+    $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
+);

package/scss/color-preview/_layout.scss

@@ -1,76 +1,16 @@
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/color-preview/_layout.scss" as *;
 
 @mixin kendo-color-preview--layout() {
+    @include kendo-color-preview--layout-base();
 
-    // Color Preview
-    .k-color-preview {
-        width: 100%;
-        height: 100%;
-        border-width: var( --kendo-color-preview-border-width, #{$kendo-color-preview-border-width} );
-        border-radius: var( --kendo-color-preview-border-radius, #{$kendo-color-preview-border-radius} );
-        box-sizing: border-box;
-        border-style: solid;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        position: relative;
-        overflow: hidden;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-    // Current Color
-    .k-coloreditor-current-color {
-        cursor: pointer;
-    }
-
-    // Icon color preview
     .k-icon-color-preview {
-        border-width: 0;
-        border-radius: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: center;
-        justify-content: center;
-        gap: 2px;
 
         .k-color-preview-mask {
-            width: var( --kendo-icon-size, 1rem );
+            width: $kendo-icon-size;
             height: 3px;
         }
     }
-
-    // Color Preview Mask
-    .k-color-preview-mask {
-        width: 100%;
-        min-width: var( --kendo-icon-size, 1rem );
-        height: 100%;
-        position: relative;
-    }
-    .k-color-preview-mask::before {
-        content: "";
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: -1;
-        background: var( --kendo-color-preview-transparent-color-image, #{$kendo-color-preview-transparent-color-image} );
-        background-size: contain;
-        background-position: 0 0;
-    }
-
-    // No Color
-    .k-no-color .k-color-preview-mask::before {
-        content: "";
-        background-color: var( --kendo-color-preview-no-color-bg, #{$kendo-color-preview-no-color-bg} );
-        background-image: var( --kendo-color-preview-no-color-image, #{$kendo-color-preview-no-color-image} );
-        background-size: 100% 100%;
-        background-position: 0 0;
-    }
-
 }

package/scss/color-preview/_theme.scss

@@ -1,32 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/color-preview/_theme.scss" as *;
 
 @mixin kendo-color-preview--theme() {
-
-    // Color Preview
-    .k-color-preview {
-        @include fill(
-            var( --kendo-color-preview-text, #{$kendo-color-preview-text} ),
-            var( --kendo-color-preview-bg, #{$kendo-color-preview-bg} ),
-            var( --kendo-color-preview-border, #{$kendo-color-preview-border} )
-        );
-
-        &:hover,
-        &.k-hover {
-            @include fill(
-                $border: var( --kendo-color-preview-hover-border, #{$kendo-color-preview-hover-border} )
-            );
-        }
-    }
-
-    // Mask
-    [disabled],
-    .k-disabled {
-        .k-color-preview-mask::before {
-            @include fill(
-                $bg: k-color(base-subtle)
-            );
-        }
-    }
-
+    @include kendo-color-preview--theme-base();
 }

package/scss/color-preview/_variables.scss

@@ -3,34 +3,48 @@
 
 /// Border radius of the color preview.
 /// @group color-preview
-$kendo-color-preview-border-radius: k-border-radius(md) !default;
+$kendo-color-preview-border-radius: var(--kendo-color-preview-border-radius, k-border-radius(md)) !default;
 /// Border width of the color preview.
 /// @group color-preview
-$kendo-color-preview-border-width: 1px !default;
+$kendo-color-preview-border-width: var(--kendo-color-preview-border-width, 1px) !default;
 /// Default background color of the color preview.
 /// @group color-preview
-$kendo-color-preview-bg: transparent !default;
+$kendo-color-preview-bg: var(--kendo-color-preview-bg, transparent) !default;
 /// Text color of the color preview.
 /// @group color-preview
-$kendo-color-preview-text: inherit !default;
+$kendo-color-preview-text: var(--kendo-color-preview-text, inherit) !default;
 /// Border color of the color preview.
 /// @group color-preview
-$kendo-color-preview-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$kendo-color-preview-border: var(--kendo-color-preview-border, color-mix(in srgb, k-color(on-app-surface) 28%, transparent)) !default;
 /// Hover Border color of the color preview.
 /// @group color-preview
-$kendo-color-preview-hover-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$kendo-color-preview-hover-border: var(--kendo-color-preview-hover-border, color-mix(in srgb, k-color(on-app-surface) 28%, transparent)) !default;
 
 /// Background color of the color preview when no color is selected.
 /// @group color-preview
-$kendo-color-preview-no-color-bg: k-color(app-surface) !default;
+$kendo-color-preview-no-color-bg: var(--kendo-color-preview-no-color-bg, k-color(app-surface)) !default;
 /// Text color of the color preview when no color is selected.
 /// @group color-preview
-$kendo-color-preview-no-color-text: k-color(error-on-surface) !default;
+$kendo-color-preview-no-color-text: var(--kendo-color-preview-no-color-text, k-color(error-on-surface)) !default;
 /// Border color of the color preview when no color is selected.
 /// @group color-preview
-$kendo-color-preview-no-color-border: currentColor !default;
+$kendo-color-preview-no-color-border: var(--kendo-color-preview-no-color-border, currentColor) !default;
 // Background image of the color preview when no color is selected.
 $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$kendo-color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
 
 // Background image of the color preview mask.
 $kendo-color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
+
+@forward "@progress/kendo-theme-core/scss/components/color-preview/_variables.scss" with (
+    $kendo-color-preview-border-radius: $kendo-color-preview-border-radius,
+    $kendo-color-preview-border-width: $kendo-color-preview-border-width,
+    $kendo-color-preview-bg: $kendo-color-preview-bg,
+    $kendo-color-preview-text: $kendo-color-preview-text,
+    $kendo-color-preview-border: $kendo-color-preview-border,
+    $kendo-color-preview-hover-border: $kendo-color-preview-hover-border,
+    $kendo-color-preview-no-color-bg: $kendo-color-preview-no-color-bg,
+    $kendo-color-preview-no-color-text: $kendo-color-preview-no-color-text,
+    $kendo-color-preview-no-color-border: $kendo-color-preview-no-color-border,
+    $kendo-color-preview-no-color-image: $kendo-color-preview-no-color-image,
+    $kendo-color-preview-transparent-color-image: $kendo-color-preview-transparent-color-image
+);