@progress/kendo-theme-fluent 5.7.0

package/scss/chip/_layout.scss

@@ -0,0 +1,156 @@
+@use "_variables.scss" as *;
+@use "../core/_variables.scss" as *;
+
+@mixin kendo-chip--layout() {
+
+    // Chip
+    .k-chip {
+        padding-inline: var( --INTERNAL-kendo-chip-padding-x, 0 );
+        padding-block: var( --INTERNAL-kendo-chip-padding-y, 0 );
+        border-width: var( --kendo-chip-border-width, #{ $kendo-chip-border-width } );
+        border-style: solid;
+        outline: 0;
+        font-family: var( --kendo-chip-font-family, #{ $kendo-chip-font-family } );
+        font-size: var( --INTERNAL-kendo-chip-font-size, 1rem );
+        line-height: var( --INTERNAL-kendo-chip-line-height, normal );
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: center;
+        gap: var( --kendo-chip-spacing, #{ $kendo-chip-spacing } );
+        position: relative;
+        overflow: hidden;
+        cursor: pointer;
+        user-select: none;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        .k-selected-icon-wrapper {
+            display: none !important; // sass-lint:disable-line no-important
+        }
+
+        &:hover,
+        &:focus {
+            outline: 0;
+            text-decoration: none;
+        }
+
+        &.k-chip-outline.k-focus::after,
+        &.k-chip-outline:focus::after {
+                content: '';
+                position: absolute;
+                border: medium none;
+                inset: var( --kendo-chip-focus-offset, #{ $kendo-chip-focus-offset } );
+                outline-width: var( --kendo-chip-focus-outline-width, #{ $kendo-chip-focus-outline-width } );
+                outline-style: var( --kendo-chip-focus-outline-style, #{ $kendo-chip-focus-outline-style } );
+                z-index: 1;
+        }
+    }
+
+
+    // Chip content
+    .k-chip-content {
+        padding: .5em 0;
+        margin: -.5em 0;
+        min-width: 0;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        overflow: hidden;
+        flex: 1 1 auto;
+    }
+
+    .k-chip-content:first-child {
+        margin-inline-start: var( --kendo-chip-spacing, #{ $kendo-chip-spacing } );
+    }
+    .k-chip-content:last-child {
+        margin-inline-end: var( --kendo-chip-spacing, #{ $kendo-chip-spacing } );
+    }
+
+    // Chip text
+    .k-chip-text,
+    .k-chip-label {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        flex: 1 1 auto;
+    }
+
+
+    // Chip avatar
+    .k-chip-avatar {
+        width: var( --kendo-chip-avatar-width, #{ $kendo-chip-avatar-width } );
+        height: var( --kendo-chip-avatar-height, #{ $kendo-chip-avatar-height } );
+        flex-basis: var( --kendo-chip-avatar-flex-basis, #{ $kendo-chip-avatar-flex-basis } );
+        border-radius: 50%;
+        background-size: cover;
+        background-position: center;
+        flex: none;
+    }
+
+
+    // Chip icon
+    .k-chip-icon {
+        font-size: inherit;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+    }
+
+
+    // Actions
+    .k-chip-actions {
+        margin: -5em 0;
+        flex: none;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-self: center;
+    }
+    .k-chip-action {
+        flex: none;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-self: center;
+    }
+
+
+    // Chip list
+    .k-chip-list {
+        min-width: 0px;
+        display: inline-flex;
+        flex-wrap: wrap;
+        align-items: center;
+        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 );
+
+        .k-chip-#{$size} {
+            --INTERNAL-kendo-chip-padding-x: #{ $_padding-x };
+            --INTERNAL-kendo-chip-padding-y: #{ $_padding-y };
+            --INTERNAL-kendo-chip-font-size: #{ $_font-size };
+            --INTERNAL-kendo-chip-line-height: #{ $_line-height };
+        }
+    }
+
+    // Sizes
+    @each $name, $size in $kendo-chip-list-sizes {
+        .k-chip-list-#{$name} {
+            gap: $size;
+        }
+    }
+    
+}

package/scss/chip/_theme.scss

@@ -0,0 +1,97 @@
+@use "_variables.scss" as *;
+@use "../core/mixins/" as *;
+
+@mixin kendo-chip--theme() {
+
+    .k-chip {
+        --INTERNAL-kendo-chip-text: var( --kendo-chip-text );
+        --INTERNAL-kendo-chip-bg: var( --kendo-chip-bg );
+        --INTERNAL-kendo-chip-border: var( --kendo-chip-border );
+
+        border-color: var( --INTERNAL-kendo-chip-border, initial );
+        color: var( --INTERNAL-kendo-chip-text, initial );
+        background-color: var( --INTERNAL-kendo-chip-bg, initial );
+
+        &:hover,
+        &.k-hover {
+            --INTERNAL-kendo-chip-text: var( --kendo-chip-hover-text );
+            --INTERNAL-kendo-chip-bg: var( --kendo-chip-hover-bg );
+            --INTERNAL-kendo-chip-border: var( --kendo-chip-hover-border );
+        }
+
+        &:focus,
+        &.k-focus {
+            --INTERNAL-kendo-chip-text: var(--kendo-chip-focus-text );
+            --INTERNAL-kendo-chip-bg: var(--kendo-chip-focus-bg );
+            --INTERNAL-kendo-chip-border: var(--kendo-chip-focus-border );
+        }
+
+        &.k-chip-outline:focus::after,
+        &.k-chip-outline.k-focus::after {
+            outline-color: var( --kendo-chip-focus-outline, initial);
+        }
+
+        &.k-selected {
+            --INTERNAL-kendo-chip-text: var( --kendo-chip-selected-text );
+            --INTERNAL-kendo-chip-bg: var( --kendo-chip-selected-bg );
+            --INTERNAL-kendo-chip-border: var( --kendo-chip-selected-border );
+        }
+
+        &:disabled,
+        &.k-disabled {
+            --INTERNAL-kendo-chip-text: var( --kendo-chip-disabled-text );
+            --INTERNAL-kendo-chip-bg: var( --kendo-chip-disabled-bg );
+            --INTERNAL-kendo-chip-border: var( --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} );
+
+                --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} );
+
+                --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} );
+
+                --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} );
+
+                --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} );
+            }
+        }
+    }
+
+}

