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

package/scss/prompt/_variables.scss

@@ -3,65 +3,88 @@
 
 /// The text color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-text: k-color(on-app-surface) !default;
+$kendo-prompt-text: var( --kendo-prompt-text, #{k-color(on-app-surface)} ) !default;
 /// The background color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-bg: k-color(surface-alt) !default;
+$kendo-prompt-bg: var( --kendo-prompt-bg, #{k-color(surface-alt)} ) !default;
 /// The border color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-prompt-border: var( --kendo-prompt-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
 /// The text color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-text: k-color(on-app-surface) !default;
+$kendo-prompt-header-text: var( --kendo-prompt-header-text, #{k-color(on-app-surface)} ) !default;
 /// The background color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-bg: k-color(surface-alt) !default;
+$kendo-prompt-header-bg: var( --kendo-prompt-header-bg, #{k-color(surface-alt)} ) !default;
 /// The border color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-prompt-header-border: var( --kendo-prompt-header-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
 /// The vertical padding of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-padding-y: k-spacing(4) !default;
+$kendo-prompt-content-padding-y: var( --kendo-prompt-content-padding-y, #{k-spacing(4)} ) !default;
 /// The horizontal padding of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-padding-x: k-spacing(4) !default;
+$kendo-prompt-content-padding-x: var( --kendo-prompt-content-padding-x, #{k-spacing(4)} ) !default;
 /// The spacing between the items of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-spacing: k-spacing(4) !default;
+$kendo-prompt-content-spacing: var( --kendo-prompt-content-spacing, #{k-spacing(4)} ) !default;
 /// The text color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-text: k-color(on-base) !default;
+$kendo-prompt-content-text: var( --kendo-prompt-content-text, #{k-color(on-base)} ) !default;
 /// The background color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-bg: k-color(surface) !default;
+$kendo-prompt-content-bg: var( --kendo-prompt-content-bg, #{k-color(surface)} ) !default;
 /// The text border of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-prompt-content-border: var( --kendo-prompt-content-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
 /// The spacing between the items of the AIPrompt content expander.
 /// @group prompt
-$kendo-prompt-expander-spacing: k-spacing(2) !default;
+$kendo-prompt-expander-spacing: var( --kendo-prompt-expander-spacing, #{k-spacing(2)} ) !default;
 
 /// The vertical padding of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-y: k-spacing(2) !default;
+$kendo-prompt-suggestion-padding-y: var( --kendo-prompt-suggestion-padding-y, #{k-spacing(2)} ) !default;
 /// The horizontal padding of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-x: k-spacing(2) !default;
+$kendo-prompt-suggestion-padding-x: var( --kendo-prompt-suggestion-padding-x, #{k-spacing(2)} ) !default;
 /// The border radius of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border-radius: k-border-radius(md) !default;
+$kendo-prompt-suggestion-border-radius: var( --kendo-prompt-suggestion-border-radius, #{k-border-radius(md)} ) !default;
 /// The text color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-text: k-color(on-app-surface) !default;
+$kendo-prompt-suggestion-text: var( --kendo-prompt-suggestion-text, #{k-color(on-app-surface)} ) !default;
 /// The background color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-bg: k-color(surface-alt) !default;
+$kendo-prompt-suggestion-bg: var( --kendo-prompt-suggestion-bg, #{k-color(surface-alt)} ) !default;
 /// The border color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-prompt-suggestion-border: var( --kendo-prompt-suggestion-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 /// The elevation of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-shadow: k-elevation(1) !default;
+$kendo-prompt-suggestion-shadow: var( --kendo-prompt-suggestion-shadow, #{k-elevation(1)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/prompt/_variables.scss" with (
+    $kendo-prompt-text: $kendo-prompt-text,
+    $kendo-prompt-bg: $kendo-prompt-bg,
+    $kendo-prompt-border: $kendo-prompt-border,
+    $kendo-prompt-header-text: $kendo-prompt-header-text,
+    $kendo-prompt-header-bg: $kendo-prompt-header-bg,
+    $kendo-prompt-header-border: $kendo-prompt-header-border,
+    $kendo-prompt-content-padding-y: $kendo-prompt-content-padding-y,
+    $kendo-prompt-content-padding-x: $kendo-prompt-content-padding-x,
+    $kendo-prompt-content-spacing: $kendo-prompt-content-spacing,
+    $kendo-prompt-content-text: $kendo-prompt-content-text,
+    $kendo-prompt-content-bg: $kendo-prompt-content-bg,
+    $kendo-prompt-content-border: $kendo-prompt-content-border,
+    $kendo-prompt-expander-spacing: $kendo-prompt-expander-spacing,
+    $kendo-prompt-suggestion-padding-y: $kendo-prompt-suggestion-padding-y,
+    $kendo-prompt-suggestion-padding-x: $kendo-prompt-suggestion-padding-x,
+    $kendo-prompt-suggestion-border-radius: $kendo-prompt-suggestion-border-radius,
+    $kendo-prompt-suggestion-text: $kendo-prompt-suggestion-text,
+    $kendo-prompt-suggestion-bg: $kendo-prompt-suggestion-bg,
+    $kendo-prompt-suggestion-border: $kendo-prompt-suggestion-border,
+    $kendo-prompt-suggestion-shadow: $kendo-prompt-suggestion-shadow
+);

package/scss/radio/_layout.scss

@@ -2,40 +2,18 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/radio/_layout.scss" as *;
 
 @mixin kendo-radio--layout() {
 
-    .k-radio {
-        @include border-radius( $kendo-radio-border-radius );
-        width: var( --kendo-radio-width, 1em );
-        height: var( --kendo-radio-height, 1em );
-        margin: 0;
-        padding: 0;
-        line-height: initial;
-        border-width: var( --kendo-radio-border-width, #{$kendo-radio-border-width} );
-        border-style: solid;
-        outline: 0;
-        box-sizing: border-box;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        display: inline-block;
-        flex: none;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-        -webkit-appearance: none;
-    }
-
+    @include kendo-radio--layout-base();
 
     // Radio indicator
     .k-radio::before {
         @if $kendo-radio-indicator-type == "pseudo" {
             content: "";
-            width: var( --kendo-radio-indicator-size, 1em );
-            height: var( --kendo-radio-indicator-size, 1em );
             border-width: 0;
-            border-radius: var( --kendo-radio-indicator-border-radius, #{$kendo-radio-indicator-border-radius} );
+            border-radius: $kendo-radio-indicator-border-radius;
             background-color: currentColor;
             overflow: hidden;
             transform: scale(0) translate(-50%, -50%);
@@ -43,29 +21,6 @@
             top: 50%;
             left: 50%;
         }
-
-        @if $kendo-radio-indicator-type == "glyph" {
-            content: var( --kendo-radio-checked-glyph, #{$kendo-radio-checked-glyph} );
-            width: 1em;
-            height: 1em;
-            font-family: var( --kendo-radio-glyph-font-family, #{$kendo-radio-glyph-font-family} );
-            font-size: var( --kendo-radio-glyph-size, 1em );
-            line-height: 1;
-            transform: scale(0) translate(-50%, -50%);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
-
-        @if $kendo-radio-indicator-type == "image" {
-            content: "";
-            display: block;
-            width: 100%;
-            height: 100%;
-            mask-size: var( --kendo-checkbox-indicator-size, 100% );
-            mask-repeat: no-repeat;
-        }
     }
 
 
@@ -75,7 +30,7 @@
         @if $kendo-radio-indicator-type == "image" {
             &::before {
                 background-color: currentColor;
-                mask-image: var( --kendo-radio-hover-image, #{ $kendo-radio-hover-image } );
+                mask-image: $kendo-radio-hover-image;
             }
         }
 
@@ -106,7 +61,7 @@
         @if $kendo-radio-indicator-type == "image" {
             &::before {
                 background-color: currentColor;
-                mask-image: var( --kendo-radio-checked-image, #{ $kendo-radio-checked-image } );
+                mask-image: $kendo-radio-checked-image;
             }
         }
 
@@ -123,104 +78,20 @@
         }
     }
 
+    // Radio size
+    @each $size, $size-props in $kendo-radio-sizes {
+        $_indicator-size: map.get( $size-props, indicator-size );
 
-    // Disabled state
-    .k-radio:disabled:checked,
-    .k-radio.k-disabled.k-checked {
-        @if $kendo-radio-indicator-type == "image" {
-            background-image: var( --kendo-radio-disabled-checked-image, #{ $kendo-radio-disabled-checked-image } );
-        }
-    }
-
-
-    // Radio wrap
-    .k-radio-wrap {
-        flex: none;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        gap: 0;
-        align-items: center;
-        align-self: start;
-        vertical-align: middle;
-        position: relative;
-
-        &::before {
-            content: "\200b";
-            width: 0px;
-            overflow: hidden;
-            flex: none;
-            display: inline-block;
-            vertical-align: top;
-        }
-    }
-
-
-    // Radio label
-    .k-radio-label {
-        margin: 0;
-        padding: 0;
-        display: inline-flex;
-        align-items: flex-start;
-        gap: var( --kendo-radio-label-spacing, #{ $kendo-radio-label-spacing } );
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-
-        .k-ripple {
-            // Hide ripple temporarily
-            visibility: hidden !important; // stylelint-disable-line declaration-no-important
+        .k-radio-#{$size}::before {
+            width: $_indicator-size;
+            height: $_indicator-size;
         }
     }
-    .k-radio + .k-label,
-    .k-radio-wrap + .k-label,
-    .k-radio + .k-radio-label,
-    .k-radio-wrap + .k-radio-label {
-        display: inline;
-        margin-inline-start: var( --kendo-radio-label-spacing, #{ $kendo-radio-label-spacing } );
-    }
-
-
-    // Empty label
-    .k-radio-label:empty {
-        display: none !important; // stylelint-disable-line declaration-no-important
-    }
-    .k-radio-label.k-no-text {
-        min-width: 1px;
-    }
-
-
-    // Radio list
-    .k-radio-list {
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        gap: 0;
-        list-style: none;
-    }
 
 
     .k-radio-item,
     .k-radio-list-item {
-        padding-inline: var( --kendo-radio-list-item-padding-x, #{ $kendo-radio-list-item-padding-x } );
-        padding-block: var( --kendo-radio-list-item-padding-y, #{ $kendo-radio-list-item-padding-y } );
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-content: center;
-        gap: var( --kendo-radio-list-item-gap, #{ $kendo-radio-list-item-gap } );
-
-        .k-radio-label {
-            margin: 0;
-        }
-    }
-
-
-    .k-radio-list-horizontal,
-    .k-radio-list.k-list-horizontal {
-        display: flex;
-        flex-flow: row wrap;
-        gap: var( --kendo-radio-list-spacing, #{ $kendo-radio-list-spacing } );
+        gap: $kendo-radio-list-item-gap;
     }
 
 
@@ -230,15 +101,6 @@
             content: "";
             width: var( --kendo-radio-ripple-width, 300% );
             height: var( --kendo-radio-ripple-height, 300% );
-            display: block;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            border-radius: 100%;
-            z-index: -1;
-            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
-            transform: translate(-50%, -50%) scale(0);
-            transform-origin: center center;
         }
 
         .k-radio:focus,
@@ -246,34 +108,6 @@
             box-shadow: none !important; // stylelint-disable-line declaration-no-important
             outline: none !important; // stylelint-disable-line declaration-no-important
         }
-
-        .k-radio:disabled::after,
-        .k-radio.k-disabled::after {
-            display: none;
-        }
-    }
-
-
-    // Radio size
-    @each $size, $size-props in $kendo-radio-sizes {
-        $_size: map.get( $size-props, size );
-        $_glyph-size: map.get( $size-props, glyph-size );
-        $_indicator-size: map.get( $size-props, indicator-size );
-        $_ripple-size: map.get( $size-props, ripple-size );
-
-        .k-radio-#{$size} {
-            --kendo-radio-width: #{$_size};
-            --kendo-radio-height: #{$_size};
-            --kendo-radio-glyph-size: #{$_glyph-size};
-            --kendo-radio-indicator-size: #{$_indicator-size};
-        }
-
-        .k-ripple-container {
-            .k-radio-#{$size}::after {
-                --kendo-radio-ripple-width: #{ $_ripple-size };
-                --kendo-radio-ripple-height: #{ $_ripple-size };
-            }
-        }
     }
 
 }

package/scss/radio/_theme.scss

@@ -1,28 +1,10 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/radio/_theme.scss" as *;
 
 @mixin kendo-radio--theme() {
 
-    // Radio
-    .k-radio {
-        @include fill(
-            var( --kendo-radio-text, #{$kendo-radio-text} ),
-            var( --kendo-radio-bg, #{$kendo-radio-bg} ),
-            var( --kendo-radio-border, #{$kendo-radio-border} )
-        );
-    }
-
-
-    // Hover state
-    .k-radio:hover,
-    .k-radio.k-hover {
-        @include fill(
-            var( --kendo-radio-hover-text, #{$kendo-radio-hover-text} ),
-            var( --kendo-radio-hover-bg, #{$kendo-radio-hover-bg} ),
-            var( --kendo-radio-hover-border, #{$kendo-radio-hover-border} )
-        );
-    }
-
+    @include kendo-radio--theme-base();
 
     // Focus state
     .k-radio:focus,
@@ -32,70 +14,20 @@
     }
 
 
-    // Checked
-    .k-radio:checked,
-    .k-radio.k-checked {
-        @include fill(
-            var( --kendo-radio-checked-text, #{$kendo-radio-checked-text} ),
-            var( --kendo-radio-checked-bg, #{$kendo-radio-checked-bg} ),
-            var( --kendo-radio-checked-border, #{$kendo-radio-checked-border} )
-        );
-    }
-
-
     // Hover checked state
     .k-radio:checked:hover,
     .k-radio.k-checked.k-hover {
         @include fill(
-            var( --kendo-radio-hover-checked-text, #{$kendo-radio-hover-checked-text} ),
-            var( --kendo-radio-hover-checked-bg, #{$kendo-radio-hover-checked-bg} ),
-            var( --kendo-radio-hover-checked-border, #{$kendo-radio-hover-checked-border} )
+            $kendo-radio-hover-checked-text,
+            $kendo-radio-hover-checked-bg,
+            $kendo-radio-hover-checked-border
         );
     }
 
-
-    // Disabled
-    .k-radio:disabled,
-    .k-radio.k-disabled {
-        @include fill(
-            var( --kendo-radio-disabled-text, #{$kendo-radio-disabled-text} ),
-            var( --kendo-radio-disabled-bg, #{$kendo-radio-disabled-bg} ),
-            var( --kendo-radio-disabled-border, #{$kendo-radio-disabled-border} )
-        );
-    }
-    .k-radio:checked:disabled,
-    .k-radio.k-checked.k-disabled {
-        @include fill(
-            var( --kendo-radio-disabled-checked-text, #{$kendo-radio-disabled-checked-text} ),
-            var( --kendo-radio-disabled-checked-bg, #{$kendo-radio-disabled-checked-bg} ),
-            var( --kendo-radio-disabled-checked-border, #{$kendo-radio-disabled-checked-border} )
-        );
-    }
-
-
-    // Invalid state
-    .k-radio.k-invalid,
-    .k-radio.ng-invalid.ng-touched,
-    .k-radio.ng-invalid.ng-dirty {
-        @include fill( $border: var( --kendo-radio-invalid-border, #{$kendo-radio-invalid-border} ) );
-    }
-    .k-radio.k-invalid + .k-radio-label,
-    .k-radio.ng-invalid.ng-touched + .k-radio-label,
-    .k-radio.ng-invalid.ng-dirty + .k-radio-label {
-        @include fill( $color: var( --kendo-radio-invalid-text, #{$kendo-radio-invalid-text} ) );
-    }
-
-
     // Ripple
     .k-radio-wrap .k-ripple-blob {
-        color: var( --kendo-radio-ripple-bg, #{$kendo-radio-ripple-bg} );
-        opacity: var( --kendo-radio-ripple-opacity, #{$kendo-radio-ripple-opacity} );
-    }
-    .k-ripple-container {
-        .k-radio::after {
-            background: var( --kendo-radio-ripple-bg, #{$kendo-radio-ripple-bg} );
-            opacity: var( --kendo-radio-ripple-opacity, #{$kendo-radio-ripple-opacity} );
-        }
+        color: $kendo-radio-ripple-bg;
+        opacity: $kendo-radio-ripple-opacity;
     }
 
 }