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

package/scss/tabstrip/_index.scss

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

package/scss/tabstrip/_layout.scss

@@ -0,0 +1,43 @@
+@use "sass:map";
+@use "../core/index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/tabstrip/_layout.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "./_variables.scss" as *;
+@use "../core/z-index/index.scss" as *;
+
+
+@mixin kendo-tabstrip--layout() {
+    @include kendo-tabstrip--layout-base();
+
+    .k-tabstrip {
+        .k-tabstrip-item,
+        .k-item {
+            transition: color k-transition(emphasis), border-color k-transition(emphasis), outline k-transition(emphasis), background-color k-transition(emphasis), font-weight k-transition(emphasis);
+        }
+
+        // TabStrip sizes
+        @each $size, $size-props in $kendo-tabstrip-sizes {
+            $_item-padding-x: map.get( $size-props, item-padding-x );
+
+            #{k-when-default($kendo-tabstrip-default-size, $size)}
+            &.k-tabstrip-#{$size} {
+                .k-tabstrip-items {
+                    .k-item-actions {
+                        margin-inline-end: calc( #{$_item-padding-x} / 1.5 );
+                    }
+                }
+            }
+        }
+    }
+
+    .k-tabstrip-items-wrapper {
+        .k-tabstrip-item,
+        .k-item {
+            &:focus,
+            &.k-focus {
+                z-index: k-z-index("base", 1);
+            }
+        }
+    }
+
+}

package/scss/tabstrip/_theme.scss

@@ -0,0 +1,27 @@
+@use "@progress/kendo-theme-core/scss/components/tabstrip/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-tabstrip--theme() {
+    @include kendo-tabstrip--theme-base();
+
+     // Items
+    .k-tabstrip-items-wrapper {
+        .k-tabstrip-item,
+        .k-item {
+            &:focus,
+            &.k-focus {
+                box-shadow: none;
+                @include focus-indicator(
+                    $indicator: k-color(subtle),
+                    $inset: true,
+                    $type: "outline",
+                    $outline-width: $kendo-tabstrip-item-focus-outline-width,
+                    $outline-offset: $kendo-tabstrip-item-focus-outline-offset
+                );
+            }
+        }
+    }
+}

package/scss/tabstrip/_variables.scss

