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

package/scss/calendar/_variables.scss

@@ -0,0 +1,444 @@
+@use "../core/_index.scss" as *;
+
+// Calendar
+
+/// The default size of the Calendar.
+/// @group calendar
+/// @role default
+$kendo-calendar-default-size: "md" !default;
+
+/// The width of the border around the Calendar.
+/// @group calendar
+$kendo-calendar-border-width: 1px !default;
+
+/// The font family of the Calendar.
+/// @group calendar
+$kendo-calendar-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Calendar.
+/// @group calendar
+$kendo-calendar-font-size: null !default;
+/// The line height of the Calendar.
+/// @group calendar
+$kendo-calendar-line-height: null !default;
+/// The border-radius of the Calendar.
+/// @group calendar
+$kendo-calendar-border-radius: k-border-radius(xxl) !default;
+
+/// The size of the cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-size: 36px !default;
+
+/// The background color of the Calendar.
+/// @group calendar
+$kendo-calendar-bg: k-color(surface-alt) !default;
+/// The text color of the Calendar.
+/// @group calendar
+$kendo-calendar-text: k-color(on-app-surface) !default;
+/// The border color of the Calendar.
+/// @group calendar
+$kendo-calendar-border: k-color(border) !default;
+
+/// The horizontal padding of the header in the Calendar.
+/// @group calendar
+$kendo-calendar-header-padding-x: k-spacing(2.5) !default;
+/// The vertical padding of the header in the Calendar.
+/// @group calendar
+$kendo-calendar-header-padding-y: k-spacing(2.5) !default;
+
+/// The border width of the header in the Calendar.
+/// @group calendar
+$kendo-calendar-header-border-width: 1px !default;
+
+/// The background color of the header in the Calendar.
+/// @group calendar
+$kendo-calendar-header-bg: k-translucency-bg(k-color(surface-alt)) !default;
+/// The border color of the header in the Calendar.
+/// @group calendar
+$kendo-calendar-header-border: k-color(border) !default;
+/// The gradient of the header in the Calendar.
+/// @group calendar
+$kendo-calendar-header-gradient: null !default;
+// TODO: variable is used, but the selector using it is not! Potentially remove;
+/// The shadow of the header in the Calendar.
+/// @group calendar
+$kendo-calendar-header-shadow: k-elevation(1) !default;
+
+/// The gap between the items in the navigation of the Calendar.
+/// @group calendar
+$kendo-calendar-nav-gap: null !default;
+
+/// The horizontal padding of the footer in the Calendar.
+/// @group calendar
+$kendo-calendar-footer-padding-x: k-spacing(4) !default;
+/// The vertical padding of the footer in the Calendar.
+/// @group calendar
+$kendo-calendar-footer-padding-y: k-spacing(2) !default;
+
+/// The horizontal padding of the cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-padding-x: .25em !default;
+/// The vertical padding of the cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-x !default;
+
+/// The border radius of the cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-border-radius: k-border-radius(md) !default;
+
+/// The horizontal padding of the header cells in the Calendar.
+/// @group calendar
+$kendo-calendar-header-cell-padding-x: null !default;
+/// The vertical padding of the header cells in the Calendar.
+/// @group calendar
+$kendo-calendar-header-cell-padding-y: null !default;
+/// The width of the header cells in the Calendar.
+/// @group calendar
+$kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
+/// The height of the header cells in the Calendar.
+/// @group calendar
+$kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
+/// The font size of the header cells in the Calendar.
+/// @group calendar
+$kendo-calendar-header-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line height of the header cells in the Calendar.
+/// @group calendar
+$kendo-calendar-header-cell-line-height: var( --kendo-line-height-sm, normal ) !default;
+
+/// The text color of the header cells in the Calendar.
+/// @group calendar
+$kendo-calendar-header-cell-text: k-color(subtle) !default;
+/// The opacity of the header cells in the Calendar.
+/// @group calendar
+$kendo-calendar-header-cell-opacity: null !default;
+
+/// The horizontal padding of the caption in the Calendar.
+/// @group calendar
+$kendo-calendar-caption-padding-x: k-spacing(1) !default;
+/// The vertical padding of the caption in the Calendar.
+/// @group calendar
+$kendo-calendar-caption-padding-y: k-spacing(1) !default;
+/// The height of the caption in the Calendar.
+/// @group calendar
+$kendo-calendar-caption-height: 32px !default;
+/// The font size of the caption in the Calendar.
+/// @group calendar
+$kendo-calendar-caption-font-size: null !default;
+/// The line height of the caption in the Calendar.
+/// @group calendar
+$kendo-calendar-caption-line-height: null !default;
+/// The font weight of the caption in the Calendar.
+/// @group calendar
+$kendo-calendar-caption-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+
+/// The font size of the week number cells in the Calendar.
+/// @group calendar
+$kendo-calendar-week-number-font-size: $kendo-font-size-sm !default;
+
+/// The width of the Calendar view.
+/// @group calendar
+$kendo-calendar-view-width: ($kendo-calendar-cell-size * 8) !default;
+/// The height of the Calendar view.
+/// @group calendar
+$kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
+
+/// The gap between the items in the Calendar view.
+/// @group calendar
+$kendo-calendar-view-gap: k-spacing(4) !default;
+
+/// The background color of the weekend cells in the Calendar.
+/// @group calendar
+$kendo-calendar-weekend-bg: null !default;
+/// The text color of the weekend cells in the Calendar.
+/// @group calendar
+$kendo-calendar-weekend-text: null !default;
+
+/// The style of the current day in the Calendar.
+/// @group calendar
+$kendo-calendar-today-style: color !default;
+/// The color of the current day in the Calendar.
+/// @group calendar
+$kendo-calendar-today-color: k-color(primary) !default;
+/// The font weight of the current day in the Calendar.
+/// @group calendar
+$kendo-calendar-today-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+/// The box shadow of the current day in the Calendar.
+/// @group calendar
+$kendo-calendar-today-box-shadow: null !default;
+
+/// The background color of the week number cells in the Calendar.
+/// @group calendar
+$kendo-calendar-week-number-bg: null !default;
+/// The text color of the week number cells in the Calendar.
+/// @group calendar
+$kendo-calendar-week-number-text: $kendo-calendar-header-cell-text !default;
+
+/// The background color of the preceding/subsequent month cells in the Calendar.
+/// @group calendar
+$kendo-calendar-other-month-bg: null !default;
+/// The text color of the preceding/subsequent month cells in the Calendar.
+/// @group calendar
+$kendo-calendar-other-month-text: $kendo-calendar-header-cell-text !default;
+
+/// The border color of the cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-border: null !default;
+
+/// The background color of the hovered cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-hover-bg: color-mix(in srgb, k-color(secondary-subtle-hover) 60%, transparent) !default;
+/// The text color of the hovered cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-hover-text: k-color(secondary-on-subtle) !default;
+/// The border color of the hovered cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-hover-border: null !default;
+/// The gradient of the hovered cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-hover-gradient: null !default;
+
+/// The background color of the selected cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-selected-bg: k-color(secondary) !default;
+/// The text color of the selected cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-selected-text: k-color(on-secondary) !default;
+/// The border color of the selected cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-selected-border: null !default;
+/// The gradient of the selected cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-selected-gradient: null !default;
+
+/// The background color of the selected and hovered cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-selected-hover-bg: k-color(secondary-hover) !default;
+/// The text color of the selected and hovered cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-selected-hover-text: k-color(on-secondary) !default;
+/// The border color of the selected and hovered cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-selected-hover-border: null !default;
+/// The gradient of the selected and hovered cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-selected-hover-gradient: null !default;
+
+/// The shadow of the focused cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-focus-shadow: null !default;
+/// The shadow of the selected and focused cells in the Calendar.
+/// @group calendar
+$kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-focus-shadow !default;
+
+/// The outline width of the focused Calendar.
+/// @group calendar
+$kendo-calendar-cell-focus-outline-width: 1px !default;
+/// The outline offset of the focused Calendar.
+/// @group calendar
+$kendo-calendar-cell-focus-outline-offset: 1px !default;
+
+/// The width of the Calendar navigation.
+/// @group calendar
+$kendo-calendar-navigation-width: 4.375em !default;
+/// The height of the items in the Calendar navigation.
+/// @group calendar
+$kendo-calendar-navigation-item-height: 2em !default;
+
+/// The background color of the Calendar navigation.
+/// @group calendar
+$kendo-calendar-navigation-bg: k-color(surface) !default;
+/// The text color of the Calendar navigation.
+/// @group calendar
+$kendo-calendar-navigation-text: k-color(on-app-surface) !default;
+/// The border color of the Calendar navigation.
+/// @group calendar
+$kendo-calendar-navigation-border: $kendo-calendar-header-border !default;
+
+/// The text color of the hovered items in the Calendar navigation.
+/// @group calendar
+$kendo-calendar-navigation-hover-text: k-color(secondary-hover) !default;
+/// The text color of the marker in the Calendar navigation.
+/// @group calendar
+$kendo-calendar-navigation-marker-text: currentColor !default;
+
+/// The background color of the Calendar range selection.
+/// @group calendar
+$kendo-calendar-range-bg: color-mix(in srgb, k-color(secondary-subtle-active) 60%, transparent) !default;
+/// The background color of the Calendar range start selection.
+/// @group calendar
+$kendo-calendar-range-start-bg: linear-gradient(to right, k-color(surface) 0%, $kendo-calendar-range-bg 100%) !default;
+/// The background color of the Calendar range end selection.
+/// @group calendar
+$kendo-calendar-range-end-bg: linear-gradient(to left, k-color(surface) 0%, $kendo-calendar-range-bg 100%) !default;
+
+/// The horizontal padding of the header in the Infinite Calendar.
+/// @group calendar
+$kendo-infinite-calendar-header-padding-x: k-spacing(4) !default;
+/// The vertical padding of the header in the Infinite Calendar.
+/// @group calendar
+$kendo-infinite-calendar-header-padding-y: k-spacing(2) !default;
+
+/// The horizontal padding of the Calendar view in the Infinite Calendar.
+/// @group calendar
+$kendo-infinite-calendar-view-padding-x: k-spacing(4) !default;
+/// The vertical padding of the Calendar view in the Infinite Calendar.
+/// @group calendar
+$kendo-infinite-calendar-view-padding-y: k-spacing(0) !default;
+
+/// The height of the Calendar view in the Infinite Calendar.
+/// @group calendar
+$kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default;
+
+
+// Multiview calendar
+
+/// The border radius of the range cells in the Multiview Calendar.
+/// @group calendar
+$kendo-calendar-range-cell-border-radius: k-border-radius(lg) !default;
+
+// Calendar sizes
+
+/// The font size of the small Calendar.
+/// @group calendar
+$kendo-calendar-sm-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the small Calendar.
+/// @group calendar
+$kendo-calendar-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The size of the cells in the small Calendar.
+/// @group calendar
+$kendo-calendar-sm-cell-size: 32px !default;
+/// The horizontal padding of the cells in the small Calendar.
+/// @group calendar
+$kendo-calendar-sm-cell-padding-x: k-spacing(0.5) !default;
+/// The vertical padding of the cells in the small Calendar.
+/// @group calendar
+$kendo-calendar-sm-cell-padding-y: k-spacing(0.5) !default;
+
+/// The font size of the medium Calendar.
+/// @group calendar
+$kendo-calendar-md-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the medium Calendar.
+/// @group calendar
+$kendo-calendar-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The size of the cells in the medium Calendar.
+/// @group calendar
+$kendo-calendar-md-cell-size: 36px !default;
+/// The horizontal padding of the cells in the medium Calendar.
+/// @group calendar
+$kendo-calendar-md-cell-padding-x: k-spacing(1) !default;
+/// The vertical padding of the cells in the medium Calendar.
+/// @group calendar
+$kendo-calendar-md-cell-padding-y: k-spacing(1) !default;
+
+/// The font size of the large Calendar.
+/// @group calendar
+$kendo-calendar-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The line height of the large Calendar.
+/// @group calendar
+$kendo-calendar-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+/// The size of the cells in the large Calendar.
+/// @group calendar
+$kendo-calendar-lg-cell-size: 44px !default;
+/// The horizontal padding of the cells in the large Calendar.
+/// @group calendar
+$kendo-calendar-lg-cell-padding-x: k-spacing(2) !default;
+/// The vertical padding of the cells in the large Calendar.
+/// @group calendar
+$kendo-calendar-lg-cell-padding-y: k-spacing(2) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/calendar/_variables.scss" with (
+    $kendo-calendar-default-size: $kendo-calendar-default-size,
+    $kendo-calendar-border-width: $kendo-calendar-border-width,
+    $kendo-calendar-font-family: $kendo-calendar-font-family,
+    $kendo-calendar-font-size: $kendo-calendar-font-size,
+    $kendo-calendar-line-height: $kendo-calendar-line-height,
+    $kendo-calendar-border-radius: $kendo-calendar-border-radius,
+    $kendo-calendar-cell-size: $kendo-calendar-cell-size,
+    $kendo-calendar-bg: $kendo-calendar-bg,
+    $kendo-calendar-text: $kendo-calendar-text,
+    $kendo-calendar-border: $kendo-calendar-border,
+    $kendo-calendar-header-padding-x: $kendo-calendar-header-padding-x,
+    $kendo-calendar-header-padding-y: $kendo-calendar-header-padding-y,
+    $kendo-calendar-header-border-width: $kendo-calendar-header-border-width,
+    $kendo-calendar-header-bg: $kendo-calendar-header-bg,
+    $kendo-calendar-header-border: $kendo-calendar-header-border,
+    $kendo-calendar-header-gradient: $kendo-calendar-header-gradient,
+    $kendo-calendar-header-shadow: $kendo-calendar-header-shadow,
+    $kendo-calendar-nav-gap: $kendo-calendar-nav-gap,
+    $kendo-calendar-footer-padding-x: $kendo-calendar-footer-padding-x,
+    $kendo-calendar-footer-padding-y: $kendo-calendar-footer-padding-y,
+    $kendo-calendar-cell-padding-x: $kendo-calendar-cell-padding-x,
+    $kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-y,
+    $kendo-calendar-cell-border-radius: $kendo-calendar-cell-border-radius,
+    $kendo-calendar-header-cell-padding-x: $kendo-calendar-header-cell-padding-x,
+    $kendo-calendar-header-cell-padding-y: $kendo-calendar-header-cell-padding-y,
+    $kendo-calendar-header-cell-width: $kendo-calendar-header-cell-width,
+    $kendo-calendar-header-cell-height: $kendo-calendar-header-cell-height,
+    $kendo-calendar-header-cell-font-size: $kendo-calendar-header-cell-font-size,
+    $kendo-calendar-header-cell-line-height: $kendo-calendar-header-cell-line-height,
+    $kendo-calendar-header-cell-text: $kendo-calendar-header-cell-text,
+    $kendo-calendar-header-cell-opacity: $kendo-calendar-header-cell-opacity,
+    $kendo-calendar-caption-padding-x: $kendo-calendar-caption-padding-x,
+    $kendo-calendar-caption-padding-y: $kendo-calendar-caption-padding-y,
+    $kendo-calendar-caption-height: $kendo-calendar-caption-height,
+    $kendo-calendar-caption-font-size: $kendo-calendar-caption-font-size,
+    $kendo-calendar-caption-line-height: $kendo-calendar-caption-line-height,
+    $kendo-calendar-caption-font-weight: $kendo-calendar-caption-font-weight,
+    $kendo-calendar-week-number-font-size: $kendo-calendar-week-number-font-size,
+    $kendo-calendar-view-width: $kendo-calendar-view-width,
+    $kendo-calendar-view-height: $kendo-calendar-view-height,
+    $kendo-calendar-view-gap: $kendo-calendar-view-gap,
+    $kendo-calendar-weekend-bg: $kendo-calendar-weekend-bg,
+    $kendo-calendar-weekend-text: $kendo-calendar-weekend-text,
+    $kendo-calendar-today-style: $kendo-calendar-today-style,
+    $kendo-calendar-today-color: $kendo-calendar-today-color,
+    $kendo-calendar-today-font-weight: $kendo-calendar-today-font-weight,
+    $kendo-calendar-today-box-shadow: $kendo-calendar-today-box-shadow,
+    $kendo-calendar-week-number-bg: $kendo-calendar-week-number-bg,
+    $kendo-calendar-week-number-text: $kendo-calendar-week-number-text,
+    $kendo-calendar-other-month-bg: $kendo-calendar-other-month-bg,
+    $kendo-calendar-other-month-text: $kendo-calendar-other-month-text,
+    $kendo-calendar-cell-border: $kendo-calendar-cell-border,
+    $kendo-calendar-cell-hover-bg: $kendo-calendar-cell-hover-bg,
+    $kendo-calendar-cell-hover-text: $kendo-calendar-cell-hover-text,
+    $kendo-calendar-cell-hover-border: $kendo-calendar-cell-hover-border,
+    $kendo-calendar-cell-hover-gradient: $kendo-calendar-cell-hover-gradient,
+    $kendo-calendar-cell-selected-bg: $kendo-calendar-cell-selected-bg,
+    $kendo-calendar-cell-selected-text: $kendo-calendar-cell-selected-text,
+    $kendo-calendar-cell-selected-border: $kendo-calendar-cell-selected-border,
+    $kendo-calendar-cell-selected-gradient: $kendo-calendar-cell-selected-gradient,
+    $kendo-calendar-cell-selected-hover-bg: $kendo-calendar-cell-selected-hover-bg,
+    $kendo-calendar-cell-selected-hover-text: $kendo-calendar-cell-selected-hover-text,
+    $kendo-calendar-cell-selected-hover-border: $kendo-calendar-cell-selected-hover-border,
+    $kendo-calendar-cell-selected-hover-gradient: $kendo-calendar-cell-selected-hover-gradient,
+    $kendo-calendar-cell-focus-shadow: $kendo-calendar-cell-focus-shadow,
+    $kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-selected-focus-shadow,
+    $kendo-calendar-navigation-width: $kendo-calendar-navigation-width,
+    $kendo-calendar-navigation-item-height: $kendo-calendar-navigation-item-height,
+    $kendo-calendar-navigation-bg: $kendo-calendar-navigation-bg,
+    $kendo-calendar-navigation-text: $kendo-calendar-navigation-text,
+    $kendo-calendar-navigation-border: $kendo-calendar-navigation-border,
+    $kendo-calendar-navigation-hover-text: $kendo-calendar-navigation-hover-text,
+    $kendo-calendar-navigation-marker-text: $kendo-calendar-navigation-marker-text,
+    $kendo-calendar-range-bg: $kendo-calendar-range-bg,
+    $kendo-infinite-calendar-header-padding-x: $kendo-infinite-calendar-header-padding-x,
+    $kendo-infinite-calendar-header-padding-y: $kendo-infinite-calendar-header-padding-y,
+    $kendo-infinite-calendar-view-padding-x: $kendo-infinite-calendar-view-padding-x,
+    $kendo-infinite-calendar-view-padding-y: $kendo-infinite-calendar-view-padding-y,
+    $kendo-infinite-calendar-view-height: $kendo-infinite-calendar-view-height,
+    $kendo-calendar-range-cell-border-radius: $kendo-calendar-range-cell-border-radius,
+    $kendo-calendar-sm-font-size: $kendo-calendar-sm-font-size,
+    $kendo-calendar-sm-line-height: $kendo-calendar-sm-line-height,
+    $kendo-calendar-sm-cell-size: $kendo-calendar-sm-cell-size,
+    $kendo-calendar-sm-cell-padding-x: $kendo-calendar-sm-cell-padding-x,
+    $kendo-calendar-sm-cell-padding-y: $kendo-calendar-sm-cell-padding-y,
+    $kendo-calendar-md-font-size: $kendo-calendar-md-font-size,
+    $kendo-calendar-md-line-height: $kendo-calendar-md-line-height,
+    $kendo-calendar-md-cell-size: $kendo-calendar-md-cell-size,
+    $kendo-calendar-md-cell-padding-x: $kendo-calendar-md-cell-padding-x,
+    $kendo-calendar-md-cell-padding-y: $kendo-calendar-md-cell-padding-y,
+    $kendo-calendar-lg-font-size: $kendo-calendar-lg-font-size,
+    $kendo-calendar-lg-line-height: $kendo-calendar-lg-line-height,
+    $kendo-calendar-lg-cell-size: $kendo-calendar-lg-cell-size,
+    $kendo-calendar-lg-cell-padding-x: $kendo-calendar-lg-cell-padding-x,
+    $kendo-calendar-lg-cell-padding-y: $kendo-calendar-lg-cell-padding-y
+);

