@progress/kendo-theme-core 10.2.0-dev.0 → 10.2.0-dev.2

package/scss/components/dataviz/_variables.scss

@@ -0,0 +1,129 @@
+// Chart
+
+$kendo-series-a: null !default;
+$kendo-series-a-dark: null !default;
+$kendo-series-a-darker: null !default;
+$kendo-series-a-light: null !default;
+$kendo-series-a-lighter: null !default;
+
+$kendo-series-b: null !default;
+$kendo-series-b-dark: null !default;
+$kendo-series-b-darker: null !default;
+$kendo-series-b-light: null !default;
+$kendo-series-b-lighter: null !default;
+
+$kendo-series-c: null !default;
+$kendo-series-c-dark: null !default;
+$kendo-series-c-darker: null !default;
+$kendo-series-c-light: null !default;
+$kendo-series-c-lighter: null !default;
+
+$kendo-series-d: null !default;
+$kendo-series-d-dark: null !default;
+$kendo-series-d-darker: null !default;
+$kendo-series-d-light: null !default;
+$kendo-series-d-lighter: null !default;
+
+$kendo-series-e: null !default;
+$kendo-series-e-dark: null !default;
+$kendo-series-e-darker: null !default;
+$kendo-series-e-light: null !default;
+$kendo-series-e-lighter: null !default;
+
+$kendo-series-f: null !default;
+$kendo-series-f-dark: null !default;
+$kendo-series-f-darker: null !default;
+$kendo-series-f-light: null !default;
+$kendo-series-f-lighter: null !default;
+
+$kendo-series-1: null !default;
+$kendo-series-2: null !default;
+$kendo-series-3: null !default;
+$kendo-series-4: null !default;
+$kendo-series-5: null !default;
+$kendo-series-6: null !default;
+$kendo-series-7: null !default;
+$kendo-series-8: null !default;
+$kendo-series-9: null !default;
+$kendo-series-10: null !default;
+$kendo-series-11: null !default;
+$kendo-series-12: null !default;
+$kendo-series-13: null !default;
+$kendo-series-14: null !default;
+$kendo-series-15: null !default;
+$kendo-series-16: null !default;
+$kendo-series-17: null !default;
+$kendo-series-18: null !default;
+$kendo-series-19: null !default;
+$kendo-series-20: null !default;
+$kendo-series-21: null !default;
+$kendo-series-22: null !default;
+$kendo-series-23: null !default;
+$kendo-series-24: null !default;
+$kendo-series-25: null !default;
+$kendo-series-26: null !default;
+$kendo-series-27: null !default;
+$kendo-series-28: null !default;
+$kendo-series-29: null !default;
+$kendo-series-30: null !default;
+
+$kendo-chart-border-width: null !default;
+$kendo-chart-font-family: null !default;
+$kendo-chart-font-size: null !default;
+$kendo-chart-line-height: null !default;
+$kendo-chart-tooltip-font-size: null !default;
+$kendo-chart-label-font-size: null !default;
+$kendo-chart-title-font-size: null !default;
+$kendo-chart-pane-title-font-size: null !default;
+$kendo-chart-pane-title-font-weight: null !default;
+
+$kendo-chart-major-lines: null !default;
+
+$kendo-chart-minor-lines: null !default;
+
+$kendo-chart-inactive: null !default;
+$kendo-chart-area-opacity: null !default;
+$kendo-chart-area-inactive-opacity: null !default;
+$kendo-chart-line-inactive-opacity: null !default;
+
+$kendo-chart-tooltip-padding-x: null !default;
+$kendo-chart-tooltip-padding-y: null !default;
+
+$kendo-chart-tooltip-transition: null !default;
+
+$kendo-chart-bg: null !default;
+$kendo-chart-text: null !default;
+$kendo-chart-border: null !default;
+
+$kendo-chart-crosshair-background: null !default;
+$kendo-chart-crosshair-shared-tooltip-color: null !default;
+$kendo-chart-crosshair-shared-tooltip-background: null !default;
+$kendo-chart-crosshair-shared-tooltip-border: null !default;
+
+$kendo-chart-notes-background: null !default;
+$kendo-chart-notes-border: null !default;
+$kendo-chart-notes-lines: null !default;
+
+$kendo-chart-error-bars-background: null !default;
+
+$kendo-chart-selection-handle-size: null !default;
+$kendo-chart-selection-border-color: null !default;
+$kendo-chart-selection-shadow: null !default;
+
+$kendo-chart-computed-title-height: null !default;
+
+// TreeMap
+$kendo-treemap-font-family: null !default;
+$kendo-treemap-font-size: null !default;
+$kendo-treemap-line-height: null !default;
+
+$kendo-treemap-padding-x: null !default;
+$kendo-treemap-padding-y: null !default;
+
+// Chart Overlay
+$kendo-chart-overlay-bg: null !default;
+
+// No Data
+$kendo-chart-no-data-font-size: null !default;
+$kendo-chart-no-data-font-weight: null !default;
+$kendo-chart-no-data-padding-y: null !default;

