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

package/scss/expansion-panel/_index.scss

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

package/scss/expansion-panel/_layout.scss

@@ -0,0 +1,27 @@
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/expansion-panel/_layout.scss" as *;
+@use "../core/z-index/index.scss" as *;
+
+@mixin kendo-expander--layout() {
+    @include kendo-expander--layout-base();
+
+    // Multiple expanders: merge adjacent collapsed panels into one visual block
+    .k-expander:not(.k-expanded):has(+ .k-expander:not(.k-expanded)) {
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
+    }
+
+    .k-expander:not(.k-expanded) + .k-expander:not(.k-expanded) {
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+    }
+
+    .k-expander:not(.k-expanded) {
+        &.k-focus,
+        &:focus {
+            position: relative;
+            z-index: k-z-index("base", 1);
+        }
+    }
+}

package/scss/expansion-panel/_theme.scss

@@ -0,0 +1,24 @@
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/expansion-panel/_theme.scss" as *;
+
+
+@mixin kendo-expander--theme() {
+    @include kendo-expander--theme-base();
+
+    .k-expander:not(.k-expanded) {
+        background-color: k-translucency-bg(k-color(surface-alt));
+        backdrop-filter: k-translucency-blur(2);
+    }
+
+    .k-expander {
+        &.k-focus {
+            @include focus-indicator(
+                $type: "outline",
+                $indicator: $kendo-expander-focus-outline-color,
+                $outline-width: $kendo-expander-focus-outline-width,
+                $outline-offset: $kendo-expander-focus-outline-offset
+            );
+        }
+    }
+}

package/scss/expansion-panel/_variables.scss