package/scss/chip/_variables.scss

@@ -0,0 +1,210 @@
+@use "sass:map";
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../core/color-system/" as *;
+
+// Chip
+
+/// Width of the border around the button.
+/// @group chip
+$kendo-chip-border-width: 1px !default;
+/// The spacing between the text and the icons of the chip.
+/// @group chip
+$kendo-chip-spacing: map-get( $kendo-spacing, 1 ) !default;
+
+/// The font family of the chip.
+/// @group chip
+$kendo-chip-font-family: var( --kendo-font-family, inherit );
+
+/// The chip avatar width.
+/// @group chip
+$kendo-chip-avatar-width: 1em;
+/// The chip avatar height.
+/// @group chip
+$kendo-chip-avatar-height: 1em;
+/// The chip avatar flex basis.
+/// @group chip
+$kendo-chip-avatar-flex-basis: 1em;
+/// The text color of disabled chip.
+/// @group chip
+$kendo-chip-disabled-text: var( --kendo-disabled-text, inherit ) !default;
+/// The background of solid disabled chip.
+/// @group chip
+$kendo-chip-solid-disabled-bg: var( --kendo-disabled-bg, transparent ) !default;
+/// The border of solid disabled chip.
+/// @group chip
+$kendo-chip-solid-disabled-border: var( --kendo-disabled-border, inherit ) !default;
+/// The background of outline disabled chip.
+/// @group chip
+$kendo-chip-outline-disabled-bg: var( $kendo-component-bg, transparent ) !default;
+/// The border of outline disabled chip.
+/// @group chip
+$kendo-chip-outline-disabled-border: get-theme-color-var( neutral-90 ) !default;
+
+/// Offset of the outline focused chip.
+/// @group chip
+$kendo-chip-focus-offset: map-get( $kendo-spacing, thin ) !default;
+/// Outline width of the outline focused button.
+/// @group chip
+$kendo-chip-focus-outline-width: map-get( $kendo-spacing, hair) !default;
+/// Outline style of the outline focused button.
+/// @group chip
+$kendo-chip-focus-outline-style: solid !default;
+
+/// Horizontal padding of the chip.
+/// @group chip
+$kendo-chip-padding-x-sm: map-get( $kendo-spacing, 2 ) !default;
+$kendo-chip-padding-x-md: map-get( $kendo-spacing, 2 ) !default;
+$kendo-chip-padding-x-lg: map-get( $kendo-spacing, 2 ) !default;
+
+/// Vertical padding of the chip.
+/// @group chip
+$kendo-chip-padding-y-sm: ( map-get( $kendo-spacing, 1 ) - map-get( $kendo-spacing, thin ) ) !default;
+$kendo-chip-padding-y-md: ( map-get( $kendo-spacing, 1 ) ) !default;
+$kendo-chip-padding-y-lg: ( map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) ) !default;
+
+/// Font sizes of the chip.
+/// @group chip
+$kendo-chip-font-size-sm: var( --kendo-font-size, inherit ) !default;
+$kendo-chip-font-size-md: var( --kendo-font-size, inherit ) !default;
+$kendo-chip-font-size-lg: var( --kendo-font-size, inherit ) !default;
+
+/// Line heights of the chip that are connected to the $font-size.
+/// @group chip
+$kendo-chip-line-height-sm: var( --kendo-line-height, normal ) !default;
+$kendo-chip-line-height-md: var( --kendo-line-height, normal ) !default;
+$kendo-chip-line-height-lg: var( --kendo-line-height, normal ) !default;
+
+/// Sizes map for the chip.
+/// @group chip
+$kendo-chip-sizes: (
+    sm: (
+        padding-x: $kendo-chip-padding-x-sm,
+        padding-y: $kendo-chip-padding-y-sm,
+        font-size: $kendo-chip-font-size-sm,
+        line-height: $kendo-chip-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-chip-padding-x-md,
+        padding-y: $kendo-chip-padding-y-md,
+        font-size: $kendo-chip-font-size-md,
+        line-height: $kendo-chip-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-chip-padding-x-lg,
+        padding-y: $kendo-chip-padding-y-lg,
+        font-size: $kendo-chip-font-size-lg,
+        line-height: $kendo-chip-line-height-lg
+    )
+) !default;
+
+
+$kendo-chip-brand-colors: ( error, success, info );
+
+// Matrices with theme colors in the order: bg, color, border, outline
+
+// Color matrix for the base chip
+$_tc-base-matrix: (
+    solid: (
+        normal: (20, 160, 20),
+        hover: (30, 190, 30),
+        focus: (20, 160, 130),
+        focus-hover: (20, 190, 130),
+        selected: (get-theme-color-var( primary-100 ), $white, get-theme-color-var( primary-100 )),
+        selected-hover: (get-theme-color-var( primary-100 ), $white, get-theme-color-var( primary-100 )),
+        disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
+    ),
+    outline: (
+        normal: (transparent, 160, currentColor),
+        hover: (190, $white, 190),
+        focus: (transparent, 160, currentColor, inherit),
+        focus-hover: (190, $white, 190, inherit),
+        selected: (190, $white, 190),
+        selected-hover: (20, 190, 110),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), 90)
+    ),
+);
+
+// Color matrix for error, success, info chips
+$_tc-brand-matrix: (
+    solid: (
+        normal: (20, 160, 20),
+        hover: (30, 190, 30),
+        focus: (20, 160, 160),
+        focus-hover: (20, 190, 160),
+        selected: (40, 190, 40),
+        selected-hover: (30, 190, 30),
+        disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
+    ),
+    outline: (
+        normal: (transparent, 160, currentColor),
+        hover: (190, $white, 190),
+        focus: (transparent, 160, 160, inherit),
+        focus-hover: (190, $white, 190, inherit),
+        selected: (190, $white, 190),
+        selected-hover: (190, $white, 190),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
+    )
+);
+
+// Color matrix for warning chips
+$_tc-warning-matrix: (
+    solid: (
+        normal: (20, get-theme-color-var( grey-160 ), 20),
+        hover: (30, get-theme-color-var( grey-190 ), 30),
+        focus: (20, get-theme-color-var( grey-160 ), 160),
+        focus-hover: (20, get-theme-color-var( grey-190 ), 160),
+        selected: (40, get-theme-color-var( grey-190 ), 40),
+        selected-hover: (30, get-theme-color-var( grey-190 ), 30),
+        disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
+    ),
+    outline: (
+        normal: (transparent, 160, currentColor),
+        hover: (190, $white, 190),
+        focus: (transparent, 160, 160, inherit),
+        focus-hover: (190, $white, 190, inherit),
+        selected: (190, $white, 190),
+        selected-hover: (190, $white, 190),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
+    )
+);
+
+/// Theme colors map for the button.
+$kendo-chip-theme-colors: ();
+
+// Map for base theme color
+@each $fill-mode, $ui-states in $_tc-base-matrix {
+    $kendo-chip-theme-colors: map.deep-merge(
+        $kendo-chip-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, base, neutral, $ui-states )
+    );
+}
+
+// Map for 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,
+            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $brand-color, $ui-states )
+        )
+    }
+}
+
+// Map for warning theme color
+@each $fill-mode, $ui-states in $_tc-warning-matrix {
+    $kendo-chip-theme-colors: map.deep-merge(
+        $kendo-chip-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+    );
+}
+
+
+// Chip List
+
+/// The sizes of the chip list.
+/// @group chip
+$kendo-chip-list-sizes: (
+    sm: map-get( $kendo-spacing, 1 ),
+    md: map-get( $kendo-spacing, 1 ),
+    lg: map-get( $kendo-spacing, 1 )
+) !default;

