@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/captcha/_variables.scss

@@ -4,32 +4,32 @@
 
 /// The spacer of the Captcha.
 /// @group captcha
-$kendo-captcha-spacer: k-spacing(2) !default;
+$kendo-captcha-spacer: var( --kendo-captcha-spacer, k-spacing(2) ) !default;
 
 /// The width of the Captcha.
 /// @group captcha
-$kendo-captcha-width: 280px !default;
+$kendo-captcha-width: var( --kendo-captcha-width, 280px ) !default;
 /// The font family of the Captcha.
 /// @group captcha
-$kendo-captcha-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-captcha-font-family: var( --kendo-captcha-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the Captcha.
 /// @group captcha
-$kendo-captcha-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-captcha-font-size: var( --kendo-captcha-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the Captcha.
 /// @group captcha
-$kendo-captcha-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-captcha-line-height: var( --kendo-captcha-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The spacing of the Captcha.
 /// @group captcha
 $kendo-captcha-spacing: $kendo-captcha-spacer !default;
 /// The background color of the Captcha.
 /// @group captcha
-$kendo-captcha-bg: k-color(surface-alt) !default;
+$kendo-captcha-bg: var( --kendo-captcha-bg, k-color(surface-alt) ) !default;
 /// The text color of the Captcha.
 /// @group captcha
-$kendo-captcha-text: k-color(on-app-surface) !default;
+$kendo-captcha-text: var( --kendo-captcha-text, k-color(on-app-surface) ) !default;
 /// The border color of the Captcha.
 /// @group captcha
-$kendo-captcha-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-captcha-border: var( --kendo-captcha-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The spacing of the Captcha image wrapper.
 /// @group captcha
@@ -43,4 +43,20 @@ $kendo-captcha-image-controls-spacing: calc( #{$kendo-captcha-spacer} / 2 ) !def
 $kendo-captcha-validation-offset-y: calc( #{$kendo-captcha-spacer} / 2 ) !default;
 /// The font size of the Captcha validation message.
 /// @group captcha
-$kendo-captcha-validation-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-captcha-validation-font-size: var( --kendo-captcha-validation-font-size, var( --kendo-font-size-sm, inherit ) ) !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-spacing,
+    $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-spacing,
+    $kendo-captcha-image-controls-gap: $kendo-captcha-image-controls-spacing,
+    $kendo-captcha-validation-message-margin-top: $kendo-captcha-validation-offset-y,
+    $kendo-captcha-validation-message-font-size: $kendo-captcha-validation-font-size,
+);

package/scss/card/_layout.scss

@@ -1,332 +1,27 @@
 @use "../core/_index.scss" as *;
 @use "../typography/variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/card/_layout.scss" as *;
 
 @mixin kendo-card--layout() {
-
-    // Angular elements
-    kendo-card,
-    kendo-card-header,
-    kendo-card-body,
-    kendo-card-actions,
-    kendo-card-footer {
-        display: block;
-    }
-
-
-    // Card
-    .k-card {
-        @include border-radius( var( --kendo-card-border-radius, #{$kendo-card-border-radius} ) );
-        border-width: var( --kendo-card-border-width, #{$kendo-card-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-card-font-family, #{$kendo-card-font-family} );
-        font-size: var( --kendo-card-font-size, #{$kendo-card-font-size} );
-        line-height: var( --kendo-card-line-height, #{$kendo-card-line-height} );
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        // Card avatar
-        .k-card-avatar,
-        .k-avatar {
-            margin-inline-end: var( --kendo-card-avatar-spacing, #{$kendo-card-avatar-spacing} );
-            width: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
-            height: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
-            flex-basis: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
-        }
-    }
-    .k-card > .k-card-inner {
-        @include border-radius( var( --kendo-card-inner-border-radius, #{$kendo-card-inner-border-radius} ) );
-        display: flex;
-        flex-direction: inherit;
-        overflow: hidden;
-        position: relative;
-    }
-
-    // Card orientation
-    .k-card-horizontal { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-vertical { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
-
-    // Card title
-    .k-card-title {
-        font-size: var( --kendo-card-title-font-size, #{$kendo-card-title-font-size} );
-        font-family: var( --kendo-card-title-font-family, #{$kendo-card-title-font-family} );
-        line-height: var( --kendo-card-title-line-height, #{$kendo-card-title-line-height} );
-        font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
-        margin: 0 0 var( --kendo-card-title-margin-bottom, #{$kendo-card-title-margin-bottom} );
-    }
-
-
-    // Card subtitle
-    .k-card-subtitle {
-        font-size: var( --kendo-card-subtitle-font-size, #{$kendo-card-subtitle-font-size} );
-        font-family: var( --kendo-card-subtitle-font-family, #{$kendo-card-subtitle-font-family} );
-        line-height: var( --kendo-card-subtitle-line-height, #{$kendo-card-subtitle-line-height} );
-        font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
-        margin-block-end: var( --kendo-card-subtitle-margin-bottom, #{$kendo-card-subtitle-margin-bottom} );
-    }
+    @include kendo-card--layout-base();
 
     @at-root .k-card-title + .k-card-subtitle {
-        margin-block-start: calc( var( --kendo-card-title-margin-bottom, #{$kendo-card-title-margin-bottom} ) * -1 );
+        margin-block-start: calc( #{$kendo-card-title-margin-bottom} * -1 );
     }
 
     // Header
     .k-card-header {
-        font-size: var( --kendo-card-header-font-size, #{$kendo-card-header-font-size} );
-        font-family: var( --kendo-card-header-font-family, #{$kendo-card-header-font-family} );
-        line-height: var( --kendo-card-header-line-height, #{$kendo-card-header-line-height} );
-        font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
+        font-size: $kendo-card-header-font-size;
+        font-family: $kendo-card-header-font-family;
+        line-height: $kendo-card-header-line-height;
+        font-weight: $kendo-card-title-font-weight;
         margin: 0;
-        padding-inline: var( --kendo-card-header-padding-x, #{$kendo-card-header-padding-x} );
-        padding-block: var( --kendo-card-header-padding-y, #{$kendo-card-header-padding-y} );
-        border-width: 0 0 var( --kendo-card-header-border-width, #{$kendo-card-header-border-width} );
-        border-style: solid;
-        outline: 0;
-        flex-shrink: 0;
-        overflow: hidden;
-        position: relative;
-        z-index: 1;
 
-        .k-card-title,
-        .k-card-subtitle {
+        .k-card-title + .k-card-subtitle,
+        .k-card-subtitle + .k-card-subtitle {
             margin: 0;
         }
     }
 
-
-    // Footer
-    .k-card-footer {
-        padding-inline: var( --kendo-card-footer-padding-x, #{$kendo-card-footer-padding-x} );
-        padding-block: var( --kendo-card-footer-padding-y, #{$kendo-card-footer-padding-y} );
-        border-width: var( --kendo-card-footer-border-width, #{$kendo-card-footer-border-width} ) 0 0;
-        border-style: solid;
-        outline: 0;
-        flex-shrink: 0;
-    }
-
-
-    // Body
-    .k-card-body {
-        padding-inline: var( --kendo-card-body-padding-x, #{$kendo-card-body-padding-x} );
-        padding-block: var( --kendo-card-body-padding-y, #{$kendo-card-body-padding-y} );
-        outline: 0;
-        flex: 1 1 auto;
-
-        p {
-            margin: var( --kendo-paragraph-margin, #{$kendo-paragraph-margin} );
-        }
-
-        > .k-last,
-        > :last-child {
-            margin-block-end: 0;
-        }
-
-        > .k-card-actions {
-            padding: 0;
-        }
-    }
-
-    // Card media
-    .k-card-media {
-        border: 0;
-        max-width: 100%;
-        flex-shrink: 0;
-        overflow: hidden;
-    }
-
-    .k-card-horizontal .k-card-media {
-        max-width: var( --kendo-card-img-max-width, #{$kendo-card-img-max-width} );
-        object-fit: cover;
-    }
-
-    // Separator
-    .k-card-separator {
-        margin: 0;
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        display: block;
-        flex: 0 0 auto;
-        align-self: stretch;
-    }
-
-    .k-card-separator.k-separator-horizontal,
-    .k-card-vertical > .k-card-separator {
-        border-top-width: 1px;
-    }
-
-    .k-card-separator.k-separator-vertical,
-    .k-card-horizontal > .k-card-separator {
-        border-left-width: 1px;
-    }
-
-    .k-card > .k-hr {
-        margin: 0;
-        flex: 0 0 auto;
-    }
-
-    // Card actions
-    .k-card-actions {
-        padding-inline: var( --kendo-card-actions-padding-x, #{$kendo-card-actions-padding-x} );
-        padding-block: var( --kendo-card-actions-padding-y, #{$kendo-card-actions-padding-y} );
-        border-width: var( --kendo-card-actions-border-width, #{$kendo-card-actions-border-width} );
-        border-style: solid;
-        border-color: inherit;
-        overflow: hidden;
-        display: flex;
-        flex-shrink: 0;
-        flex-basis: auto;
-        gap: var( --kendo-card-actions-gap, #{$kendo-card-actions-gap} );
-    }
-
-    .k-card-horizontal .k-actions-horizontal {
-        width: auto;
-    }
-
-    // List
-    .k-card-list {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-        gap: $kendo-card-deck-gap;
-        flex: 0 0 auto;
-
-        .k-card {
-            flex: 0 0 auto;
-        }
-    }
-
-
-    // Deck
-    .k-card-deck {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: stretch;
-        gap: $kendo-card-deck-gap;
-        flex: 0 0 auto;
-
-        .k-card {
-            flex: 0 0 auto;
-        }
-    }
-
-    .k-card-deck-scrollwrap {
-        padding-block-end: 3px; // prevents trimming of card shadows on OSX (0-width scrollbar)
-        width: 100%;
-        box-sizing: content-box;
-        display: flex;
-        flex: 0 0 auto;
-        align-items: center;
-        position: relative;
-        overflow: hidden;
-
-        > .k-button {
-            @include border-radius( var( --kendo-card-deck-scroll-button-radius, #{$kendo-card-deck-scroll-button-radius} ) );
-            flex: 0 0 auto;
-            position: absolute;
-            z-index: 1;
-
-            &:first-child {
-                left: var( --kendo-card-deck-scroll-button-offset, #{$kendo-card-deck-scroll-button-offset} );
-            }
-
-            &:last-child {
-                right: var( --kendo-card-deck-scroll-button-offset, #{$kendo-card-deck-scroll-button-offset} );
-            }
-        }
-
-        > .k-card-deck {
-            // hide scrollbar
-            margin-block-end: -#{$kendo-scrollbar-width};
-            padding-block-end: $kendo-scrollbar-width;
-            flex: 1 1 auto;
-        }
-    }
-
-
-    // Group
-    .k-card-group {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: stretch;
-        flex: 0 0 auto;
-
-        .k-card {
-            @include border-radius( 0 );
-            flex: 0 0 auto;
-        }
-        .k-card + .k-card {
-            margin-inline-start: var( --kendo-card-border-width, #{$kendo-card-border-width} );
-        }
-
-
-        // Border-radius
-        .k-card.k-first {
-            @include border-left-radius( var( --kendo-card-border-radius, #{$kendo-card-border-radius}) );
-        }
-        .k-card.k-last {
-            @include border-right-radius( var( --kendo-card-border-radius, #{$kendo-card-border-radius}) );
-        }
-        .k-card.k-only {
-            @include border-radius( var( --kendo-card-border-radius, #{$kendo-card-border-radius}) );
-        }
-    }
-
-    .k-card-with-callout {
-        overflow: visible;
-    }
-
-    .k-card-callout {
-        margin: 0;
-        width: var( --kendo-card-callout-size, #{$kendo-card-callout-size} );
-        height: var( --kendo-card-callout-size, #{$kendo-card-callout-size} );
-        border-width: var( --kendo-card-border-width, #{$kendo-card-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        position: absolute;
-    }
-
-    .k-card-callout.k-callout-n {
-        top: 0;
-        left: 50%;
-        transform: translate(-50%, -50%) rotate(45deg);
-    }
-    .k-card-callout.k-callout-e {
-        top: 50%;
-        right: 0;
-        transform: translate(50%, -50%) rotate(-45deg);
-    }
-    .k-card-callout.k-callout-s {
-        bottom: 0;
-        left: 50%;
-        transform: translate(-50%, 50%) rotate(45deg);
-    }
-    .k-card-callout.k-callout-w {
-        top: 50%;
-        left: 0;
-        transform: translate(-50%, -50%) rotate(45deg);
-    }
-
-     // Solid card
-     .k-card-solid {
-        @include box-shadow( var( --kendo-card-shadow, #{$kendo-card-shadow} ) );
-    }
-
-
-    // Flat card
-    .k-card-flat {
-        @include box-shadow( none );
-    }
-
 }

package/scss/card/_theme.scss

@@ -1,116 +1,16 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/card/_theme.scss" as *;
 
 @mixin kendo-card--theme() {
+    @include kendo-card--theme-base();
 
     // Card
     .k-card {
-        color: var( --kendo-card-text, #{$kendo-card-text} );
-        background-color: var( --kendo-card-bg, #{$kendo-card-bg} );
-        border-color: var( --kendo-card-border, #{$kendo-card-border} );
-
-        @include box-shadow( var( --kendo-card-shadow, #{$kendo-card-shadow} ) );
-
-        .k-card-inner {
-            background-color: inherit;
-            border-color: inherit;
-        }
-
-        &:focus,
-        &.k-focus {
-            color: var( --kendo-card-focus-text, #{$kendo-card-focus-text} );
-            background-color: var( --kendo-card-focus-bg, #{$kendo-card-focus-bg} );
-            border-color: var( --kendo-card-focus-border, #{$kendo-card-focus-border} );
-            box-shadow: var( --kendo-card-focus-shadow, #{$kendo-card-focus-shadow} );
-        }
-
-        &.k-selected {
-            box-shadow: var( --kendo-card-focus-shadow, #{$kendo-card-focus-shadow} );
-        }
 
         .k-hr {
-            border-color: var( --kendo-card-border, #{$kendo-card-border} );
+            border-color: $kendo-card-border;
         }
     }
-
-
-    // Card actions
-    .k-card-actions {
-        border-color: var( --kendo-card-border, #{$kendo-card-border} );
-    }
-
-
-    // Header
-    .k-card-header {
-        @include fill(
-            var( --kendo-card-header-text, #{$kendo-card-header-text} ),
-            var( --kendo-card-header-bg, #{$kendo-card-header-bg} ),
-            var( --kendo-card-header-border, #{$kendo-card-header-border} )
-        );
-    }
-
-
-    // Footer
-    .k-card-footer {
-        @include fill(
-            var( --kendo-card-footer-text, #{$kendo-card-footer-text} ),
-            var( --kendo-card-footer-bg, #{$kendo-card-footer-bg} ),
-            var( --kendo-card-footer-border, #{$kendo-card-footer-border} )
-        );
-    }
-
-
-    // Separator
-    .k-card-separator,
-    .k-card .k-separator {
-        border-color: var( --kendo-card-border, #{$kendo-card-border} );
-    }
-
-
-    // TODO: refactor
-    .k-card-subtitle {
-        color: var( --kendo-card-subtitle-text, #{$kendo-card-subtitle-text} );
-    }
-
-
-    // Card theme colors
-    @each $theme-color, $color-props in $kendo-card-theme-colors {
-
-        $_text-color: map.get( $color-props, text );
-        $_bg: map.get( $color-props, bg );
-        $_border-color: map.get( $color-props, border );
-
-        .k-card-#{$theme-color} {
-            --kendo-card-text: var( --kendo-card-#{$theme-color}-text, #{$_text-color} );
-            --kendo-card-bg: var( --kendo-card-#{$theme-color}-bg, #{$_bg} );
-            --kendo-card-border: var( --kendo-card-#{$theme-color}-border, #{$_border-color} );
-
-            .k-card-subtitle {
-                color: inherit;
-            }
-        }
-    }
-
-
-    .k-card-wrap {
-        &.k-focus,
-        &:focus,
-        &.k-selected {
-            > .k-card {
-                @include box-shadow( var( --kendo-card-shadow, #{$kendo-card-shadow} ) );
-            }
-        }
-    }
-
-
-    // Card callout
-    .k-card-callout {
-        @include fill(
-            $bg: inherit,
-            $border: inherit
-        );
-
-        @include box-shadow( inherit );
-    }
 }