@progress/kendo-theme-core 7.1.0-dev.7 → 7.1.0-dev.9

package/scss/functions/_color-manipulation.import.scss

@@ -132,3 +132,26 @@ $kendo-color-level-step: 8% !default;
 @function k-true-mix( $color1, $color2, $weight: 50% ) {
     @return k-color-mix( rgba( $color1, 1 ), rgba( $color2, 1 ), $weight );
 }
+
+/// Generates all color variations of a given main color
+/// @param {String} $name - The name of the main color
+/// @param {Color} $level - The color value to be assigned to the main color
+/// @return {Map} - A map with the generated keys and values
+///
+/// @group color-system
+@function k-generate-colors( $name, $color ) {
+    $_variations: (
+        #{$name}-subtle: k-try-tint( $color, 80% ),
+        #{$name}-subtle-hover: k-try-tint( $color, 65% ),
+        #{$name}-subtle-active: k-try-tint( $color, 50% ),
+        #{$name}: $color,
+        #{$name}-hover: k-try-shade( $color, 0.5 ),
+        #{$name}-active: k-try-shade( $color, 1.5 ),
+        #{$name}-emphasis: k-try-tint( $color, 4.5 ),
+        #{$name}-on-subtle: k-try-shade( $color, 8 ),
+        on-#{$name}: k-contrast-legacy( $color ),
+        #{$name}-on-surface: $color,
+    );
+    
+    @return $_variations;
+}

package/scss/styles/_colors.scss

@@ -0,0 +1,5 @@
+@mixin kendo-core--styles--colors() {
+    @if ($kendo-enable-color-system) {
+        @include color-system--styles();
+    }
+}

package/scss/styles/index.import.scss

@@ -5,9 +5,10 @@
 @import "./_base.scss";
 @import "./_loading.scss";
 @import "./_selection.scss";
