@progress/kendo-theme-core 10.2.0-dev.0 → 10.2.0-dev.2

package/scss/components/colorgradient/_layout.scss

@@ -0,0 +1,243 @@
+@use "sass:map";
+@use "sass:math";
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-color-gradient--layout-base() {
+
+    // ColorGradient
+    .k-colorgradient {
+        @include border-radius( $kendo-color-gradient-border-radius );
+        width: $kendo-color-gradient-width;
+        padding-block: $kendo-color-gradient-padding-y;
+        padding-inline: $kendo-color-gradient-padding-x;
+        border-style: solid;
+        border-width: $kendo-color-gradient-border-width;
+        box-sizing: border-box;
+        outline: 0;
+        font-size: $kendo-color-gradient-font-size;
+        font-family: $kendo-color-gradient-font-family;
+        line-height: $kendo-color-gradient-line-height;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: $kendo-color-gradient-gap;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    // Canvas
+    .k-colorgradient-canvas {
+        gap: $kendo-color-gradient-canvas-gap;
+
+        .k-hsv-rectangle {
+            @include border-radius( $kendo-color-gradient-canvas-border-radius );
+            position: relative;
+            flex: 1 1 auto;
+            user-select: none;
+        }
+
+        .k-hsv-gradient {
+            @include border-radius( $kendo-color-gradient-canvas-border-radius );
+            height: $kendo-color-gradient-canvas-rectangle-height;
+        }
+
+        .k-hsv-draghandle {
+            margin-top: $kendo-color-gradient-canvas-draghandle-margin-y;
+            margin-left: $kendo-color-gradient-canvas-draghandle-margin-x;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 1;
+            cursor: pointer;
+        }
+
+        .k-hsv-controls {
+            position: relative;
+            flex-shrink: 0;
+            gap: $kendo-color-gradient-canvas-gap;
+        }
+
+        &.k-vstack {
+            padding-inline: calc( ($kendo-color-gradient-draghandle-width + $kendo-color-gradient-draghandle-outline-width + $kendo-color-gradient-draghandle-border-width) / 2 );
+        }
+    }
+
+    // DragHandle
+    .k-colorgradient .k-draghandle {
+        @include border-radius( $kendo-color-gradient-draghandle-border-radius );
+        width: $kendo-color-gradient-draghandle-width;
+        height: $kendo-color-gradient-draghandle-height;
+        border-width: $kendo-color-gradient-draghandle-border-width;
+        border-style: solid;
+        outline-width: $kendo-color-gradient-draghandle-outline-width;
+        outline-style: solid;
+        box-sizing: border-box;
+    }
+
+    // Sliders
+    .k-colorgradient-slider {
+        &.k-slider-vertical {
+            width: $kendo-color-gradient-slider-track-size;
+            height: $kendo-color-gradient-slider-vertical-size;
+            flex: 0 0 $kendo-color-gradient-slider-track-size;
+        }
+        &.k-slider-vertical .k-slider-track {
+            width: $kendo-color-gradient-slider-track-size;
+            border-radius: $kendo-color-gradient-slider-border-radius;
+            margin-left: - math.div( $kendo-color-gradient-slider-track-size, 2 );
+        }
+
+        &.k-slider-horizontal {
+            width: $kendo-color-gradient-slider-horizontal-size;
+            height: $kendo-color-gradient-slider-track-size;
+            flex: 0 0 $kendo-color-gradient-slider-track-size;
+        }
+        &.k-slider-horizontal .k-slider-track {
+            height: $kendo-color-gradient-slider-track-size;
+            border-radius: $kendo-color-gradient-slider-border-radius;
+            margin-top: - math.div( $kendo-color-gradient-slider-track-size, 2 );
+        }
+
+        &.k-alpha-slider .k-slider-track::before {
+            content: "";
+            width: 100%;
+            height: 100%;
+            display: block;
+            border-radius: 10px;
+            position: relative;
+            z-index: -1;
+        }
+
+        .k-slider-track-wrap {
+            z-index: 1;
+        }
+
+        .k-slider-selection {
+            display: none;
+        }
+
+        .k-draghandle {
+            border-width: $kendo-color-gradient-slider-draghandle-border-width;
+        }
+    }
+
+    // ColorGradient sizes
+    @each $size, $size-props in $kendo-color-gradient-sizes {
+        $_width: map.get( $size-props, width );
+        $_gap: map.get( $size-props, gap );
+        $_vertical-slider-height: map.get( $size-props, vertical-slider-height );
+        $_rectangle-height: map.get( $size-props, rectangle-height );
+        $_input-width: map.get( $size-props, input-width );
+        $_canvas-gap: map.get( $size-props, canvas-gap );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
+
+        .k-colorgradient-#{$size} {
+            width: $_width;
+            gap: $_gap;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
+
+            .k-colorgradient-inputs {
+                .k-numerictextbox {
+                    width: $_input-width;
+                }
+            }
+
+            .k-colorgradient-canvas {
+                gap: $_canvas-gap;
+
+                .k-hsv-gradient {
+                    height: $_rectangle-height;
+                }
+
+                .k-slider-vertical {
+                    height: $_vertical-slider-height;
+                }
+
+                .k-hsv-controls {
+                    gap: $_canvas-gap;
+                }
+            }
+        }
+    }
+
+
+    // Inputs
+    .k-colorgradient-inputs {
+        gap: $kendo-color-gradient-input-gap;
+
+        .k-colorgradient-input-label {
+            text-transform: uppercase;
+        }
+
+        > .k-vstack {
+            gap: $kendo-color-gradient-input-label-gap;
+        }
+
+        .k-numerictextbox {
+            width: $kendo-color-gradient-input-width;
+        }
+
+        .k-input-inner {
+            padding-inline-start: 2px;
+            padding-inline-end: 2px;
+            text-align: center;
+            text-overflow: clip;
+        }
+    }
+
+    // Contrast
+    .k-colorgradient-color-contrast {
+
+        > div {
+            display: flex;
+            flex-flow: row nowrap;
+            gap: $kendo-color-gradient-contrast-spacer;
+        }
+
+        .k-contrast-ratio {
+            margin-bottom: $kendo-color-gradient-contrast-spacer;
+        }
+
+        .k-contrast-ratio-text {
+            font-weight: $kendo-color-gradient-contrast-ratio-font-weight;
+        }
+
+        .k-contrast-validation {
+            display: inline-flex;
+            align-items: center;
+            gap: calc( #{$kendo-color-gradient-contrast-spacer} / 2 );
+
+            .k-icon {
+                vertical-align: middle;
+            }
+
+            // Needed for the double check icons
+            .k-icon + .k-icon,
+            .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon {
+                margin-inline-start: -13px;
+            }
+        }
+    }
+    .k-color-contrast-svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        overflow: visible;
+        pointer-events: none;
+    }
+}
+
+
+@mixin kendo-color-gradient--layout() {
+    @include kendo-color-gradient--layout-base();
+}

