@progress/kendo-theme-core 7.3.0-dev.1 → 8.0.0-dev.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -437,19 +437,7 @@
|
|
|
437
437
|
"context": {
|
|
438
438
|
"type": "function",
|
|
439
439
|
"name": "k-generate-color-variations",
|
|
440
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
441
|
-
"line": {
|
|
442
|
-
"start": 8,
|
|
443
|
-
"end": 122
|
|
444
|
-
}
|
|
445
|
-
}
|
|
446
|
-
},
|
|
447
|
-
{
|
|
448
|
-
"description": "Generates all color variations of a given main color\n",
|
|
449
|
-
"context": {
|
|
450
|
-
"type": "function",
|
|
451
|
-
"name": "k-generate-color-variations",
|
|
452
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
440
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
453
441
|
"line": {
|
|
454
442
|
"start": 8,
|
|
455
443
|
"end": 122
|
|
@@ -1271,7 +1259,7 @@
|
|
|
1271
1259
|
"context": {
|
|
1272
1260
|
"type": "function",
|
|
1273
1261
|
"name": "k-generate-color-variations",
|
|
1274
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1262
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1275
1263
|
"line": {
|
|
1276
1264
|
"start": 8,
|
|
1277
1265
|
"end": 122
|
|
@@ -1283,7 +1271,7 @@
|
|
|
1283
1271
|
"context": {
|
|
1284
1272
|
"type": "function",
|
|
1285
1273
|
"name": "k-generate-color-variations",
|
|
1286
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1274
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1287
1275
|
"line": {
|
|
1288
1276
|
"start": 8,
|
|
1289
1277
|
"end": 122
|
|
@@ -1295,7 +1283,7 @@
|
|
|
1295
1283
|
"context": {
|
|
1296
1284
|
"type": "function",
|
|
1297
1285
|
"name": "k-generate-color-variations",
|
|
1298
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1286
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1299
1287
|
"line": {
|
|
1300
1288
|
"start": 8,
|
|
1301
1289
|
"end": 122
|
|
@@ -1307,7 +1295,7 @@
|
|
|
1307
1295
|
"context": {
|
|
1308
1296
|
"type": "function",
|
|
1309
1297
|
"name": "k-generate-color-variations",
|
|
1310
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1298
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1311
1299
|
"line": {
|
|
1312
1300
|
"start": 8,
|
|
1313
1301
|
"end": 122
|
|
@@ -1319,7 +1307,7 @@
|
|
|
1319
1307
|
"context": {
|
|
1320
1308
|
"type": "function",
|
|
1321
1309
|
"name": "k-generate-color-variations",
|
|
1322
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1310
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1323
1311
|
"line": {
|
|
1324
1312
|
"start": 8,
|
|
1325
1313
|
"end": 122
|
|
@@ -1331,7 +1319,7 @@
|
|
|
1331
1319
|
"context": {
|
|
1332
1320
|
"type": "function",
|
|
1333
1321
|
"name": "k-generate-color-variations",
|
|
1334
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1322
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1335
1323
|
"line": {
|
|
1336
1324
|
"start": 8,
|
|
1337
1325
|
"end": 122
|
|
@@ -1343,7 +1331,7 @@
|
|
|
1343
1331
|
"context": {
|
|
1344
1332
|
"type": "function",
|
|
1345
1333
|
"name": "k-generate-color-variations",
|
|
1346
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1334
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1347
1335
|
"line": {
|
|
1348
1336
|
"start": 8,
|
|
1349
1337
|
"end": 122
|
|
@@ -1355,7 +1343,7 @@
|
|
|
1355
1343
|
"context": {
|
|
1356
1344
|
"type": "function",
|
|
1357
1345
|
"name": "k-generate-color-variations",
|
|
1358
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1346
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1359
1347
|
"line": {
|
|
1360
1348
|
"start": 8,
|
|
1361
1349
|
"end": 122
|
|
@@ -1367,7 +1355,7 @@
|
|
|
1367
1355
|
"context": {
|
|
1368
1356
|
"type": "function",
|
|
1369
1357
|
"name": "k-generate-color-variations",
|
|
1370
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1358
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1371
1359
|
"line": {
|
|
1372
1360
|
"start": 8,
|
|
1373
1361
|
"end": 122
|
|
@@ -1379,7 +1367,7 @@
|
|
|
1379
1367
|
"context": {
|
|
1380
1368
|
"type": "function",
|
|
1381
1369
|
"name": "k-generate-color-variations",
|
|
1382
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1370
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1383
1371
|
"line": {
|
|
1384
1372
|
"start": 8,
|
|
1385
1373
|
"end": 122
|
|
@@ -1391,7 +1379,7 @@
|
|
|
1391
1379
|
"context": {
|
|
1392
1380
|
"type": "function",
|
|
1393
1381
|
"name": "k-generate-color-variations",
|
|
1394
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1382
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1395
1383
|
"line": {
|
|
1396
1384
|
"start": 8,
|
|
1397
1385
|
"end": 122
|
|
@@ -1403,7 +1391,7 @@
|
|
|
1403
1391
|
"context": {
|
|
1404
1392
|
"type": "function",
|
|
1405
1393
|
"name": "k-generate-color-variations",
|
|
1406
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1394
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1407
1395
|
"line": {
|
|
1408
1396
|
"start": 8,
|
|
1409
1397
|
"end": 122
|
|
@@ -1415,7 +1403,7 @@
|
|
|
1415
1403
|
"context": {
|
|
1416
1404
|
"type": "function",
|
|
1417
1405
|
"name": "k-generate-color-variations",
|
|
1418
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1406
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1419
1407
|
"line": {
|
|
1420
1408
|
"start": 8,
|
|
1421
1409
|
"end": 122
|
|
@@ -1427,7 +1415,7 @@
|
|
|
1427
1415
|
"context": {
|
|
1428
1416
|
"type": "function",
|
|
1429
1417
|
"name": "k-generate-color-variations",
|
|
1430
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1418
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1431
1419
|
"line": {
|
|
1432
1420
|
"start": 8,
|
|
1433
1421
|
"end": 122
|
|
@@ -1439,7 +1427,7 @@
|
|
|
1439
1427
|
"context": {
|
|
1440
1428
|
"type": "function",
|
|
1441
1429
|
"name": "k-generate-color-variations",
|
|
1442
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1430
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1443
1431
|
"line": {
|
|
1444
1432
|
"start": 8,
|
|
1445
1433
|
"end": 122
|
|
@@ -1451,7 +1439,7 @@
|
|
|
1451
1439
|
"context": {
|
|
1452
1440
|
"type": "function",
|
|
1453
1441
|
"name": "k-generate-color-variations",
|
|
1454
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1442
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1455
1443
|
"line": {
|
|
1456
1444
|
"start": 8,
|
|
1457
1445
|
"end": 122
|
|
@@ -1463,7 +1451,7 @@
|
|
|
1463
1451
|
"context": {
|
|
1464
1452
|
"type": "function",
|
|
1465
1453
|
"name": "k-generate-color-variations",
|
|
1466
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1454
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1467
1455
|
"line": {
|
|
1468
1456
|
"start": 8,
|
|
1469
1457
|
"end": 122
|
|
@@ -1475,7 +1463,7 @@
|
|
|
1475
1463
|
"context": {
|
|
1476
1464
|
"type": "function",
|
|
1477
1465
|
"name": "k-generate-color-variations",
|
|
1478
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1466
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1479
1467
|
"line": {
|
|
1480
1468
|
"start": 8,
|
|
1481
1469
|
"end": 122
|
|
@@ -1487,7 +1475,7 @@
|
|
|
1487
1475
|
"context": {
|
|
1488
1476
|
"type": "function",
|
|
1489
1477
|
"name": "k-generate-color-variations",
|
|
1490
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1478
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1491
1479
|
"line": {
|
|
1492
1480
|
"start": 8,
|
|
1493
1481
|
"end": 122
|
|
@@ -1499,7 +1487,7 @@
|
|
|
1499
1487
|
"context": {
|
|
1500
1488
|
"type": "function",
|
|
1501
1489
|
"name": "k-generate-color-variations",
|
|
1502
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1490
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1503
1491
|
"line": {
|
|
1504
1492
|
"start": 8,
|
|
1505
1493
|
"end": 122
|
|
@@ -1511,7 +1499,7 @@
|
|
|
1511
1499
|
"context": {
|
|
1512
1500
|
"type": "function",
|
|
1513
1501
|
"name": "k-generate-color-variations",
|
|
1514
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1502
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1515
1503
|
"line": {
|
|
1516
1504
|
"start": 8,
|
|
1517
1505
|
"end": 122
|
|
@@ -1523,7 +1511,7 @@
|
|
|
1523
1511
|
"context": {
|
|
1524
1512
|
"type": "function",
|
|
1525
1513
|
"name": "k-generate-color-variations",
|
|
1526
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1514
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1527
1515
|
"line": {
|
|
1528
1516
|
"start": 8,
|
|
1529
1517
|
"end": 122
|
|
@@ -1535,7 +1523,7 @@
|
|
|
1535
1523
|
"context": {
|
|
1536
1524
|
"type": "function",
|
|
1537
1525
|
"name": "k-generate-color-variations",
|
|
1538
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1526
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1539
1527
|
"line": {
|
|
1540
1528
|
"start": 8,
|
|
1541
1529
|
"end": 122
|
|
@@ -1547,7 +1535,7 @@
|
|
|
1547
1535
|
"context": {
|
|
1548
1536
|
"type": "function",
|
|
1549
1537
|
"name": "k-generate-color-variations",
|
|
1550
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1538
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1551
1539
|
"line": {
|
|
1552
1540
|
"start": 8,
|
|
1553
1541
|
"end": 122
|
|
@@ -1559,7 +1547,7 @@
|
|
|
1559
1547
|
"context": {
|
|
1560
1548
|
"type": "function",
|
|
1561
1549
|
"name": "k-generate-color-variations",
|
|
1562
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1550
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1563
1551
|
"line": {
|
|
1564
1552
|
"start": 8,
|
|
1565
1553
|
"end": 122
|
|
@@ -1571,7 +1559,7 @@
|
|
|
1571
1559
|
"context": {
|
|
1572
1560
|
"type": "function",
|
|
1573
1561
|
"name": "k-generate-color-variations",
|
|
1574
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1562
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1575
1563
|
"line": {
|
|
1576
1564
|
"start": 8,
|
|
1577
1565
|
"end": 122
|
|
@@ -1583,7 +1571,7 @@
|
|
|
1583
1571
|
"context": {
|
|
1584
1572
|
"type": "function",
|
|
1585
1573
|
"name": "k-generate-color-variations",
|
|
1586
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1574
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1587
1575
|
"line": {
|
|
1588
1576
|
"start": 8,
|
|
1589
1577
|
"end": 122
|
|
@@ -1595,7 +1583,7 @@
|
|
|
1595
1583
|
"context": {
|
|
1596
1584
|
"type": "function",
|
|
1597
1585
|
"name": "k-generate-color-variations",
|
|
1598
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1586
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1599
1587
|
"line": {
|
|
1600
1588
|
"start": 8,
|
|
1601
1589
|
"end": 122
|
|
@@ -1607,7 +1595,7 @@
|
|
|
1607
1595
|
"context": {
|
|
1608
1596
|
"type": "function",
|
|
1609
1597
|
"name": "k-generate-color-variations",
|
|
1610
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1598
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1611
1599
|
"line": {
|
|
1612
1600
|
"start": 8,
|
|
1613
1601
|
"end": 122
|
|
@@ -1619,7 +1607,7 @@
|
|
|
1619
1607
|
"context": {
|
|
1620
1608
|
"type": "function",
|
|
1621
1609
|
"name": "k-generate-color-variations",
|
|
1622
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1610
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1623
1611
|
"line": {
|
|
1624
1612
|
"start": 8,
|
|
1625
1613
|
"end": 122
|
|
@@ -1631,7 +1619,7 @@
|
|
|
1631
1619
|
"context": {
|
|
1632
1620
|
"type": "function",
|
|
1633
1621
|
"name": "k-generate-color-variations",
|
|
1634
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1622
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1635
1623
|
"line": {
|
|
1636
1624
|
"start": 8,
|
|
1637
1625
|
"end": 122
|
|
@@ -1643,7 +1631,7 @@
|
|
|
1643
1631
|
"context": {
|
|
1644
1632
|
"type": "function",
|
|
1645
1633
|
"name": "k-generate-color-variations",
|
|
1646
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1634
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1647
1635
|
"line": {
|
|
1648
1636
|
"start": 8,
|
|
1649
1637
|
"end": 122
|
|
@@ -1655,7 +1643,7 @@
|
|
|
1655
1643
|
"context": {
|
|
1656
1644
|
"type": "function",
|
|
1657
1645
|
"name": "k-generate-color-variations",
|
|
1658
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1646
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1659
1647
|
"line": {
|
|
1660
1648
|
"start": 8,
|
|
1661
1649
|
"end": 122
|
|
@@ -1667,7 +1655,7 @@
|
|
|
1667
1655
|
"context": {
|
|
1668
1656
|
"type": "function",
|
|
1669
1657
|
"name": "k-generate-color-variations",
|
|
1670
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1658
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1671
1659
|
"line": {
|
|
1672
1660
|
"start": 8,
|
|
1673
1661
|
"end": 122
|
|
@@ -1679,7 +1667,7 @@
|
|
|
1679
1667
|
"context": {
|
|
1680
1668
|
"type": "function",
|
|
1681
1669
|
"name": "k-generate-color-variations",
|
|
1682
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1670
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1683
1671
|
"line": {
|
|
1684
1672
|
"start": 8,
|
|
1685
1673
|
"end": 122
|
|
@@ -1691,7 +1679,7 @@
|
|
|
1691
1679
|
"context": {
|
|
1692
1680
|
"type": "function",
|
|
1693
1681
|
"name": "k-generate-color-variations",
|
|
1694
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1682
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1695
1683
|
"line": {
|
|
1696
1684
|
"start": 8,
|
|
1697
1685
|
"end": 122
|
|
@@ -1703,7 +1691,7 @@
|
|
|
1703
1691
|
"context": {
|
|
1704
1692
|
"type": "function",
|
|
1705
1693
|
"name": "k-generate-color-variations",
|
|
1706
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1694
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1707
1695
|
"line": {
|
|
1708
1696
|
"start": 8,
|
|
1709
1697
|
"end": 122
|
|
@@ -1715,7 +1703,7 @@
|
|
|
1715
1703
|
"context": {
|
|
1716
1704
|
"type": "function",
|
|
1717
1705
|
"name": "k-generate-color-variations",
|
|
1718
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1706
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1719
1707
|
"line": {
|
|
1720
1708
|
"start": 8,
|
|
1721
1709
|
"end": 122
|
|
@@ -1727,7 +1715,7 @@
|
|
|
1727
1715
|
"context": {
|
|
1728
1716
|
"type": "function",
|
|
1729
1717
|
"name": "k-generate-color-variations",
|
|
1730
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1718
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1731
1719
|
"line": {
|
|
1732
1720
|
"start": 8,
|
|
1733
1721
|
"end": 122
|
|
@@ -1739,7 +1727,7 @@
|
|
|
1739
1727
|
"context": {
|
|
1740
1728
|
"type": "function",
|
|
1741
1729
|
"name": "k-generate-color-variations",
|
|
1742
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1730
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1743
1731
|
"line": {
|
|
1744
1732
|
"start": 8,
|
|
1745
1733
|
"end": 122
|
|
@@ -1751,7 +1739,7 @@
|
|
|
1751
1739
|
"context": {
|
|
1752
1740
|
"type": "function",
|
|
1753
1741
|
"name": "k-generate-color-variations",
|
|
1754
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1742
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1755
1743
|
"line": {
|
|
1756
1744
|
"start": 8,
|
|
1757
1745
|
"end": 122
|
|
@@ -1763,7 +1751,7 @@
|
|
|
1763
1751
|
"context": {
|
|
1764
1752
|
"type": "function",
|
|
1765
1753
|
"name": "k-generate-color-variations",
|
|
1766
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1754
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1767
1755
|
"line": {
|
|
1768
1756
|
"start": 8,
|
|
1769
1757
|
"end": 122
|
|
@@ -1775,7 +1763,7 @@
|
|
|
1775
1763
|
"context": {
|
|
1776
1764
|
"type": "function",
|
|
1777
1765
|
"name": "k-generate-color-variations",
|
|
1778
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1766
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1779
1767
|
"line": {
|
|
1780
1768
|
"start": 8,
|
|
1781
1769
|
"end": 122
|
|
@@ -1787,7 +1775,7 @@
|
|
|
1787
1775
|
"context": {
|
|
1788
1776
|
"type": "function",
|
|
1789
1777
|
"name": "k-generate-color-variations",
|
|
1790
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1778
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1791
1779
|
"line": {
|
|
1792
1780
|
"start": 8,
|
|
1793
1781
|
"end": 122
|
|
@@ -1799,7 +1787,7 @@
|
|
|
1799
1787
|
"context": {
|
|
1800
1788
|
"type": "function",
|
|
1801
1789
|
"name": "k-generate-color-variations",
|
|
1802
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1790
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1803
1791
|
"line": {
|
|
1804
1792
|
"start": 8,
|
|
1805
1793
|
"end": 122
|
|
@@ -1811,7 +1799,7 @@
|
|
|
1811
1799
|
"context": {
|
|
1812
1800
|
"type": "function",
|
|
1813
1801
|
"name": "k-generate-color-variations",
|
|
1814
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1802
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1815
1803
|
"line": {
|
|
1816
1804
|
"start": 8,
|
|
1817
1805
|
"end": 122
|
|
@@ -1823,7 +1811,7 @@
|
|
|
1823
1811
|
"context": {
|
|
1824
1812
|
"type": "function",
|
|
1825
1813
|
"name": "k-generate-color-variations",
|
|
1826
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1814
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1827
1815
|
"line": {
|
|
1828
1816
|
"start": 8,
|
|
1829
1817
|
"end": 122
|
|
@@ -1835,7 +1823,7 @@
|
|
|
1835
1823
|
"context": {
|
|
1836
1824
|
"type": "function",
|
|
1837
1825
|
"name": "k-generate-color-variations",
|
|
1838
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1826
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1839
1827
|
"line": {
|
|
1840
1828
|
"start": 8,
|
|
1841
1829
|
"end": 122
|
|
@@ -1847,7 +1835,7 @@
|
|
|
1847
1835
|
"context": {
|
|
1848
1836
|
"type": "function",
|
|
1849
1837
|
"name": "k-generate-color-variations",
|
|
1850
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1838
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1851
1839
|
"line": {
|
|
1852
1840
|
"start": 8,
|
|
1853
1841
|
"end": 122
|
|
@@ -1915,7 +1903,7 @@
|
|
|
1915
1903
|
"context": {
|
|
1916
1904
|
"type": "function",
|
|
1917
1905
|
"name": "k-generate-color-variations",
|
|
1918
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1906
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1919
1907
|
"line": {
|
|
1920
1908
|
"start": 8,
|
|
1921
1909
|
"end": 122
|
|
@@ -1927,7 +1915,7 @@
|
|
|
1927
1915
|
"context": {
|
|
1928
1916
|
"type": "function",
|
|
1929
1917
|
"name": "k-generate-color-variations",
|
|
1930
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1918
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1931
1919
|
"line": {
|
|
1932
1920
|
"start": 8,
|
|
1933
1921
|
"end": 122
|
|
@@ -1939,7 +1927,7 @@
|
|
|
1939
1927
|
"context": {
|
|
1940
1928
|
"type": "function",
|
|
1941
1929
|
"name": "k-generate-color-variations",
|
|
1942
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1930
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1943
1931
|
"line": {
|
|
1944
1932
|
"start": 8,
|
|
1945
1933
|
"end": 122
|
|
@@ -1951,7 +1939,7 @@
|
|
|
1951
1939
|
"context": {
|
|
1952
1940
|
"type": "function",
|
|
1953
1941
|
"name": "k-generate-color-variations",
|
|
1954
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1942
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1955
1943
|
"line": {
|
|
1956
1944
|
"start": 8,
|
|
1957
1945
|
"end": 122
|
|
@@ -1963,7 +1951,7 @@
|
|
|
1963
1951
|
"context": {
|
|
1964
1952
|
"type": "function",
|
|
1965
1953
|
"name": "k-generate-color-variations",
|
|
1966
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1954
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1967
1955
|
"line": {
|
|
1968
1956
|
"start": 8,
|
|
1969
1957
|
"end": 122
|
|
@@ -1975,7 +1963,7 @@
|
|
|
1975
1963
|
"context": {
|
|
1976
1964
|
"type": "function",
|
|
1977
1965
|
"name": "k-generate-color-variations",
|
|
1978
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1966
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1979
1967
|
"line": {
|
|
1980
1968
|
"start": 8,
|
|
1981
1969
|
"end": 122
|
|
@@ -1987,7 +1975,7 @@
|
|
|
1987
1975
|
"context": {
|
|
1988
1976
|
"type": "function",
|
|
1989
1977
|
"name": "k-generate-color-variations",
|
|
1990
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1978
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1991
1979
|
"line": {
|
|
1992
1980
|
"start": 8,
|
|
1993
1981
|
"end": 122
|
|
@@ -1999,7 +1987,7 @@
|
|
|
1999
1987
|
"context": {
|
|
2000
1988
|
"type": "function",
|
|
2001
1989
|
"name": "k-generate-color-variations",
|
|
2002
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
1990
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2003
1991
|
"line": {
|
|
2004
1992
|
"start": 8,
|
|
2005
1993
|
"end": 122
|
|
@@ -2011,7 +1999,7 @@
|
|
|
2011
1999
|
"context": {
|
|
2012
2000
|
"type": "function",
|
|
2013
2001
|
"name": "k-generate-color-variations",
|
|
2014
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2002
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2015
2003
|
"line": {
|
|
2016
2004
|
"start": 8,
|
|
2017
2005
|
"end": 122
|
|
@@ -2023,7 +2011,7 @@
|
|
|
2023
2011
|
"context": {
|
|
2024
2012
|
"type": "function",
|
|
2025
2013
|
"name": "k-generate-color-variations",
|
|
2026
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2014
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2027
2015
|
"line": {
|
|
2028
2016
|
"start": 8,
|
|
2029
2017
|
"end": 122
|
|
@@ -2035,7 +2023,7 @@
|
|
|
2035
2023
|
"context": {
|
|
2036
2024
|
"type": "function",
|
|
2037
2025
|
"name": "k-generate-color-variations",
|
|
2038
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2026
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2039
2027
|
"line": {
|
|
2040
2028
|
"start": 8,
|
|
2041
2029
|
"end": 122
|
|
@@ -2047,7 +2035,7 @@
|
|
|
2047
2035
|
"context": {
|
|
2048
2036
|
"type": "function",
|
|
2049
2037
|
"name": "k-generate-color-variations",
|
|
2050
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2038
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2051
2039
|
"line": {
|
|
2052
2040
|
"start": 8,
|
|
2053
2041
|
"end": 122
|
|
@@ -2059,7 +2047,7 @@
|
|
|
2059
2047
|
"context": {
|
|
2060
2048
|
"type": "function",
|
|
2061
2049
|
"name": "k-generate-color-variations",
|
|
2062
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2050
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2063
2051
|
"line": {
|
|
2064
2052
|
"start": 8,
|
|
2065
2053
|
"end": 122
|
|
@@ -2071,7 +2059,7 @@
|
|
|
2071
2059
|
"context": {
|
|
2072
2060
|
"type": "function",
|
|
2073
2061
|
"name": "k-generate-color-variations",
|
|
2074
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2062
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2075
2063
|
"line": {
|
|
2076
2064
|
"start": 8,
|
|
2077
2065
|
"end": 122
|
|
@@ -2083,7 +2071,7 @@
|
|
|
2083
2071
|
"context": {
|
|
2084
2072
|
"type": "function",
|
|
2085
2073
|
"name": "k-generate-color-variations",
|
|
2086
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2074
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2087
2075
|
"line": {
|
|
2088
2076
|
"start": 8,
|
|
2089
2077
|
"end": 122
|
|
@@ -2095,7 +2083,7 @@
|
|
|
2095
2083
|
"context": {
|
|
2096
2084
|
"type": "function",
|
|
2097
2085
|
"name": "k-generate-color-variations",
|
|
2098
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2086
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2099
2087
|
"line": {
|
|
2100
2088
|
"start": 8,
|
|
2101
2089
|
"end": 122
|
|
@@ -2107,7 +2095,7 @@
|
|
|
2107
2095
|
"context": {
|
|
2108
2096
|
"type": "function",
|
|
2109
2097
|
"name": "k-generate-color-variations",
|
|
2110
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2098
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2111
2099
|
"line": {
|
|
2112
2100
|
"start": 8,
|
|
2113
2101
|
"end": 122
|
|
@@ -2119,7 +2107,7 @@
|
|
|
2119
2107
|
"context": {
|
|
2120
2108
|
"type": "function",
|
|
2121
2109
|
"name": "k-generate-color-variations",
|
|
2122
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2110
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2123
2111
|
"line": {
|
|
2124
2112
|
"start": 8,
|
|
2125
2113
|
"end": 122
|
|
@@ -2131,7 +2119,7 @@
|
|
|
2131
2119
|
"context": {
|
|
2132
2120
|
"type": "function",
|
|
2133
2121
|
"name": "k-generate-color-variations",
|
|
2134
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2122
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2135
2123
|
"line": {
|
|
2136
2124
|
"start": 8,
|
|
2137
2125
|
"end": 122
|
|
@@ -2143,7 +2131,7 @@
|
|
|
2143
2131
|
"context": {
|
|
2144
2132
|
"type": "function",
|
|
2145
2133
|
"name": "k-generate-color-variations",
|
|
2146
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2134
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2147
2135
|
"line": {
|
|
2148
2136
|
"start": 8,
|
|
2149
2137
|
"end": 122
|
|
@@ -2155,7 +2143,7 @@
|
|
|
2155
2143
|
"context": {
|
|
2156
2144
|
"type": "function",
|
|
2157
2145
|
"name": "k-generate-color-variations",
|
|
2158
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2146
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2159
2147
|
"line": {
|
|
2160
2148
|
"start": 8,
|
|
2161
2149
|
"end": 122
|
|
@@ -2167,7 +2155,7 @@
|
|
|
2167
2155
|
"context": {
|
|
2168
2156
|
"type": "function",
|
|
2169
2157
|
"name": "k-generate-color-variations",
|
|
2170
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2158
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2171
2159
|
"line": {
|
|
2172
2160
|
"start": 8,
|
|
2173
2161
|
"end": 122
|
|
@@ -2179,7 +2167,7 @@
|
|
|
2179
2167
|
"context": {
|
|
2180
2168
|
"type": "function",
|
|
2181
2169
|
"name": "k-generate-color-variations",
|
|
2182
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2170
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2183
2171
|
"line": {
|
|
2184
2172
|
"start": 8,
|
|
2185
2173
|
"end": 122
|
|
@@ -2362,7 +2350,7 @@
|
|
|
2362
2350
|
"context": {
|
|
2363
2351
|
"type": "function",
|
|
2364
2352
|
"name": "k-generate-color-variations",
|
|
2365
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
2353
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2366
2354
|
"line": {
|
|
2367
2355
|
"start": 8,
|
|
2368
2356
|
"end": 122
|
|
@@ -2526,10 +2514,6 @@
|
|
|
2526
2514
|
"type": "function",
|
|
2527
2515
|
"name": "k-try-shade"
|
|
2528
2516
|
},
|
|
2529
|
-
{
|
|
2530
|
-
"type": "function",
|
|
2531
|
-
"name": "k-contrast-color"
|
|
2532
|
-
},
|
|
2533
2517
|
{
|
|
2534
2518
|
"type": "function",
|
|
2535
2519
|
"name": "k-try-shade"
|
|
@@ -3221,7 +3205,7 @@
|
|
|
3221
3205
|
"context": {
|
|
3222
3206
|
"type": "function",
|
|
3223
3207
|
"name": "k-generate-color-variations",
|
|
3224
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
3208
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3225
3209
|
"line": {
|
|
3226
3210
|
"start": 8,
|
|
3227
3211
|
"end": 122
|
|
@@ -3233,7 +3217,7 @@
|
|
|
3233
3217
|
"context": {
|
|
3234
3218
|
"type": "function",
|
|
3235
3219
|
"name": "k-generate-color-variations",
|
|
3236
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
3220
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3237
3221
|
"line": {
|
|
3238
3222
|
"start": 8,
|
|
3239
3223
|
"end": 122
|
|
@@ -3245,7 +3229,7 @@
|
|
|
3245
3229
|
"context": {
|
|
3246
3230
|
"type": "function",
|
|
3247
3231
|
"name": "k-generate-color-variations",
|
|
3248
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
3232
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3249
3233
|
"line": {
|
|
3250
3234
|
"start": 8,
|
|
3251
3235
|
"end": 122
|
|
@@ -3257,7 +3241,7 @@
|
|
|
3257
3241
|
"context": {
|
|
3258
3242
|
"type": "function",
|
|
3259
3243
|
"name": "k-generate-color-variations",
|
|
3260
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
3244
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3261
3245
|
"line": {
|
|
3262
3246
|
"start": 8,
|
|
3263
3247
|
"end": 122
|
|
@@ -3343,7 +3327,7 @@
|
|
|
3343
3327
|
"context": {
|
|
3344
3328
|
"type": "function",
|
|
3345
3329
|
"name": "k-generate-color-variations",
|
|
3346
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
3330
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3347
3331
|
"line": {
|
|
3348
3332
|
"start": 8,
|
|
3349
3333
|
"end": 122
|
|
@@ -3355,7 +3339,7 @@
|
|
|
3355
3339
|
"context": {
|
|
3356
3340
|
"type": "function",
|
|
3357
3341
|
"name": "k-generate-color-variations",
|
|
3358
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
3342
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3359
3343
|
"line": {
|
|
3360
3344
|
"start": 8,
|
|
3361
3345
|
"end": 122
|
|
@@ -4749,7 +4733,7 @@
|
|
|
4749
4733
|
"context": {
|
|
4750
4734
|
"type": "function",
|
|
4751
4735
|
"name": "k-generate-color-variations",
|
|
4752
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
4736
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
4753
4737
|
"line": {
|
|
4754
4738
|
"start": 8,
|
|
4755
4739
|
"end": 122
|
|
@@ -4761,7 +4745,7 @@
|
|
|
4761
4745
|
"context": {
|
|
4762
4746
|
"type": "function",
|
|
4763
4747
|
"name": "k-generate-color-variations",
|
|
4764
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
4748
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
4765
4749
|
"line": {
|
|
4766
4750
|
"start": 8,
|
|
4767
4751
|
"end": 122
|
|
@@ -4773,7 +4757,7 @@
|
|
|
4773
4757
|
"context": {
|
|
4774
4758
|
"type": "function",
|
|
4775
4759
|
"name": "k-generate-color-variations",
|
|
4776
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
4760
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
4777
4761
|
"line": {
|
|
4778
4762
|
"start": 8,
|
|
4779
4763
|
"end": 122
|
|
@@ -4785,7 +4769,7 @@
|
|
|
4785
4769
|
"context": {
|
|
4786
4770
|
"type": "function",
|
|
4787
4771
|
"name": "k-generate-color-variations",
|
|
4788
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
4772
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
4789
4773
|
"line": {
|
|
4790
4774
|
"start": 8,
|
|
4791
4775
|
"end": 122
|
|
@@ -4797,7 +4781,7 @@
|
|
|
4797
4781
|
"context": {
|
|
4798
4782
|
"type": "function",
|
|
4799
4783
|
"name": "k-generate-color-variations",
|
|
4800
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
4784
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
4801
4785
|
"line": {
|
|
4802
4786
|
"start": 8,
|
|
4803
4787
|
"end": 122
|
|
@@ -4809,7 +4793,7 @@
|
|
|
4809
4793
|
"context": {
|
|
4810
4794
|
"type": "function",
|
|
4811
4795
|
"name": "k-generate-color-variations",
|
|
4812
|
-
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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-
|
|
4796
|
+
"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: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: k-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: k-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: k-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: k-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: k-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: k-map-merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
4813
4797
|
"line": {
|
|
4814
4798
|
"start": 8,
|
|
4815
4799
|
"end": 122
|