@progress/kendo-theme-fluent 5.7.0

package/scss/progressbar/_theme.scss

@@ -0,0 +1,93 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-progressbar--theme {
+
+    @keyframes progressbar-indeterminate-animation-horizontal {
+        from {
+            inset-inline-start: -25%;
+        }
+        to {
+            inset-inline-start: 100%;
+        }
+    }
+
+    @keyframes progressbar-indeterminate-animation-vertical {
+        from {
+            inset-block-end: -25%;
+        }
+        to {
+            inset-block-end: 100%;
+        }
+    }
+
+    .k-progressbar {
+        &:not(.k-progressbar-indeterminate) {
+
+            @include fill(
+                var( --kendo-progressbar-text, #{$kendo-progressbar-text} ),
+                var( --kendo-progressbar-bg, #{$kendo-progressbar-bg} ),
+                var( --kendo-progressbar-border, #{$kendo-progressbar-border} ),
+                var( --kendo-progressbar-gradient, #{$kendo-progressbar-gradient} )
+            );
+
+            .k-selected {
+                @include fill(
+                    var( --kendo-progressbar-fill-text, #{$kendo-progressbar-fill-text} ),
+                    var( --kendo-progressbar-fill-bg, #{$kendo-progressbar-fill-bg} ),
+                    var( --kendo-progressbar-fill-border, #{$kendo-progressbar-fill-border} ),
+                    var( --kendo-progressbar-fill-gradient, #{$kendo-progressbar-fill-gradient} )
+                );
+            }
+
+            .k-item {
+                border-color: var( --kendo-progressbar-chunk-border, #{$kendo-progressbar-chunk-border} );
+            }
+
+            &[disabled],
+            &:disabled,
+            &.k-disabled {
+                @include fill(
+                    var( --kendo-progressbar-disabled-text, #{$kendo-progressbar-disabled-text} ),
+                    var( --kendo-progressbar-disabled-bg, #{$kendo-progressbar-disabled-bg} ),
+                    var( --kendo-progressbar-disabled-border, #{$kendo-progressbar-disabled-border} )
+                );
+
+                .k-selected {
+                    background-color: var( --kendo-progressbar-fill-disabled-bg, #{$kendo-progressbar-fill-disabled-bg} );
+                }
+            }
+        }
+    }
+
+    .k-progressbar-indeterminate {
+        @include fill(
+            var( --kendo-progressbar-indeterminate-text, #{$kendo-progressbar-indeterminate-text} ),
+            var( --kendo-progressbar-indeterminate-bg, #{$kendo-progressbar-indeterminate-bg} ),
+            var( --kendo-progressbar-indeterminate-border, #{$kendo-progressbar-indeterminate-border} )
+            );
+
+        &.k-progressbar-horizontal {
+            &::after {
+                background: var( --kendo-progressbar-indeterminate-gradient-horizontal, #{$kendo-progressbar-indeterminate-gradient-horizontal} );
+                animation: var( --kendo-progressbar-indeterminate-animation-horizontal, #{$kendo-progressbar-indeterminate-animation-horizontal} );
+            }
+        }
+
+        &.k-progressbar-vertical {
+            &::after {
+                background: var( --kendo-progressbar-indeterminate-gradient-vertical, #{$kendo-progressbar-indeterminate-gradient-vertical} );
+                animation: var( --kendo-progressbar-indeterminate-animation-vertical, #{$kendo-progressbar-indeterminate-animation-vertical} );
+            }
+        }
+    }
+
+    .k-circular-progressbar-scale {
+        stroke: var( --kendo-circular-progressbar-scale-stroke, #{$kendo-circular-progressbar-scale-stroke} );
+    }
+
+    .k-circular-progressbar-arc {
+        stroke: var( --kendo-circular-progressbar-arc-stroke, #{$kendo-circular-progressbar-arc-stroke} );
+        transition: stroke .5s ease;
+    }
+}

package/scss/progressbar/_variables.scss

@@ -0,0 +1,114 @@
+@use "../core/color-system" as *;
+@use "../core/_variables" as *;
+
+/// Height of the progressbar.
+/// @group progressbar
+$kendo-progressbar-height: 4px !default;
+/// Horizontal width of the progressbar.
+/// @group progressbar
+$kendo-progressbar-horizontal-width: 100% !default;
+/// Animation timing of the progressbar.
+/// @group progressbar
+$kendo-progressbar-animation-timing: 1s linear infinite !default;
+/// Border width of the progressbar.
+/// @group progressbar
+$kendo-progressbar-border-width: 0px !default;
+/// Border radius of the progressbar.
+/// @group progressbar
+$kendo-progressbar-border-radius: var( --kendo-border-radius-sm, initial ) !default;
+
+/// Font family of the progressbar.
+/// @group progressbar
+$kendo-progressbar-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the progressbar.
+/// @group progressbar
+$kendo-progressbar-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Line height of the progressbar.
+/// @group progressbar
+$kendo-progressbar-line-height: var( --kendo-line-height, inherit ) !default;
+
+///  of the progressbar.
+/// @group progressbar
+$kendo-progressbar-offset-y: map-get( $kendo-spacing, 2 ) !default;
+///  of the progressbar.
+/// @group progressbar
+$kendo-progressbar-padding-x: 0 !default;
+///  of the progressbar.
+/// @group progressbar
+$kendo-progressbar-padding-y: 0 !default;
+
+/// Background color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-bg: get-theme-color-var( neutral-30 ) !default;
+/// Text color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-border: $kendo-progressbar-bg !default;
+/// Background gradient of the progressbar.
+/// @group progressbar
+$kendo-progressbar-gradient: null !default;
+
+/// Background color of the disabled progressbar.
+/// @group progressbar
+$kendo-progressbar-disabled-bg: get-theme-color-var( neutral-20 ) !default;
+/// Text color of the disabled progressbar.
+/// @group progressbar
+$kendo-progressbar-disabled-text: get-theme-color-var( neutral-90 ) !default;
+/// Border color of the disabled progressbar.
+/// @group progressbar
+$kendo-progressbar-disabled-border: $kendo-progressbar-disabled-bg !default;
+
+/// Progress background color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-fill-bg: get-theme-color-var( primary-100 ) !default;
+/// Progress text color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-fill-text: var( --kendo-component-text, initial ) !default;
+/// Progress border color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-fill-border: $kendo-progressbar-fill-bg !default;
+/// Progress background gradient of the progressbar.
+/// @group progressbar
+$kendo-progressbar-fill-gradient: null !default;
+
+/// Progress background color of the disabled progressbar.
+/// @group progressbar
+$kendo-progressbar-fill-disabled-bg: get-theme-color-var( primary-30 ) !default;
+
+/// Chunk order color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-chunk-border: var( --kendo-body-bg, initial ) !default;
+
+/// Background color of the indeterminate progressbar.
+/// @group progressbar
+$kendo-progressbar-indeterminate-bg: get-theme-color-var( neutral-30 ) !default;
+/// Text color of the indeterminate progressbar.
+/// @group progressbar
+$kendo-progressbar-indeterminate-text: $kendo-progressbar-text !default;
+/// Border color of the indeterminate progressbar.
+/// @group progressbar
+$kendo-progressbar-indeterminate-border: get-theme-color-var( neutral-30 ) !default;
+/// Gradient of the horizontal indeterminate progressbar.
+/// @group progressbar
+$kendo-progressbar-indeterminate-gradient-horizontal: linear-gradient(270deg, get-theme-color-var( neutral-30 ) 15%, get-theme-color-var( primary-100 ) 50%, get-theme-color-var( neutral-30 ) 85%) !default;
+/// Gradient of the vertical indeterminate progressbar.
+/// @group progressbar
+$kendo-progressbar-indeterminate-gradient-vertical: linear-gradient(180deg, get-theme-color-var( neutral-30 ) 15%, get-theme-color-var( primary-100 ) 50%, get-theme-color-var( neutral-30 ) 85%) !default;
+/// Gradient size of the horizontal indeterminate progressbar.
+/// @group progressbar
+$kendo-progressbar-indeterminate-animation-horizontal: 3s ease 0s infinite running progressbar-indeterminate-animation-horizontal;
+/// Gradient size of the vertical indeterminate progressbar.
+/// @group progressbar
+$kendo-progressbar-indeterminate-animation-vertical: 3s ease 0s infinite running progressbar-indeterminate-animation-vertical;
+
+// Circular Progressbar
+/// Arc stroke color of the circular progressbar.
+/// @group progressbar
+$kendo-circular-progressbar-arc-stroke: get-theme-color-var( primary-100 ) !default;
+/// Scale stroke background color of the circular progressbar.
+/// @group progressbar
+$kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
+
+$kendo-progressbar-item-border-width: calc( map-get( $kendo-spacing, thin ) + map-get( $kendo-spacing, hair ) ) !default;

package/scss/progressbar/index.scss

@@ -0,0 +1,23 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "progressbar",
+    dependencies: ()
+);
+
+
+// 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( "progressbar" ) {
+        @include kendo-progressbar--layout();
+        @include kendo-progressbar--theme();
+    }
+}

package/scss/radio/_layout.scss

@@ -0,0 +1,277 @@
+@use "_variables.scss" as *;
+@use "../core/_variables.scss" as *;
+@use "../core/mixins/border-radius" as *; 
+@use "../core/mixins/disabled" as *; 
+
+@mixin kendo-radio--layout() {
+
+    .k-radio {
+        @include border-radius( $kendo-radio-border-radius );
+        width: var( --INTERNAL-kendo-radio-width, #{ $kendo-radio-width } );
+        height: var( --INTERNAL-kendo-radio-height, #{ $kendo-radio-height } );
+        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;
+
+        &::before {
+            font-size: var( --INTERNAL-kendo-radio-font-size, #{ $kendo-radio-font-size } )
+        }
+    }
+
+
+    // Radio indicator
+    .k-radio::before {
+        @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 } );
+            line-height: 1;
+            transform: scale(0) translate(-50%, -50%);
+            overflow: hidden;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+        }
+    }
+
+    // Focus state
+    .k-radio:focus,
+    .k-radio.k-focus {
+        &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            margin: -4px;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            border: 1px solid;
+        }
+    }
+
+
+    .k-radio:hover,
+    .k-radio.k-hover {
+        &:not(
+            .k-radio.k-disabled, .k-radio:disabled,
+            .k-radio.k-invalid, .k-radio:invalid
+        )::after {
+            content: "";
+            width: var( --INTERNAL-kendo-radio-checked-width, #{ $kendo-radio-checked-width } );
+            height: var( --INTERNAL-kendo-radio-checked-height, #{ $kendo-radio-checked-height } );
+            border-width: var( --INTERNAL-kendo-radio-checked-border-width, #{ $kendo-radio-checked-border-width } );
+            border-style: solid;
+            border-radius: var( --kendo-radio-border-radius, #{ $kendo-radio-border-radius } );
+            box-sizing: border-box;
+            position: absolute;
+            top: var(--INTERNAL-kendo-radio-checked-top, #{ $kendo-radio-checked-top } );
+            left: var(--INTERNAL-kendo-radio-checked-left, #{ $kendo-radio-checked-left } );
+        }
+    }
+
+    // Checked and Hover state
+    .k-radio:checked,
+    .k-radio.k-checked {
+        &::after {
+            content: "";
+            width: var( --INTERNAL-kendo-radio-checked-width, #{ $kendo-radio-checked-width } );
+            height: var( --INTERNAL-kendo-radio-checked-height, #{ $kendo-radio-checked-height } );
+            border-width: var( --INTERNAL-kendo-radio-checked-border-width, #{ $kendo-radio-checked-border-width } );
+            border-style: solid;
+            border-radius: var( --kendo-radio-border-radius, #{ $kendo-radio-border-radius } );
+            box-sizing: border-box;
+            position: absolute;
+            top: var(--INTERNAL-kendo-radio-checked-top, #{ $kendo-radio-checked-top } );
+            left: var(--INTERNAL-kendo-radio-checked-left, #{ $kendo-radio-checked-left } );
+        }
+
+        @if $kendo-radio-indicator-type == "glyph" {
+            &::before {
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+    }
+
+
+    .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; // sass-lint:disable-line no-important
+        }
+    }
+    .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; // sass-lint:disable-line 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 } );
+    }
+
+
+    // Ripple
+    .k-ripple-container {
+        .k-radio::after {
+            content: "";
+            width: var( --INTERNAL-kendo-radio-ripple-width, #{ $kendo-radio-ripple-width } );
+            height: var( --INTERNAL-kendo-radio-ripple-height, #{ $kendo-radio-ripple-height } );
+            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:disabled::after,
+        .k-radio.k-disabled::after {
+            display: none;
+        }
+
+        .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 );
+        $_ripple-size: map-get( $size-props, ripple-size );
+        $_checked-border-width: map-get( $size-props, checked-border-width);
+        $_checked-position: map-get( $size-props, checked-position);
+
+        .k-radio-#{$size} {
+            --INTERNAL-kendo-radio-width: #{ $_size };
+            --INTERNAL-kendo-radio-height: #{ $_size };
+
+            &::before {
+                --INTERNAL-kendo-radio-font-size: #{ $_glyph-size };
+            }
+        }
+        
+        .k-radio-#{$size}.k-checked,
+        .k-radio-#{$size}:checked,
+        .k-radio-#{$size}.k-hover,
+        .k-radio-#{$size}:hover {
+            &::after {
+                --INTERNAL-kendo-radio-checked-width: calc( #{ $_size } / 2 );
+                --INTERNAL-kendo-radio-checked-height: calc( #{ $_size } / 2 );
+                --INTERNAL-kendo-radio-checked-border-width: #{ $_checked-border-width };
+                --INTERNAL-kendo-radio-checked-top: #{ $_checked-position };
+                --INTERNAL-kendo-radio-checked-left: #{ $_checked-position };
+            }
+        }
+
+        .k-ripple-container {
+            .k-radio-#{$size}::after {
+                --INTERNAL-kendo-radio-ripple-width: #{ $_ripple-size };
+                --INTERNAL-kendo-radio-ripple-height: #{ $_ripple-size };
+            }
+        }
+    }
+
+}

package/scss/radio/_theme.scss

@@ -0,0 +1,125 @@
+@use "_variables.scss" as *;
+@use "../core/mixins/" 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(
+            $border: var( --kendo-radio-hover-border, #{ $kendo-radio-hover-border } )
+        );
+
+        &::after {
+            @include fill(
+                $bg: var( --kendo-radio-hover-color, #{ $kendo-radio-hover-color } ),
+                $border: var( --kendo-radio-hover-color, #{ $kendo-radio-hover-color } )
+            );
+        }
+    }
+
+
+    // Checked and Hover state
+    .k-radio:checked:hover,
+    .k-radio.k-checked.k-hover {
+        @include fill(
+            $border: var( --kendo-radio-checked-hover-border, #{ $kendo-radio-checked-hover-border } )
+        );
+
+        &::after {
+            @include fill(
+                $border: var( --kendo-radio-checked-hover-border, #{ $kendo-radio-checked-hover-border } )
+            );
+        }
+    }
+
+
+    // Focus state
+    .k-radio:focus,
+    .k-radio.k-focus {
+        &::before {
+            @include fill( $border: var( --kendo-radio-focus-checked-border, #{ $kendo-radio-focus-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 } ) );
+    }
+
+
+    // 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 } )
+        );
+
+        &::after {
+            background-color: var( --kendo-radio-checked-border, #{ $kendo-radio-checked-border } );
+        }
+    }
+
+
+    // Disabled
+    .k-radio:disabled,
+    .k-radio.k-disabled {
+            border-color: var( --kendo-radio-disabled-border, #{ $kendo-radio-disabled-border } );
+    }
+
+
+    // Checked and disabled
+    .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 } )
+        );
+
+        &::after {
+            @include fill(
+                $bg: var( --kendo-radio-disabled-checked-border, #{ $kendo-radio-disabled-checked-border } ),
+                $border: var( --kendo-radio-disabled-checked-border, #{ $kendo-radio-disabled-checked-border } )
+            );
+        }
+    }
+
+
+    // Ripple
+    .k-ripple-container {
+        .k-radio::after {
+            background: var( --kendo-radio-checked-bg, #{ $kendo-radio-checked-bg } );
+            opacity: var( --kendo-radio-ripple-opacity, #{ $kendo-radio-ripple-opacity } );
+        }
+    }
+
+    //Radio items
+    .k-radio-item,
+    .k-radio-list-item {
+        &.k-disabled,
+        &:disabled {
+            background-color: transparent;
+        }
+    }
+}