package/scss/captcha/_index.scss

@@ -0,0 +1,29 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../slider/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-captcha--styles() {
+    @include import-once( "captcha" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-input--styles();
+        @include kendo-button--styles();
+        @include kendo-textbox--styles();
+        @include kendo-slider--styles();
+        @include kendo-captcha--layout();
+        @include kendo-captcha--theme();
+        @include kendo-utils--typography--text-color();
+        @include kendo-utils--layout--position();
+    }
+}

package/scss/captcha/_layout.scss

@@ -0,0 +1,12 @@
+@use "@progress/kendo-theme-core/scss/components/captcha/_layout.scss" as *;
+@use "../core/_index.scss" as *;
+
+
+
+@mixin kendo-captcha--layout() {
+    @include kendo-captcha--layout-base();
+
+    .k-captcha-validation-message {
+        line-height: var( --kendo-line-height-sm );
+    }
+}

package/scss/captcha/_theme.scss

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

package/scss/captcha/_variables.scss

@@ -0,0 +1,66 @@
+@use "../core/_index.scss" as *;
+
+// Captcha
+
+/// The spacer of the Captcha.
+/// @group captcha
+$kendo-captcha-spacer: k-spacing(2) !default;
+
+/// The width of the Captcha.
+/// @group captcha
+$kendo-captcha-width: 280px !default;
+/// The font family of the Captcha.
+/// @group captcha
+$kendo-captcha-font-family: var( --kendo-font-family ) !default;
+/// The font size of the Captcha.
+/// @group captcha
+$kendo-captcha-font-size: var( --kendo-font-size ) !default;
+/// The line height of the Captcha.
+/// @group captcha
+$kendo-captcha-line-height: var( --kendo-line-height ) !default;
+/// The gap of the Captcha.
+/// @group captcha
+$kendo-captcha-gap: $kendo-captcha-spacer !default;
+/// The background color of the Captcha.
+/// @group captcha
+$kendo-captcha-bg: k-color(surface-alt) !default;
+/// The text color of the Captcha.
+/// @group captcha
+$kendo-captcha-text: k-color(surface-alt) !default;
+/// The border color of the Captcha.
+/// @group captcha
+$kendo-captcha-border: k-color(surface-alt) !default;
+
+/// The gap of the Captcha image wrapper.
+/// @group captcha
+$kendo-captcha-image-wrap-gap: $kendo-captcha-spacer !default;
+/// The gap of the Captcha image controls.
+/// @group captcha
+$kendo-captcha-image-controls-gap: $kendo-captcha-spacer !default;
+
+/// The top margin of the Captcha validation message.
+/// @group captcha
+$kendo-captcha-validation-message-margin-top: 0 !default;
+/// The font size of the Captcha validation message.
+/// @group captcha
+$kendo-captcha-validation-message-font-size: var( --kendo-font-size-sm ) !default;
+/// The font style of the Captcha validation message.
+/// @group captcha
+$kendo-captcha-validation-message-font-style: italic !default;
+
+@forward "@progress/kendo-theme-core/scss/components/captcha/_variables.scss" with (
+    $kendo-captcha-spacer: $kendo-captcha-spacer,
+    $kendo-captcha-width: $kendo-captcha-width,
+    $kendo-captcha-font-family: $kendo-captcha-font-family,
+    $kendo-captcha-font-size: $kendo-captcha-font-size,
+    $kendo-captcha-line-height: $kendo-captcha-line-height,
+    $kendo-captcha-gap: $kendo-captcha-gap,
+    $kendo-captcha-bg: $kendo-captcha-bg,
+    $kendo-captcha-text: $kendo-captcha-text,
+    $kendo-captcha-border: $kendo-captcha-border,
+    $kendo-captcha-image-wrap-gap: $kendo-captcha-image-wrap-gap,
+    $kendo-captcha-image-controls-gap: $kendo-captcha-image-controls-gap,
+    $kendo-captcha-validation-message-margin-top: $kendo-captcha-validation-message-margin-top,
+    $kendo-captcha-validation-message-font-size: $kendo-captcha-validation-message-font-size,
+    $kendo-captcha-validation-message-font-style: $kendo-captcha-validation-message-font-style
+);

