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

package/scss/colorgradient/_index.scss

@@ -0,0 +1,30 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../slider/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-gradient--styles() {
+    @include import-once( "color-gradient" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-button--styles();
+        @include kendo-slider--styles();
+        @include kendo-textbox--styles();
+        @include kendo-numeric-textbox--styles();
+        @include kendo-color-gradient--layout();
+        @include kendo-color-gradient--theme();
+        @include kendo-utils--flex-grid--flex();
+        @include kendo-utils--flex-grid--align-self();
+        @include kendo-utils--typography--text-color();
+    }
+}

package/scss/colorgradient/_layout.scss

@@ -0,0 +1,36 @@
+@use "@progress/kendo-theme-core/scss/components/colorgradient/_layout.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../colorgradient/_variables.scss" as *;
+
+
+@mixin kendo-color-gradient--layout() {
+    @include kendo-color-gradient--layout-base();
+
+    .k-colorgradient .k-draghandle {
+       &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: $kendo-color-gradient-draghandle-border-radius;
+            outline: $kendo-color-gradient-draghandle-inner-outline-width solid $kendo-color-gradient-draghandle-inner-outline-color;
+            outline-offset: -$kendo-color-gradient-draghandle-inner-outline-width;
+       }
+    }
+
+    .k-colorgradient-slider .k-draghandle {
+        &::before,
+        &::before {
+            outline-width: $kendo-color-gradient-slider-draghandle-inner-outline-width;
+            outline-offset: -$kendo-color-gradient-slider-draghandle-inner-outline-width;
+        }
+    }
+
+    .k-colorgradient-slider .k-draghandle:hover,
+    .k-colorgradient-slider .k-draghandle.k-hover {
+        outline-offset: 0;
+    }
+}
+

package/scss/colorgradient/_theme.scss

@@ -0,0 +1,37 @@
+@use "@progress/kendo-theme-core/scss/components/colorgradient/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../colorgradient/_variables.scss" as *;
+
+
+@mixin kendo-color-gradient--theme() {
+    @include kendo-color-gradient--theme-base();
+
+    .k-colorgradient:focus,
+    .k-colorgradient.k-focus {
+        @include focus-indicator(
+            $type: "outline",
+            $indicator: $kendo-color-gradient-focus-outline-color,
+            $outline-width: $kendo-color-gradient-focus-outline-width,
+            $outline-offset: $kendo-color-gradient-focus-outline-offset
+        );
+    }
+
+    .k-colorgradient .k-draghandle {
+        &:hover,
+        &.k-hover,
+        &:focus,
+        &.k-focus {
+            border-color: $kendo-color-gradient-draghandle-border;
+        }
+
+        &:focus,
+        &.k-focus {
+            @include focus-indicator(
+                $type: "outline",
+                $indicator: $kendo-color-gradient-draghandle-focus-outline-color,
+                $outline-width: $kendo-color-gradient-draghandle-focus-outline-width,
+                $outline-offset: $kendo-color-gradient-draghandle-focus-outline-offset
+            );
+        }
+    }
+}

package/scss/colorgradient/_variables.scss

