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

package/scss/scrollview/_theme.scss

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

package/scss/scrollview/_variables.scss

@@ -0,0 +1,126 @@
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+
+// ScrollView
+
+/// The width of the border around the ScrollView.
+/// @group scrollview
+$kendo-scrollview-border-width: 1px !default;
+/// The border radius of the ScrollView.
+/// @group scrollview
+$kendo-scrollview-border-radius: k-border-radius(xxl) !default;
+/// The font family of the ScrollView.
+/// @group scrollview
+$kendo-scrollview-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the ScrollView.
+/// @group scrollview
+$kendo-scrollview-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the ScrollView.
+/// @group scrollview
+$kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The text color of the ScrollView.
+/// @group scrollview
+$kendo-scrollview-text: k-color(on-app-surface) !default;
+/// The background color of the ScrollView.
+/// @group scrollview
+$kendo-scrollview-bg: k-color(surface-alt) !default;
+/// The border color of the ScrollView.
+/// @group scrollview
+$kendo-scrollview-border: k-color(border) !default;
+
+/// The size of the ScrollView page button.
+/// @group scrollview
+$kendo-scrollview-pagebutton-size: 10px !default;
+/// The background color of the ScrollView page button.
+/// @group scrollview
+$kendo-scrollview-pagebutton-bg: $kendo-button-bg !default;
+/// The border color of the ScrollView page button.
+/// @group scrollview
+$kendo-scrollview-pagebutton-border: $kendo-button-border !default;
+/// The primary background color of the ScrollView page button.
+/// @group scrollview
+$kendo-scrollview-pagebutton-primary-bg: k-color(primary) !default;
+/// The primary border color of the ScrollView page button.
+/// @group scrollview
+$kendo-scrollview-pagebutton-primary-border: k-color(primary) !default;
+/// The box shadow of the ScrollView page button.
+/// @group scrollview
+$kendo-scrollview-pagebutton-shadow: 0 0 0 2px k-color(border-alt) !default;
+/// The box shadow of the selected ScrollView page button.
+/// @group scrollview
+$kendo-scrollview-pagebutton-primary-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
+
+/// The offset of the ScrollView pager.
+/// @group scrollview
+$kendo-scrollview-pager-offset: 0 !default;
+/// The spacing between the ScrollView pager items.
+/// @group scrollview
+$kendo-scrollview-pager-item-spacing: k-spacing(5) !default;
+/// The border width of the ScrollView pager items.
+/// @group scrollview
+$kendo-scrollview-pager-item-border-width: 0px !default;
+/// The height of the ScrollView pager.
+/// @group scrollview
+$kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + calc( #{$kendo-scrollview-pager-item-spacing} * 2 ) ) !default;
+
+/// The text color of the highlight over the tapped ScrollView navigation arrows.
+/// @group scrollview
+$kendo-scrollview-arrow-tap-highlight-color: $kendo-color-rgba-transparent !default;
+/// The color of the ScrollView navigation arrows.
+/// @group scrollview
+$kendo-scrollview-navigation-color: white !default;
+/// The background color of the ScrollView navigation.
+/// @group scrollview
+$kendo-scrollview-navigation-bg: transparent !default;
+/// The opacity of the ScrollView navigation.
+/// @group scrollview
+$kendo-scrollview-navigation-default-opacity: .7 !default;
+/// The hover opacity of the ScrollView navigation.
+/// @group scrollview
+$kendo-scrollview-navigation-hover-opacity: 1 !default;
+
+/// The background color of the ScrollView pager in light mode.
+/// @group scrollview
+$kendo-scrollview-light-bg: rgba(255, 255, 255, .4) !default;
+/// The background color of the ScrollView pager in dark mode.
+/// @group scrollview
+$kendo-scrollview-dark-bg: rgba(0, 0, 0, .4) !default;
+
+/// The duration of the ScrollView transition.
+/// @group scrollview
+$kendo-scrollview-transition-duration: .3s !default;
+/// The timing function of the ScrollView transition.
+/// @group scrollview
+$kendo-scrollview-transition-timing-function: ease-in-out !default;
+
+@forward "@progress/kendo-theme-core/scss/components/scrollview/_variables.scss" with (
+    $kendo-scrollview-border-width: $kendo-scrollview-border-width,
+    $kendo-scrollview-border-radius: $kendo-scrollview-border-radius,
+    $kendo-scrollview-font-family: $kendo-scrollview-font-family,
+    $kendo-scrollview-font-size: $kendo-scrollview-font-size,
+    $kendo-scrollview-line-height: $kendo-scrollview-line-height,
+    $kendo-scrollview-text: $kendo-scrollview-text,
+    $kendo-scrollview-bg: $kendo-scrollview-bg,
+    $kendo-scrollview-border: $kendo-scrollview-border,
+    $kendo-scrollview-pagebutton-size: $kendo-scrollview-pagebutton-size,
+    $kendo-scrollview-pagebutton-bg: $kendo-scrollview-pagebutton-bg,
+    $kendo-scrollview-pagebutton-border: $kendo-scrollview-pagebutton-border,
+    $kendo-scrollview-pagebutton-primary-bg: $kendo-scrollview-pagebutton-primary-bg,
+    $kendo-scrollview-pagebutton-primary-border: $kendo-scrollview-pagebutton-primary-border,
+    $kendo-scrollview-pagebutton-shadow: $kendo-scrollview-pagebutton-shadow,
+    $kendo-scrollview-pagebutton-primary-shadow: $kendo-scrollview-pagebutton-primary-shadow,
+    $kendo-scrollview-pager-offset: $kendo-scrollview-pager-offset,
+    $kendo-scrollview-pager-item-spacing: $kendo-scrollview-pager-item-spacing,
+    $kendo-scrollview-pager-item-border-width: $kendo-scrollview-pager-item-border-width,
+    $kendo-scrollview-pager-height: $kendo-scrollview-pager-height,
+    $kendo-scrollview-arrow-tap-highlight-color: $kendo-scrollview-arrow-tap-highlight-color,
+    $kendo-scrollview-navigation-color: $kendo-scrollview-navigation-color,
+    $kendo-scrollview-navigation-bg: $kendo-scrollview-navigation-bg,
+    $kendo-scrollview-navigation-default-opacity: $kendo-scrollview-navigation-default-opacity,
+    $kendo-scrollview-navigation-hover-opacity: $kendo-scrollview-navigation-hover-opacity,
+    $kendo-scrollview-light-bg: $kendo-scrollview-light-bg,
+    $kendo-scrollview-dark-bg: $kendo-scrollview-dark-bg,
+    $kendo-scrollview-transition-duration: $kendo-scrollview-transition-duration,
+    $kendo-scrollview-transition-timing-function: $kendo-scrollview-transition-timing-function
+);

package/scss/searchbox/_index.scss

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

package/scss/searchbox/_layout.scss

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

package/scss/searchbox/_theme.scss

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

package/scss/searchbox/_variables.scss

@@ -0,0 +1 @@
+// Searchbox

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

package/scss/segmented-control/_layout.scss

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

package/scss/segmented-control/_theme.scss

@@ -0,0 +1,22 @@
+@use "@progress/kendo-theme-core/scss/components/segmented-control/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "../button/_variables.scss" as *;
+
+
+@mixin kendo-segmented-control--theme() {
+    @include kendo-segmented-control--theme-base();
+
+    .k-segmented-control-button {
+        &:focus,
+        &.k-focus {
+            box-shadow: none;
+            @include focus-indicator(
+                $indicator: k-color(subtle),
+                $type: "outline",
+                $outline-width: $kendo-button-focus-outline-width,
+                $outline-offset: $kendo-button-focus-outline-offset
+            );
+        }
+    }
+}

package/scss/segmented-control/_variables.scss

@@ -0,0 +1,143 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+
+
+// Segmented control
+
+/// The default size of the Segmented control.
+/// @group segmented-control
+/// @role default
+$kendo-segmented-control-default-size: "md" !default;
+
+/// The horizontal padding of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-padding-x: k-spacing(0.5) !default;
+/// The vertical padding of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-padding-y: k-spacing(0.5) !default;
+/// The border radius of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-border-radius: k-border-radius(full) !default;
+
+/// The background color of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-bg: k-color(base) !default;
+/// The text color of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-text: k-color(on-base) !default;
+
+/// The font size of the small Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The font size of the medium Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-md-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the large Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+
+/// The font family of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-font-family: var( --kendo-font-family, inherit ) !default;
+
+/// The line height of the small Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-sm-line-height: var( --kendo-line-height-sm, normal ) !default;
+/// The line height of the medium Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height of the large Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+
+/// The border radius of the Segmented Control thumb.
+/// @group segmented-control
+$kendo-segmented-control-thumb-border-radius: $kendo-segmented-control-border-radius !default;
+/// The box shadow of the Segmented Control thumb.
+/// @group segmented-control
+$kendo-segmented-control-thumb-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16) !default;
+/// The background of the Segmented Control thumb.
+/// @group segmented-control
+$kendo-segmented-control-thumb-bg: k-color(app-surface) !default;
+/// The text color of the Segmented Control thumb.
+/// @group segmented-control
+$kendo-segmented-control-thumb-text: $kendo-segmented-control-text !default;
+
+/// The horizontal padding of the small Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-sm-button-padding-x: k-spacing(3) !default;
+/// The horizontal padding of the medium Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-md-button-padding-x: k-spacing(3) !default;
+/// The horizontal padding of the large Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-lg-button-padding-x: k-spacing(3) !default;
+
+/// The vertical padding of the small Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-sm-button-padding-y: calc( #{k-spacing(.5)} + 1px ) !default;
+/// The vertical padding of the medium Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-md-button-padding-y: calc( #{k-spacing(1)} + 1px ) !default;
+/// The vertical padding of the large Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-lg-button-padding-y: calc( #{k-spacing(1)} + 1px ) !default;
+
+
+/// The width of the border around the Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-button-border-width: 0px !default;
+/// The border radius of the Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-button-border-radius: $kendo-segmented-control-thumb-border-radius !default;
+
+/// The gap of the items inside the small Segmented Control buttons.
+/// @group segmented-control
+$kendo-segmented-control-sm-button-gap: k-spacing(1.5) !default;
+/// The gap of the items inside the medium Segmented Control buttons.
+/// @group segmented-control
+$kendo-segmented-control-md-button-gap: k-spacing(1.5) !default;
+/// The gap of the items inside the large Segmented Control buttons.
+/// @group segmented-control
+$kendo-segmented-control-lg-button-gap: k-spacing(2) !default;
+
+/// The background color of the hovered button inside Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-button-hover-bg: color-mix(in srgb, k-color(base-hover), k-color(base-active) 70%) !default;
+/// The indication of the focused button inside Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-button-focus-indicator: inset 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent) !default;
+
+
+@forward "@progress/kendo-theme-core/scss/components/segmented-control/_variables.scss" with (
+    $kendo-segmented-control-default-size: $kendo-segmented-control-default-size,
+    $kendo-segmented-control-padding-x: $kendo-segmented-control-padding-x,
+    $kendo-segmented-control-padding-y: $kendo-segmented-control-padding-y,
+    $kendo-segmented-control-border-radius: $kendo-segmented-control-border-radius,
+    $kendo-segmented-control-bg: $kendo-segmented-control-bg,
+    $kendo-segmented-control-text: $kendo-segmented-control-text,
+    $kendo-segmented-control-sm-font-size: $kendo-segmented-control-sm-font-size,
+    $kendo-segmented-control-md-font-size: $kendo-segmented-control-md-font-size,
+    $kendo-segmented-control-lg-font-size: $kendo-segmented-control-lg-font-size,
+    $kendo-segmented-control-font-family: $kendo-segmented-control-font-family,
+    $kendo-segmented-control-sm-line-height: $kendo-segmented-control-sm-line-height,
+    $kendo-segmented-control-md-line-height: $kendo-segmented-control-md-line-height,
+    $kendo-segmented-control-lg-line-height: $kendo-segmented-control-lg-line-height,
+    $kendo-segmented-control-thumb-border-radius: $kendo-segmented-control-thumb-border-radius,
+    $kendo-segmented-control-thumb-shadow: $kendo-segmented-control-thumb-shadow,
+    $kendo-segmented-control-thumb-bg: $kendo-segmented-control-thumb-bg,
+    $kendo-segmented-control-thumb-text: $kendo-segmented-control-thumb-text,
+    $kendo-segmented-control-sm-button-padding-x: $kendo-segmented-control-sm-button-padding-x,
+    $kendo-segmented-control-md-button-padding-x: $kendo-segmented-control-md-button-padding-x,
+    $kendo-segmented-control-lg-button-padding-x: $kendo-segmented-control-lg-button-padding-x,
+    $kendo-segmented-control-sm-button-padding-y: $kendo-segmented-control-sm-button-padding-y,
+    $kendo-segmented-control-md-button-padding-y: $kendo-segmented-control-md-button-padding-y,
+    $kendo-segmented-control-lg-button-padding-y: $kendo-segmented-control-lg-button-padding-y,
+    $kendo-segmented-control-button-border-width: $kendo-segmented-control-button-border-width,
+    $kendo-segmented-control-button-border-radius: $kendo-segmented-control-button-border-radius,
+    $kendo-segmented-control-sm-button-gap: $kendo-segmented-control-sm-button-gap,
+    $kendo-segmented-control-md-button-gap: $kendo-segmented-control-md-button-gap,
+    $kendo-segmented-control-lg-button-gap: $kendo-segmented-control-lg-button-gap,
+    $kendo-segmented-control-button-hover-bg: $kendo-segmented-control-button-hover-bg,
+    $kendo-segmented-control-button-focus-indicator: $kendo-segmented-control-button-focus-indicator,
+);

