@progress/kendo-theme-fluent 5.7.0

package/scss/calendar/_variables.scss

@@ -0,0 +1,267 @@
+@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: get-theme-color-var( neutral-10 ) !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;
+
+/// Bottom padding of calendar views.
+/// @group calendar
+$kendo-calendar-view-padding-block-end: map-get( $kendo-spacing, 3 ) !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-100 ) !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-120 ) !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;

package/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();
+    }
+}

package/scss/captcha/_layout.scss

@@ -0,0 +1,63 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-captcha--layout() {
+
+    // Captcha
+    .k-captcha {
+        width: var( --kendo-captcha-width, #{$kendo-captcha-width} );
+        box-sizing: border-box;
+        font-size: var( --kendo-captcha-font-size, #{$kendo-captcha-font-size} );
+        font-family: var( --kendo-captcha-font-family, #{$kendo-captcha-font-family} );
+        line-height: var( --kendo-captcha-line-height, #{$kendo-captcha-line-height} );
+        display: flex;
+        flex-flow: column nowrap;
+        gap: var( --kendo-captcha-spacing, #{$kendo-captcha-spacing} );
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    // Image
+    .k-captcha-image-wrap {
+        position: relative;
+        gap: var( --kendo-captcha-image-wrap-spacing, #{$kendo-captcha-image-wrap-spacing} );
+    }
+
+    .k-captcha-image-controls {
+        position: relative;
+        gap: var( --kendo-captcha-image-controls-spacing, #{$kendo-captcha-image-controls-spacing} );
+    }
+
+    .k-captcha-image {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .k-captcha-image > img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        object-fit: cover;
+    }
+
+    // Loading
+    .k-captcha-loading .k-captcha-image {
+        height: auto;
+    }
+
+    // Volume Control
+    .k-captcha-volume-control {
+        height: 100%;
+    }
+
+    // Verification Success
+    .k-captcha-validation-message {
+        margin-block-start: var( --kendo-captcha-validation-offset-y, #{$kendo-captcha-validation-offset-y} );
+        font-size: var( --kendo-captcha-validation-font-size, #{$kendo-captcha-validation-font-size} );
+    }
+
+}

package/scss/captcha/_theme.scss

@@ -0,0 +1,15 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-captcha--theme() {
+
+    // Captcha
+    .k-captcha {
+        @include fill(
+            var( --kendo-captcha-text, #{$kendo-captcha-text} ),
+            var( --kendo-captcha-bg, #{$kendo-captcha-bg} ),
+            var( --kendo-captcha-border, #{$kendo-captcha-border} )
+        );
+    }
+
+}

package/scss/captcha/_variables.scss

@@ -0,0 +1,45 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Spacer of the captcha.
+/// @group captcha
+$kendo-captcha-spacer: map-get( $kendo-spacing, 2 ) !default;
+
+/// Default width of the captcha.
+/// @group captcha
+$kendo-captcha-width: 280px !default;
+/// Font family of the captcha.
+/// @group captcha
+$kendo-captcha-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the captcha.
+/// @group captcha
+$kendo-captcha-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the captcha.
+/// @group captcha
+$kendo-captcha-line-height: var( --kendo-line-height, normal ) !default;
+/// Spacing of the captcha.
+/// @group captcha
+$kendo-captcha-spacing: $kendo-captcha-spacer !default;
+/// Background color of the captcha.
+/// @group captcha
+$kendo-captcha-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the captcha.
+/// @group captcha
+$kendo-captcha-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the captcha.
+/// @group captcha
+$kendo-captcha-border: var( --kendo-component-border, initial ) !default;
+
+/// Spacing of the captcha image wrapper.
+/// @group captcha
+$kendo-captcha-image-wrap-spacing: $kendo-captcha-spacer !default;
+/// Spacing of the captcha image controls.
+/// @group captcha
+$kendo-captcha-image-controls-spacing: calc( $kendo-captcha-spacer / 2 ) !default;
+
+/// Offset of the captcha validation text.
+/// @group captcha
+$kendo-captcha-validation-offset-y: calc( $kendo-captcha-spacer / 2 ) !default;
+/// Font-size of the captcha validation text.
+/// @group captcha
+$kendo-captcha-validation-font-size: var( --kendo-font-size-sm, inherit ) !default;

package/scss/captcha/index.scss

@@ -0,0 +1,29 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "captcha",
+    dependencies: (
+        "icon",
+        "button",
+        "input",
+        "textbox",
+        "slider"
+    )
+);
+
+
+// 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( "captcha" ) {
+        @include kendo-captcha--layout();
+        @include kendo-captcha--theme();
+    }
+}