From 7bddac5f1d715bb591959946d2637037c9454bb1 Mon Sep 17 00:00:00 2001
From: TeyaVes <Teya.Veselinova@progress.com>
Date: Tue, 12 Jul 2022 17:52:48 +0300
Subject: [PATCH] feat(calendar): add calendar fluent styles

---
 packages/fluent/scss/calendar/_layout.scss    | 442 ++++++++++++++++++
 packages/fluent/scss/calendar/_theme.scss     | 196 ++++++++
 packages/fluent/scss/calendar/_variables.scss | 263 +++++++++++
 packages/fluent/scss/calendar/index.scss      |  25 +
 packages/fluent/scss/core/_variables.scss     |  24 +-
 .../fluent/scss/core/color-system/_theme.scss |  40 +-
 .../scss/core/mixins/_hide-scrollbar.scss     |  13 +
 packages/fluent/scss/core/mixins/_index.scss  |   1 +
 packages/fluent/scss/index.scss               |   2 +
 9 files changed, 1003 insertions(+), 3 deletions(-)
 create mode 100644 packages/fluent/scss/calendar/_layout.scss
 create mode 100644 packages/fluent/scss/calendar/_theme.scss
 create mode 100644 packages/fluent/scss/calendar/_variables.scss
 create mode 100644 packages/fluent/scss/calendar/index.scss
 create mode 100644 packages/fluent/scss/core/mixins/_hide-scrollbar.scss