@@ -0,0 +1,273 @@
+@use "../core/_index.scss" as *;
+@use "../list/_variables.scss" as *;
+
+// TabStrip
+
+/// The default size of the TabStrip.
+/// @group tabstrip
+/// @role default
+$kendo-tabstrip-default-size: "md" !default;
+
+/// The horizontal padding of the TabStrip wrapper.
+/// @group tabstrip
+$kendo-tabstrip-wrapper-padding-x: k-spacing(0) !default;
+/// The vertical padding of the TabStrip wrapper.
+/// @group tabstrip
+$kendo-tabstrip-wrapper-padding-y: k-spacing(0) !default;
+/// The border width around the TabStrip wrapper.
+/// @group tabstrip
+$kendo-tabstrip-wrapper-border-width: 0px !default;
+
+/// The font family of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
+/// The border width around the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-border-width: 1px !default;
+
+/// The font size of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The line height of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+
+/// The background color of the TabStrip wrapper.
+/// @group tabstrip
+$kendo-tabstrip-wrapper-bg: null !default;
+/// The text color of the TabStrip wrapper.
+/// @group tabstrip
+$kendo-tabstrip-wrapper-text: null !default;
+/// The border color of the TabStrip wrapper.
+/// @group tabstrip
+$kendo-tabstrip-wrapper-border: null !default;
+
+/// The background color of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-bg: null !default;
+/// The text color of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-text: k-color(on-app-surface) !default;
+/// The border color of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-border: k-color(border) !default;
+
+/// The border width around the TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-border-width: 1px !default;
+/// The border radius of the TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-border-radius: k-border-radius(xl) !default;
+/// The gap between the TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-gap: k-spacing(0) !default;
+/// The horizontal padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-x: k-spacing(3) !default;
+/// The vertical padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-y: k-spacing(1) !default;
+/// The horizontal padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-x: k-spacing(3) !default;
+/// The vertical padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-y: k-spacing(2) !default;
+/// The horizontal padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-x: k-spacing(3) !default;
+/// The vertical padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-y: k-spacing(2.5) !default;
+
+///  The background color of the TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-bg: null !default;
+/// The text color of the TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-text: k-color(on-app-surface) !default;
+/// The border color of the TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-border: null !default;
+/// The gradient of the TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-gradient: null !default;
+
+/// The background color of the hovered TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-hover-bg: null !default;
+/// The text color of the hovered TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-hover-text: k-color(primary-on-surface) !default;
+/// The border color of the hovered TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-hover-border: null !default;
+/// The gradient of the hovered TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-hover-gradient: null !default;
+
+/// The background color of the selected TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-selected-bg: k-color(surface-alt) !default;
+/// The text color of the selected TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-selected-text: k-color(primary) !default;
+/// The border color of the selected TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-selected-border: k-color(border) !default;
+/// The gradient of the selected TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-selected-gradient: null !default;
+/// The font weight of the selected TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-selected-font-weight: null !default;
+
+/// The shadow of the focused TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
+
+/// The shadow of the dragged TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-dragging-shadow: k-elevation(3) !default;
+
+/// The background color of the disabled TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-disabled-bg: null !default;
+/// The text color of the disabled TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-disabled-text: null !default;
+/// The border color of the disabled TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-disabled-border: null !default;
+/// The gradient of the disabled TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-disabled-gradient: null !default;
+/// The opacity of the disabled TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-disabled-opacity: null !default;
+/// The filter of the disabled TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-item-disabled-filter: null !default;
+
+/// The border width of the TabStrip indicator.
+/// @group tabstrip
+$kendo-tabstrip-indicator-size: null !default;
+/// The border color of the TabStrip ripple.
+/// @group tabstrip
+$kendo-tabstrip-indicator-color: null !default;
+
+/// The horizontal padding of the TabStrip content.
+/// @group tabstrip
+$kendo-tabstrip-content-padding-x: k-spacing(4) !default;
+/// The vertical padding of the TabStrip content.
+/// @group tabstrip
+$kendo-tabstrip-content-padding-y: k-spacing(4) !default;
+/// The border width around the TabStrip content.
+/// @group tabstrip
+$kendo-tabstrip-content-border-width: 1px !default;
+
+/// The background color of the TabStrip content.
+/// @group tabstrip
+$kendo-tabstrip-content-bg: k-color(surface-alt) !default;
+/// The text color of the TabStrip content.
+/// @group tabstrip
+$kendo-tabstrip-content-text: k-color(on-app-surface) !default;
+/// The border color of the TabStrip content.
+/// @group tabstrip
+$kendo-tabstrip-content-border: k-color(border) !default;
+/// The border color of the focused TabStrip content.
+/// @group tabstrip
+$kendo-tabstrip-content-focus-border: k-color(on-app-surface) !default;
+
+/// The left and right scroll overlay of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
+
+/// The outline width of the focused TabStrip item.
+/// @group tabstrip
+$kendo-tabstrip-item-focus-outline-width: 1px !default;
+/// The outline offset of the focused TabStrip item.
+/// @group tabstrip
+$kendo-tabstrip-item-focus-outline-offset: 3px !default;
+
+
+@forward "@progress/kendo-theme-core/scss/components/tabstrip/_variables.scss" with (
+    $kendo-tabstrip-default-size: $kendo-tabstrip-default-size,
+    $kendo-tabstrip-wrapper-padding-x: $kendo-tabstrip-wrapper-padding-x,
+    $kendo-tabstrip-wrapper-padding-y: $kendo-tabstrip-wrapper-padding-y,
+    $kendo-tabstrip-wrapper-border-width: $kendo-tabstrip-wrapper-border-width,
+    $kendo-tabstrip-font-family: $kendo-tabstrip-font-family,
+    $kendo-tabstrip-font-size: $kendo-tabstrip-font-size,
+    $kendo-tabstrip-line-height: $kendo-tabstrip-line-height,
+    $kendo-tabstrip-border-width: $kendo-tabstrip-border-width,
+    $kendo-tabstrip-sm-font-size: $kendo-tabstrip-sm-font-size,
+    $kendo-tabstrip-sm-line-height: $kendo-tabstrip-sm-line-height,
+    $kendo-tabstrip-md-font-size: $kendo-tabstrip-md-font-size,
+    $kendo-tabstrip-md-line-height: $kendo-tabstrip-md-line-height,
+    $kendo-tabstrip-lg-font-size: $kendo-tabstrip-lg-font-size,
+    $kendo-tabstrip-lg-line-height: $kendo-tabstrip-lg-line-height,
+    $kendo-tabstrip-wrapper-bg: $kendo-tabstrip-wrapper-bg,
+    $kendo-tabstrip-wrapper-text: $kendo-tabstrip-wrapper-text,
+    $kendo-tabstrip-wrapper-border: $kendo-tabstrip-wrapper-border,
+    $kendo-tabstrip-bg: $kendo-tabstrip-bg,
+    $kendo-tabstrip-text: $kendo-tabstrip-text,
+    $kendo-tabstrip-border: $kendo-tabstrip-border,
+    $kendo-tabstrip-item-border-width: $kendo-tabstrip-item-border-width,
+    $kendo-tabstrip-item-border-radius: $kendo-tabstrip-item-border-radius,
+    $kendo-tabstrip-item-gap: $kendo-tabstrip-item-gap,
+    $kendo-tabstrip-sm-item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+    $kendo-tabstrip-sm-item-padding-y: $kendo-tabstrip-sm-item-padding-y,
+    $kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-md-item-padding-x,
+    $kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-md-item-padding-y,
+    $kendo-tabstrip-lg-item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+    $kendo-tabstrip-lg-item-padding-y: $kendo-tabstrip-lg-item-padding-y,
+    $kendo-tabstrip-item-bg: $kendo-tabstrip-item-bg,
+    $kendo-tabstrip-item-text: $kendo-tabstrip-item-text,
+    $kendo-tabstrip-item-border: $kendo-tabstrip-item-border,
+    $kendo-tabstrip-item-gradient: $kendo-tabstrip-item-gradient,
+    $kendo-tabstrip-item-hover-bg: $kendo-tabstrip-item-hover-bg,
+    $kendo-tabstrip-item-hover-text: $kendo-tabstrip-item-hover-text,
+    $kendo-tabstrip-item-hover-border: $kendo-tabstrip-item-hover-border,
+    $kendo-tabstrip-item-hover-gradient: $kendo-tabstrip-item-hover-gradient,
+    $kendo-tabstrip-item-selected-bg: $kendo-tabstrip-item-selected-bg,
+    $kendo-tabstrip-item-selected-text: $kendo-tabstrip-item-selected-text,
+    $kendo-tabstrip-item-selected-border: $kendo-tabstrip-item-selected-border,
+    $kendo-tabstrip-item-selected-gradient: $kendo-tabstrip-item-selected-gradient,
+    $kendo-tabstrip-item-selected-font-weight: $kendo-tabstrip-item-selected-font-weight,
+    $kendo-tabstrip-item-focus-shadow: $kendo-tabstrip-item-focus-shadow,
+    $kendo-tabstrip-item-dragging-shadow: $kendo-tabstrip-item-dragging-shadow,
+    $kendo-tabstrip-item-disabled-bg: $kendo-tabstrip-item-disabled-bg,
+    $kendo-tabstrip-item-disabled-text: $kendo-tabstrip-item-disabled-text,
+    $kendo-tabstrip-item-disabled-border: $kendo-tabstrip-item-disabled-border,
+    $kendo-tabstrip-item-disabled-gradient: $kendo-tabstrip-item-disabled-gradient,
+    $kendo-tabstrip-item-disabled-opacity: $kendo-tabstrip-item-disabled-opacity,
+    $kendo-tabstrip-item-disabled-filter: $kendo-tabstrip-item-disabled-filter,
+    $kendo-tabstrip-indicator-size: $kendo-tabstrip-indicator-size,
+    $kendo-tabstrip-indicator-color: $kendo-tabstrip-indicator-color,
+    $kendo-tabstrip-content-padding-x: $kendo-tabstrip-content-padding-x,
+    $kendo-tabstrip-content-padding-y: $kendo-tabstrip-content-padding-y,
+    $kendo-tabstrip-content-border-width: $kendo-tabstrip-content-border-width,
+    $kendo-tabstrip-content-bg: $kendo-tabstrip-content-bg,
+    $kendo-tabstrip-content-text: $kendo-tabstrip-content-text,
+    $kendo-tabstrip-content-border: $kendo-tabstrip-content-border,
+    $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border,
+    $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay
+);

package/scss/taskboard/_index.scss

@@ -0,0 +1,32 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../searchbox/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../card/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-task-board--styles() {
+    @include import-once( "task-board" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-form--styles();
+        @include kendo-input--styles();
+        @include kendo-textbox--styles();
+        @include kendo-searchbox--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-card--styles();
+        @include kendo-task-board--layout();
+        @include kendo-task-board--theme();
+        @include kendo-utils--typography--text-overflow();
+    }
+}

package/scss/taskboard/_layout.scss

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

package/scss/taskboard/_theme.scss

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