package/scss/chip/index.scss

@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "chip",
+    dependencies: (
+        'button',
+        'icon'
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "chip" ) {
+        @include kendo-chip--layout();
+        @include kendo-chip--theme();
+    }
+}

package/scss/color-preview/_layout.scss

@@ -0,0 +1,78 @@
+@use "../core/_variables.scss" as *;
+@use "../icon/_variables.scss" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-color-preview--layout() {
+
+    // 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-direction: row;
+        flex-wrap: 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 );
+            height: 3px;
+        }
+    }
+
+    // Color Preview Mask
+    .k-color-preview-mask {
+        width: 100%;
+        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

@@ -0,0 +1,32 @@
+@use "../core/mixins" as *;
+@use "_variables.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
+    .k-color-preview-mask::before {
+        [disabled] &,
+        .k-disabled & {
+            @include fill(
+                $bg: var( --kendo-disabled-bg )
+            );
+        }
+    }
+
+}

package/scss/color-preview/_variables.scss

@@ -0,0 +1,36 @@
+@use "../core/color-system" as *;
+@use "../core/functions" as *;
+
+/// Border radius of the color preview.
+/// @group color-preview
+$kendo-color-preview-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Border width of the color preview.
+/// @group color-preview
+$kendo-color-preview-border-width: 1px !default;
+/// Default background color of the color preview.
+/// @group color-preview
+$kendo-color-preview-bg: transparent !default;
+/// Text color of the color preview.
+/// @group color-preview
+$kendo-color-preview-text: inherit !default;
+/// Border color of the color preview.
+/// @group color-preview
+$kendo-color-preview-border: get-theme-color-var( neutral-60 ) !default;
+/// Hover Border color of the color preview.
+/// @group color-preview
+$kendo-color-preview-hover-border: get-theme-color-var( neutral-60 ) !default;
+
+/// Background color of the color preview when no color is selected.
+/// @group color-preview
+$kendo-color-preview-no-color-bg: $white !default;
+/// Text color of the color preview when no color is selected.
+/// @group color-preview
+$kendo-color-preview-no-color-text: get-theme-color( error, 190 ) !default;
+/// Border color of the color preview when no color is selected.
+/// @group color-preview
+$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: 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;

package/scss/color-preview/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "color-preview",
+    dependencies: (
+        "icon"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "color-preview" ) {
+        @include kendo-color-preview--layout();
+        @include kendo-color-preview--theme();
+    }
+}