@progress/kendo-theme-meridian 14.0.0-dev.1

package/scss/chip/_theme.scss

@@ -0,0 +1,110 @@
+@use "@progress/kendo-theme-core/scss/components/chip/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-chip--theme() {
+    @include kendo-chip--theme-base();
+
+    .k-chip {
+
+        #{k-when-default($kendo-chip-default-fill-mode, "solid")}
+        &.k-chip-solid {
+
+            @each $name in $kendo-chip-theme-colors {
+                #{k-when-default($kendo-chip-default-theme-color, $name)}
+                &.k-chip-#{$name} {
+                    @include fill(
+                        k-color(#{$name}-on-subtle),
+                        k-color(#{$name}-subtle),
+                        k-color(#{$name}),
+                    );
+
+                    &:hover,
+                    &.k-hover {
+                        @include fill( $bg: k-color(#{$name}-subtle-hover) );
+                    }
+
+                    &.k-active,
+                    &.k-selected {
+                        @include fill( $bg: k-color(#{$name}-subtle-active) );
+                    }
+
+                    @if $name == "base" {
+                        #{k-when-default($kendo-chip-default-theme-color, $name)}
+                        &.k-chip-#{$name} {
+                            border-color: k-color(#{$name}-emphasis);
+                        }
+                    }
+                }
+            }
+        }
+
+        #{k-when-default($kendo-chip-default-fill-mode, ("solid", "outline"))}
+        &.k-chip-solid,
+        &.k-chip-outline {
+            #{k-when-default($kendo-chip-default-theme-color, "base")}
+            &.k-chip-base {
+                &:focus,
+                &.k-focus {
+                    @include focus-indicator(
+                        $indicator: k-color(subtle),
+                        $type: "outline",
+                        $outline-width: $kendo-chip-focus-outline-width,
+                        $outline-offset: $kendo-chip-focus-outline-offset
+                    );
+                }
+            }
+
+            @each $name in $kendo-chip-theme-colors {
+                @if $name != "base" {
+                    #{k-when-default($kendo-chip-default-theme-color, $name)}
+                    &.k-chip-#{$name} {
+                        &:focus,
+                        &.k-focus {
+                            @include focus-indicator(
+                                $indicator: k-color(#{$name}-on-surface),
+                                $type: "outline",
+                                $outline-width: $kendo-chip-focus-outline-width,
+                                $outline-offset: $kendo-chip-focus-outline-offset
+                            );
+                        }
+                    }
+                }
+            }
+        }
+
+        #{k-when-default($kendo-chip-default-fill-mode, "outline")}
+        &.k-chip-outline {
+            @each $name in $kendo-chip-theme-colors {
+                @if $name != "base" {
+                    #{k-when-default($kendo-chip-default-theme-color, $name)}
+                    &.k-chip-#{$name} {
+                        border-color: k-color(#{$name});
+
+                        // Hover state
+                        &:hover,
+                        &.k-hover {
+                            @include fill(
+                                k-color(#{$name}-on-surface),
+                                color-mix(in srgb, k-color(#{$name}-subtle-hover) 50%, transparent),
+                                k-color(#{$name})
+                            );
+                        }
+
+                        // Selected state
+                        &.k-active,
+                        &.k-selected {
+                            @include fill(
+                                k-color(#{$name}-on-surface),
+                                color-mix(in srgb, k-color(#{$name}-subtle-active) 50%, transparent),
+                                k-color(#{$name})
+                            );
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/chip/_variables.scss

@@ -0,0 +1,215 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+
+
+// 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: 1px !default;
+/// The spacing between the text and the icons of the Chip.
+/// @group chip
+$kendo-chip-spacing: k-spacing(1) !default;
+
+/// The horizontal padding of the small Chip.
+/// @group chip
+$kendo-chip-sm-padding-x: k-spacing(1) !default;
+/// The horizontal padding of the medium Chip.
+/// @group chip
+$kendo-chip-md-padding-x: k-spacing(1) !default;
+/// The horizontal padding of the large Chip.
+/// @group chip
+$kendo-chip-lg-padding-x: k-spacing(1) !default;
+
+/// The vertical padding of the small Chip.
+/// @group chip
+$kendo-chip-sm-padding-y: k-spacing(1) !default;
+/// The vertical padding of the medium Chip.
+/// @group chip
+$kendo-chip-md-padding-y: k-spacing(1.5) !default;
+/// The vertical padding of the large Chip.
+/// @group chip
+$kendo-chip-lg-padding-y: k-spacing(2) !default;
+
+/// The font weight of the Chip.
+/// @group chip
+$kendo-chip-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+
+/// The font size of the Chip.
+/// @group chip
+$kendo-chip-font-size: null !default;
+/// The font size of the small Chip.
+/// @group chip
+$kendo-chip-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The font size of the medium Chip.
+/// @group chip
+$kendo-chip-md-font-size: var( --kendo-font-size-md, inherit ) !default;
+/// The font size of the large Chip.
+/// @group chip
+$kendo-chip-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+
+/// The Chip's line height that is related to the $kendo-font-size.
+/// @group chip
+$kendo-chip-line-height: null !default;
+/// The small Chip's line height that is related to the $kendo-font-size.
+/// @group chip
+$kendo-chip-sm-line-height: var( --kendo-line-height-xs, 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-xs, 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-xs, normal ) !default;
+
+$kendo-chip-calc-size: calc( #{$kendo-chip-md-line-height} * 1em + calc( #{$kendo-chip-md-padding-y} * 2 ) + #{$kendo-chip-border-width} * 2 ) !default;
+$kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height} * 1em + calc( #{$kendo-chip-sm-padding-y} * 2 ) + #{$kendo-chip-border-width} * 2 ) !default;
+
+/// The base background of the Chip.
+/// @group chip
+$kendo-chip-base-bg: k-color(base) !default;
+
+/// The base background color of the solid Chip.
+/// @group chip
+$kendo-chip-solid-bg: $kendo-chip-base-bg !default;
+/// The base text color of the solid Chip.
+/// @group chip
+$kendo-chip-solid-text: k-color(on-base) !default;
+/// The base border color of the solid Chip.
+/// @group chip
+$kendo-chip-solid-border: transparent !default;
+/// The base shadow of the solid Chip.
+/// @group chip
+$kendo-chip-solid-shadow: none !default;
+/// The base gradient of the solid Chip.
+/// @group chip
+$kendo-chip-solid-gradient: $kendo-button-gradient !default;
+
+/// The base background color of the focused solid Chip.
+/// @group chip
+$kendo-chip-solid-focus-bg: null !default;
+
+/// The base background color of the hovered solid Chip.
+/// @group chip
+$kendo-chip-solid-hover-bg: k-color(base-hover) !default;
+
+/// The base background color of the selected solid Chip.
+/// @group chip
+$kendo-chip-solid-selected-bg: k-color(base-active) !default;
+
+/// The base text color of the outline Chip.
+/// @group chip
+$kendo-chip-outline-text: k-color(base-on-surface) !default;
+/// The base border color of the outline Chip.
+/// @group chip
+$kendo-chip-outline-border: $kendo-chip-outline-text !default;
+/// The base shadow of the outline Chip.
+/// @group chip
+$kendo-chip-outline-shadow: none !default;
+
+/// The base background color of the hovered outline Chip.
+/// @group chip
+$kendo-chip-outline-hover-bg: color-mix(in srgb, k-color(base-hover) 70%, transparent) !default;
+/// The base text color of the hovered outline Chip.
+/// @group chip
+$kendo-chip-outline-hover-text: k-color(base-on-surface) !default;
+
+/// The base background color of the selected outline Chip.
+/// @group chip
+$kendo-chip-outline-selected-bg: color-mix(in srgb, k-color(base-active) 70%, transparent) !default;
+/// The base text color of the selected outline Chip.
+/// @group chip
+$kendo-chip-outline-selected-text: k-color(base-on-surface) !default;
+
+/// The base background color of the disabled Chip.
+/// @group chip
+$kendo-chip-disabled-bg: null !default;
+/// The base text color of the disabled Chip.
+/// @group chip
+$kendo-chip-disabled-text: null !default;
+/// The base border color of the disabled Chip.
+/// @group chip
+$kendo-chip-disabled-border: $kendo-chip-disabled-bg !default;
+
+
+/// The width of the focus outline of the Chip.
+/// @group chip
+$kendo-chip-focus-outline-width: 1px !default;
+/// The offset of the focus outline of the Chip.
+/// @group chip
+$kendo-chip-focus-outline-offset: 1px !default;
+
+/// The sizes of the small Chip list.
+/// @group chip
+$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,
+    $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-font-size: $kendo-chip-font-size,
+    $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-line-height: $kendo-chip-line-height,
+    $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-base-bg: $kendo-chip-base-bg,
+    $kendo-chip-solid-bg: $kendo-chip-solid-bg,
+    $kendo-chip-solid-text: $kendo-chip-solid-text,
+    $kendo-chip-solid-border: $kendo-chip-solid-border,
+    $kendo-chip-solid-shadow: $kendo-chip-solid-shadow,
+    $kendo-chip-solid-gradient: $kendo-chip-solid-gradient,
+    $kendo-chip-solid-focus-bg: $kendo-chip-solid-focus-bg,
+    $kendo-chip-solid-hover-bg: $kendo-chip-solid-hover-bg,
+    $kendo-chip-solid-selected-bg: $kendo-chip-solid-selected-bg,
+    $kendo-chip-outline-text: $kendo-chip-outline-text,
+    $kendo-chip-outline-border: $kendo-chip-outline-border,
+    $kendo-chip-outline-shadow: $kendo-chip-outline-shadow,
+    $kendo-chip-outline-hover-bg: $kendo-chip-outline-hover-bg,
+    $kendo-chip-outline-hover-text: $kendo-chip-outline-hover-text,
+    $kendo-chip-outline-selected-bg: $kendo-chip-outline-selected-bg,
+    $kendo-chip-outline-selected-text: $kendo-chip-outline-selected-text,
+    $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-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/color-preview/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-preview--styles() {
+    @include import-once( "color-preview" ) {
+        @include core-styles();
+        @include kendo-color-preview--layout();
+        @include kendo-color-preview--theme();
+    }
+}

package/scss/color-preview/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/color-preview/_layout.scss" as *;
+
+
+@mixin kendo-color-preview--layout() {
+    @include kendo-color-preview--layout-base();
+}

package/scss/color-preview/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/color-preview/_theme.scss" as *;
+
+
+@mixin kendo-color-preview--theme() {
+    @include kendo-color-preview--theme-base();
+}

package/scss/color-preview/_variables.scss

@@ -0,0 +1,49 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+
+// Color Preview
+/// The border radius of the ColorPreview.
+/// @group color-preview
+$kendo-color-preview-border-radius: k-border-radius(xs) !default;
+/// The width of the border around the ColorPreview.
+/// @group color-preview
+$kendo-color-preview-border-width: 1px !default;
+/// The background color of the ColorPreview.
+/// @group color-preview
+$kendo-color-preview-bg: null !default;
+/// The text color of the ColorPreview.
+/// @group color-preview
+$kendo-color-preview-text: null !default;
+/// The border color of the ColorPreview.
+/// @group color-preview
+$kendo-color-preview-border: k-color(border) !default;
+/// The border color of the hovered ColorPreview.
+/// @group color-preview
+$kendo-color-preview-hover-border: k-color(border) !default;
+
+/// The background color of the ColorPreview when no color is selected.
+/// @group color-preview
+$kendo-color-preview-no-color-bg: k-color(surface-alt) !default;
+/// The text color of the ColorPreview when no color is selected.
+/// @group color-preview
+$kendo-color-preview-no-color-text: k-color(error) !default;
+/// The border color of the ColorPreview when no color is selected.
+/// @group color-preview
+$kendo-color-preview-no-color-border: null !default;
+
+$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;
+$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
+);

package/scss/coloreditor/_index.scss

@@ -0,0 +1,24 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+@use "../color-preview/_index.scss" as *;
+@use "../colorpalette/_index.scss" as *;
+@use "../colorgradient/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-editor--styles() {
+    @include import-once( "color-editor" ) {
+        @include core-styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-color-preview--styles();
+        @include kendo-color-palette--styles();
+        @include kendo-color-gradient--styles();
+        @include kendo-color-editor--layout();
+        @include kendo-color-editor--theme();
+    }
+}

package/scss/coloreditor/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/coloreditor/_layout.scss" as *;
+
+
+@mixin kendo-color-editor--layout() {
+    @include kendo-color-editor--layout-base();
+}

package/scss/coloreditor/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/coloreditor/_theme.scss" as *;
+
+
+@mixin kendo-color-editor--theme() {
+    @include kendo-color-editor--theme-base();
+}

package/scss/coloreditor/_variables.scss

@@ -0,0 +1,198 @@
+@use "../core/_index.scss" as *;
+
+// ColorEditor/FlatColorPicker
+
+/// 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: k-spacing(3) !default;
+
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-min-width: null !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sm-min-width: 252px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-md-min-width: 272px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-lg-min-width: 362px !default;
+/// The width of the border around the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-border-width: 1px !default;
+/// The border radius of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-border-radius: k-border-radius(md) !default;
+/// The font family of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
+/// The text color of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-text: k-color(on-app-surface) !default;
+/// The background color of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-bg: k-color(surface-alt) !default;
+/// The border color of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-border: k-color(border) !default;
+
+/// The border color of the focused ColorEditor.
+/// @group color-editor
+$kendo-color-editor-focus-border: null !default;
+// TODO: does this ever get focused? Isn't it always in a popup?
+/// The box shadow of the focused ColorEditor.
+/// @group color-editor
+$kendo-color-editor-focus-shadow: null !default; // 1px 1px 7px 1px rgba(0, 0, 0, .3)
+
+/// The spacing between the ColorEditor header actions.
+/// @group color-editor
+$kendo-color-editor-header-actions-gap: k-spacing(2) !default;
+/// The vertical padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-y: k-spacing(3) !default;
+/// The horizontal padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-x: k-spacing(3) !default;
+/// The vertical padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-y: k-spacing(3) !default;
+/// The horizontal padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-x: k-spacing(3) !default;
+/// The vertical padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-x: k-spacing(4.5) !default;
+
+/// The width of the ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-width: 34px !default;
+/// The height of the ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-height: 14px !default;
+/// The spacing between the colors in the ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-preview-gap: k-spacing(0.5) !default;
+/// The spacing between the colors in the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-preview-gap: k-spacing(0.5) !default;
+/// The spacing between the colors in the medium ColorEditor preview.
+/// @group color-editor
+$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-gap: k-spacing(1) !default;
+
+/// The width of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-color-preview-width: 34px !default;
+/// The height of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-color-preview-height: 12px !default;
+/// The width of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-color-preview-width: $kendo-color-editor-color-preview-width !default;
+/// The height of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-color-preview-height: $kendo-color-editor-color-preview-height !default;
+/// The width of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-color-preview-width: 44px !default;
+/// The height of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-color-preview-height: 16px !default;
+
+/// The spacing of the ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-y: $kendo-color-editor-spacer !default;
+/// The horizontal padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-x: k-spacing(3) !default;
+/// The vertical padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-y: k-spacing(3) !default;
+/// The horizontal padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-x: k-spacing(3) !default;
+/// The vertical padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-x: k-spacing(4.5) !default;
+
+/// The outline color of the focused ColorGradient.
+/// @group color-editor
+$kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
+/// The outline width of the focused ColorGradient.
+/// @group color-editor
+$kendo-color-editor-color-gradient-focus-outline: 2px !default;
+/// The outline offset of the focused ColorGradient.
+/// @group color-editor
+$kendo-color-editor-color-gradient-focus-outline-offset: 4px !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,
+    $kendo-color-editor-md-min-width: $kendo-color-editor-md-min-width,
+    $kendo-color-editor-lg-min-width: $kendo-color-editor-lg-min-width,
+    $kendo-color-editor-border-width: $kendo-color-editor-border-width,
+    $kendo-color-editor-border-radius: $kendo-color-editor-border-radius,
+    $kendo-color-editor-font-family: $kendo-color-editor-font-family,
+    $kendo-color-editor-font-size: $kendo-color-editor-font-size,
+    $kendo-color-editor-line-height: $kendo-color-editor-line-height,
+    $kendo-color-editor-text: $kendo-color-editor-text,
+    $kendo-color-editor-bg: $kendo-color-editor-bg,
+    $kendo-color-editor-border: $kendo-color-editor-border,
+    $kendo-color-editor-focus-border: $kendo-color-editor-focus-border,
+    $kendo-color-editor-focus-shadow: $kendo-color-editor-focus-shadow,
+    $kendo-color-editor-header-actions-gap: $kendo-color-editor-header-actions-gap,
+    $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-sm-header-padding-y,
+    $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-sm-header-padding-x,
+    $kendo-color-editor-md-header-padding-y: $kendo-color-editor-md-header-padding-y,
+    $kendo-color-editor-md-header-padding-x: $kendo-color-editor-md-header-padding-x,
+    $kendo-color-editor-lg-header-padding-y: $kendo-color-editor-lg-header-padding-y,
+    $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-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,
+    $kendo-color-editor-md-color-preview-height: $kendo-color-editor-md-color-preview-height,
+    $kendo-color-editor-lg-color-preview-width: $kendo-color-editor-lg-color-preview-width,
+    $kendo-color-editor-lg-color-preview-height: $kendo-color-editor-lg-color-preview-height,
+    $kendo-color-editor-views-gap: $kendo-color-editor-views-gap,
+    $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-sm-views-padding-y,
+    $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-sm-views-padding-x,
+    $kendo-color-editor-md-views-padding-y: $kendo-color-editor-md-views-padding-y,
+    $kendo-color-editor-md-views-padding-x: $kendo-color-editor-md-views-padding-x,
+    $kendo-color-editor-lg-views-padding-y: $kendo-color-editor-lg-views-padding-y,
+    $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
+);