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

package/dist/all.scss

@@ -707,7 +707,7 @@ $kendo-color-level-step: 8% !default;
 }
 
 // #endregion
-// #region @import "./_color-variations.import.scss"; -> scss/functions/_color-variations.import.scss
+// #region @import "./_color-system.import.scss"; -> scss/functions/_color-system.import.scss
 /// Generates all color variations of a given main color
 /// @param {String} $name - The name of the main color
 /// @param {Color} $color - The color value to be assigned to the main color
@@ -830,6 +830,22 @@ $kendo-color-level-step: 8% !default;
 
     @return $result;
 }
+
+/// Takes a color name from the $kendo-colors map as a parameter
+/// and returns a CSS variable with the actual color as a fallback
+/// @param {String} $key - The name of a color/key in the $kendo-colors map
+/// @return {String} - CSS variable with the actual color as a fallback
+///
+/// @group color-system
+@function k-color($key) {
+    $_color: k-map-get($kendo-colors, $key);
+
+    @if ($_color) {
+        @return var(--kendo-color-#{$key}, $_color);
+    } @else {
+        @error "Color Variable \`#{$key}\` does not exists in the color collection.";
+    }
+}
 // #endregion
 // #region @import "./_custom-properties.import.scss"; -> scss/functions/_custom-properties.import.scss
 @function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
@@ -3209,16 +3225,6 @@ $_default-colors: (
 $kendo-colors: $_default-colors !default;
 $kendo-colors: k-map-merge($_default-colors, $kendo-colors);
 
-@function k-color($key) {
-    $_color: k-map-get($kendo-colors, $key);
-
-    @if ($_color) {
-        @return var(--kendo-color-#{$key}, $_color);
-    } @else {
-        @error "Color Variable \`#{$key}\` does not exists in the color collection.";
-    }
-}
-
 @mixin color-system--styles() {
     :root {
         @each $key, $value in $kendo-colors {

package/dist/meta/sassdoc-data.json

@@ -342,6 +342,21 @@
                 "path": "core/scss/color-system/_swatch.scss",
                 "name": "_swatch.scss"
             },
+            "usedBy": [
+                {
+                    "description": "Takes a color name from the $kendo-colors map as a parameter\nand returns a CSS variable with the actual color as a fallback\n",
+                    "context": {
+                        "type": "function",
+                        "name": "k-color",
+                        "code": "\n    $_color: k-map-get($kendo-colors, $key);\n\n    @if ($_color) {\n        @return var(--kendo-color-#{$key}, $_color);\n    } @else {\n        @error \"Color Variable \\`#{$key}\\` does not exists in the color collection.\";\n    }\n",
+                        "line": {
+                            "start": 130,
+                            "end": 138
+                        },
+                        "signature": "k-color($key)"
+                    }
+                }
+            ],
             "resolvedValue": "(app-surface: null, on-app-surface: null, subtle: null, surface: null, surface-alt: null, border: null, border-alt: null, base-subtle: null, base-subtle-hover: null, base-subtle-active: null, base: null, base-hover: null, base-active: null, base-emphasis: null, base-on-subtle: null, on-base: null, base-on-surface: null, primary-subtle: null, primary-subtle-hover: null, primary-subtle-active: null, primary: null, primary-hover: null, primary-active: null, primary-emphasis: null, primary-on-subtle: null, on-primary: null, primary-on-surface: null, secondary-subtle: null, secondary-subtle-hover: null, secondary-subtle-active: null, secondary: null, secondary-hover: null, secondary-active: null, secondary-emphasis: null, secondary-on-subtle: null, on-secondary: null, secondary-on-surface: null, tertiary-subtle: null, tertiary-subtle-hover: null, tertiary-subtle-active: null, tertiary: null, tertiary-hover: null, tertiary-active: null, tertiary-emphasis: null, tertiary-on-subtle: null, on-tertiary: null, tertiary-on-surface: null, info-subtle: null, info-subtle-hover: null, info-subtle-active: null, info: null, info-hover: null, info-active: null, info-emphasis: null, info-on-subtle: null, on-info: null, info-on-surface: null, success-subtle: null, success-subtle-hover: null, success-subtle-active: null, success: null, success-hover: null, success-active: null, success-emphasis: null, success-on-subtle: null, on-success: null, success-on-surface: null, warning-subtle: null, warning-subtle-hover: null, warning-subtle-active: null, warning: null, warning-hover: null, warning-active: null, warning-emphasis: null, warning-on-subtle: null, on-warning: null, warning-on-surface: null, error-subtle: null, error-subtle-hover: null, error-subtle-active: null, error: null, error-hover: null, error-active: null, error-emphasis: null, error-on-subtle: null, on-error: null, error-on-surface: null, light-subtle: null, light-subtle-hover: null, light-subtle-active: null, light: null, light-hover: null, light-active: null, light-emphasis: null, light-on-subtle: null, on-light: null, light-on-surface: null, dark-subtle: null, dark-subtle-hover: null, dark-subtle-active: null, dark: null, dark-hover: null, dark-active: null, dark-emphasis: null, dark-on-subtle: null, on-dark: null, dark-on-surface: null, inverse-subtle: null, inverse-subtle-hover: null, inverse-subtle-active: null, inverse: null, inverse-hover: null, inverse-active: null, inverse-emphasis: null, inverse-on-subtle: null, on-inverse: null, inverse-on-surface: null, series-a: null, series-a-bold: null, series-a-bolder: null, series-a-subtle: null, series-a-subtler: null, series-b: null, series-b-bold: null, series-b-bolder: null, series-b-subtle: null, series-b-subtler: null, series-c: null, series-c-bold: null, series-c-bolder: null, series-c-subtle: null, series-c-subtler: null, series-d: null, series-d-bold: null, series-d-bolder: null, series-d-subtle: null, series-d-subtler: null, series-e: null, series-e-bold: null, series-e-bolder: null, series-e-subtle: null, series-e-subtler: null, series-f: null, series-f-bold: null, series-f-bolder: null, series-f-subtle: null, series-f-subtler: null)",
             "resolvedType": "Map"
         },
@@ -3947,8 +3962,8 @@
                 }
             ],
             "file": {
-                "path": "core/scss/functions/_color-variations.import.scss",
-                "name": "_color-variations.import.scss"
+                "path": "core/scss/functions/_color-system.import.scss",
+                "name": "_color-system.import.scss"
             },
             "examples": [],
             "parameters": [
@@ -3969,6 +3984,56 @@
                 }
             ]
         },