@@ -0,0 +1,318 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+
+// ColorGradient
+
+/// The default size of the ColorGradient.
+/// @group color-gradient
+/// @role default
+$kendo-color-gradient-default-size: "md" !default;
+
+/// The spacer of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-spacer: k-spacing(3) !default;
+
+/// The width of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-width: null !default;
+/// The width of the border around the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-border-width: 1px !default;
+/// The border radius of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-border-radius: k-border-radius(xxl) !default;
+/// The spacing between the sections of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-gap: null !default;
+/// The font family of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
+/// The text color of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-text: k-color(on-app-surface) !default;
+/// The background color of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-bg: k-color(surface-alt) !default;
+/// The border color of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-border: k-color(border) !default;
+
+/// The vertical padding of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-padding-y: $kendo-color-gradient-spacer !default;
+/// The horizontal padding of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-padding-x: k-spacing(3) !default;
+/// The vertical padding of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-padding-y: k-spacing(4) !default;
+/// The horizontal padding of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-padding-x: k-spacing(4) !default;
+/// The vertical padding of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-padding-x: k-spacing(4.5) !default;
+
+/// The width of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-width: 252px !default;
+/// The width of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-width: 282px !default;
+/// The width of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-width: 362px !default;
+
+/// The spacing between the sections of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-gap: $kendo-color-gradient-spacer !default;
+/// The spacing between the sections of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-gap: $kendo-color-gradient-spacer !default;
+/// The spacing between the sections of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-gap: k-spacing(4.5) !default;
+
+/// The border color of the focused ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-focus-border: null !default;
+/// The box shadow of the focused ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-focus-shadow: none !default;
+
+/// The border radius of the ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-canvas-border-radius: k-border-radius(sm) !default;
+/// The spacing between the items of the ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
+/// The height the ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-canvas-rectangle-height: 180px !default;
+/// The height the small ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-rectangle-height: 160px !default;
+/// The height the medium ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
+/// The height the large ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-rectangle-height: 240px !default;
+
+/// The spacing between the items of the small ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-canvas-gap !default;
+/// The spacing between the items of the medium ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-canvas-gap !default;
+/// The spacing between the items of the large ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-gap: k-spacing(4.5) !default;
+
+/// The width of the ColorGradient slider.
+/// @group color-gradient
+$kendo-color-gradient-slider-track-size: 10px !default;
+/// The border radius of the ColorGradient slider.
+/// @group color-gradient
+$kendo-color-gradient-slider-border-radius: 10px !default;
+/// The width of the border around the ColorGradient slider drag handle.
+/// @group color-gradient
+$kendo-color-gradient-slider-draghandle-border-width: 1px !default;
+
+/// The height of the ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-slider-vertical-size: $kendo-color-gradient-canvas-rectangle-height !default;
+/// The width of the ColorGradient horizontal slider.
+/// @group color-gradient
+$kendo-color-gradient-slider-horizontal-size: 100% !default;
+/// The background image of the ColorGradient alpha slider.
+/// @group color-gradient
+$kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
+
+/// The height of the small ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-sm-slider-vertical-size: $kendo-color-gradient-sm-canvas-rectangle-height !default;
+/// The height of the medium ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-md-canvas-rectangle-height !default;
+/// The height of the large ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-lg-slider-vertical-size: $kendo-color-gradient-lg-canvas-rectangle-height !default;
+
+/// The width of the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-width: 14px !default;
+/// The height of the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-height: 14px !default;
+/// The width of the border around the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-border-width: 1px !default;
+/// The width of the outline around the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-outline-width: 1px !default;
+/// The border radius of the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-border-radius: 50% !default;
+/// The text color of the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-text: null !default;
+/// The background color of the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-bg: transparent !default;
+/// The color of the border around the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-border: k-color(inverse) !default;
+/// The focus color of the outline around the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-focus-shadow: transparent !default;
+/// The outline color of the focused ColorGradient drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-focus-outline-color: color-mix(in srgb, k-color(on-inverse) 80%, transparent) !default;
+/// The outline width of the focused ColorGradient drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-focus-outline-width: 2px !default;
+/// The outline offset of the focused ColorGradient drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-focus-outline-offset: 0px !default;
+/// The hover color of the outline around the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-outline-color !default;
+/// The box shadow of the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-shadow: none !default;
+
+/// The width of the ColorGradient drag handle inner outline.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-inner-outline-width: 1px !default;
+/// The width of the ColorGradient slider drag handle inner outline.
+/// @group color-gradient
+$kendo-color-gradient-slider-draghandle-inner-outline-width: 2px !default;
+/// The color of the ColorGradient drag handle inner outline.
+/// @group color-gradient
+$kendo-color-gradient-draghandle-inner-outline-color: color-mix(in srgb, k-color(on-inverse) 60%, transparent) !default;
+
+/// The vertical margin of the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-canvas-draghandle-margin-y: - math.div( $kendo-color-gradient-draghandle-height, 2 ) !default;
+/// The horizontal margin of the ColorGradient canvas drag handle.
+/// @group color-gradient
+$kendo-color-gradient-canvas-draghandle-margin-x: - math.div( $kendo-color-gradient-draghandle-width, 2 ) !default;
+
+/// The width of the ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-input-width: 46px !default;
+/// The spacing between the ColorGradient inputs.
+/// @group color-gradient
+$kendo-color-gradient-input-gap: k-spacing(2) !default;
+/// The spacing between the ColorGradient inputs and their labels.
+/// @group color-gradient
+$kendo-color-gradient-input-label-gap: k-spacing(1) !default;
+/// The text color of the ColorGradient input labels.
+/// @group color-gradient
+$kendo-color-gradient-input-label-text: k-color(subtle) !default;
+
+/// The width of the small ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-sm-input-width: 42px !default;
+/// The width of the medium ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-md-input-width: $kendo-color-gradient-input-width !default;
+/// The width of the large ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-lg-input-width: 62px !default;
+
+/// The font weight of the ColorGradient contrast ratio text.
+/// @group color-gradient
+$kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+/// The spacing between the items in the ColorGradient contrast tool.
+/// @group color-gradient
+$kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
+
+/// The outline color of the focused ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-focus-outline-color: k-color(subtle) !default;
+/// The outline width of the focused ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-focus-outline-width: 1px !default;
+/// The outline offset of the focused ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-focus-outline-offset: 2px !default;
+
+@forward "@progress/kendo-theme-core/scss/components/colorgradient/_variables.scss" with (
+    $kendo-color-gradient-default-size: $kendo-color-gradient-default-size,
+    $kendo-color-gradient-spacer: $kendo-color-gradient-spacer,
+    $kendo-color-gradient-width: $kendo-color-gradient-width,
+    $kendo-color-gradient-border-width: $kendo-color-gradient-border-width,
+    $kendo-color-gradient-border-radius: $kendo-color-gradient-border-radius,
+    $kendo-color-gradient-gap: $kendo-color-gradient-gap,
+    $kendo-color-gradient-font-family: $kendo-color-gradient-font-family,
+    $kendo-color-gradient-font-size: $kendo-color-gradient-font-size,
+    $kendo-color-gradient-line-height: $kendo-color-gradient-line-height,
+    $kendo-color-gradient-text: $kendo-color-gradient-text,
+    $kendo-color-gradient-bg: $kendo-color-gradient-bg,
+    $kendo-color-gradient-border: $kendo-color-gradient-border,
+    $kendo-color-gradient-sm-width: $kendo-color-gradient-sm-width,
+    $kendo-color-gradient-md-width: $kendo-color-gradient-md-width,
+    $kendo-color-gradient-lg-width: $kendo-color-gradient-lg-width,
+    $kendo-color-gradient-sm-gap: $kendo-color-gradient-sm-gap,
+    $kendo-color-gradient-md-gap: $kendo-color-gradient-md-gap,
+    $kendo-color-gradient-lg-gap: $kendo-color-gradient-lg-gap,
+    $kendo-color-gradient-focus-border: $kendo-color-gradient-focus-border,
+    $kendo-color-gradient-focus-shadow: $kendo-color-gradient-focus-shadow,
+    $kendo-color-gradient-canvas-border-radius: $kendo-color-gradient-canvas-border-radius,
+    $kendo-color-gradient-canvas-gap: $kendo-color-gradient-canvas-gap,
+    $kendo-color-gradient-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height,
+    $kendo-color-gradient-sm-canvas-rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+    $kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+    $kendo-color-gradient-lg-canvas-rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+    $kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-sm-canvas-gap,
+    $kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-md-canvas-gap,
+    $kendo-color-gradient-lg-canvas-gap: $kendo-color-gradient-lg-canvas-gap,
+    $kendo-color-gradient-sm-padding-x: $kendo-color-gradient-sm-padding-x,
+    $kendo-color-gradient-sm-padding-y: $kendo-color-gradient-sm-padding-y,
+    $kendo-color-gradient-md-padding-x: $kendo-color-gradient-md-padding-x,
+    $kendo-color-gradient-md-padding-y: $kendo-color-gradient-md-padding-y,
+    $kendo-color-gradient-lg-padding-x: $kendo-color-gradient-lg-padding-x,
+    $kendo-color-gradient-lg-padding-y: $kendo-color-gradient-lg-padding-y,
+    $kendo-color-gradient-slider-track-size: $kendo-color-gradient-slider-track-size,
+    $kendo-color-gradient-slider-border-radius: $kendo-color-gradient-slider-border-radius,
+    $kendo-color-gradient-slider-draghandle-border-width: $kendo-color-gradient-slider-draghandle-border-width,
+    $kendo-color-gradient-slider-vertical-size: $kendo-color-gradient-slider-vertical-size,
+    $kendo-color-gradient-slider-horizontal-size: $kendo-color-gradient-slider-horizontal-size,
+    $kendo-color-gradient-slider-alpha-bgr: $kendo-color-gradient-slider-alpha-bgr,
+    $kendo-color-gradient-sm-slider-vertical-size: $kendo-color-gradient-sm-slider-vertical-size,
+    $kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-md-slider-vertical-size,
+    $kendo-color-gradient-lg-slider-vertical-size: $kendo-color-gradient-lg-slider-vertical-size,
+    $kendo-color-gradient-draghandle-width: $kendo-color-gradient-draghandle-width,
+    $kendo-color-gradient-draghandle-height: $kendo-color-gradient-draghandle-height,
+    $kendo-color-gradient-draghandle-border-width: $kendo-color-gradient-draghandle-border-width,
+    $kendo-color-gradient-draghandle-outline-width: $kendo-color-gradient-draghandle-outline-width,
+    $kendo-color-gradient-draghandle-border-radius: $kendo-color-gradient-draghandle-border-radius,
+    $kendo-color-gradient-draghandle-text: $kendo-color-gradient-draghandle-text,
+    $kendo-color-gradient-draghandle-bg: $kendo-color-gradient-draghandle-bg,
+    $kendo-color-gradient-draghandle-border: $kendo-color-gradient-draghandle-border,
+    $kendo-color-gradient-draghandle-focus-shadow: $kendo-color-gradient-draghandle-focus-shadow,
+    $kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-hover-shadow,
+    $kendo-color-gradient-draghandle-shadow: $kendo-color-gradient-draghandle-shadow,
+    $kendo-color-gradient-canvas-draghandle-margin-y: $kendo-color-gradient-canvas-draghandle-margin-y,
+    $kendo-color-gradient-canvas-draghandle-margin-x: $kendo-color-gradient-canvas-draghandle-margin-x,
+    $kendo-color-gradient-input-width: $kendo-color-gradient-input-width,
+    $kendo-color-gradient-input-gap: $kendo-color-gradient-input-gap,
+    $kendo-color-gradient-input-label-gap: $kendo-color-gradient-input-label-gap,
+    $kendo-color-gradient-input-label-text: $kendo-color-gradient-input-label-text,
+    $kendo-color-gradient-sm-input-width: $kendo-color-gradient-sm-input-width,
+    $kendo-color-gradient-md-input-width: $kendo-color-gradient-md-input-width,
+    $kendo-color-gradient-lg-input-width: $kendo-color-gradient-lg-input-width,
+    $kendo-color-gradient-contrast-ratio-font-weight: $kendo-color-gradient-contrast-ratio-font-weight,
+    $kendo-color-gradient-contrast-spacer: $kendo-color-gradient-contrast-spacer,
+);