diff --git a/packages/fluent/scss/calendar/_layout.scss b/packages/fluent/scss/calendar/_layout.scss
new file mode 100644
index 00000000000..ebe7357f981
--- /dev/null
+++ b/packages/fluent/scss/calendar/_layout.scss
@@ -0,0 +1,442 @@
+@use "../core/color-system" as *;
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-calendar--layout() {
+
+    // Calendar
+
+    // Base
+    .k-calendar {
+        border-width: var( --kendo-calendar-border-width, #{$kendo-calendar-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-calendar-font-family, #{$kendo-calendar-font-family} );
+        font-size: var( --kendo-calendar-font-size, #{$kendo-calendar-font-size} );
+        line-height: var( --kendo-calendar-line-height, #{$kendo-calendar-line-height} );
+        position: relative;
+        overflow: hidden;
+        display: inline-flex;
+        flex-flow: column nowrap;
+        user-select: none;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+
+        // Nested calendar
+        > .k-calendar {
+            border: 0;
+        }
+
+        // Common
+        .k-link {
+            white-space: normal;
+            position: relative;
+            overflow: hidden;
+        }
+    }
+
+
+    // Calendar table
+    .k-calendar-table {
+        margin: 0;
+        border-width: 0;
+        border-color: inherit;
+        border-spacing: 0;
+        border-collapse: separate;
+        table-layout: fixed;
+        text-align: center;
+        outline: 0;
+        display: inline-table;
+        vertical-align: top;
+        position: relative;
+        z-index: 1;
+    }
+
+    .k-calendar-caption,
+    .k-calendar-caption.k-calendar-th,
+    .k-calendar .k-meta-header,
+    .k-calendar .k-month-header {
+        padding-inline: var( --kendo-calendar-caption-padding-x, #{$kendo-calendar-caption-padding-x} );
+        padding-block: var( --kendo-calendar-caption-padding-y, #{$kendo-calendar-caption-padding-y} );
+        height: var( --kendo-calendar-caption-height, #{$kendo-calendar-caption-height} );
+        box-sizing: border-box;
+        font-size: var( --kendo-calendar-caption-font-size, #{$kendo-calendar-caption-font-size} );
+        line-height: var( --kendo-calendar-caption-line-height, #{$kendo-calendar-caption-line-height} );
+        text-transform: none;
+        text-align: center;
+        font-weight: var( --kendo-calendar-caption-font-weight, #{$kendo-calendar-caption-font-weight} );
+        cursor: default;
+    }
+
+    .k-calendar-th,
+    .k-calendar-td {
+        border-width: 0;
+        padding: 0;
+        text-align: center;
+        border-style: solid;
+        border-color: inherit;
+        font-weight: normal;
+        cursor: default;
+    }
+
+    .k-calendar-th {
+        padding-inline: var( --kendo-calendar-header-cell-padding-x, #{$kendo-calendar-header-cell-padding-x} );
+        padding-block: var( --kendo-calendar-header-cell-padding-y, #{$kendo-calendar-header-cell-padding-y} );
+        width: var( --kendo-calendar-header-cell-width, #{$kendo-calendar-header-cell-width} );
+        height: var( --kendo-calendar-header-cell-height, #{$kendo-calendar-header-cell-height} );
+        font-size: var( --kendo-calendar-header-cell-font-size, #{$kendo-calendar-header-cell-font-size} );
+        line-height: var( --kendo-calendar-header-cell-line-height, #{$kendo-calendar-header-cell-line-height} );
+        text-transform: uppercase;
+    }
+
+    .k-calendar-td {
+        @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ));
+        border-color: transparent;
+        font-size: var( --kendo-calendar-cell-font-size, #{$kendo-calendar-cell-font-size} );
+    }
+
+
+    // Calendar header
+    .k-calendar .k-header {
+        padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
+        padding-block: var( --kendo-calendar-header-padding-y, #{$kendo-calendar-header-padding-y} );
+        border-bottom-width: var( --kendo-calendar-header-border-width, #{$kendo-calendar-header-border-width} );
+        border-bottom-style: solid;
+        display: flex;
+        flex-flow: row nowrap;
+        gap: var( --kendo-calendar-nav-gap, #{$kendo-calendar-nav-gap} );
+        align-items: center;
+        position: relative;
+        z-index: 2;
+    }
+
+
+    // Calendar header
+    .k-calendar-header {
+        padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
+        padding-block: var( --kendo-calendar-header-padding-y, #{$kendo-calendar-header-padding-y} );
+        min-width: var( --kendo-calendar-header-min-width, #{$kendo-calendar-header-min-width} );
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex: 0 0 auto;
+
+        .k-title,
+        .k-calendar-title {
+            font-weight: bold;
+        }
+        .k-today,
+        .k-nav-today {
+            text-decoration: none;
+            cursor: pointer;
+            outline: none;
+        }
+
+        .k-calendar-nav {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            gap: var( --kendo-calendar-nav-gap, #{$kendo-calendar-nav-gap} );
+        }
+    }
+
+
+    // Calendar footer
+    .k-calendar-footer,
+    .k-calendar .k-footer {
+        padding-inline: var( --kendo-calendar-header-footer-x, #{$kendo-calendar-footer-padding-x} );
+        padding-block: var( --kendo-calendar-header-footer-y, #{$kendo-calendar-footer-padding-y} );
+        text-align: center;
+        clear: both;
+    }
+
+
+    // Calendar view wrapper
+    .k-calendar-view {
+        margin: auto;
+        padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
+        // setting width / height prevents layout changes in meta views
+        width: $kendo-calendar-view-width;
+        min-height: $kendo-calendar-view-height;
+        box-sizing: content-box;
+        gap: var( --kendo-calendar-view-gap, #{$kendo-calendar-view-gap} );
+        position: relative;
+        z-index: 1;
+        overflow: hidden;
+
+        .k-link {
+            @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
+            padding-inline: var( --kendo-calendar-cell-padding-x, #{$kendo-calendar-cell-padding-x} );
+            padding-block: var( --kendo-calendar-cell-padding-y, #{$kendo-calendar-cell-padding-y} );
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        .k-today .k-link {
+            @include border-radius( var( --kendo-calendar-today-border-radius, #{$kendo-calendar-today-border-radius} ) );
+        }
+    }
+    .k-week-number .k-calendar-view {
+        width: calc(8 * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
+    }
+
+
+    // Month view
+    .k-calendar-monthview {
+        $_month-cell-size: var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} );
+
+        .k-calendar-td {
+            width: $_month-cell-size;
+            height: $_month-cell-size;
+        }
+        .k-link {
+            width: $_month-cell-size;
+            height: $_month-cell-size;
+        }
+    }
+
+
+    // Year view
+    .k-calendar-yearview {
+        $_year-cell-size: calc( (7 / 4) * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
+
+        .k-calendar-td {
+            width: auto;
+            height: auto;
+        }
+        .k-link {
+            width: $_year-cell-size;
+            height: $_year-cell-size;
+        }
+    }
+
+
+    // Decade view
+    .k-calendar-decadeview {
+        $_decade-cell-size: calc( (7 / 4) * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
+
+        .k-calendar-td {
+            width: auto;
+            height: auto;
+        }
+        .k-link {
+            width: $_decade-cell-size;
+            height: $_decade-cell-size;
+        }
+    }
+
+
+    // Century view
+    .k-calendar-centuryview {
+        $_century-cell-size: calc( (7 / 4) * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
+
+        .k-calendar-td {
+            width: auto;
+            height: auto;
+        }
+        .k-link {
+            width: $_century-cell-size;
+            height: $_century-cell-size;
+            text-align: left;
+        }
+    }
+
+
+    // Calendar in popup
+    .k-popup .k-calendar {
+        height: 100%;
+    }
+    .k-calendar-container,
+    .k-datetime-container {
+        padding: 0;
+
+        .k-calendar {
+            border-width: 0;
+        }
+    }
+
+
+    .k-calendar .k-content.k-scrollable,
+    .k-calendar .k-calendar-content.k-scrollable {
+        box-sizing: content-box;
+        overflow-x: hidden;
+        overflow-y: auto;
+        display: block;
+
+        @include hide-scrollbar();
+    }
+
+    // scoped in calendar until it is used elsewhere
+    .k-calendar .k-scrollable-placeholder {
+        position: absolute;
+        z-index: -1;
+        width: 1px;
+        top: 0;
+        right: 0;
+    }
+
+
+    // Infinite calendar
+    .k-calendar-infinite {
+        box-sizing: content-box;
+        display: inline-flex;
+        flex-flow: row nowrap;
+
+        .k-calendar-view {
+            padding-inline: var( --kendo-infinite-calendar-view-padding-x, #{$kendo-infinite-calendar-view-padding-x} );
+            padding-block: var( --kendo-infinite-calendar-view-padding-y, #{$kendo-infinite-calendar-view-padding-y} );
+            height: $kendo-infinite-calendar-view-height;
+            flex: 0 0 auto;
+            display: flex;
+            flex-flow: column nowrap;
+            gap: 0;
+            overflow: hidden;
+
+            .k-content.k-scrollable {
+                position: relative;
+            }
+        }
+
+        .k-calendar-header {
+            margin-inline-start: calc( -1 * var( --kendo-infinite-calendar-view-padding-x, #{$kendo-infinite-calendar-view-padding-x} ));
+            margin-inline-end: calc( -1 * var( --kendo-infinite-calendar-view-padding-x, #{$kendo-infinite-calendar-view-padding-x} ));
+            padding-inline: var( --kendo-infinite-calendar-header-padding-x, #{$kendo-infinite-calendar-header-padding-x} );
+            padding-block: var( --kendo-infinite-calendar-header-padding-y, #{$kendo-infinite-calendar-header-padding-y} );
+            width: auto;
+            min-width: 0;
+        }
+
+        .k-calendar-weekdays {
+            flex: 0 0 auto;
+        }
+    }
+
+
+    // Calendar navigation
+    .k-calendar-navigation {
+        width: var( --kendo-calendar-navigation-width, #{$kendo-calendar-navigation-width} );
+        text-align: center;
+        flex: 0 0 auto;
+        display: block;
+        overflow: hidden;
+        position: relative;
+        z-index: 2;
+
+        .k-content,
+        .k-calendar-content {
+            background: transparent;
+            height: auto;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+
+            ul {
+                width: var( --kendo-calendar-navigation-width, #{$kendo-calendar-navigation-width} );
+            }
+
+            li {
+                height: var( --kendo-calendar-navigation-item-height, #{$kendo-calendar-navigation-item-height} );
+                line-height: var( --kendo-calendar-navigation-item-height, #{$kendo-calendar-navigation-item-height} );
+                cursor: pointer;
+                padding-inline: 1em;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: clip;
+            }
+        }
+
+        .k-calendar-navigation-marker {
+            font-weight: bold;
+        }
+
+        .k-calendar-navigation-highlight {
+            width: 100%;
+            border-width: 1px 0;
+            border-style: solid;
+            height: var( --kendo-calendar-navigation-item-height, #{$kendo-calendar-navigation-item-height} );
+            box-sizing: border-box;
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+        }
+
+    }
+
+
+    // Multiview calendar
+    .k-calendar-range {
+        width: auto;
+
+        .k-calendar-view {
+            width: auto;
+            white-space: nowrap;
+
+            &::after {
+                display: none;
+            }
+
+            &:focus {
+                outline: 0;
+            }
+        }
+
+        .k-range-start,
+        .k-range-end,
+        .k-range-mid {
+
+            position: relative;
+
+            &::before {
+                content: "";
+                position: absolute;
+                z-index: 1;
+                inset: 0px;
+                border-style: solid;
+                border-width: var( --INTERNAL--kendo-calendar-range-border-width, 0 );
+            }
+        }
+
+        .k-range-start::before,
+        .k-range-mid:first-child::before {
+            --INTERNAL--kendo-calendar-range-border-width: 1px 0 1px 1px;
+            @include border-left-radius(var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ));
+        }
+
+        .k-range-end::before,
+        .k-range-mid:last-child::before {
+            --INTERNAL--kendo-calendar-range-border-width: 1px 1px 1px 0;
+            @include border-right-radius(var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ));
+        }
+
+        .k-range-mid::before {
+            --INTERNAL--kendo-calendar-range-border-width: 1px 0;
+        }
+
+        .k-range-start:last-child::before,
+        .k-range-end:first-child::before {
+            --INTERNAL--kendo-calendar-range-border-width: 1px;
+        }
+    }
+
+
+    .k-rtl .k-calendar,
+    .k-calendar[dir="rtl"] {
+
+        .k-nav-prev,
+        .k-nav-next,
+        .k-prev-view,
+        .k-next-view {
+            transform: scaleX(-1);
+        }
+    }
+}
diff --git a/packages/fluent/scss/calendar/_theme.scss b/packages/fluent/scss/calendar/_theme.scss
new file mode 100644
index 00000000000..ea7db669189
--- /dev/null
+++ b/packages/fluent/scss/calendar/_theme.scss
@@ -0,0 +1,196 @@
+@use "../core/color-system" as *;
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-calendar--theme() {
+    .k-calendar {
+        @include fill(
+            var(--kendo-calendar-text, #{$kendo-calendar-text}),
+            var(--kendo-calendar-bg, #{$kendo-calendar-bg}),
+            var(--kendo-calendar-border, #{$kendo-calendar-border}),
+        );
+
+        // Header / footer
+        .k-header {
+            @include fill(
+                var(--kendo-calendar-header-text, #{$kendo-calendar-header-text}),
+                var(--kendo-calendar-header-bg, #{$kendo-calendar-header-bg}),
+                inherit,
+            );
+        }
+
+        // Today navigation
+        .k-nav-today {
+            color: var(--kendo-calendar-today-nav-text, #{$kendo-calendar-today-nav-text});
+
+            &:hover,
+            &.k-hover,
+            &:focus,
+            &.k-focus {
+                color: var(--kendo-calendar-today-nav-hover-text, #{$kendo-calendar-today-nav-hover-text});
+            }
+        }
+
+
+        // Header cells
+        .k-calendar-th {
+            color: var(--kendo-calendar-header-cell-text, #{$kendo-calendar-header-cell-text});
+        }
+
+        .k-calendar-caption,
+        .k-meta-header,
+        .k-month-header {
+            color: var(--kendo-calendar-caption-color, #{$kendo-calendar-caption-color});
+        }
+
+
+        .k-calendar-td {
+            --INTERNAL--kendo-calendar-cell-text: var( --kendo-calendar-cell-text );
+            --INTERNAL--kendo-calendar-cell-bg: var( --kendo-calendar-cell-bg );
+
+            @include fill(
+                var( --INTERNAL--kendo-calendar-cell-text, inherit ),
+                var( --INTERNAL--kendo-calendar-cell-bg, inherit )
+            );
+
+            .k-link {
+                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-link-text );
+                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-link-bg );
+                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-link-shadow );
+
+                @include fill(
+                    var( --INTERNAL--kendo-calendar-cell-link-text, inherit ),
+                    var( --INTERNAL--kendo-calendar-cell-link-bg, inherit )
+                );
+
+                box-shadow: var( --INTERNAL--kendo-calendar-cell-link-shadow, none );
+            }
+
+            &:hover .k-link,
+            &.k-hover .k-link {
+                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-hover-text, #{$kendo-calendar-cell-hover-text} );
+                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-hover-bg, #{$kendo-calendar-cell-hover-bg} );
+            }
+
+            &:focus .k-link,
+            &.k-focus .k-link {
+                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-focus-shadow, #{$kendo-calendar-cell-focus-shadow} );
+            }
+
+            &.k-selected .k-link{
+                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-selected-text, #{$kendo-calendar-cell-selected-text} );
+                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-selected-bg, #{$kendo-calendar-cell-selected-bg} );
+                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-selected-shadow, #{$kendo-calendar-cell-selected-shadow} );
+            }
+
+            &.k-selected:hover .k-link,
+            &.k-selected.k-hover .k-link {
+                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-selected-hover-text, #{$kendo-calendar-cell-selected-hover-text} );
+                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-selected-hover-bg, #{$kendo-calendar-cell-selected-hover-bg} );
+            }
+
+            &.k-selected:focus .k-link,
+            &.k-selected.k-focus .k-link {
+                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-selected-focus-shadow, #{$kendo-calendar-cell-selected-focus-shadow} );
+            }
+        }
+
+        // Special days
+
+        .k-today {
+            --kendo-calendar-cell-link-text: var( --kendo-calendar-today-text, #{$kendo-calendar-today-text} );
+            --kendo-calendar-cell-link-bg: var( --kendo-calendar-today-bg, #{$kendo-calendar-today-bg} );
+            --kendo-calendar-cell-hover-text: var( --kendo-calendar-today-hover-text, #{$kendo-calendar-today-hover-text} );
+            --kendo-calendar-cell-hover-bg: var( --kendo-calendar-today-hover-bg, #{$kendo-calendar-today-hover-bg} );
+        }
+
+        .k-weekend {
+            --kendo-calendar-cell-text: var( --kendo-calendar-weekend-text, #{$kendo-calendar-weekend-text} );
+            --kendo-calendar-cell-bg: var( --kendo-calendar-weekend-bg, #{$kendo-calendar-weekend-bg} );
+        }
+
+        .k-other-month {
+            --kendo-calendar-cell-text: var( --kendo-calendar-other-month-text, #{$kendo-calendar-other-month-text} );
+            --kendo-calendar-cell-bg: var( --kendo-calendar-other-month-bg, #{$kendo-calendar-other-month-bg} );
+        }
+
+        .k-alt {
+            // remove default k-alt background color
+            background-color: transparent;
+
+            --kendo-calendar-cell-text: var( --kendo-calendar-week-number-text, #{$kendo-calendar-week-number-text} );
+            --kendo-calendar-cell-bg: var( --kendo-calendar-week-number-bg, #{$kendo-calendar-week-number-bg} );
+        }
+
+
+        // Calendar navigation
+        .k-calendar-navigation {
+            @include fill(
+                var( --kendo-calendar-navigation-text, #{$kendo-calendar-navigation-text} ),
+                var( --kendo-calendar-navigation-bg, #{$kendo-calendar-navigation-bg} ),
+            );
+            box-shadow: inset -1px 0 var( --kendo-calendar-navigation-border, #{$kendo-calendar-navigation-border} );
+
+            li:hover,
+            li.k-hover {
+                color: var( --kendo-calendar-today-nav-hover-text, #{$kendo-calendar-today-nav-hover-text} );
+            }
+        }
+        .k-calendar-navigation-highlight {
+            @include fill(
+                var( --kendo-calendar-text, #{$kendo-calendar-text} ),
+                var( --kendo-calendar-bg, #{$kendo-calendar-bg} ),
+                var( --kendo-calendar-border, #{$kendo-calendar-border} )
+            );
+        }
+
+
+        &[dir="rtl"],
+        .k-rtl & {
+            .k-calendar-navigation {
+                box-shadow: inset 1px 0 var( --kendo-calendar-navigation-border, #{$kendo-calendar-navigation-border} );
+            }
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.k-invalid:hover,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            border-color: var( --kendo-invalid-border, inherit );
+        }
+    }
+
+
+    // Scheduler integration
+    .k-scheduler .k-calendar .k-other-month {
+        @include fill(
+            var( --kendo-calendar-other-month-text, #{$kendo-calendar-other-month-text} )
+            transparent
+        );
+    }
+
+    // Range Selection
+
+    .k-calendar .k-calendar-td  {
+
+        &.k-range-start,
+        &.k-range-end,
+        &.k-range-mid {
+            --kendo-calendar-cell-bg: var( --kendo-calendar-range-bg, #{$kendo-calendar-range-bg} );
+            --kendo-calendar-cell-text: var( --kendo-calendar-range-text, #{$kendo-calendar-range-text} );
+            --kendo-calendar-cell-link-bg: transparent;
+            --kendo-calendar-cell-hover-bg: transparent;
+            --kendo-calendar-cell-selected-shadow: none;
+
+            &::before {
+                border-color: var( --kendo-calendar-range-border, #{$kendo-calendar-range-border} );
+            }
+        }
+    }
+
+    .k-out-of-range {
+        pointer-events: none;
+        visibility: hidden;
+    }
+}
diff --git a/packages/fluent/scss/calendar/_variables.scss b/packages/fluent/scss/calendar/_variables.scss
new file mode 100644
index 00000000000..9d196bc4b96
--- /dev/null
+++ b/packages/fluent/scss/calendar/_variables.scss
@@ -0,0 +1,263 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Width of the border around the calendar.
+/// @group calendar
+$kendo-calendar-border-width: 1px !default;
+/// Font family of the calendar.
+/// @group calendar
+$kendo-calendar-font-family: var(--kendo-font-family, inherit ) !default;
+/// Font size of the calendar.
+/// @group calendar
+$kendo-calendar-font-size: var(--kendo-font-size, inherit ) !default;
+/// Line height of the calendar.
+/// @group calendar
+$kendo-calendar-line-height: var(--kendo-line-height, normal ) !default;
+
+/// Size of the calendar cell.
+/// @group calendar
+$kendo-calendar-cell-size: 28px !default;
+
+/// Background color of the calendar.
+/// @group calendar
+$kendo-calendar-bg: var(--kendo-component-bg, initial) !default;
+/// Text color of the calendar.
+/// @group calendar
+$kendo-calendar-text: var(--kendo-component-text, initial) !default;
+/// Border color of the calendar.
+/// @group calendar
+$kendo-calendar-border: var(--kendo-component-border, initial) !default;
+
+/// Horizontal padding of the calendar header.
+/// @group calendar
+$kendo-calendar-header-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the calendar header.
+/// @group calendar
+$kendo-calendar-header-padding-y: map-get( $kendo-spacing, 3 ) map-get( $kendo-spacing, 1 ) !default;
+/// Width of the bottom border of the calendar header.
+/// @group calendar
+$kendo-calendar-header-border-width: 1px !default;
+$kendo-calendar-header-min-width: calc($kendo-calendar-cell-size * 8) !default;
+
+/// Background color of the calendar header.
+/// @group calendar
+$kendo-calendar-header-bg: $kendo-calendar-bg !default; // $header-bg
+/// Text color of the calendar header.
+/// @group calendar
+$kendo-calendar-header-text: $kendo-calendar-text !default; // $header-text
+/// Border color of the calendar header.
+/// @group calendar
+$kendo-calendar-header-border: $kendo-calendar-border !default; // $header-border
+
+/// Spacing between the navigation buttons of the calendar.
+/// @group calendar
+$kendo-calendar-nav-gap: map-get( $kendo-spacing, 1 ) !default;
+
+/// Text color of the Today link in the calendar.
+/// @group calendar
+$kendo-calendar-today-nav-text: var(--kendo-link-text, initial ) !default;
+/// Text color of the Today link when hovered in the calendar.
+/// @group calendar
+$kendo-calendar-today-nav-hover-text: var(--kendo-link-hover-text, initial ) !default;
+
+/// Horizontal padding of the calendar footer.
+/// @group calendar
+$kendo-calendar-footer-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the calendar footer.
+/// @group calendar
+$kendo-calendar-footer-padding-y: map-get( $kendo-spacing, 3 ) !default;
+
+/// Font size of the calendar cell.
+/// @group calendar
+$kendo-calendar-cell-font-size: var(--kendo-font-size-sm, inherit ) !default;
+/// Horizontal padding of the calendar cell.
+/// @group calendar
+$kendo-calendar-cell-padding-x: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+/// Vertical padding of the calendar cell.
+/// @group calendar
+$kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-x !default;
+/// Line height of the calendar cell.
+/// @group calendar
+$kendo-calendar-cell-line-height: $kendo-calendar-line-height !default;
+/// Border radius of the calendar cell.
+/// @group calendar
+$kendo-calendar-cell-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+
+/// Horizontal padding of the calendar header cell.
+/// @group calendar
+$kendo-calendar-header-cell-padding-x: 0 !default;
+/// Vertical padding of the calendar header cell.
+/// @group calendar
+$kendo-calendar-header-cell-padding-y: 0 !default;
+/// Width of the calendar header cell.
+/// @group calendar
+$kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
+/// Height of the calendar header cell.
+/// @group calendar
+$kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
+/// Font size of the calendar header cell.
+/// @group calendar
+$kendo-calendar-header-cell-font-size: var(--kendo-font-size-sm, inherit ) !default;
+/// Line height of the calendar header cell.
+/// @group calendar
+$kendo-calendar-header-cell-line-height: 2 !default;
+///Background color of the calendar header cell.
+/// @group calendar
+$kendo-calendar-header-cell-bg: inherit !default;
+/// Text color of the calendar header cell.
+/// @group calendar
+$kendo-calendar-header-cell-text: inherit !default;
+
+/// Horizontal padding of the calendar captions.
+/// @group calendar
+$kendo-calendar-caption-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the calendar captions.
+/// @group calendar
+$kendo-calendar-caption-padding-y: map-get( $kendo-spacing, 1 ) !default;
+/// Height of the calendar captions.
+/// @group calendar
+$kendo-calendar-caption-height: $kendo-calendar-cell-size !default;
+/// Font size of the calendar captions.
+/// @group calendar
+$kendo-calendar-caption-font-size: var(--kendo-font-size-sm, inherit ) !default;
+/// Line height of the calendar captions.
+/// @group calendar
+$kendo-calendar-caption-line-height: normal !default;
+/// Font weight of the calendar captions.
+/// @group calendar
+$kendo-calendar-caption-font-weight: bold !default;
+/// Text color of the calendar captions.
+/// @group calendar
+$kendo-calendar-caption-color: $kendo-subtle-text !default;
+
+$kendo-calendar-view-width: calc($kendo-calendar-cell-size * 7) !default;
+$kendo-calendar-view-height: calc($kendo-calendar-cell-size * 7) !default;
+/// Spacing between the views in the multiview calendar.
+/// @group calendar
+$kendo-calendar-view-gap: map-get( $kendo-spacing, 4 ) !default;
+
+/// Background color of the calendar weekend cell.
+/// @group calendar
+$kendo-calendar-weekend-bg: inherit !default;
+/// Text color of the calendar weekend cell.
+/// @group calendar
+$kendo-calendar-weekend-text: inherit !default;
+
+/// Text color of the calendar today cell.
+/// @group calendar
+$kendo-calendar-today-text: $white !default; // use contrast function
+/// Background color of the calendar today cell.
+/// @group calendar
+$kendo-calendar-today-bg: get-theme-color-var( primary-130 ) !default;
+/// Text color of the calendar today cell when hovered.
+/// @group calendar
+$kendo-calendar-today-hover-text: $white !default;  // use contrast function
+/// Background color of the calendar today cell when hovered.
+/// @group calendar
+$kendo-calendar-today-hover-bg: get-theme-color-var( primary-160 ) !default;
+/// Border radius of the calendar today cell.
+/// @group calendar
+$kendo-calendar-today-border-radius: 9999px !default;
+
+/// Background color of the calendar week number cell.
+/// @group calendar
+$kendo-calendar-week-number-bg: inherit !default;
+/// Text color of the calendar week number cell.
+/// @group calendar
+$kendo-calendar-week-number-text: var(--kendo-subtle-text, inherit ) !default;
+
+/// Background color of the other months calendar cells.
+/// @group calendar
+$kendo-calendar-other-month-bg: inherit !default;
+/// Text color of the other months calendar cells.
+/// @group calendar
+$kendo-calendar-other-month-text: var(--kendo-subtle-text, inherit ) !default;
+
+/// Background color of the calendar cells.
+/// @group calendar
+$kendo-calendar-cell-bg: inherit !default;
+/// Text color of the calendar cells.
+/// @group calendar
+$kendo-calendar-cell-text: inherit !default;
+
+/// Background color of the calendar cells when hovered.
+/// @group calendar
+$kendo-calendar-cell-hover-bg: var(--kendo-hover-bg, inherit ) !default;
+/// Text color of the calendar cells when hovered.
+/// @group calendar
+$kendo-calendar-cell-hover-text: var(--kendo-hover-text, inherit ) !default;
+
+/// Background color of the selected calendar cell.
+/// @group calendar
+$kendo-calendar-cell-selected-bg: var(--kendo-selected-bg, inherit ) !default;
+/// Text color of the selected calendar cell.
+/// @group calendar
+$kendo-calendar-cell-selected-text: var(--kendo-selected-text, inherit ) !default;
+/// Border color of the selected calendar cell.
+/// @group calendar
+$kendo-calendar-cell-selected-border: var(--kendo-selected-border, inherit ) !default;
+/// Shadow of the selected calendar cell.
+/// @group calendar
+$kendo-calendar-cell-selected-shadow: inset 0 0 0 1px $kendo-calendar-cell-selected-border !default;
+
+/// Background color of the selected calendar cell when hovered.
+/// @group calendar
+$kendo-calendar-cell-selected-hover-bg: var(--kendo-selected-hover-bg, inherit ) !default;
+/// Text color of the selected calendar cell when hovered.
+/// @group calendar
+$kendo-calendar-cell-selected-hover-text:var(--kendo-selected-hover-text, inherit ) !default;
+
+/// Shadow of the selected calendar cell when focused.
+/// @group calendar
+$kendo-calendar-cell-focus-shadow: inset 0 0 0 1px get-theme-color-var(neutral-130) !default;
+/// Shadow of the selected calendar cell when selected and focused.
+/// @group calendar
+$kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-focus-shadow !default;
+
+
+// Calendar navigation
+/// Width of the navigation in the infinite calendar.
+/// @group calendar
+$kendo-calendar-navigation-width: 5em !default;
+/// Height of the navigation items in the infinite calendar.
+/// @group calendar
+$kendo-calendar-navigation-item-height: 2em !default;
+
+/// Background color of the navigation in the infinite calendar.
+/// @group calendar
+$kendo-calendar-navigation-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the navigation in the infinite calendar.
+/// @group calendar
+$kendo-calendar-navigation-text: $kendo-calendar-header-text !default;
+/// Border color of the navigation in the infinite calendar.
+/// @group calendar
+$kendo-calendar-navigation-border: $kendo-calendar-header-border !default;
+
+
+// Infinite calendar
+/// Background color of the navigation in the infinite calendar.
+/// @group calendar
+$kendo-infinite-calendar-header-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Background color of the navigation in the infinite calendar.
+/// @group calendar
+$kendo-infinite-calendar-header-padding-y: map-get( $kendo-spacing, 3 ) map-get( $kendo-spacing, 1 ) !default;
+
+/// Horizontal padding of the infinite calendar.
+/// @group calendar
+$kendo-infinite-calendar-view-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the infinite calendar.
+/// @group calendar
+$kendo-infinite-calendar-view-padding-y: 0px !default;
+$kendo-infinite-calendar-view-height: calc( $kendo-calendar-cell-size * 9 ) !default;
+
+
+// Range calendar
+/// Background color of the range selection in the calendar.
+/// @group calendar
+$kendo-calendar-range-bg: get-theme-color-var( neutral-30 ) !default;
+/// Text color of the range selection in the calendar.
+/// @group calendar
+$kendo-calendar-range-text: inherit !default;
+/// Border color of the range selection in the calendar.
+/// @group calendar
+$kendo-calendar-range-border: get-theme-color-var( neutral-130 )  !default;
diff --git a/packages/fluent/scss/calendar/index.scss b/packages/fluent/scss/calendar/index.scss
new file mode 100644
index 00000000000..9986aebc166
--- /dev/null
+++ b/packages/fluent/scss/calendar/index.scss
@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "button",
+    dependencies: (
+        "button"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "calendar" ) {
+        @include kendo-calendar--layout();
+        @include kendo-calendar--theme();
+    }
+}
diff --git a/packages/fluent/scss/core/_variables.scss b/packages/fluent/scss/core/_variables.scss
index 2876e436308..0c4b4990810 100644
--- a/packages/fluent/scss/core/_variables.scss
+++ b/packages/fluent/scss/core/_variables.scss
@@ -51,8 +51,19 @@ $kendo-spacing: (
 
 // Generic styles
 $kendo-font-size: 14px !default;
+$kendo-font-size-xs: 10px !default;
+$kendo-font-size-sm: 12px !default;
+$kendo-font-size-md: $kendo-font-size !default;
+$kendo-font-size-lg: 16px !default;
+$kendo-font-size-xl: 20px !default;
+
 $kendo-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !default;
 $kendo-line-height: calc( 20 / 14 ) !default;
+$kendo-line-height-xs: 1 !default;
+$kendo-line-height-sm: 1.25 !default;
+$kendo-line-height-md: $kendo-line-height !default;
+$kendo-line-height-lg: 1.5 !default;
+$kendo-line-height-em: calc( #{$kendo-line-height} * 1em) !default;
 
 $kendo-font-weight: 400 !default;
 $kendo-font-weight-light: 300 !default;
@@ -69,9 +80,20 @@ $kendo-border-radius-md: $kendo-border-radius !default;
 $kendo-border-radius-lg: calc( #{$kendo-border-radius} * 2 ) !default;
 
 :root {
-    --kendo-font-size: #{$kendo-font-size};
     --kendo-font-family: #{meta.inspect($kendo-font-family)};
+
+    --kendo-font-size: #{$kendo-font-size};
+    --kendo-font-size-xs: #{$kendo-font-size-xs};
+    --kendo-font-size-sm: #{$kendo-font-size-sm};
+    --kendo-font-size-md: #{$kendo-font-size-md};
+    --kendo-font-size-lg: #{$kendo-font-size-lg};
+    --kendo-font-size-xl: #{$kendo-font-size-xl};
+
     --kendo-line-height: #{$kendo-line-height};
+    --kendo-line-height-xs: #{$kendo-line-height-xs};
+    --kendo-line-height-sm: #{$kendo-line-height-sm};
+    --kendo-line-height-md: #{$kendo-line-height-md};
+    --kendo-line-height-lg: #{$kendo-line-height-lg};
 
     --kendo-font-weight: #{$kendo-font-weight};
     --kendo-font-weight-light: #{$kendo-font-weight-light};
diff --git a/packages/fluent/scss/core/color-system/_theme.scss b/packages/fluent/scss/core/color-system/_theme.scss
index f4c203ba876..af58935bbd0 100644
--- a/packages/fluent/scss/core/color-system/_theme.scss
+++ b/packages/fluent/scss/core/color-system/_theme.scss
@@ -16,6 +16,21 @@ $kendo-component-bg: $kendo-body-bg !default;
 $kendo-component-text: $kendo-body-text !default;
 $kendo-component-border: get-theme-color-var( neutral-30 ) !default;
 
+// States styles
+$kendo-hover-bg: get-theme-color-var( neutral-20 ) !default;
+$kendo-hover-text: get-theme-color-var( neutral-190 ) !default;
+$kendo-hover-border: get-theme-color-var( neutral-20 ) !default;
+
+$kendo-selected-bg: get-theme-color-var( neutral-30 ) !default;
+$kendo-selected-text: get-theme-color-var( neutral-160 ) !default;
+$kendo-selected-border: get-theme-color-var( neutral-130 ) !default;
+
+$kendo-selected-hover-bg: get-theme-color-var( neutral-40 ) !default;
+$kendo-selected-hover-text: get-theme-color-var( neutral-190 ) !default;
+$kendo-selected-hover-border: get-theme-color-var( neutral-130 ) !default;
+
+$kendo-subtle-text: get-theme-color-var( neutral-130 ) !default;
+
 // Shadows
 
 /// Shadow for cards and grid item thumbnails.
@@ -32,8 +47,15 @@ $kendo-box-shadow-depth-3: 0px 1.2px 3.6px rgba( $black, 0.1 ), 0px 6.4px 14.4px
 $kendo-box-shadow-depth-4: 0px 4.8px 14.4px rgba( $black, 0.18 ), 0px 25.6px 57.6px rgba( $black, 0.22 ) !default;
 
 // Link
-$kendo-link-text: get-theme-color-var(primary-130) !default;
-$kendo-link-hover-text: get-theme-color-var(primary-160) !default;
+$kendo-link-text: get-theme-color-var( primary-130 ) !default;
+$kendo-link-hover-text: get-theme-color-var( primary-160 ) !default;
+
+// Validator
+$kendo-invalid-bg: null !default;
+$kendo-invalid-text: get-theme-color-var( error-190 ) !default;
+$kendo-invalid-border: get-theme-color-var( error-190 ) !default;
+$kendo-invalid-shadow: null !default;
+
 
 // Disabled Styling
 $kendo-disabled-bg: get-theme-color-var( neutral-20 ) !default;
@@ -61,4 +83,18 @@ $kendo-disabled-border: transparent !default;
     --kendo-disabled-bg: #{$kendo-disabled-bg};
     --kendo-disabled-text: #{$kendo-disabled-text};
     --kendo-disabled-border: #{$kendo-disabled-border};
+
+    --kendo-hover-bg: #{$kendo-hover-bg};
+    --kendo-hover-text: #{$kendo-hover-text};
+    --kendo-hover-border: #{$kendo-hover-border};
+
+    --kendo-selected-bg: #{$kendo-selected-bg};
+    --kendo-selected-text: #{$kendo-selected-text};
+    --kendo-selected-border: #{$kendo-selected-border};
+
+    --kendo-selected-hover-bg: #{$kendo-selected-hover-bg};
+    --kendo-selected-hover-text: #{$kendo-selected-hover-text};
+    --kendo-selected-hover-border: #{$kendo-selected-hover-border};
+
+    --kendo-subtle-text: #{$kendo-subtle-text};
 }
diff --git a/packages/fluent/scss/core/mixins/_hide-scrollbar.scss b/packages/fluent/scss/core/mixins/_hide-scrollbar.scss
new file mode 100644
index 00000000000..1c6d6937b97
--- /dev/null
+++ b/packages/fluent/scss/core/mixins/_hide-scrollbar.scss
@@ -0,0 +1,13 @@
+// Infinite calendar and timepicker
+@mixin hide-scrollbar($max-scrollbar: 100px) {
+    // anything larger than the scrollbar width will do
+    $scrollbar-size: 17px;
+    $margin: -$max-scrollbar - $scrollbar-size;
+
+    padding-right: $max-scrollbar;
+    padding-left: $max-scrollbar;
+
+    margin-inline-start: -$max-scrollbar;
+    margin-inline-end: $margin;
+
+}
diff --git a/packages/fluent/scss/core/mixins/_index.scss b/packages/fluent/scss/core/mixins/_index.scss
index 9ebd6a353c3..87bf3acafab 100644
--- a/packages/fluent/scss/core/mixins/_index.scss
+++ b/packages/fluent/scss/core/mixins/_index.scss
@@ -3,3 +3,4 @@
 @forward "box-shadow";
 @forward "border-radius";
 @forward "typography";
+@forward "hide-scrollbar";
diff --git a/packages/fluent/scss/index.scss b/packages/fluent/scss/index.scss
index e952b03c920..ab3a77ae5d1 100644
--- a/packages/fluent/scss/index.scss
+++ b/packages/fluent/scss/index.scss
@@ -8,6 +8,7 @@
 @use "typography";
 @use "icon";
 @use "button";
+@use "calendar";
 
 // Setup
 @mixin config($config: null ) {
@@ -17,4 +18,5 @@
     @include typography.styles();
     @include icon.styles();
     @include button.styles();
+    @include calendar.styles();
 }