package/scss/card/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+@use "../typography/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-card--styles() {
+    @include import-once( "card" ) {
+        @include core-styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-icon--styles();
+        @include kendo-typography--styles();
+        @include kendo-card--layout();
+        @include kendo-card--theme();
+        @include kendo-utils--typography--text-overflow();
+        @include kendo-utils--typography--white-space();
+        @include kendo-utils--layout--display();
+    }
+}

package/scss/card/_layout.scss

@@ -0,0 +1,73 @@
+@use "@progress/kendo-theme-core/scss/components/card/_layout.scss" as *;
+@use "./variables.scss" as *;
+
+
+@mixin kendo-card--layout() {
+    @include kendo-card--layout-base();
+
+    .k-card-vertical {
+        .k-card-header {
+            &:has(~ .k-card-body) {
+                padding-block-end: calc( #{$kendo-card-header-padding-y} / 2);
+            }
+
+            ~ .k-card-body {
+                padding-block-start: calc( #{$kendo-card-body-padding-y} / 2);
+            }
+        }
+
+        .k-card-body {
+            &:has(~ .k-card-actions, ~ .k-card-footer) {
+                padding-block-end: calc( #{$kendo-card-header-padding-y} / 2);
+            }
+
+            ~ .k-card-actions,
+            ~ .k-card-footer {
+                padding-block-start: calc( #{$kendo-card-actions-padding-y} / 2);
+            }
+        }
+    }
+
+    .k-card-horizontal {
+        .k-card-header {
+            &:has(~ .k-card-body) {
+                padding-inline-end: calc( #{$kendo-card-header-padding-x} / 2);
+            }
+
+            ~ .k-card-body {
+                padding-inline-end: calc( #{$kendo-card-body-padding-x} / 2);
+            }
+        }
+
+        .k-card-body {
+            &:has(~ .k-card-actions, ~ .k-card-footer) {
+                padding-inline-end: calc( #{$kendo-card-header-padding-x} / 2);
+            }
+
+            ~ .k-card-actions,
+            ~ .k-card-footer {
+                padding-inline-start: calc( #{$kendo-card-actions-padding-x} / 2);
+            }
+        }
+    }
+
+    .k-card-callout {
+        backdrop-filter: blur(calc(6px + calc(2 * 2px)));
+
+        &.k-callout-n {
+            clip-path: polygon(0 0, 100% 0, 0 100%);
+        }
+
+        &.k-callout-e {
+            clip-path: polygon(100% 0, 100% 100%, 0 100%);
+        }
+
+        &.k-callout-s {
+            clip-path: polygon(100% 0, 100% 100%, 0 100%);
+        }
+
+        &.k-callout-w {
+            clip-path: polygon(0 0, 0 100%, 100% 100%);
+        }
+    }
+}

package/scss/card/_theme.scss

@@ -0,0 +1,11 @@
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/card/_theme.scss" as *;
+
+
+@mixin kendo-card--theme() {
+    @include kendo-card--theme-base();
+
+    .k-card {
+        backdrop-filter: k-translucency-blur(2);
+    }
+}