package/scss/colorpalette/_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-palette--styles() {
+    @include import-once( "color-palette" ) {
+        @include core-styles();
+        @include kendo-color-palette--layout();
+        @include kendo-color-palette--theme();
+    }
+}

package/scss/colorpalette/_layout.scss

@@ -0,0 +1,11 @@
+@use "@progress/kendo-theme-core/scss/components/colorpalette/_layout.scss" as *;
+@use "../core/index.scss" as *;
+
+
+@mixin kendo-color-palette--layout() {
+    @include kendo-color-palette--layout-base();
+
+    .k-colorpalette-tile {
+        transition: outline k-transition(rapid);
+    }
+}

package/scss/colorpalette/_theme.scss

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

package/scss/colorpalette/_variables.scss

@@ -0,0 +1,71 @@
+@use "../core/_index.scss" as *;
+
+// ColorPalette
+
+/// The default size of the ColorPalette.
+/// @group color-palette
+/// @role default
+$kendo-color-palette-default-size: "md" !default;
+
+/// The font family of the ColorPalette.
+/// @group color-palette
+$kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the ColorPalette.
+/// @group color-palette
+$kendo-color-palette-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the ColorPalette.
+/// @group color-palette
+$kendo-color-palette-line-height: 0 !default;
+
+/// The width of the ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-width: k-spacing(6) !default;
+/// The height of the ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
+/// The width of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-sm-tile-width: k-spacing(5.5) !default;
+/// The height of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-width !default;
+/// The width of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-md-tile-width: $kendo-color-palette-tile-width !default;
+/// The height of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-md-tile-height: $kendo-color-palette-tile-height !default;
+/// The width of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-lg-tile-width: k-spacing(8) !default;
+/// The height of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default;
+
+/// The shadow of the ColorPalette focused tile.
+/// @group color-palette
+$kendo-color-palette-tile-focus-shadow: 0 0 3px 1px k-color(inverse), inset 0 0 0 1px color-mix(in srgb, k-color(on-inverse) 60%, transparent) !default;
+/// The shadow of the ColorPalette hovered tile.
+/// @group color-palette
+$kendo-color-palette-tile-hover-shadow: 0 0 3px 1px k-color(inverse), inset 0 0 0 1px color-mix(in srgb, k-color(on-inverse) 80%, transparent) !default;
+/// The shadow of the ColorPalette selected tile.
+/// @group color-palette
+$kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px k-color(inverse), inset 0 0 0 1px k-color(on-inverse) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/colorpalette/_variables.scss" with (
+    $kendo-color-palette-default-size: $kendo-color-palette-default-size,
+    $kendo-color-palette-font-family: $kendo-color-palette-font-family,
+    $kendo-color-palette-font-size: $kendo-color-palette-font-size,
+    $kendo-color-palette-line-height: $kendo-color-palette-line-height,
+    $kendo-color-palette-tile-width: $kendo-color-palette-tile-width,
+    $kendo-color-palette-tile-height: $kendo-color-palette-tile-height,
+    $kendo-color-palette-sm-tile-width: $kendo-color-palette-sm-tile-width,
+    $kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-height,
+    $kendo-color-palette-md-tile-width: $kendo-color-palette-md-tile-width,
+    $kendo-color-palette-md-tile-height: $kendo-color-palette-md-tile-height,
+    $kendo-color-palette-lg-tile-width: $kendo-color-palette-lg-tile-width,
+    $kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-height,
+    $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow,
+    $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow,
+    $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow
+);

package/scss/colorpicker/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../coloreditor/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-picker--styles() {
+    @include import-once( "color-picker" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-button--styles();
+        @include kendo-color-editor--styles();
+        @include kendo-popup--styles();
+        @include kendo-icon--styles();
+        @include kendo-color-picker--layout();
+        @include kendo-color-picker--theme();
+    }
+}

package/scss/colorpicker/_layout.scss

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

package/scss/colorpicker/_theme.scss

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

package/scss/colorpicker/_variables.scss

@@ -0,0 +1 @@
+// Color picker

package/scss/column-menu/_index.scss

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

package/scss/column-menu/_layout.scss

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

package/scss/column-menu/_theme.scss

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