package/scss/components/dateinput/_index.scss

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

package/scss/components/dateinput/_layout.scss

@@ -0,0 +1,11 @@
+@mixin kendo-date-input--layout-base() {
+
+    // Date input
+    .k-dateinput {}
+
+}
+
+
+@mixin kendo-date-input--layout() {
+    @include kendo-date-input--layout-base();
+}

package/scss/components/dateinput/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-date-input--theme-base() {
+
+    // Date input
+    .k-dateinput {}
+
+}
+
+
+@mixin kendo-date-input--theme() {
+    @include kendo-date-input--theme-base();
+}

package/scss/components/dateinput/_variables.scss

@@ -0,0 +1 @@
+// Date input

package/scss/components/datepicker/_index.scss

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

package/scss/components/datepicker/_layout.scss

@@ -0,0 +1,10 @@
+@mixin kendo-date-picker--layout-base() {
+
+    // Date picker
+    .k-datepicker {}
+
+}
+
+@mixin kendo-date-picker--layout() {
+    @include kendo-date-picker--layout-base();
+}

package/scss/components/datepicker/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-date-picker--theme-base() {
+
+    // Date picker
+    .k-datepicker {}
+
+}
+
+
+@mixin kendo-date-picker--theme() {
+    @include kendo-date-picker--theme-base();
+}

package/scss/components/datepicker/_variables.scss

@@ -0,0 +1 @@
+// Datepicker

package/scss/components/daterangepicker/_index.scss

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

package/scss/components/daterangepicker/_layout.scss

@@ -0,0 +1,52 @@
+@use "../../spacing/index.import.scss" as *;
+@use "./variables.scss" as *;
+@use "../input/_variables.scss" as *;
+
+@mixin kendo-date-range-picker--layout-base() {
+
+    // Daterange picker
+    .k-daterange-picker {
+        width: $kendo-input-default-width;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-end;
+        gap: k-spacing(2);
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        .k-dateinput {
+            width: $kendo-daterange-picker-input-width;
+        }
+    }
+
+
+    // Angular specific
+    kendo-daterange {
+        // @extend .k-daterangepicker !optional;
+    }
+
+
+    // React specific
+    .k-daterangepicker-wrap {
+        display: inherit;
+        flex-flow: inherit;
+        align-items: inherit;
+        gap: inherit;
+    }
+
+
+    // Alias
+    .k-daterangepicker {
+        @extend .k-daterange-picker !optional;
+    }
+
+}
+
+
+@mixin kendo-date-range-picker--layout() {
+    @include kendo-date-range-picker--layout-base();
+}

package/scss/components/daterangepicker/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-date-range-picker--theme-base() {
+
+    // Date range picker
+    .k-daterangepicker {}
+
+}
+
+
+@mixin kendo-date-range-picker--theme() {
+    @include kendo-date-range-picker--theme-base();
+}

package/scss/components/daterangepicker/_variables.scss

@@ -0,0 +1,2 @@
+// Daterangepicker
+$kendo-daterange-picker-input-width: null !default;

package/scss/components/datetimepicker/_index.scss

@@ -0,0 +1,30 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+@use "../calendar/_index.scss" as *;
+@use "../timeselector/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-date-time-picker--styles() {
+    @include import-once( "date-time-picker" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-button--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-calendar--styles();
+        @include kendo-time-selector--styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-date-time-picker--layout();
+        @include kendo-date-time-picker--theme();
+    }
+}

package/scss/components/datetimepicker/_layout.scss