package/scss/signature/_index.scss

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

package/scss/signature/_layout.scss

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

package/scss/signature/_theme.scss

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

package/scss/signature/_variables.scss

@@ -0,0 +1,93 @@
+@use "../core/_index.scss" as *;
+
+/// The width of the Signature.
+/// @group signature
+$kendo-signature-width: 250px !default;
+/// The height of the Signature.
+/// @group signature
+$kendo-signature-height: 84px !default;
+
+/// The minimum height of the large Signature.
+/// @group signature
+$kendo-signature-lg-min-height: 110px !default;
+
+/// The width of the maximized Signature.
+/// @group signature
+$kendo-signature-maximized-width: 750px !default;
+/// The height of the maximized Signature.
+/// @group signature
+$kendo-signature-maximized-height: 252px !default;
+
+/// The horizontal padding of the small Signature.
+/// @group signature
+$kendo-signature-sm-padding-x: k-spacing(1.5) !default;
+/// The horizontal padding of the medium Signature.
+/// @group signature
+$kendo-signature-md-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the large Signature.
+/// @group signature
+$kendo-signature-lg-padding-x: k-spacing(3) !default;
+
+/// The vertical padding of the small Signature.
+/// @group signature
+$kendo-signature-sm-padding-y: $kendo-signature-sm-padding-x !default;
+/// The vertical padding of the medium Signature.
+/// @group signature
+$kendo-signature-md-padding-y: $kendo-signature-md-padding-x !default;
+/// The vertical padding of the large Signature.
+/// @group signature
+$kendo-signature-lg-padding-y: $kendo-signature-lg-padding-x !default;
+
+/// The width of the Signature line.
+/// @group signature
+$kendo-signature-line-width: 1px !default;
+/// The style of the Signature line.
+/// @group signature
+$kendo-signature-line-style: dashed !default;
+/// The color of the Signature line.
+/// @group signature
+$kendo-signature-line-color: color-mix(in srgb, k-color(info) 24%, transparent) !default;
+
+/// The size of the small Signature line.
+/// @group signature
+$kendo-signature-sm-line-size: calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) !default;
+/// The size of the medium Signature line.
+/// @group signature
+$kendo-signature-md-line-size: calc( 100% - 2 * #{$kendo-signature-md-padding-x} ) !default;
+/// The size of the large Signature line.
+/// @group signature
+$kendo-signature-lg-line-size: calc( 100% - 2 * #{$kendo-signature-lg-padding-x} ) !default;
+
+/// The bottom offset of the Signature line.
+/// @group signature
+$kendo-signature-line-bottom-offset: 33% !default;
+
+/// The gap between the Signature actions.
+/// @group signature
+$kendo-signature-actions-gap: k-spacing(1) !default;
+/// The line width of the maximized Signature.
+/// @group signature
+$kendo-signature-maximized-line-width: 3px !default;
+
+@forward "@progress/kendo-theme-core/scss/components/signature/_variables.scss" with (
+    $kendo-signature-width: $kendo-signature-width,
+    $kendo-signature-height: $kendo-signature-height,
+    $kendo-signature-lg-min-height: $kendo-signature-lg-min-height,
+    $kendo-signature-maximized-width: $kendo-signature-maximized-width,
+    $kendo-signature-maximized-height: $kendo-signature-maximized-height,
+    $kendo-signature-sm-padding-x: $kendo-signature-sm-padding-x,
+    $kendo-signature-md-padding-x: $kendo-signature-md-padding-x,
+    $kendo-signature-lg-padding-x: $kendo-signature-lg-padding-x,
+    $kendo-signature-sm-padding-y: $kendo-signature-sm-padding-y,
+    $kendo-signature-md-padding-y: $kendo-signature-md-padding-y,
+    $kendo-signature-lg-padding-y: $kendo-signature-lg-padding-y,
+    $kendo-signature-line-width: $kendo-signature-line-width,
+    $kendo-signature-line-style: $kendo-signature-line-style,
+    $kendo-signature-line-color: $kendo-signature-line-color,
+    $kendo-signature-sm-line-size: $kendo-signature-sm-line-size,
+    $kendo-signature-md-line-size: $kendo-signature-md-line-size,
+    $kendo-signature-lg-line-size: $kendo-signature-lg-line-size,
+    $kendo-signature-line-bottom-offset: $kendo-signature-line-bottom-offset,
+    $kendo-signature-actions-gap: $kendo-signature-actions-gap,
+    $kendo-signature-maximized-line-width: $kendo-signature-maximized-line-width
+);

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

package/scss/skeleton/_layout.scss

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

package/scss/skeleton/_theme.scss

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

package/scss/skeleton/_variables.scss

@@ -0,0 +1,34 @@
+@use "../core/_index.scss" as *;
+// Skeleton
+
+/// The transform scale of the Skeleton text.
+/// @group skeleton
+$kendo-skeleton-text-transform: scale( 1, .6 ) !default;
+/// The border radius of the Skeleton text.
+/// @group skeleton
+$kendo-skeleton-text-border-radius: k-border-radius(md) !default;
+
+/// The border radius of the rectangular Skeleton.
+/// @group skeleton
+$kendo-skeleton-rect-border-radius: 0 !default;
+
+/// The border radius of the circular Skeleton.
+/// @group skeleton
+$kendo-skeleton-circle-border-radius: 9999px !default;
+
+/// The background color of the Skeleton item.
+/// @group skeleton
+$kendo-skeleton-item-bg: color-mix(in srgb, k-color(subtle) 20%, transparent) !default;
+
+/// The background color of the Skeleton.
+/// @group skeleton
+$kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/skeleton/_variables.scss" with (
+    $kendo-skeleton-text-transform: $kendo-skeleton-text-transform,
+    $kendo-skeleton-text-border-radius: $kendo-skeleton-text-border-radius,
+    $kendo-skeleton-rect-border-radius: $kendo-skeleton-rect-border-radius,
+    $kendo-skeleton-circle-border-radius: $kendo-skeleton-circle-border-radius,
+    $kendo-skeleton-item-bg: $kendo-skeleton-item-bg,
+    $kendo-skeleton-wave-bg: $kendo-skeleton-wave-bg
+);

package/scss/slider/_index.scss

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

package/scss/slider/_layout.scss

@@ -0,0 +1,21 @@
+@use "@progress/kendo-theme-core/scss/components/slider/_layout.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-slider--layout() {
+    @include kendo-slider--layout-base();
+
+    .k-slider-transitions {
+        &.k-slider-horizontal {
+            .k-draghandle {
+                transition: inset-inline-start $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, border-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, outline $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
+            }
+        }
+
+        &.k-slider-vertical {
+            .k-draghandle {
+                transition: bottom  $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, border-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, outline $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
+            }
+        }
+    }
+}

package/scss/slider/_theme.scss

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