-
+@import "./_colors.scss";
 
 @mixin kendo-core--styles() {
+    @include kendo-core--styles--colors();
     @include kendo-core--styles--accessibility();
     @include kendo-core--styles--asp-fallback();
     @include kendo-core--styles--layout();

package/scss/color-system/_variables.scss

@@ -1,198 +0,0 @@
-// Color constants
-
-/// The color white.
-/// Note: you cannot change this value.
-/// @type Color
-/// @group color-system
-$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
-
-/// The color black.
-/// Note: you cannot change this value.
-/// @type Color
-/// @group color-system
-$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
-
-/// The color transparent.
-/// Note: you cannot change this value.
-/// @type Color
-/// @group color-system
-$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
-
-/// A gradient that goes from transparent to black.
-/// Note: you cannot change this value.
-/// @type Gradient
-/// @group color-system
-$kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
-
-/// A gradient that goes from transparent to white.
-/// Note: you cannot change this value.
-/// @type Gradient
-/// @group color-system
-$kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
-
-/// A gradient that goes from black to transparent.
-/// Note: you cannot change this value.
-/// @type Gradient
-/// @group color-system
-$kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
-
-/// A gradient that goes from white to transparent.
-/// Note: you cannot change this value.
-/// @type Gradient
-/// @group color-system
-$kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
-
-/// A gradient that cycles through the colors of the rainbow.
-/// Note: you cannot change this value.
-/// @type Gradient
-/// @group color-system
-$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
-
-
-// Root styles
-$kendo-body-bg: $kendo-color-white !default;
-$kendo-body-text: k-get-theme-color-var( neutral-160 ) !default;
-
-// Component styles
-$kendo-component-bg: $kendo-body-bg !default;
-$kendo-component-text: $kendo-body-text !default;
-$kendo-component-border: k-get-theme-color-var( neutral-30 ) !default;
-
-// States styles
-$kendo-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
-$kendo-hover-text: k-get-theme-color-var( neutral-190 ) !default;
-$kendo-hover-border: k-get-theme-color-var( neutral-20 ) !default;
-
-$kendo-selected-bg: k-get-theme-color-var( neutral-30 ) !default;
-$kendo-selected-text: k-get-theme-color-var( neutral-160 ) !default;
-$kendo-selected-border: k-get-theme-color-var( neutral-130 ) !default;
-
-$kendo-selected-hover-bg: k-get-theme-color-var( neutral-40 ) !default;
-$kendo-selected-hover-text: k-get-theme-color-var( neutral-190 ) !default;
-$kendo-selected-hover-border: k-get-theme-color-var( neutral-130 ) !default;
-
-$kendo-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
-
-$kendo-subtle-text: k-get-theme-color-var( neutral-130 ) !default;
-
-// Link
-$kendo-link-text: k-get-theme-color-var( primary-100 ) !default;
-$kendo-link-hover-text: k-get-theme-color-var( primary-120 ) !default;
-
-// Validator
-$kendo-invalid-bg: initial !default;
-$kendo-invalid-text: k-get-theme-color-var( error-190 ) !default;
-$kendo-invalid-border: k-get-theme-color-var( error-190 ) !default;
-$kendo-invalid-shadow: null !default;
-
-$kendo-valid-bg: initial !default;
-$kendo-valid-text: k-get-theme-color-var( success-190 ) !default;
-$kendo-valid-border: k-get-theme-color-var( success-190 ) !default;
-$kendo-valid-shadow: null !default;
-
-// Disabled Styling
-$kendo-disabled-bg: k-get-theme-color-var( neutral-20 ) !default;
-$kendo-disabled-text: k-get-theme-color-var( neutral-90 ) !default;
-$kendo-disabled-border: transparent !default;
-
-// Loading
-$kendo-loading-bg: $kendo-component-bg !default;
-$kendo-loading-text: currentColor !default;
-
-
-// Theme colors
-$kendo-theme-colors: (
-    primary: (
-        text: k-get-theme-color-var( primary-130 ),
-        bg: k-get-theme-color-var( primary-20 ),
-        border: k-get-theme-color-var( primary-20 )
-    ),
-    info: (
-        text: k-get-theme-color-var( info-190 ),
-        bg: k-get-theme-color-var( info-20 ),
-        border: k-get-theme-color-var( info-20 )
-    ),
-    success: (
-        text: k-get-theme-color-var( success-190 ),
-        bg: k-get-theme-color-var( success-20 ),
-        border: k-get-theme-color-var( success-20 )
-    ),
-    warning: (
-        text: k-get-theme-color-var( neutral-160 ),
-        bg: k-get-theme-color-var( warning-20 ),
-        border: k-get-theme-color-var( warning-20 )
-    ),
-    error: (
-        text: k-get-theme-color-var( error-190 ),
-        bg: k-get-theme-color-var( error-20 ),
-        border: k-get-theme-color-var( error-20 )
-    )
-) !default;
-
-
-@mixin color-system-styles() {
-    :root {
-        @include k-css-vars( $kendo-palettes );
-        @include k-css-vars( $kendo-theme-colors );
-
-        --kendo-body-bg: #{$kendo-body-bg};
-        --kendo-body-text: #{$kendo-body-text};
-
-        --kendo-component-bg: #{$kendo-component-bg};
-        --kendo-component-text: #{$kendo-component-text};
-        --kendo-component-border: #{$kendo-component-border};
-
-        --kendo-link-text: #{$kendo-link-text};
-        --kendo-link-hover-text: #{$kendo-link-hover-text};
-
-        --kendo-disabled-bg: #{$kendo-disabled-bg};
-        --kendo-disabled-text: #{$kendo-disabled-text};
-        --kendo-disabled-border: #{$kendo-disabled-border};
-
-        --kendo-hover-bg: #{$kendo-hover-bg};
-        --kendo-hover-text: #{$kendo-hover-text};
-        --kendo-hover-border: #{$kendo-hover-border};
-
-        --kendo-selected-bg: #{$kendo-selected-bg};
-        --kendo-selected-text: #{$kendo-selected-text};
-        --kendo-selected-border: #{$kendo-selected-border};
-
-        --kendo-selected-hover-bg: #{$kendo-selected-hover-bg};
-        --kendo-selected-hover-text: #{$kendo-selected-hover-text};
-        --kendo-selected-hover-border: #{$kendo-selected-hover-border};
-
-        --kendo-focus-outline: #{$kendo-focus-outline};
-
-        --kendo-subtle-text: #{$kendo-subtle-text};
-
-        --kendo-invalid-bg: #{$kendo-invalid-bg};
-        --kendo-invalid-text: #{$kendo-invalid-text};
-        --kendo-invalid-border: #{$kendo-invalid-border};
-        --kendo-invalid-shadow: #{$kendo-invalid-shadow};
-
-        --kendo-border-radius-sm: #{$kendo-border-radius-sm};
-        --kendo-border-radius-md: #{$kendo-border-radius-md};
-        --kendo-border-radius-lg: #{$kendo-border-radius-lg};
-    }
-
-    // Text colors
-    @each $theme-color, $color-props in $kendo-theme-colors {
-        $_color: k-map-get( $color-props, text );
-
-        .k-text-#{$theme-color},
-        .k-color-#{$theme-color} {
-            color: var( --kendo-text-#{$theme-color}, #{$_color} );
-        }
-        .\!k-text-#{$theme-color},
-        .\!k-color-#{$theme-color} {
-            color: var( --kendo-text-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
-        }
-
-        .k-bg-#{$theme-color} {
-            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} );
-        }
-        .\!k-bg-#{$theme-color} {
-            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
-        }
-    };
-}