@progress/kendo-theme-fluent 11.0.3-dev.3 → 11.1.0-dev.1

package/scss/calendar/_layout.scss

@@ -8,8 +8,8 @@
 
     // Base
     .k-calendar {
-        inline-size: var( --INTERNAL--kendo-calendar-width, min-content );
-        block-size: var( --INTERNAL--kendo-calendar-height, min-content );
+        inline-size: var( --kendo-calendar-width, min-content );
+        block-size: var( --kendo-calendar-height, min-content );
         border-width: var( --kendo-calendar-border-width, #{$kendo-calendar-border-width} );
         border-style: solid;
         border-radius: var( --kendo-calendar-border-radius, #{$kendo-calendar-border-radius} );;
@@ -87,8 +87,8 @@
     .k-calendar-th {
         padding-inline: var( --kendo-calendar-header-cell-padding-x, #{$kendo-calendar-header-cell-padding-x} );
         padding-block: var( --kendo-calendar-header-cell-padding-y, #{$kendo-calendar-header-cell-padding-y} );
-        inline-size: var( --INTERNAL--kendo-calendar-cell-size, var( --kendo-calendar-header-cell-width, #{$kendo-calendar-header-cell-width} ) );
-        block-size: var( --INTERNAL--kendo-calendar-cell-size, var( --kendo-calendar-header-cell-height, #{$kendo-calendar-header-cell-height} ) );
+        inline-size: var( --kendo-calendar-cell-size, var( --kendo-calendar-header-cell-width, #{$kendo-calendar-header-cell-width} ) );
+        block-size: var( --kendo-calendar-cell-size, var( --kendo-calendar-header-cell-height, #{$kendo-calendar-header-cell-height} ) );
         font-size: var( --kendo-calendar-header-cell-font-size, #{$kendo-calendar-header-cell-font-size} );
         line-height: var( --kendo-calendar-header-cell-line-height, #{$kendo-calendar-header-cell-line-height} );
         text-transform: uppercase;
@@ -96,10 +96,10 @@
 
     .k-calendar-td {
         @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ));
-        inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
-        block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
+        inline-size: var( --kendo-calendar-cell-size, min-content );
+        block-size: var( --kendo-calendar-cell-size, min-content );
         border-color: transparent;
-        font-size: var( --INTERNAL--kendo-calendar-cell-font-size, inherit );
+        font-size: var( --kendo-calendar-cell-font-size, inherit );
     }
 
 
@@ -107,8 +107,8 @@
     // Remove .k-calendar once we remove k-link
     .k-calendar .k-calendar-cell-inner {
         @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
-        padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, 0 );
-        padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, 0 );
+        padding-inline: var( --kendo-calendar-cell-padding-x, 0 );
+        padding-block: var( --kendo-calendar-cell-padding-y, 0 );
         width: 100%;
         height: 100%;
         box-sizing: border-box;
@@ -141,7 +141,7 @@
     .k-calendar-header {
         padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
         padding-block: var( --kendo-calendar-header-padding-y, #{$kendo-calendar-header-padding-y} );
-        min-width: var( --INTERNAL--kendo-calendar-view-width, #{$kendo-calendar-view-width});
+        min-width: var( --kendo-calendar-view-width, #{$kendo-calendar-view-width});
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
@@ -174,7 +174,7 @@
         padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
         padding-block-end: var( --kendo-calendar-view-padding-block-end, #{$kendo-calendar-view-padding-block-end} );
         // setting width / height prevents layout changes in meta views
-        inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$kendo-calendar-view-width});
+        inline-size: var( --kendo-calendar-view-width, #{$kendo-calendar-view-width});
         min-height: $kendo-calendar-view-height;
         box-sizing: content-box;
         gap: var( --kendo-calendar-view-gap, #{$kendo-calendar-view-gap} );
@@ -189,8 +189,8 @@
 
         .k-link {
             @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
-            padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, 0 );
-            padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, 0 );
+            padding-inline: var( --kendo-calendar-cell-padding-x, 0 );
+            padding-block: var( --kendo-calendar-cell-padding-y, 0 );
             width: 100%;
             height: 100%;
             box-sizing: border-box;
@@ -215,10 +215,10 @@
         $_month-cell-size: $kendo-calendar-cell-size;
 
         .k-calendar-td {
-            width: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
-            height: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
-            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
-            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
+            width: var( --kendo-calendar-cell-size, #{$_month-cell-size} );
+            height: var( --kendo-calendar-cell-size, #{$_month-cell-size} );
+            inline-size: var( --kendo-calendar-cell-size, #{$_month-cell-size} );
+            block-size: var( --kendo-calendar-cell-size, #{$_month-cell-size} );
         }
     }
 
@@ -229,10 +229,10 @@
         $_year-cell-size: ( 2 * $kendo-calendar-cell-size );
 
         .k-calendar-td {
-            width: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
-            height: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
-            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
-            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
+            width: var( --kendo-calendar-cell-size, #{$_year-cell-size} );
+            height: var( --kendo-calendar-cell-size, #{$_year-cell-size} );
+            inline-size: var( --kendo-calendar-cell-size, #{$_year-cell-size} );
+            block-size: var( --kendo-calendar-cell-size, #{$_year-cell-size} );
         }
     }
 
@@ -243,10 +243,10 @@
         $_decade-cell-size: ( 2 * $kendo-calendar-cell-size );
 
         .k-calendar-td {
-            width: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
-            height: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
-            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
-            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
+            width: var( --kendo-calendar-cell-size, #{$_decade-cell-size} );
+            height: var( --kendo-calendar-cell-size, #{$_decade-cell-size} );
+            inline-size: var( --kendo-calendar-cell-size, #{$_decade-cell-size} );
+            block-size: var( --kendo-calendar-cell-size, #{$_decade-cell-size} );
         }
     }
 
@@ -257,10 +257,10 @@
         $_century-cell-size: ( 2 * $kendo-calendar-cell-size );
 
         .k-calendar-td {
-            width: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
-            height: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
-            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
-            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
+            width: var( --kendo-calendar-cell-size, #{$_century-cell-size} );
+            height: var( --kendo-calendar-cell-size, #{$_century-cell-size} );
+            inline-size: var( --kendo-calendar-cell-size, #{$_century-cell-size} );
+            block-size: var( --kendo-calendar-cell-size, #{$_century-cell-size} );
         }
         .k-link {
             text-align: start;
@@ -439,7 +439,7 @@
     }
 
     .k-range-mid::before {
-        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-width: var( --kendo-calendar-range-border-width, 1px );
         border-inline-width: 0;
         border-radius: 0;
     }
@@ -450,7 +450,7 @@
         .k-range-mid + .k-range-mid,
         :last-child
     )::before {
-        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-width: var( --kendo-calendar-range-border-width, 1px );
         border-inline-end-width: 0;
         border-radius: 0;
 
@@ -462,7 +462,7 @@
 
     .k-range-end::before,
     .k-range-mid:last-child::before {
-        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-width: var( --kendo-calendar-range-border-width, 1px );
         border-inline-start-width: 0;
         border-radius: 0;
 
@@ -473,7 +473,7 @@
     }
 
     .k-range-start.k-range-end::before {
-        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-width: var( --kendo-calendar-range-border-width, 1px );
         border-radius:  var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) ;
     }
 
@@ -495,28 +495,28 @@
         $_century-cell-size: ( 2 * $_cell-size );
 
         .k-calendar-#{$size} {
-            --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
-            --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
-            --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
-            --INTERNAL--kendo-calendar-cell-font-size: var( --kendo-calendar-#{$size}-cell-font-size, #{$_cell-font-size} );
+            --kendo-calendar-view-width: #{8 * $_cell-size};
+            --kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
+            --kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
+            --kendo-calendar-cell-font-size: var( --kendo-calendar-#{$size}-cell-font-size, #{$_cell-font-size} );
             font-size: $_font-size;
             line-height: $_line-height;
 
             &.k-month-calendar,
             .k-calendar-monthview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
+                --kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
             }
             &.k-year-calendar,
             .k-calendar-yearview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
+                --kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
             }
             &.k-decade-calendar,
             .k-calendar-decadeview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
+                --kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
             }
             &.k-century-calendar,
             .k-calendar-centuryview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
+                --kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
             }
         }
     }

package/scss/calendar/_theme.scss

@@ -32,53 +32,50 @@
 
 
         .k-calendar-td {
-            --INTERNAL--kendo-calendar-cell-text: var( --kendo-calendar-cell-text );
-            --INTERNAL--kendo-calendar-cell-bg: var( --kendo-calendar-cell-bg );
-
             @include fill(
-                var( --INTERNAL--kendo-calendar-cell-text, inherit ),
-                var( --INTERNAL--kendo-calendar-cell-bg, inherit )
+                var( --kendo-calendar-cell-text, inherit ),
+                var( --kendo-calendar-cell-bg, inherit )
             );
 
             .k-link {
-                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-link-text );
-                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-link-bg );
-                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-link-shadow );
+                color: var( --kendo-calendar-cell-link-text );
+                background-color: var( --kendo-calendar-cell-link-bg );
+                box-shadow: var( --kendo-calendar-cell-link-shadow );
 
                 @include fill(
-                    var( --INTERNAL--kendo-calendar-cell-link-text, inherit ),
-                    var( --INTERNAL--kendo-calendar-cell-link-bg, inherit )
+                    var( --kendo-calendar-cell-link-text, inherit ),
+                    var( --kendo-calendar-cell-link-bg, inherit )
                 );
 
-                box-shadow: var( --INTERNAL--kendo-calendar-cell-link-shadow, none );
+                box-shadow: var( --kendo-calendar-cell-link-shadow, none );
             }
 
             &:hover .k-link,
             &.k-hover .k-link {
-                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-hover-text, #{$kendo-calendar-cell-hover-text} );
-                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-hover-bg, #{$kendo-calendar-cell-hover-bg} );
+                color: var( --kendo-calendar-cell-hover-text, #{$kendo-calendar-cell-hover-text} );
+                background-color: var( --kendo-calendar-cell-hover-bg, #{$kendo-calendar-cell-hover-bg} );
             }
 
             &:focus .k-link,
             &.k-focus .k-link {
-                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-focus-shadow, #{$kendo-calendar-cell-focus-shadow} );
+                box-shadow: var( --kendo-calendar-cell-focus-shadow, #{$kendo-calendar-cell-focus-shadow} );
             }
 
             &.k-selected .k-link{
-                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-selected-text, #{$kendo-calendar-cell-selected-text} );
-                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-selected-bg, #{$kendo-calendar-cell-selected-bg} );
-                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-selected-shadow, #{$kendo-calendar-cell-selected-shadow} );
+                color: var( --kendo-calendar-cell-selected-text, #{$kendo-calendar-cell-selected-text} );
+                background-color: var( --kendo-calendar-cell-selected-bg, #{$kendo-calendar-cell-selected-bg} );
+                box-shadow: var( --kendo-calendar-cell-selected-shadow, #{$kendo-calendar-cell-selected-shadow} );
             }
 
             &.k-selected:hover .k-link,
             &.k-selected.k-hover .k-link {
-                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-selected-hover-text, #{$kendo-calendar-cell-selected-hover-text} );
-                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-selected-hover-bg, #{$kendo-calendar-cell-selected-hover-bg} );
+                color: var( --kendo-calendar-cell-selected-hover-text, #{$kendo-calendar-cell-selected-hover-text} );
+                background-color: var( --kendo-calendar-cell-selected-hover-bg, #{$kendo-calendar-cell-selected-hover-bg} );
             }
 
             &.k-selected:focus .k-link,
             &.k-selected.k-focus .k-link {
-                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-selected-focus-shadow, #{$kendo-calendar-cell-selected-focus-shadow} );
+                box-shadow: var( --kendo-calendar-cell-selected-focus-shadow, #{$kendo-calendar-cell-selected-focus-shadow} );
             }
 
             &.k-disabled {
@@ -158,7 +155,7 @@
 
             &.k-range-start:hover .k-link,
             &.k-range-start.k-hover .k-link {
-                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
+                box-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
 
             }
 
@@ -166,14 +163,14 @@
             &.k-range-mid:last-child.k-hover .k-link,
             &.k-range-end:hover .k-link,
             &.k-range-end.k-hover .k-link {
-                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
+                box-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
             }
 
             &.k-range-mid:first-child:hover .k-link,
             &.k-range-mid:first-child.k-hover .k-link,
             &.k-alt + .k-range-mid:hover .k-link,
             &.k-alt + .k-range-mid.k-hover .k-link {
-                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
+                box-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
             }
         }
     }
@@ -215,31 +212,31 @@
 
         &.k-range-start:hover .k-link,
         &.k-range-start.k-hover .k-link {
-            --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
+            box-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
 
         }
 
         &.k-range-mid:hover .k-link,
         &.k-range-mid.k-hover .k-link {
-            --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-mid-range-hover-shadow, #{$kendo-calendar-mid-range-hover-shadow} );
+            box-shadow: var( --kendo-calendar-mid-range-hover-shadow, #{$kendo-calendar-mid-range-hover-shadow} );
         }
 
         &.k-range-mid:last-child:hover .k-link,
         &.k-range-mid:last-child.k-hover .k-link,
         &.k-range-end:hover .k-link,
         &.k-range-end.k-hover .k-link {
-            --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
+            box-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
         }
 
         &.k-range-mid:first-child:hover .k-link,
         &.k-range-mid:first-child.k-hover .k-link,
         &.k-alt + .k-range-mid:hover .k-link,
         &.k-alt + .k-range-mid.k-hover .k-link {
-            --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
+            box-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
         }
 
         &.k-range-start.k-range-end:hover .k-link {
-            --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-end-range-hover-shadow, #{$kendo-calendar-start-end-range-hover-shadow} );
+            box-shadow: var( --kendo-calendar-start-end-range-hover-shadow, #{$kendo-calendar-start-end-range-hover-shadow} );
         }
     }
 

package/scss/card/_theme.scss

@@ -6,16 +6,11 @@
 
     // Card
     .k-card {
-        --INTERNAL--kendo-card-text: var( --kendo-card-text, #{$kendo-card-text} );
-        --INTERNAL--kendo-card-bg: var( --kendo-card-bg, #{$kendo-card-bg} );
-        --INTERNAL--kendo-card-border: var( --kendo-card-border, #{$kendo-card-border} );
-        --INTERNAL--kendo-card-shadow: var( --kendo-card-shadow, #{$kendo-card-shadow} );
-
-        color: var( --INTERNAL--kendo-card-text, initial );
-        background-color: var( --INTERNAL--kendo-card-bg, initial );
-        border-color: var( --INTERNAL--kendo-card-border, initial );
+        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( --INTERNAL--kendo-card-shadow, none ) );
+        @include box-shadow( var( --kendo-card-shadow, #{$kendo-card-shadow} ) );
 
         .k-card-inner {
             background-color: inherit;
@@ -24,14 +19,14 @@
 
         &:focus,
         &.k-focus {
-            --INTERNAL--kendo-card-text: var( --kendo-card-focus-text, #{$kendo-card-focus-text} );
-            --INTERNAL--kendo-card-bg: var( --kendo-card-focus-bg, #{$kendo-card-focus-bg} );
-            --INTERNAL--kendo-card-border: var( --kendo-card-focus-border, #{$kendo-card-focus-border} );
-            --INTERNAL--kendo-card-shadow: var( --kendo-card-focus-shadow, #{$kendo-card-focus-shadow} );
+            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 {
-            --INTERNAL--kendo-card-shadow: var( --kendo-card-focus-shadow, #{$kendo-card-focus-shadow} );
+            box-shadow: var( --kendo-card-focus-shadow, #{$kendo-card-focus-shadow} );
         }
 
         .k-hr {

package/scss/checkbox/_layout.scss

@@ -8,8 +8,8 @@
     .k-checkbox {
         margin: 0;
         padding: 0;
-        width: var( --INTERNAL--kendo-checkbox-width, 1em );
-        height: var( --INTERNAL--kendo-checkbox-height, 1em );
+        width: var( --kendo-checkbox-width, 1em );
+        height: var( --kendo-checkbox-height, 1em );
         line-height: initial;
         border-width: var( --kendo-checkbox-border-width, #{$kendo-checkbox-border-width} );
         border-style: solid;
@@ -30,8 +30,8 @@
     .k-checkbox::before {
         @if $kendo-checkbox-indicator-type == "pseudo" {
             content: "";
-            width: var( --INTERNAL--kendo-checkbox-indicator-size, 1em );
-            height: var( --INTERNAL--kendo-checkbox-indicator-size, 1em );
+            width: var( --kendo-checkbox-indicator-size, 1em );
+            height: var( --kendo-checkbox-indicator-size, 1em );
             border-width: 0;
             border-radius: var( --kendo-checkbox-indicator-border-radius );
             background-color: currentColor;
@@ -47,7 +47,7 @@
             width: 1em;
             height: 1em;
             font-family: var( --kendo-checkbox-glyph-font-family, #{ $kendo-checkbox-glyph-font-family } );
-            font-size: var( --INTERNAL--kendo-checkbox-glyph-size, 1em );
+            font-size: var( --kendo-checkbox-glyph-size, 1em );
             line-height: 1;
             transform: translate(-50%, -50%) scale(0);
             overflow: hidden;
@@ -61,7 +61,7 @@
             display: block;
             width: 100%;
             height: 100%;
-            mask-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
+            mask-size: var( --kendo-checkbox-indicator-size, 100% );
             mask-position: center;
             mask-repeat: no-repeat;
         }
@@ -130,14 +130,14 @@
             &::before {
                 background-color: currentColor;
                 mask-image: var( --kendo-checkbox-indeterminate-image, #{ $kendo-checkbox-indeterminate-image } );
-                mask-size: var( --INTERNAL--kendo-checkbox-indeterminate-size, 100% );
+                mask-size: var( --kendo-checkbox-indeterminate-size, 100% );
             }
         }
 
         @if $kendo-checkbox-indicator-type == "pseudo" {
             &::before {
-                width: var( --INTERNAL--kendo-checkbox-indeterminate-size, 1em );
-                height: var( --INTERNAL--kendo-checkbox-indeterminate-size, 1em );
+                width: var( --kendo-checkbox-indeterminate-size, 1em );
+                height: var( --kendo-checkbox-indeterminate-size, 1em );
                 transform: translate(-50%, -50%) scale(1);
             }
         }
@@ -272,8 +272,8 @@
     .k-ripple-container {
         .k-checkbox::after {
             content: "";
-            width: var( --INTERNAL--kendo-ripple-size-width, 300% );
-            height: var( --INTERNAL--kendo-ripple-size-height, 300% );
+            width: var( --kendo-ripple-size-width, 300% );
+            height: var( --kendo-ripple-size-height, 300% );
             display: block;
             position: absolute;
             left: 50%;
@@ -307,17 +307,17 @@
         $_ripple-size: map.get( $size-props, ripple-size );
 
         .k-checkbox-#{$size} {
-            --INTERNAL--kendo-checkbox-width: #{$_size};
-            --INTERNAL--kendo-checkbox-height: #{$_size};
-            --INTERNAL--kendo-checkbox-glyph-size: #{$_glyph-size};
-            --INTERNAL--kendo-checkbox-indicator-size: #{$_indicator-size};
-            --INTERNAL--kendo-checkbox-indeterminate-size: #{$_indeterminate-size};
+            --kendo-checkbox-width: #{$_size};
+            --kendo-checkbox-height: #{$_size};
+            --kendo-checkbox-glyph-size: #{$_glyph-size};
+            --kendo-checkbox-indicator-size: #{$_indicator-size};
+            --kendo-checkbox-indeterminate-size: #{$_indeterminate-size};
         }
 
         .k-ripple-container {
             .k-checkbox-#{size}::after {
-                --INTERNAL--kendo-ripple-size-width: #{ $_ripple-size };
-                --INTERNAL--kendo-ripple-size-height: #{ $_ripple-size };
+                --kendo-ripple-size-width: #{ $_ripple-size };
+                --kendo-ripple-size-height: #{ $_ripple-size };
             }
         }
     }

package/scss/chip/_layout.scss

@@ -6,15 +6,15 @@
 
     // Chip
     .k-chip {
-        padding-inline: var( --INTERNAL-kendo-chip-padding-x, 0 );
-        padding-block: var( --INTERNAL-kendo-chip-padding-y, 0 );
+        padding-inline: var( --kendo-chip-padding-x, 0 );
+        padding-block: var( --kendo-chip-padding-y, 0 );
         border-width: var( --kendo-chip-border-width, #{ $kendo-chip-border-width } );
         border-style: solid;
         outline: 0;
         font-family: var( --kendo-chip-font-family, #{ $kendo-chip-font-family } );
         font-weight: var( --kendo-chip-font-weight, #{ $kendo-chip-font-weight } ) ;
-        font-size: var( --INTERNAL-kendo-chip-font-size, 1rem );
-        line-height: var( --INTERNAL-kendo-chip-line-height, normal );
+        font-size: var( --kendo-chip-font-size, 1rem );
+        line-height: var( --kendo-chip-line-height, normal );
         display: inline-flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -146,10 +146,10 @@
         $_line-height: map.get( $size-props, line-height );
 
         .k-chip-#{$size} {
-            --INTERNAL-kendo-chip-padding-x: #{ $_padding-x };
-            --INTERNAL-kendo-chip-padding-y: #{ $_padding-y };
-            --INTERNAL-kendo-chip-font-size: #{ $_font-size };
-            --INTERNAL-kendo-chip-line-height: #{ $_line-height };
+            --kendo-chip-padding-x: #{ $_padding-x };
+            --kendo-chip-padding-y: #{ $_padding-y };
+            --kendo-chip-font-size: #{ $_font-size };
+            --kendo-chip-line-height: #{ $_line-height };
 
             .k-chip-action {
                 padding: $_padding-y;

package/scss/chip/_theme.scss

@@ -5,26 +5,22 @@
 @mixin kendo-chip--theme() {
 
     .k-chip {
-        --INTERNAL-kendo-chip-text: var( --kendo-chip-text );
-        --INTERNAL-kendo-chip-bg: var( --kendo-chip-bg );
-        --INTERNAL-kendo-chip-border: var( --kendo-chip-border );
-
-        border-color: var( --INTERNAL-kendo-chip-border, initial );
-        color: var( --INTERNAL-kendo-chip-text, initial );
-        background-color: var( --INTERNAL-kendo-chip-bg, initial );
+        border-color: var( --kendo-chip-border, initial );
+        color: var( --kendo-chip-text, initial );
+        background-color: var( --kendo-chip-bg, initial );
 
         &:hover,
         &.k-hover {
-            --INTERNAL-kendo-chip-text: var( --kendo-chip-hover-text );
-            --INTERNAL-kendo-chip-bg: var( --kendo-chip-hover-bg );
-            --INTERNAL-kendo-chip-border: var( --kendo-chip-hover-border );
+            --kendo-chip-text: var( --kendo-chip-hover-text );
+            --kendo-chip-bg: var( --kendo-chip-hover-bg );
+            --kendo-chip-border: var( --kendo-chip-hover-border );
         }
 
         &:focus,
         &.k-focus {
-            --INTERNAL-kendo-chip-text: var( --kendo-chip-focus-text );
-            --INTERNAL-kendo-chip-bg: var( --kendo-chip-focus-bg );
-            --INTERNAL-kendo-chip-border: var( --kendo-chip-focus-border );
+            --kendo-chip-text: var( --kendo-chip-focus-text );
+            --kendo-chip-bg: var( --kendo-chip-focus-bg );
+            --kendo-chip-border: var( --kendo-chip-focus-border );
         }
 
         &.k-chip-outline:focus::after,
@@ -33,16 +29,16 @@
         }
 
         &.k-selected {
-            --INTERNAL-kendo-chip-text: var( --kendo-chip-selected-text );
-            --INTERNAL-kendo-chip-bg: var( --kendo-chip-selected-bg );
-            --INTERNAL-kendo-chip-border: var( --kendo-chip-selected-border );
+            --kendo-chip-text: var( --kendo-chip-selected-text );
+            --kendo-chip-bg: var( --kendo-chip-selected-bg );
+            --kendo-chip-border: var( --kendo-chip-selected-border );
         }
 
         &:disabled,
         &.k-disabled {
-            --INTERNAL-kendo-chip-text: var( --kendo-chip-disabled-text );
-            --INTERNAL-kendo-chip-bg: var( --kendo-chip-disabled-bg );
-            --INTERNAL-kendo-chip-border: var( --kendo-chip-disabled-border );
+            --kendo-chip-text: var( --kendo-chip-disabled-text );
+            --kendo-chip-bg: var( --kendo-chip-disabled-bg );
+            --kendo-chip-border: var( --kendo-chip-disabled-border );
         }
 
     }

package/scss/colorgradient/_layout.scss

@@ -211,10 +211,11 @@
         }
 
         .k-contrast-validation {
-            --INTERNAL--kendo-color-gradient-contrast-spacing: var( --kendo-color-gradient-contrast-spacing,  #{$kendo-color-gradient-contrast-spacing} );
+            --kendo-color-gradient-contrast-spacing: #{$kendo-color-gradient-contrast-spacing};
+
             display: inline-flex;
             align-items: center;
-            gap: calc( var( --INTERNAL--kendo-color-gradient-contrast-spacing ) / 2 );
+            gap: calc( var( --kendo-color-gradient-contrast-spacing ) / 2 );
 
             .k-icon {
                 vertical-align: middle;

package/scss/editor/_theme.scss

@@ -72,7 +72,7 @@
     .k-ct-popup {
         .k-selected {
             @include fill(
-                var( ---kendo-editor-ct-popup-text, #{$kendo-editor-ct-popup-text} ),
+                var( --kendo-editor-ct-popup-text, #{$kendo-editor-ct-popup-text} ),
                 var( --kendo-editor-ct-popup-bg, #{$kendo-editor-ct-popup-bg} ),
                 var( --kendo-editor-ct-popup-border, #{$kendo-editor-ct-popup-border} )
             );

package/scss/fab/_layout.scss

@@ -4,8 +4,8 @@
 @mixin kendo-fab--layout() {
 
     .k-fab {
-        padding-inline: var( --INTERNAL--kendo-fab-padding-x, 0 );
-        padding-block: var( --INTERNAL--kendo-fab-padding-y, 0 );
+        padding-inline: var( --kendo-fab-padding-x, 0 );
+        padding-block: var( --kendo-fab-padding-y, 0 );
         border-width: 0;
         border-style: solid;
         border-color: transparent;
@@ -71,8 +71,8 @@
         $_padding-y: map.get( $size-props, padding-y );
 
         .k-fab-#{$size} {
-            --INTERNAL--kendo-fab-padding-x: var( --kendo-fab-#{$size}-padding-x, #{$_padding-x} );
-            --INTERNAL--kendo-fab-padding-y: var( --kendo-fab-#{$size}-padding-y, #{$_padding-y} );
+            --kendo-fab-padding-x: var( --kendo-fab-#{$size}-padding-x, #{$_padding-x} );
+            --kendo-fab-padding-y: var( --kendo-fab-#{$size}-padding-y, #{$_padding-y} );
         }
     }