package/scss/components/colorgradient/_theme.scss

@@ -0,0 +1,92 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-color-gradient--theme-base() {
+
+    // ColorGradient
+    .k-colorgradient {
+        @include fill(
+            $kendo-color-gradient-text,
+            $kendo-color-gradient-bg,
+            $kendo-color-gradient-border
+        );
+    }
+
+    .k-colorgradient:focus,
+    .k-colorgradient.k-focus {
+        @include fill( $border: $kendo-color-gradient-focus-border );
+        @include focus-indicator( $kendo-color-gradient-focus-shadow );
+    }
+
+    // Canvas
+    .k-colorgradient-canvas .k-hsv-gradient {
+        background: linear-gradient( to bottom, $kendo-gradient-transparent-to-black ), linear-gradient( to right, $kendo-gradient-white-to-transparent );
+    }
+
+    // DragHandle
+    .k-colorgradient .k-draghandle {
+        @include fill(
+            $kendo-color-gradient-draghandle-text,
+            $kendo-color-gradient-draghandle-bg,
+            $kendo-color-gradient-draghandle-border
+        );
+        outline-color: $kendo-color-gradient-draghandle-focus-shadow;
+        @include box-shadow( $kendo-color-gradient-draghandle-shadow );
+
+        &:focus,
+        &.k-focus {
+            @include fill( $bg: transparent, $border: $kendo-color-white );
+            outline-color: $kendo-color-gradient-draghandle-focus-shadow;
+            @include focus-indicator( $kendo-color-gradient-draghandle-shadow );
+        }
+
+        &:hover,
+        &.k-hover,
+        &.k-active,
+        &:active {
+            @include fill( $bg: transparent, $border: $kendo-color-white );
+            outline-color: $kendo-color-gradient-draghandle-hover-shadow;
+        }
+    }
+
+    // Slider
+    .k-colorgradient-slider.k-hue-slider {
+        &.k-slider-horizontal .k-slider-track {
+            background: linear-gradient( to right, $kendo-gradient-rainbow );
+        }
+
+        &.k-slider-vertical .k-slider-track {
+            background: linear-gradient( to top, $kendo-gradient-rainbow );
+        }
+    }
+
+    .k-colorgradient-slider.k-alpha-slider .k-slider-track::before {
+        // TODO: extract variable
+        background: url(#{$kendo-color-gradient-slider-alpha-bgr}) center repeat;
+    }
+
+    // Inputs
+    .k-colorgradient-input-label {
+        @include fill( $color: $kendo-color-gradient-input-label-text );
+    }
+
+
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
+        .k-colorgradient {
+
+            .k-hue-slider.k-slider-horizontal .k-slider-track {
+                background: linear-gradient( to left, $kendo-gradient-rainbow );
+            }
+
+        }
+    }
+
+}
+
+
+@mixin kendo-color-gradient--theme() {
+    @include kendo-color-gradient--theme-base();
+}