@@ -0,0 +1,127 @@
+@use "../core/_index.scss" as *;
+@use "../list/_variables.scss" as *;
+
+// ExpansionPanel
+
+/// The vertical spacing of the ExpansionPanel.
+/// @group expander
+$kendo-expander-spacing-y: k-spacing(2) !default;
+/// The width of the border around the ExpansionPanel.
+/// @group expander
+$kendo-expander-border-width: 1px !default;
+/// The border radius of the ExpansionPanel.
+/// @group expander
+$kendo-expander-border-radius: k-border-radius(xl) !default;
+/// The font family of the ExpansionPanel.
+/// @group expander
+$kendo-expander-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the ExpansionPanel.
+/// @group expander
+$kendo-expander-font-size: var( --kendo-font-size, inherit ) !default;
+/// The hine height of the ExpansionPanel.
+/// @group expander
+$kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The text color of the ExpansionPanel.
+/// @group expander
+$kendo-expander-text: k-color(on-app-surface) !default;
+/// The background color of the ExpansionPanel.
+/// @group expander
+$kendo-expander-bg: k-color(surface-alt) !default;
+/// The border color of the ExpansionPanel.
+/// @group expander
+$kendo-expander-border: k-color(border) !default;
+
+/// The box shadow of the focused ExpansionPanel.
+/// @group expander
+$kendo-expander-focus-shadow: null !default;
+
+/// The outline color of the focused ExpansionPanel.
+/// @group expander
+$kendo-expander-focus-outline-color: k-color(subtle) !default;
+/// The outline width of the focused ExpansionPanel.
+/// @group expander
+$kendo-expander-focus-outline-width: 1px !default;
+/// The outline offset of the focused ExpansionPanel.
+/// @group expander
+$kendo-expander-focus-outline-offset: 1px !default;
+
+/// The horizontal padding of the ExpansionPanel header.
+/// @group expander
+$kendo-expander-header-padding-x: k-spacing(4) !default;
+/// The vertical padding of the ExpansionPanel header.
+/// @group expander
+$kendo-expander-header-padding-y: k-spacing(3) !default;
+
+/// The text color of the ExpansionPanel header.
+/// @group expander
+$kendo-expander-header-text: $kendo-expander-text !default;
+/// The background color of the ExpansionPanel header.
+/// @group expander
+$kendo-expander-header-bg: transparent !default;
+/// The border color of the ExpansionPanel header.
+/// @group expander
+$kendo-expander-header-border: null !default;
+
+/// The background color of the hovered ExpansionPanel header.
+/// @group expander
+$kendo-expander-header-hover-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent ) !default;
+/// The background color of the focused ExpansionPanel header.
+/// @group expander
+$kendo-expander-header-focus-bg: null !default;
+/// The box shadow of the focused ExpansionPanel header.
+/// @group expander
+$kendo-expander-header-focus-shadow: $kendo-list-item-focus-shadow !default;
+
+/// The font weight of the ExpansionPanel title.
+/// @group expander
+$kendo-expander-title-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+/// The text transform of the ExpansionPanel title.
+/// @group expander
+$kendo-expander-title-text-transform: none !default;
+/// The text color of the ExpansionPanel title.
+/// @group expander
+$kendo-expander-title-text: k-color(primary-on-surface) !default;
+
+/// The text color of the ExpansionPanel sub-title.
+/// @group expander
+$kendo-expander-header-sub-title-text: k-color(subtle) !default;
+
+/// The horizontal margin of the ExpansionPanel indicator.
+/// @group expander
+$kendo-expander-indicator-margin-x: k-spacing(3) !default;
+
+/// The horizontal padding of the ExpansionPanel content.
+/// @group expander
+$kendo-expander-content-padding-x: k-spacing(4) !default;
+/// The vertical padding of the ExpansionPanel content.
+/// @group expander
+$kendo-expander-content-padding-y: k-spacing(2) k-spacing(4) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/expansion-panel/_variables.scss" with (
+    $kendo-expander-spacing-y: $kendo-expander-spacing-y,
+    $kendo-expander-border-width: $kendo-expander-border-width,
+    $kendo-expander-border-radius: $kendo-expander-border-radius,
+    $kendo-expander-font-family: $kendo-expander-font-family,
+    $kendo-expander-font-size: $kendo-expander-font-size,
+    $kendo-expander-line-height: $kendo-expander-line-height,
+    $kendo-expander-text: $kendo-expander-text,
+    $kendo-expander-bg: $kendo-expander-bg,
+    $kendo-expander-border: $kendo-expander-border,
+    $kendo-expander-focus-shadow: $kendo-expander-focus-shadow,
+    $kendo-expander-header-padding-x: $kendo-expander-header-padding-x,
+    $kendo-expander-header-padding-y: $kendo-expander-header-padding-y,
+    $kendo-expander-header-text: $kendo-expander-header-text,
+    $kendo-expander-header-bg: $kendo-expander-header-bg,
+    $kendo-expander-header-border: $kendo-expander-header-border,
+    $kendo-expander-header-hover-bg: $kendo-expander-header-hover-bg,
+    $kendo-expander-header-focus-bg: $kendo-expander-header-focus-bg,
+    $kendo-expander-header-focus-shadow: $kendo-expander-header-focus-shadow,
+    $kendo-expander-title-font-weight: $kendo-expander-title-font-weight,
+    $kendo-expander-title-text-transform: $kendo-expander-title-text-transform,
+    $kendo-expander-title-text: $kendo-expander-title-text,
+    $kendo-expander-header-sub-title-text: $kendo-expander-header-sub-title-text,
+    $kendo-expander-indicator-margin-x: $kendo-expander-indicator-margin-x,
+    $kendo-expander-content-padding-x: $kendo-expander-content-padding-x,
+    $kendo-expander-content-padding-y: $kendo-expander-content-padding-y
+);

package/scss/fab/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../badge/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-fab--styles() {
+    @include import-once( "fab" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-button--styles();
+        @include kendo-badge--styles();
+        @include kendo-fab--layout();
+        @include kendo-fab--theme();
+        @include kendo-utils--layout--position();
+        @include kendo-utils--typography--text-align();
+        @include kendo-utils--layout--overflow();
+    }
+}

