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

package/dist/meta/sassdoc-data.json

@@ -1312,8 +1312,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
                         },
                         "signature": "k-color($key)"
                     }
@@ -3901,8 +3901,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -3935,16 +3935,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
                 },
                 "signature": "k-generate-color-variations($name, $color, $theme)"
             },
@@ -4284,16 +4284,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
                 },
                 "signature": "k-color($key)"
             },
@@ -4527,8 +4527,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4540,8 +4540,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4553,8 +4553,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4566,8 +4566,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4579,8 +4579,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4592,8 +4592,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4605,8 +4605,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4618,8 +4618,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4631,8 +4631,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4644,8 +4644,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4657,8 +4657,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4670,8 +4670,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4683,8 +4683,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4696,8 +4696,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4709,8 +4709,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4722,8 +4722,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4735,8 +4735,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4748,8 +4748,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4761,8 +4761,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4774,8 +4774,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4787,8 +4787,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4800,8 +4800,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4813,8 +4813,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4826,8 +4826,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4839,8 +4839,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4852,8 +4852,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4865,8 +4865,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4878,8 +4878,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4891,8 +4891,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4904,8 +4904,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4917,8 +4917,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4930,8 +4930,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4943,8 +4943,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4956,8 +4956,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4969,8 +4969,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4982,8 +4982,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -4995,8 +4995,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5008,8 +5008,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5021,8 +5021,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5034,8 +5034,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5047,8 +5047,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5060,8 +5060,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5073,8 +5073,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5086,8 +5086,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5099,8 +5099,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5112,8 +5112,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5125,8 +5125,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5138,8 +5138,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5151,8 +5151,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5218,8 +5218,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5231,8 +5231,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5244,8 +5244,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5257,8 +5257,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5270,8 +5270,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5283,8 +5283,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5296,8 +5296,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5309,8 +5309,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5322,8 +5322,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5335,8 +5335,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5348,8 +5348,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5361,8 +5361,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5374,8 +5374,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5387,8 +5387,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5400,8 +5400,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5413,8 +5413,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5426,8 +5426,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5439,8 +5439,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5452,8 +5452,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5465,8 +5465,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5478,8 +5478,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5491,8 +5491,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -5504,8 +5504,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -6161,8 +6161,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -6174,8 +6174,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
                         },
                         "signature": "k-generate-color-variations($name, $color, $theme)"
                     }
@@ -10839,7 +10839,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
@@ -12465,8 +12465,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
                                 },
                                 "signature": "k-color($key)"
                             }