package/scss/components/colorgradient/_variables.scss

@@ -0,0 +1,85 @@
+// ColorGradient
+
+$kendo-color-gradient-spacer: null !default;
+
+$kendo-color-gradient-width: null !default;
+$kendo-color-gradient-border-width: null !default;
+$kendo-color-gradient-border-radius: null !default;
+$kendo-color-gradient-padding-y: null !default;
+$kendo-color-gradient-padding-x: null !default;
+$kendo-color-gradient-gap: null !default;
+$kendo-color-gradient-font-family: null !default;
+$kendo-color-gradient-font-size: null !default;
+$kendo-color-gradient-line-height: null !default;
+$kendo-color-gradient-text: null !default;
+$kendo-color-gradient-bg: null !default;
+$kendo-color-gradient-border: null !default;
+
+$kendo-color-gradient-sm-padding-y: null !default;
+$kendo-color-gradient-sm-padding-x: null !default;
+$kendo-color-gradient-md-padding-y: null !default;
+$kendo-color-gradient-md-padding-x: null !default;
+$kendo-color-gradient-lg-padding-y: null !default;
+$kendo-color-gradient-lg-padding-x: null !default;
+
+$kendo-color-gradient-sm-width: null !default;
+$kendo-color-gradient-md-width: null !default;
+$kendo-color-gradient-lg-width: null !default;
+
+$kendo-color-gradient-sm-gap: null !default;
+$kendo-color-gradient-md-gap: null !default;
+$kendo-color-gradient-lg-gap: null !default;
+
+$kendo-color-gradient-focus-border: null !default;
+$kendo-color-gradient-focus-shadow: null !default;
+
+$kendo-color-gradient-canvas-border-radius: null !default;
+$kendo-color-gradient-canvas-gap: null !default;
+$kendo-color-gradient-canvas-rectangle-height: null !default;
+$kendo-color-gradient-sm-canvas-rectangle-height: null !default;
+$kendo-color-gradient-md-canvas-rectangle-height: null !default;
+$kendo-color-gradient-lg-canvas-rectangle-height: null !default;
+
+$kendo-color-gradient-sm-canvas-gap: null !default;
+$kendo-color-gradient-md-canvas-gap: null !default;
+$kendo-color-gradient-lg-canvas-gap: null !default;
+
+$kendo-color-gradient-slider-track-size: null !default;
+$kendo-color-gradient-slider-border-radius: null !default;
+$kendo-color-gradient-slider-draghandle-border-width: null !default;
+
+$kendo-color-gradient-slider-vertical-size: null !default;
+$kendo-color-gradient-slider-horizontal-size: null !default;
+$kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
+$kendo-color-gradient-sm-slider-vertical-size: null !default;
+$kendo-color-gradient-md-slider-vertical-size: null !default;
+$kendo-color-gradient-lg-slider-vertical-size: null !default;
+
+$kendo-color-gradient-draghandle-width: null !default;
+$kendo-color-gradient-draghandle-height: null !default;
+$kendo-color-gradient-draghandle-border-width: null !default;
+$kendo-color-gradient-draghandle-outline-width: null !default;
+$kendo-color-gradient-draghandle-border-radius: null !default;
+$kendo-color-gradient-draghandle-text: null !default;
+$kendo-color-gradient-draghandle-bg: null !default;
+$kendo-color-gradient-draghandle-border: null !default;
+$kendo-color-gradient-draghandle-focus-shadow: null !default;
+$kendo-color-gradient-draghandle-hover-shadow: null !default;
+$kendo-color-gradient-draghandle-shadow: null !default;
+
+$kendo-color-gradient-canvas-draghandle-margin-y: null !default;
+$kendo-color-gradient-canvas-draghandle-margin-x: null !default;
+
+$kendo-color-gradient-input-width: null !default;
+$kendo-color-gradient-input-gap: null !default;
+$kendo-color-gradient-input-label-gap: null !default;
+$kendo-color-gradient-input-label-text: null !default;
+
+$kendo-color-gradient-sm-input-width: null !default;
+$kendo-color-gradient-md-input-width: null !default;
+$kendo-color-gradient-lg-input-width: null !default;
+
+$kendo-color-gradient-contrast-ratio-font-weight: null !default;
+$kendo-color-gradient-contrast-spacer: null !default;
+
+$kendo-color-gradient-sizes: () !default;

