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

package/scss/input/_variables.scss

@@ -0,0 +1,585 @@
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+
+// Input
+
+/// The default fill mode of the Input.
+/// @group input
+/// @role default
+$kendo-input-default-fill-mode: "solid" !default;
+/// The default roundness of the Input.
+/// @group input
+/// @role default
+$kendo-input-default-roundness: "md" !default;
+/// The default size of the Input.
+/// @group input
+/// @role default
+$kendo-input-default-size: "md" !default;
+
+/// The default width of the Input components.
+/// @group input
+$kendo-input-default-width: 100% !default;
+
+/// The border width of the Input components.
+/// @group input
+$kendo-input-border-width: 1px !default;
+/// The border radius of the Input components.
+/// @group input
+$kendo-input-border-radius: null !default;
+
+/// The horizontal padding of the small Input components.
+/// @group input
+$kendo-input-sm-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the medium Input components.
+/// @group input
+$kendo-input-md-padding-x: k-spacing(2.5) !default;
+/// The horizontal padding of the large Input components.
+/// @group input
+$kendo-input-lg-padding-x: k-spacing(3) !default;
+
+/// The vertical padding of the small Input components.
+/// @group input
+$kendo-input-sm-padding-y: k-spacing(1) !default;
+/// The vertical padding of the medium Input components.
+/// @group input
+$kendo-input-md-padding-y: k-spacing(1.5) !default;
+/// The vertical padding of the large Input components.
+/// @group input
+$kendo-input-lg-padding-y: k-spacing(2) !default;
+
+/// The font family of the Input components.
+/// @group input
+$kendo-input-font-family: var( --kendo-font-family, inherit ) !default;
+
+/// The font size of the Input components.
+/// @group input
+$kendo-input-font-size: null !default;
+/// The font size of the small Input components.
+/// @group input
+$kendo-input-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The font size of the medium Input components.
+/// @group input
+$kendo-input-md-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the large Input components.
+/// @group input
+$kendo-input-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+
+/// The line height of the Input components.
+/// @group input
+$kendo-input-line-height: null !default;
+/// The line height of the small Input components.
+/// @group input
+$kendo-input-sm-line-height: var( --kendo-line-height-sm, normal ) !default;
+/// The line height of the medium Input components.
+/// @group input
+$kendo-input-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height of the large Input components.
+/// @group input
+$kendo-input-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+
+$kendo-input-sm-calc-size: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{$kendo-input-sm-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-md-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-lg-calc-size: calc( ( #{$kendo-input-lg-line-height} * 1em ) + ( #{$kendo-input-lg-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+
+/// The background color of the Input components.
+/// @group input
+$kendo-input-bg: k-color(surface-alt) !default;
+/// The text color of the Input components.
+/// @group input
+$kendo-input-text: k-color(on-app-surface) !default;
+/// The border color of the Input components.
+/// @group input
+$kendo-input-border: k-color(border) !default;
+/// The shadow of the Input components.
+/// @group input
+$kendo-input-shadow: null !default;
+
+/// The background color of the hovered Input components.
+/// @group input
+$kendo-input-hover-bg: null !default;
+/// The text color of the hovered Input components.
+/// @group input
+$kendo-input-hover-text: null !default;
+/// The border color of the hovered Input components.
+/// @group input
+$kendo-input-hover-border: k-color(border-alt) !default;
+/// The shadow of the hovered Input components.
+/// @group input
+$kendo-input-hover-shadow: null !default;
+
+/// The background color of the focused Input components.
+/// @group input
+$kendo-input-focus-bg: null !default;
+/// The text color of the focused Input components.
+/// @group input
+$kendo-input-focus-text: null !default;
+/// The border color of the focused Input components.
+/// @group input
+$kendo-input-focus-border: $kendo-input-hover-border !default;
+/// The shadow of the focused Input components.
+/// @group input
+$kendo-input-focus-shadow: null !default;
+/// The outline color of the focused Input components.
+/// @group input
+$kendo-input-focus-outline-color: k-color(subtle) !default;
+/// The outline width of the focused Input components.
+/// @group input
+$kendo-input-focus-outline-width: 1px !default;
+/// The outline offset of the focused Input components.
+/// @group input
+$kendo-input-focus-outline-offset: 1px !default;
+
+/// The background color of the disabled Input components.
+/// @group input
+$kendo-input-disabled-bg: null !default;
+/// The text color of the disabled Input components.
+/// @group input
+$kendo-input-disabled-text: null !default;
+/// The border color of the disabled Input components.
+/// @group input
+$kendo-input-disabled-border: null !default;
+/// The gradient of the disabled Input components.
+/// @group input
+$kendo-input-disabled-gradient: null !default;
+/// The shadow of the disabled Input components.
+/// @group input
+$kendo-input-disabled-shadow: null !default;
+
+/// The background color of the outline Input components.
+/// @group input
+$kendo-input-outline-bg: null !default;
+/// The text color of the outline Input components.
+/// @group input
+$kendo-input-outline-text: $kendo-input-text !default;
+/// The border color of the outline Input components.
+/// @group input
+$kendo-input-outline-border: color-mix(in srgb, k-color(base-emphasis) 80%, transparent) !default;
+
+/// The background color of the outline hovered Input components.
+/// @group input
+$kendo-input-outline-hover-bg: null !default;
+/// The text color of the outline hovered Input components.
+/// @group input
+$kendo-input-outline-hover-text: null !default;
+/// The border color of the outline hovered Input components.
+/// @group input
+$kendo-input-outline-hover-border: color-mix(in srgb, k-color(base-emphasis) 90%, transparent) !default;
+
+/// The background color of the outline focused Input components.
+/// @group input
+$kendo-input-outline-focus-bg: null !default;
+/// The text color of the outline focused Input components.
+/// @group input
+$kendo-input-outline-focus-text: null !default;
+/// The border color of the outline focused Input components.
+/// @group input
+$kendo-input-outline-focus-border: null !default;
+/// The shadow of the outline focused Input components.
+/// @group input
+$kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
+
+/// The background color of the flat Input components.
+/// @group input
+$kendo-input-flat-bg: transparent !default;
+/// The text color of the flat Input components.
+/// @group input
+$kendo-input-flat-text: $kendo-input-text !default;
+/// The border color of the flat Input components.
+/// @group input
+$kendo-input-flat-border: $kendo-input-border !default;
+
+/// The background color of the flat hovered Input components.
+/// @group input
+$kendo-input-flat-hover-bg: null !default;
+/// The text color of the flat hovered Input components.
+/// @group input
+$kendo-input-flat-hover-text: null !default;
+/// The border color of the flat hovered Input components.
+/// @group input
+$kendo-input-flat-hover-border: $kendo-input-hover-border !default;
+
+/// The background color of the flat focused Input components.
+/// @group input
+$kendo-input-flat-focus-bg: null !default;
+/// The text color of the flat focused Input components.
+/// @group input
+$kendo-input-flat-focus-text: null !default;
+/// The border color of the flat focused Input components.
+/// @group input
+$kendo-input-flat-focus-border: null !default;
+/// The shadow of the flat focused Input components.
+/// @group input
+$kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
+
+/// The text color of the Input placeholder.
+/// @group input
+$kendo-input-placeholder-text: k-color(subtle) !default;
+/// The opacity of the Input placeholder.
+/// @group input
+$kendo-input-placeholder-opacity: 1 !default;
+
+/// The color of the Input clear value icon.
+/// @group input
+$kendo-input-clear-value-text: null !default;
+/// The opacity of the Input clear value icon.
+/// @group input
+$kendo-input-clear-value-opacity: .5 !default;
+/// The color of the hovered Input clear value icon.
+/// @group input
+$kendo-input-clear-value-hover-text: null !default;
+/// The opacity of the hovered Input clear value icon.
+/// @group input
+$kendo-input-clear-value-hover-opacity: 1 !default;
+
+/// The width of the Input button.
+/// @group input
+$kendo-input-button-width: $kendo-button-inner-calc-size !default;
+/// The border width of the Input button.
+/// @group input
+$kendo-input-button-border-width: 0 !default;
+/// The width of the Input spinner button.
+/// @group input
+$kendo-input-spinner-width: $kendo-button-inner-calc-size !default;
+/// The icon offset of the Input spinner button.
+/// @group input
+$kendo-input-spinner-icon-offset: null !default;
+
+/// The color of the Input separator.
+/// @group input
+$kendo-input-separator-text: $kendo-input-border !default;
+
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: k-color(subtle) !default;
+/// The background color of the Input prefix.
+/// @group input
+$kendo-input-prefix-bg: null !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: k-color(subtle) !default;
+/// The background color of the Input suffix.
+/// @group input
+$kendo-input-suffix-bg: null !default;
+
+/// The border color of the invalid Input components.
+/// @group input
+$kendo-input-invalid-border: k-color(error-on-surface) !default;
+/// The shadow of the invalid Input components.
+/// @group input
+$kendo-input-invalid-shadow: null !default;
+/// The outline color of the focused invalid Input components.
+/// @group input
+$kendo-input-invalid-focus-outline: k-color(error-on-surface) !default;
+
+/// The default fill mode of the Picker.
+/// @group picker
+/// @role default
+$kendo-picker-default-fill-mode: "solid" !default;
+/// The default roundness of the Picker.
+/// @group picker
+/// @role default
+$kendo-picker-default-roundness: "md" !default;
+/// The default size of the Picker.
+/// @group picker
+/// @role default
+$kendo-picker-default-size: "md" !default;
+
+/// The background color of the Picker components.
+/// @group picker
+$kendo-picker-bg: $kendo-input-bg !default;
+/// The text color of the Picker components.
+/// @group picker
+$kendo-picker-text: $kendo-input-text !default;
+/// The border color of the Picker components.
+/// @group picker
+$kendo-picker-border: $kendo-input-border !default;
+/// The gradient of the Picker components.
+/// @group picker
+$kendo-picker-gradient: null !default;
+/// The shadow of the Picker components.
+/// @group picker
+$kendo-picker-shadow: null !default;
+
+/// The background color of the hovered Picker components.
+/// @group picker
+$kendo-picker-hover-bg: null !default;
+/// The text color of the hovered Picker components.
+/// @group picker
+$kendo-picker-hover-text: null !default;
+/// The border color of the hovered Picker components.
+/// @group picker
+$kendo-picker-hover-border: $kendo-input-hover-border !default;
+/// The gradient of the hovered Picker components.
+/// @group picker
+$kendo-picker-hover-gradient: null !default;
+/// The shadow of the hovered Picker components.
+/// @group picker
+$kendo-picker-hover-shadow: null !default;
+
+/// The background color of the focused Picker components.
+/// @group picker
+$kendo-picker-focus-bg: null !default;
+/// The text color of the focused Picker components.
+/// @group picker
+$kendo-picker-focus-text: null !default;
+/// The border color of the focused Picker components.
+/// @group picker
+$kendo-picker-focus-border: null !default;
+/// The gradient of the focused Picker components.
+/// @group picker
+$kendo-picker-focus-gradient: null !default;
+/// The shadow of the focused Picker components.
+/// @group picker
+$kendo-picker-focus-shadow: none !default;
+
+/// The outline color of the focused Picker components.
+/// @group picker
+$kendo-picker-focus-outline-color: $kendo-input-focus-outline-color !default;
+/// The outline width of the focused Picker components.
+/// @group picker
+$kendo-picker-focus-outline-width: $kendo-input-focus-outline-width !default;
+/// The outline offset of the focused Picker components.
+/// @group picker
+$kendo-picker-focus-outline-offset: $kendo-input-focus-outline-offset !default;
+/// The outline color of the focused invalid Picker components.
+/// @group picker
+$kendo-picker-invalid-focus-outline: $kendo-input-invalid-focus-outline !default;
+
+/// The background color of the disabled Picker components.
+/// @group picker
+$kendo-picker-disabled-bg: null !default;
+/// The text color of the disabled Picker components.
+/// @group picker
+$kendo-picker-disabled-text: null !default;
+/// The border color of the disabled Picker components.
+/// @group picker
+$kendo-picker-disabled-border: null !default;
+/// The gradient of the disabled Picker components.
+/// @group picker
+$kendo-picker-disabled-gradient: null !default;
+/// The shadow of the disabled Picker components.
+/// @group picker
+$kendo-picker-disabled-shadow: null !default;
+
+/// The background color of the outline Picker components.
+/// @group picker
+$kendo-picker-outline-bg: transparent !default;
+/// The text color of the outline Picker components.
+/// @group picker
+$kendo-picker-outline-text: k-color(on-app-surface) !default;
+/// The border color of the outline Picker components.
+/// @group picker
+$kendo-picker-outline-border: $kendo-input-outline-border !default;
+
+/// The background color of the outline hovered Picker components.
+/// @group picker
+$kendo-picker-outline-hover-bg: transparent !default;
+/// The text color of the outline hovered Picker components.
+/// @group picker
+$kendo-picker-outline-hover-text: $kendo-picker-outline-text !default;
+/// The border color of the outline hovered Picker components.
+/// @group picker
+$kendo-picker-outline-hover-border: $kendo-input-outline-hover-border !default;
+
+/// The background color of the outline focused Picker components.
+/// @group picker
+$kendo-picker-outline-focus-bg: null !default;
+/// The text color of the outline focused Picker components.
+/// @group picker
+$kendo-picker-outline-focus-text: null !default;
+/// The border color of the outline focused Picker components.
+/// @group picker
+$kendo-picker-outline-focus-border: null !default;
+/// The shadow of the outline focused Picker components.
+/// @group picker
+$kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
+
+/// The background color of the outline hovered and focused Picker components.
+/// @group picker
+$kendo-picker-outline-hover-focus-bg: null !default;
+/// The text color of the outline hovered and focused Picker components.
+/// @group picker
+$kendo-picker-outline-hover-focus-text: null !default;
+/// The border color of the outline hovered and focused Picker components.
+/// @group picker
+$kendo-picker-outline-hover-focus-border: null !default;
+
+/// The background color of the flat Picker components.
+/// @group picker
+$kendo-picker-flat-bg: transparent !default;
+/// The text color of the flat Picker components.
+/// @group picker
+$kendo-picker-flat-text: k-color(on-app-surface) !default;
+/// The border color of the flat Picker components.
+/// @group picker
+$kendo-picker-flat-border: $kendo-input-flat-border !default;
+
+/// The background color of the flat hovered Picker components.
+/// @group picker
+$kendo-picker-flat-hover-bg: null !default;
+/// The text color of the flat hovered Picker components.
+/// @group picker
+$kendo-picker-flat-hover-text: null !default;
+/// The border color of the flat hovered Picker components.
+/// @group picker
+$kendo-picker-flat-hover-border: $kendo-input-flat-hover-border !default;
+
+/// The background color of the flat focused Picker components.
+/// @group picker
+$kendo-picker-flat-focus-bg: null !default;
+/// The text color of the flat focused Picker components.
+/// @group picker
+$kendo-picker-flat-focus-text: null !default;
+/// The border color of the flat focused Picker components.
+/// @group picker
+$kendo-picker-flat-focus-border: null !default;
+/// The shadow of the flat focused Picker components.
+/// @group picker
+$kendo-picker-flat-focus-shadow: $kendo-picker-focus-shadow !default;
+
+/// The background color of the flat hovered and focused Picker components.
+/// @group picker
+$kendo-picker-flat-hover-focus-bg: null !default;
+/// The text color of the flat hovered and focused Picker components.
+/// @group picker
+$kendo-picker-flat-hover-focus-text: null !default;
+/// The border color of the flat hovered and focused Picker components.
+/// @group picker
+$kendo-picker-flat-hover-focus-border: null !default;
+
+$kendo-use-input-button-width: true !default;
+$kendo-use-input-spinner-width: true !default;
+$kendo-use-input-spinner-icon-offset: false !default;
+
+@forward "@progress/kendo-theme-core/scss/components/input/_variables.scss" with (
+    $kendo-input-default-fill-mode: $kendo-input-default-fill-mode,
+    $kendo-input-default-roundness: $kendo-input-default-roundness,
+    $kendo-input-default-size: $kendo-input-default-size,
+    $kendo-input-default-width: $kendo-input-default-width,
+    $kendo-input-border-width: $kendo-input-border-width,
+    $kendo-input-border-radius: $kendo-input-border-radius,
+    $kendo-input-sm-padding-x: $kendo-input-sm-padding-x,
+    $kendo-input-md-padding-x: $kendo-input-md-padding-x,
+    $kendo-input-lg-padding-x: $kendo-input-lg-padding-x,
+    $kendo-input-sm-padding-y: $kendo-input-sm-padding-y,
+    $kendo-input-md-padding-y: $kendo-input-md-padding-y,
+    $kendo-input-lg-padding-y: $kendo-input-lg-padding-y,
+    $kendo-input-font-family: $kendo-input-font-family,
+    $kendo-input-font-size: $kendo-input-font-size,
+    $kendo-input-sm-font-size: $kendo-input-sm-font-size,
+    $kendo-input-md-font-size: $kendo-input-md-font-size,
+    $kendo-input-lg-font-size: $kendo-input-lg-font-size,
+    $kendo-input-line-height: $kendo-input-line-height,
+    $kendo-input-sm-line-height: $kendo-input-sm-line-height,
+    $kendo-input-md-line-height: $kendo-input-md-line-height,
+    $kendo-input-lg-line-height: $kendo-input-lg-line-height,
+    $kendo-input-sm-calc-size: $kendo-input-sm-calc-size,
+    $kendo-input-md-calc-size: $kendo-input-md-calc-size,
+    $kendo-input-lg-calc-size: $kendo-input-lg-calc-size,
+    $kendo-input-bg: $kendo-input-bg,
+    $kendo-input-text: $kendo-input-text,
+    $kendo-input-border: $kendo-input-border,
+    $kendo-input-shadow: $kendo-input-shadow,
+    $kendo-input-hover-bg: $kendo-input-hover-bg,
+    $kendo-input-hover-text: $kendo-input-hover-text,
+    $kendo-input-hover-border: $kendo-input-hover-border,
+    $kendo-input-hover-shadow: $kendo-input-hover-shadow,
+    $kendo-input-focus-bg: $kendo-input-focus-bg,
+    $kendo-input-focus-text: $kendo-input-focus-text,
+    $kendo-input-focus-border: $kendo-input-focus-border,
+    $kendo-input-focus-shadow: $kendo-input-focus-shadow,
+    $kendo-input-disabled-bg: $kendo-input-disabled-bg,
+    $kendo-input-disabled-text: $kendo-input-disabled-text,
+    $kendo-input-disabled-border: $kendo-input-disabled-border,
+    $kendo-input-disabled-gradient: $kendo-input-disabled-gradient,
+    $kendo-input-disabled-shadow: $kendo-input-disabled-shadow,
+    $kendo-input-outline-bg: $kendo-input-outline-bg,
+    $kendo-input-outline-text: $kendo-input-outline-text,
+    $kendo-input-outline-border: $kendo-input-outline-border,
+    $kendo-input-outline-hover-bg: $kendo-input-outline-hover-bg,
+    $kendo-input-outline-hover-text: $kendo-input-outline-hover-text,
+    $kendo-input-outline-hover-border: $kendo-input-outline-hover-border,
+    $kendo-input-outline-focus-bg: $kendo-input-outline-focus-bg,
+    $kendo-input-outline-focus-text: $kendo-input-outline-focus-text,
+    $kendo-input-outline-focus-border: $kendo-input-outline-focus-border,
+    $kendo-input-outline-focus-shadow: $kendo-input-outline-focus-shadow,
+    $kendo-input-flat-bg: $kendo-input-flat-bg,
+    $kendo-input-flat-text: $kendo-input-flat-text,
+    $kendo-input-flat-border: $kendo-input-flat-border,
+    $kendo-input-flat-hover-bg: $kendo-input-flat-hover-bg,
+    $kendo-input-flat-hover-text: $kendo-input-flat-hover-text,
+    $kendo-input-flat-hover-border: $kendo-input-flat-hover-border,
+    $kendo-input-flat-focus-bg: $kendo-input-flat-focus-bg,
+    $kendo-input-flat-focus-text: $kendo-input-flat-focus-text,
+    $kendo-input-flat-focus-border: $kendo-input-flat-focus-border,
+    $kendo-input-flat-focus-shadow: $kendo-input-flat-focus-shadow,
+    $kendo-input-placeholder-text: $kendo-input-placeholder-text,
+    $kendo-input-placeholder-opacity: $kendo-input-placeholder-opacity,
+    $kendo-input-clear-value-text: $kendo-input-clear-value-text,
+    $kendo-input-clear-value-opacity: $kendo-input-clear-value-opacity,
+    $kendo-input-clear-value-hover-text: $kendo-input-clear-value-hover-text,
+    $kendo-input-clear-value-hover-opacity: $kendo-input-clear-value-hover-opacity,
+    $kendo-input-button-width: $kendo-input-button-width,
+    $kendo-input-button-border-width: $kendo-input-button-border-width,
+    $kendo-input-spinner-width: $kendo-input-spinner-width,
+    $kendo-input-spinner-icon-offset: $kendo-input-spinner-icon-offset,
+    $kendo-input-separator-text: $kendo-input-separator-text,
+    $kendo-input-prefix-text: $kendo-input-prefix-text,
+    $kendo-input-prefix-bg: $kendo-input-prefix-bg,
+    $kendo-input-suffix-text: $kendo-input-suffix-text,
+    $kendo-input-suffix-bg: $kendo-input-suffix-bg,
+    $kendo-input-invalid-border: $kendo-input-invalid-border,
+    $kendo-input-invalid-shadow: $kendo-input-invalid-shadow,
+    $kendo-picker-default-fill-mode: $kendo-picker-default-fill-mode,
+    $kendo-picker-default-roundness: $kendo-picker-default-roundness,
+    $kendo-picker-default-size: $kendo-picker-default-size,
+    $kendo-picker-bg: $kendo-picker-bg,
+    $kendo-picker-text: $kendo-picker-text,
+    $kendo-picker-border: $kendo-picker-border,
+    $kendo-picker-gradient: $kendo-picker-gradient,
+    $kendo-picker-shadow: $kendo-picker-shadow,
+    $kendo-picker-hover-bg: $kendo-picker-hover-bg,
+    $kendo-picker-hover-text: $kendo-picker-hover-text,
+    $kendo-picker-hover-border: $kendo-picker-hover-border,
+    $kendo-picker-hover-gradient: $kendo-picker-hover-gradient,
+    $kendo-picker-hover-shadow: $kendo-picker-hover-shadow,
+    $kendo-picker-focus-bg: $kendo-picker-focus-bg,
+    $kendo-picker-focus-text: $kendo-picker-focus-text,
+    $kendo-picker-focus-border: $kendo-picker-focus-border,
+    $kendo-picker-focus-gradient: $kendo-picker-focus-gradient,
+    $kendo-picker-focus-shadow: $kendo-picker-focus-shadow,
+    $kendo-picker-disabled-bg: $kendo-picker-disabled-bg,
+    $kendo-picker-disabled-text: $kendo-picker-disabled-text,
+    $kendo-picker-disabled-border: $kendo-picker-disabled-border,
+    $kendo-picker-disabled-gradient: $kendo-picker-disabled-gradient,
+    $kendo-picker-disabled-shadow: $kendo-picker-disabled-shadow,
+    $kendo-picker-outline-bg: $kendo-picker-outline-bg,
+    $kendo-picker-outline-text: $kendo-picker-outline-text,
+    $kendo-picker-outline-border: $kendo-picker-outline-border,
+    $kendo-picker-outline-hover-bg: $kendo-picker-outline-hover-bg,
+    $kendo-picker-outline-hover-text: $kendo-picker-outline-hover-text,
+    $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-border,
+    $kendo-picker-outline-focus-bg: $kendo-picker-outline-focus-bg,
+    $kendo-picker-outline-focus-text: $kendo-picker-outline-focus-text,
+    $kendo-picker-outline-focus-border: $kendo-picker-outline-focus-border,
+    $kendo-picker-outline-focus-shadow: $kendo-picker-outline-focus-shadow,
+    $kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-focus-bg,
+    $kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-focus-text,
+    $kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-focus-border,
+    $kendo-picker-flat-bg: $kendo-picker-flat-bg,
+    $kendo-picker-flat-text: $kendo-picker-flat-text,
+    $kendo-picker-flat-border: $kendo-picker-flat-border,
+    $kendo-picker-flat-hover-bg: $kendo-picker-flat-hover-bg,
+    $kendo-picker-flat-hover-text: $kendo-picker-flat-hover-text,
+    $kendo-picker-flat-hover-border: $kendo-picker-flat-hover-border,
+    $kendo-picker-flat-focus-bg: $kendo-picker-flat-focus-bg,
+    $kendo-picker-flat-focus-text: $kendo-picker-flat-focus-text,
+    $kendo-picker-flat-focus-border: $kendo-picker-flat-focus-border,
+    $kendo-picker-flat-focus-shadow: $kendo-picker-flat-focus-shadow,
+    $kendo-picker-flat-hover-focus-bg: $kendo-picker-flat-hover-focus-bg,
+    $kendo-picker-flat-hover-focus-text: $kendo-picker-flat-hover-focus-text,
+    $kendo-picker-flat-hover-focus-border: $kendo-picker-flat-hover-focus-border,
+    $kendo-use-input-button-width: $kendo-use-input-button-width,
+    $kendo-use-input-spinner-width: $kendo-use-input-spinner-width,
+    $kendo-use-input-spinner-icon-offset: $kendo-use-input-spinner-icon-offset
+);

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

package/scss/list/_layout.scss

@@ -0,0 +1,12 @@
+@use "@progress/kendo-theme-core/scss/components/list/_layout.scss" as *;
+@use "../core/index.scss" as *;
+
+
+@mixin kendo-list--layout() {
+    @include kendo-list--layout-base();
+
+    .k-list-item,
+    .k-list-custom-value {
+        transition: color k-transition(snappy), background-color k-transition(snappy), outline-color k-transition(snappy), outline k-transition(snappy);
+    }
+}

package/scss/list/_theme.scss

@@ -0,0 +1,16 @@
+@use "@progress/kendo-theme-core/scss/components/list/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-list--theme() {
+    @include kendo-list--theme-base();
+
+    .k-list-item,
+    .k-list-custom-value {
+        // Focus
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-list-item-focus-outline-color, $inset: true, $type: "outline", $outline-offset: $kendo-list-item-focus-outline-offset );
+        }
+    }
+}