@@ -0,0 +1,56 @@
+@use "./variables.scss" as *;
+@use "../action-buttons/_variables.scss" as *;
+
+@mixin kendo-date-time-picker--layout-base() {
+
+    // Datetime container
+    .k-datetime-container {}
+
+    // Datetime selector
+    .k-datetime-selector {
+        display: flex;
+        transition: transform .2s;
+    }
+
+    // Wrap
+    .k-datetime-wrap {
+        width: $kendo-datetime-width;
+        overflow: hidden;
+
+        .k-datetime-buttongroup {
+            padding-block: $kendo-actions-padding-y;
+            padding-inline: $kendo-actions-padding-x;
+        }
+
+        .k-calendar,
+        .k-timeselector {
+            width: 100%;
+            border-width: 0;
+        }
+    }
+
+    // Inner wrap
+    .k-datetime-calendar-wrap,
+    .k-datetime-time-wrap {
+        text-align: center;
+        flex: 0 0 $kendo-datetime-width;
+    }
+
+    // Tabs
+    .k-date-tab .k-datetime-selector {
+        transform: translateX(0);
+    }
+    .k-time-tab .k-datetime-selector {
+        transform: translateX(-100%);
+    }
+
+    :is(.k-rtl, [dir="rtl"]) .k-time-tab .k-datetime-selector,
+    .k-time-tab .k-datetime-selector:is(.k-rtl, [dir="rtl"]) {
+        transform: translateX(100%);
+    }
+}
+
+
+@mixin kendo-date-time-picker--layout() {
+    @include kendo-date-time-picker--layout-base();
+}

package/scss/components/datetimepicker/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-date-time-picker--theme-base() {
+
+    // Datetime picker
+    .k-datetimepicker {}
+
+}
+
+
+@mixin kendo-date-time-picker--theme() {
+    @include kendo-date-time-picker--theme-base();
+}

package/scss/components/datetimepicker/_variables.scss

@@ -0,0 +1,2 @@
+// DateTime
+$kendo-datetime-width: null !default;

package/scss/components/dialog/_index.scss

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

package/scss/components/dialog/_layout.scss

@@ -0,0 +1,78 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+@use "../window/_variables.scss" as *;
+
+@mixin kendo-dialog--layout-base() {
+
+    .k-dialog-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        outline: 0;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 10001;
+
+        .k-dialog {
+            position: relative;
+        }
+    }
+
+    .k-dialog {
+        padding: 0;
+        position: fixed;
+        box-sizing: border-box;
+
+        // Centered
+        &.k-dialog-centered {
+            transform: translate(-50%, -50%);
+            top: 50%;
+            left: 50%;
+        }
+
+        .k-multiselect {
+            width: 100%;
+        }
+    }
+
+
+    // Titlebar
+    .k-dialog-titlebar {}
+    .k-dialog-title {}
+
+
+    // Actions
+    .k-dialog-titlebar-actions {}
+    .k-dialog-action {}
+
+
+    // Content
+    .k-dialog-content {}
+
+
+    // Buttons
+    .k-dialog-actions {
+        @include border-bottom-radius( $kendo-window-border-radius );
+        padding-block: $kendo-dialog-buttongroup-padding-y;
+        padding-inline: $kendo-dialog-buttongroup-padding-x;
+        border-width: $kendo-dialog-buttongroup-border-width 0 0;
+        border-style: solid;
+        border-color: inherit;
+        flex: 0 0 auto;
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        gap: $kendo-dialog-button-spacing;
+        overflow: hidden;
+    }
+
+}
+
+
+@mixin kendo-dialog--layout() {
+    @include kendo-dialog--layout-base();
+}

package/scss/components/dialog/_theme.scss

@@ -0,0 +1,31 @@
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../_variables.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-dialog--theme-base() {
+
+    // Dialog titlebar
+    .k-dialog-titlebar {
+        @include fill(
+            $kendo-dialog-titlebar-text,
+            $kendo-dialog-titlebar-bg,
+            $kendo-dialog-titlebar-border
+        );
+    }
+
+    // Dialog theme colors
+    @each $name, $color in $kendo-dialog-theme-colors {
+        .k-dialog-#{$name} .k-dialog-titlebar {
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
+            background-color: $color;
+        }
+    }
+
+}
+
+
+@mixin kendo-dialog--theme() {
+    @include kendo-dialog--theme-base();
+}

package/scss/components/dialog/_variables.scss

@@ -0,0 +1,12 @@
+// Dialog
+
+$kendo-dialog-titlebar-bg: null !default;
+$kendo-dialog-titlebar-text: null !default;
+$kendo-dialog-titlebar-border: null !default;
+
+$kendo-dialog-buttongroup-padding-x: null !default;
+$kendo-dialog-buttongroup-padding-y: null !default;
+$kendo-dialog-buttongroup-border-width: null !default;
+$kendo-dialog-button-spacing: null !default;
+
+$kendo-dialog-theme-colors: null !default;

package/scss/components/dock-manager/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-dock-manager--styles() {
+    @include import-once("dock-manager") {
+        @include core-styles();
+        @include kendo-splitter--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-tabstrip--styles();
+        @include kendo-dock-manager--layout();
+        @include kendo-dock-manager--theme();
+    }
+}