package/scss/components/colorpalette/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-palette--styles() {
+    @include import-once( "color-palette" ) {
+        @include core-styles();
+        @include kendo-color-palette--layout();
+        @include kendo-color-palette--theme();
+    }
+}

package/scss/components/colorpalette/_layout.scss

@@ -0,0 +1,76 @@
+@use "sass:map";
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-color-palette--layout-base() {
+
+    // ColorPalette
+    .k-colorpalette {
+        border-width: 0;
+        box-sizing: border-box;
+        outline: 0;
+        font-size: $kendo-color-palette-font-size;
+        font-family: $kendo-color-palette-font-family;
+        line-height: $kendo-color-palette-line-height;
+        display: inline-flex;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-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 {
+        width: $kendo-color-palette-tile-width;
+        height: $kendo-color-palette-tile-height;
+        box-sizing: border-box;
+        overflow: hidden;
+        cursor: pointer;
+
+        &:hover,
+        &.k-hover {
+            position: relative;
+            z-index: 101;
+        }
+
+        &:focus,
+        &.k-focus,
+        &.k-selected,
+        &.k-selected:hover {
+            position: relative;
+            z-index: 100;
+        }
+    }
+
+    // ColorPalette sizes
+    @each $size, $size-props in $kendo-color-palette-sizes {
+        $_tile-width: map.get( $size-props, width );
+        $_tile-height: map.get( $size-props, height );
+
+        .k-colorpalette-#{$size} {
+            .k-colorpalette-tile {
+                width: $_tile-width;
+                height: $_tile-height;
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-color-palette--layout() {
+    @include kendo-color-palette--layout-base();
+}

package/scss/components/colorpalette/_theme.scss

@@ -0,0 +1,31 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-color-palette--theme-base() {
+
+    // Tile
+    .k-colorpalette-tile {
+
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-color-palette-tile-focus-shadow );
+        }
+
+        &:hover,
+        &.k-hover {
+            @include box-shadow( $kendo-color-palette-tile-hover-shadow );
+        }
+
+        &.k-selected,
+        &.k-selected:hover {
+            @include box-shadow( $kendo-color-palette-tile-selected-shadow );
+        }
+
+    }
+
+}
+
+
+@mixin kendo-color-palette--theme() {
+    @include kendo-color-palette--theme-base();
+}

package/scss/components/colorpalette/_variables.scss

@@ -0,0 +1,20 @@
+// ColorPalette
+
+$kendo-color-palette-font-family: null !default;
+$kendo-color-palette-font-size: null !default;
+$kendo-color-palette-line-height: null !default;
+
+$kendo-color-palette-tile-width: null !default;
+$kendo-color-palette-tile-height: null !default;
+$kendo-color-palette-sm-tile-width: null !default;
+$kendo-color-palette-sm-tile-height: null !default;
+$kendo-color-palette-md-tile-width: null !default;
+$kendo-color-palette-md-tile-height: null !default;
+$kendo-color-palette-lg-tile-width: null !default;
+$kendo-color-palette-lg-tile-height: null !default;
+
+$kendo-color-palette-tile-focus-shadow: null !default;
+$kendo-color-palette-tile-hover-shadow: null !default;
+$kendo-color-palette-tile-selected-shadow: null !default;
+
+$kendo-color-palette-sizes: () !default;

package/scss/components/colorpicker/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../coloreditor/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-picker--styles() {
+    @include import-once( "color-picker" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-button--styles();
+        @include kendo-color-editor--styles();
+        @include kendo-popup--styles();
+        @include kendo-icon--styles();
+        @include kendo-color-picker--layout();
+        @include kendo-color-picker--theme();
+    }
+}

package/scss/components/colorpicker/_layout.scss

@@ -0,0 +1,18 @@
+@mixin kendo-color-picker--layout-base() {
+
+    // Color picker
+    .k-color-picker {
+        width: min-content;
+    }
+
+    // Alias
+    .k-colorpicker {
+        @extend .k-color-picker !optional;
+    }
+
+}
+
+
+@mixin kendo-color-picker--layout() {
+    @include kendo-color-picker--layout-base();
+}

package/scss/components/colorpicker/_theme.scss

@@ -0,0 +1,10 @@
+@mixin kendo-color-picker--theme-base() {
+
+    // Color picker
+    .k-color-picker {}
+
+}
+
+@mixin kendo-color-picker--theme() {
+    @include kendo-color-picker--theme-base();
+}

package/scss/components/colorpicker/_variables.scss

@@ -0,0 +1 @@
+// Color picker

package/scss/components/combobox/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-combobox--styles() {
+    @include import-once( "combobox" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-icon--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-combobox--layout();
+        @include kendo-combobox--theme();
+    }
+}

package/scss/components/combobox/_layout.scss

@@ -0,0 +1,11 @@
+@mixin kendo-combobox--layout-base() {
+
+    // Combobox
+    .k-combobox {}
+
+}
+
+
+@mixin kendo-combobox--layout() {
+    @include kendo-combobox--layout-base();
+}

package/scss/components/combobox/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-combobox--theme-base() {
+
+    // Combobox
+    .k-combobox {}
+
+}
+
+
+@mixin kendo-combobox--theme() {
+    @include kendo-combobox--theme-base();
+}

package/scss/components/combobox/_variables.scss

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