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

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

@@ -389,8 +389,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             }
@@ -607,16 +607,16 @@
     {
         "description": "Generates all color variations of a given main color\n",
         "commentRange": {
-            "start": 193,
-            "end": 199
+            "start": 180,
+            "end": 186
         },
         "context": {
             "type": "function",
             "name": "k-generate-color-variations",
             "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
             "line": {
-                "start": 200,
-                "end": 314
+                "start": 187,
+                "end": 301
             }
         },
         "parameter": [
@@ -954,16 +954,16 @@
     {
         "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": 316,
-            "end": 321
+            "start": 303,
+            "end": 308
         },
         "context": {
             "type": "function",
             "name": "k-color",
             "code": "\n    $_color: 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": 322,
-                "end": 330
+                "start": 309,
+                "end": 317
             }
         },
         "parameter": [
@@ -2021,8 +2021,8 @@
                     "name": "k-color",
                     "code": "\n    $_color: 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": 322,
-                        "end": 330
+                        "start": 309,
+                        "end": 317
                     }
                 }
             }
@@ -2258,8 +2258,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2270,8 +2270,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2282,8 +2282,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2294,8 +2294,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2306,8 +2306,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2318,8 +2318,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2330,8 +2330,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2342,8 +2342,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2354,8 +2354,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2366,8 +2366,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2378,8 +2378,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2390,8 +2390,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2402,8 +2402,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2414,8 +2414,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2426,8 +2426,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2438,8 +2438,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2450,8 +2450,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2462,8 +2462,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2474,8 +2474,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2486,8 +2486,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2498,8 +2498,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2510,8 +2510,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2522,8 +2522,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2534,8 +2534,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2546,8 +2546,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2558,8 +2558,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2570,8 +2570,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2582,8 +2582,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2594,8 +2594,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2606,8 +2606,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2618,8 +2618,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2630,8 +2630,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2642,8 +2642,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2654,8 +2654,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2666,8 +2666,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2678,8 +2678,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2690,8 +2690,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2702,8 +2702,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2714,8 +2714,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2726,8 +2726,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2738,8 +2738,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2750,8 +2750,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2762,8 +2762,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2774,8 +2774,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2786,8 +2786,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2798,8 +2798,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2810,8 +2810,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2822,8 +2822,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2834,8 +2834,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             }
@@ -2898,8 +2898,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2910,8 +2910,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2922,8 +2922,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2934,8 +2934,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2946,8 +2946,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2958,8 +2958,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2970,8 +2970,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2982,8 +2982,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -2994,8 +2994,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3006,8 +3006,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3018,8 +3018,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3030,8 +3030,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3042,8 +3042,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3054,8 +3054,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3066,8 +3066,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3078,8 +3078,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3090,8 +3090,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3102,8 +3102,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3114,8 +3114,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3126,8 +3126,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3138,8 +3138,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3150,8 +3150,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -3162,8 +3162,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             }
@@ -5430,8 +5430,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -5442,8 +5442,8 @@
                     "name": "k-generate-color-variations",
                     "code": "\n    $result: ();\n\n    // DataViz\n    @if (\n            $name == 'series-a' or\n            $name == 'series-b' or\n            $name == 'series-c' or\n            $name == 'series-d' or\n            $name == 'series-e' or\n            $name == 'series-f'\n        ) {\n        $_variations: (\n            #{$name}: $color,\n            #{$name}-bold: color.mix(black, $color, 25%),\n            #{$name}-bolder: color.mix(black, $color, 50%),\n            #{$name}-subtle: color.mix(white, $color, 25%),\n            #{$name}-subtler: color.mix(white, $color, 50%),\n        );\n\n        $result: map.merge($result, $_variations);\n    } @else {\n        // Default\n        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Bootstrap\n        @if ( $theme == 'bootstrap' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-color-darken( $color, 7.5% ),\n                #{$name}-active: k-color-darken( $color, 10% ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Material\n        @if ( $theme == 'material' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Fluent\n        @if ( $theme == 'fluent' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 0.5 ),\n                #{$name}-active: k-try-shade( $color, 1.5 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n\n        // Classic\n        @if ( $theme == 'classic' ) {\n            $_variations: (\n                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n                #{$name}: $color,\n                #{$name}-hover: k-try-shade( $color, 1 ),\n                #{$name}-active: k-try-shade( $color, 2 ),\n                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n            );\n\n            $result: map.merge($result, $_variations);\n        }\n    }\n\n    @return $result;\n",
                     "line": {
-                        "start": 200,
-                        "end": 314
+                        "start": 187,
+                        "end": 301
                     }
                 }
             },
@@ -10027,7 +10027,7 @@
         "context": {
             "type": "css",
             "name": ".k-sr-only",
-            "value": "position: absolute;\n        left: -1px;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;",
+            "value": "position: absolute;\n        inset-inline-start: -1px;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;",
             "line": {
                 "start": 6,
                 "end": 15