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

package/scss/components/chip/_theme.scss

@@ -0,0 +1,154 @@
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../_variables.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-chip--theme-base() {
+
+    // Solid
+    @each $name, $color in $kendo-chip-theme-colors {
+        .k-chip-solid-#{$name} {
+
+            @if ($name == "base") {
+                @include fill(
+                    $kendo-chip-solid-text,
+                    $kendo-chip-solid-bg,
+                    $kendo-chip-solid-border,
+                    $kendo-chip-solid-gradient
+                );
+
+                &:focus,
+                &.k-focus {
+                    @include fill( $bg: $kendo-chip-solid-focus-bg );
+                    @include focus-indicator( $kendo-chip-solid-shadow );
+                }
+
+                &:hover,
+                &.k-hover {
+                    @include fill( $bg: $kendo-chip-solid-hover-bg );
+                }
+
+                &.k-selected {
+                    @include fill( $bg: $kendo-chip-solid-selected-bg );
+                }
+            } @else {
+                @include fill(
+                    if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )),
+                    if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )),
+                    if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )),
+                    $kendo-chip-solid-gradient
+                );
+
+                &:focus,
+                &.k-focus {
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), rgba( $color, .16 )) );
+                }
+
+                &:hover,
+                &.k-hover {
+                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) );
+                }
+
+                &.k-selected {
+                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) );
+                }
+            }
+        }
+    }
+
+
+    // Outline
+    @each $name, $color in $kendo-chip-theme-colors {
+        .k-chip-outline-#{$name} {
+            @if ($name == "base") {
+                @include fill(
+                    $kendo-chip-outline-text,
+                    transparent,
+                    $kendo-chip-outline-border
+                );
+
+                &:focus,
+                &.k-focus {
+                    @include focus-indicator( $kendo-chip-outline-shadow );
+                }
+
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $color: $kendo-chip-outline-hover-text,
+                        $bg: $kendo-chip-outline-hover-bg
+                    );
+                }
+
+                &.k-selected {
+                    @include fill(
+                        $color: $kendo-chip-outline-selected-text,
+                        $bg: $kendo-chip-outline-selected-bg
+                    );
+                }
+            } @else if ($name == "warning") {
+                @include fill(
+                    if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
+                    if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
+                    if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
+                );
+
+                &:focus,
+                &.k-focus {
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
+                }
+
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
+                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
+                    );
+                }
+
+                &.k-selected {
+                    @include fill(
+                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
+                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
+                    );
+                }
+            } @else {
+                @include fill(
+                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )),
+                    if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
+                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% ))
+                );
+
+                &:focus,
+                &.k-focus {
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
+                }
+
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
+                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )),
+                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% ))
+                    );
+                }
+
+                &.k-selected {
+                    @include fill(
+                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
+                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )),
+                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% ))
+                    );
+                }
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-chip--theme() {
+    @include kendo-chip--theme-base();
+}

package/scss/components/chip/_variables.scss

@@ -0,0 +1,63 @@
+// Chip
+
+$kendo-chip-border-width: null !default;
+$kendo-chip-spacing: null !default;
+
+$kendo-chip-padding-x: null !default;
+$kendo-chip-sm-padding-x: null !default;
+$kendo-chip-md-padding-x: null !default;
+$kendo-chip-lg-padding-x: null !default;
+
+$kendo-chip-padding-y: null !default;
+$kendo-chip-sm-padding-y: null !default;
+$kendo-chip-md-padding-y: null !default;
+$kendo-chip-lg-padding-y: null !default;
+
+$kendo-chip-font-size: null !default;
+$kendo-chip-sm-font-size: null !default;
+$kendo-chip-md-font-size: null !default;
+$kendo-chip-lg-font-size: null !default;
+
+$kendo-chip-line-height: null !default;
+$kendo-chip-sm-line-height: null !default;
+$kendo-chip-md-line-height: null !default;
+$kendo-chip-lg-line-height: null !default;
+
+$kendo-chip-calc-size: null !default;
+$kendo-chip-sm-calc-size: null !default;
+
+$kendo-chip-sizes: null !default;
+
+$kendo-chip-base-bg: null !default;
+
+$kendo-chip-theme-colors: null !default;
+
+$kendo-chip-solid-bg: null !default;
+$kendo-chip-solid-text: null !default;
+$kendo-chip-solid-border: null !default;
+$kendo-chip-solid-shadow: null !default;
+$kendo-chip-solid-gradient: null !default;
+
+$kendo-chip-solid-focus-bg: null !default;
+$kendo-chip-solid-focus-text: null !default;
+
+$kendo-chip-solid-hover-bg: null !default;
+$kendo-chip-solid-hover-text: null !default;
+
+$kendo-chip-solid-selected-bg: null !default;
+$kendo-chip-solid-selected-text: null !default;
+
+$kendo-chip-outline-bg: null !default;
+$kendo-chip-outline-text: null !default;
+$kendo-chip-outline-border: null !default;
+$kendo-chip-outline-shadow: null !default;
+
+$kendo-chip-outline-hover-bg: null !default;
+$kendo-chip-outline-hover-text: null !default;
+
+$kendo-chip-outline-selected-bg: null !default;
+$kendo-chip-outline-selected-text: null !default;
+
+// Chip List
+
+$kendo-chip-list-sizes: null !default;

