@progress/kendo-theme-fluent 5.7.0

package/scss/colorgradient/index.scss

@@ -0,0 +1,29 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "colorgradient",
+    dependencies: (
+        "icon",
+        "button",
+        "slider",
+        "textbox",
+        "numerictextbox"
+    )
+);
+
+
+// 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( "colorgradient" ) {
+        @include kendo-colorgradient--layout();
+        @include kendo-colorgradient--theme();
+    }
+}

package/scss/colorpalette/_layout.scss

@@ -0,0 +1,60 @@
+@use "../core" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-colorpalette--layout() {
+
+    // ColorPalette
+    .k-colorpalette {
+        border-width: 0;
+        box-sizing: border-box;
+        outline: 0;
+        font-size: var( --kendo-colorpalette-font-size, #{$kendo-colorpalette-font-size} );
+        font-family: var( --kendo-colorpalette-font-family, #{$kendo-colorpalette-font-family} );
+        line-height: var( --kendo-colorpalette-line-height, #{$kendo-colorpalette-line-height} );
+        display: inline-flex;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    // Table
+    .k-colorpalette-table {
+        width: 100%;
+        height: 100%;
+        border-collapse: collapse;
+        position: relative;
+    }
+
+    // Tile
+    .k-colorpalette-tile {
+        border-width: var( --kendo-colorpalette-tile-border-width, #{$kendo-colorpalette-tile-border-width} );
+        border-style: var( --kendo-colorpalette-tile-border-style, #{$kendo-colorpalette-tile-border-style} );
+        width: var( --kendo-colorpalette-tile-width, #{$kendo-colorpalette-tile-width} );
+        height: var( --kendo-colorpalette-tile-height, #{$kendo-colorpalette-tile-height} );
+        box-sizing: border-box;
+        overflow: hidden;
+        cursor: pointer;
+        -ms-high-contrast-adjust: none;
+
+        &:hover,
+        &.k-hover {
+            position: relative;
+            z-index: 101;
+        }
+
+        &:focus,
+        &.k-focus,
+        &.k-selected,
+        &.k-selected:hover {
+            position: relative;
+            z-index: 100;
+        }
+    }
+
+}

package/scss/colorpalette/_theme.scss

@@ -0,0 +1,53 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-colorpalette--theme() {
+
+    // Tile
+    .k-colorpalette-tile {
+        @include fill(
+            $border: var( --kendo-colorpalette-tile-border, #{$kendo-colorpalette-tile-border} )
+        );
+
+        // Hover
+        &:hover,
+        &.k-hover {
+            @include box-shadow(
+                var( --kendo-colorpalette-tile-hover-shadow, #{$kendo-colorpalette-tile-hover-shadow} )
+            );
+            @include fill(
+                $border: var( --kendo-colorpalette-tile-hover-border, #{$kendo-colorpalette-tile-hover-border} )
+            );
+        }
+
+        // Focus
+        &:focus,
+        &.k-focus {
+            @include box-shadow(
+                var( --kendo-colorpalette-tile-focus-shadow, #{$kendo-colorpalette-tile-focus-shadow} )
+            );
+            @include fill(
+                $border: var( --kendo-colorpalette-tile-focus-border, #{$kendo-colorpalette-tile-focus-border} )
+            );
+        }
+
+        // Selected
+        &.k-selected {
+            @include box-shadow(
+                var( --kendo-colorpalette-tile-selected-shadow, #{$kendo-colorpalette-tile-selected-shadow} )
+            );
+            @include fill(
+                $border: var( --kendo-colorpalette-tile-selected-border, #{$kendo-colorpalette-tile-selected-border} )
+            );
+        }
+
+        // Selected hover/focus
+        &.k-selected:hover,
+        &.k-selected:focus {
+            @include fill(
+                $border: var( --kendo-colorpalette-tile-selected-hover-border, #{$kendo-colorpalette-tile-selected-hover-border} )
+            );
+        }
+    }
+
+}

package/scss/colorpalette/_variables.scss

@@ -0,0 +1,48 @@
+@use "../core" as *;
+
+/// Font family of the color palette.
+/// @group colorpalette
+$kendo-colorpalette-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the color palette.
+/// @group colorpalette
+$kendo-colorpalette-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the color palette.
+/// @group colorpalette
+$kendo-colorpalette-line-height: 0 !default;
+
+/// Border width of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-border-width: map-get( $kendo-spacing, hair ) !default;
+/// Border style of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-border-style: solid !default;
+/// Border color of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-border: transparent !default;
+/// Width of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-width: map-get( $kendo-spacing, 6 ) !default;
+/// Height of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-height: $kendo-colorpalette-tile-width !default;
+/// Focus border color of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-focus-border: get-theme-color-var( neutral-130 ) !default;
+/// Focus shadow of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-focus-shadow: inset 0 0 0 2px $white !default;
+/// Hover border color of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-hover-border: get-theme-color-var( neutral-20 ) !default;
+/// Hover shadow of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-hover-shadow: inset 0 0 0 2px $kendo-colorpalette-tile-hover-border, inset 0 0 0 4px $white !default;
+/// Selected border color of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-selected-border: $kendo-colorpalette-tile-hover-border !default;
+/// Selected shadow of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-selected-shadow: $kendo-colorpalette-tile-hover-shadow !default;
+/// Selected hover border color of the color palette tile.
+/// @group colorpalette
+$kendo-colorpalette-tile-selected-hover-border: $kendo-colorpalette-tile-focus-border !default;

package/scss/colorpalette/index.scss

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

package/scss/colorpicker/_layout.scss

@@ -0,0 +1,15 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-colorpicker--layout() {
+
+    // Color picker
+    .k-color-picker {
+        width: min-content;
+    }
+
+    // Alias
+    .k-colorpicker {
+        @extend .k-color-picker;
+    }
+
+}

package/scss/colorpicker/_theme.scss

@@ -0,0 +1,5 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-colorpicker--theme() {
+    .k-colorpicker { }
+}

package/scss/colorpicker/_variables.scss

@@ -0,0 +1 @@
+@use "../core/color-system" as *;

package/scss/colorpicker/index.scss

@@ -0,0 +1,29 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "colorpicker",
+    dependencies: (
+        "input",
+        "button",
+        "popup",
+        "icon",
+        "coloreditor"
+    )
+);
+
+
+// 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( "colorpicker" ) {
+        @include kendo-colorpicker--layout();
+        @include kendo-colorpicker--theme();
+    }
+}

package/scss/combobox/_layout.scss

@@ -0,0 +1,4 @@
+@mixin kendo-combobox--layout() {
+
+    .k-combobox {}
+}

package/scss/combobox/_theme.scss

@@ -0,0 +1,4 @@
+@mixin kendo-combobox--theme() {
+
+    .k-combobox {}
+}

package/scss/combobox/_variables.scss

@@ -0,0 +1 @@
+// Combobox

package/scss/combobox/index.scss

@@ -0,0 +1,28 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "combobox",
+    dependencies: (
+        "input",
+        "floating-label",
+        "icon",
+        "popup",
+        "list"
+    )
+);
+
+// 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( "combobox" ) {
+        @include kendo-combobox--layout();
+        @include kendo-combobox--theme();
+    }
+}

package/scss/core/_index.scss

@@ -0,0 +1,33 @@
+// Functions
+@forward "functions";
+
+// Variables
+@forward "variables";
+
+// Mixins
+@forward "mixins";
+
+// Color System
+@forward "color-system";
+
+// Helpers
+@use "helpers";
+
+// Common styles
+@use "layout";
+@use "theme";
+
+// Module System
+@use "module-system/" as module;
+
+$config: null !default;
+
+@mixin configure($config: null) {
+    @if $config {
+        $_components: map-get( $config, "components" );
+
+        @if ($_components) {
+            module.$components: $_components;
+        }
+    }
+}

package/scss/core/_layout.scss

@@ -0,0 +1,13 @@
+@use "mixins" as *;
+@use "_variables.scss" as *;
+
+.k-body {
+    @include typography(
+        var( --kendo-font-size, inherit ),
+        var( --kendo-font-family, inherit ),
+        var( --kendo-line-height, normal ),
+        var( --kendo-font-weight, normal ),
+        var( --kendo-letter-spacing, normal ),
+    );
+    margin: 0;
+}

package/scss/core/_theme.scss

@@ -0,0 +1,9 @@
+@use "mixins" as *;
+@use "color-system" as *;
+
+.k-body {
+    @include fill(
+        var( --kendo-body-text, initial ),
+        var( --kendo-body-bg, initial )
+    );
+}

package/scss/core/_variables.scss

@@ -0,0 +1,132 @@
+@use "sass:meta";
+
+// Options
+$enable-shadows: true !default;
+$enable-rounded: true !default;
+$enable-gradients: true !default;
+$enable-transitions: true !default;
+$enable-flex-classes: true !default;
+$enable-grid-classes: true !default;
+
+$use-calc-badge-size: true !default;
+$use-input-button-width: true !default;
+$use-input-spinner-width: true !default;
+$use-input-spinner-icon-offset: false !default;
+$use-picker-select-width: true !default;
+
+$kendo-spacing: (
+    0: 0,
+    1: .25rem,
+    2: .5rem,
+    3: .75rem,
+    4: 1rem,
+    5: 1.25rem,
+    6: 1.5rem,
+    7: 1.75rem,
+    8: 2rem,
+    9: 2.25rem,
+    10: 2.5rem,
+    11: 2.75rem,
+    12: 3rem,
+    13: 3.25rem,
+    14: 3.5rem,
+    15: 3.75rem,
+    16: 4rem,
+    17: 4.25rem,
+    18: 4.5rem,
+    19: 4.75rem,
+    20: 5rem,
+    21: 5.25rem,
+    22: 5.5rem,
+    23: 5.75rem,
+    24: 6rem,
+    xs: .25rem,
+    sm: .5rem,
+    md: .75rem,
+    lg: 1rem,
+    xl: 1.5rem,
+    thin: .125rem,
+    hair: .0625rem
+) !default;
+
+
+/// Base font size across all components.
+$kendo-font-size: 14px !default;
+$kendo-font-size-xs: 10px !default;
+$kendo-font-size-sm: 12px !default;
+$kendo-font-size-md: $kendo-font-size !default;
+$kendo-font-size-lg: 16px !default;
+$kendo-font-size-xl: 20px !default;
+
+
+/// Font family across all components.
+$kendo-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !default;
+
+
+/// Line height used along with $font-size.
+$kendo-line-height: calc( 20 / 14 ) !default;
+$kendo-line-height-xs: 1 !default;
+$kendo-line-height-sm: 1.25 !default;
+$kendo-line-height-md: $kendo-line-height !default;
+$kendo-line-height-lg: 1.5 !default;
+$kendo-line-height-em: calc( #{$kendo-line-height} * 1em) !default;
+
+
+/// Font weight.
+$kendo-font-weight: 400 !default;
+$kendo-font-weight-light: 300 !default;
+$kendo-font-weight-bold: 600 !default;
+
+$kendo-letter-spacing: normal !default;
+
+$default-scrollbar-width: 17px !default;
+
+/// Border radius for all components.
+$kendo-border-radius: map-get( $kendo-spacing, thin ) !default;
+$kendo-border-radius-sm: calc( #{$kendo-border-radius} / 2 ) !default;
+$kendo-border-radius-md: $kendo-border-radius !default;
+$kendo-border-radius-lg: calc( #{$kendo-border-radius} * 2 ) !default;
+
+// Metrics
+$kendo-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-padding-y: map-get( $kendo-spacing, 1 ) !default;
+$kendo-padding-x-sm: calc( #{$kendo-padding-x} / 2) !default;
+$kendo-padding-y-sm: calc( #{$kendo-padding-y} / 2) !default;
+$kendo-padding-x-lg: calc( #{$kendo-padding-x} * 1.5) !default;
+$kendo-padding-y-lg: calc( #{$kendo-padding-y} * 1.5) !default;
+
+// Default transition
+$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default;
+
+// Loading
+$kendo-loading-opacity: .3 !default;
+$kendo-zindex-loading: 100 !default;
+
+:root {
+    --kendo-font-family: #{meta.inspect($kendo-font-family)};
+
+    --kendo-font-size: #{$kendo-font-size};
+    --kendo-font-size-xs: #{$kendo-font-size-xs};
+    --kendo-font-size-sm: #{$kendo-font-size-sm};
+    --kendo-font-size-md: #{$kendo-font-size-md};
+    --kendo-font-size-lg: #{$kendo-font-size-lg};
+    --kendo-font-size-xl: #{$kendo-font-size-xl};
+
+    --kendo-line-height: #{$kendo-line-height};
+    --kendo-line-height-xs: #{$kendo-line-height-xs};
+    --kendo-line-height-sm: #{$kendo-line-height-sm};
+    --kendo-line-height-md: #{$kendo-line-height-md};
+    --kendo-line-height-lg: #{$kendo-line-height-lg};
+
+    --kendo-font-weight: #{$kendo-font-weight};
+    --kendo-font-weight-light: #{$kendo-font-weight-light};
+    --kendo-font-weight-bold: #{$kendo-font-weight-bold};
+
+    --kendo-letter-spacing: #{$kendo-letter-spacing};
+
+    --kendo-border-radius-sm: #{$kendo-border-radius-sm};
+    --kendo-border-radius-md: #{$kendo-border-radius-md};
+    --kendo-border-radius-lg: #{$kendo-border-radius-lg};
+
+    --kendo-transition: #{$kendo-transition};
+}

package/scss/core/color-system/_index.scss

@@ -0,0 +1,3 @@
+@forward "utils";
+@forward "palettes";
+@forward "variables";