package/scss/fab/_layout.scss

@@ -0,0 +1,22 @@
+@use "@progress/kendo-theme-core/scss/components/fab/_layout.scss" as *;
+@use "../core/index.scss" as *;
+@use "./_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
+@mixin kendo-fab--layout() {
+    @include kendo-fab--layout-base();
+
+    .k-fab {
+        transition: background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid), opacity k-transition(rapid);
+
+        .k-fab-icon {
+            min-width: calc( #{$kendo-fab-font-size} * #{$kendo-fab-line-height} );
+            min-height: calc( #{$kendo-fab-font-size} * #{$kendo-fab-line-height} );
+
+            > svg {
+                width: $kendo-icon-size-md;
+                height: $kendo-icon-size-md;
+            }
+        }
+    }
+}

package/scss/fab/_theme.scss

@@ -0,0 +1,71 @@
+@use "@progress/kendo-theme-core/scss/components/fab/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-fab--theme() {
+    @include kendo-fab--theme-base();
+
+    .k-fab {
+
+        #{k-when-default($kendo-fab-default-fill-mode, "solid")}
+        &.k-fab-solid {
+
+            @each $name in $kendo-fab-theme-colors {
+                @if $name == "base" {
+                    #{k-when-default($kendo-fab-default-theme-color, $name)}
+                    &.k-fab-#{$name} {
+                        &:focus,
+                        &.k-focus {
+                            @include focus-indicator(
+                                $indicator: k-color(subtle),
+                                $type: "outline",
+                                $outline-width: $kendo-button-focus-outline-width,
+                                $outline-offset: $kendo-button-focus-outline-offset
+                            );
+                        }
+                    }
+                } @else {
+                    #{k-when-default($kendo-fab-default-theme-color, $name)}
+                    &.k-fab-#{$name} {
+                        &:focus,
+                        &.k-focus {
+                            @include focus-indicator(
+                                $indicator: k-color(#{$name}-on-surface),
+                                $type: "outline",
+                                $outline-width: $kendo-button-focus-outline-width,
+                                $outline-offset: $kendo-button-focus-outline-offset
+                            );
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // FAB item icon hover
+    .k-fab-item.k-hover .k-fab-item-icon,
+    .k-fab-item:hover .k-fab-item-icon {
+        border-color: transparent;
+        background-color: k-color(base-subtle-hover);
+    }
+
+    // FAB item focus
+    .k-fab-item:focus .k-fab-item-icon,
+    .k-fab-item.k-focus .k-fab-item-icon {
+        @include focus-indicator(
+            $indicator: k-color(subtle),
+            $type: "outline",
+            $outline-width: $kendo-button-focus-outline-width,
+            $outline-offset: $kendo-button-focus-outline-offset
+        );
+    }
+
+    // FAB item active
+    .k-fab-item.k-active .k-fab-item-icon,
+    .k-fab-item:active .k-fab-item-icon {
+        border-color: transparent;
+    }
+}

package/scss/fab/_variables.scss

@@ -0,0 +1,217 @@
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+
+// Floating Action Button
+
+/// The default theme color of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-theme-color: "secondary" !default;
+/// The default fill mode of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-fill-mode: "solid" !default;
+/// The default roundness of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-roundness: "full" !default;
+/// The default size of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-size: "md" !default;
+
+/// The width of the border around the FAB.
+/// @group floating-action-button
+$kendo-fab-border-width: 1px !default;
+
+/// The font family of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the FAB.
+/// @group floating-action-button
+$kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The horizontal padding of the small FAB.
+/// @group floating-action-button
+$kendo-fab-sm-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the medium FAB.
+/// @group floating-action-button
+$kendo-fab-md-padding-x: k-spacing(4) !default;
+/// The horizontal padding of the large FAB.
+/// @group floating-action-button
+$kendo-fab-lg-padding-x: k-spacing(6) !default;
+
+/// The vertical padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-y: k-spacing(4) !default;
+/// The vertical padding of the small FAB.
+/// @group floating-action-button
+$kendo-fab-sm-padding-y: k-spacing(2) !default;
+/// The vertical padding of the medium FAB.
+/// @group floating-action-button
+$kendo-fab-md-padding-y: k-spacing(4) !default;
+/// The vertical padding of the large FAB.
+/// @group floating-action-button
+$kendo-fab-lg-padding-y: k-spacing(6) !default;
+
+/// The horizontal padding of the FAB icon.
+/// @group floating-action-button
+$kendo-fab-icon-padding-x: k-spacing(0) !default;
+/// The vertical padding of the FAB icon.
+/// @group floating-action-button
+$kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
+/// The spacing of the FAB icon.
+/// @group floating-action-button
+$kendo-fab-icon-spacing: k-spacing(0.5) !default;
+
+/// The horizontal padding of the FAB items.
+/// @group floating-action-button
+$kendo-fab-items-padding-x: k-spacing(0) !default;
+/// The vertical padding of the FAB items.
+/// @group floating-action-button
+$kendo-fab-items-padding-y: k-spacing(4) !default;
+
+/// The horizontal padding of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-x: k-spacing(1) !default;
+/// The vertical padding of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
+/// The width of the FAB item text border.
+/// @group floating-action-button
+$kendo-fab-item-text-border-width: 1px !default;
+/// The border radius of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-border-radius: k-border-radius(md) !default;
+/// The font size of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-font-size: var( --kendo-font-size-xs, inherit ) !default;
+/// The line height of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-line-height: 1.2 !default;
+
+/// The horizontal padding of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-x: calc( #{k-spacing(2)} + #{$kendo-fab-icon-padding-x} ) !default;
+/// The vertical padding of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
+/// The width of the FAB item icon border.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-width: 0 !default;
+/// The border radius of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-radius: 50% !default;
+
+
+/// The base shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-shadow: k-elevation(2) !default;
+/// The shadow of the disabled FAB.
+/// @group floating-action-button
+$kendo-fab-disabled-shadow: null !default;
+/// The shadow of the active FAB.
+/// @group floating-action-button
+$kendo-fab-active-shadow: null !default;
+/// The outline style of the FAB.
+/// @group floating-action-button
+$kendo-fab-outline-style: solid !default;
+/// The outline width of the FAB.
+/// @group floating-action-button
+$kendo-fab-outline-width: 1px !default;
+
+/// The base text color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-text: k-color(on-app-surface) !default;
+/// The base background color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-bg: k-elevation-bg(2, k-color(surface-alt)) !default;
+/// The base border color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-border: k-color(border) !default;
+
+/// The base text color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-text: $kendo-button-text !default;
+/// The base background color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-bg: k-elevation-bg(2, $kendo-button-bg) !default;
+/// The base border color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border: $kendo-button-border !default;
+
+/// The base shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-shadow: k-elevation(1) !default;
+/// The shadow of the disabled FAB item.
+/// @group floating-action-button
+$kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
+/// The shadow of the active FAB item.
+/// @group floating-action-button
+$kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
+/// The outline style of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-outline-style: solid !default;
+/// The outline width of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-outline-width: 1px !default;
+/// The outline color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-outline-color: transparent !default;
+
+/// Тhe opacity of the generating FAB.
+/// @group floating-action-button
+$kendo-fab-generating-opacity: 40% !default;
+
+@forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with (
+    $kendo-fab-default-theme-color: $kendo-fab-default-theme-color,
+    $kendo-fab-default-fill-mode: $kendo-fab-default-fill-mode,
+    $kendo-fab-default-roundness: $kendo-fab-default-roundness,
+    $kendo-fab-default-size: $kendo-fab-default-size,
+    $kendo-fab-border-width: $kendo-fab-border-width,
+    $kendo-fab-font-family: $kendo-fab-font-family,
+    $kendo-fab-font-size: $kendo-fab-font-size,
+    $kendo-fab-line-height: $kendo-fab-line-height,
+    $kendo-fab-sm-padding-x: $kendo-fab-sm-padding-x,
+    $kendo-fab-md-padding-x: $kendo-fab-md-padding-x,
+    $kendo-fab-lg-padding-x: $kendo-fab-lg-padding-x,
+    $kendo-fab-sm-padding-y: $kendo-fab-sm-padding-y,
+    $kendo-fab-md-padding-y: $kendo-fab-md-padding-y,
+    $kendo-fab-lg-padding-y: $kendo-fab-lg-padding-y,
+    $kendo-fab-icon-padding-x: $kendo-fab-icon-padding-x,
+    $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-y,
+    $kendo-fab-icon-spacing: $kendo-fab-icon-spacing,
+    $kendo-fab-items-padding-x: $kendo-fab-items-padding-x,
+    $kendo-fab-items-padding-y: $kendo-fab-items-padding-y,
+    $kendo-fab-item-text-padding-x: $kendo-fab-item-text-padding-x,
+    $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-y,
+    $kendo-fab-item-text-border-width: $kendo-fab-item-text-border-width,
+    $kendo-fab-item-text-border-radius: $kendo-fab-item-text-border-radius,
+    $kendo-fab-item-text-font-size: $kendo-fab-item-text-font-size,
+    $kendo-fab-item-text-line-height: $kendo-fab-item-text-line-height,
+    $kendo-fab-item-icon-padding-x: $kendo-fab-item-icon-padding-x,
+    $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-y,
+    $kendo-fab-item-icon-border-width: $kendo-fab-item-icon-border-width,
+    $kendo-fab-item-icon-border-radius: $kendo-fab-item-icon-border-radius,
+    $kendo-fab-shadow: $kendo-fab-shadow,
+    $kendo-fab-disabled-shadow: $kendo-fab-disabled-shadow,
+    $kendo-fab-active-shadow: $kendo-fab-active-shadow,
+    $kendo-fab-outline-style: $kendo-fab-outline-style,
+    $kendo-fab-outline-width: $kendo-fab-outline-width,
+    $kendo-fab-item-text: $kendo-fab-item-text,
+    $kendo-fab-item-bg: $kendo-fab-item-bg,
+    $kendo-fab-item-border: $kendo-fab-item-border,
+    $kendo-fab-item-icon-text: $kendo-fab-item-icon-text,
+    $kendo-fab-item-icon-bg: $kendo-fab-item-icon-bg,
+    $kendo-fab-item-icon-border: $kendo-fab-item-icon-border,
+    $kendo-fab-item-shadow: $kendo-fab-item-shadow,
+    $kendo-fab-item-disabled-shadow: $kendo-fab-item-disabled-shadow,
+    $kendo-fab-item-active-shadow: $kendo-fab-item-active-shadow,
+    $kendo-fab-item-outline-style: $kendo-fab-item-outline-style,
+    $kendo-fab-item-outline-width: $kendo-fab-item-outline-width,
+    $kendo-fab-item-outline-color: $kendo-fab-item-outline-color,
+    $kendo-fab-generating-opacity: $kendo-fab-generating-opacity
+);

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

package/scss/file-box/_layout.scss

@@ -0,0 +1,10 @@
+@use "@progress/kendo-theme-core/scss/components/file-box/_layout.scss" as *;
+
+
+@mixin kendo-file-box--layout() {
+    @include kendo-file-box--layout-base();
+
+    .k-file-box-wrapper {
+        padding: 0;
+    }
+}

package/scss/file-box/_theme.scss

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

package/scss/file-box/_variables.scss

@@ -0,0 +1,82 @@
+@use "../core/_index.scss" as *;
+
+// File Box
+
+/// The horizontal padding of the File Box.
+/// @group file-box
+$kendo-file-box-padding-x: k-spacing(2) !default;
+/// The vertical padding of the File Box.
+/// @group file-box
+$kendo-file-box-padding-y: k-spacing(2) !default;
+/// The spacing between the elements of the File Box.
+/// @group file-box
+$kendo-file-box-gap: k-spacing(1) !default;
+/// The spacing between the elements of the File Box info section.
+/// @group file-box
+$kendo-file-box-info-gap: k-spacing(0.5) !default;
+/// The minimum width of the File Box.
+/// @group file-box
+$kendo-file-box-min-width: 96px !default;
+/// The maximum width of the File Box.
+/// @group file-box
+$kendo-file-box-max-width: 174px !default;
+/// The border width of the File Box.
+/// @group file-box
+$kendo-file-box-border-width: 1px !default;
+/// The border style of the File Box.
+/// @group file-box
+$kendo-file-box-border-style: solid !default;
+/// The border-radius of the File Box.
+/// @group file-box
+$kendo-file-box-border-radius: k-border-radius(md) !default;
+/// The font size of the File Box file name.
+/// @group file-box
+$kendo-file-box-name-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line height of the File Box file name.
+/// @group file-box
+$kendo-file-box-name-line-height: 1 !default;
+/// The font size of the File Box file size.
+/// @group file-box
+$kendo-file-box-size-font-size: var( --kendo-font-size-xs, inherit ) !default;
+/// The line height of the File Box file size.
+/// @group file-box
+$kendo-file-box-size-line-height: 1 !default;
+
+/// The background color of the File Box.
+/// @group file-box
+$kendo-file-box-bg: k-color(surface) !default;
+/// The text color of the File Box.
+/// @group file-box
+$kendo-file-box-text: k-color(on-app-surface) !default;
+/// The border color of the File Box.
+/// @group file-box
+$kendo-file-box-border: k-color(border) !default;
+
+/// The text color of the File Box file size.
+/// @group file-box
+$kendo-file-box-size-text: k-color(subtle) !default;
+
+/// The gradient used for the File Box wrapper scrolling indicator.
+/// @group file-box
+$kendo-file-box-wrapper-scroll-gradient: rgba(255, 255, 255, 0.00) 0%, k-color(app-surface) 100% !default;
+
+@forward "@progress/kendo-theme-core/scss/components/file-box/_variables.scss" with (
+    $kendo-file-box-padding-x: $kendo-file-box-padding-x,
+    $kendo-file-box-padding-y: $kendo-file-box-padding-y,
+    $kendo-file-box-gap: $kendo-file-box-gap,
+    $kendo-file-box-info-gap: $kendo-file-box-info-gap,
+    $kendo-file-box-min-width: $kendo-file-box-min-width,
+    $kendo-file-box-max-width: $kendo-file-box-max-width,
+    $kendo-file-box-border-width: $kendo-file-box-border-width,
+    $kendo-file-box-border-style: $kendo-file-box-border-style,
+    $kendo-file-box-border-radius: $kendo-file-box-border-radius,
+    $kendo-file-box-name-font-size: $kendo-file-box-name-font-size,
+    $kendo-file-box-name-line-height: $kendo-file-box-name-line-height,
+    $kendo-file-box-size-font-size: $kendo-file-box-size-font-size,
+    $kendo-file-box-size-line-height: $kendo-file-box-size-line-height,
+    $kendo-file-box-bg: $kendo-file-box-bg,
+    $kendo-file-box-text: $kendo-file-box-text,
+    $kendo-file-box-border: $kendo-file-box-border,
+    $kendo-file-box-size-text: $kendo-file-box-size-text,
+    $kendo-file-box-wrapper-scroll-gradient: $kendo-file-box-wrapper-scroll-gradient
+);