package/scss/components/color-preview/_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-preview--styles() {
+    @include import-once( "color-preview" ) {
+        @include core-styles();
+        @include kendo-color-preview--layout();
+        @include kendo-color-preview--theme();
+    }
+}

package/scss/components/color-preview/_layout.scss

@@ -0,0 +1,84 @@
+@use "./_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
+@mixin kendo-color-preview--layout-base() {
+
+    // Color Preview
+    .k-color-preview {
+        width: 100%;
+        height: 100%;
+        border-width: $kendo-color-preview-border-width;
+        border-radius: $kendo-color-preview-border-radius;
+        box-sizing: border-box;
+        border-style: solid;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        position: relative;
+        overflow: hidden;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Current Color
+    .k-coloreditor-current-color {
+        cursor: pointer;
+    }
+
+
+    // Icon color preview
+    .k-icon-color-preview {
+        border-width: 0;
+        border-radius: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: center;
+        gap: 2px;
+
+        .k-color-preview-mask {
+            width: calc( #{$kendo-icon-size} - 2px );
+            height: 2px;
+        }
+    }
+
+
+    // Color Preview Mask
+    .k-color-preview-mask {
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+    .k-color-preview-mask::before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        background: $kendo-color-preview-transparent-color-image;
+        background-size: contain;
+        background-position: 0 0;
+    }
+
+
+    // No Color
+    .k-no-color .k-color-preview-mask::before {
+        content: "";
+        background-color: $kendo-color-preview-no-color-bg;
+        background-image: $kendo-color-preview-no-color-image;
+        background-size: 100% 100%;
+        background-position: 0 0;
+    }
+
+}
+
+
+@mixin kendo-color-preview--layout() {
+    @include kendo-color-preview--layout-base();
+}

package/scss/components/color-preview/_theme.scss

@@ -0,0 +1,25 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-color-preview--theme-base() {
+
+    // Color Preview
+    .k-color-preview {
+        @include fill(
+            $kendo-color-preview-text,
+            $kendo-color-preview-bg,
+            $kendo-color-preview-border
+        );
+
+        &:hover,
+        &.k-hover {
+            @include fill( $border: $kendo-color-preview-hover-border );
+        }
+    }
+
+}
+
+
+@mixin kendo-color-preview--theme() {
+    @include kendo-color-preview--theme-base();
+}

package/scss/components/color-preview/_variables.scss

@@ -0,0 +1,14 @@
+// Color Preview
+$kendo-color-preview-border-radius: k-border-radius(md)!default;
+$kendo-color-preview-border-width: null !default;
+$kendo-color-preview-bg: null !default;
+$kendo-color-preview-text: null !default;
+$kendo-color-preview-border: null !default;
+$kendo-color-preview-hover-border: null !default;
+
+$kendo-color-preview-no-color-bg: null !default;
+$kendo-color-preview-no-color-text: null !default;
+$kendo-color-preview-no-color-border: null !default;
+
+$kendo-color-preview-no-color-image: null !default;
+$kendo-color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;

package/scss/components/coloreditor/_index.scss

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

package/scss/components/coloreditor/_layout.scss

@@ -0,0 +1,122 @@
+@use "sass:map";
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+@use "../colorpalette/_variables.scss" as *;
+
+@mixin kendo-color-editor--layout-base() {
+
+    // ColorEditor/FlatColorPicker
+    .k-coloreditor {
+        @include border-radius( $kendo-color-editor-border-radius );
+        min-width: $kendo-color-editor-min-width;
+        border-width: $kendo-color-editor-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-size: $kendo-color-editor-font-size;
+        font-family: $kendo-color-editor-font-family;
+        line-height: $kendo-color-editor-line-height;
+        display: inline-flex;
+        flex-direction: column;
+        align-items: stretch;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    // Header
+    .k-coloreditor-header {
+        padding: $kendo-color-editor-header-padding-y $kendo-color-editor-header-padding-x 0;
+    }
+
+    .k-coloreditor-header-actions {
+        gap: $kendo-color-editor-header-actions-gap;
+    }
+
+    .k-coloreditor-preview {
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+        justify-content: center;
+        gap: $kendo-color-editor-preview-gap;
+        position: relative;
+        z-index: 1;
+    }
+
+    .k-coloreditor-preview .k-color-preview {
+        width: $kendo-color-editor-color-preview-width;
+        height: $kendo-color-editor-color-preview-height;
+    }
+
+    // ColorPreview sizes
+    @each $size, $size-props in $kendo-color-editor-sizes {
+        $_min-width: map.get( $size-props, min-width );
+        $_header-padding-x: map.get( $size-props, header-padding-x );
+        $_header-padding-y: map.get( $size-props, header-padding-y );
+        $_views-padding-x: map.get( $size-props, views-padding-x );
+        $_views-padding-y: map.get( $size-props, views-padding-y );
+        $_preview-gap: map.get( $size-props, preview-gap );
+        $_preview-width: map.get( $size-props, preview-width );
+        $_preview-height: map.get( $size-props, preview-height );
+
+        .k-coloreditor-#{$size} {
+            min-width: $_min-width;
+
+            .k-coloreditor-header {
+                padding: $_header-padding-y $_header-padding-x 0;
+            }
+
+            .k-coloreditor-views {
+                padding-block: $_views-padding-y;
+                padding-inline: $_views-padding-x;
+            }
+
+            .k-coloreditor-preview {
+                gap: $_preview-gap;
+
+                .k-color-preview {
+                    width: $_preview-width;
+                    height: $_preview-height;
+                }
+            }
+        }
+
+    }
+
+    // Views
+    .k-coloreditor-views {
+        min-width: calc( var(--kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var(--kendo-color-preview-columns, 10) );
+        padding-block: $kendo-color-editor-views-padding-y;
+        padding-inline: $kendo-color-editor-views-padding-x;
+        gap: $kendo-color-editor-views-gap;
+
+        .k-colorgradient {
+            padding: 0;
+            width: auto;
+            border-width: 0;
+        }
+        .k-colorgradient:focus,
+        .k-colorgradient.k-focus {
+            outline: $kendo-color-editor-color-gradient-focus-outline dotted;
+            outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset;
+            border-radius: 0;
+        }
+
+        .k-colorpalette {
+            align-self: center;
+        }
+    }
+
+    // Footer
+    .k-coloreditor-footer.k-actions {
+        margin: 0;
+    }
+}
+
+
+@mixin kendo-color-editor--layout() {
+    @include kendo-color-editor--layout-base();
+}

package/scss/components/coloreditor/_theme.scss

@@ -0,0 +1,32 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-color-editor--theme-base() {
+
+    // ColorEditor/FlatColorPicker
+    .k-coloreditor {
+        @include fill(
+            $kendo-color-editor-text,
+            $kendo-color-editor-bg,
+            $kendo-color-editor-border
+        );
+    }
+
+    .k-coloreditor:focus,
+    .k-coloreditor.k-focus {
+        @include fill( $border: $kendo-color-editor-focus-border );
+        @include focus-indicator( $kendo-color-editor-focus-shadow );
+    }
+
+    .k-coloreditor .k-colorgradient:focus,
+    .k-coloreditor .k-colorgradient.k-focus {
+        box-shadow: none;
+        outline-color: $kendo-color-editor-color-gradient-focus-outline-color;
+    }
+
+}
+
+
+@mixin kendo-color-editor--theme() {
+    @include kendo-color-editor--theme-base();
+}

package/scss/components/coloreditor/_variables.scss

@@ -0,0 +1,63 @@
+// ColorEditor/FlatColorPicker
+
+$kendo-color-editor-spacer: null !default;
+
+$kendo-color-editor-min-width: null !default;
+$kendo-color-editor-sm-min-width: null !default;
+$kendo-color-editor-md-min-width: null !default;
+$kendo-color-editor-lg-min-width: null !default;
+$kendo-color-editor-border-width: null !default;
+$kendo-color-editor-border-radius: null !default;
+$kendo-color-editor-font-family: null !default;
+$kendo-color-editor-font-size: null !default;
+$kendo-color-editor-line-height: null !default;
+$kendo-color-editor-text: null !default;
+$kendo-color-editor-bg: null !default;
+$kendo-color-editor-border: null !default;
+
+$kendo-color-editor-focus-border: null !default;
+// TODO: does this ever get focused? Isn't it always in a popup?
+$kendo-color-editor-focus-shadow: null !default; // 1px 1px 7px 1px rgba(0, 0, 0, .3)
+
+$kendo-color-editor-header-padding-y: null !default;
+$kendo-color-editor-header-padding-x: null !default;
+$kendo-color-editor-header-actions-gap: null !default;
+$kendo-color-editor-sm-header-padding-y: null !default;
+$kendo-color-editor-sm-header-padding-x: null !default;
+$kendo-color-editor-md-header-padding-y: null !default;
+$kendo-color-editor-md-header-padding-x: null !default;
+$kendo-color-editor-lg-header-padding-y: null !default;
+$kendo-color-editor-lg-header-padding-x: null !default;
+
+$kendo-color-editor-color-preview-width: null !default;
+$kendo-color-editor-color-preview-height: null !default;
+$kendo-color-editor-preview-gap: null !default;
+$kendo-color-editor-sm-preview-gap: null !default;
+$kendo-color-editor-md-preview-gap: null !default;
+$kendo-color-editor-lg-preview-gap: null !default;
+
+$kendo-color-editor-sm-color-preview-width: null !default;
+$kendo-color-editor-sm-color-preview-height: null !default;
+$kendo-color-editor-md-color-preview-width: null !default;
+$kendo-color-editor-md-color-preview-height: null !default;
+$kendo-color-editor-lg-color-preview-width: null !default;
+$kendo-color-editor-lg-color-preview-height: null !default;
+
+$kendo-color-editor-views-padding-y: null !default;
+$kendo-color-editor-views-padding-x: null !default;
+$kendo-color-editor-views-gap: null !default;
+$kendo-color-editor-sm-views-padding-y: null !default;
+$kendo-color-editor-sm-views-padding-x: null !default;
+$kendo-color-editor-sm-views-gap: null !default;
+$kendo-color-editor-md-views-padding-y: null !default;
+$kendo-color-editor-md-views-padding-x: null !default;
+$kendo-color-editor-md-views-gap: null !default;
+$kendo-color-editor-lg-views-padding-y: null !default;
+$kendo-color-editor-lg-views-padding-x: null !default;
+$kendo-color-editor-lg-views-gap: null !default;
+
+$kendo-color-editor-color-gradient-focus-outline-color: null !default;
+$kendo-color-editor-color-gradient-focus-outline: null !default;
+$kendo-color-editor-color-gradient-focus-outline-offset: null !default;
+
+$kendo-color-editor-sizes: () !default;

package/scss/components/colorgradient/_index.scss

@@ -0,0 +1,30 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../slider/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-gradient--styles() {
+    @include import-once( "color-gradient" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-button--styles();
+        @include kendo-slider--styles();
+        @include kendo-textbox--styles();
+        @include kendo-numeric-textbox--styles();
+        @include kendo-color-gradient--layout();
+        @include kendo-color-gradient--theme();
+        @include kendo-utils--flex-grid--flex();
+        @include kendo-utils--flex-grid--align-self();
+        @include kendo-utils--typography--text-color();
+    }
+}