+        {
+            "description": "Takes a color name from the $kendo-colors map as a parameter\nand returns a CSS variable with the actual color as a fallback\n",
+            "commentRange": {
+                "start": 124,
+                "end": 129
+            },
+            "context": {
+                "type": "function",
+                "name": "k-color",
+                "code": "\n    $_color: k-map-get($kendo-colors, $key);\n\n    @if ($_color) {\n        @return var(--kendo-color-#{$key}, $_color);\n    } @else {\n        @error \"Color Variable \\`#{$key}\\` does not exists in the color collection.\";\n    }\n",
+                "line": {
+                    "start": 130,
+                    "end": 138
+                },
+                "signature": "k-color($key)"
+            },
+            "return": {
+                "type": "String",
+                "description": "CSS variable with the actual color as a fallback\n"
+            },
+            "group": [
+                "color-system"
+            ],
+            "access": "public",
+            "require": [
+                {
+                    "type": "function",
+                    "name": "k-map-get"
+                },
+                {
+                    "type": "variable",
+                    "name": "kendo-colors"
+                }
+            ],
+            "throw": [
+                "Color Variable \\`#{$key}\\` does not exists in the color collection."
+            ],
+            "file": {
+                "path": "core/scss/functions/_color-system.import.scss",
+                "name": "_color-system.import.scss"
+            },
+            "examples": [],
+            "parameters": [
+                {
+                    "type": "String",
+                    "name": "key",
+                    "description": "The name of a color/key in the $kendo-colors map"
+                }
+            ]
+        },
         {
             "description": "Returns the alpha channel of a color.\n",
             "commentRange": {
@@ -5790,6 +5855,19 @@
                 "name": "_map.import.scss"
             },
             "usedBy": [
+                {
+                    "description": "Takes a color name from the $kendo-colors map as a parameter\nand returns a CSS variable with the actual color as a fallback\n",
+                    "context": {
+                        "type": "function",
+                        "name": "k-color",
+                        "code": "\n    $_color: k-map-get($kendo-colors, $key);\n\n    @if ($_color) {\n        @return var(--kendo-color-#{$key}, $_color);\n    } @else {\n        @error \"Color Variable \\`#{$key}\\` does not exists in the color collection.\";\n    }\n",
+                        "line": {
+                            "start": 130,
+                            "end": 138
+                        },
+                        "signature": "k-color($key)"
+                    }
+                },
                 {
                     "description": "Returns a deep-map with the keys and values from `$map` and `$args`.\n",
                     "context": {
@@ -10036,6 +10114,21 @@
                         "path": "core/scss/color-system/_swatch.scss",
                         "name": "_swatch.scss"
                     },
+                    "usedBy": [
+                        {
+                            "description": "Takes a color name from the $kendo-colors map as a parameter\nand returns a CSS variable with the actual color as a fallback\n",
+                            "context": {
+                                "type": "function",
+                                "name": "k-color",
+                                "code": "\n    $_color: k-map-get($kendo-colors, $key);\n\n    @if ($_color) {\n        @return var(--kendo-color-#{$key}, $_color);\n    } @else {\n        @error \"Color Variable \\`#{$key}\\` does not exists in the color collection.\";\n    }\n",
+                                "line": {
+                                    "start": 130,
+                                    "end": 138
+                                },
+                                "signature": "k-color($key)"
+                            }
+                        }
+                    ],
                     "resolvedValue": "(app-surface: null, on-app-surface: null, subtle: null, surface: null, surface-alt: null, border: null, border-alt: null, base-subtle: null, base-subtle-hover: null, base-subtle-active: null, base: null, base-hover: null, base-active: null, base-emphasis: null, base-on-subtle: null, on-base: null, base-on-surface: null, primary-subtle: null, primary-subtle-hover: null, primary-subtle-active: null, primary: null, primary-hover: null, primary-active: null, primary-emphasis: null, primary-on-subtle: null, on-primary: null, primary-on-surface: null, secondary-subtle: null, secondary-subtle-hover: null, secondary-subtle-active: null, secondary: null, secondary-hover: null, secondary-active: null, secondary-emphasis: null, secondary-on-subtle: null, on-secondary: null, secondary-on-surface: null, tertiary-subtle: null, tertiary-subtle-hover: null, tertiary-subtle-active: null, tertiary: null, tertiary-hover: null, tertiary-active: null, tertiary-emphasis: null, tertiary-on-subtle: null, on-tertiary: null, tertiary-on-surface: null, info-subtle: null, info-subtle-hover: null, info-subtle-active: null, info: null, info-hover: null, info-active: null, info-emphasis: null, info-on-subtle: null, on-info: null, info-on-surface: null, success-subtle: null, success-subtle-hover: null, success-subtle-active: null, success: null, success-hover: null, success-active: null, success-emphasis: null, success-on-subtle: null, on-success: null, success-on-surface: null, warning-subtle: null, warning-subtle-hover: null, warning-subtle-active: null, warning: null, warning-hover: null, warning-active: null, warning-emphasis: null, warning-on-subtle: null, on-warning: null, warning-on-surface: null, error-subtle: null, error-subtle-hover: null, error-subtle-active: null, error: null, error-hover: null, error-active: null, error-emphasis: null, error-on-subtle: null, on-error: null, error-on-surface: null, light-subtle: null, light-subtle-hover: null, light-subtle-active: null, light: null, light-hover: null, light-active: null, light-emphasis: null, light-on-subtle: null, on-light: null, light-on-surface: null, dark-subtle: null, dark-subtle-hover: null, dark-subtle-active: null, dark: null, dark-hover: null, dark-active: null, dark-emphasis: null, dark-on-subtle: null, on-dark: null, dark-on-surface: null, inverse-subtle: null, inverse-subtle-hover: null, inverse-subtle-active: null, inverse: null, inverse-hover: null, inverse-active: null, inverse-emphasis: null, inverse-on-subtle: null, on-inverse: null, inverse-on-surface: null, series-a: null, series-a-bold: null, series-a-bolder: null, series-a-subtle: null, series-a-subtler: null, series-b: null, series-b-bold: null, series-b-bolder: null, series-b-subtle: null, series-b-subtler: null, series-c: null, series-c-bold: null, series-c-bolder: null, series-c-subtle: null, series-c-subtler: null, series-d: null, series-d-bold: null, series-d-bolder: null, series-d-subtle: null, series-d-subtler: null, series-e: null, series-e-bold: null, series-e-bolder: null, series-e-subtle: null, series-e-subtler: null, series-f: null, series-f-bold: null, series-f-bolder: null, series-f-subtle: null, series-f-subtler: null)",
                     "resolvedType": "Map"
                 }

package/dist/meta/sassdoc-raw-data.json

@@ -1025,7 +1025,21 @@
         "file": {
             "path": "color-system/_swatch.scss",
             "name": "_swatch.scss"
-        }
+        },
+        "usedBy": [
+            {
+                "description": "Takes a color name from the $kendo-colors map as a parameter\nand returns a CSS variable with the actual color as a fallback\n",
+                "context": {
+                    "type": "function",
+                    "name": "k-color",
+                    "code": "\n    $_color: k-map-get($kendo-colors, $key);\n\n    @if ($_color) {\n        @return var(--kendo-color-#{$key}, $_color);\n    } @else {\n        @error \"Color Variable \\`#{$key}\\` does not exists in the color collection.\";\n    }\n",
+                    "line": {
+                        "start": 130,
+                        "end": 138
+                    }
+                }
+            }
+        ]
     },
     {
         "description": "Set a specific jump point for requesting color jumps\n",
@@ -2724,8 +2738,56 @@
             }
         ],
         "file": {
-            "path": "functions/_color-variations.import.scss",
-            "name": "_color-variations.import.scss"
+            "path": "functions/_color-system.import.scss",
+            "name": "_color-system.import.scss"
+        }
+    },
+    {
+        "description": "Takes a color name from the $kendo-colors map as a parameter\nand returns a CSS variable with the actual color as a fallback\n",
+        "commentRange": {
+            "start": 124,
+            "end": 129
+        },
+        "context": {
+            "type": "function",
+            "name": "k-color",
+            "code": "\n    $_color: k-map-get($kendo-colors, $key);\n\n    @if ($_color) {\n        @return var(--kendo-color-#{$key}, $_color);\n    } @else {\n        @error \"Color Variable \\`#{$key}\\` does not exists in the color collection.\";\n    }\n",
+            "line": {
+                "start": 130,
+                "end": 138
+            }
+        },
+        "parameter": [
+            {
+                "type": "String",
+                "name": "key",
+                "description": "The name of a color/key in the $kendo-colors map"
+            }
+        ],
+        "return": {
+            "type": "String",
+            "description": "CSS variable with the actual color as a fallback\n"
+        },
+        "group": [
+            "color-system"
+        ],
+        "access": "public",
+        "require": [
+            {
+                "type": "function",
+                "name": "k-map-get"
+            },
+            {
+                "type": "variable",
+                "name": "kendo-colors"
+            }
+        ],
+        "throw": [
+            "Color Variable \\`#{$key}\\` does not exists in the color collection."
+        ],
+        "file": {
+            "path": "functions/_color-system.import.scss",
+            "name": "_color-system.import.scss"
         }
     },
     {
@@ -5836,6 +5898,18 @@
             "name": "_map.import.scss"
         },
         "usedBy": [
+            {
+                "description": "Takes a color name from the $kendo-colors map as a parameter\nand returns a CSS variable with the actual color as a fallback\n",
+                "context": {
+                    "type": "function",
+                    "name": "k-color",
+                    "code": "\n    $_color: k-map-get($kendo-colors, $key);\n\n    @if ($_color) {\n        @return var(--kendo-color-#{$key}, $_color);\n    } @else {\n        @error \"Color Variable \\`#{$key}\\` does not exists in the color collection.\";\n    }\n",
+                    "line": {
+                        "start": 130,
+                        "end": 138
+                    }
+                }
+            },
             {
                 "description": "Returns a deep-map with the keys and values from `$map` and `$args`.\n",
                 "context": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "8.0.2-dev.1",
+  "version": "8.0.2-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -44,5 +44,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "2a309ed276c82c25b7e8124faefa263378e1debe"
+  "gitHead": "d2e0bc66effd4c820a3ca0f87eff34246c2bb9b8"
 }

package/scss/color-system/_swatch.scss

@@ -177,16 +177,6 @@ $_default-colors: (
 $kendo-colors: $_default-colors !default;
 $kendo-colors: k-map-merge($_default-colors, $kendo-colors);
 
-@function k-color($key) {
-    $_color: k-map-get($kendo-colors, $key);
-
-    @if ($_color) {
-        @return var(--kendo-color-#{$key}, $_color);
-    } @else {
-        @error "Color Variable \`#{$key}\` does not exists in the color collection.";
-    }
-}
-
 @mixin color-system--styles() {
     :root {
         @each $key, $value in $kendo-colors {

package/scss/functions/{_color-variations.import.scss → _color-system.import.scss}

@@ -119,4 +119,20 @@
     }
 
     @return $result;
+}
+
+/// Takes a color name from the $kendo-colors map as a parameter
+/// and returns a CSS variable with the actual color as a fallback
+/// @param {String} $key - The name of a color/key in the $kendo-colors map
+/// @return {String} - CSS variable with the actual color as a fallback
+///
+/// @group color-system
+@function k-color($key) {
+    $_color: k-map-get($kendo-colors, $key);
+
+    @if ($_color) {
+        @return var(--kendo-color-#{$key}, $_color);
+    } @else {
+        @error "Color Variable \`#{$key}\` does not exists in the color collection.";
+    }
 }

package/scss/functions/index.import.scss

@@ -1,7 +1,7 @@
 @import "./_color.import.scss";
 @import "./_color-contrast.import.scss";
 @import "./_color-manipulation.import.scss";
-@import "./_color-variations.import.scss";
+@import "./_color-system.import.scss";
 @import "./_custom-properties.import.scss";
 @import "./_escape-string.import.scss";
 @import "./_lang.import.scss";